@artsy/palette-mobile 23.14.0 → 24.0.0

package/dist/elements/Radio/RadioDot.js

@@ -1,8 +1,22 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Flex } from "../Flex";
-const INACTIVE_BORDER_WIDTH = 2;
-const ACTIVE_BORDER_WIDTH = 4;
-export const RADIO_DOT_MODES = {
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RadioDot = exports.RADIO_DOT_MODES = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var Flex_1 = require("../Flex");
+var INACTIVE_BORDER_WIDTH = 2;
+var ACTIVE_BORDER_WIDTH = 4;
+exports.RADIO_DOT_MODES = {
     default: {
         resting: {
             borderWidth: INACTIVE_BORDER_WIDTH,
@@ -44,21 +58,23 @@ export const RADIO_DOT_MODES = {
         },
     },
 };
-export const RadioDot = (props) => (_jsx(Container, { ...props, children: _jsx(Dot, {}) }));
-const Container = ({ selected = false, hover = false, error = false, disabled = false, }) => {
-    const mode = (() => {
+var RadioDot = function (props) { return ((0, jsx_runtime_1.jsx)(Container, __assign({}, props, { children: (0, jsx_runtime_1.jsx)(Dot, {}) }))); };
+exports.RadioDot = RadioDot;
+var Container = function (_a) {
+    var _b = _a.selected, selected = _b === void 0 ? false : _b, _c = _a.hover, hover = _c === void 0 ? false : _c, _d = _a.error, error = _d === void 0 ? false : _d, _e = _a.disabled, disabled = _e === void 0 ? false : _e;
+    var mode = (function () {
         switch (true) {
             case disabled:
-                return RADIO_DOT_MODES.disabled;
+                return exports.RADIO_DOT_MODES.disabled;
             case hover:
-                return RADIO_DOT_MODES.hover;
+                return exports.RADIO_DOT_MODES.hover;
             case error:
-                return RADIO_DOT_MODES.error;
+                return exports.RADIO_DOT_MODES.error;
             default:
-                return RADIO_DOT_MODES.default;
+                return exports.RADIO_DOT_MODES.default;
         }
     })();
-    const moreProps = selected ? mode.selected : mode.resting;
-    return (_jsx(Flex, { width: 20, height: 20, borderRadius: 50, alignItems: "center", justifyContent: "center", flexShrink: 0, ...moreProps }));
+    var moreProps = selected ? mode.selected : mode.resting;
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, __assign({ width: 20, height: 20, borderRadius: 50, alignItems: "center", justifyContent: "center", flexShrink: 0 }, moreProps)));
 };
-const Dot = () => (_jsx(Flex, { width: 12, height: 12, borderRadius: 50, alignItems: "center", justifyContent: "center", flexShrink: 0 }));
+var Dot = function () { return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { width: 12, height: 12, borderRadius: 50, alignItems: "center", justifyContent: "center", flexShrink: 0 })); };

package/dist/elements/Radio/index.js

@@ -1,2 +1,7 @@
-export { RadioButton } from "./RadioButton";
-export { RadioDot } from "./RadioDot";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RadioDot = exports.RadioButton = void 0;
+var RadioButton_1 = require("./RadioButton");
+Object.defineProperty(exports, "RadioButton", { enumerable: true, get: function () { return RadioButton_1.RadioButton; } });
+var RadioDot_1 = require("./RadioDot");
+Object.defineProperty(exports, "RadioDot", { enumerable: true, get: function () { return RadioDot_1.RadioDot; } });

package/dist/elements/Screen/Background.js

@@ -1,3 +1,10 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Flex } from "../Flex";
-export const Background = ({ children }) => (_jsx(Flex, { position: "absolute", top: 0, bottom: 0, left: 0, right: 0, children: children }));
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Background = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var Flex_1 = require("../Flex");
+var Background = function (_a) {
+    var children = _a.children;
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { position: "absolute", top: 0, bottom: 0, left: 0, right: 0, children: children }));
+};
+exports.Background = Background;

package/dist/elements/Screen/Body.js

