@artsy/palette-mobile 13.2.33 → 13.2.35

package/dist/elements/Text/helpers.js

@@ -1,9 +1,6 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useTextStyleForPalette = exports.useFontFamilyFor = void 0;
-const useTheme_1 = require("../../utils/hooks/useTheme");
-const useFontFamilyFor = ({ italic, weight, }) => {
-    const { theme } = (0, useTheme_1.useTheme)();
+import { useTheme } from "../../utils/hooks/useTheme";
+export const useFontFamilyFor = ({ italic, weight, }) => {
+    const { theme } = useTheme();
     const { fonts } = theme;
     if (italic && weight === "medium") {
         return fonts.sans.mediumItalic;
@@ -16,19 +13,17 @@ const useFontFamilyFor = ({ italic, weight, }) => {
     }
     return fonts.sans.regular;
 };
-exports.useFontFamilyFor = useFontFamilyFor;
 /**
  * Use this function within Palette and other "atom" components like `Button`, `Pill`, etc.
  * This function returns a `TextStyle` that has a `fontSize` and `lineHeight` of the same number.
  * This is to make a `Text` behave correctly when it needs to be combined with others to make a UI component.
  * Don't use this function when some actual text needs to be displayed. Only use it when text needs to be part of a UI component.
  */
-const useTextStyleForPalette = (variant) => {
-    const { theme } = (0, useTheme_1.useTheme)();
+export const useTextStyleForPalette = (variant) => {
+    const { theme } = useTheme();
     const fontSizeAndLineHeight = theme.textTreatments[variant].fontSize;
     return {
         fontSize: fontSizeAndLineHeight,
         lineHeight: fontSizeAndLineHeight,
     };
 };
-exports.useTextStyleForPalette = useTextStyleForPalette;

package/dist/elements/Text/index.js

@@ -1,19 +1,3 @@
-"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("./helpers"), exports);
-__exportStar(require("./Text"), exports);
-__exportStar(require("./LinkText"), exports);
+export * from "./helpers";
+export * from "./Text";
+export * from "./LinkText";

package/dist/elements/ToolTip/ToolTip.js

@@ -1,17 +1,14 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useToolTipContext = exports.ToolTip = exports.ToolTipContext = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const lodash_1 = require("lodash");
-const react_1 = require("react");
-const react_native_1 = require("react-native");
-const ToolTipFlyout_1 = require("./ToolTipFlyout");
-const TriangleDown_1 = require("../../svgs/TriangleDown");
-const useScreenDimensions_1 = require("../../utils/hooks/useScreenDimensions");
-const useTheme_1 = require("../../utils/hooks/useTheme");
-exports.ToolTipContext = (0, react_1.createContext)({
-    dismissToolTip: () => lodash_1.noop,
-    setToolTip: () => lodash_1.noop,
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { noop } from "lodash";
+import { createContext, useContext, useRef, useState } from "react";
+import { View } from "react-native";
+import { ToolTipFlyout, ToolTipTextContainer } from "./ToolTipFlyout";
+import { TriangleDown } from "../../svgs/TriangleDown";
+import { useScreenDimensions } from "../../utils/hooks/useScreenDimensions";
+import { useTheme } from "../../utils/hooks/useTheme";
+export const ToolTipContext = createContext({
+    dismissToolTip: () => noop,
+    setToolTip: () => noop,
 });
 /**
  * A ToolTip Component
@@ -33,16 +30,16 @@ exports.ToolTipContext = (0, react_1.createContext)({
  * </ToolTip>
  *
  */
-const ToolTip = ({ children, enabled = true, flowDirection, initialToolTipText, maxWidth, onPress, position = "TOP", tapToDismiss = false, testID, xOffset = 0, yOffset = 5, }) => {
-    const { space } = (0, useTheme_1.useTheme)();
-    const mWidth = (0, useScreenDimensions_1.useScreenDimensions)().width - space(2) * 2; // 40 accounting for padding 20 on each side of the screen
+export const ToolTip = ({ children, enabled = true, flowDirection, initialToolTipText, maxWidth, onPress, position = "TOP", tapToDismiss = false, testID, xOffset = 0, yOffset = 5, }) => {
+    const { space } = useTheme();
+    const mWidth = useScreenDimensions().width - space(2) * 2; // 40 accounting for padding 20 on each side of the screen
     const MAX_TOOLTIP_WIDTH = maxWidth ?? mWidth;
-    const [toolTipText, setToolTip] = (0, react_1.useState)(initialToolTipText);
-    const [childrenDimensions, setChildrenDimensions] = (0, react_1.useState)({ height: 0, width: 0, x: 0 });
-    const [singleTextDimension, setSingleTextDimension] = (0, react_1.useState)({ height: 0, width: 0 });
+    const [toolTipText, setToolTip] = useState(initialToolTipText);
+    const [childrenDimensions, setChildrenDimensions] = useState({ height: 0, width: 0, x: 0 });
+    const [singleTextDimension, setSingleTextDimension] = useState({ height: 0, width: 0 });
     const dismissToolTip = () => setToolTip(undefined);
-    const [pageX, setPageX] = (0, react_1.useState)(0);
-    const childrenRef = (0, react_1.useRef)(null);
+    const [pageX, setPageX] = useState(0);
+    const childrenRef = useRef(null);
     const totalTextWidth = singleTextDimension.width * (toolTipText?.length ?? 0);
     const finalToolTipWidth = Math.min(totalTextWidth, MAX_TOOLTIP_WIDTH);
     const numOfLines = getNumberOfLines(finalToolTipWidth, totalTextWidth);
@@ -54,18 +51,18 @@ const ToolTip = ({ children, enabled = true, flowDirection, initialToolTipText,
     const nearLeftEdge = pageX < mWidth / 4 || flowDirection === "RIGHT";
     const nearRightEdge = pageX > mWidth - mWidth / 4 || flowDirection === "LEFT";
     const extraStyle = nearLeftEdge ? { left: 0 } : nearRightEdge ? { right: 0 } : undefined;
-    return ((0, jsx_runtime_1.jsxs)(exports.ToolTipContext.Provider, { value: {
+    return (_jsxs(ToolTipContext.Provider, { value: {
             dismissToolTip,
             setToolTip,
-        }, children: [!!enabled && position === "TOP" && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ToolTipFlyout_1.ToolTipFlyout, { containerStyle: {
+        }, children: [!!enabled && position === "TOP" && (_jsxs(_Fragment, { children: [_jsx(ToolTipFlyout, { containerStyle: {
                             bottom: childrenDimensions.height + yOffset,
                             left: xOffset,
                             ...extraStyle,
-                        }, tapToDismiss: tapToDismiss, height: finalToolTipHeight, width: finalToolTipWidth, onClose: dismissToolTip, onToolTipPress: onPress, position: position, testID: testID, text: toolTipText }), !!enabled && position === "TOP" && !!toolTipText && ((0, jsx_runtime_1.jsx)(TriangleDown_1.TriangleDown, { style: {
+                        }, tapToDismiss: tapToDismiss, height: finalToolTipHeight, width: finalToolTipWidth, onClose: dismissToolTip, onToolTipPress: onPress, position: position, testID: testID, text: toolTipText }), !!enabled && position === "TOP" && !!toolTipText && (_jsx(TriangleDown, { style: {
                             left: triangleXDisplacement + xOffset,
                             position: "absolute",
                             bottom: childrenDimensions.height + yOffset - 5, // where 5 is the triangle icon size
-                        } }))] })), (0, jsx_runtime_1.jsx)(react_native_1.View, { ref: childrenRef, onLayout: (event) => {
+                        } }))] })), _jsx(View, { ref: childrenRef, onLayout: (event) => {
                     setChildrenDimensions({
                         height: event.nativeEvent.layout.height,
                         width: event.nativeEvent.layout.width,
@@ -74,30 +71,28 @@ const ToolTip = ({ children, enabled = true, flowDirection, initialToolTipText,
                     childrenRef.current?.measure((_fx, _fy, _width, _height, px, _py) => {
                         setPageX(px);
                     });
-                }, children: children }), !!enabled && position === "BOTTOM" && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ToolTipFlyout_1.ToolTipFlyout, { containerStyle: {
+                }, children: children }), !!enabled && position === "BOTTOM" && (_jsxs(_Fragment, { children: [_jsx(ToolTipFlyout, { containerStyle: {
                             top: childrenDimensions.height + yOffset,
                             ...extraStyle,
-                        }, tapToDismiss: tapToDismiss, height: finalToolTipHeight, width: finalToolTipWidth, onClose: dismissToolTip, onToolTipPress: onPress, position: position, testID: testID, text: toolTipText }), !!enabled && position === "BOTTOM" && !!toolTipText && ((0, jsx_runtime_1.jsx)(TriangleDown_1.TriangleDown, { style: {
+                        }, tapToDismiss: tapToDismiss, height: finalToolTipHeight, width: finalToolTipWidth, onClose: dismissToolTip, onToolTipPress: onPress, position: position, testID: testID, text: toolTipText }), !!enabled && position === "BOTTOM" && !!toolTipText && (_jsx(TriangleDown, { style: {
                             transform: [{ rotate: "180deg" }],
                             left: triangleXDisplacement + xOffset,
                             position: "absolute",
                             top: childrenDimensions.height + yOffset - 5, // where 5 is the triangle icon size,
-                        } }))] })), !!enabled && !!toolTipText && ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: { position: "absolute", opacity: 0 }, onLayout: ({ nativeEvent }) => {
+                        } }))] })), !!enabled && !!toolTipText && (_jsx(View, { style: { position: "absolute", opacity: 0 }, onLayout: ({ nativeEvent }) => {
                     setSingleTextDimension({
                         height: nativeEvent.layout.height,
                         width: nativeEvent.layout.width,
                     });
-                }, children: (0, jsx_runtime_1.jsx)(ToolTipFlyout_1.ToolTipTextContainer, { text: "x" }) }))] }));
+                }, children: _jsx(ToolTipTextContainer, { text: "x" }) }))] }));
 };
