@artsy/palette-mobile 13.2.33 → 13.2.34

package/dist/elements/Tabs/TabsWithHeader.d.ts

@@ -1,12 +0,0 @@
-/// <reference types="react" />
-import { CollapsibleProps } from "react-native-collapsible-tab-view";
-import { TabsContainerProps } from "./TabsContainer";
-import { HeaderProps } from "../Screen/Header";
-export interface TabsWithHeaderProps extends TabsContainerProps {
-    title: string | JSX.Element;
-    BelowTitleHeaderComponent?: () => JSX.Element;
-    headerProps?: HeaderProps;
-    showLargeHeaderText?: boolean;
-    children: CollapsibleProps["children"];
-}
-export declare const TabsWithHeader: React.FC<TabsWithHeaderProps>;

package/dist/elements/Tabs/TabsWithHeader.js

@@ -1,15 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TabsWithHeader = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const TabsContainer_1 = require("./TabsContainer");
-const Flex_1 = require("../Flex");
-const Screen_1 = require("../Screen");
-const Text_1 = require("../Text");
-const TabsWithHeader = ({ children, BelowTitleHeaderComponent, headerProps = {}, showLargeHeaderText = true, title, ...rest }) => {
-    const showTitle = showLargeHeaderText && !!title;
-    return ((0, jsx_runtime_1.jsxs)(Screen_1.Screen, { children: [(0, jsx_runtime_1.jsx)(Screen_1.Screen.AnimatedHeader, { title: title, ...headerProps }), (0, jsx_runtime_1.jsx)(Screen_1.Screen.Body, { fullwidth: true, children: (0, jsx_runtime_1.jsx)(TabsContainer_1.TabsContainer, { ...rest, renderHeader: () => {
-                        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!!showTitle && ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { my: 1, px: 2, justifyContent: "center", pointerEvents: "none", children: (0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "lg-display", numberOfLines: 2, children: title }) })), !!BelowTitleHeaderComponent && (0, jsx_runtime_1.jsx)(BelowTitleHeaderComponent, {})] }));
-                    }, children: children }) })] }));
-};
-exports.TabsWithHeader = TabsWithHeader;

package/dist/elements/Tabs/hooks/useListenForTabContentScroll.d.ts

@@ -1 +0,0 @@
-export declare const useListenForTabContentScroll: () => void;

package/dist/elements/Tabs/hooks/useListenForTabContentScroll.js

@@ -1,15 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useListenForTabContentScroll = void 0;
-const react_1 = require("react");
-const react_native_collapsible_tab_view_1 = require("react-native-collapsible-tab-view");
-const ScreenScrollContext_1 = require("../../Screen/ScreenScrollContext");
-const useAnimatedHeaderScrolling_1 = require("../../Screen/hooks/useAnimatedHeaderScrolling");
-const useListenForTabContentScroll = () => {
-    const { updateCurrentScrollY, scrollYOffset } = (0, ScreenScrollContext_1.useScreenScrollContext)();
-    const scrollY = (0, useAnimatedHeaderScrolling_1.useAnimatedHeaderScrolling)((0, react_native_collapsible_tab_view_1.useCurrentTabScrollY)(), scrollYOffset);
-    (0, react_1.useEffect)(() => {
-        updateCurrentScrollY(scrollY);
-    }, [scrollY, updateCurrentScrollY]);
-};
-exports.useListenForTabContentScroll = useListenForTabContentScroll;

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

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

package/dist/elements/Tabs/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("./Tabs"), exports);

package/dist/elements/Text/LinkText.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-import { TextProps } from "./Text";
-export declare const LinkText: ({ style, ...props }: TextProps) => JSX.Element;

package/dist/elements/Text/LinkText.js

@@ -1,7 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.LinkText = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const Text_1 = require("./Text");
-const LinkText = ({ style, ...props }) => ((0, jsx_runtime_1.jsx)(Text_1.Text, { ...props, style: [style, { textDecorationLine: "underline" }] }));
-exports.LinkText = LinkText;

package/dist/elements/Text/Text.d.ts