@@ -1,11 +1,38 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-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, 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, { ...scrollViewProps, children: children }) : children }) }) }));
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
 };
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Body = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var react_native_1 = require("react-native");
+var constants_1 = require("./constants");
+var Flex_1 = require("../Flex");
+var Body = function (_a) {
+    var children = _a.children, fullwidth = _a.fullwidth, scroll = _a.scroll, _b = _a.disableKeyboardAvoidance, disableKeyboardAvoidance = _b === void 0 ? false : _b, scrollViewProps = _a.scrollViewProps, flexProps = __rest(_a, ["children", "fullwidth", "scroll", "disableKeyboardAvoidance", "scrollViewProps"]);
+    var Wrapper = disableKeyboardAvoidance ? react_1.Fragment : react_native_1.KeyboardAvoidingView;
+    return ((0, jsx_runtime_1.jsx)(Wrapper, __assign({}, (disableKeyboardAvoidance
+        ? {}
+        : { style: { flex: 1 }, behavior: react_native_1.Platform.OS === "ios" ? "padding" : "height" }), { children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, __assign({ flex: 1 }, 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, __assign({}, scrollViewProps, { children: children })) : children }) })) })));
+};
+exports.Body = Body;

package/dist/elements/Screen/BottomView.js

@@ -1,12 +1,20 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import LinearGradient from "react-native-linear-gradient";
-import { SCREEN_HORIZONTAL_PADDING } from "./constants";
-import { useColor } from "../../utils/hooks/useColor";
-import { Flex } from "../Flex";
-export const BottomView = ({ children, darkMode }) => {
-    const color = useColor();
-    return (_jsxs(_Fragment, { children: [_jsx(LinearGradient, { 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: {
+"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;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_native_linear_gradient_1 = __importDefault(require("react-native-linear-gradient"));
+var constants_1 = require("./constants");
+var useColor_1 = require("../../utils/hooks/useColor");
+var Flex_1 = require("../Flex");
+var BottomView = function (_a) {
+    var children = _a.children, darkMode = _a.darkMode;
+    var 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" }), _jsx(Flex, { px: SCREEN_HORIZONTAL_PADDING, pt: 1, pb: 4, backgroundColor: "background", children: children })] }));
+                }, pointerEvents: "none" }), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { px: constants_1.SCREEN_HORIZONTAL_PADDING, pt: 1, pb: 4, backgroundColor: "background", children: children })] }));
 };
+exports.BottomView = BottomView;

package/dist/elements/Screen/FloatingHeader.js