-exports.ToolTip = ToolTip;
-const useToolTipContext = () => {
-    const context = (0, react_1.useContext)(exports.ToolTipContext);
+export const useToolTipContext = () => {
+    const context = useContext(ToolTipContext);
     if (!context) {
         throw new Error("Attempted to use useToolTipContext outside of ToolTip Provider. Please wrap your component with <ToolTip>");
     }
     return context;
 };
-exports.useToolTipContext = useToolTipContext;
 /** Given a maximum width and a total width, how many of the maximum widths can we get from the total width?
  * The answer gotten will let us know how many lines of text the tool tip text will need.
  *  Note: We add one for whatever spill over remains i.e text that does not fill an entire line.

package/dist/elements/ToolTip/ToolTip.stories.js

@@ -1,14 +1,12 @@
-"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 ToolTip_1 = require("./ToolTip");
-const Button_1 = require("../Button");
-const Flex_1 = require("../Flex");
-const Text_1 = require("../Text");
-(0, react_native_1.storiesOf)("ToolTip", module)
-    .add("Simple ToolTip", () => ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignSelf: "center", mt: "200px", alignItems: "center", flexWrap: "wrap", children: (0, jsx_runtime_1.jsx)(ToolTip_1.ToolTip, { initialToolTipText: "Tap to dismiss me", position: "TOP", tapToDismiss: true, children: (0, jsx_runtime_1.jsx)(Text_1.Text, { weight: "medium", children: "I am a Text" }) }) })))
-    .add("Bottom ToolTip", () => ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignSelf: "center", mt: "200px", flexWrap: "wrap", children: (0, jsx_runtime_1.jsx)(ToolTip_1.ToolTip, { initialToolTipText: "Bottom tooltip", position: "BOTTOM", tapToDismiss: true, children: (0, jsx_runtime_1.jsx)(Text_1.Text, { weight: "medium", children: "I am a Text" }) }) })))
-    .add("Change ToolTip", () => ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignSelf: "center", mt: "200px", children: (0, jsx_runtime_1.jsx)(ToolTip_1.ToolTip, { initialToolTipText: "I can be changed", position: "TOP", tapToDismiss: true, children: (0, jsx_runtime_1.jsx)(ToolTip_1.ToolTipContext.Consumer, { children: ({ setToolTip }) => {
-                return ((0, jsx_runtime_1.jsx)(Button_1.Button, { size: "small", onPress: () => setToolTip("I'm the new tooltip"), children: "Press To Change ToolTip" }));
+import { jsx as _jsx } from "react/jsx-runtime";
+import { storiesOf } from "@storybook/react-native";
+import { ToolTip, ToolTipContext } from "./ToolTip";
+import { Button } from "../Button";
+import { Flex } from "../Flex";
+import { Text } from "../Text";
+storiesOf("ToolTip", module)
+    .add("Simple ToolTip", () => (_jsx(Flex, { alignSelf: "center", mt: "200px", alignItems: "center", flexWrap: "wrap", children: _jsx(ToolTip, { initialToolTipText: "Tap to dismiss me", position: "TOP", tapToDismiss: true, children: _jsx(Text, { weight: "medium", children: "I am a Text" }) }) })))
+    .add("Bottom ToolTip", () => (_jsx(Flex, { alignSelf: "center", mt: "200px", flexWrap: "wrap", children: _jsx(ToolTip, { initialToolTipText: "Bottom tooltip", position: "BOTTOM", tapToDismiss: true, children: _jsx(Text, { weight: "medium", children: "I am a Text" }) }) })))
+    .add("Change ToolTip", () => (_jsx(Flex, { alignSelf: "center", mt: "200px", children: _jsx(ToolTip, { initialToolTipText: "I can be changed", position: "TOP", tapToDismiss: true, children: _jsx(ToolTipContext.Consumer, { children: ({ setToolTip }) => {
+                return (_jsx(Button, { size: "small", onPress: () => setToolTip("I'm the new tooltip"), children: "Press To Change ToolTip" }));
             } }) }) })));

package/dist/elements/ToolTip/ToolTip.tests.js

@@ -1,17 +1,15 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const ToolTip_1 = require("./ToolTip");
-const hooks_1 = require("../../utils/hooks");
-const renderWithWrappers_1 = require("../../utils/tests/renderWithWrappers");
-const Text_1 = require("../Text");
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ToolTip } from "./ToolTip";
+import { ScreenDimensionsProvider } from "../../utils/hooks";
+import { renderWithWrappers } from "../../utils/tests/renderWithWrappers";
+import { Text } from "../Text";
 describe("ToolTip", () => {
     it("shows the flyout when enabled", () => {
-        const { queryByTestId } = (0, renderWithWrappers_1.renderWithWrappers)((0, jsx_runtime_1.jsx)(hooks_1.ScreenDimensionsProvider, { children: (0, jsx_runtime_1.jsx)(ToolTip_1.ToolTip, { enabled: true, testID: "flyout", initialToolTipText: "Words", children: (0, jsx_runtime_1.jsx)(Text_1.Text, { children: "Text" }) }) }));
+        const { queryByTestId } = renderWithWrappers(_jsx(ScreenDimensionsProvider, { children: _jsx(ToolTip, { enabled: true, testID: "flyout", initialToolTipText: "Words", children: _jsx(Text, { children: "Text" }) }) }));
         expect(queryByTestId("flyout")).not.toBeNull();
     });
     it("Does not show the flyout when disabled", () => {
-        const { queryByTestId } = (0, renderWithWrappers_1.renderWithWrappers)((0, jsx_runtime_1.jsx)(hooks_1.ScreenDimensionsProvider, { children: (0, jsx_runtime_1.jsx)(ToolTip_1.ToolTip, { enabled: false, testID: "flyout", initialToolTipText: "Words", children: (0, jsx_runtime_1.jsx)(Text_1.Text, { children: "Text" }) }) }));
+        const { queryByTestId } = renderWithWrappers(_jsx(ScreenDimensionsProvider, { children: _jsx(ToolTip, { enabled: false, testID: "flyout", initialToolTipText: "Words", children: _jsx(Text, { children: "Text" }) }) }));
         expect(queryByTestId("flyout")).toBeNull();
     });
 });

package/dist/elements/ToolTip/ToolTipFlyout.js

@@ -1,50 +1,24 @@
-"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.ToolTipTextContainer = exports.ToolTipFlyout = 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_reanimated_1 = __importStar(require("react-native-reanimated"));
-const useColor_1 = require("../../utils/hooks/useColor");
-const Flex_1 = require("../Flex");
-const Text_1 = require("../Text");
-const ToolTipFlyout = ({ containerStyle, tapToDismiss, height, width, onClose, onToolTipPress, testID, text, }) => {
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect } from "react";
+import { TouchableWithoutFeedback } from "react-native";
+import Animated, { useAnimatedStyle, useSharedValue, withTiming } from "react-native-reanimated";
+import { useColor } from "../../utils/hooks/useColor";
+import { Flex } from "../Flex";
+import { Text } from "../Text";
+export const ToolTipFlyout = ({ containerStyle, tapToDismiss, height, width, onClose, onToolTipPress, testID, text, }) => {
     const initialBoxDimensions = { height: 0, width: 0 };
-    const boxDimensions = (0, react_native_reanimated_1.useSharedValue)(initialBoxDimensions);
-    const animationStyle = (0, react_native_reanimated_1.useAnimatedStyle)(() => {
+    const boxDimensions = useSharedValue(initialBoxDimensions);
+    const animationStyle = useAnimatedStyle(() => {
         return {
-            height: (0, react_native_reanimated_1.withTiming)(boxDimensions.value.height, {
+            height: withTiming(boxDimensions.value.height, {
                 duration: 500,
             }),
-            width: (0, react_native_reanimated_1.withTiming)(boxDimensions.value.width, {
+            width: withTiming(boxDimensions.value.width, {
                 duration: 500,
             }),
         };
     });
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         if (text) {
             boxDimensions.value = {
                 height,
@@ -56,7 +30,7 @@ const ToolTipFlyout = ({ containerStyle, tapToDismiss, height, width, onClose, o
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [text, height, width]);
-    const color = (0, useColor_1.useColor)();
+    const color = useColor();
     const handleClose = () => {
         onClose();
     };
@@ -66,7 +40,7 @@ const ToolTipFlyout = ({ containerStyle, tapToDismiss, height, width, onClose, o
             handleClose();
         }
     };
-    return ((0, jsx_runtime_1.jsx)(react_native_1.TouchableWithoutFeedback, { onPress: onPress, testID: testID, children: (0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { style: [
+    return (_jsx(TouchableWithoutFeedback, { onPress: onPress, testID: testID, children: _jsx(Animated.View, { style: [
                 {
                     backgroundColor: color("black100"),
                     position: "absolute",
@@ -75,14 +49,12 @@ const ToolTipFlyout = ({ containerStyle, tapToDismiss, height, width, onClose, o
                 },
                 containerStyle,
                 animationStyle,
-            ], children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { justifyContent: "center", alignItems: "center", bg: "black100", children: (0, jsx_runtime_1.jsx)(exports.ToolTipTextContainer, { text: text }) }) }) }));
+            ], children: _jsx(Flex, { justifyContent: "center", alignItems: "center", bg: "black100", children: _jsx(ToolTipTextContainer, { text: text }) }) }) }));
 };
-exports.ToolTipFlyout = ToolTipFlyout;
 /** Please be careful with applying any styling here. This forms the basis with which we measure
  * in advance by how large we can inflate a tooltip.
  */
-const ToolTipTextContainer = ({ text }) => {
-    const color = (0, useColor_1.useColor)();
-    return ((0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "xs", color: color("white100"), pb: 0.5, children: text }));
+export const ToolTipTextContainer = ({ text }) => {
+    const color = useColor();
+    return (_jsx(Text, { variant: "xs", color: color("white100"), pb: 0.5, children: text }));
 };
-exports.ToolTipTextContainer = ToolTipTextContainer;

package/dist/elements/ToolTip/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("./ToolTip"), exports);
+export * from "./ToolTip";