@@ -1,22 +0,0 @@
-/// <reference types="react" />
-import { TextVariant } from "@artsy/palette-tokens/dist/typography/v3";
-import { Text as RNText, TextProps as RNTextProps } from "react-native";
-import { ColorProps, LineHeightProps, SpaceProps, TypographyProps } from "styled-system";
-export interface TextProps extends RNTextProps, InnerStyledTextProps {
-    children?: React.ReactNode;
-    variant?: TextVariant;
-    italic?: boolean;
-    caps?: boolean;
-    weight?: "regular" | "medium";
-    maxChars?: number;
-    underline?: boolean;
-    maxWidth?: boolean;
-    selectable?: boolean;
-}
-export declare const Text: import("react").ForwardRefExoticComponent<TextProps & import("react").RefAttributes<RNText>>;
-type LineHeight = `${number}px`;
-type LineHeightTheme = {
-    lineHeights: Record<LineHeight, any>;
-};
-type InnerStyledTextProps = ColorProps & SpaceProps & TypographyProps & LineHeightProps<LineHeightTheme>;
-export {};

package/dist/elements/Text/Text.js

@@ -1,37 +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.Text = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const react_native_1 = require("react-native");
-const native_1 = __importDefault(require("styled-components/native"));
-const styled_system_1 = require("styled-system");
-const helpers_1 = require("./helpers");
-const useTheme_1 = require("../../utils/hooks/useTheme");
-exports.Text = (0, react_1.forwardRef)(({ variant = "sm", italic = false, color = "onBackgroundHigh", caps = false, weight = "regular", underline = false, maxWidth = false, selectable = true, style, children, ...restProps }, ref) => {
-    const { theme } = (0, useTheme_1.useTheme)();
-    const fontFamily = (0, helpers_1.useFontFamilyFor)({ italic, weight });
-    const nativeTextStyle = [caps ? { textTransform: "uppercase" } : {}];
-    return ((0, jsx_runtime_1.jsx)(InnerStyledText, { ref: ref, selectable: selectable, style: [
-            ...nativeTextStyle,
-            { textAlignVertical: "center" },
-            { textDecorationLine: !!underline ? "underline" : "none" },
-            !!maxWidth ? { width: "100%", maxWidth: 600, alignSelf: "center" } : {},
-            style, // keep last so we can override
-        ], fontFamily: fontFamily, ...fixTextTreatmentForStyledComponent(theme.textTreatments[variant]), children: children, color: color, ...restProps }));
-});
-const fixTextTreatmentForStyledComponent = (treatment) => {
-    const treatmentWithUnits = { ...treatment };
-    if (treatment.lineHeight !== undefined) {
-        treatmentWithUnits.lineHeight = `${treatment.lineHeight}px`;
-    }
-    return treatmentWithUnits;
-};
-const InnerStyledText = (0, native_1.default)(react_native_1.Text) `
-  ${styled_system_1.color}
-  ${styled_system_1.space}
-  ${styled_system_1.typography}
-`;

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

@@ -1,11 +0,0 @@
-import { ComponentMeta, ComponentStory } from "@storybook/react-native";
-import { Text } from "../Text";
-declare const TextMeta: ComponentMeta<typeof Text>;
-export default TextMeta;
-type TextStory = ComponentStory<typeof Text>;
-export declare const Variants: TextStory;
-export declare const VariantsInBoxes: TextStory;
-export declare const BasicProps: TextStory;
-export declare const Misc: TextStory;
-export declare const FontCenteringRaw: TextStory;
-export declare const FontCenteringPalette: TextStory;

package/dist/elements/Text/Text.stories.js

