@artsy/palette-mobile 13.2.33 → 13.2.34

package/dist/elements/Checkbox/Checkbox.js

@@ -1,85 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DisabledMark = exports.CheckMark = exports.Checkbox = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const theme_get_1 = require("@styled-system/theme-get");
-const react_1 = require("react");
-const react_native_1 = require("react-native");
-const native_1 = __importDefault(require("styled-components/native"));
-const CssTransition_1 = require("../../animation/CssTransition");
-const useTheme_1 = require("../../utils/hooks/useTheme");
-const Box_1 = require("../Box");
-const Flex_1 = require("../Flex");
-const Text_1 = require("../Text");
-const CHECKBOX_SIZE = 20;
-const DURATION = 250;
-const Checkbox = ({ checked: checkedProp, disabled, error, onPress, text, subtitle, children, checkboxAccessibilityProps, ...restProps }) => {
-    const { color, space } = (0, useTheme_1.useTheme)();
-    const fontScale = react_native_1.PixelRatio.getFontScale();
-    const checkboxSize = CHECKBOX_SIZE * fontScale;
-    const [checked, setChecked] = (0, react_1.useState)(checkedProp);
-    const isChecked = checkedProp ?? checked;
-    const defaultCheckboxStyle = {
-        backgroundColor: color("white100"),
-        borderColor: color("black60"),
-    };
-    const checkedCheckboxStyle = {
-        backgroundColor: color("black100"),
-        borderColor: color("black100"),
-    };
-    const disabledCheckboxStyle = {
-        backgroundColor: color("black5"),
-        borderColor: color("black10"),
-    };
-    const checkboxStyles = {
-        default: {
-            unchecked: defaultCheckboxStyle,
-            checked: checkedCheckboxStyle,
-        },
-        error: {
-            unchecked: { backgroundColor: color("white100"), borderColor: color("red100") },
-            checked: checkedCheckboxStyle,
-        },
-    };
-    const checkboxStyle = disabled
-        ? disabledCheckboxStyle
-        : checkboxStyles[error ? "error" : "default"][isChecked ? "checked" : "unchecked"];
-    const textColor = error ? color("red100") : disabled ? color("black30") : color("black100");
-    const subtitleColor = error ? color("red100") : disabled ? color("black30") : color("black60");
-    return ((0, jsx_runtime_1.jsx)(react_native_1.TouchableWithoutFeedback, { onPress: (event) => {
-            if (disabled) {
-                return;
-            }
-            setChecked(!checked);
-            onPress?.(event);
-        }, children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flex: 1, ...restProps, children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", children: [(0, jsx_runtime_1.jsx)(Flex_1.Flex, { mt: "2px", ...checkboxAccessibilityProps, children: (0, jsx_runtime_1.jsx)(CssTransition_1.CssTransition, { style: [
-                                    styles(fontScale).container,
-                                    text || subtitle || children ? { marginRight: space(1) * fontScale } : {},
-                                    checkboxStyle,
-                                ], animate: ["backgroundColor", "borderColor"], duration: DURATION, children: !!isChecked &&
-                                    (!!disabled ? ((0, jsx_runtime_1.jsx)(exports.DisabledMark, { size: checkboxSize })) : ((0, jsx_runtime_1.jsx)(exports.CheckMark, { size: checkboxSize }))) }) }), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { justifyContent: "center", flex: 1, children: [!!text && ((0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "sm-display", color: textColor, children: text })), children] })] }), !!subtitle && ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { ml: `${(CHECKBOX_SIZE + space(1)) * fontScale}px`, mt: "6px", children: (0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "xs", color: subtitleColor, children: subtitle }) }))] }) }));
-};
-exports.Checkbox = Checkbox;
-// styled-component does not have support for Animated.View
-const styles = (fontScale) => react_native_1.StyleSheet.create({
-    container: {
-        display: "flex",
-        justifyContent: "center",
-        alignItems: "center",
-        borderWidth: 1,
-        borderStyle: "solid",
-        width: CHECKBOX_SIZE * fontScale,
-        height: CHECKBOX_SIZE * fontScale,
-    },
-});
-// This component represents the √ mark in CSS. We are not using styled-system since it's easier to specify raw CSS
-// properties with styled-component.
-const CheckMark = ({ size }) => ((0, jsx_runtime_1.jsx)(Box_1.Box, { style: { transform: [{ rotate: "-45deg" }] }, top: "-12%", width: size * 0.625, height: size * 0.3125, borderBottomWidth: "2px", borderBottomColor: "white100", borderLeftWidth: "2px", borderLeftColor: "white100" }));
-exports.CheckMark = CheckMark;
-exports.DisabledMark = (0, native_1.default)(exports.CheckMark) `
-  border-bottom-color: ${(0, theme_get_1.themeGet)("colors.black30")};
-  border-left-color: ${(0, theme_get_1.themeGet)("colors.black30")};
-`;

