@artsy/palette-mobile 13.2.31 → 13.2.32

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

@@ -1,16 +1,13 @@
 /// <reference types="react" />
+import { TextVariant } from "@artsy/palette-tokens/dist/typography/v3";
 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;
+    size?: "small" | "large";
+    variant?: "fillDark" | "fillLight" | "fillGray" | "fillSuccess" | "outline" | "outlineGray" | "outlineLight" | "text";
     onPress?: PressableProps["onPress"];
-    onPressIn?: PressableProps["onPressIn"];
-    onPressOut?: PressableProps["onPressOut"];
     icon?: React.ReactNode;
     iconPosition?: "left" | "left-start" | "right";
     /**
@@ -30,7 +27,14 @@ export interface ButtonProps extends BoxProps {
     /** 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"];
+    testOnly_state?: DisplayState;
+    textVariant?: TextVariant;
 }
-export declare const Button: ({ children, disabled: disabledProp, haptic, icon, iconPosition, loading: loadingProp, block, longestText, onPress, onPressIn, onPressOut, size, variant, testOnly_pressed, testID, hitSlop, ...restProps }: ButtonProps) => JSX.Element;
-export {};
+declare enum DisplayState {
+    Enabled = "enabled",
+    Disabled = "disabled",
+    Loading = "loading",
+    Pressed = "pressed"
+}
+export declare const Button: React.FC<ButtonProps>;
+export { DisplayState as _test_DisplayState };

package/dist/elements/Button/Button.js

@@ -1,134 +1,342 @@
 "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;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Button = void 0;
+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_native_reanimated_1 = __importStar(require("react-native-reanimated"));
-const colors_1 = require("./colors");
-const MeasuredView_1 = require("../../elements/MeasuredView");
+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");
+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");
-const ANIMATION_DURATION = 150;
-const Button = ({ children, disabled: disabledProp, haptic, icon, iconPosition = "left", loading: loadingProp, block, longestText, onPress, onPressIn, onPressOut, size = "large", variant = "fillDark", testOnly_pressed, testID, hitSlop, ...restProps }) => {
-    const [disabled] = useStateWithProp(!!disabledProp);
-    const [loading] = useStateWithProp(!!loadingProp);
-    const [_, setPressed, pressedV] = useStateWithProp(!!testOnly_pressed);
-    const pressAnimationProgress = (0, react_native_reanimated_1.useSharedValue)(0);
-    (0, react_native_reanimated_1.useAnimatedReaction)(() => {
-        return pressedV.value;
-    }, (pressedVal) => {
-        return (pressAnimationProgress.value = (0, react_native_reanimated_1.withTiming)(pressedVal, {
-            duration: ANIMATION_DURATION,
-        }));
-    });
-    const textStyle = (0, Text_1.useTextStyleForPalette)(size === "small" ? "xs" : "sm");
+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 height = (() => {
+    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 30;
+                return { height: 30, mx: "15px" };
             case "large":
-                return 50;
+                return { height: 50, mx: "30px" };
         }
-    })();
+    };
     const handlePress = (event) => {
         if (onPress === undefined || onPress === null) {
             return;
         }
-        if (disabled || loading) {
+        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 colorsForVariantAndState = (0, colors_1.useColorsForVariantAndState)();
-    const containerColorsAnim = (0, react_native_reanimated_1.useAnimatedStyle)(() => {
-        const colors = colorsForVariantAndState[variant];
-        if (disabled) {
-            return {
-                backgroundColor: colors.disabled.bg,
-                borderColor: colors.disabled.border,
-            };
-        }
-        if (loading) {
-            return {
-                backgroundColor: colors.loading.bg,
-                borderColor: colors.loading.border,
-            };
-        }
-        return {
-            backgroundColor: (0, react_native_reanimated_1.interpolateColor)(pressAnimationProgress.value, [0, 1], [colors.active.bg, colors.pressed.bg]),
-            borderColor: (0, react_native_reanimated_1.interpolateColor)(pressAnimationProgress.value, [0, 1], [colors.active.border, colors.pressed.border]),
-        };
-    });
-    const textAnim = (0, react_native_reanimated_1.useAnimatedStyle)(() => {
-        const colors = colorsForVariantAndState[variant];
-        if (loading) {
-            return { color: colors.loading.text };
-        }
-        return {
-            color: (0, react_native_reanimated_1.interpolateColor)(pressAnimationProgress.value, [0, 1], [colors.active.text, colors.pressed.text]),
-            textDecorationLine: pressAnimationProgress.value > 0 ? "underline" : "none",
-        };
-    });
-    const loaderColor = colorsForVariantAndState[variant].loading.loader;
-    return ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { disabled: disabled, onPressIn: (e) => {
-            onPressIn?.(e);
-            setPressed(true);
-        }, onPressOut: (e) => {
-            onPressOut?.(e);
-            setPressed(false);
-        }, onPress: handlePress, testID: testID, testOnly_pressed: testOnly_pressed, hitSlop: hitSlop, children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "row", children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { ...restProps, height: height, width: block ? "100%" : undefined, borderRadius: 50, overflow: "hidden", children: (0, jsx_runtime_1.jsx)(AFlex, { borderWidth: 1, borderRadius: 50, overflow: "hidden", style: containerColorsAnim, children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { height: "100%", mx: "25px", 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, (0, jsx_runtime_1.jsx)(AText, { style: [{ width: Math.ceil(longestTextMeasurements.width) }, textStyle, textAnim], textAlign: "center", selectable: false, children: children }), (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 }) }), 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] })), loading && ((0, jsx_runtime_1.jsx)(Box_1.Box, { position: "absolute", width: "100%", height: "100%", alignItems: "center", justifyContent: "center", children: (0, jsx_runtime_1.jsx)(Spinner_1.Spinner, { size: size, color: loaderColor }) }))] }) }) }) }) }));
+    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 AText = react_native_reanimated_1.default.createAnimatedComponent(Text_1.Text);
-const AFlex = react_native_reanimated_1.default.createAnimatedComponent(Flex_1.Flex);
-const useStateWithProp = (prop) => {
-    const [state, setState] = (0, react_1.useState)(!!prop);
-    (0, react_1.useEffect)(() => {
-        setState(!!prop);
-    }, [prop]);
-    const stateV = (0, react_native_reanimated_1.useDerivedValue)(() => {
-        if (!!state) {
-            return 1;
-        }
-        return 0;
-    }, [state]);
-    return [state, setState, stateV];
+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

@@ -2,16 +2,10 @@
 import { ButtonProps } from "./Button";
 declare const _default: {
     title: string;
-    component: ({ children, disabled: disabledProp, haptic, icon, iconPosition, loading: loadingProp, block, longestText, onPress, onPressIn, onPressOut, size, variant, testOnly_pressed, testID, hitSlop, ...restProps }: ButtonProps) => JSX.Element;
+    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;
-export declare const VariantsDisabled: () => JSX.Element;
-export declare const TheFollowButton: () => JSX.Element;
-export declare const TheCTAButton: () => JSX.Element;
-export declare const Miscellaneous: () => JSX.Element;
-export declare const Playground: () => JSX.Element;
-export declare const SpacingAround: () => JSX.Element;

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

@@ -1,19 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SpacingAround = exports.Playground = exports.Miscellaneous = exports.TheCTAButton = exports.TheFollowButton = exports.VariantsDisabled = exports.VariantsLoading = exports.Variants = exports.States = exports.Sizes = void 0;
+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 react_native_1 = require("react-native");
 const Button_1 = require("./Button");
-const CTAButton_1 = require("./CTAButton");
-const FollowButton_1 = require("./FollowButton");
 const helpers_1 = require("../../storybook/helpers");
-const svgs_1 = require("../../svgs");
 const Wrap_1 = require("../../utils/Wrap");
-const Box_1 = require("../Box");
 const Flex_1 = require("../Flex");
-const Spacer_1 = require("../Spacer");
 const Text_1 = require("../Text");
 const sizes = ["small", "large"];
 const variants = [
@@ -34,30 +28,15 @@ const Sizes = () => ((0, jsx_runtime_1.jsx)(helpers_1.DataList, { data: sizes, r
 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" }), (0, jsx_runtime_1.jsx)(Button_1.Button, { variant: variant, onPress: () => console.log(`tapped`), testOnly_pressed: true, children: "Pressed" })] }));
+    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 }) => ((0, jsx_runtime_1.jsx)(Wrap_1.Wrap, { if: variant === "outlineLight", children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { backgroundColor: "black100", p: 1, children: (0, jsx_runtime_1.jsx)(Wrap_1.Wrap.Content, { children: (0, jsx_runtime_1.jsx)(Button_1.Button, { variant: variant, loading: true, onPress: () => console.log(`tapped ${variant}`), children: variant }) }) }) }, `variant_loading_${variant}`)) }));
+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;
-const VariantsDisabled = () => ((0, jsx_runtime_1.jsx)(helpers_1.DataList, { data: variants, renderItem: ({ item: variant }) => ((0, jsx_runtime_1.jsx)(Wrap_1.Wrap, { if: variant === "outlineLight", children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { backgroundColor: "black100", p: 1, children: (0, jsx_runtime_1.jsx)(Wrap_1.Wrap.Content, { children: (0, jsx_runtime_1.jsx)(Button_1.Button, { variant: variant, disabled: true, onPress: () => console.log(`tapped ${variant}`), children: variant }) }) }) })) }));
-exports.VariantsDisabled = VariantsDisabled;
-const TheFollowButton = () => {
-    const [follow, setFollow] = (0, react_1.useState)(true);
-    return ((0, jsx_runtime_1.jsxs)(helpers_1.List, { children: [(0, jsx_runtime_1.jsx)(FollowButton_1.FollowButton, { loading: true, isFollowed: follow, onPress: () => setFollow((v) => !v) }), (0, jsx_runtime_1.jsx)(FollowButton_1.FollowButton, { isFollowed: follow, onPress: () => setFollow((v) => !v) }), (0, jsx_runtime_1.jsx)(FollowButton_1.FollowButton, { followCount: 4, isFollowed: follow, onPress: () => setFollow((v) => !v) }), (0, jsx_runtime_1.jsx)(FollowButton_1.FollowButton, { followCount: 40, isFollowed: follow, onPress: () => setFollow((v) => !v) }), (0, jsx_runtime_1.jsx)(FollowButton_1.FollowButton, { followCount: 4000, isFollowed: follow, onPress: () => setFollow((v) => !v) }), (0, jsx_runtime_1.jsx)(FollowButton_1.FollowButton, { followCount: 400000, isFollowed: follow, onPress: () => setFollow((v) => !v) }), (0, jsx_runtime_1.jsx)(FollowButton_1.FollowButton, { followCount: 40000000, isFollowed: follow, onPress: () => setFollow((v) => !v) })] }));
-};
-exports.TheFollowButton = TheFollowButton;
-const TheCTAButton = () => ((0, jsx_runtime_1.jsx)(helpers_1.List, { children: (0, jsx_runtime_1.jsx)(CTAButton_1.CTAButton, { onPress: () => console.log("pressed"), children: "cta button" }) }));
-exports.TheCTAButton = TheCTAButton;
-const Miscellaneous = () => ((0, jsx_runtime_1.jsxs)(helpers_1.List, { children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { loading: true, disabled: true, children: "loading and disabled" }), (0, jsx_runtime_1.jsx)(Button_1.Button, { loading: true, disabled: true, icon: (0, jsx_runtime_1.jsx)(svgs_1.LinkIcon, {}), children: "loading and disabled with icon" }), (0, jsx_runtime_1.jsx)(Button_1.Button, { block: true, children: "block" }), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { backgroundColor: "orange", width: 400, height: 80, alignItems: "center", justifyContent: "center", children: (0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "fillLight", icon: (0, jsx_runtime_1.jsx)(svgs_1.LinkIcon, {}), children: "left icon" }) }), (0, jsx_runtime_1.jsx)(Button_1.Button, { icon: (0, jsx_runtime_1.jsx)(svgs_1.LinkIcon, { fill: "white100" }), iconPosition: "right", children: "right icon" }), (0, jsx_runtime_1.jsx)(Button_1.Button, { size: "small", icon: (0, jsx_runtime_1.jsx)(svgs_1.LinkIcon, { fill: "white100" }), iconPosition: "right", children: "Right Icon Small" }), (0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "fillDark", size: "small", icon: (0, jsx_runtime_1.jsx)(svgs_1.BellIcon, { fill: "white100", width: "16px", height: "16px" }), children: "Create Alert" }), (0, jsx_runtime_1.jsxs)(Box_1.Box, { flexDirection: "row", children: [(0, jsx_runtime_1.jsx)(Box_1.Box, { width: 2, height: "100%", backgroundColor: "green100" }), (0, jsx_runtime_1.jsxs)(Box_1.Box, { children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { size: "small", icon: (0, jsx_runtime_1.jsx)(svgs_1.LinkIcon, { fill: "white100" }), iconPosition: "right", longestText: "this is a very long text", children: "shortest text" }), (0, jsx_runtime_1.jsx)(Spacer_1.Spacer, { y: 1 }), (0, jsx_runtime_1.jsx)(Button_1.Button, { size: "small", icon: (0, jsx_runtime_1.jsx)(svgs_1.LinkIcon, { fill: "white100" }), iconPosition: "right", longestText: "this is a very long text", children: "this is a very long text" })] }), (0, jsx_runtime_1.jsx)(Box_1.Box, { width: 2, height: "100%", backgroundColor: "green100" })] }), (0, jsx_runtime_1.jsx)(Button_1.Button, { icon: (0, jsx_runtime_1.jsx)(svgs_1.LinkIcon, { fill: "white100" }), block: true, iconPosition: "left-start", children: "left-start aligned icon" })] }));
-exports.Miscellaneous = Miscellaneous;
-const Playground = () => {
-    const [loading, setLoading] = (0, react_1.useState)(false);
-    const [disabled, setDisabled] = (0, react_1.useState)(true);
-    const [block, setBlock] = (0, react_1.useState)(false);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_native_1.Button, { title: "loading", onPress: () => setLoading((v) => !v) }), (0, jsx_runtime_1.jsx)(react_native_1.Button, { title: "disabled", onPress: () => setDisabled((v) => !v) }), (0, jsx_runtime_1.jsx)(react_native_1.Button, { title: "block", onPress: () => setBlock((v) => !v) }), (0, jsx_runtime_1.jsx)(helpers_1.List, { children: (0, jsx_runtime_1.jsxs)(Button_1.Button, { loading: loading, disabled: disabled, block: block, longestText: "loading false, disabled false, block false", children: ["loading ", loading ? "true" : "false", ", disabled ", disabled ? "true" : "false", ", block", " ", block ? "true" : "false"] }) })] }));
-};
-exports.Playground = Playground;
-const SpacingAround = () => ((0, jsx_runtime_1.jsxs)(Box_1.Box, { children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { m: 2, children: "wow 1" }), (0, jsx_runtime_1.jsx)(Button_1.Button, { children: "wow 2" })] }));
-exports.SpacingAround = SpacingAround;

package/dist/elements/Button/FollowButton.js

@@ -7,7 +7,6 @@ const formatLargeNumber_1 = require("../../utils/formatLargeNumber");
 const Button_1 = require("../Button");
 const Text_1 = require("../Text");
 const FollowButton = ({ isFollowed, followCount, longestText, loading, ...restProps }) => {
-    const label = isFollowed ? "Following" : "Follow";
-    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 ? (`${label} ${followCount && followCount > 1 ? (0, formatLargeNumber_1.formatLargeNumber)(followCount, 1) : ""}`) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "xs", children: label }), !!followCount && followCount > 1 && ((0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "xs", color: "black60", children: " " + (0, formatLargeNumber_1.formatLargeNumber)(followCount, 1) }))] })) }));
+    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

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

package/dist/elements/Button/LinkButton.js

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

package/dist/elements/Button/colors.js

@@ -1,20 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useColorsForVariantAndState = void 0;
-const hooks_1 = require("../../utils/hooks");
+const useColor_1 = require("../../utils/hooks/useColor");
 const useColorsForVariantAndState = () => {
-    const color = (0, hooks_1.useColor)();
+    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") },
-            loading: {
-                bg: color("black100"),
-                border: color("black100"),
-                text: "rgba(0, 0, 0, 0)",
-                loader: "white100",
-            },
         },
         fillLight: {
             disabled: { bg: color("black30"), border: color("black30"), text: color("onPrimaryHigh") },
@@ -24,52 +18,28 @@ const useColorsForVariantAndState = () => {
                 border: color("white100"),
                 text: color("black100"),
             },
-            loading: {
-                bg: color("white100"),
-                border: color("white100"),
-                text: "rgba(0, 0, 0, 0)",
-                loader: "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") },
-            loading: {
-                bg: color("black10"),
-                border: color("black10"),
-                text: "rgba(0, 0, 0, 0)",
-                loader: "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") },
-            loading: {
-                bg: color("blue100"),
-                border: color("blue100"),
-                text: "rgba(0, 0, 0, 0)",
-                loader: "white100",
-            },
         },
         outline: {
             disabled: {
-                bg: color("white100"),
-                border: color("black100"),
-                text: color("black100"),
+                bg: color("background"),
+                border: color("onBackgroundLow"),
+                text: color("onBackgroundLow"),
             },
             pressed: { bg: color("blue100"), border: color("blue100"), text: color("white100") },
             active: {
-                bg: color("white100"),
-                border: color("black60"),
-                text: color("black100"),
-            },
-            loading: {
-                bg: color("white100"),
-                border: color("black60"),
-                text: "rgba(0, 0, 0, 0)",
-                loader: "black100",
+                bg: color("background"),
+                border: color("onBackgroundMedium"),
+                text: color("onBackgroundHigh"),
             },
         },
         outlineGray: {
@@ -80,15 +50,9 @@ const useColorsForVariantAndState = () => {
             },
             pressed: { bg: color("blue100"), border: color("blue100"), text: color("white100") },
             active: {
-                bg: color("white100"),
-                border: color("black60"),
-                text: color("black100"),
-            },
-            loading: {
                 bg: color("white100"),
                 border: color("black30"),
-                text: "rgba(0, 0, 0, 0)",
-                loader: "black100",
+                text: color("black100"),
             },
         },
         outlineLight: {
@@ -103,23 +67,11 @@ const useColorsForVariantAndState = () => {
                 border: color("white100"),
                 text: color("white100"),
             },
-            loading: {
-                bg: "rgba(0,0,0,0)",
-                border: color("white100"),
-                text: "rgba(0, 0, 0, 0)",
-                loader: "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") },
-            loading: {
-                bg: color("white100"),
-                border: color("white100"),
-                text: "rgba(0, 0, 0, 0)",
-                loader: "blue100",
-            },
         },
     };
 };

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

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

package/dist/elements/Button/index.js

@@ -16,4 +16,5 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 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

@@ -0,0 +1,34 @@
+/// <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 {};

package/dist/elements/ButtonNew/Button.js

@@ -0,0 +1,132 @@
+"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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+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_native_reanimated_1 = __importStar(require("react-native-reanimated"));
+const colors_1 = require("./colors");
+const MeasuredView_1 = require("../../elements/MeasuredView");
+const Box_1 = require("../Box");
+const Flex_1 = require("../Flex");
+const Spacer_1 = require("../Spacer");
+const Spinner_1 = require("../Spinner");
+const Text_1 = require("../Text");
+const ANIMATION_DURATION = 150;
+const Button = ({ children, disabled: disabledProp, haptic, icon, iconPosition = "left", loading: loadingProp, block, longestText, onPress, size = "large", variant = "fillDark", testOnly_pressed, testID, hitSlop, ...restProps }) => {
+    const [disabled, setDisabled, disabledV] = useStateWithProp(!!disabledProp);
+    const [loading, setLoading, loadingV] = useStateWithProp(!!loadingProp);
+    const [pressed, setPressed, pressedV] = useStateWithProp(!!testOnly_pressed);
+    const pressAnimationProgress = (0, react_native_reanimated_1.useSharedValue)(0);
+    (0, react_native_reanimated_1.useAnimatedReaction)(() => {
+        return pressedV.value;
+    }, (pressedVal) => {
+        return (pressAnimationProgress.value = (0, react_native_reanimated_1.withTiming)(pressedVal, {
+            duration: ANIMATION_DURATION,
+        }));
+    });
+    const textStyle = (0, Text_1.useTextStyleForPalette)(size === "small" ? "xs" : "sm");
+    const [longestTextMeasurements, setLongestTextMeasurements] = (0, react_1.useState)({
+        width: 0,
+        height: 0,
+    });
+    const height = (() => {
+        switch (size) {
+            case "small":
+                return 30;
+            case "large":
+                return 50;
+        }
+    })();
+    const spinnerColor = variant === "text" ? "blue100" : "white100";
+    const handlePress = (event) => {
+        if (onPress === undefined || onPress === null) {
+            return;
+        }
+        if (disabled || loading) {
+            return;
+        }
+        if (haptic !== undefined) {
+            react_native_haptic_feedback_1.default.trigger(haptic === true ? "impactLight" : haptic);
+        }
+        onPress(event);
+    };
+    const colorsForVariantAndState = (0, colors_1.useColorsForVariantAndState)();
+    const containerColorsAnim = (0, react_native_reanimated_1.useAnimatedStyle)(() => {
+        const colors = colorsForVariantAndState[variant];
+        if (disabled) {
+            return {
+                backgroundColor: colors.disabled.bg,
+                borderColor: colors.disabled.border,
+            };
+        }
+        return {
+            backgroundColor: (0, react_native_reanimated_1.interpolateColor)(pressAnimationProgress.value, [0, 1], [colors.active.bg, colors.pressed.bg]),
+            borderColor: (0, react_native_reanimated_1.interpolateColor)(pressAnimationProgress.value, [0, 1], [colors.active.border, colors.pressed.border]),
+        };
+    });
+    const textAnim = (0, react_native_reanimated_1.useAnimatedStyle)(() => {
+        const colors = colorsForVariantAndState[variant];
+        if (loading) {
+            return { color: "rgba(0, 0, 0, 0)" };
+        }
+        return {
+            color: (0, react_native_reanimated_1.interpolateColor)(pressAnimationProgress.value, [0, 1], [colors.active.text, colors.pressed.text]),
+            textDecorationLine: pressAnimationProgress.value > 0 ? "underline" : "none",
+        };
+    });
+    return ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { disabled: disabled, onPressIn: () => {
+            if (loading) {
+                return;
+            }
+            setPressed(true);
+        }, onPressOut: () => {
+            if (loading) {
+                return;
+            }
+            setPressed(false);
+        }, onPress: handlePress, testID: testID, testOnly_pressed: testOnly_pressed, hitSlop: hitSlop, children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "row", children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { ...restProps, height: height, width: block ? "100%" : undefined, borderRadius: 50, overflow: "hidden", children: (0, jsx_runtime_1.jsx)(AFlex, { borderWidth: 1, borderRadius: 50, overflow: "hidden", style: containerColorsAnim, children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { height: "100%", mx: "25px", 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, (0, jsx_runtime_1.jsx)(AText, { style: [{ width: Math.ceil(longestTextMeasurements.width) }, textStyle, textAnim], textAlign: "center", children: children }), (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 }) }), 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] })) : null, loading ? ((0, jsx_runtime_1.jsx)(Box_1.Box, { position: "absolute", width: "100%", height: "100%", alignItems: "center", justifyContent: "center", children: (0, jsx_runtime_1.jsx)(Spinner_1.Spinner, { size: size, color: spinnerColor }) })) : null] }) }) }) }) }));
+};
+exports.Button = Button;
+const AText = react_native_reanimated_1.default.createAnimatedComponent(Text_1.Text);
+const AFlex = react_native_reanimated_1.default.createAnimatedComponent(Flex_1.Flex);
+const useStateWithProp = (prop) => {
+    const [state, setState] = (0, react_1.useState)(!!prop);
+    (0, react_1.useEffect)(() => {
+        setState(!!prop);
+    }, [prop]);
+    const stateV = (0, react_native_reanimated_1.useDerivedValue)(() => {
+        if (!!state) {
+            return 1;
+        }
+        return 0;
+    }, [state]);
+    return [state, setState, stateV];
+};

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

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import { ButtonProps } from "./Button";
+declare const _default: {
+    title: string;
+    component: ({ children, disabled: disabledProp, haptic, icon, iconPosition, loading: loadingProp, block, longestText, onPress, size, variant, testOnly_pressed, testID, hitSlop, ...restProps }: ButtonProps) => JSX.Element;
+};
+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;
+export declare const VariantsDisabled: () => JSX.Element;
+export declare const TheFollowButton: () => JSX.Element;
+export declare const TheCTAButton: () => JSX.Element;
+export declare const TheLinkButton: () => JSX.Element;
+export declare const Miscellaneous: () => JSX.Element;
+export declare const Playground: () => JSX.Element;
+export declare const SpacingAround: () => JSX.Element;

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

@@ -0,0 +1,66 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SpacingAround = exports.Playground = exports.Miscellaneous = exports.TheLinkButton = exports.TheCTAButton = exports.TheFollowButton = exports.VariantsDisabled = 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 react_native_1 = require("react-native");
+const Button_1 = require("./Button");
+const CTAButton_1 = require("./CTAButton");
+const FollowButton_1 = require("./FollowButton");
+const LinkButton_1 = require("./LinkButton");
+const helpers_1 = require("../../storybook/helpers");
+const svgs_1 = require("../../svgs");
+const Wrap_1 = require("../../utils/Wrap");
+const Box_1 = require("../Box");
+const Flex_1 = require("../Flex");
+const Spacer_1 = require("../Spacer");
+const Text_1 = require("../Text");
+const sizes = ["small", "large"];
+const variants = [
+    "fillDark",
+    "fillLight",
+    "fillGray",
+    "fillSuccess",
+    "outline",
+    "outlineGray",
+    "outlineLight",
+    "text",
+];
+exports.default = {
+    title: "ButtonNew",
+    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((variant) => ((0, jsx_runtime_1.jsx)(Text_1.LinkText, { color: "orange", onPress: () => setVariant(variant), mr: "2", children: variant }))) }), (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" }), (0, jsx_runtime_1.jsx)(Button_1.Button, { variant: variant, onPress: () => console.log(`tapped`), testOnly_pressed: true, children: "Pressed" })] }));
+};
+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 }) => ((0, jsx_runtime_1.jsx)(Button_1.Button, { variant: variant, loading: true, onPress: () => console.log(`tapped ${variant}`), children: variant })) }));
+exports.VariantsLoading = VariantsLoading;
+const VariantsDisabled = () => ((0, jsx_runtime_1.jsx)(helpers_1.DataList, { data: variants, renderItem: ({ item: variant }) => ((0, jsx_runtime_1.jsx)(Wrap_1.Wrap, { if: variant === "outlineLight", children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { backgroundColor: "black100", p: 1, children: (0, jsx_runtime_1.jsx)(Wrap_1.Wrap.Content, { children: (0, jsx_runtime_1.jsx)(Button_1.Button, { variant: variant, disabled: true, onPress: () => console.log(`tapped ${variant}`), children: variant }) }) }) })) }));
+exports.VariantsDisabled = VariantsDisabled;
+const TheFollowButton = () => {
+    const [follow, setFollow] = (0, react_1.useState)(true);
+    return ((0, jsx_runtime_1.jsxs)(helpers_1.List, { children: [(0, jsx_runtime_1.jsx)(FollowButton_1.FollowButton, { isFollowed: follow, onPress: () => setFollow((v) => !v) }), (0, jsx_runtime_1.jsx)(FollowButton_1.FollowButton, { followCount: 4, isFollowed: follow, onPress: () => setFollow((v) => !v) }), (0, jsx_runtime_1.jsx)(FollowButton_1.FollowButton, { followCount: 40, isFollowed: follow, onPress: () => setFollow((v) => !v) }), (0, jsx_runtime_1.jsx)(FollowButton_1.FollowButton, { followCount: 4000, isFollowed: follow, onPress: () => setFollow((v) => !v) }), (0, jsx_runtime_1.jsx)(FollowButton_1.FollowButton, { followCount: 400000, isFollowed: follow, onPress: () => setFollow((v) => !v) }), (0, jsx_runtime_1.jsx)(FollowButton_1.FollowButton, { followCount: 40000000, isFollowed: follow, onPress: () => setFollow((v) => !v) }), (0, jsx_runtime_1.jsx)(FollowButton_1.FollowButton, { followCount: 4000000000, isFollowed: follow, onPress: () => setFollow((v) => !v) })] }));
+};
+exports.TheFollowButton = TheFollowButton;
+const TheCTAButton = () => ((0, jsx_runtime_1.jsx)(helpers_1.List, { children: (0, jsx_runtime_1.jsx)(CTAButton_1.CTAButton, { onPress: () => console.log("pressed"), children: "cta button" }) }));
+exports.TheCTAButton = TheCTAButton;
+const TheLinkButton = () => ((0, jsx_runtime_1.jsx)(helpers_1.List, { children: (0, jsx_runtime_1.jsx)(LinkButton_1.LinkButton, { onPress: () => console.log("pressed"), children: "LinkButton" }) }));
+exports.TheLinkButton = TheLinkButton;
+const Miscellaneous = () => ((0, jsx_runtime_1.jsxs)(helpers_1.List, { children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { loading: true, disabled: true, children: "loading and disabled" }), (0, jsx_runtime_1.jsx)(Button_1.Button, { loading: true, disabled: true, icon: (0, jsx_runtime_1.jsx)(svgs_1.LinkIcon, {}), children: "loading and disabled with icon" }), (0, jsx_runtime_1.jsx)(Button_1.Button, { block: true, children: "block" }), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { backgroundColor: "orange", width: 400, height: 80, alignItems: "center", justifyContent: "center", children: (0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "fillLight", icon: (0, jsx_runtime_1.jsx)(svgs_1.LinkIcon, {}), children: "left icon" }) }), (0, jsx_runtime_1.jsx)(Button_1.Button, { icon: (0, jsx_runtime_1.jsx)(svgs_1.LinkIcon, { fill: "white100" }), iconPosition: "right", children: "right icon" }), (0, jsx_runtime_1.jsx)(Button_1.Button, { size: "small", icon: (0, jsx_runtime_1.jsx)(svgs_1.LinkIcon, { fill: "white100" }), iconPosition: "right", children: "Right Icon Small" }), (0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "fillDark", size: "small", icon: (0, jsx_runtime_1.jsx)(svgs_1.BellIcon, { fill: "white100", width: "16px", height: "16px" }), children: "Create Alert" }), (0, jsx_runtime_1.jsxs)(Box_1.Box, { flexDirection: "row", children: [(0, jsx_runtime_1.jsx)(Box_1.Box, { width: 2, height: "100%", backgroundColor: "green100" }), (0, jsx_runtime_1.jsxs)(Box_1.Box, { children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { size: "small", icon: (0, jsx_runtime_1.jsx)(svgs_1.LinkIcon, { fill: "white100" }), iconPosition: "right", longestText: "this is a very long text", children: "shortest text" }), (0, jsx_runtime_1.jsx)(Spacer_1.Spacer, { y: 1 }), (0, jsx_runtime_1.jsx)(Button_1.Button, { size: "small", icon: (0, jsx_runtime_1.jsx)(svgs_1.LinkIcon, { fill: "white100" }), iconPosition: "right", longestText: "this is a very long text", children: "this is a very long text" })] }), (0, jsx_runtime_1.jsx)(Box_1.Box, { width: 2, height: "100%", backgroundColor: "green100" })] }), (0, jsx_runtime_1.jsx)(Button_1.Button, { icon: (0, jsx_runtime_1.jsx)(svgs_1.LinkIcon, { fill: "white100" }), block: true, iconPosition: "left-start", children: "left-start aligned icon" })] }));
+exports.Miscellaneous = Miscellaneous;
+const Playground = () => {
+    const [loading, setLoading] = (0, react_1.useState)(false);
+    const [disabled, setDisabled] = (0, react_1.useState)(true);
+    const [block, setBlock] = (0, react_1.useState)(false);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_native_1.Button, { title: "loading", onPress: () => setLoading((v) => !v) }), (0, jsx_runtime_1.jsx)(react_native_1.Button, { title: "disabled", onPress: () => setDisabled((v) => !v) }), (0, jsx_runtime_1.jsx)(react_native_1.Button, { title: "block", onPress: () => setBlock((v) => !v) }), (0, jsx_runtime_1.jsx)(helpers_1.List, { children: (0, jsx_runtime_1.jsxs)(Button_1.Button, { loading: loading, disabled: disabled, block: block, longestText: "loading false, disabled false, block false", children: ["loading ", loading ? "true" : "false", ", disabled ", disabled ? "true" : "false", ", block", " ", block ? "true" : "false"] }) })] }));
+};
+exports.Playground = Playground;
+const SpacingAround = () => ((0, jsx_runtime_1.jsxs)(Box_1.Box, { children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { m: 2, children: "wow 1" }), (0, jsx_runtime_1.jsx)(Button_1.Button, { children: "wow 2" })] }));
+exports.SpacingAround = SpacingAround;

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

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

package/dist/elements/ButtonNew/CTAButton.js

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

@@ -0,0 +1,9 @@
+/// <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/ButtonNew/FollowButton.js

@@ -0,0 +1,12 @@
+"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/ButtonNew/LinkButton.d.ts

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

package/dist/elements/ButtonNew/LinkButton.js

@@ -0,0 +1,8 @@
+"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/ButtonNew/colors.d.ts

@@ -0,0 +1,9 @@
+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/ButtonNew/colors.js

@@ -0,0 +1,78 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useColorsForVariantAndState = void 0;
+const hooks_1 = require("../../utils/hooks");
+const useColorsForVariantAndState = () => {
+    const color = (0, hooks_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/ButtonNew/index.d.ts

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

package/dist/elements/ButtonNew/index.js

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

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

@@ -38,5 +38,5 @@ export declare const getInputState: ({ isFocused, value, }: {
 export declare const getInputVariant: ({ disabled, hasError, }: {
     disabled: boolean;
     hasError: boolean;
-}) => "default" | "disabled" | "error";
+}) => "default" | "error" | "disabled";
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@artsy/palette-mobile",
-  "version": "13.2.31",
+  "version": "13.2.32",
   "description": "Artsy's design system for React Native",
   "scripts": {
     "android": "RCT_METRO_PORT=8082 react-native run-android --port 8082",