package/dist/elements/Touchable/Touchable.js

@@ -1,34 +1,27 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Touchable = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = __importDefault(require("react"));
-const react_native_1 = require("react-native");
-const react_native_haptic_feedback_1 = __importDefault(require("react-native-haptic-feedback"));
-const constants_1 = require("../../constants");
-const useColor_1 = require("../../utils/hooks/useColor");
-const Flex_1 = require("../Flex");
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+import { TouchableHighlight, TouchableWithoutFeedback, } from "react-native";
+import Haptic from "react-native-haptic-feedback";
+import { DEFAULT_ACTIVE_OPACITY } from "../../constants";
+import { useColor } from "../../utils/hooks/useColor";
+import { Flex } from "../Flex";
 /**
  * `haptic` can be used like:
  * <Touchable haptic />
  * or
  * <Touchable haptic="impactHeavy" />
  */
-const Touchable = ({ children, flex, haptic, noFeedback, onPress, underlayColor, ...props }) => {
-    const color = (0, useColor_1.useColor)();
-    const inner = react_1.default.Children.count(children) === 1 ? children : (0, jsx_runtime_1.jsx)(Flex_1.Flex, { flex: flex, children: children });
+export const Touchable = ({ children, flex, haptic, noFeedback, onPress, underlayColor, ...props }) => {
+    const color = useColor();
+    const inner = React.Children.count(children) === 1 ? children : _jsx(Flex, { flex: flex, children: children });
     const onPressWrapped = (evt) => {
         if (onPress === undefined) {
             return;
         }
         if (haptic !== undefined) {
-            react_native_haptic_feedback_1.default.trigger(haptic === true ? "impactLight" : haptic);
+            Haptic.trigger(haptic === true ? "impactLight" : haptic);
         }
         onPress(evt);
     };
-    return noFeedback ? ((0, jsx_runtime_1.jsx)(react_native_1.TouchableWithoutFeedback, { ...props, onPress: onPressWrapped, children: inner })) : ((0, jsx_runtime_1.jsx)(react_native_1.TouchableHighlight, { underlayColor: underlayColor ?? "transparent", activeOpacity: constants_1.DEFAULT_ACTIVE_OPACITY, ...props, onPress: onPressWrapped, children: inner }));
+    return noFeedback ? (_jsx(TouchableWithoutFeedback, { ...props, onPress: onPressWrapped, children: inner })) : (_jsx(TouchableHighlight, { underlayColor: underlayColor ?? "transparent", activeOpacity: DEFAULT_ACTIVE_OPACITY, ...props, onPress: onPressWrapped, children: inner }));
 };
-exports.Touchable = Touchable;

package/dist/elements/Touchable/Touchable.stories.js

@@ -1,15 +1,11 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Examples = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const Touchable_1 = require("./Touchable");
-const helpers_1 = require("../../storybook/helpers");
-const svgs_1 = require("../../svgs");
-const Flex_1 = require("../Flex");
-const Text_1 = require("../Text");
-exports.default = {
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Touchable } from "./Touchable";
+import { List } from "../../storybook/helpers";
+import { TrashIcon } from "../../svgs";
+import { Flex } from "../Flex";
+import { Text } from "../Text";
+export default {
     title: "Touchable",
-    component: Touchable_1.Touchable,
+    component: Touchable,
 };
-const Examples = () => ((0, jsx_runtime_1.jsxs)(helpers_1.List, { children: [(0, jsx_runtime_1.jsx)(Touchable_1.Touchable, { children: (0, jsx_runtime_1.jsx)(Text_1.Text, { children: "This is a text wrapped in a `Touchable`." }) }), (0, jsx_runtime_1.jsx)(Touchable_1.Touchable, { children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { width: 200, alignItems: "center", borderColor: "red", borderWidth: 1, children: [(0, jsx_runtime_1.jsx)(svgs_1.TrashIcon, {}), (0, jsx_runtime_1.jsx)(Text_1.Text, { children: "This is a cell with an icon and a text, wrapped in a `Touchable`." })] }) })] }));
-exports.Examples = Examples;
+export const Examples = () => (_jsxs(List, { children: [_jsx(Touchable, { children: _jsx(Text, { children: "This is a text wrapped in a `Touchable`." }) }), _jsx(Touchable, { children: _jsxs(Flex, { width: 200, alignItems: "center", borderColor: "red", borderWidth: 1, children: [_jsx(TrashIcon, {}), _jsx(Text, { children: "This is a cell with an icon and a text, wrapped in a `Touchable`." })] }) })] }));

