@artsy/palette-mobile 13.2.33 → 13.2.34

package/dist/elements/Button/Button.js

@@ -1,342 +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._test_DisplayState = exports.Button = 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_haptic_feedback_1 = __importDefault(require("react-native-haptic-feedback"));
-const react_spring_1 = require("react-spring");
-// @ts-ignore
-const renderprops_native_1 = require("react-spring/renderprops-native");
-const native_1 = __importDefault(require("styled-components/native"));
-const hooks_1 = require("../../utils/hooks");
-const Box_1 = require("../Box");
-const Flex_1 = require("../Flex/Flex");
-const MeasuredView_1 = require("../MeasuredView");
-const Spacer_1 = require("../Spacer");
-const Spinner_1 = require("../Spinner");
-const Text_1 = require("../Text/Text");
-const helpers_1 = require("../Text/helpers");
-var DisplayState;
-(function (DisplayState) {
-    DisplayState["Enabled"] = "enabled";
-    DisplayState["Disabled"] = "disabled";
-    DisplayState["Loading"] = "loading";
-    DisplayState["Pressed"] = "pressed";
-})(DisplayState || (DisplayState = {}));
-exports._test_DisplayState = DisplayState;
-const Button = ({ children, disabled, haptic, icon, iconPosition = "left", loading, longestText, onPress, size = "large", variant = "fillDark", testOnly_state, testID, textVariant, hitSlop, ...rest }) => {
-    const textVariantBySize = size === "small" ? "xs" : "sm";
-    const textStyle = (0, helpers_1.useTextStyleForPalette)(textVariant ?? textVariantBySize);
-    const [innerDisplayState, setInnerDisplayState] = (0, react_1.useState)(DisplayState.Enabled);
-    const [longestTextMeasurements, setLongestTextMeasurements] = (0, react_1.useState)({
-        width: 0,
-        height: 0,
-    });
-    const displayState = testOnly_state ?? // if we use the test prop, use that
-        (loading // if we have loading or disabled in props, they are used
-            ? DisplayState.Loading
-            : disabled
-                ? DisplayState.Disabled
-                : innerDisplayState); // otherwise use the inner state for pressed or enabled
-    const getSize = () => {
-        switch (size) {
-            case "small":
-                return { height: 30, mx: "15px" };
-            case "large":
-                return { height: 50, mx: "30px" };
-        }
-    };
-    const handlePress = (event) => {
-        if (onPress === undefined || onPress === null) {
-            return;
-        }
-        if (displayState === DisplayState.Loading || displayState === DisplayState.Disabled) {
-            return;
-        }
-        // Did someone tap really fast? Flick the highlighted state
-        if (displayState === DisplayState.Enabled) {
-            setInnerDisplayState(DisplayState.Pressed);
-            setTimeout(() => {
-                setInnerDisplayState(DisplayState.Enabled);
-            }, 0.3);
-        }
-        else {
-            // Was already selected
-            setInnerDisplayState(DisplayState.Enabled);
-        }
-        if (haptic !== undefined) {
-            react_native_haptic_feedback_1.default.trigger(haptic === true ? "impactLight" : haptic);
-        }
-        onPress(event);
-    };
-    const containerSize = getSize();
-    const to = useStyleForVariantAndState(variant, testOnly_state ?? displayState);
-    return ((0, jsx_runtime_1.jsx)(renderprops_native_1.Spring, { native: true, to: to, config: react_spring_1.config.stiff, children: (springProps) => ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { hitSlop: hitSlop, testOnly_pressed: testOnly_state === DisplayState.Pressed, disabled: testOnly_state === DisplayState.Disabled || disabled, onPressIn: () => {
-                if (displayState === DisplayState.Loading) {
-                    return;
-                }
-                setInnerDisplayState(DisplayState.Pressed);
-            }, onPressOut: () => {
-                if (displayState === DisplayState.Loading) {
-                    return;
-                }
-                setInnerDisplayState(DisplayState.Enabled);
-            }, onPress: handlePress, testID: testID, children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "row", children: (0, jsx_runtime_1.jsx)(AnimatedContainer, { ...rest, style: {
-                        backgroundColor: springProps.backgroundColor,
-                        borderColor: springProps.borderColor,
-                        height: containerSize.height,
-                    }, children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { mx: containerSize.mx, children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { height: "100%", flexDirection: "row", alignItems: "center", justifyContent: "center", children: [iconPosition === "left-start" && !!icon ? ((0, jsx_runtime_1.jsxs)(Box_1.Box, { position: "absolute", left: 0, children: [icon, (0, jsx_runtime_1.jsx)(Spacer_1.Spacer, { x: 0.5 })] })) : null, iconPosition === "left" && !!icon ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [icon, (0, jsx_runtime_1.jsx)(Spacer_1.Spacer, { x: 0.5 })] })) : null, !__TEST__ && longestText && ((0, jsx_runtime_1.jsx)(MeasuredView_1.MeasuredView, { setMeasuredState: setLongestTextMeasurements, children: (0, jsx_runtime_1.jsx)(Text_1.Text, { color: "red", style: textStyle, children: longestText ? longestText : children }) })), (0, jsx_runtime_1.jsx)(AnimatedText, { style: [
-                                            {
-                                                width: longestText ? Math.ceil(longestTextMeasurements.width) : "auto",
-                                                color: springProps.textColor,
-                                                textDecorationLine: springProps.textDecorationLine,
-                                            },
-                                            textStyle,
-                                        ], textAlign: "center", children: children }), iconPosition === "right" && !!icon && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Spacer_1.Spacer, { x: 0.5 }), icon] }))] }), displayState === DisplayState.Loading && ((0, jsx_runtime_1.jsx)(SpinnerContainer, { children: (0, jsx_runtime_1.jsx)(Spinner_1.Spinner, { size: size, color: to.loaderColor }) }))] }) }) }) })) }));
-};
-exports.Button = Button;
-const useStyleForVariantAndState = (variant, state) => {
-    const color = (0, hooks_1.useColor)();
-    const retval = {
-        textDecorationLine: "none",
-    };
-    switch (variant) {
-        case "fillDark":
-            retval.textColor = color("white100");
-            switch (state) {
-                case DisplayState.Enabled:
-                    retval.backgroundColor = color("black100");
-                    retval.borderColor = color("black100");
-                    break;
-                case DisplayState.Disabled:
-                    retval.backgroundColor = color("black30");
-                    retval.borderColor = color("black30");
-                    break;
-                case DisplayState.Loading:
-                    retval.backgroundColor = color("black100");
-                    retval.borderColor = color("black100");
-                    retval.textColor = "rgba(0, 0, 0, 0)";
-                    retval.loaderColor = "white100";
-                    break;
-                case DisplayState.Pressed:
-                    retval.backgroundColor = color("blue100");
-                    retval.borderColor = color("blue100");
-                    retval.textDecorationLine = "underline";
-                    break;
-                default:
-                    null;
-            }
-            break;
-        case "fillLight":
-            switch (state) {
-                case DisplayState.Enabled:
-                    retval.backgroundColor = color("white100");
-                    retval.borderColor = color("white100");
-                    retval.textColor = color("black100");
-                    break;
-                case DisplayState.Disabled:
-                    retval.backgroundColor = color("black30");
-                    retval.borderColor = color("black30");
-                    retval.textColor = color("white100");
-                    break;
-                case DisplayState.Loading:
-                    retval.backgroundColor = color("white100");
-                    retval.borderColor = color("white100");
-                    retval.textColor = "rgba(0, 0, 0, 0)";
-                    retval.loaderColor = "black100";
-                    break;
-                case DisplayState.Pressed:
-                    retval.backgroundColor = color("blue100");
-                    retval.borderColor = color("blue100");
-                    retval.textColor = color("white100");
-                    retval.textDecorationLine = "underline";
-                    break;
-                default:
-                    null;
-            }
-            break;
-        case "fillGray":
-            switch (state) {
-                case DisplayState.Enabled:
-                    retval.backgroundColor = color("black10");
-                    retval.borderColor = color("black10");
-                    retval.textColor = color("black100");
-                    break;
-                case DisplayState.Disabled:
-                    retval.backgroundColor = color("black30");
-                    retval.borderColor = color("black30");
-                    retval.textColor = color("white100");
-                    break;
-                case DisplayState.Loading:
-                    retval.backgroundColor = color("black10");
-                    retval.borderColor = color("black10");
-                    retval.textColor = "rgba(0, 0, 0, 0)";
-                    retval.loaderColor = "black100";
-                    break;
-                case DisplayState.Pressed:
-                    retval.backgroundColor = color("blue100");
-                    retval.borderColor = color("blue100");
-                    retval.textColor = color("white100");
-                    retval.textDecorationLine = "underline";
-                    break;
-                default:
-                    null;
-            }
-            break;
-        case "fillSuccess":
-            retval.textColor = color("white100");
-            switch (state) {
-                case DisplayState.Enabled:
-                    retval.backgroundColor = color("blue100");
-                    retval.borderColor = color("blue100");
-                    break;
-                case DisplayState.Disabled:
-                    retval.backgroundColor = color("blue100");
-                    retval.borderColor = color("blue100");
-                    break;
-                case DisplayState.Loading:
-                    retval.backgroundColor = color("blue100");
-                    retval.borderColor = color("blue100");
-                    retval.textColor = "rgba(0, 0, 0, 0)";
-                    retval.loaderColor = "white100";
-                    break;
-                case DisplayState.Pressed:
-                    retval.backgroundColor = color("blue10");
-                    retval.borderColor = color("blue10");
-                    retval.textDecorationLine = "underline";
-                    break;
-                default:
-                    null;
-            }
-            break;
-        case "outline":
-            switch (state) {
-                case DisplayState.Enabled:
-                    retval.backgroundColor = color("white100");
-                    retval.borderColor = color("black60");
-                    retval.textColor = color("black100");
-                    break;
-                case DisplayState.Disabled:
-                    retval.backgroundColor = color("white100");
-                    retval.borderColor = color("black30");
-                    retval.textColor = color("black30");
-                    break;
-                case DisplayState.Loading:
-                    retval.backgroundColor = color("white100");
-                    retval.borderColor = color("black60");
-                    retval.textColor = "rgba(0, 0, 0, 0)";
-                    retval.loaderColor = "black100";
-                    break;
-                case DisplayState.Pressed:
-                    retval.backgroundColor = color("blue100");
-                    retval.borderColor = color("blue100");
-                    retval.textColor = color("white100");
-                    retval.textDecorationLine = "underline";
-                    break;
-                default:
-                    null;
-            }
-            break;
-        case "outlineGray":
-            switch (state) {
-                case DisplayState.Enabled:
-                    retval.backgroundColor = color("white100");
-                    retval.borderColor = color("black30");
-                    retval.textColor = color("black100");
-                    break;
-                case DisplayState.Disabled:
-                    retval.backgroundColor = color("white100");
-                    retval.borderColor = color("black30");
-                    retval.textColor = color("black30");
-                    break;
-                case DisplayState.Loading:
-                    retval.backgroundColor = color("white100");
-                    retval.borderColor = color("black30");
-                    retval.textColor = "rgba(0, 0, 0, 0)";
-                    retval.loaderColor = "black100";
-                    break;
-                case DisplayState.Pressed:
-                    retval.backgroundColor = color("blue100");
-                    retval.borderColor = color("blue100");
-                    retval.textColor = color("white100");
-                    retval.textDecorationLine = "underline";
-                    break;
-                default:
-                    null;
-            }
-            break;
-        case "outlineLight":
-            switch (state) {
-                case DisplayState.Enabled:
-                    retval.backgroundColor = "rgba(0, 0, 0, 0)";
-                    retval.borderColor = color("white100");
-                    retval.textColor = color("white100");
-                    break;
-                case DisplayState.Disabled:
-                    retval.backgroundColor = "rgba(0, 0, 0, 0)";
-                    retval.borderColor = color("black30");
-                    retval.textColor = color("black30");
-                    break;
-                case DisplayState.Loading:
-                    retval.backgroundColor = "rgba(0, 0, 0, 0)";
-                    retval.borderColor = color("white100");
-                    retval.textColor = "rgba(0, 0, 0, 0)";
-                    retval.loaderColor = "white100";
-                    break;
-                case DisplayState.Pressed:
-                    retval.backgroundColor = color("blue100");
-                    retval.borderColor = color("blue100");
-                    retval.textColor = "rgba(0, 0, 0, 0)";
-                    retval.textDecorationLine = "underline";
-                    break;
-                default:
-                    null;
-            }
-            break;
-        case "text":
-            retval.backgroundColor = "rgba(0, 0, 0, 0)";
-            retval.borderColor = "rgba(0, 0, 0, 0)";
-            switch (state) {
-                case DisplayState.Enabled:
-                    retval.textColor = color("black100");
-                    break;
-                case DisplayState.Disabled:
-                    retval.textColor = color("black30");
-                    break;
-                case DisplayState.Loading:
-                    retval.textColor = "rgba(0, 0, 0, 0)";
-                    retval.loaderColor = "blue100";
-                    break;
-                case DisplayState.Pressed:
-                    retval.textColor = color("blue100");
-                    retval.textDecorationLine = "underline";
-                    break;
-                default:
-                    null;
-            }
-            break;
-        default:
-            null;
-    }
-    return retval;
-};
-const Container = (0, native_1.default)(Box_1.Box) `
-  position: relative;
-  border-width: 1px;
-  border-radius: 50px;
-  width: ${(p) => (p.block ? "100%" : "auto")};
-  overflow: hidden;
-`;
-const SpinnerContainer = (0, native_1.default)(Box_1.Box) `
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  align-items: center;
-  justify-content: center;
-`;
-const AnimatedContainer = (0, renderprops_native_1.animated)(Container);
-const AnimatedText = (0, renderprops_native_1.animated)(Text_1.Text);

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