@@ -1,37 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FontCenteringPalette = exports.FontCenteringRaw = exports.Misc = exports.BasicProps = exports.VariantsInBoxes = exports.Variants = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_native_1 = require("react-native");
-const helpers_1 = require("../../storybook/helpers");
-const Box_1 = require("../Box");
-const Flex_1 = require("../Flex");
-const Text_1 = require("../Text");
-const TextMeta = {
-    title: "Theme/Text",
-    component: Text_1.Text,
-};
-exports.default = TextMeta;
-const variants = ["xs", "sm", "md", "lg", "xl", "xxl"];
-const Variants = () => ((0, jsx_runtime_1.jsx)(helpers_1.DataList, { data: variants, renderItem: ({ item: variant }) => (0, jsx_runtime_1.jsxs)(Text_1.Text, { variant: variant, children: [variant, " ~~ This is a text."] }) }));
-exports.Variants = Variants;
-const VariantsInBoxes = () => ((0, jsx_runtime_1.jsx)(helpers_1.DataList, { data: variants, renderItem: ({ item: variant }) => ((0, jsx_runtime_1.jsx)(Box_1.Box, { borderWidth: 1, borderColor: "black", width: 100, children: (0, jsx_runtime_1.jsxs)(Text_1.Text, { variant: variant, children: [variant, " ~~ This is a text."] }) })) }));
-exports.VariantsInBoxes = VariantsInBoxes;
-const BasicProps = () => ((0, jsx_runtime_1.jsxs)(helpers_1.List, { children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { children: "regular ~~ This is a text." }), (0, jsx_runtime_1.jsx)(Text_1.LinkText, { children: "LinkText." }), (0, jsx_runtime_1.jsx)(Text_1.Text, { caps: true, children: "caps ~~ This is a text." }), (0, jsx_runtime_1.jsx)(Text_1.Text, { italic: true, children: "italics ~~ This is a text." }), (0, jsx_runtime_1.jsx)(Text_1.Text, { caps: true, italic: true, children: "caps italics ~~ This is a text." }), (0, jsx_runtime_1.jsx)(Text_1.Text, { weight: "medium", children: "weight: medium ~~ This is a text." }), (0, jsx_runtime_1.jsx)(Text_1.Text, { maxWidth: true, children: "maxwidth ~~ This is a text." })] }));
-exports.BasicProps = BasicProps;
-const Misc = () => ((0, jsx_runtime_1.jsxs)(helpers_1.List, { children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: { borderWidth: 1, borderColor: "black" }, children: (0, jsx_runtime_1.jsx)(Text_1.Text, { pl: 2, mb: 4, mr: 80, color: "red", backgroundColor: "orange", children: "Testing the other props" }) }), (0, jsx_runtime_1.jsx)(react_native_1.View, {}), (0, jsx_runtime_1.jsx)(Text_1.Text, { lineHeight: "20px", fontSize: 30, children: "wow" })] }));
-exports.Misc = Misc;
-// this is useful for making sure our custom fonts are rendering at the same height for ios and android
-const FontCenteringRaw = () => {
-    const style = { borderWidth: 1, borderColor: "black", fontSize: 16, lineHeight: 16 };
-    const systemFontStyle = react_native_1.Platform.OS === "android" ? { textAlignVertical: "bottom" } : {}; // this we add in our Text in palette-eigen
-    const unicaFontStyle = react_native_1.Platform.OS === "android" ? { textAlignVertical: "center" } : {}; // this we add in our Text in palette-eigen
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", flex: 1, children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flex: 1, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { children: "System font" }), (0, jsx_runtime_1.jsxs)(helpers_1.List, { children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [style, systemFontStyle], children: "regular TEXT." }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [style, systemFontStyle], children: "ALL CAPS text." })] })] }), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { width: "1px", height: "100%", borderWidth: 1, borderColor: "black" }), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flex: 1, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { children: "Unica custom font" }), (0, jsx_runtime_1.jsxs)(helpers_1.List, { children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [style, { fontFamily: "Unica77LL-Regular" }, unicaFontStyle], children: "regular TEXT." }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [style, { fontFamily: "Unica77LL-Regular" }, unicaFontStyle], children: "ALL CAPS text." })] })] })] }));
-};
-exports.FontCenteringRaw = FontCenteringRaw;
-// this is useful for making sure our custom fonts are rendering at the same height for ios and android
-const FontCenteringPalette = () => {
-    const style = { borderWidth: 1, borderColor: "black", fontSize: 16, lineHeight: 16 };
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flex: 1, children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { children: "System font" }), (0, jsx_runtime_1.jsxs)(helpers_1.List, { children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { style: style, children: "regular TEXT." }), (0, jsx_runtime_1.jsx)(Text_1.Text, { style: style, children: "ALL CAPS text." })] })] }));
-};
-exports.FontCenteringPalette = FontCenteringPalette;

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

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

package/dist/elements/Text/Text.tests.js