@@ -1,10 +1,37 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { ZINDEX } from "./constants";
-import { BackButtonWithBackground } from "../BackButton";
-import { Flex } from "../Flex";
-import { Spacer } from "../Spacer";
-export const FloatingHeader = ({ onBack, rightElements, ...flexProps }) => {
-    const insets = useSafeAreaInsets();
-    return (_jsxs(Flex, { position: "absolute", pointerEvents: "box-none", top: insets.top, left: 0, right: 0, zIndex: ZINDEX.floatingHeader, px: 1, py: 1, flexDirection: "row", alignItems: "center", backgroundColor: "background", ...flexProps, children: [_jsx(BackButtonWithBackground, { onPress: onBack }), _jsx(Flex, { flex: 1 }), rightElements && (_jsxs(Flex, { flexDirection: "row", alignItems: "center", children: [_jsx(Spacer, { x: 1 }), rightElements] }))] }));
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
 };
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FloatingHeader = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_native_safe_area_context_1 = require("react-native-safe-area-context");
+var constants_1 = require("./constants");
+var BackButton_1 = require("../BackButton");
+var Flex_1 = require("../Flex");
+var Spacer_1 = require("../Spacer");
+var FloatingHeader = function (_a) {
+    var onBack = _a.onBack, rightElements = _a.rightElements, flexProps = __rest(_a, ["onBack", "rightElements"]);
+    var insets = (0, react_native_safe_area_context_1.useSafeAreaInsets)();
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, __assign({ position: "absolute", pointerEvents: "box-none", top: insets.top, left: 0, right: 0, zIndex: constants_1.ZINDEX.floatingHeader, px: 1, py: 1, flexDirection: "row", alignItems: "center", backgroundColor: "background" }, flexProps, { 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.js

@@ -1,6 +1,21 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Screen } from "../Screen";
-import { Separator } from "../Separator";
-export const FullWidthDivider = (flexProps) => {
-    return (_jsx(Screen.FullWidthItem, { children: _jsx(Separator, { my: 2, ...flexProps }) }));
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
 };
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FullWidthDivider = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var Screen_1 = require("../Screen");
+var Separator_1 = require("../Separator");
+var FullWidthDivider = function (flexProps) {
+    return ((0, jsx_runtime_1.jsx)(Screen_1.Screen.FullWidthItem, { children: (0, jsx_runtime_1.jsx)(Separator_1.Separator, __assign({ my: 2 }, flexProps)) }));
+};
+exports.FullWidthDivider = FullWidthDivider;

package/dist/elements/Screen/FullWidthItem.js

@@ -1,6 +1,21 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { SCREEN_HORIZONTAL_PADDING } from "./constants";
-import { Flex } from "../Flex";
-export const FullWidthItem = (props) => {
-    return _jsx(Flex, { ...props, mx: -SCREEN_HORIZONTAL_PADDING });
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
 };
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FullWidthItem = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var constants_1 = require("./constants");
+var Flex_1 = require("../Flex");
+var FullWidthItem = function (props) {
+    return (0, jsx_runtime_1.jsx)(Flex_1.Flex, __assign({}, props, { mx: -constants_1.SCREEN_HORIZONTAL_PADDING }));
+};
+exports.FullWidthItem = FullWidthItem;

package/dist/elements/Screen/Header.js

@@ -1,30 +1,82 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { ChevronLeftIcon } from "@artsy/icons/native";
-import Animated, { useAnimatedStyle } from "react-native-reanimated";
-import { NAVBAR_HEIGHT, ZINDEX } from "./constants";
-import { useTitleStyles } from "./hooks/useTitleStyles";
-import { DEFAULT_HIT_SLOP, DEFAULT_ICON_SIZE } from "../../constants";
-import { useScreenDimensions, useSpace } from "../../utils/hooks";
-import { Flex } from "../Flex";
-import { Text } from "../Text";
-import { Touchable } from "../Touchable";
-export const AnimatedHeader = (props) => {
-    return _jsx(Header, { animated: true, ...props });
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
 };
-export const Header = ({ animated = false, hideLeftElements, hideRightElements, hideTitle, leftElements, onBack, rightElements, title, titleProps = {}, zIndex = ZINDEX.header, }) => {
-    const { width } = useScreenDimensions();
-    const space = useSpace();
+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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Header = exports.AnimatedHeader = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var native_1 = require("@artsy/icons/native");
+var react_native_reanimated_1 = __importStar(require("react-native-reanimated"));
+var constants_1 = require("./constants");
+var useTitleStyles_1 = require("./hooks/useTitleStyles");
+var constants_2 = require("../../constants");
+var hooks_1 = require("../../utils/hooks");
+var Flex_1 = require("../Flex");
+var Text_1 = require("../Text");
+var Touchable_1 = require("../Touchable");
+var AnimatedHeader = function (props) {
+    return (0, jsx_runtime_1.jsx)(exports.Header, __assign({ animated: true }, props));
+};
+exports.AnimatedHeader = AnimatedHeader;
+var Header = function (_a) {
+    var _b = _a.animated, animated = _b === void 0 ? false : _b, hideLeftElements = _a.hideLeftElements, hideRightElements = _a.hideRightElements, hideTitle = _a.hideTitle, leftElements = _a.leftElements, onBack = _a.onBack, rightElements = _a.rightElements, title = _a.title, _c = _a.titleProps, titleProps = _c === void 0 ? {} : _c, _d = _a.zIndex, zIndex = _d === void 0 ? constants_1.ZINDEX.header : _d;
+    var width = (0, hooks_1.useScreenDimensions)().width;
+    var space = (0, hooks_1.useSpace)();
     // Assumes small left and right elements, it protects from overflowing
     // but doesn't cover edge cases where right or left are bigger
-    const centerMaxWidth = width - space(4) - DEFAULT_ICON_SIZE * 2;
-    return (_jsxs(Flex, { height: NAVBAR_HEIGHT, flexDirection: "row", px: 2, zIndex: zIndex, backgroundColor: "background", alignItems: "center", children: [_jsx(Flex, { flex: 1, children: _jsx(Left, { leftElements: leftElements, onBack: onBack, hideLeftElements: hideLeftElements }) }), _jsx(Flex, { maxWidth: centerMaxWidth, ...titleProps, children: _jsx(Center, { animated: animated, title: title, hideTitle: hideTitle }) }), _jsx(Flex, { flex: 1, alignItems: "flex-end", children: _jsx(Right, { rightElements: rightElements, hideRightElements: hideRightElements }) })] }));
+    var centerMaxWidth = width - space(4) - constants_2.DEFAULT_ICON_SIZE * 2;
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { height: constants_1.NAVBAR_HEIGHT, flexDirection: "row", px: 2, zIndex: zIndex, backgroundColor: "background", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(Flex_1.Flex, { flex: 1, children: (0, jsx_runtime_1.jsx)(Left, { leftElements: leftElements, onBack: onBack, hideLeftElements: hideLeftElements }) }), (0, jsx_runtime_1.jsx)(Flex_1.Flex, __assign({ maxWidth: centerMaxWidth }, titleProps, { children: (0, jsx_runtime_1.jsx)(Center, { animated: animated, title: title, hideTitle: hideTitle }) })), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { flex: 1, alignItems: "flex-end", children: (0, jsx_runtime_1.jsx)(Right, { rightElements: rightElements, hideRightElements: hideRightElements }) })] }));
 };