@@ -1,11 +0,0 @@
-/// <reference types="react" />
-import { ButtonProps } from "./Button";
-declare const _default: {
-    title: string;
-    component: import("react").FC<ButtonProps>;
-};
-export default _default;
-export declare const Sizes: () => JSX.Element;
-export declare const States: () => JSX.Element;
-export declare const Variants: () => JSX.Element;
-export declare const VariantsLoading: () => JSX.Element;

package/dist/elements/Button/Button.stories.js

@@ -1,42 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.VariantsLoading = exports.Variants = exports.States = exports.Sizes = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const lodash_1 = require("lodash");
-const react_1 = require("react");
-const Button_1 = require("./Button");
-const helpers_1 = require("../../storybook/helpers");
-const Wrap_1 = require("../../utils/Wrap");
-const Flex_1 = require("../Flex");
-const Text_1 = require("../Text");
-const sizes = ["small", "large"];
-const variants = [
-    "fillDark",
-    "fillLight",
-    "fillGray",
-    "fillSuccess",
-    "outline",
-    "outlineGray",
-    "outlineLight",
-    "text",
-];
-exports.default = {
-    title: "Button",
-    component: Button_1.Button,
-};
-const Sizes = () => ((0, jsx_runtime_1.jsx)(helpers_1.DataList, { data: sizes, renderItem: ({ item: size }) => ((0, jsx_runtime_1.jsx)(Button_1.Button, { size: size, onPress: () => console.log(`tapped ${size}`), children: (0, lodash_1.capitalize)(size) })) }));
-exports.Sizes = Sizes;
-const States = () => {
-    const [variant, setVariant] = (0, react_1.useState)("fillDark");
-    return ((0, jsx_runtime_1.jsxs)(helpers_1.List, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "row", flexWrap: "wrap", px: 2, children: variants.map((v) => ((0, jsx_runtime_1.jsx)(Text_1.LinkText, { color: "orange", onPress: () => setVariant(v), mr: "2", children: v }))) }), (0, jsx_runtime_1.jsx)(Button_1.Button, { variant: variant, onPress: () => console.log(`tapped`), longestText: "Regular YEA", children: "Regular" }), (0, jsx_runtime_1.jsx)(Button_1.Button, { variant: variant, onPress: () => console.log(`tapped`), disabled: true, children: "Disabled" }), (0, jsx_runtime_1.jsx)(Button_1.Button, { variant: variant, onPress: () => console.log(`tapped`), loading: true, children: "Loading" })] }));
-};
-exports.States = States;
-const Variants = () => ((0, jsx_runtime_1.jsx)(helpers_1.DataList, { data: variants, renderItem: ({ item: variant }) => ((0, jsx_runtime_1.jsx)(Wrap_1.Wrap, { if: variant === "outlineLight" || variant === "fillLight", children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { backgroundColor: "pink", p: 1, children: (0, jsx_runtime_1.jsx)(Wrap_1.Wrap.Content, { children: (0, jsx_runtime_1.jsx)(Button_1.Button, { variant: variant, onPress: () => console.log(`tapped ${variant}`), children: variant }) }) }) })) }));
-exports.Variants = Variants;
-const VariantsLoading = () => ((0, jsx_runtime_1.jsx)(helpers_1.DataList, { data: variants, renderItem: ({ item: variant }) => {
-        if (variant !== "outlineLight") {
-            return ((0, jsx_runtime_1.jsx)(Button_1.Button, { variant: variant, loading: true, onPress: () => console.log(`tapped ${variant}`), children: variant }));
-        }
-        return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { backgroundColor: "pink", py: 0.5, children: (0, jsx_runtime_1.jsx)(Button_1.Button, { variant: variant, loading: true, onPress: () => console.log(`tapped ${variant}`), children: variant }) }));
-    } }));
-exports.VariantsLoading = VariantsLoading;