@@ -1,12 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const text_1 = require("../../utils/text");
-describe("Text", () => {
-    it("uses endash in ranges", () => {
-        const usingHelper = (0, text_1.range)("10", "20");
-        const usingEndash = `10 ${text_1.endash} 20`;
-        expect(usingHelper).toEqual(usingEndash);
-        expect(usingHelper).toEqual("10 – 20"); // endash
-        expect(usingHelper).not.toEqual("10 - 20"); // minus
-    });
-});

package/dist/elements/Text/helpers.d.ts

@@ -1,14 +0,0 @@
-import { TextStyle } from "react-native";
-import { NoUndefined } from "../../utils/types";
-import { TextProps } from "../Text";
-export declare const useFontFamilyFor: ({ italic, weight, }: {
-    italic: TextProps["italic"];
-    weight: TextProps["weight"];
-}) => string;
-/**
- * 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.
- */
-export declare const useTextStyleForPalette: (variant: NoUndefined<TextProps["variant"]>) => TextStyle;

package/dist/elements/Text/helpers.js

@@ -1,34 +0,0 @@
-"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)();
-    const { fonts } = theme;
-    if (italic && weight === "medium") {
-        return fonts.sans.mediumItalic;
-    }
-    if (italic) {
-        return fonts.sans.italic;
-    }
-    if (weight === "medium") {
-        return fonts.sans.medium;
-    }
-    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)();
-    const fontSizeAndLineHeight = theme.textTreatments[variant].fontSize;
-    return {
-        fontSize: fontSizeAndLineHeight,
-        lineHeight: fontSizeAndLineHeight,
-    };
-};
-exports.useTextStyleForPalette = useTextStyleForPalette;

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

@@ -1,3 +0,0 @@
-export * from "./helpers";
-export * from "./Text";
-export * from "./LinkText";

package/dist/elements/Text/index.js

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

package/dist/elements/ToolTip/ToolTip.d.ts

@@ -1,45 +0,0 @@
-/// <reference types="react" />
-interface ToolTipContextValues {
-    dismissToolTip: () => void;
-    setToolTip: (toolTip: string) => void;
-}
-interface ToolTipProps {
-    children?: React.ReactNode;
-    enabled?: Boolean;
-    /** The direction the tooltip should flow. If not provided, the tooltip will flow to the left if it is near the right edge of the screen, and vice-versa */
-    flowDirection?: "LEFT" | "RIGHT";
-    initialToolTipText?: string;
-    maxWidth?: number;
-    onPress?: () => void;
-    position?: "TOP" | "BOTTOM";
-    tapToDismiss?: boolean;
-    testID?: string;
-    /** horizontal margin of tooltip */
-    xOffset?: number;
-    /** vertical margin of tooltip */
-    yOffset?: number;
-}
-export declare const ToolTipContext: import("react").Context<ToolTipContextValues>;
-/**
- * A ToolTip Component
- * @example
- * <ToolTip initialToolTipText="A tool tip text">
- *   <View />
- * </ToolTip>
- *
- * @example
- * <ToolTip initialToolTipText="A tool tip text">
- *   <ToolTipContext.Consumer>
- *     {({ setToolTip, dismissToolTip }) => (
- *       <Component
- *         changeToolTipText={setToolTip}
- *         hideToolTip={dismissToolTip}
- *       />
- *     )}
- *   </ToolTipContext.Consumer>
- * </ToolTip>
- *
- */
-export declare const ToolTip: React.FC<ToolTipProps>;
-export declare const useToolTipContext: () => ToolTipContextValues;
-export {};

package/dist/elements/ToolTip/ToolTip.js

