@artsy/palette-mobile 23.14.0 → 24.0.0

package/dist/elements/CollapsibleMenuItem/CollapsibleMenuItem.js

@@ -1,43 +1,48 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { CheckmarkFillIcon, ChevronSmallDownIcon, ChevronSmallUpIcon } from "@artsy/icons/native";
-import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from "react";
-import { LayoutAnimation } from "react-native";
-import { Collapse } from "../Collapse";
-import { Flex } from "../Flex";
-import { Text } from "../Text";
-import { Touchable } from "../Touchable";
-export const CollapsibleMenuItem = forwardRef(({ children, overtitle, title, isExpanded = false, disabled = false, onExpand, onCollapse }, ref) => {
-    const [isOpen, setIsOpen] = useState(false);
-    const [isCompleted, setIsCompleted] = useState(false);
-    const componentRef = useRef(null);
-    useEffect(() => {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CollapsibleMenuItem = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var native_1 = require("@artsy/icons/native");
+var react_1 = require("react");
+var react_native_1 = require("react-native");
+var Collapse_1 = require("../Collapse");
+var Flex_1 = require("../Flex");
+var Text_1 = require("../Text");
+var Touchable_1 = require("../Touchable");
+exports.CollapsibleMenuItem = (0, react_1.forwardRef)(function (_a, ref) {
+    var children = _a.children, overtitle = _a.overtitle, title = _a.title, _b = _a.isExpanded, isExpanded = _b === void 0 ? false : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, onExpand = _a.onExpand, onCollapse = _a.onCollapse;
+    var _d = (0, react_1.useState)(false), isOpen = _d[0], setIsOpen = _d[1];
+    var _e = (0, react_1.useState)(false), isCompleted = _e[0], setIsCompleted = _e[1];
+    var componentRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(function () {
         setIsOpen(isExpanded);
     }, []);
-    useImperativeHandle(ref, () => ({
-        collapse(onAnimationEnd) {
-            LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut, onAnimationEnd);
+    (0, react_1.useImperativeHandle)(ref, function () { return ({
+        collapse: function (onAnimationEnd) {
+            react_native_1.LayoutAnimation.configureNext(react_native_1.LayoutAnimation.Presets.easeInEaseOut, onAnimationEnd);
             setIsOpen(false);
         },
-        expand(onAnimationEnd) {
-            LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut, onAnimationEnd);
+        expand: function (onAnimationEnd) {
+            react_native_1.LayoutAnimation.configureNext(react_native_1.LayoutAnimation.Presets.easeInEaseOut, onAnimationEnd);
             setIsOpen(true);
         },
-        completed() {
+        completed: function () {
             setIsCompleted(true);
         },
-        isExpanded() {
+        isExpanded: function () {
             return isOpen;
         },
-        offsetTop: () => {
-            return new Promise((resolve) => {
-                componentRef.current?.measureInWindow((_, h) => {
+        offsetTop: function () {
+            return new Promise(function (resolve) {
+                var _a;
+                (_a = componentRef.current) === null || _a === void 0 ? void 0 : _a.measureInWindow(function (_, h) {
                     resolve(h);
                 });
             });
         },
-    }), [isOpen]);
-    return (_jsxs(Flex, { ref: componentRef, collapsable: false, children: [_jsxs(Touchable, { accessibilityRole: "button", accessibilityLabel: "Collapsible Element", accessibilityState: { disabled }, accessibilityHint: "Tap to " + (isOpen ? "collapse" : "expand"), onPress: () => {
+    }); }, [isOpen]);
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { ref: componentRef, collapsable: false, children: [(0, jsx_runtime_1.jsxs)(Touchable_1.Touchable, { accessibilityRole: "button", accessibilityLabel: "Collapsible Element", accessibilityState: { disabled: disabled }, accessibilityHint: "Tap to " + (isOpen ? "collapse" : "expand"), onPress: function () {
                     setIsOpen(!isOpen);
-                    isOpen ? onCollapse?.() : onExpand?.();
-                }, disabled: disabled, children: [!!overtitle && (_jsx(Text, { variant: "sm", color: disabled ? "mono30" : "mono100", children: overtitle })), _jsxs(Flex, { flexDirection: "row", justifyContent: "space-between", alignItems: "center", children: [_jsx(Text, { variant: "lg", color: disabled ? "mono30" : "mono100", style: { maxWidth: "90%" }, children: title }), _jsxs(Flex, { flexDirection: "row", alignItems: "center", children: [!!isCompleted && (_jsx(CheckmarkFillIcon, { fill: "green100", height: 24, width: 24, style: { marginRight: 5 } })), isOpen ? (_jsx(ChevronSmallUpIcon, { fill: disabled ? "mono30" : "mono60" })) : (_jsx(ChevronSmallDownIcon, { fill: disabled ? "mono30" : "mono60" }))] })] })] }), _jsx(Collapse, { opened: isOpen, children: children })] }));
+                    isOpen ? onCollapse === null || onCollapse === void 0 ? void 0 : onCollapse() : onExpand === null || onExpand === void 0 ? void 0 : onExpand();
+                }, disabled: disabled, children: [!!overtitle && ((0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "sm", color: disabled ? "mono30" : "mono100", children: overtitle })), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", justifyContent: "space-between", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "lg", color: disabled ? "mono30" : "mono100", style: { maxWidth: "90%" }, children: title }), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", alignItems: "center", children: [!!isCompleted && ((0, jsx_runtime_1.jsx)(native_1.CheckmarkFillIcon, { fill: "green100", height: 24, width: 24, style: { marginRight: 5 } })), isOpen ? ((0, jsx_runtime_1.jsx)(native_1.ChevronSmallUpIcon, { fill: disabled ? "mono30" : "mono60" })) : ((0, jsx_runtime_1.jsx)(native_1.ChevronSmallDownIcon, { fill: disabled ? "mono30" : "mono60" }))] })] })] }), (0, jsx_runtime_1.jsx)(Collapse_1.Collapse, { opened: isOpen, children: children })] }));
 });

package/dist/elements/CollapsibleMenuItem/CollapsibleMenuItem.stories.js

@@ -1,32 +1,54 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useRef, useState } from "react";
-import { ScrollView, View } from "react-native";
-import { CollapsibleMenuItem } from "./CollapsibleMenuItem";
-import { Button } from "../Button";
-import { Flex } from "../Flex";
-import { Join } from "../Join";
-import { Separator } from "../Separator";
-import { Spacer } from "../Spacer";
-import { Text } from "../Text";
-export const ArtworkDetails = ({ handlePress }) => {
-    return (_jsxs(Flex, { backgroundColor: "peachpuff", p: 1, mt: 1, children: [_jsx(Text, { children: "ArtworkDetails content" }), _jsx(Spacer, { y: 1 }), _jsx(CTAButton, { text: "Save & Continue", onPress: handlePress })] }));
+"use strict";
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
 };
-export const UploadPhotos = ({ handlePress }) => {
-    return (_jsxs(Flex, { backgroundColor: "peachpuff", p: 1, mt: 1, children: [_jsx(Text, { children: "Upload Photos content" }), _jsx(Spacer, { y: 1 }), _jsx(CTAButton, { text: "Save & Continue", onPress: handlePress })] }));
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CollapseCollapseItems = exports.ComponentWithCollapsibleMenu = exports.DisplayContent = exports.ContactInformation = exports.UploadPhotos = exports.ArtworkDetails = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var react_native_1 = require("react-native");
+var CollapsibleMenuItem_1 = require("./CollapsibleMenuItem");
+var Button_1 = require("../Button");
+var Flex_1 = require("../Flex");
+var Join_1 = require("../Join");
+var Separator_1 = require("../Separator");
+var Spacer_1 = require("../Spacer");
+var Text_1 = require("../Text");
+var ArtworkDetails = function (_a) {
+    var handlePress = _a.handlePress;
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { backgroundColor: "peachpuff", p: 1, mt: 1, children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { children: "ArtworkDetails content" }), (0, jsx_runtime_1.jsx)(Spacer_1.Spacer, { y: 1 }), (0, jsx_runtime_1.jsx)(CTAButton, { text: "Save & Continue", onPress: handlePress })] }));
 };