package/dist/elements/Button/CTAButton.d.ts

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

package/dist/elements/Button/CTAButton.js

@@ -1,7 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CTAButton = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const Button_1 = require("./Button");
-const CTAButton = (props) => (0, jsx_runtime_1.jsx)(Button_1.Button, { block: true, haptic: true, ...props });
-exports.CTAButton = CTAButton;

package/dist/elements/Button/FollowButton.d.ts

@@ -1,9 +0,0 @@
-/// <reference types="react" />
-import { ButtonProps } from "../Button";
-type FollowButtonProps = Omit<ButtonProps, "variant" | "size" | "longestText" | "icon" | "children"> & {
-    isFollowed: boolean;
-    followCount?: number;
-    longestText?: string;
-};
-export declare const FollowButton: ({ isFollowed, followCount, longestText, loading, ...restProps }: FollowButtonProps) => JSX.Element;
-export {};

package/dist/elements/Button/FollowButton.js

@@ -1,12 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FollowButton = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const CheckIcon_1 = require("../../svgs/CheckIcon");
-const formatLargeNumber_1 = require("../../utils/formatLargeNumber");
-const Button_1 = require("../Button");
-const Text_1 = require("../Text");
-const FollowButton = ({ isFollowed, followCount, longestText, loading, ...restProps }) => {
-    return ((0, jsx_runtime_1.jsx)(Button_1.Button, { variant: isFollowed ? "outline" : "outlineGray", size: "small", longestText: longestText ? longestText : "Following", icon: isFollowed && !loading && (0, jsx_runtime_1.jsx)(CheckIcon_1.CheckIcon, { fill: "black60", width: "16px", height: "16px" }), loading: loading, ...restProps, children: !loading && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "xs", children: isFollowed ? "Following" : "Follow" }), !!followCount && followCount > 1 && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "xs", color: "black60", children: " " + (0, formatLargeNumber_1.formatLargeNumber)(followCount, 1) }) }))] })) }));
-};
-exports.FollowButton = FollowButton;