package/dist/elements/Checkbox/Checkbox.stories.d.ts

@@ -1,7 +0,0 @@
-/// <reference types="react" />
-declare const _default: {
-    title: string;
-    component: import("react").FC<import("./Checkbox").CheckboxProps>;
-};
-export default _default;
-export declare function Variants(): JSX.Element;

package/dist/elements/Checkbox/Checkbox.stories.js

@@ -1,16 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Variants = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const Checkbox_1 = require("./Checkbox");
-const helpers_1 = require("../../storybook/helpers");
-exports.default = {
-    title: "Checkbox",
-    component: Checkbox_1.Checkbox,
-};
-function Variants() {
-    return ((0, jsx_runtime_1.jsxs)(helpers_1.List, { style: { marginLeft: 20 }, children: [(0, jsx_runtime_1.jsx)(helpers_1.Row, { children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { text: "Default" }) }), (0, jsx_runtime_1.jsx)(helpers_1.Row, { children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { text: "Checked", checked: true }) }), (0, jsx_runtime_1.jsx)(helpers_1.Row, { children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { text: "Disabled", disabled: true }) }), (0, jsx_runtime_1.jsx)(helpers_1.Row, { children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { text: "Checked and disabled", checked: true, disabled: true }) }), (0, jsx_runtime_1.jsx)(helpers_1.Row, { children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { text: "Error", error: true }) }), (0, jsx_runtime_1.jsx)(helpers_1.Row, { children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { text: `Default with multiline
-text` }) }), (0, jsx_runtime_1.jsx)(helpers_1.Row, { children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { text: "Disabled", subtitle: "With subtitle", disabled: true }) }), (0, jsx_runtime_1.jsx)(helpers_1.Row, { children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { text: `Error with multiline
-text`, subtitle: "With subtitle", error: true }) })] }));
-}
-exports.Variants = Variants;

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

@@ -1,2 +0,0 @@
-export * from "./Check";
-export * from "./Checkbox";

package/dist/elements/Checkbox/index.js

@@ -1,18 +0,0 @@
-"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("./Check"), exports);
-__exportStar(require("./Checkbox"), exports);

package/dist/elements/ClassTheme/ClassTheme.d.ts

@@ -1,6 +0,0 @@
-/// <reference types="react" />
-import { useTheme } from "../../";
-export declare const ClassTheme: ({ theme, children, }: {
-    theme?: "v3" | undefined;
-    children: import("react").ReactNode | ((helpers: ReturnType<typeof useTheme>) => React.ReactNode);
-}) => JSX.Element;

package/dist/elements/ClassTheme/ClassTheme.js

@@ -1,10 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ClassTheme = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const __1 = require("../../");
-const ClassTheme = ({ theme = "v3", children, }) => {
-    const currentTheme = (0, __1.useTheme)();
-    return ((0, jsx_runtime_1.jsx)(__1.Theme, { theme: theme, children: typeof children === "function" ? children(currentTheme) : children }));
-};
-exports.ClassTheme = ClassTheme;

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

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

package/dist/elements/ClassTheme/index.js

@@ -1,17 +0,0 @@
-"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("./ClassTheme"), exports);

package/dist/elements/Collapse/Collapse.d.ts