-export const ContactInformation = ({ handlePress }) => {
-    return (_jsxs(Flex, { backgroundColor: "peachpuff", p: 1, mt: 1, children: [_jsx(Text, { children: "ContactInformation content" }), _jsx(Spacer, { y: 1 }), _jsx(CTAButton, { text: "Submit Artwork", onPress: handlePress })] }));
+exports.ArtworkDetails = ArtworkDetails;
+var UploadPhotos = function (_a) {
+    var handlePress = _a.handlePress;
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { backgroundColor: "peachpuff", p: 1, mt: 1, children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { children: "Upload Photos content" }), (0, jsx_runtime_1.jsx)(Spacer_1.Spacer, { y: 1 }), (0, jsx_runtime_1.jsx)(CTAButton, { text: "Save & Continue", onPress: handlePress })] }));
 };
-const CTAButton = ({ onPress, text }) => (_jsx(Button, { block: true, haptic: true, maxWidth: 540, onPress: onPress, children: text }));
-export const DisplayContent = () => {
-    return (_jsx(View, { style: { backgroundColor: `rgba(255,145,125,.3)`, padding: 20, marginTop: 20 }, children: _jsx(Text, { children: "This is the collapsible menu content" }) }));
+exports.UploadPhotos = UploadPhotos;
+var ContactInformation = function (_a) {
+    var handlePress = _a.handlePress;
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { backgroundColor: "peachpuff", p: 1, mt: 1, children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { children: "ContactInformation content" }), (0, jsx_runtime_1.jsx)(Spacer_1.Spacer, { y: 1 }), (0, jsx_runtime_1.jsx)(CTAButton, { text: "Submit Artwork", onPress: handlePress })] }));
 };