-const Right = ({ hideRightElements, rightElements }) => {
-    return _jsx(_Fragment, { children: !hideRightElements && rightElements });
+exports.Header = Header;
+var Right = function (_a) {
+    var hideRightElements = _a.hideRightElements, rightElements = _a.rightElements;
+    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: !hideRightElements && rightElements });
 };
-const Center = ({ animated, hideTitle, title }) => {
-    const { display, opacity } = useTitleStyles();
-    const style = useAnimatedStyle(() => {
+var Center = function (_a) {
+    var animated = _a.animated, hideTitle = _a.hideTitle, title = _a.title;
+    var _b = (0, useTitleStyles_1.useTitleStyles)(), display = _b.display, opacity = _b.opacity;
+    var style = (0, react_native_reanimated_1.useAnimatedStyle)(function () {
         return {
             display: display.value,
             opacity: opacity.value,
@@ -33,14 +85,15 @@ const Center = ({ animated, hideTitle, title }) => {
     if (hideTitle) {
         return null;
     }
-    const titleTextElement = (_jsx(Text, { variant: "sm-display", numberOfLines: 1, children: title }));
+    var titleTextElement = ((0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "sm-display", numberOfLines: 1, children: title }));
     if (!animated) {
         return titleTextElement;
     }
-    return _jsx(Animated.View, { style: style, children: titleTextElement });
+    return (0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { style: style, children: titleTextElement });
 };
-const Left = ({ hideLeftElements, leftElements, onBack }) => {
+var Left = function (_a) {
+    var hideLeftElements = _a.hideLeftElements, leftElements = _a.leftElements, onBack = _a.onBack;
     if (hideLeftElements)
         return null;
-    return (_jsx(_Fragment, { children: leftElements || (_jsx(Touchable, { accessibilityRole: "button", accessibilityLabel: "Back", accessibilityHint: "Navigates to the previous screen", onPress: onBack, underlayColor: "transparent", hitSlop: DEFAULT_HIT_SLOP, children: _jsx(ChevronLeftIcon, { fill: "onBackgroundHigh" }) })) }));
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: leftElements || ((0, jsx_runtime_1.jsx)(Touchable_1.Touchable, { accessibilityRole: "button", accessibilityLabel: "Back", accessibilityHint: "Navigates to the previous screen", onPress: onBack, underlayColor: "transparent", hitSlop: constants_2.DEFAULT_HIT_SLOP, children: (0, jsx_runtime_1.jsx)(native_1.ChevronLeftIcon, { fill: "onBackgroundHigh" }) })) }));
 };

package/dist/elements/Screen/Screen.stories.js

@@ -1,50 +1,66 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Flex } from "../Flex";
-import { Screen } from "../Screen";
-import { Text } from "../Text";
-export default {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Fullwidth = exports.FlatListWithAnimatedHeaderAndLargeStickySubHeader = exports.FlatListWithAnimatedHeaderAndStickySubHeader = exports.FlatListWithAnimatedHeader = exports.ScrollViewWithAnimatedHeaderAndRightElement = exports.ScrollViewWithAnimatedHeader = exports.WithRightElementCustomLeftElement = exports.WithHeaderWithoutLeftElementAndRightElement = exports.WithHeaderAndRightElement = exports.WithHeaderAndBottomView = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var Flex_1 = require("../Flex");
+var Screen_1 = require("../Screen");
+var Text_1 = require("../Text");
+exports.default = {
     title: "Screen",
 };
-export const WithHeaderAndBottomView = () => (_jsxs(Screen, { children: [_jsx(Screen.Header, { title: "Title" }), _jsx(Screen.Body, { scroll: true, children: Array.from({ length: 5 }).map((_, i) => (_jsx(Text, { my: 1, children: "\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\"" }, i))) }), _jsx(Screen.BottomView, { children: _jsx(Flex, { backgroundColor: "mono30", height: 100, width: "100%", children: _jsx(Text, { children: "Footer" }) }) })] }));
-WithHeaderAndBottomView.story = {
+var WithHeaderAndBottomView = function () { return ((0, jsx_runtime_1.jsxs)(Screen_1.Screen, { children: [(0, jsx_runtime_1.jsx)(Screen_1.Screen.Header, { title: "Title" }), (0, jsx_runtime_1.jsx)(Screen_1.Screen.Body, { scroll: true, children: Array.from({ length: 5 }).map(function (_, i) { return ((0, jsx_runtime_1.jsx)(Text_1.Text, { my: 1, children: "\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\"" }, i)); }) }), (0, jsx_runtime_1.jsx)(Screen_1.Screen.BottomView, { children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { backgroundColor: "mono30", height: 100, width: "100%", children: (0, jsx_runtime_1.jsx)(Text_1.Text, { children: "Footer" }) }) })] })); };
+exports.WithHeaderAndBottomView = WithHeaderAndBottomView;
+exports.WithHeaderAndBottomView.story = {
     name: "With Header and BottomView",
 };
-export const WithHeaderAndRightElement = () => (_jsxs(Screen, { children: [_jsx(Screen.Header, { title: "Title", rightElements: _jsx(Text, { variant: "xs", children: "Very long right element" }) }), _jsx(Screen.Body, { scroll: true, children: Array.from({ length: 5 }).map((_, i) => (_jsx(Text, { my: 1, children: "\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\"" }, i))) })] }));
-WithHeaderAndRightElement.story = {
+var WithHeaderAndRightElement = function () { return ((0, jsx_runtime_1.jsxs)(Screen_1.Screen, { children: [(0, jsx_runtime_1.jsx)(Screen_1.Screen.Header, { title: "Title", rightElements: (0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "xs", children: "Very long right element" }) }), (0, jsx_runtime_1.jsx)(Screen_1.Screen.Body, { scroll: true, children: Array.from({ length: 5 }).map(function (_, i) { return ((0, jsx_runtime_1.jsx)(Text_1.Text, { my: 1, children: "\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\"" }, i)); }) })] })); };
+exports.WithHeaderAndRightElement = WithHeaderAndRightElement;
+exports.WithHeaderAndRightElement.story = {
     name: "With Header and Right Element",
 };
-export const WithHeaderWithoutLeftElementAndRightElement = () => (_jsxs(Screen, { children: [_jsx(Screen.Header, { title: "Title", hideLeftElements: true, rightElements: _jsx(Text, { variant: "xs", children: "Very long right element" }) }), _jsx(Screen.Body, { scroll: true, children: Array.from({ length: 5 }).map((_, i) => (_jsx(Text, { my: 1, children: "\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\"" }, i))) })] }));
-WithHeaderWithoutLeftElementAndRightElement.story = {
+var WithHeaderWithoutLeftElementAndRightElement = function () { return ((0, jsx_runtime_1.jsxs)(Screen_1.Screen, { children: [(0, jsx_runtime_1.jsx)(Screen_1.Screen.Header, { title: "Title", hideLeftElements: true, rightElements: (0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "xs", children: "Very long right element" }) }), (0, jsx_runtime_1.jsx)(Screen_1.Screen.Body, { scroll: true, children: Array.from({ length: 5 }).map(function (_, i) { return ((0, jsx_runtime_1.jsx)(Text_1.Text, { my: 1, children: "\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\"" }, i)); }) })] })); };
+exports.WithHeaderWithoutLeftElementAndRightElement = WithHeaderWithoutLeftElementAndRightElement;
+exports.WithHeaderWithoutLeftElementAndRightElement.story = {
     name: "With Header, Without Left Element and Right Element",
 };
-export const WithRightElementCustomLeftElement = () => (_jsxs(Screen, { children: [_jsx(Screen.Header, { title: "Title", leftElements: _jsx(Text, { variant: "xs", children: "Very long left element" }), rightElements: _jsx(Text, { variant: "xs", children: "right element" }) }), _jsx(Screen.Body, { scroll: true, children: Array.from({ length: 5 }).map((_, i) => (_jsx(Text, { my: 1, children: "\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\"" }, i))) }), _jsx(Screen.BottomView, { children: _jsx(Flex, { backgroundColor: "mono30", height: 100, width: "100%", children: _jsx(Text, { children: "Footer" }) }) })] }));
-WithRightElementCustomLeftElement.story = {
+var WithRightElementCustomLeftElement = function () { return ((0, jsx_runtime_1.jsxs)(Screen_1.Screen, { children: [(0, jsx_runtime_1.jsx)(Screen_1.Screen.Header, { title: "Title", leftElements: (0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "xs", children: "Very long left element" }), rightElements: (0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "xs", children: "right element" }) }), (0, jsx_runtime_1.jsx)(Screen_1.Screen.Body, { scroll: true, children: Array.from({ length: 5 }).map(function (_, i) { return ((0, jsx_runtime_1.jsx)(Text_1.Text, { my: 1, children: "\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\"" }, i)); }) }), (0, jsx_runtime_1.jsx)(Screen_1.Screen.BottomView, { children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { backgroundColor: "mono30", height: 100, width: "100%", children: (0, jsx_runtime_1.jsx)(Text_1.Text, { children: "Footer" }) }) })] })); };
+exports.WithRightElementCustomLeftElement = WithRightElementCustomLeftElement;
+exports.WithRightElementCustomLeftElement.story = {
     name: "With Right Element & Custom Left Element",
 };
-export const ScrollViewWithAnimatedHeader = () => (_jsxs(Screen, { children: [_jsx(Screen.AnimatedHeader, { title: "Title" }), _jsx(Screen.Body, { children: _jsxs(Screen.ScrollView, { children: [_jsx(Text, { variant: "lg-display", children: "Title" }), Array.from({ length: 5 }).map((_, i) => (_jsx(Text, { my: 1, children: "\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\"" }, i)))] }) }), _jsx(Screen.BottomView, { children: _jsx(Flex, { backgroundColor: "mono30", height: 100, width: "100%", children: _jsx(Text, { children: "Footer" }) }) })] }));
-ScrollViewWithAnimatedHeader.story = {
+var ScrollViewWithAnimatedHeader = function () { return ((0, jsx_runtime_1.jsxs)(Screen_1.Screen, { children: [(0, jsx_runtime_1.jsx)(Screen_1.Screen.AnimatedHeader, { title: "Title" }), (0, jsx_runtime_1.jsx)(Screen_1.Screen.Body, { children: (0, jsx_runtime_1.jsxs)(Screen_1.Screen.ScrollView, { children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "lg-display", children: "Title" }), Array.from({ length: 5 }).map(function (_, i) { return ((0, jsx_runtime_1.jsx)(Text_1.Text, { my: 1, children: "\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\"" }, i)); })] }) }), (0, jsx_runtime_1.jsx)(Screen_1.Screen.BottomView, { children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { backgroundColor: "mono30", height: 100, width: "100%", children: (0, jsx_runtime_1.jsx)(Text_1.Text, { children: "Footer" }) }) })] })); };
+exports.ScrollViewWithAnimatedHeader = ScrollViewWithAnimatedHeader;
+exports.ScrollViewWithAnimatedHeader.story = {
     name: "ScrollView With AnimatedHeader",
 };