package/dist/elements/Button/LinkButton.d.ts

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

package/dist/elements/Button/LinkButton.js

@@ -1,8 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.LinkButton = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const Text_1 = require("../Text");
-const Touchable_1 = require("../Touchable");
-const LinkButton = (props) => ((0, jsx_runtime_1.jsx)(Touchable_1.Touchable, { onPress: props.onPress, children: (0, jsx_runtime_1.jsx)(Text_1.Text, { underline: true, ...props }) }));
-exports.LinkButton = LinkButton;

package/dist/elements/Button/colors.d.ts

@@ -1,9 +0,0 @@
-import { ButtonProps } from "./Button";
-import { NoUndefined } from "../../utils/types";
-type State = "disabled" | "pressed" | "active";
-export declare const useColorsForVariantAndState: () => Record<NoUndefined<ButtonProps["variant"]>, Record<State, {
-    bg: string;
-    border: string;
-    text: string;
-}>>;
-export {};

package/dist/elements/Button/colors.js

@@ -1,78 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useColorsForVariantAndState = void 0;
-const useColor_1 = require("../../utils/hooks/useColor");
-const useColorsForVariantAndState = () => {
-    const color = (0, useColor_1.useColor)();
-    return {
-        fillDark: {
-            disabled: { bg: color("black30"), border: color("black30"), text: color("onPrimaryHigh") },
-            pressed: { bg: color("blue100"), border: color("blue100"), text: color("onPrimaryHigh") },
-            active: { bg: color("primary"), border: color("primary"), text: color("onPrimaryHigh") },
-        },
-        fillLight: {
-            disabled: { bg: color("black30"), border: color("black30"), text: color("onPrimaryHigh") },
-            pressed: { bg: color("blue100"), border: color("blue100"), text: color("onPrimaryHigh") },
-            active: {
-                bg: color("white100"),
-                border: color("white100"),
-                text: color("black100"),
-            },
-        },
-        fillGray: {
-            disabled: { bg: color("black30"), border: color("black30"), text: color("white100") },
-            pressed: { bg: color("blue100"), border: color("blue100"), text: color("white100") },
-            active: { bg: color("black10"), border: color("black10"), text: color("black100") },
-        },
-        fillSuccess: {
-            disabled: { bg: color("blue100"), border: color("blue100"), text: color("white100") },
-            pressed: { bg: color("blue100"), border: color("blue100"), text: color("white100") },
-            active: { bg: color("blue10"), border: color("blue10"), text: color("white100") },
-        },
-        outline: {
-            disabled: {
-                bg: color("background"),
-                border: color("onBackgroundLow"),
-                text: color("onBackgroundLow"),
-            },
-            pressed: { bg: color("blue100"), border: color("blue100"), text: color("white100") },
-            active: {
-                bg: color("background"),
-                border: color("onBackgroundMedium"),
-                text: color("onBackgroundHigh"),
-            },
-        },
-        outlineGray: {
-            disabled: {
-                bg: color("white100"),
-                border: color("black30"),
-                text: color("black30"),
-            },
-            pressed: { bg: color("blue100"), border: color("blue100"), text: color("white100") },
-            active: {
-                bg: color("white100"),
-                border: color("black30"),
-                text: color("black100"),
-            },
-        },
-        outlineLight: {
-            disabled: {
-                bg: "rgba(0, 0, 0, 0)",
-                border: color("black30"),
-                text: color("black30"),
-            },
-            pressed: { bg: color("blue100"), border: color("blue100"), text: color("white100") },
-            active: {
-                bg: "rgba(0, 0, 0, 0)",
-                border: color("white100"),
-                text: color("white100"),
-            },
-        },
-        text: {
-            disabled: { bg: "rgba(0, 0, 0, 0)", border: "rgba(0, 0, 0, 0)", text: color("black30") },
-            pressed: { bg: color("black10"), border: color("black10"), text: color("blue100") },
-            active: { bg: "rgba(0, 0, 0, 0)", border: "rgba(0, 0, 0, 0)", text: color("black100") },
-        },
-    };
-};
-exports.useColorsForVariantAndState = useColorsForVariantAndState;

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