-export const ComponentWithCollapsibleMenu = () => {
-    const items = [
+exports.ContactInformation = ContactInformation;
+var CTAButton = function (_a) {
+    var onPress = _a.onPress, text = _a.text;
+    return ((0, jsx_runtime_1.jsx)(Button_1.Button, { block: true, haptic: true, maxWidth: 540, onPress: onPress, children: text }));
+};
+var DisplayContent = function () {
+    return ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: { backgroundColor: "rgba(255,145,125,.3)", padding: 20, marginTop: 20 }, children: (0, jsx_runtime_1.jsx)(Text_1.Text, { children: "This is the collapsible menu content" }) }));
+};
+exports.DisplayContent = DisplayContent;
+var ComponentWithCollapsibleMenu = function () {
+    var items = [
         {
             overtitle: "Optional overtitle",
             title: "Artwork Details",
-            Content: (_jsx(ArtworkDetails, { handlePress: () => {
+            Content: ((0, jsx_runtime_1.jsx)(exports.ArtworkDetails, { handlePress: function () {
                     expandCollapsibleMenuContent(1);
                     enableStep(1);
                 } })),
@@ -34,7 +56,7 @@ export const ComponentWithCollapsibleMenu = () => {
         {
             overtitle: "Optional overtitle",
             title: "Upload Photos",
-            Content: (_jsx(UploadPhotos, { handlePress: () => {
+            Content: ((0, jsx_runtime_1.jsx)(exports.UploadPhotos, { handlePress: function () {
                     expandCollapsibleMenuContent(2);
                     enableStep(2);
                 } })),
@@ -42,22 +64,22 @@ export const ComponentWithCollapsibleMenu = () => {
         {
             overtitle: "Optional overtitle",
             title: "Contact Information",
-            Content: (_jsx(ContactInformation, { handlePress: () => {
+            Content: ((0, jsx_runtime_1.jsx)(exports.ContactInformation, { handlePress: function () {
                     // navigation.navigate("ArtworkSubmittedScreen")
                     // do nothing
                 } })),
         },
     ];
-    const TOTAL_STEPS = items.length;
-    const [validSteps, setValidSteps] = useState([true, ...new Array(TOTAL_STEPS - 1).fill(false)]);
-    const stepsRefs = useRef(new Array(TOTAL_STEPS).fill(null)).current;
-    const enableStep = (stepIndex) => {
-        const newValidSteps = [...validSteps];
+    var TOTAL_STEPS = items.length;
+    var _a = (0, react_1.useState)(__spreadArray([true], new Array(TOTAL_STEPS - 1).fill(false), true)), validSteps = _a[0], setValidSteps = _a[1];
+    var stepsRefs = (0, react_1.useRef)(new Array(TOTAL_STEPS).fill(null)).current;
+    var enableStep = function (stepIndex) {
+        var newValidSteps = __spreadArray([], validSteps, true);
         newValidSteps[stepIndex] = true;
         setValidSteps(newValidSteps);
     };
-    const expandCollapsibleMenuContent = (indexToExpand) => {
-        items.forEach((_, index) => {
+    var expandCollapsibleMenuContent = function (indexToExpand) {
+        items.forEach(function (_, index) {
             if (indexToExpand !== index) {
                 stepsRefs[index].collapse();
             }
@@ -69,20 +91,22 @@ export const ComponentWithCollapsibleMenu = () => {
             }
         });
     };
-    return (_jsx(View, { style: { margin: 20 }, children: _jsx(Flex, { children: _jsxs(ScrollView, { contentContainerStyle: {
+    return ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: { margin: 20 }, children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { children: (0, jsx_runtime_1.jsxs)(react_native_1.ScrollView, { contentContainerStyle: {
                     paddingVertical: 20,
                     paddingHorizontal: 20,
                     justifyContent: "center",
-                }, children: [_jsx(Spacer, { y: 4 }), _jsx(Join, { separator: _jsx(Separator, { my: 2, marginTop: "40", marginBottom: "20" }), children: items.map(({ overtitle, title, Content }, index) => {
-                            const disabled = !validSteps[index];
-                            return (_jsx(CollapsibleMenuItem, { overtitle: overtitle, title: title, onExpand: () => expandCollapsibleMenuContent(index), isExpanded: index === 0, disabled: disabled, ref: (ref) => {
+                }, children: [(0, jsx_runtime_1.jsx)(Spacer_1.Spacer, { y: 4 }), (0, jsx_runtime_1.jsx)(Join_1.Join, { separator: (0, jsx_runtime_1.jsx)(Separator_1.Separator, { my: 2, marginTop: "40", marginBottom: "20" }), children: items.map(function (_a, index) {
+                            var overtitle = _a.overtitle, title = _a.title, Content = _a.Content;
+                            var disabled = !validSteps[index];
+                            return ((0, jsx_runtime_1.jsx)(CollapsibleMenuItem_1.CollapsibleMenuItem, { overtitle: overtitle, title: title, onExpand: function () { return expandCollapsibleMenuContent(index); }, isExpanded: index === 0, disabled: disabled, ref: function (ref) {
                                     if (ref) {
                                         stepsRefs[index] = ref;
                                     }
                                 }, children: Content }, index));
                         }) })] }) }) }));
 };
-export default {
+exports.ComponentWithCollapsibleMenu = ComponentWithCollapsibleMenu;
+exports.default = {
     title: "Collapsible Menu ",
     excludeStories: [
         "ArtworkDetails",
@@ -92,4 +116,5 @@ export default {
         "ComponentWithCollapsibleMenu",
     ],
 };
-export const CollapseCollapseItems = () => (_jsx(_Fragment, { children: _jsx(ComponentWithCollapsibleMenu, {}) }));
+var CollapseCollapseItems = function () { return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(exports.ComponentWithCollapsibleMenu, {}) })); };
+exports.CollapseCollapseItems = CollapseCollapseItems;

package/dist/elements/CollapsibleMenuItem/index.js

@@ -1 +1,17 @@
-export * from "./CollapsibleMenuItem";
+"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("./CollapsibleMenuItem"), exports);

package/dist/elements/Dialog/Dialog.js

@@ -1,56 +1,81 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from "react";
-import { Animated, Modal, ScrollView, StyleSheet, TouchableWithoutFeedback } from "react-native";
-import { SafeAreaView } from "react-native-safe-area-context";
-import { useTheme } from "../../utils/hooks/useTheme";
-import { Button } from "../Button";
-import { Flex } from "../Flex";
-import { Text } from "../Text";
-export const Dialog = (props) => {
-    const { isVisible, title, detail, primaryCta, secondaryCta, onBackgroundPress, ...other } = props;
-    const [visible, setVisible] = useState(isVisible);
-    const { space, color } = useTheme();
-    const value = useRef(new Animated.Value(Number(isVisible))).current;
-    const fadeIn = () => {
-        return new Promise((resolve) => {
-            Animated.timing(value, {
+"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.Dialog = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var react_native_1 = require("react-native");
+var react_native_safe_area_context_1 = require("react-native-safe-area-context");
+var useTheme_1 = require("../../utils/hooks/useTheme");
+var Button_1 = require("../Button");
+var Flex_1 = require("../Flex");
+var Text_1 = require("../Text");
+var Dialog = function (props) {
+    var isVisible = props.isVisible, title = props.title, detail = props.detail, primaryCta = props.primaryCta, secondaryCta = props.secondaryCta, onBackgroundPress = props.onBackgroundPress, other = __rest(props, ["isVisible", "title", "detail", "primaryCta", "secondaryCta", "onBackgroundPress"]);
+    var _a = (0, react_1.useState)(isVisible), visible = _a[0], setVisible = _a[1];
+    var _b = (0, useTheme_1.useTheme)(), space = _b.space, color = _b.color;
+    var value = (0, react_1.useRef)(new react_native_1.Animated.Value(Number(isVisible))).current;
+    var fadeIn = function () {
+        return new Promise(function (resolve) {
+            react_native_1.Animated.timing(value, {
                 toValue: 1,
                 useNativeDriver: true,
                 duration: 180,
             }).start(resolve);
         });
     };
-    const fadeOut = () => {
-        return new Promise((resolve) => {
-            Animated.timing(value, {
+    var fadeOut = function () {
+        return new Promise(function (resolve) {
+            react_native_1.Animated.timing(value, {
                 toValue: 0,
                 useNativeDriver: true,
                 duration: 150,
             }).start(resolve);
         });
     };
-    useEffect(() => {
+    (0, react_1.useEffect)(function () {
         if (isVisible) {
             setVisible(true);
             fadeIn();
         }
         else {
-            fadeOut().then(() => {
+            fadeOut().then(function () {
                 setVisible(false);
             });
         }
     }, [isVisible]);
-    const backdrop = (_jsx(Animated.View, { style: [
-            StyleSheet.absoluteFillObject,
+    var backdrop = ((0, jsx_runtime_1.jsx)(react_native_1.Animated.View, { style: [
+            react_native_1.StyleSheet.absoluteFillObject,
             { opacity: value, backgroundColor: "rgba(194,194,194,0.5)" },
         ] }));
-    return (_jsxs(Modal, { ...other, visible: visible, statusBarTranslucent: true, transparent: true, animationType: "none", children: [!!onBackgroundPress ? (_jsx(TouchableWithoutFeedback, { accessibilityRole: "button", accessibilityLabel: "Dismiss", accessibilityHint: "Dismisses the dialog", testID: "dialog-backdrop", onPress: onBackgroundPress, children: backdrop })) : (backdrop), _jsx(SafeAreaView, { pointerEvents: "box-none", style: {
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.Modal, __assign({}, other, { visible: visible, statusBarTranslucent: true, transparent: true, animationType: "none", children: [!!onBackgroundPress ? ((0, jsx_runtime_1.jsx)(react_native_1.TouchableWithoutFeedback, { accessibilityRole: "button", accessibilityLabel: "Dismiss", accessibilityHint: "Dismisses the dialog", testID: "dialog-backdrop", onPress: onBackgroundPress, children: backdrop })) : (backdrop), (0, jsx_runtime_1.jsx)(react_native_safe_area_context_1.SafeAreaView, { pointerEvents: "box-none", style: {
                     flex: 1,
                     justifyContent: "center",
                     alignItems: "center",
                     padding: space(2),
                     backgroundColor: "transparent",
-                }, children: _jsxs(Animated.View, { style: {
+                }, children: (0, jsx_runtime_1.jsxs)(react_native_1.Animated.View, { style: {
                         width: "100%",
                         maxHeight: "100%",
                         opacity: value,
@@ -64,5 +89,6 @@ export const Dialog = (props) => {
                         },
                         shadowOpacity: 1,
                         shadowRadius: 10,
-                    }, children: [_jsx(Text, { testID: "dialog-title", variant: "sm-display", mb: 0.5, mt: 2, mx: 2, children: title }), !!detail && (_jsx(ScrollView, { alwaysBounceVertical: false, contentContainerStyle: { paddingHorizontal: space(2) }, children: _jsx(Text, { testID: "dialog-detail", variant: "sm", color: "mono60", children: detail }) })), _jsxs(Flex, { mt: 2, mb: 2, mx: 2, flexDirection: "row", justifyContent: "flex-end", children: [!!secondaryCta && (_jsx(Button, { size: "small", testID: "dialog-secondary-action-button", variant: "text", onPress: secondaryCta.onPress, children: secondaryCta.text })), _jsx(Button, { size: "small", variant: "fillDark", testID: "dialog-primary-action-button", ml: 2, onPress: primaryCta.onPress, children: primaryCta.text })] })] }) })] }));
+                    }, children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { testID: "dialog-title", variant: "sm-display", mb: 0.5, mt: 2, mx: 2, children: title }), !!detail && ((0, jsx_runtime_1.jsx)(react_native_1.ScrollView, { alwaysBounceVertical: false, contentContainerStyle: { paddingHorizontal: space(2) }, children: (0, jsx_runtime_1.jsx)(Text_1.Text, { testID: "dialog-detail", variant: "sm", color: "mono60", children: detail }) })), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { mt: 2, mb: 2, mx: 2, flexDirection: "row", justifyContent: "flex-end", children: [!!secondaryCta && ((0, jsx_runtime_1.jsx)(Button_1.Button, { size: "small", testID: "dialog-secondary-action-button", variant: "text", onPress: secondaryCta.onPress, children: secondaryCta.text })), (0, jsx_runtime_1.jsx)(Button_1.Button, { size: "small", variant: "fillDark", testID: "dialog-primary-action-button", ml: 2, onPress: primaryCta.onPress, children: primaryCta.text })] })] }) })] })));
 };
+exports.Dialog = Dialog;

package/dist/elements/Dialog/Dialog.stories.js

@@ -1,35 +1,54 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from "react";
-import { Dialog } from ".";
-import { List } from "../../storybook/helpers";
-import { Button } from "../Button";
-const DialogDemo = (props) => {
-    const [visible, setVisible] = useState(false);
-    return (_jsxs(List, { children: [_jsx(Button, { onPress: () => setVisible(true), children: "Show" }), _jsx(Dialog, { isVisible: visible, title: "Dialog Title", primaryCta: {
+"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.WithBackgroundPressHandler = exports.WithLongDetails = exports.WithDetails = exports.WithSecondaryAction = exports.Default = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var _1 = require(".");
+var helpers_1 = require("../../storybook/helpers");
+var Button_1 = require("../Button");
+var DialogDemo = function (props) {
+    var _a = (0, react_1.useState)(false), visible = _a[0], setVisible = _a[1];
+    return ((0, jsx_runtime_1.jsxs)(helpers_1.List, { children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { onPress: function () { return setVisible(true); }, children: "Show" }), (0, jsx_runtime_1.jsx)(_1.Dialog, __assign({ isVisible: visible, title: "Dialog Title", primaryCta: {
                     text: "OK",
-                    onPress: () => setVisible(false),
-                }, ...props })] }));
+                    onPress: function () { return setVisible(false); },
+                } }, props))] }));
 };
-export default {
+exports.default = {
     title: "Dialog",
 };
-export const Default = () => _jsx(DialogDemo, {});
-export const WithSecondaryAction = () => (_jsx(DialogDemo, { secondaryCta: {
+var Default = function () { return (0, jsx_runtime_1.jsx)(DialogDemo, {}); };
+exports.Default = Default;
+var WithSecondaryAction = function () { return ((0, jsx_runtime_1.jsx)(DialogDemo, { secondaryCta: {
         text: "Cancel",
-        onPress: () => { },
-    } }));
-WithSecondaryAction.story = {
+        onPress: function () { },
+    } })); };
+exports.WithSecondaryAction = WithSecondaryAction;
+exports.WithSecondaryAction.story = {
     name: "With secondary action",
 };
-export const WithDetails = () => (_jsx(DialogDemo, { detail: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum." }));
-WithDetails.story = {
+var WithDetails = function () { return ((0, jsx_runtime_1.jsx)(DialogDemo, { detail: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum." })); };
+exports.WithDetails = WithDetails;
+exports.WithDetails.story = {
     name: "With details",
 };
-export const WithLongDetails = () => (_jsx(DialogDemo, { detail: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.".repeat(100) }));
-WithLongDetails.story = {
+var WithLongDetails = function () { return ((0, jsx_runtime_1.jsx)(DialogDemo, { detail: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.".repeat(100) })); };
+exports.WithLongDetails = WithLongDetails;
+exports.WithLongDetails.story = {
     name: "With long details",
 };
-export const WithBackgroundPressHandler = () => _jsx(DialogDemo, { onBackgroundPress: () => { } });
-WithBackgroundPressHandler.story = {
+var WithBackgroundPressHandler = function () { return (0, jsx_runtime_1.jsx)(DialogDemo, { onBackgroundPress: function () { } }); };
+exports.WithBackgroundPressHandler = WithBackgroundPressHandler;
+exports.WithBackgroundPressHandler.story = {
     name: "With background press handler",
 };

package/dist/elements/Dialog/Dialog.tests.js

@@ -1,66 +1,68 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { fireEvent, screen, act } from "@testing-library/react-native";
-import { Dialog } from "./Dialog";
-import { renderWithWrappers } from "../../utils/tests/renderWithWrappers";
-describe("Dialog", () => {
-    beforeEach(() => {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_native_1 = require("@testing-library/react-native");
+var Dialog_1 = require("./Dialog");
+var renderWithWrappers_1 = require("../../utils/tests/renderWithWrappers");
+describe("Dialog", function () {
+    beforeEach(function () {
         jest.useFakeTimers();
     });
-    afterEach(() => {
+    afterEach(function () {
         jest.runOnlyPendingTimers();
         jest.useRealTimers();
     });
-    it("renders without error", () => {
-        renderWithWrappers(_jsx(Dialog, { title: "title", isVisible: true, primaryCta: {
+    it("renders without error", function () {
+        (0, renderWithWrappers_1.renderWithWrappers)((0, jsx_runtime_1.jsx)(Dialog_1.Dialog, { title: "title", isVisible: true, primaryCta: {
                 text: "Primary Action Button",
                 onPress: jest.fn(),
             } }));
-        expect(screen.getByText("title")).toBeOnTheScreen();
+        expect(react_native_1.screen.getByText("title")).toBeOnTheScreen();
     });
-    it("should render details if it is passed", () => {
-        renderWithWrappers(_jsx(Dialog, { title: "title", detail: "Some unique detail", isVisible: true, primaryCta: {
+    it("should render details if it is passed", function () {
+        (0, renderWithWrappers_1.renderWithWrappers)((0, jsx_runtime_1.jsx)(Dialog_1.Dialog, { title: "title", detail: "Some unique detail", isVisible: true, primaryCta: {
                 text: "Primary Action Button",
                 onPress: jest.fn(),
             } }));
-        expect(screen.getByText("Some unique detail")).toBeOnTheScreen();
+        expect(react_native_1.screen.getByText("Some unique detail")).toBeOnTheScreen();
     });
-    it("should render the primary action button", () => {
-        const primaryActionMock = jest.fn();
-        renderWithWrappers(_jsx(Dialog, { title: "title", isVisible: true, primaryCta: {
+    it("should render the primary action button", function () {
+        var primaryActionMock = jest.fn();
+        (0, renderWithWrappers_1.renderWithWrappers)((0, jsx_runtime_1.jsx)(Dialog_1.Dialog, { title: "title", isVisible: true, primaryCta: {
                 text: "Primary Action Button",
                 onPress: primaryActionMock,
             } }));
-        const primaryButton = screen.getByTestId("dialog-primary-action-button");
-        fireEvent.press(primaryButton);
-        act(() => {
+        var primaryButton = react_native_1.screen.getByTestId("dialog-primary-action-button");
+        react_native_1.fireEvent.press(primaryButton);
+        (0, react_native_1.act)(function () {
             jest.runAllTimers();
         });
         expect(primaryActionMock).toHaveBeenCalled();
-        expect(screen.getByText("Primary Action Button")).toBeOnTheScreen();
+        expect(react_native_1.screen.getByText("Primary Action Button")).toBeOnTheScreen();
     });
-    it("should render the secondary action button if it is passed", () => {
-        const secondaryActionMock = jest.fn();
-        renderWithWrappers(_jsx(Dialog, { title: "title", isVisible: true, primaryCta: {
+    it("should render the secondary action button if it is passed", function () {
+        var secondaryActionMock = jest.fn();
+        (0, renderWithWrappers_1.renderWithWrappers)((0, jsx_runtime_1.jsx)(Dialog_1.Dialog, { title: "title", isVisible: true, primaryCta: {
                 text: "Primary Action Button",
                 onPress: jest.fn(),
             }, secondaryCta: {
                 text: "Secondary Action Button",
                 onPress: secondaryActionMock,
             } }));
-        const secondaryButton = screen.getByTestId("dialog-secondary-action-button");
-        fireEvent.press(secondaryButton);
+        var secondaryButton = react_native_1.screen.getByTestId("dialog-secondary-action-button");
+        react_native_1.fireEvent.press(secondaryButton);
         jest.runAllTimers();
         expect(secondaryActionMock).toHaveBeenCalled();
-        expect(screen.getByText("Secondary Action Button")).toBeOnTheScreen();
+        expect(react_native_1.screen.getByText("Secondary Action Button")).toBeOnTheScreen();
     });
-    it("should call onBackgroundPress when backdrop is pressed", () => {
-        const onBackgroundPressMock = jest.fn();
-        renderWithWrappers(_jsx(Dialog, { title: "title", isVisible: true, onBackgroundPress: onBackgroundPressMock, primaryCta: {
+    it("should call onBackgroundPress when backdrop is pressed", function () {
+        var onBackgroundPressMock = jest.fn();
+        (0, renderWithWrappers_1.renderWithWrappers)((0, jsx_runtime_1.jsx)(Dialog_1.Dialog, { title: "title", isVisible: true, onBackgroundPress: onBackgroundPressMock, primaryCta: {
                 text: "Primary Action Button",
                 onPress: jest.fn(),
             } }));
-        fireEvent.press(screen.getByTestId("dialog-backdrop"));
-        act(() => {
+        react_native_1.fireEvent.press(react_native_1.screen.getByTestId("dialog-backdrop"));
+        (0, react_native_1.act)(function () {
             jest.runAllTimers();
         });
         expect(onBackgroundPressMock).toHaveBeenCalled();

package/dist/elements/Dialog/index.js

@@ -1 +1,17 @@
-export * from "./Dialog";
+"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("./Dialog"), exports);