@@ -1,6 +0,0 @@
-import { ReactNode } from "react";
-export interface CollapseProps {
-    opened: boolean;
-    children: ReactNode;
-}
-export declare const Collapse: React.FC<CollapseProps>;

package/dist/elements/Collapse/Collapse.js

@@ -1,12 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Collapse = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_native_1 = require("react-native");
-const Collapse = ({ opened, children }) => {
-    if (!opened) {
-        return null;
-    }
-    return (0, jsx_runtime_1.jsx)(react_native_1.View, { children: children });
-};
-exports.Collapse = Collapse;

package/dist/elements/Collapse/Collapse.stories.d.ts

@@ -1,7 +0,0 @@
-/// <reference types="react" />
-declare const _default: {
-    title: string;
-    component: import("react").FC<import("./Collapse").CollapseProps>;
-};
-export default _default;
-export declare const Something: () => JSX.Element;

package/dist/elements/Collapse/Collapse.stories.js

@@ -1,16 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Something = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const Collapse_1 = require("./Collapse");
-const Text_1 = require("../Text");
-exports.default = {
-    title: "Collapse",
-    component: Collapse_1.Collapse,
-};
-const Something = () => {
-    const [opened, setOpened] = (0, react_1.useState)(true);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Text_1.LinkText, { onPress: () => setOpened((v) => !v), children: "toggle" }), (0, jsx_runtime_1.jsx)(Collapse_1.Collapse, { opened: opened, children: (0, jsx_runtime_1.jsx)(Text_1.Text, { children: "inside" }) })] }));
-};
-exports.Something = Something;

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

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

package/dist/elements/Collapse/index.js

@@ -1,17 +0,0 @@
-"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("./Collapse"), exports);

package/dist/elements/CollapsibleMenuItem/CollapsibleMenuItem.d.ts

@@ -1,20 +0,0 @@
-/// <reference types="react" />
-interface CollapsableMenuItemProps {
-    overtitle?: string;
-    title: string;
-    isExpanded?: boolean;
-    disabled?: boolean;
-    onExpand?: () => void;
-    onCollapse?: () => void;
-}
-export interface CollapsibleMenuItem {
-    isExpanded: () => boolean;
-    collapse: (onAnimationEnd?: () => void) => void;
-    expand: (onAnimationEnd?: () => void) => void;
-    completed: () => void;
-    offsetTop: () => Promise<number>;
-}
-export declare const CollapsibleMenuItem: import("react").ForwardRefExoticComponent<CollapsableMenuItemProps & {
-    children?: import("react").ReactNode;
-} & import("react").RefAttributes<CollapsibleMenuItem>>;
-export {};

package/dist/elements/CollapsibleMenuItem/CollapsibleMenuItem.js