-export const ScrollViewWithAnimatedHeaderAndRightElement = () => (_jsxs(Screen, { children: [_jsx(Screen.AnimatedHeader, { title: "Title", rightElements: _jsx(Text, { children: "Right" }) }), _jsx(Screen.Body, { children: _jsxs(Screen.ScrollView, { children: [_jsx(Text, { variant: "lg-display", children: "Title" }), Array.from({ length: 5 }).map((_, i) => (_jsx(Text, { my: 1, children: "\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\"" }, i)))] }) }), _jsx(Screen.BottomView, { children: _jsx(Flex, { backgroundColor: "mono30", height: 100, width: "100%", children: _jsx(Text, { children: "Footer" }) }) })] }));
-ScrollViewWithAnimatedHeaderAndRightElement.story = {
+var ScrollViewWithAnimatedHeaderAndRightElement = function () { return ((0, jsx_runtime_1.jsxs)(Screen_1.Screen, { children: [(0, jsx_runtime_1.jsx)(Screen_1.Screen.AnimatedHeader, { title: "Title", rightElements: (0, jsx_runtime_1.jsx)(Text_1.Text, { children: "Right" }) }), (0, jsx_runtime_1.jsx)(Screen_1.Screen.Body, { children: (0, jsx_runtime_1.jsxs)(Screen_1.Screen.ScrollView, { children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "lg-display", children: "Title" }), Array.from({ length: 5 }).map(function (_, i) { return ((0, jsx_runtime_1.jsx)(Text_1.Text, { my: 1, children: "\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\"" }, i)); })] }) }), (0, jsx_runtime_1.jsx)(Screen_1.Screen.BottomView, { children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { backgroundColor: "mono30", height: 100, width: "100%", children: (0, jsx_runtime_1.jsx)(Text_1.Text, { children: "Footer" }) }) })] })); };
+exports.ScrollViewWithAnimatedHeaderAndRightElement = ScrollViewWithAnimatedHeaderAndRightElement;
+exports.ScrollViewWithAnimatedHeaderAndRightElement.story = {
     name: "ScrollView With AnimatedHeader and Right Element",
 };