package/dist/elements/Touchable/TouchableHighlightColor.js

@@ -1,14 +1,11 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TouchableHighlightColor = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const Touchable_1 = require("./Touchable");
-const TouchableHighlightColor = (props) => {
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { Touchable } from "./Touchable";
+export const TouchableHighlightColor = (props) => {
     const { activeOpacity = 1, activeColor = "blue100", normalColor = "black100", onPressIn, onPressOut, render, ...restProps } = props;
-    const [highlighted, setHighlighted] = (0, react_1.useState)(false);
+    const [highlighted, setHighlighted] = useState(false);
     const color = highlighted ? activeColor : normalColor;
-    return ((0, jsx_runtime_1.jsx)(Touchable_1.Touchable, { noFeedback: true, activeOpacity: activeOpacity, onPressIn: (event) => {
+    return (_jsx(Touchable, { noFeedback: true, activeOpacity: activeOpacity, onPressIn: (event) => {
             setHighlighted(true);
             onPressIn?.(event);
         }, onPressOut: (event) => {
@@ -16,4 +13,3 @@ const TouchableHighlightColor = (props) => {
             onPressOut?.(event);
         }, ...restProps, children: render({ color, highlighted }) }));
 };
-exports.TouchableHighlightColor = TouchableHighlightColor;

package/dist/elements/Touchable/TouchableWithScale.js

@@ -1,24 +1,20 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TouchableWithScale = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_native_1 = require("react-native");
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Animated, TouchableWithoutFeedback, } from "react-native";
 const ANIMATION_DEFAULTS = {
     stiffness: 600,
     damping: 120,
     useNativeDriver: true,
 };
 const NOOP = () => { };
-const TouchableWithScale = ({ defaultScale = 1, activeScale = 0.95, onPressIn = NOOP, onPressOut = NOOP, style, children, ...restProps }) => {
-    const scaleAnimation = new react_native_1.Animated.Value(defaultScale);
+export const TouchableWithScale = ({ defaultScale = 1, activeScale = 0.95, onPressIn = NOOP, onPressOut = NOOP, style, children, ...restProps }) => {
+    const scaleAnimation = new Animated.Value(defaultScale);
     const handlePressIn = (event) => {
-        react_native_1.Animated.spring(scaleAnimation, { ...ANIMATION_DEFAULTS, toValue: activeScale }).start();
+        Animated.spring(scaleAnimation, { ...ANIMATION_DEFAULTS, toValue: activeScale }).start();
         onPressIn(event);
     };
     const handlePressOut = (event) => {
-        react_native_1.Animated.spring(scaleAnimation, { ...ANIMATION_DEFAULTS, toValue: defaultScale }).start();
+        Animated.spring(scaleAnimation, { ...ANIMATION_DEFAULTS, toValue: defaultScale }).start();
         onPressOut(event);
     };
-    return ((0, jsx_runtime_1.jsx)(react_native_1.TouchableWithoutFeedback, { onPressIn: handlePressIn, onPressOut: handlePressOut, ...restProps, children: (0, jsx_runtime_1.jsx)(react_native_1.Animated.View, { style: [style, { transform: [{ scale: scaleAnimation }] }], children: children }) }));
+    return (_jsx(TouchableWithoutFeedback, { onPressIn: handlePressIn, onPressOut: handlePressOut, ...restProps, children: _jsx(Animated.View, { style: [style, { transform: [{ scale: scaleAnimation }] }], children: children }) }));
 };
-exports.TouchableWithScale = TouchableWithScale;

package/dist/elements/Touchable/index.js

@@ -1,19 +1,3 @@
-"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("./Touchable"), exports);
-__exportStar(require("./TouchableWithScale"), exports);
-__exportStar(require("./TouchableHighlightColor"), exports);
+export * from "./Touchable";
+export * from "./TouchableWithScale";
+export * from "./TouchableHighlightColor";

package/dist/elements/VisualClue/VisualClue.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 helpers_1 = require("../../storybook/helpers");
-const Text_1 = require("../Text");
-(0, react_native_1.storiesOf)("Theme/Text", module).add("Visual Clue", () => ((0, jsx_runtime_1.jsxs)(helpers_1.List, { children: [(0, jsx_runtime_1.jsx)(_1.VisualClueDot, {}), (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { children: "A Feature" }), (0, jsx_runtime_1.jsx)(_1.VisualClueText, { style: { top: 14, right: -24 } })] })] })));
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { storiesOf } from "@storybook/react-native";
+import { VisualClueDot, VisualClueText } from "./";
+import { List } from "../../storybook/helpers";
+import { Text } from "../Text";
+storiesOf("Theme/Text", module).add("Visual Clue", () => (_jsxs(List, { children: [_jsx(VisualClueDot, {}), _jsxs(_Fragment, { children: [_jsx(Text, { children: "A Feature" }), _jsx(VisualClueText, { style: { top: 14, right: -24 } })] })] })));

package/dist/elements/VisualClue/VisualClueDot.js

@@ -1,13 +1,10 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.VisualClueDot = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const useColor_1 = require("../../utils/hooks/useColor");
-const Flex_1 = require("../Flex");
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useColor } from "../../utils/hooks/useColor";
+import { Flex } from "../Flex";
 const DOT_DIAMETER = 6;
-const VisualClueDot = ({ diameter = DOT_DIAMETER, style }) => {
-    const color = (0, useColor_1.useColor)();
-    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { style: {
+export const VisualClueDot = ({ diameter = DOT_DIAMETER, style }) => {
+    const color = useColor();
+    return (_jsx(Flex, { style: {
             height: diameter,
             minWidth: diameter,
             borderRadius: diameter / 2,
@@ -15,4 +12,3 @@ const VisualClueDot = ({ diameter = DOT_DIAMETER, style }) => {
             ...style,
         } }));
 };
-exports.VisualClueDot = VisualClueDot;

package/dist/elements/VisualClue/VisualClueText.js

@@ -1,20 +1,16 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.VisualClueText = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const useColor_1 = require("../../utils/hooks/useColor");
-const Flex_1 = require("../Flex");
-const PopIn_1 = require("../PopIn");
-const Text_1 = require("../Text");
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useColor } from "../../utils/hooks/useColor";
+import { Flex } from "../Flex";
+import { PopIn } from "../PopIn";
+import { Text } from "../Text";
 const WRAPPER_WIDTH = 56;
 const WRAPPER_HEIGHT = 46;
-const VisualClueText = ({ style = {} }) => {
-    const colors = (0, useColor_1.useColor)();
-    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { width: 0, overflow: "visible", children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { width: 55, justifyContent: "center", children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { style: {
+export const VisualClueText = ({ style = {} }) => {
+    const colors = useColor();
+    return (_jsx(Flex, { width: 0, overflow: "visible", children: _jsx(Flex, { width: 55, justifyContent: "center", children: _jsx(Flex, { style: {
                     width: WRAPPER_WIDTH,
                     height: WRAPPER_HEIGHT,
                     ...style,
                     position: "absolute",
-                }, children: (0, jsx_runtime_1.jsx)(PopIn_1.PopIn, { children: (0, jsx_runtime_1.jsx)(Text_1.Text, { style: { fontSize: 12, color: colors("blue100") }, children: "New" }) }) }) }) }));
+                }, children: _jsx(PopIn, { children: _jsx(Text, { style: { fontSize: 12, color: colors("blue100") }, children: "New" }) }) }) }) }));
 };
-exports.VisualClueText = VisualClueText;

package/dist/elements/VisualClue/index.js

@@ -1,18 +1,2 @@
-"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("./VisualClueText"), exports);
-__exportStar(require("./VisualClueDot"), exports);
+export * from "./VisualClueText";
+export * from "./VisualClueDot";