@artsy/palette-mobile 13.2.33 → 13.2.35

package/dist/elements/PopIn/PopIn.js

@@ -1,20 +1,17 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PopIn = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const react_native_1 = require("react-native");
-const PopIn = ({ children, xOffset, yOffset, }) => {
-    const entranceProgress = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
-    (0, react_1.useEffect)(() => {
-        react_native_1.Animated.spring(entranceProgress, {
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { Animated } from "react-native";
+export const PopIn = ({ children, xOffset, yOffset, }) => {
+    const entranceProgress = useRef(new Animated.Value(0)).current;
+    useEffect(() => {
+        Animated.spring(entranceProgress, {
             toValue: 1,
             bounciness: 12,
             speed: 28,
             useNativeDriver: true,
         }).start();
     }, []);
-    return ((0, jsx_runtime_1.jsx)(react_native_1.Animated.View, { style: {
+    return (_jsx(Animated.View, { style: {
             opacity: entranceProgress,
             transform: [
                 {
@@ -42,4 +39,3 @@ const PopIn = ({ children, xOffset, yOffset, }) => {
             ],
         }, children: children }));
 };
-exports.PopIn = PopIn;

package/dist/elements/PopIn/index.js

@@ -1,17 +1 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./PopIn"), exports);
+export * from "./PopIn";

package/dist/elements/Popover/Popover.js

@@ -1,33 +1,26 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.POPOVER_VARIANTS = exports.Popover = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const palette_tokens_1 = require("@artsy/palette-tokens");
-const react_native_1 = require("react-native");
-const react_native_popover_view_1 = __importDefault(require("react-native-popover-view"));
-const react_native_reanimated_1 = require("react-native-reanimated");
-const styled_components_1 = __importDefault(require("styled-components"));
-const svgs_1 = require("../../svgs");
-const Flex_1 = require("../Flex");
-const Touchable_1 = require("../Touchable");
-const Popover = ({ variant = "dark", children, visible, onPressOutside, onDismiss, onCloseComplete, placement = "top", title, content, noCloseIcon, }) => {
-    const style = exports.POPOVER_VARIANTS[variant];
-    return ((0, jsx_runtime_1.jsx)(react_native_popover_view_1.default, { backgroundStyle: { opacity: 0.5, backgroundColor: palette_tokens_1.THEME.colors.black100 }, popoverStyle: [{ backgroundColor: style.backgroundColor }, style.shadow], from: children, isVisible: visible, 
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { THEME } from "@artsy/palette-tokens";
+import { Platform, StatusBar } from "react-native";
+import RNPopover from "react-native-popover-view";
+import { Easing } from "react-native-reanimated";
+import styled from "styled-components";
+import { CloseIcon } from "../../svgs";
+import { Flex } from "../Flex";
+import { Touchable } from "../Touchable";
+export const Popover = ({ variant = "dark", children, visible, onPressOutside, onDismiss, onCloseComplete, placement = "top", title, content, noCloseIcon, }) => {
+    const style = POPOVER_VARIANTS[variant];
+    return (_jsx(RNPopover, { backgroundStyle: { opacity: 0.5, backgroundColor: THEME.colors.black100 }, popoverStyle: [{ backgroundColor: style.backgroundColor }, style.shadow], from: children, isVisible: visible, 
         // this is required to make sure that the popover is positioned correctly on android
-        verticalOffset: react_native_1.Platform.OS === "android" ? -(react_native_1.StatusBar.currentHeight ?? 0) : 0, onCloseComplete: onCloseComplete, onRequestClose: onPressOutside, placement: placement, arrowSize: { height: 11, width: 22 }, animationConfig: {
+        verticalOffset: Platform.OS === "android" ? -(StatusBar.currentHeight ?? 0) : 0, onCloseComplete: onCloseComplete, onRequestClose: onPressOutside, placement: placement, arrowSize: { height: 11, width: 22 }, animationConfig: {
             duration: 400,
-            easing: react_native_reanimated_1.Easing.out(react_native_reanimated_1.Easing.exp),
-        }, children: (0, jsx_runtime_1.jsxs)(Container, { variant: variant, p: 1, children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", justifyContent: "space-between", alignItems: "center", children: [title ? title : (0, jsx_runtime_1.jsx)(Flex_1.Flex, {}), !noCloseIcon && ((0, jsx_runtime_1.jsx)(Touchable_1.Touchable, { onPress: onDismiss, accessibilityRole: "button", "aria-label": "Dismiss popover", children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { ml: 0.5, children: (0, jsx_runtime_1.jsx)(svgs_1.CloseIcon, { width: 18, height: 18, fill: style.fill }) }) }))] }), content] }) }));
+            easing: Easing.out(Easing.exp),
+        }, children: _jsxs(Container, { variant: variant, p: 1, children: [_jsxs(Flex, { flexDirection: "row", justifyContent: "space-between", alignItems: "center", children: [title ? title : _jsx(Flex, {}), !noCloseIcon && (_jsx(Touchable, { onPress: onDismiss, accessibilityRole: "button", "aria-label": "Dismiss popover", children: _jsx(Flex, { ml: 0.5, children: _jsx(CloseIcon, { width: 18, height: 18, fill: style.fill }) }) }))] }), content] }) }));
 };
-exports.Popover = Popover;
-const Container = (0, styled_components_1.default)(Flex_1.Flex) `
-  background-color: ${({ variant }) => exports.POPOVER_VARIANTS[variant].backgroundColor};
+const Container = styled(Flex) `
+  background-color: ${({ variant }) => POPOVER_VARIANTS[variant].backgroundColor};
 `;
 const DROP_SHADOW = {
-    shadowColor: palette_tokens_1.THEME.colors.black100,
+    shadowColor: THEME.colors.black100,
     shadowOffset: {
         width: 0,
         height: 2,
@@ -36,14 +29,14 @@ const DROP_SHADOW = {
     shadowRadius: 2.62,
     elevation: 4,
 };
-exports.POPOVER_VARIANTS = {
+export const POPOVER_VARIANTS = {
     light: {
-        backgroundColor: palette_tokens_1.THEME.colors.white100,
+        backgroundColor: THEME.colors.white100,
         fill: "black100",
         shadow: DROP_SHADOW,
     },
     dark: {
-        backgroundColor: palette_tokens_1.THEME.colors.black100,
+        backgroundColor: THEME.colors.black100,
         fill: "white100",
     },
 };

package/dist/elements/Popover/Popover.stories.js

@@ -1,23 +1,21 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_native_1 = require("@storybook/react-native");
-const react_1 = require("react");
-const Popover_1 = require("./Popover");
-const Button_1 = require("../Button");
-const Flex_1 = require("../Flex");
-const Text_1 = require("../Text");
-(0, react_native_1.storiesOf)("Popover", module)
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { storiesOf } from "@storybook/react-native";
+import { useState } from "react";
+import { Popover } from "./Popover";
+import { Button } from "../Button";
+import { Flex } from "../Flex";
+import { Text } from "../Text";
+storiesOf("Popover", module)
     .add("Variants", () => {
-    const [visible, setVisible] = (0, react_1.useState)(null);
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flex: 1, alignSelf: "center", mt: 12, alignItems: "center", flexWrap: "wrap", children: [(0, jsx_runtime_1.jsx)(Popover_1.Popover, { visible: visible === "top-dark", title: (0, jsx_runtime_1.jsx)(Text_1.Text, { color: "white100", variant: "xs", children: "Popover Top Dark" }), onPressOutside: () => setVisible(null), onDismiss: () => setVisible(null), children: (0, jsx_runtime_1.jsx)(Text_1.Text, { onPress: () => setVisible("top-dark"), children: "Top Dark" }) }), (0, jsx_runtime_1.jsx)(Popover_1.Popover, { visible: visible === "bottom-dark", placement: "bottom", title: (0, jsx_runtime_1.jsx)(Text_1.Text, { color: "white100", variant: "xs", children: "Popover Bottom Dark" }), onPressOutside: () => setVisible(null), onDismiss: () => setVisible(null), children: (0, jsx_runtime_1.jsx)(Text_1.Text, { onPress: () => setVisible("bottom-dark"), children: "Bottom Dark" }) }), (0, jsx_runtime_1.jsx)(Popover_1.Popover, { visible: visible === "top-light", placement: "top", variant: "light", title: (0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "xs", children: "Popover Top Light" }), onPressOutside: () => setVisible(null), onDismiss: () => setVisible(null), children: (0, jsx_runtime_1.jsx)(Text_1.Text, { onPress: () => setVisible("top-light"), children: "Top Light" }) }), (0, jsx_runtime_1.jsx)(Popover_1.Popover, { visible: visible === "bottom-light", placement: "bottom", variant: "light", title: (0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "xs", children: "Popover Bottom Light" }), onPressOutside: () => setVisible(null), onDismiss: () => setVisible(null), children: (0, jsx_runtime_1.jsx)(Text_1.Text, { onPress: () => setVisible("bottom-light"), children: "Bottom Light" }) })] }));
+    const [visible, setVisible] = useState(null);
+    return (_jsxs(Flex, { flex: 1, alignSelf: "center", mt: 12, alignItems: "center", flexWrap: "wrap", children: [_jsx(Popover, { visible: visible === "top-dark", title: _jsx(Text, { color: "white100", variant: "xs", children: "Popover Top Dark" }), onPressOutside: () => setVisible(null), onDismiss: () => setVisible(null), children: _jsx(Text, { onPress: () => setVisible("top-dark"), children: "Top Dark" }) }), _jsx(Popover, { visible: visible === "bottom-dark", placement: "bottom", title: _jsx(Text, { color: "white100", variant: "xs", children: "Popover Bottom Dark" }), onPressOutside: () => setVisible(null), onDismiss: () => setVisible(null), children: _jsx(Text, { onPress: () => setVisible("bottom-dark"), children: "Bottom Dark" }) }), _jsx(Popover, { visible: visible === "top-light", placement: "top", variant: "light", title: _jsx(Text, { variant: "xs", children: "Popover Top Light" }), onPressOutside: () => setVisible(null), onDismiss: () => setVisible(null), children: _jsx(Text, { onPress: () => setVisible("top-light"), children: "Top Light" }) }), _jsx(Popover, { visible: visible === "bottom-light", placement: "bottom", variant: "light", title: _jsx(Text, { variant: "xs", children: "Popover Bottom Light" }), onPressOutside: () => setVisible(null), onDismiss: () => setVisible(null), children: _jsx(Text, { onPress: () => setVisible("bottom-light"), children: "Bottom Light" }) })] }));
 })
     .add("With title and/or content", () => {
-    const [visible, setVisible] = (0, react_1.useState)(null);
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flex: 1, alignSelf: "center", mt: 12, alignItems: "center", flexWrap: "wrap", children: [(0, jsx_runtime_1.jsx)(Popover_1.Popover, { visible: visible === "title", title: (0, jsx_runtime_1.jsx)(Text_1.Text, { weight: "medium", color: "white100", children: "Popover title" }), content: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { color: "white100", children: "Popover descriptive text with some not so long long long body" }), (0, jsx_runtime_1.jsx)(Text_1.Text, { color: "white100", children: "And some line break" })] }), onDismiss: () => setVisible(null), children: (0, jsx_runtime_1.jsx)(Text_1.Text, { onPress: () => setVisible("title"), children: "Some title and description" }) }), (0, jsx_runtime_1.jsx)(Popover_1.Popover, { visible: visible === "buttons", placement: "bottom", variant: "light", content: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { weight: "medium", mb: 1, children: "Popover title" }), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { height: 80, backgroundColor: "black30", mb: 1 }), (0, jsx_runtime_1.jsx)(Text_1.Text, { mb: 1, children: "Popover descriptive text" }), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", justifyContent: "flex-end", children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { size: "small", variant: "outlineGray", children: "Learn more" }), (0, jsx_runtime_1.jsx)(Button_1.Button, { size: "small", ml: 1, onPress: () => setVisible(null), children: "Got it" })] })] }), onDismiss: () => setVisible(null), children: (0, jsx_runtime_1.jsx)(Text_1.Text, { onPress: () => setVisible("buttons"), children: "Buttons and more content" }) }), (0, jsx_runtime_1.jsx)(Popover_1.Popover, { visible: visible === "no-close", placement: "bottom", noCloseIcon: true, variant: "light", content: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { weight: "medium", mb: 1, children: "Popover title?" }), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { height: 80, backgroundColor: "black30", mb: 1 }), (0, jsx_runtime_1.jsx)(Text_1.Text, { mb: 1, children: "Popover descriptive text" }), (0, jsx_runtime_1.jsx)(Button_1.Button, { size: "small", onPress: () => setVisible(null), children: "Got it" })] }), onDismiss: () => setVisible(null), children: (0, jsx_runtime_1.jsx)(Text_1.Text, { onPress: () => setVisible("no-close"), children: "Content without close icon" }) })] }));
+    const [visible, setVisible] = useState(null);
+    return (_jsxs(Flex, { flex: 1, alignSelf: "center", mt: 12, alignItems: "center", flexWrap: "wrap", children: [_jsx(Popover, { visible: visible === "title", title: _jsx(Text, { weight: "medium", color: "white100", children: "Popover title" }), content: _jsxs(_Fragment, { children: [_jsx(Text, { color: "white100", children: "Popover descriptive text with some not so long long long body" }), _jsx(Text, { color: "white100", children: "And some line break" })] }), onDismiss: () => setVisible(null), children: _jsx(Text, { onPress: () => setVisible("title"), children: "Some title and description" }) }), _jsx(Popover, { visible: visible === "buttons", placement: "bottom", variant: "light", content: _jsxs(_Fragment, { children: [_jsx(Text, { weight: "medium", mb: 1, children: "Popover title" }), _jsx(Flex, { height: 80, backgroundColor: "black30", mb: 1 }), _jsx(Text, { mb: 1, children: "Popover descriptive text" }), _jsxs(Flex, { flexDirection: "row", justifyContent: "flex-end", children: [_jsx(Button, { size: "small", variant: "outlineGray", children: "Learn more" }), _jsx(Button, { size: "small", ml: 1, onPress: () => setVisible(null), children: "Got it" })] })] }), onDismiss: () => setVisible(null), children: _jsx(Text, { onPress: () => setVisible("buttons"), children: "Buttons and more content" }) }), _jsx(Popover, { visible: visible === "no-close", placement: "bottom", noCloseIcon: true, variant: "light", content: _jsxs(_Fragment, { children: [_jsx(Text, { weight: "medium", mb: 1, children: "Popover title?" }), _jsx(Flex, { height: 80, backgroundColor: "black30", mb: 1 }), _jsx(Text, { mb: 1, children: "Popover descriptive text" }), _jsx(Button, { size: "small", onPress: () => setVisible(null), children: "Got it" })] }), onDismiss: () => setVisible(null), children: _jsx(Text, { onPress: () => setVisible("no-close"), children: "Content without close icon" }) })] }));
 })
     .add("Edge positions", () => {
-    const [topVisible, setTopVisible] = (0, react_1.useState)(true);
-    const [bottomVisible, setBottomVisible] = (0, react_1.useState)(false);
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flex: 1, backgroundColor: "black30", justifyContent: "space-between", px: 1, children: [(0, jsx_runtime_1.jsx)(Flex_1.Flex, { backgroundColor: "white100", width: 80, px: 1, children: (0, jsx_runtime_1.jsx)(Popover_1.Popover, { visible: topVisible, placement: "bottom", onDismiss: () => setTopVisible(false), onCloseComplete: () => setBottomVisible(true), title: (0, jsx_runtime_1.jsx)(Text_1.Text, { color: "white100", variant: "xs", children: "Top-Left" }), children: (0, jsx_runtime_1.jsx)(Text_1.Text, { children: "Top-left" }) }) }), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { backgroundColor: "white100", width: 120, mb: 6, alignSelf: "flex-end", px: 1, children: (0, jsx_runtime_1.jsx)(Popover_1.Popover, { visible: bottomVisible, onDismiss: () => setBottomVisible(false), title: (0, jsx_runtime_1.jsx)(Text_1.Text, { color: "white100", variant: "xs", children: "Bottom-Right" }), children: (0, jsx_runtime_1.jsx)(Text_1.Text, { children: "Bottom-right" }) }) })] }));
+    const [topVisible, setTopVisible] = useState(true);
+    const [bottomVisible, setBottomVisible] = useState(false);
+    return (_jsxs(Flex, { flex: 1, backgroundColor: "black30", justifyContent: "space-between", px: 1, children: [_jsx(Flex, { backgroundColor: "white100", width: 80, px: 1, children: _jsx(Popover, { visible: topVisible, placement: "bottom", onDismiss: () => setTopVisible(false), onCloseComplete: () => setBottomVisible(true), title: _jsx(Text, { color: "white100", variant: "xs", children: "Top-Left" }), children: _jsx(Text, { children: "Top-left" }) }) }), _jsx(Flex, { backgroundColor: "white100", width: 120, mb: 6, alignSelf: "flex-end", px: 1, children: _jsx(Popover, { visible: bottomVisible, onDismiss: () => setBottomVisible(false), title: _jsx(Text, { color: "white100", variant: "xs", children: "Bottom-Right" }), children: _jsx(Text, { children: "Bottom-right" }) }) })] }));
 });

package/dist/elements/Popover/index.js

@@ -1,17 +1 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./Popover"), exports);
+export * from "./Popover";

package/dist/elements/ProgressBar/ProgressBar.js

@@ -1,56 +1,29 @@
-"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 __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 (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ProgressBar = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const react_native_reanimated_1 = __importStar(require("react-native-reanimated"));
-const hooks_1 = require("../../utils/hooks");
-const useColor_1 = require("../../utils/hooks/useColor");
-const Flex_1 = require("../Flex");
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import Animated, { useAnimatedStyle, useSharedValue, withTiming } from "react-native-reanimated";
+import { useSpace } from "../../utils/hooks";
+import { useColor } from "../../utils/hooks/useColor";
+import { Flex } from "../Flex";
 const clamp = (num, min, max) => Math.max(min, Math.min(num, max));
-const ProgressBar = ({ animationDuration = 200, backgroundColor = "black30", height = 2, onCompletion, progress: unclampedProgress, trackColor = "blue100", style, progressBarStyle, }) => {
-    const color = (0, useColor_1.useColor)();
-    const space = (0, hooks_1.useSpace)();
-    const width = (0, react_native_reanimated_1.useSharedValue)(0);
+export const ProgressBar = ({ animationDuration = 200, backgroundColor = "black30", height = 2, onCompletion, progress: unclampedProgress, trackColor = "blue100", style, progressBarStyle, }) => {
+    const color = useColor();
+    const space = useSpace();
+    const width = useSharedValue(0);
     const progress = clamp(unclampedProgress, 0, 100);
-    const progressAnim = (0, react_native_reanimated_1.useAnimatedStyle)(() => {
+    const progressAnim = 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 });
+    const [onCompletionCalled, setOnCompletionCalled] = useState(false);
+    useEffect(() => {
+        width.value = withTiming(progress, { duration: animationDuration });
         if (progress === 100 && !onCompletionCalled) {
             onCompletion?.();
             setOnCompletionCalled(true);
         }
     }, [progress]);
-    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { width: "10%", backgroundColor: backgroundColor, style: {
+    return (_jsx(Flex, { width: "10%", backgroundColor: backgroundColor, style: {
             marginVertical: space(1),
             width: "100%",
             ...style,
-        }, children: (0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { testID: "progress-bar-track", style: [progressAnim, { height, backgroundColor: color(trackColor) }, progressBarStyle] }) }));
+        }, children: _jsx(Animated.View, { testID: "progress-bar-track", style: [progressAnim, { height, backgroundColor: color(trackColor) }, progressBarStyle] }) }));
 };
-exports.ProgressBar = ProgressBar;

package/dist/elements/ProgressBar/ProgressBar.stories.js

@@ -1,8 +1,6 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_native_1 = require("@storybook/react-native");
-const _1 = require("./");
-const Flex_1 = require("../Flex");
-const Text_1 = require("../Text");
-(0, react_native_1.storiesOf)("Progress Indicators", module).add("ProgressBar", () => ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { p: 2, children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { children: "10%" }), (0, jsx_runtime_1.jsx)(_1.ProgressBar, { progress: 10 }), (0, jsx_runtime_1.jsx)(Text_1.Text, { children: "20%" }), (0, jsx_runtime_1.jsx)(_1.ProgressBar, { progress: 20 }), (0, jsx_runtime_1.jsx)(Text_1.Text, { children: "50%" }), (0, jsx_runtime_1.jsx)(_1.ProgressBar, { progress: 50 })] })));
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { storiesOf } from "@storybook/react-native";
+import { ProgressBar } from "./";
+import { Flex } from "../Flex";
+import { Text } from "../Text";
+storiesOf("Progress Indicators", module).add("ProgressBar", () => (_jsxs(Flex, { p: 2, children: [_jsx(Text, { children: "10%" }), _jsx(ProgressBar, { progress: 10 }), _jsx(Text, { children: "20%" }), _jsx(ProgressBar, { progress: 20 }), _jsx(Text, { children: "50%" }), _jsx(ProgressBar, { progress: 50 })] })));

package/dist/elements/ProgressBar/ProgressBar.tests.js

@@ -1,12 +1,10 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_native_1 = require("@testing-library/react-native");
-const ProgressBar_1 = require("./ProgressBar");
-const renderWithWrappers_1 = require("../../utils/tests/renderWithWrappers");
+import { jsx as _jsx } from "react/jsx-runtime";
+import { waitFor } from "@testing-library/react-native";
+import { ProgressBar } from "./ProgressBar";
+import { renderWithWrappers } from "../../utils/tests/renderWithWrappers";
 describe("ProgressBar", () => {
     const getWrapper = (props) => {
-        return (0, renderWithWrappers_1.renderWithWrappers)((0, jsx_runtime_1.jsx)(ProgressBar_1.ProgressBar, { ...props }));
+        return renderWithWrappers(_jsx(ProgressBar, { ...props }));
     };
     it.skip("does not display the track view when progress is zero", async () => {
         const wrapper = getWrapper({ progress: 0 });
@@ -14,7 +12,7 @@ describe("ProgressBar", () => {
         const track = wrapper.getByTestId("progress-bar-track");
         expect(container.props.width).toEqual("100%");
         // width of 0% is invisible
-        await (0, react_native_1.waitFor)(() => expect(track.props.style.width).toEqual("0%"));
+        await waitFor(() => expect(track.props.style.width).toEqual("0%"));
     });
     it.skip("display the track view when progress is above zero", async () => {
         const wrapper = getWrapper({ progress: 50 });
@@ -23,6 +21,6 @@ describe("ProgressBar", () => {
         expect(container.props.width).toEqual("100%");
         // width of 50% is visible
         // wait for animations to finish running
-        await (0, react_native_1.waitFor)(() => expect(track.props.style.width).toEqual("50%"));
+        await waitFor(() => expect(track.props.style.width).toEqual("50%"));
     });
 });

package/dist/elements/ProgressBar/index.js

@@ -1,17 +1 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./ProgressBar"), exports);
+export * from "./ProgressBar";

package/dist/elements/Radio/RadioButton.js

@@ -1,22 +1,16 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DisabledDot = exports.RadioDot = exports.RadioButton = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const theme_get_1 = require("@styled-system/theme-get");
-const react_native_1 = require("react-native");
-const native_1 = __importDefault(require("styled-components/native"));
-const animation_1 = require("../../animation");
-const useTheme_1 = require("../../utils/hooks/useTheme");
-const Flex_1 = require("../Flex");
-const Text_1 = require("../Text");
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { themeGet } from "@styled-system/theme-get";
+import { PixelRatio, StyleSheet, TouchableWithoutFeedback, View, } from "react-native";
+import styled from "styled-components/native";
+import { CssTransition } from "../../animation";
+import { useTheme } from "../../utils/hooks/useTheme";
+import { Flex } from "../Flex";
+import { Text } from "../Text";
 const RADIOBUTTON_SIZE = 20;
 const DURATION = 150;
-const RadioButton = ({ selected, disabled, error, onPress, text, textVariant = "md", subtitle, accessibilityState, ...restProps }) => {
-    const { color, space } = (0, useTheme_1.useTheme)();
-    const fontScale = react_native_1.PixelRatio.getFontScale();
+export const RadioButton = ({ selected, disabled, error, onPress, text, textVariant = "md", subtitle, accessibilityState, ...restProps }) => {
+    const { color, space } = useTheme();
+    const fontScale = PixelRatio.getFontScale();
     const radioButtonSize = RADIOBUTTON_SIZE * fontScale;
     const defaultRadioButtonStyle = {
         backgroundColor: color("white100"),
@@ -45,21 +39,20 @@ const RadioButton = ({ selected, disabled, error, onPress, text, textVariant = "
         : radioButtonStyles[error ? "error" : "default"][selected ? "selected" : "notSelected"];
     const textColor = error ? color("red100") : disabled ? color("black30") : color("black100");
     const subtitleColor = error ? color("red100") : color("black30");
-    return ((0, jsx_runtime_1.jsx)(react_native_1.TouchableWithoutFeedback, { accessibilityState: accessibilityState, onPress: (event) => {
+    return (_jsx(TouchableWithoutFeedback, { accessibilityState: accessibilityState, onPress: (event) => {
             if (disabled) {
                 return;
             }
             onPress?.(event);
-        }, children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { ...restProps, children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(Flex_1.Flex, { mt: "2px", children: (0, jsx_runtime_1.jsx)(animation_1.CssTransition, { style: [
+        }, children: _jsxs(Flex, { ...restProps, children: [_jsxs(Flex, { flexDirection: "row", alignItems: "center", children: [_jsx(Flex, { mt: "2px", children: _jsx(CssTransition, { style: [
                                     styles(fontScale).container,
                                     { marginRight: space(1) * fontScale },
                                     radioButtonStyle,
                                 ], animate: ["borderColor"], duration: DURATION, children: !!selected &&
-                                    (!!disabled ? ((0, jsx_runtime_1.jsx)(exports.DisabledDot, { size: radioButtonSize })) : ((0, jsx_runtime_1.jsx)(exports.RadioDot, { size: radioButtonSize }))) }) }), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { justifyContent: "center", children: !!text && ((0, jsx_runtime_1.jsx)(Text_1.Text, { variant: textVariant, color: textColor, children: text })) })] }), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { ml: `${(RADIOBUTTON_SIZE + space(1)) * fontScale}px`, mt: "6px", children: !!subtitle && ((0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "xs", color: subtitleColor, children: subtitle })) })] }) }));
+                                    (!!disabled ? (_jsx(DisabledDot, { size: radioButtonSize })) : (_jsx(RadioDot, { size: radioButtonSize }))) }) }), _jsx(Flex, { justifyContent: "center", children: !!text && (_jsx(Text, { variant: textVariant, color: textColor, children: text })) })] }), _jsx(Flex, { ml: `${(RADIOBUTTON_SIZE + space(1)) * fontScale}px`, mt: "6px", children: !!subtitle && (_jsx(Text, { variant: "xs", color: subtitleColor, children: subtitle })) })] }) }));
 };
-exports.RadioButton = RadioButton;
 // styled-component does not have support for Animated.View
-const styles = (fontScale) => react_native_1.StyleSheet.create({
+const styles = (fontScale) => StyleSheet.create({
     container: {
         display: "flex",
         justifyContent: "center",
@@ -74,16 +67,15 @@ const styles = (fontScale) => react_native_1.StyleSheet.create({
 // This component represents the white ● mark in CSS. We are not using styled-system since it's easier to specify raw CSS
 // properties with styled-component.
 // Height, Width, and Border Radius calculations are used to maintain the size of the white dot when scaling
-const RadioDot = ({ size }) => {
-    return ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: {
+export const RadioDot = ({ size }) => {
+    return (_jsx(View, { style: {
             height: size * 0.625,
             width: size * 0.625,
             borderRadius: size * 0.3125,
             backgroundColor: "white",
         } }));
 };
-exports.RadioDot = RadioDot;
-exports.DisabledDot = (0, native_1.default)(exports.RadioDot) `
-  border-bottom-color: ${(0, theme_get_1.themeGet)("colors.black30")};
-  border-left-color: ${(0, theme_get_1.themeGet)("colors.black30")};
+export const DisabledDot = styled(RadioDot) `
+  border-bottom-color: ${themeGet("colors.black30")};
+  border-left-color: ${themeGet("colors.black30")};
 `;

package/dist/elements/Radio/RadioButton.stories.js

@@ -1,24 +1,22 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_native_1 = require("@storybook/react-native");
-const react_1 = require("react");
-const RadioButton_1 = require("./RadioButton");
-const helpers_1 = require("../../storybook/helpers");
-const Flex_1 = require("../Flex");
-exports.default = {
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { storiesOf } from "@storybook/react-native";
+import { useState } from "react";
+import { RadioButton } from "./RadioButton";
+import { List } from "../../storybook/helpers";
+import { Flex } from "../Flex";
+export default {
     title: "RadioButton",
-    component: RadioButton_1.RadioButton,
+    component: RadioButton,
 };
-(0, react_native_1.storiesOf)("RadioButton", module).add("Default", () => {
-    const [metric, setMetric] = (0, react_1.useState)("cm");
-    return ((0, jsx_runtime_1.jsx)(helpers_1.List, { contentContainerStyle: {
+storiesOf("RadioButton", module).add("Default", () => {
+    const [metric, setMetric] = useState("cm");
+    return (_jsx(List, { contentContainerStyle: {
             marginHorizontal: 20,
             justifyContent: "flex-start",
             alignItems: "flex-start",
-        }, children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", gap: 20, children: [(0, jsx_runtime_1.jsx)(RadioButton_1.RadioButton, { onPress: () => {
+        }, children: _jsxs(Flex, { flexDirection: "row", gap: 20, children: [_jsx(RadioButton, { onPress: () => {
                         setMetric("cm");
-                    }, selected: metric === "cm", text: "centimeters" }), (0, jsx_runtime_1.jsx)(RadioButton_1.RadioButton, { onPress: () => {
+                    }, selected: metric === "cm", text: "centimeters" }), _jsx(RadioButton, { onPress: () => {
                         setMetric("in");
                     }, selected: metric === "in", text: "inches" })] }) }));
 });

package/dist/elements/Radio/RadioDot.js

@@ -1,9 +1,6 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.RadioDot = exports.RADIO_DOT_MODES = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const Flex_1 = require("../Flex");
-exports.RADIO_DOT_MODES = {
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Flex } from "../Flex";
+export const RADIO_DOT_MODES = {
     default: {
         resting: {
             borderWidth: 2,
@@ -51,22 +48,21 @@ exports.RADIO_DOT_MODES = {
         },
     },
 };
-const RadioDot = (props) => ((0, jsx_runtime_1.jsx)(Container, { ...props, children: (0, jsx_runtime_1.jsx)(Dot, { ...props }) }));
-exports.RadioDot = RadioDot;
+export const RadioDot = (props) => (_jsx(Container, { ...props, children: _jsx(Dot, { ...props }) }));
 const Container = ({ selected = false, hover = false, error = false, disabled = false, }) => {
     const mode = (() => {
         switch (true) {
             case disabled:
-                return exports.RADIO_DOT_MODES.disabled;
+                return RADIO_DOT_MODES.disabled;
             case hover:
-                return exports.RADIO_DOT_MODES.hover;
+                return RADIO_DOT_MODES.hover;
             case error:
-                return exports.RADIO_DOT_MODES.error;
+                return RADIO_DOT_MODES.error;
             default:
-                return exports.RADIO_DOT_MODES.default;
+                return RADIO_DOT_MODES.default;
         }
     })();
     const moreProps = selected ? mode.selected : mode.resting;
-    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { width: 20, height: 20, borderRadius: 50, alignItems: "center", justifyContent: "center", flexShrink: 0, ...moreProps }));
+    return (_jsx(Flex, { width: 20, height: 20, borderRadius: 50, alignItems: "center", justifyContent: "center", flexShrink: 0, ...moreProps }));
 };
-const Dot = ({ selected = false, disabled = false }) => ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { width: 10, height: 10, borderRadius: 50, alignItems: "center", justifyContent: "center", flexShrink: 0, backgroundColor: disabled && !selected ? "transparent" : "white100" }));
+const Dot = ({ selected = false, disabled = false }) => (_jsx(Flex, { width: 10, height: 10, borderRadius: 50, alignItems: "center", justifyContent: "center", flexShrink: 0, backgroundColor: disabled && !selected ? "transparent" : "white100" }));

package/dist/elements/Radio/index.js

@@ -1,7 +1,2 @@
-"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; } });
+export { RadioButton } from "./RadioButton";
+export { RadioDot } from "./RadioDot";

package/dist/elements/Screen/Background.js

@@ -1,7 +1,3 @@
-"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;
+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 }));

package/dist/elements/Screen/Body.js

@@ -1,15 +1,11 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Body = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const react_native_1 = require("react-native");
-const constants_1 = require("./constants");
-const Flex_1 = require("../Flex");
-const Body = ({ children, fullwidth, scroll, disableKeyboardAvoidance = false, ...flexProps }) => {
-    const Wrapper = disableKeyboardAvoidance ? react_1.Fragment : react_native_1.KeyboardAvoidingView;
-    return ((0, jsx_runtime_1.jsx)(Wrapper, { ...(disableKeyboardAvoidance
+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, ...flexProps }) => {
+    const Wrapper = disableKeyboardAvoidance ? Fragment : KeyboardAvoidingView;
+    return (_jsx(Wrapper, { ...(disableKeyboardAvoidance
             ? {}
-            : { style: { flex: 1 }, behavior: react_native_1.Platform.OS === "ios" ? "padding" : "height" }), children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { 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, { children: children }) : children }) }) }));
+            : { style: { flex: 1 }, behavior: Platform.OS === "ios" ? "padding" : "height" }), children: _jsx(Flex, { flex: 1, ...flexProps, children: _jsx(Flex, { flex: 1, px: fullwidth ? undefined : SCREEN_HORIZONTAL_PADDING, children: scroll ? _jsx(ScrollView, { children: children }) : children }) }) }));
 };
-exports.Body = Body;

package/dist/elements/Screen/BottomView.js

@@ -1,19 +1,12 @@
-"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: {
+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: {
                     width: "100%",
                     height: 20,
-                }, pointerEvents: "none" }), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { px: constants_1.SCREEN_HORIZONTAL_PADDING, pt: 1, pb: 4, backgroundColor: "background", children: children })] }));
+                }, pointerEvents: "none" }), _jsx(Flex, { px: SCREEN_HORIZONTAL_PADDING, pt: 1, pb: 4, backgroundColor: "background", children: children })] }));
 };
-exports.BottomView = BottomView;