-export const FlatListWithAnimatedHeader = () => (_jsxs(Screen, { children: [_jsx(Screen.AnimatedHeader, { title: "Title" }), _jsx(Screen.Body, { children: _jsx(Screen.FlatList, { ListHeaderComponent: () => _jsx(Text, { variant: "lg-display", children: "Title" }), data: Array.from({ length: 50 }).map((_, i) => "Item " + i), renderItem: ({ item, index }) => {
-                    return (_jsx(Text, { my: 1, children: item }, index));
-                } }) }), _jsx(Screen.BottomView, { children: _jsx(Flex, { backgroundColor: "mono30", height: 100, width: "100%", children: _jsx(Text, { children: "Footer" }) }) })] }));
-FlatListWithAnimatedHeader.story = {
+var FlatListWithAnimatedHeader = function () { return ((0, jsx_runtime_1.jsxs)(Screen_1.Screen, { children: [(0, jsx_runtime_1.jsx)(Screen_1.Screen.AnimatedHeader, { title: "Title" }), (0, jsx_runtime_1.jsx)(Screen_1.Screen.Body, { children: (0, jsx_runtime_1.jsx)(Screen_1.Screen.FlatList, { ListHeaderComponent: function () { return (0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "lg-display", children: "Title" }); }, data: Array.from({ length: 50 }).map(function (_, i) { return "Item " + i; }), renderItem: function (_a) {
+                    var item = _a.item, index = _a.index;
+                    return ((0, jsx_runtime_1.jsx)(Text_1.Text, { my: 1, children: item }, index));
+                } }) }), (0, jsx_runtime_1.jsx)(Screen_1.Screen.BottomView, { children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { backgroundColor: "mono30", height: 100, width: "100%", children: (0, jsx_runtime_1.jsx)(Text_1.Text, { children: "Footer" }) }) })] })); };
+exports.FlatListWithAnimatedHeader = FlatListWithAnimatedHeader;
+exports.FlatListWithAnimatedHeader.story = {
     name: "FlatList With AnimatedHeader",
 };