@@ -1,114 +0,0 @@
-"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,
-});
-/**
- * A ToolTip Component
- * @example
- * <ToolTip initialToolTipText="A tool tip text">
- *   <View />
- * </ToolTip>
- *
- * @example
- * <ToolTip initialToolTipText="A tool tip text">
- *   <ToolTipContext.Consumer>
- *     {({ setToolTip, dismissToolTip }) => (
- *       <Component
- *         changeToolTipText={setToolTip}
- *         hideToolTip={dismissToolTip}
- *       />
- *     )}
- *   </ToolTipContext.Consumer>
- * </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
-    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 dismissToolTip = () => setToolTip(undefined);
-    const [pageX, setPageX] = (0, react_1.useState)(0);
-    const childrenRef = (0, react_1.useRef)(null);
-    const totalTextWidth = singleTextDimension.width * (toolTipText?.length ?? 0);
-    const finalToolTipWidth = Math.min(totalTextWidth, MAX_TOOLTIP_WIDTH);
-    const numOfLines = getNumberOfLines(finalToolTipWidth, totalTextWidth);
-    const finalToolTipHeight = numOfLines * singleTextDimension.height;
-    const triangleXDisplacement = childrenDimensions.x + childrenDimensions.width / 2;
-    // Calculate the direction of flow of the tooltip. So a tooltip near the right edge of the screen
-    // should flow to the left so it remains in the viewport, and vice-versa. Without this, tooltip
-    // around the edges can flow off screen
-    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: {
-            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: {
-                            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: {
-                            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) => {
-                    setChildrenDimensions({
-                        height: event.nativeEvent.layout.height,
-                        width: event.nativeEvent.layout.width,
-                        x: event.nativeEvent.layout.x,
-                    });
-                    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: {
-                            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: {
-                            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 }) => {
-                    setSingleTextDimension({
-                        height: nativeEvent.layout.height,
-                        width: nativeEvent.layout.width,
-                    });
-                }, children: (0, jsx_runtime_1.jsx)(ToolTipFlyout_1.ToolTipTextContainer, { text: "x" }) }))] }));
-};
-exports.ToolTip = ToolTip;
-const useToolTipContext = () => {
-    const context = (0, react_1.useContext)(exports.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.
- */
-const getNumberOfLines = (maxWidth, totalWidth, numLines = 0) => {
-    if (maxWidth >= totalWidth) {
-        return numLines + 1;
-    }
-    const remainder = totalWidth - maxWidth;
-    if (remainder > -1) {
-        numLines = numLines += 1;
-    }
-    return getNumberOfLines(maxWidth, remainder, numLines);
-};

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

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

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

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

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

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

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

@@ -1,17 +0,0 @@
-"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");
-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" }) }) }));
-        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" }) }) }));
-        expect(queryByTestId("flyout")).toBeNull();
-    });
-});

package/dist/elements/ToolTip/ToolTipFlyout.d.ts

@@ -1,21 +0,0 @@
-/// <reference types="react" />
-import { ViewStyle } from "react-native";
-interface Props {
-    containerStyle?: ViewStyle;
-    tapToDismiss?: boolean;
-    height: number;
-    width: number;
-    onToolTipPress?: () => void;
-    onClose: () => void;
-    position?: "TOP" | "BOTTOM";
-    testID?: string;
-    text?: string;
-}
-export declare const ToolTipFlyout: React.FC<Props>;
-/** 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.
- */
-export declare const ToolTipTextContainer: React.FC<{
-    text?: string;
-}>;
-export {};

package/dist/elements/ToolTip/ToolTipFlyout.js

@@ -1,88 +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 __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, }) => {
-    const initialBoxDimensions = { height: 0, width: 0 };
-    const boxDimensions = (0, react_native_reanimated_1.useSharedValue)(initialBoxDimensions);
-    const animationStyle = (0, react_native_reanimated_1.useAnimatedStyle)(() => {
-        return {
-            height: (0, react_native_reanimated_1.withTiming)(boxDimensions.value.height, {
-                duration: 500,
-            }),
-            width: (0, react_native_reanimated_1.withTiming)(boxDimensions.value.width, {
-                duration: 500,
-            }),
-        };
-    });
-    (0, react_1.useEffect)(() => {
-        if (text) {
-            boxDimensions.value = {
-                height,
-                width,
-            };
-        }
-        else {
-            boxDimensions.value = initialBoxDimensions;
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [text, height, width]);
-    const color = (0, useColor_1.useColor)();
-    const handleClose = () => {
-        onClose();
-    };
-    const onPress = () => {
-        onToolTipPress?.();
-        if (tapToDismiss) {
-            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: [
-                {
-                    backgroundColor: color("black100"),
-                    position: "absolute",
-                    alignSelf: "center",
-                    zIndex: 1000,
-                },
-                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 }) }) }) }));
-};
-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 }));
-};
-exports.ToolTipTextContainer = ToolTipTextContainer;

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

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

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