@@ -1,46 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CollapsibleMenuItem = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const react_native_1 = require("react-native");
-const svgs_1 = require("../../svgs");
-const Collapse_1 = require("../Collapse");
-const Flex_1 = require("../Flex");
-const Text_1 = require("../Text");
-const Touchable_1 = require("../Touchable");
-exports.CollapsibleMenuItem = (0, react_1.forwardRef)(({ children, overtitle, title, isExpanded = false, disabled = false, onExpand, onCollapse }, ref) => {
-    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
-    const [isCompleted, setIsCompleted] = (0, react_1.useState)(false);
-    const componentRef = (0, react_1.useRef)(null);
-    (0, react_1.useEffect)(() => {
-        setIsOpen(isExpanded);
-    }, []);
-    (0, react_1.useImperativeHandle)(ref, () => ({
-        collapse(onAnimationEnd) {
-            react_native_1.LayoutAnimation.configureNext(react_native_1.LayoutAnimation.Presets.easeInEaseOut, onAnimationEnd);
-            setIsOpen(false);
-        },
-        expand(onAnimationEnd) {
-            react_native_1.LayoutAnimation.configureNext(react_native_1.LayoutAnimation.Presets.easeInEaseOut, onAnimationEnd);
-            setIsOpen(true);
-        },
-        completed() {
-            setIsCompleted(true);
-        },
-        isExpanded() {
-            return isOpen;
-        },
-        offsetTop: () => {
-            return new Promise((resolve) => {
-                componentRef.current?.measureInWindow((_, h) => {
-                    resolve(h);
-                });
-            });
-        },
-    }), [isOpen]);
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { ref: componentRef, collapsable: false, children: [(0, jsx_runtime_1.jsxs)(Touchable_1.Touchable, { onPress: () => {
-                    setIsOpen(!isOpen);
-                    isOpen ? onCollapse?.() : onExpand?.();
-                }, disabled: disabled, children: [!!overtitle && ((0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "sm", color: disabled ? "black30" : "black100", 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 ? "black30" : "black100", style: { maxWidth: "90%" }, children: title }), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", alignItems: "center", children: [!!isCompleted && ((0, jsx_runtime_1.jsx)(svgs_1.CheckCircleIcon, { fill: "green100", height: 24, width: 24, style: { marginRight: 5 } })), (0, jsx_runtime_1.jsx)(svgs_1.ChevronIcon, { direction: isOpen ? "up" : "down", fill: disabled ? "black30" : "black60" })] })] })] }), (0, jsx_runtime_1.jsx)(Collapse_1.Collapse, { opened: isOpen, children: children })] }));
-});

package/dist/elements/CollapsibleMenuItem/CollapsibleMenuItem.stories.d.ts

@@ -1,12 +0,0 @@
-/// <reference types="react" />
-export declare const ArtworkDetails: ({ handlePress }: {
-    handlePress: () => void;
-}) => JSX.Element;
-export declare const UploadPhotos: ({ handlePress }: {
-    handlePress: () => void;
-}) => JSX.Element;
-export declare const ContactInformation: ({ handlePress }: {
-    handlePress: () => void;
-}) => JSX.Element;
-export declare const DisplayContent: () => JSX.Element;
-export declare const ComponentWithCollapsibleMenu: () => JSX.Element;

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

@@ -1,94 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ComponentWithCollapsibleMenu = exports.DisplayContent = exports.ContactInformation = exports.UploadPhotos = exports.ArtworkDetails = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_native_1 = require("@storybook/react-native");
-const react_1 = require("react");
-const react_native_2 = require("react-native");
-const CollapsibleMenuItem_1 = require("./CollapsibleMenuItem");
-const Button_1 = require("../Button");
-const Flex_1 = require("../Flex");
-const Join_1 = require("../Join");
-const Separator_1 = require("../Separator");
-const Spacer_1 = require("../Spacer");
-const Text_1 = require("../Text");
-const ArtworkDetails = ({ 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 })] }));
-};
-exports.ArtworkDetails = ArtworkDetails;
-const UploadPhotos = ({ 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 })] }));
-};
-exports.UploadPhotos = UploadPhotos;
-const ContactInformation = ({ 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 })] }));
-};
-exports.ContactInformation = ContactInformation;
-const CTAButton = ({ onPress, text }) => ((0, jsx_runtime_1.jsx)(Button_1.Button, { block: true, haptic: true, maxWidth: 540, onPress: onPress, children: text }));
-const DisplayContent = () => {
-    return ((0, jsx_runtime_1.jsx)(react_native_2.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;
-const ComponentWithCollapsibleMenu = () => {
-    const items = [
-        {
-            overtitle: "Optional overtitle",
-            title: "Artwork Details",
-            Content: ((0, jsx_runtime_1.jsx)(exports.ArtworkDetails, { handlePress: () => {
-                    expandCollapsibleMenuContent(1);
-                    enableStep(1);
-                } })),
-        },
-        {
-            overtitle: "Optional overtitle",
-            title: "Upload Photos",
-            Content: ((0, jsx_runtime_1.jsx)(exports.UploadPhotos, { handlePress: () => {
-                    expandCollapsibleMenuContent(2);
-                    enableStep(2);
-                } })),
-        },
-        {
-            overtitle: "Optional overtitle",
-            title: "Contact Information",
-            Content: ((0, jsx_runtime_1.jsx)(exports.ContactInformation, { handlePress: () => {
-                    // navigation.navigate("ArtworkSubmittedScreen")
-                    // do nothing
-                } })),
-        },
-    ];
-    const TOTAL_STEPS = items.length;
-    const [validSteps, setValidSteps] = (0, react_1.useState)([true, ...new Array(TOTAL_STEPS - 1).fill(false)]);
-    const stepsRefs = (0, react_1.useRef)(new Array(TOTAL_STEPS).fill(null)).current;
-    const enableStep = (stepIndex) => {
-        const newValidSteps = [...validSteps];
-        newValidSteps[stepIndex] = true;
-        setValidSteps(newValidSteps);
-    };
-    const expandCollapsibleMenuContent = (indexToExpand) => {
-        items.forEach((_, index) => {
-            if (indexToExpand !== index) {
-                stepsRefs[index].collapse();
-            }
-            else {
-                if (index > 0) {
-                    stepsRefs[index - 1].completed();
-                }
-                stepsRefs[index].expand();
-            }
-        });
-    };
-    return ((0, jsx_runtime_1.jsx)(react_native_2.View, { style: { margin: 20 }, children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { children: (0, jsx_runtime_1.jsxs)(react_native_2.ScrollView, { contentContainerStyle: {
-                    paddingVertical: 20,
-                    paddingHorizontal: 20,
-                    justifyContent: "center",
-                }, 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(({ overtitle, title, Content }, index) => {
-                            const disabled = !validSteps[index];
-                            return ((0, jsx_runtime_1.jsx)(CollapsibleMenuItem_1.CollapsibleMenuItem, { overtitle: overtitle, title: title, onExpand: () => expandCollapsibleMenuContent(index), isExpanded: index === 0, disabled: disabled, ref: (ref) => {
-                                    if (ref) {
-                                        stepsRefs[index] = ref;
-                                    }
-                                }, children: Content }, index));
-                        }) })] }) }) }));
-};
-exports.ComponentWithCollapsibleMenu = ComponentWithCollapsibleMenu;
-(0, react_native_1.storiesOf)("Collapsible Menu ", module).add("Collapse Collapse Items", () => ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(exports.ComponentWithCollapsibleMenu, {}) })));

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

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