-export const FlatListWithAnimatedHeaderAndStickySubHeader = () => (_jsxs(Screen, { children: [_jsx(Screen.AnimatedHeader, { title: "Title" }), _jsx(Screen.StickySubHeader, { title: "Title", children: _jsx(Flex, { width: "100%", height: 60, backgroundColor: "red10" }) }), _jsx(Screen.Body, { children: _jsx(Screen.FlatList, { data: Array.from({ length: 50 }).map((_, i) => "Item " + i), renderItem: ({ item, index }) => {
-                    return (_jsx(Text, { my: 1, children: item }, index));
-                } }) })] }));
-FlatListWithAnimatedHeaderAndStickySubHeader.story = {
+var FlatListWithAnimatedHeaderAndStickySubHeader = function () { return ((0, jsx_runtime_1.jsxs)(Screen_1.Screen, { children: [(0, jsx_runtime_1.jsx)(Screen_1.Screen.AnimatedHeader, { title: "Title" }), (0, jsx_runtime_1.jsx)(Screen_1.Screen.StickySubHeader, { title: "Title", children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { width: "100%", height: 60, backgroundColor: "red10" }) }), (0, jsx_runtime_1.jsx)(Screen_1.Screen.Body, { children: (0, jsx_runtime_1.jsx)(Screen_1.Screen.FlatList, { data: Array.from({ length: 50 }).map(function (_, i) { return "Item " + i; }), renderItem: function (_a) {
+                    var item = _a.item, index = _a.index;
+                    return ((0, jsx_runtime_1.jsx)(Text_1.Text, { my: 1, children: item }, index));
+                } }) })] })); };
+exports.FlatListWithAnimatedHeaderAndStickySubHeader = FlatListWithAnimatedHeaderAndStickySubHeader;
+exports.FlatListWithAnimatedHeaderAndStickySubHeader.story = {
     name: "FlatList With AnimatedHeader and StickySubHeader",
 };