@@ -1,4 +0,0 @@
-export * from "./Button";
-export * from "./CTAButton";
-export * from "./LinkButton";
-export * from "./FollowButton";

package/dist/elements/Button/index.js

@@ -1,20 +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("./Button"), exports);
-__exportStar(require("./CTAButton"), exports);
-__exportStar(require("./LinkButton"), exports);
-__exportStar(require("./FollowButton"), exports);

package/dist/elements/ButtonNew/Button.d.ts

@@ -1,34 +0,0 @@
-/// <reference types="react" />
-import { PressableProps } from "react-native";
-import { HapticFeedbackTypes } from "react-native-haptic-feedback";
-import { BoxProps } from "../Box";
-type ButtonSize = "small" | "large";
-type ButtonVariant = "fillDark" | "fillLight" | "fillGray" | "fillSuccess" | "outline" | "outlineGray" | "outlineLight" | "text";
-export interface ButtonProps extends BoxProps {
-    children: React.ReactNode;
-    size?: ButtonSize;
-    variant?: ButtonVariant;
-    onPress?: PressableProps["onPress"];
-    icon?: React.ReactNode;
-    iconPosition?: "left" | "left-start" | "right";
-    /**
-     * `haptic` can be used like:
-     * <Button haptic />
-     * or
-     * <Button haptic="impactHeavy" />
-     * to add haptic feedback on the button.
-     */
-    haptic?: HapticFeedbackTypes | true;
-    /** Displays a loader in the button */
-    loading?: boolean;
-    /** Disabled interactions */
-    disabled?: boolean;
-    /** Makes button full width */
-    block?: boolean;
-    /** Pass the longest text to the button for the button to keep longest text width */
-    longestText?: string;
-    /** Used only for tests and stories */
-    testOnly_pressed?: PressableProps["testOnly_pressed"];
-}
-export declare const Button: ({ children, disabled: disabledProp, haptic, icon, iconPosition, loading: loadingProp, block, longestText, onPress, size, variant, testOnly_pressed, testID, hitSlop, ...restProps }: ButtonProps) => JSX.Element;
-export {};