package/dist/elements/CollapsibleMenuItem/index.js

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

@@ -1,15 +0,0 @@
-/// <reference types="react" />
-interface DialogAction {
-    text: string;
-    onPress: () => void;
-}
-export interface DialogProps {
-    isVisible: boolean;
-    title: string;
-    detail?: string;
-    primaryCta: DialogAction;
-    secondaryCta?: DialogAction;
-    onBackgroundPress?: () => void;
-}
-export declare const Dialog: (props: DialogProps) => JSX.Element;
-export {};

package/dist/elements/Dialog/Dialog.js

@@ -1,72 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Dialog = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const react_native_1 = require("react-native");
-const react_native_safe_area_context_1 = require("react-native-safe-area-context");
-const useTheme_1 = require("../../utils/hooks/useTheme");
-const Button_1 = require("../Button");
-const Flex_1 = require("../Flex");
-const Text_1 = require("../Text");
-const Dialog = (props) => {
-    const { isVisible, title, detail, primaryCta, secondaryCta, onBackgroundPress, ...other } = props;
-    const [visible, setVisible] = (0, react_1.useState)(isVisible);
-    const { space, color } = (0, useTheme_1.useTheme)();
-    const value = (0, react_1.useRef)(new react_native_1.Animated.Value(Number(isVisible))).current;
-    const fadeIn = () => {
-        return new Promise((resolve) => {
-            react_native_1.Animated.timing(value, {
-                toValue: 1,
-                useNativeDriver: true,
-                duration: 180,
-            }).start(resolve);
-        });
-    };
-    const fadeOut = () => {
-        return new Promise((resolve) => {
-            react_native_1.Animated.timing(value, {
-                toValue: 0,
-                useNativeDriver: true,
-                duration: 150,
-            }).start(resolve);
-        });
-    };
-    (0, react_1.useEffect)(() => {
-        if (isVisible) {
-            setVisible(true);
-            fadeIn();
-        }
-        else {
-            fadeOut().then(() => {
-                setVisible(false);
-            });
-        }
-    }, [isVisible]);
-    const 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 ((0, jsx_runtime_1.jsxs)(react_native_1.Modal, { ...other, visible: visible, statusBarTranslucent: true, transparent: true, animationType: "none", children: [!!onBackgroundPress ? ((0, jsx_runtime_1.jsx)(react_native_1.TouchableWithoutFeedback, { 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: (0, jsx_runtime_1.jsxs)(react_native_1.Animated.View, { style: {
-                        width: "100%",
-                        maxHeight: "100%",
-                        opacity: value,
-                        backgroundColor: color("white100"),
-                        borderWidth: 1,
-                        borderColor: color("black5"),
-                        shadowColor: "rgba(0, 0, 0, 0.06)",
-                        shadowOffset: {
-                            height: 2,
-                            width: 0,
-                        },
-                        shadowOpacity: 1,
-                        shadowRadius: 10,
-                    }, 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: "black60", 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.d.ts

@@ -1 +0,0 @@
-export {};

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

@@ -1,24 +0,0 @@
-"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 _1 = require(".");
-const helpers_1 = require("../../storybook/helpers");
-const Button_1 = require("../Button");
-const DialogDemo = (props) => {
-    const [visible, setVisible] = (0, react_1.useState)(false);
-    return ((0, jsx_runtime_1.jsxs)(helpers_1.List, { children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { onPress: () => setVisible(true), children: "Show" }), (0, jsx_runtime_1.jsx)(_1.Dialog, { isVisible: visible, title: "Dialog Title", primaryCta: {
-                    text: "OK",
-                    onPress: () => setVisible(false),
-                }, ...props })] }));
-};
-(0, react_native_1.storiesOf)("Dialog", module)
-    .add("Default", () => (0, jsx_runtime_1.jsx)(DialogDemo, {}))
-    .add("With secondary action", () => ((0, jsx_runtime_1.jsx)(DialogDemo, { secondaryCta: {
-        text: "Cancel",
-        onPress: () => { },
-    } })))
-    .add("With details", () => ((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." })))
-    .add("With long details", () => ((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) })))
-    .add("With background press handler", () => (0, jsx_runtime_1.jsx)(DialogDemo, { onBackgroundPress: () => { } }));

package/dist/elements/Dialog/Dialog.tests.d.ts

@@ -1 +0,0 @@
-export {};

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

@@ -1,56 +0,0 @@
-"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 Dialog_1 = require("./Dialog");
-const renderWithWrappers_1 = require("../../utils/tests/renderWithWrappers");
-describe("Dialog", () => {
-    it("renders without error", () => {
-        const { getByText } = (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(getByText("title")).toBeTruthy();
-    });
-    it("should render details if it is passed", () => {
-        const { getByText } = (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(getByText("Some unique detail")).toBeTruthy();
-    });
-    it("should render the primary action button", () => {
-        const primaryActionMock = jest.fn();
-        const { getByTestId, getByText } = (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 = getByTestId("dialog-primary-action-button");
-        react_native_1.fireEvent.press(primaryButton);
-        expect(primaryActionMock).toHaveBeenCalled();
-        expect(getByText("Primary Action Button")).toBeTruthy();
-    });
-    it("should render the secondary action button if it is passed", () => {
-        const secondaryActionMock = jest.fn();
-        const { getByTestId, getByText } = (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 = getByTestId("dialog-secondary-action-button");
-        react_native_1.fireEvent.press(secondaryButton);
-        expect(secondaryActionMock).toHaveBeenCalled();
-        expect(getByText("Secondary Action Button")).toBeTruthy();
-    });
-    it("should call onBackgroundPress when backdrop is pressed", () => {
-        const onBackgroundPressMock = jest.fn();
-        const { getByTestId } = (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(),
-            } }));
-        react_native_1.fireEvent.press(getByTestId("dialog-backdrop"));
-        expect(onBackgroundPressMock).toHaveBeenCalled();
-    });
-});

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

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