-export const FlatListWithAnimatedHeaderAndLargeStickySubHeader = () => (_jsxs(Screen, { children: [_jsx(Screen.AnimatedHeader, { title: "Title" }), _jsx(Screen.StickySubHeader, { title: "Title", largeTitle: true, children: _jsx(Flex, { width: "100%", height: 60, backgroundColor: "red10" }) }), _jsx(Screen.Body, { children: _jsx(Screen.FlatList, { data: Array.from({ length: 50 }).map((_, i) => "Item " + i), renderItem: ({ item, index }) => {
-                    return (_jsx(Text, { my: 1, children: item }, index));
-                } }) })] }));
-FlatListWithAnimatedHeaderAndLargeStickySubHeader.story = {
+var FlatListWithAnimatedHeaderAndLargeStickySubHeader = function () { return ((0, jsx_runtime_1.jsxs)(Screen_1.Screen, { children: [(0, jsx_runtime_1.jsx)(Screen_1.Screen.AnimatedHeader, { title: "Title" }), (0, jsx_runtime_1.jsx)(Screen_1.Screen.StickySubHeader, { title: "Title", largeTitle: true, children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { width: "100%", height: 60, backgroundColor: "red10" }) }), (0, jsx_runtime_1.jsx)(Screen_1.Screen.Body, { children: (0, jsx_runtime_1.jsx)(Screen_1.Screen.FlatList, { data: Array.from({ length: 50 }).map(function (_, i) { return "Item " + i; }), renderItem: function (_a) {
+                    var item = _a.item, index = _a.index;
+                    return ((0, jsx_runtime_1.jsx)(Text_1.Text, { my: 1, children: item }, index));
+                } }) })] })); };
+exports.FlatListWithAnimatedHeaderAndLargeStickySubHeader = FlatListWithAnimatedHeaderAndLargeStickySubHeader;
+exports.FlatListWithAnimatedHeaderAndLargeStickySubHeader.story = {
     name: "FlatList With AnimatedHeader and large StickySubHeader",
 };
-export const Fullwidth = () => (_jsxs(Screen, { children: [_jsx(Screen.Header, { title: "Title" }), _jsx(Screen.Body, { fullwidth: true, children: _jsx(Text, { children: "\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\"" }) })] }));
+var Fullwidth = function () { return ((0, jsx_runtime_1.jsxs)(Screen_1.Screen, { children: [(0, jsx_runtime_1.jsx)(Screen_1.Screen.Header, { title: "Title" }), (0, jsx_runtime_1.jsx)(Screen_1.Screen.Body, { fullwidth: true, children: (0, jsx_runtime_1.jsx)(Text_1.Text, { children: "\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\"" }) })] })); };
+exports.Fullwidth = Fullwidth;

package/dist/elements/Screen/ScreenBase.js

@@ -1,12 +1,40 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { ScreenScrollContextProvider } from "./ScreenScrollContext";
-import { Flex } from "../Flex";
-export const ScreenBase = ({ children, safeArea = true, ...flexProps }) => {
-    const insets = useSafeAreaInsets();
-    return (_jsx(ScreenScrollContextProvider, { children: _jsxs(Flex, { flex: 1, backgroundColor: "background", mt: safeArea ? insets.top : 0, ...flexProps, children: [children, _jsx(SafeAreaCover, { safeArea: true })] }) }));
-};
-const SafeAreaCover = ({ safeArea }) => {
-    const insets = useSafeAreaInsets();
-    return (_jsx(Flex, { position: "absolute", left: 0, right: 0, top: safeArea ? -insets.top : 0, height: insets.top, backgroundColor: "background" }));
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ScreenBase = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_native_safe_area_context_1 = require("react-native-safe-area-context");
+var ScreenScrollContext_1 = require("./ScreenScrollContext");
+var Flex_1 = require("../Flex");
+var ScreenBase = function (_a) {
+    var children = _a.children, _b = _a.safeArea, safeArea = _b === void 0 ? true : _b, flexProps = __rest(_a, ["children", "safeArea"]);
+    var insets = (0, react_native_safe_area_context_1.useSafeAreaInsets)();
+    return ((0, jsx_runtime_1.jsx)(ScreenScrollContext_1.ScreenScrollContextProvider, { children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, __assign({ flex: 1, backgroundColor: "background", mt: safeArea ? insets.top : 0 }, flexProps, { children: [children, (0, jsx_runtime_1.jsx)(SafeAreaCover, { safeArea: true })] })) }));
+};
+exports.ScreenBase = ScreenBase;
+var SafeAreaCover = function (_a) {
+    var safeArea = _a.safeArea;
+    var 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: safeArea ? -insets.top : 0, height: insets.top, backgroundColor: "background" }));
 };