yeet

design/components/Button/native/BaseButton.native.tsx

@@ -0,0 +1,101 @@
+// Metro module 4607 (f4608).
+import { forwardRef, useMemo } from "react";
+import * as _Module17 from "react-native";
+import { IOS_POINTER_STYLE } from "../../Styles/native/styleConstants";
+import { useThemeContext, ThemeContextProvider } from "../../../../_bundle/Module3901";
+import { createStyles } from "../../Styles/native/createStyles";
+import Module712 from "../../../../_bundle/Module712";
+import { useButtonPressAnimationProps } from "./ButtonHooks.native";
+import ReanimatedRexport from "../../../../modules/reanimated/ReanimatedRexport";
+import { isNotNullish } from "../../../../utils/GlobalUtils";
+import { isAndroid } from "../../../../utils/PlatformUtils";
+let AnimatedComponent, AnimatedComponent2;
+const _excluded = ["style"];
+const { Pressable, TouchableOpacity } = _Module17;
+const useStyles = createStyles((a0) => ({
+  button: {
+    ...a0 === "primary-overlay" ? Module712.shadows.SHADOW_BUTTON_OVERLAY : {}
+  },
+  disabled: {
+    opacity: 0.5
+  }
+}));
+AnimatedComponent = ReanimatedRexport.createAnimatedComponent(Pressable);
+AnimatedComponent2 = ReanimatedRexport.createAnimatedComponent(TouchableOpacity);
+const r43 = forwardRef(function(a0, a1) {
+  const { children, style, variant = "primary" } = a0;
+  let disabled2 = a0.disabled;
+  if (disabled2 === void 0) {
+    disabled2 = false;
+  }
+  let loading = a0.loading;
+  if (loading === void 0) {
+    loading = false;
+  }
+  const busy = loading;
+  const pressed = a0.pressed;
+  let onPress = a0.onPress;
+  const { onPressDisabled, onPressIn: onPressIn2, onPressOut: onPressOut2, onLongPress, onLayout, accessible } = a0;
+  let accessibilityRole = a0.accessibilityRole;
+  const { accessibilityLabel, accessibilityHint, accessibilityValue, accessibilityState, accessibilityActions, onAccessibilityAction, accessibilityElementsHidden, importantForAccessibility, pointerEvents, hitSlop, scaleAmountInPx } = a0;
+  const styles = useStyles(variant);
+  const disabled = disabled2 ? onPressDisabled == null : disabled2;
+  if (disabled2) {
+    onPress = onPressDisabled;
+  }
+  if (onPress == null) {
+    onPress = void 0;
+  }
+  const buttonPressAnimationProps = useButtonPressAnimationProps(pressed, scaleAmountInPx, onLayout, onPressIn2, onPressOut2);
+  const { style: style2, ...rest } = buttonPressAnimationProps;
+  const r52 = pressed == null ? {
+    animatedScaleStyles: void 0,
+    buttonAnimationProps: {
+      onLayout,
+      onPressIn: onPressIn2,
+      onPressOut: onPressOut2
+    }
+  } : {
+    animatedScaleStyles: style2,
+    buttonAnimationProps: rest
+  };
+  const { animatedScaleStyles, buttonAnimationProps } = r52;
+  const memo = useMemo(() => ({
+    ...accessibilityState,
+    disabled,
+    busy
+  }), [accessibilityState, disabled, busy]);
+  const theme = useThemeContext().theme;
+  const theme2 = variant !== "primary-overlay" ? variant === "secondary-overlay" ? theme === "light" ? "dark" : void 0 : void 0 : "light";
+  const r72 = theme2 != null ? <ThemeContextProvider theme={theme2}>{children}</ThemeContextProvider> : children;
+  const style3 = [styles.button, style, , , ,];
+  if (disabled2) {
+    disabled2 = styles.disabled;
+  }
+  style3[2] = disabled2;
+  style3[3] = animatedScaleStyles;
+  style3[4] = IOS_POINTER_STYLE;
+  if (accessibilityRole !== "none") {
+    if (accessibilityRole == null) {
+      accessibilityRole = "button";
+    }
+    return <AnimatedComponent {...buttonAnimationProps} ref={a1} accessible={accessible} accessibilityRole={accessibilityRole} accessibilityLabel={accessibilityLabel} accessibilityHint={accessibilityHint} accessibilityValue={accessibilityValue} accessibilityState={memo} accessibilityActions={accessibilityActions} onAccessibilityAction={onAccessibilityAction} accessibilityElementsHidden={accessibilityElementsHidden} importantForAccessibility={importantForAccessibility} pointerEvents={pointerEvents} style={style3} onPress={onPress} onLongPress={onLongPress} disabled={disabled} hitSlop={hitSlop}>{r72}</AnimatedComponent>;
+  }
+  const accessibilityLabel2 = accessibilityElementsHidden ? "" : [accessibilityLabel, accessibilityHint].filter(isNotNullish).join(", ");
+  let r98 = accessible;
+  if (r98 == null) {
+    r98 = isAndroid();
+  }
+  return <AnimatedComponent2 {...buttonAnimationProps} ref={a1} accessible={r98 ? !r98 : void 0} accessibilityRole="none" accessibilityLabel={accessibilityLabel2} accessibilityElementsHidden={accessibilityElementsHidden} activeOpacity={1} importantForAccessibility={importantForAccessibility} style={style3} onPress={onPress} onPressIn={(event) => {
+    const onPressIn2 = buttonAnimationProps.onPressIn;
+    if (onPressIn2 != null) {
+      onPressIn2.call(buttonAnimationProps, event);
+    }
+  }} onPressOut={(event) => {
+    const onPressOut2 = buttonAnimationProps.onPressOut;
+    if (onPressOut2 != null) {
+      onPressOut2.call(buttonAnimationProps, event);
+    }
+  }} hitSlop={hitSlop}>{r72}</AnimatedComponent2>;
+});
+export { r43 as BaseButton };

design/components/Button/native/BaseIconButton.native.tsx

@@ -0,0 +1,50 @@
+// Metro module 6683 (f6684).
+import { forwardRef, isValidElement } from "react";
+import { createStyles } from "../../Styles/native/createStyles";
+import * as _ButtonConstants_native from "./ButtonConstants.native";
+import { SMALL_BUTTON_PADDING, MEDIUM_BUTTON_PADDING, LARGE_BUTTON_PADDING, DEFAULT_BUTTON_SIZE, SMALL_BUTTON_HEIGHT, MEDIUM_BUTTON_HEIGHT, MINIMUM_HIT_AREA } from "./ButtonConstants.native";
+import ReanimatedRexport, { useSharedValue } from "../../../../modules/reanimated/ReanimatedRexport";
+import Icon from "../../../void/Icon/native/Icon";
+import { useIconTintStyles, useIconSizeStyles } from "./ButtonHooks.native";
+import { BaseButton } from "./BaseButton.native";
+import { ButtonPill } from "./ButtonPill.native";
+let AnimatedComponent;
+const useStyles = createStyles((a0, a1) => ({
+  button: {
+    flexShrink: 0,
+    flexGrow: 0,
+    alignSelf: "center"
+  },
+  pill: {
+    ...a1 === "sm" ? {
+      paddingHorizontal: SMALL_BUTTON_PADDING,
+      paddingVertical: SMALL_BUTTON_PADDING
+    } : a1 === "md" ? {
+      paddingHorizontal: MEDIUM_BUTTON_PADDING,
+      paddingVertical: MEDIUM_BUTTON_PADDING
+    } : a1 === "lg" ? {
+      paddingHorizontal: LARGE_BUTTON_PADDING,
+      paddingVertical: LARGE_BUTTON_PADDING
+    } : {}
+  }
+}));
+AnimatedComponent = ReanimatedRexport.createAnimatedComponent(Icon);
+const r31 = forwardRef(function(a0, a1) {
+  const { style, pillStyle, variant: variant2 = "primary", size = DEFAULT_BUTTON_SIZE, maxFontSizeMultiplier, loading, icon, scaleAmountInPx: scaleAmountInPx2 = 4 } = a0;
+  const styles3 = useStyles(variant2, size);
+  const sharedValue = useSharedValue(0);
+  const styles2 = useIconTintStyles(variant2);
+  const styles = useIconSizeStyles(size, true, maxFontSizeMultiplier);
+  let LARGE_BUTTON_HEIGHT = _ButtonConstants_native.LARGE_BUTTON_HEIGHT;
+  if (size === "sm") {
+    LARGE_BUTTON_HEIGHT = SMALL_BUTTON_HEIGHT;
+  } else if (size === "md") {
+    LARGE_BUTTON_HEIGHT = MEDIUM_BUTTON_HEIGHT;
+  }
+  return <BaseButton {...a0} ref={a1} style={[styles3.button, style]} pressed={sharedValue} scaleAmountInPx={scaleAmountInPx2} hitSlop={Math.max((MINIMUM_HIT_AREA - LARGE_BUTTON_HEIGHT) / 2, 0)}>
+    <ButtonPill style={[styles3.pill, pillStyle]} variant={variant2} size={size} loading={loading} loaderSize={size === "lg" ? "sm" : "xs"} pressed={sharedValue}>
+      {isValidElement(icon) ? icon : <AnimatedComponent source={icon} style={[styles2, styles]} />}
+    </ButtonPill>
+  </BaseButton>;
+});
+export { r31 as BaseIconButton };

design/components/Button/native/BaseTextButton.native.tsx

@@ -0,0 +1,332 @@
+// Metro module 4601 (f4602).
+import { createContext, forwardRef, useContext, useRef, useState, useCallback, isValidElement } from "react";
+import { Text, View, Platform } from "react-native";
+import { createStyles } from "../../Styles/native/createStyles";
+import Module712 from "../../../../_bundle/Module712";
+import ReanimatedRexport, { useSharedValue, useWorkletCallback, useAnimatedStyle } from "../../../../modules/reanimated/ReanimatedRexport";
+import Icon from "../../../void/Icon/native/Icon";
+import * as _spring from "../../../animation/reanimated/spring/spring";
+import * as _springPresets from "../../../animation/reanimated/spring/springPresets";
+import { LARGE_BUTTON_HEIGHT, MINIMUM_HIT_AREA, SMALL_BUTTON_HEIGHT, MEDIUM_BUTTON_HEIGHT, DEFAULT_BUTTON_SIZE, BUTTON_DEFAULT_MAX_FONT_SIZE_MULTIPLIER, getButtonDefaultTextVariant } from "./ButtonConstants.native";
+import { useIconSizeStyles, useButtonTextColorStyles } from "./ButtonHooks.native";
+import MobileVisualRefreshExperiment from "../../../../modules/themes/experiments/MobileVisualRefreshExperiment";
+import { TextStyleSheet } from "../../Text/native/Text";
+import { AccessibilityPreferencesContext } from "../../../../_bundle/Module3908";
+import { triggerHapticFeedback, HapticFeedbackTypes } from "../../../../modules/haptics/HapticUtils.native";
+import { BaseButton } from "./BaseButton.native";
+import { getNodeText } from "../../../utils/native";
+import { ButtonPill } from "./ButtonPill.native";
+let useStyles, useStyles2, useStyles3, AnimatedComponent, context, __initData, __initData2, __initData3, useStyles4, c2803_19, getTextPlatformLineHeight, BaseTextButtonIcon;
+const CollapsingText = function CollapsingText(props) {
+  let sharedValue2, collapseText;
+  let sharedValue3, collapseText2, textCollapsed;
+  const { children, collapseText: collapseText3 } = props;
+  const styles2 = useStyles2();
+  const sharedValue = useSharedValue(0);
+  const r20 = function({ nativeEvent }) {
+    if (sharedValue.get() === 0) {
+      sharedValue.set(nativeEvent.layout.width);
+    }
+  };
+  r20.__closure = {
+    containerWidth: sharedValue
+  };
+  r20.__workletHash = 5541458715155;
+  r20.__initData = __initData;
+  const workletCallback = useWorkletCallback(r20, [sharedValue]);
+  sharedValue2 = sharedValue;
+  collapseText = collapseText3;
+  const r30 = function() {
+    let r23;
+    if (sharedValue2.get() === 0) {
+      r23 = {};
+    } else {
+      const r16 = collapseText.get();
+      let r0 = 1;
+      r23 = {
+        width: _spring.withSpring(r16 !== 1 ? sharedValue2.get() : 0, _springPresets.SUBTLE_SPRING, "animate-always"),
+        opacity: null
+      };
+      if (collapseText.get() === 1) {
+        r0 = 0;
+      }
+      r23.opacity = _spring.withSpring(r0, _springPresets.SUBTLE_SPRING, "animate-always");
+    }
+    return r23;
+  };
+  r30.__closure = {
+    containerWidth: sharedValue,
+    withSpring: _spring.withSpring,
+    collapsed: collapseText,
+    SUBTLE_SPRING: _springPresets.SUBTLE_SPRING
+  };
+  r30.__workletHash = 493185281611;
+  r30.__initData = __initData2;
+  const animatedStyle = useAnimatedStyle(r30);
+  sharedValue3 = sharedValue;
+  collapseText2 = collapseText;
+  textCollapsed = void 0;
+  textCollapsed = useStyles2().textCollapsed;
+  const r45 = function() {
+    return collapseText2.get() === 0 ? {} : {
+      ...textCollapsed,
+      width: sharedValue3.get()
+    };
+  };
+  r45.__closure = {
+    collapsed: collapseText,
+    textCollapsed,
+    containerWidth: sharedValue
+  };
+  r45.__workletHash = 5824483783888;
+  r45.__initData = __initData3;
+  return <ReanimatedRexport.View style={[styles2.container, animatedStyle]} onLayout={workletCallback}>
+    <ReanimatedRexport.View style={useAnimatedStyle(r45)}>{children}</ReanimatedRexport.View>
+  </ReanimatedRexport.View>;
+};
+BaseTextButtonIcon = function BaseTextButtonIcon(props) {
+  const { icon, size, iconPosition, iconOpticalOffsetMargin } = props;
+  return <AnimatedComponent source={icon} style={[props.style, useIconSizeStyles(size), useStyles4(iconPosition, iconOpticalOffsetMargin).offset]} />;
+};
+Platform;
+useStyles = createStyles((a0, a1) => ({
+  grow: {
+    flexGrow: 1,
+    alignSelf: "stretch"
+  },
+  shrink: {
+    flexShrink: 1
+  },
+  buttonText: {
+    flexShrink: 1,
+    flexGrow: 0,
+    lineHeight: a1 != null ? ({
+      sm: a1,
+      md: a1 + 0.5,
+      lg: a1 + 1.9
+    })[a0] : void 0
+  },
+  icon: {
+    flexShrink: 0,
+    flexGrow: 0
+  },
+  iconLeft: {
+    paddingLeft: 4
+  },
+  iconRight: {
+    paddingRight: 4
+  },
+  expressiveButtonContainer: {
+    position: "relative"
+  }
+}));
+useStyles2 = createStyles({
+  container: {
+    flexDirection: "row",
+    alignItems: "center",
+    position: "relative"
+  },
+  textCollapsed: {
+    position: "absolute",
+    left: 0
+  }
+});
+useStyles3 = createStyles({
+  entityWrapper: {
+    borderWidth: 1,
+    borderRadius: Module712.radii.round,
+    borderColor: Module712.colors.BORDER_SUBTLE,
+    overflow: "hidden"
+  }
+});
+AnimatedComponent = ReanimatedRexport.createAnimatedComponent(Icon);
+context = createContext("md");
+__initData = {
+  code: "function BaseTextButtonNativeTsx1({nativeEvent:nativeEvent}){const{containerWidth}=this.__closure;if(containerWidth.get()!==0)return;const{width:width}=nativeEvent.layout;containerWidth.set(width);}"
+};
+__initData2 = {
+  code: "function BaseTextButtonNativeTsx2(){const{containerWidth,withSpring,collapsed,SUBTLE_SPRING}=this.__closure;if(containerWidth.get()===0)return{};return{width:withSpring(collapsed.get()===1?0:containerWidth.get(),SUBTLE_SPRING,'animate-always'),opacity:withSpring(collapsed.get()===1?0:1,SUBTLE_SPRING,'animate-always')};}"
+};
+__initData3 = {
+  code: "function BaseTextButtonNativeTsx3(){const{collapsed,textCollapsed,containerWidth}=this.__closure;if(collapsed.get()===0)return{};return{...textCollapsed,width:containerWidth.get()};}"
+};
+useStyles4 = createStyles((a0, a1) => {
+  if (a1 === 0) {
+    return {
+      offset: {}
+    };
+  }
+  if (a0 === "start") {
+    return {
+      offset: {
+        marginLeft: a1
+      }
+    };
+  }
+  if (a0 === "end") {
+    return {
+      offset: {
+        marginRight: a1
+      }
+    };
+  }
+  return {
+    offset: {}
+  };
+});
+LARGE_BUTTON_HEIGHT;
+const top = Math.max((MINIMUM_HIT_AREA - SMALL_BUTTON_HEIGHT) / 2, 0);
+LARGE_BUTTON_HEIGHT;
+const top2 = Math.max((MINIMUM_HIT_AREA - MEDIUM_BUTTON_HEIGHT) / 2, 0);
+const top3 = Math.max((MINIMUM_HIT_AREA - LARGE_BUTTON_HEIGHT) / 2, 0);
+c2803_19 = {
+  sm: {
+    top,
+    left: void 0,
+    right: void 0,
+    bottom: top
+  },
+  md: {
+    top: top2,
+    left: void 0,
+    right: void 0,
+    bottom: top2
+  },
+  lg: {
+    top: top3,
+    left: void 0,
+    right: void 0,
+    bottom: top3
+  }
+};
+getTextPlatformLineHeight = (a0, a1) => {};
+const r125 = {
+  ...forwardRef(function(a0, a1) {
+    const { style, pillStyle, text } = a0;
+    let textElement = a0.textElement;
+    const { size = DEFAULT_BUTTON_SIZE, loading, icon, iconPosition: iconPosition2 = "start", iconOpticalOffsetMargin: iconOpticalOffsetMargin2 = 0, grow } = a0;
+    let r34 = grow !== void 0 && grow;
+    const shrink = a0.shrink;
+    let r33 = shrink !== void 0 && shrink;
+    const { collapseText: collapseText3, accessibilityRole: accessibilityRole2 = "button" } = a0;
+    let accessibilityLabel = a0.accessibilityLabel;
+    const { maxFontSizeMultiplier = BUTTON_DEFAULT_MAX_FONT_SIZE_MULTIPLIER, shiny: shiny2 = false, onPressIn, onPressOut, onLayout } = a0;
+    let r10 = MobileVisualRefreshExperiment("BaseTextButton");
+    const r40 = TextStyleSheet[a0.textVariant != null ? a0.textVariant : getButtonDefaultTextVariant(size)];
+    const styles = useStyles(size, r40.fontSize);
+    const hitSlop = c2803_19[size];
+    const enabled = useContext(AccessibilityPreferencesContext).reducedMotion.enabled;
+    let variant = a0.variant;
+    if (variant == null) {
+      variant = "primary";
+    }
+    if (r10) {
+      r10 = variant === "tertiary";
+    }
+    if (r10) {
+      variant = "secondary";
+    }
+    const sharedValue4 = useSharedValue(0);
+    const r88 = variant.startsWith("expressive");
+    let c14344_4 = r88;
+    const ref = useRef(null);
+    const ref2 = useRef({
+      width: 0,
+      height: 0
+    });
+    const [state, setState] = useState({
+      pressed: false,
+      posx: 0,
+      posy: 0
+    });
+    const callback = useCallback((a0) => {
+      if (onLayout != null) {
+        onLayout(a0);
+      }
+      if (c14344_4) {
+        const layout = a0.nativeEvent.layout;
+        ref2.current = {
+          width: layout.width,
+          height: layout.height
+        };
+      }
+    }, [onLayout, r88]);
+    const callback2 = useCallback((a0) => {
+      if (onPressIn != null) {
+        onPressIn(a0);
+      }
+      if (c14344_4) {
+        if (enabled) {
+          const current2 = ref.current;
+          if (current2 != null) {
+            current2.play();
+          }
+        } else {
+          const nativeEvent = a0.nativeEvent;
+          const { locationX, locationY } = nativeEvent;
+          const current = ref2.current;
+          setState({
+            pressed: true,
+            posx: locationX - current.width / 2,
+            posy: locationY - current.height / 2
+          });
+        }
+        triggerHapticFeedback(HapticFeedbackTypes.IMPACT_HEAVY);
+      }
+    }, [r88, onPressIn, enabled]);
+    const callback3 = useCallback((a0) => {
+      if (onPressOut != null) {
+        onPressOut(a0);
+      }
+      if (c14344_4) {
+        setState((prevState) => ({
+          ...prevState,
+          pressed: false
+        }));
+        triggerHapticFeedback(HapticFeedbackTypes.IMPACT_MEDIUM);
+      }
+    }, [r88, onPressOut]);
+    const styles2 = useButtonTextColorStyles(variant);
+    const variant2 = variant;
+    const r115 = icon == null ? {} : iconPosition2 === "start" ? styles.iconLeft : styles.iconRight;
+    const r118 = icon != null ? isValidElement(icon) ? icon : <BaseTextButtonIcon icon={icon} size={size} style={[styles.icon, {
+      tintColor: styles2.color
+    }]} iconOpticalOffsetMargin={iconOpticalOffsetMargin2} iconPosition={iconPosition2} /> : <BaseTextButtonIcon icon={icon} size={size} style={[styles.icon, {
+      tintColor: styles2.color
+    }]} iconOpticalOffsetMargin={iconOpticalOffsetMargin2} iconPosition={iconPosition2} />;
+    if (textElement == null) {
+      textElement = <Text maxFontSizeMultiplier={maxFontSizeMultiplier} numberOfLines={1} style={[styles.buttonText, r40, styles2, r115]}>{text}</Text>;
+    }
+    if (r34) {
+      r34 = styles.grow;
+    }
+    const style2 = [r34, , , ,];
+    if (r33) {
+      r33 = styles.shrink;
+    }
+    style2[1] = r33;
+    style2[2] = style;
+    style2[3] = r88 && styles.expressiveButtonContainer;
+    const pointerEvents = r88 ? "box-only" : a0.pointerEvents;
+    if (accessibilityLabel == null) {
+      accessibilityLabel = getNodeText(text);
+    }
+    return <BaseButton ref={a1} {...a0} onPressIn={callback2} onPressOut={callback3} onLayout={callback} style={style2} pointerEvents={pointerEvents} pressed={sharedValue4} accessibilityRole={accessibilityRole2} accessibilityLabel={accessibilityLabel} hitSlop={hitSlop}>
+      <ButtonPill variant={variant2} size={size} loading={loading} pressed={sharedValue4} style={pillStyle} shiny={shiny2} expressiveRiveRef={r88 ? ref : void 0} expressivePressState={r88 ? state : void 0}>
+        <context.Provider value={size}>
+          {icon != null && iconPosition2 === "start" && r118}
+          {collapseText3 !== void 0 ? <CollapsingText collapseText={collapseText3}>{textElement}</CollapsingText> : textElement}
+          {icon != null && iconPosition2 === "end" && r118}
+        </context.Provider>
+      </ButtonPill>
+    </BaseButton>;
+  }),
+  Icon: function TextButtonIcon(props) {
+    const { source, variant = "icon", disableColor = true } = props;
+    const context2 = useContext(context);
+    const styles3 = useStyles3();
+    const r22 = <AnimatedComponent source={source} disableColor={disableColor} style={useIconSizeStyles(context2)} />;
+    return variant === "entity" ? <View style={styles3.entityWrapper}>{r22}</View> : r22;
+  }
+};
+export { r125 as BaseTextButton };

design/components/Button/native/Button.native.tsx

@@ -0,0 +1,3 @@
+// Metro module 4600 (f4601).
+import { BaseTextButton } from "./BaseTextButton.native";
+export const Button = BaseTextButton;

design/components/Button/native/ButtonConstants.native.tsx

@@ -0,0 +1,37 @@
+// Metro module 4604 (f4605).
+import { IconSizes, getIconSize } from "../../../void/Icon/native/Icon";
+import Module712 from "../../../../_bundle/Module712";
+const SMALL = IconSizes.SMALL;
+const SMALL_20 = IconSizes.SMALL_20;
+const MEDIUM = IconSizes.MEDIUM;
+const MEDIUM2 = IconSizes.MEDIUM;
+const r2 = 32 - getIconSize(SMALL);
+const r3 = 40 - getIconSize(SMALL_20);
+const r1 = 48 - getIconSize(MEDIUM);
+export const MINIMUM_HIT_AREA = 44;
+export const SMALL_BUTTON_HEIGHT = 32;
+export const MEDIUM_BUTTON_HEIGHT = 40;
+export const LARGE_BUTTON_HEIGHT = 48;
+export const FAB_BUTTON_SIZE = 56;
+export const BUTTON_BORDER_WIDTH = 1;
+export const DEFAULT_BUTTON_SIZE = "md";
+export { SMALL as SMALL_BUTTON_ICON_SIZE };
+export { SMALL_20 as MEDIUM_BUTTON_ICON_SIZE };
+export { MEDIUM as LARGE_BUTTON_ICON_SIZE };
+export { MEDIUM2 as FAB_BUTTON_ICON_SIZE };
+export const SMALL_BUTTON_HORIZONTAL_PADDING = 12;
+export const MEDIUM_BUTTON_HORIZONTAL_PADDING = 20;
+export const LARGE_BUTTON_HORIZONTAL_PADDING = 24;
+export const SMALL_BUTTON_PADDING = (r2 - 2) / 2;
+export const MEDIUM_BUTTON_PADDING = (r3 - 2) / 2;
+export const LARGE_BUTTON_PADDING = (r1 - 2) / 2;
+export const BUTTON_DEFAULT_MAX_FONT_SIZE_MULTIPLIER = 3;
+export function getButtonDefaultTextVariant(a0) {
+  return a0 === "lg" ? "text-md/semibold" : "text-sm/semibold";
+}
+export function getButtonPadding(a0, a1) {
+  return (a0 - getIconSize(a1) - 2) / 2;
+}
+export function getButtonBorderRadius(a0) {
+  return a0 === "lg" ? Module712.modules.button.BORDER_RADIUS_LG : Module712.modules.button.BORDER_RADIUS;
+}

design/components/Button/native/ButtonEllipsis.native.tsx

@@ -0,0 +1,98 @@
+// Metro module 4615 (f4616).
+import * as _ReanimatedRexport from "../../../../modules/reanimated/ReanimatedRexport";
+import ReanimatedRexport, { useSharedValue, cancelAnimation, useAnimatedStyle, Easing } from "../../../../modules/reanimated/ReanimatedRexport";
+import { createStyles } from "../../Styles/native/createStyles";
+import Module712 from "../../../../_bundle/Module712";
+import * as _timing from "../../../animation/reanimated/timing/timing";
+import { useForegroundColor } from "./ButtonHooks.native";
+import { useMountLayoutEffect } from "../../../../hooks/useMountEffect";
+let c2814_5, useStyles, withEllipsisAnimation, __initData;
+const EllipsisCircle = function EllipsisCircle(props) {
+  const { variant, size, offset } = props;
+  const styles = useStyles(size, offset, useForegroundColor(variant));
+  const sharedValue = useSharedValue(0.4);
+  const sharedValue2 = useSharedValue(0.75);
+  useMountLayoutEffect(() => {
+    sharedValue.set(_ReanimatedRexport.withDelay(166.66666666666666 * offset, _ReanimatedRexport.withRepeat(_timing.withTiming(1, c2814_5, "animate-always"), -1, true)));
+    sharedValue2.set(_ReanimatedRexport.withDelay(166.66666666666666 * offset, _ReanimatedRexport.withRepeat(_timing.withTiming(1, c2814_5, "animate-always"), -1, true)));
+    return () => {
+      cancelAnimation(sharedValue);
+      cancelAnimation(sharedValue2);
+    };
+  });
+  const w = () => ({
+    opacity: sharedValue.get(),
+    transform: [{
+      scale: sharedValue2.get()
+    }]
+  });
+  w.__closure = {
+    opacity: sharedValue,
+    scale: sharedValue2
+  };
+  w.__workletHash = 13371762734705;
+  w.__initData = __initData;
+  return <ReanimatedRexport.View style={[styles.circle, useAnimatedStyle(w)]} />;
+};
+c2814_5 = {
+  duration: 500,
+  easing: Easing.inOut(Easing.quad)
+};
+useStyles = createStyles((a0, a1, a2) => {
+  let r0, width;
+  L7: {
+    if (a0 === "lg") {
+      r0 = 4;
+      width = 8;
+    } else {
+      if (a0 !== "md" && a0 !== "sm") {
+        r0 = 4;
+        width = void 0;
+        if (a0 !== "xs") {
+          break L7;
+        }
+        r0 = 3;
+        width = 5;
+        break L7;
+      }
+      r0 = 4;
+      width = 6;
+    }
+  }
+  return {
+    circle: {
+      width,
+      height: width,
+      borderRadius: Module712.radii.round,
+      marginEnd: a1 !== 2 ? r0 : 0,
+      backgroundColor: a2
+    }
+  };
+});
+const withEllipsisAnimation2 = function withEllipsisAnimation(a0, a1) {
+  return _ReanimatedRexport.withDelay(166.66666666666666 * a0, _ReanimatedRexport.withRepeat(_timing.withTiming(a1, c2814_5, "animate-always"), -1, true));
+};
+withEllipsisAnimation2.__closure = {
+  ELLIPSIS_APPEAR_DURATION: 500,
+  withDelay: _ReanimatedRexport.withDelay,
+  withRepeat: _ReanimatedRexport.withRepeat,
+  withTiming: _timing.withTiming,
+  ELLIPSIS_APPEAR_TIMING: c2814_5
+};
+withEllipsisAnimation2.__workletHash = 2181731162311;
+withEllipsisAnimation2.__initData = {
+  code: "function withEllipsisAnimation_ButtonEllipsisNativeTsx1(offset,value){const{ELLIPSIS_APPEAR_DURATION,withDelay,withRepeat,withTiming,ELLIPSIS_APPEAR_TIMING}=this.__closure;const animationTimeMs=ELLIPSIS_APPEAR_DURATION;const animationStaggerTimeMs=animationTimeMs/3;return withDelay(offset*animationStaggerTimeMs,withRepeat(withTiming(value,ELLIPSIS_APPEAR_TIMING,'animate-always'),-1,true));}"
+};
+withEllipsisAnimation = withEllipsisAnimation2;
+__initData = {
+  code: "function ButtonEllipsisNativeTsx2(){const{opacity,scale}=this.__closure;return{opacity:opacity.get(),transform:[{scale:scale.get()}]};}"
+};
+export function Ellipsis(props) {
+  return <ReanimatedRexport.View style={{
+    flexDirection: "row"
+  }}>
+    <EllipsisCircle offset={0} {...props} />
+    <EllipsisCircle offset={1} {...props} />
+    <EllipsisCircle offset={2} {...props} />
+  </ReanimatedRexport.View>;
+}

design/components/Button/native/ButtonHooks.native.tsx

@@ -0,0 +1,419 @@
+// Metro module 4605 (f4606).
+import { useMemo, useCallback } from "react";
+import { experimental_createToken, createStyleProperties } from "../../Styles/native/createStyles";
+import { useThemeContext } from "../../../../_bundle/Module3901";
+import Module712 from "../../../../_bundle/Module712";
+import { useToken } from "../../../tokens/native/useToken";
+import * as _ReanimatedRexport from "../../../../modules/reanimated/ReanimatedRexport";
+import { useAnimatedStyle, useSharedValue } from "../../../../modules/reanimated/ReanimatedRexport";
+import * as _spring from "../../../animation/reanimated/spring/spring";
+import * as _springPresets from "../../../animation/reanimated/spring/springPresets";
+import * as _ButtonConstants_native from "./ButtonConstants.native";
+import { MEDIUM_BUTTON_ICON_SIZE, SMALL_BUTTON_ICON_SIZE, LARGE_BUTTON_ICON_SIZE, getButtonDefaultTextVariant } from "./ButtonConstants.native";
+import { useFontScale } from "../../../../modules/screen/native/useFontScale";
+import { getIconSize } from "../../../void/Icon/native/Icon";
+import { TextStyleSheet } from "../../Text/native/Text";
+import { isAndroid } from "../../../../utils/PlatformUtils";
+function $mk74814($env) {
+  return () => {
+    const r6 = $env;
+    const r8 = r6[1];
+    if (r8 == null) {
+      return null;
+    }
+    const r4 = r6[0];
+    if (r4 === "primary") {
+      const r83 = $env.$parent;
+      const WHITE = (0, r83[1])(r83[2][3]).unsafe_rawColors.WHITE;
+      const contrastingColor = (0, r83[0])(r83[2][2]).getContrastingColor(r8, {
+        base: WHITE,
+        contrastRatio: (0, r83[0])(r83[2][2]).WCAGContrastRatios.HighContrastText
+      });
+      const r110 = (0, r83[0])(r83[2][2]).darkenColor(contrastingColor, 0.5);
+      return {
+        backgroundColor: [contrastingColor, r110],
+        borderColor: [contrastingColor, r110],
+        color: WHITE
+      };
+    }
+    if (r4 === "secondary") {
+      const r46 = $env.$parent;
+      const r51 = (0, r46[0])(r46[2][4]);
+      const r53 = r6[2];
+      const isThemeLight3 = r51.isThemeLight(r53);
+      const r58 = (0, r46[0])(r46[2][2]);
+      const backgroundColor = [isThemeLight3 ? r58.setColorOpacity("white", 0.72) : r58.setColorOpacity("white", 0.24), ,];
+      const isThemeLight4 = (0, r46[0])(r46[2][4]).isThemeLight(r53);
+      const r74 = (0, r46[0])(r46[2][2]);
+      backgroundColor[1] = isThemeLight4 ? r74.setColorOpacity("white", 0.62) : r74.setColorOpacity("white", 0.34);
+      return {
+        backgroundColor,
+        borderColor: [r46[4], r46[4]],
+        color: void 0
+      };
+    }
+    if (r4 === "tertiary") {
+      const r5 = $env.$parent;
+      const r16 = (0, r5[0])(r5[2][4]);
+      const r9 = r6[2];
+      const isThemeLight = r16.isThemeLight(r9);
+      const r21 = (0, r5[0])(r5[2][2]);
+      const r10 = isThemeLight ? r21.setColorOpacity(r8, 0.4) : r21.setColorOpacity("white", 0.1);
+      const isThemeLight2 = (0, r5[0])(r5[2][4]).isThemeLight(r9);
+      const r35 = (0, r5[0])(r5[2][2]);
+      return {
+        backgroundColor: [r10, isThemeLight2 ? r35.darkenColor(r10, 0.3) : r35.setColorOpacity("white", 0.2)],
+        borderColor: [r5[4], r5[4]],
+        color: void 0
+      };
+    }
+    return null;
+  };
+}
+function $mk74815($env) {
+  return function n() {
+    const r9 = $env;
+    const r4 = r9[1];
+    const r6 = r4.get() > 0 ? (r4.get() - r9[2]) / r4.get() : 1;
+    const r19 = $env.$parent;
+    const r5 = r19[0];
+    const r20 = r19[2];
+    return {
+      transform: [{
+        scale: r5(r20[7]).withSpring(r5(r20[6]).interpolate(r9[0].get(), [0, 1], [1, r6]), r5(r20[8]).ON_PRESS_SPRING, "animate-always")
+      }]
+    };
+  };
+}
+let c2806_6, c2806_7, c2806_8, c2806_9, c2806_10;
+let env2806 = {};
+const c2806_4 = "rgba(0,0,0,0.001)";
+const c2806_5 = experimental_createToken(() => "#161CBB");
+c2806_6 = experimental_createToken(() => "#1318A0");
+c2806_7 = {
+  primary: Module712.colors.CONTROL_PRIMARY_TEXT_DEFAULT,
+  "experimental_welcome-secondary": Module712.unsafe_rawColors.WHITE,
+  secondary: Module712.colors.CONTROL_SECONDARY_TEXT_DEFAULT,
+  tertiary: Module712.colors.REDESIGN_BUTTON_TERTIARY_TEXT,
+  destructive: Module712.colors.CONTROL_CRITICAL_PRIMARY_TEXT_DEFAULT,
+  "critical-primary": Module712.colors.CONTROL_CRITICAL_PRIMARY_TEXT_DEFAULT,
+  "critical-secondary": Module712.colors.CONTROL_CRITICAL_SECONDARY_TEXT_DEFAULT,
+  active: Module712.colors.CONTROL_CONNECTED_TEXT_DEFAULT,
+  "primary-overlay": Module712.colors.CONTROL_OVERLAY_PRIMARY_TEXT_DEFAULT,
+  "secondary-overlay": Module712.colors.CONTROL_OVERLAY_SECONDARY_TEXT_DEFAULT,
+  "experimental_premium-primary": Module712.colors.WHITE,
+  "experimental_premium-basic": Module712.colors.WHITE,
+  "experimental_premium-secondary": Module712.colors.TEXT_BRAND,
+  "icon-only": Module712.colors.CONTROL_ICON_ONLY_ICON_DEFAULT,
+  expressive: Module712.colors.CONTROL_EXPRESSIVE_TEXT_DEFAULT
+};
+const styleProperties = createStyleProperties((a0) => {
+  switch (a0) {
+    case "primary":
+      return {
+        backgroundInactive: Module712.colors.CONTROL_PRIMARY_BACKGROUND_DEFAULT,
+        backgroundPressed: Module712.colors.CONTROL_PRIMARY_BACKGROUND_ACTIVE,
+        borderInactive: Module712.colors.CONTROL_PRIMARY_BORDER_DEFAULT,
+        borderPressed: Module712.colors.CONTROL_PRIMARY_BORDER_ACTIVE
+      };
+    case "secondary":
+      return {
+        backgroundInactive: Module712.colors.CONTROL_SECONDARY_BACKGROUND_DEFAULT,
+        backgroundPressed: Module712.colors.CONTROL_SECONDARY_BACKGROUND_ACTIVE,
+        borderInactive: Module712.colors.CONTROL_SECONDARY_BORDER_DEFAULT,
+        borderPressed: Module712.colors.CONTROL_SECONDARY_BORDER_ACTIVE
+      };
+    case "tertiary":
+      return {
+        backgroundInactive: Module712.colors.REDESIGN_BUTTON_TERTIARY_BACKGROUND,
+        backgroundPressed: Module712.colors.REDESIGN_BUTTON_TERTIARY_PRESSED_BACKGROUND,
+        borderInactive: c2806_4,
+        borderPressed: c2806_4
+      };
+    case "critical-primary":
+    case "destructive":
+      return {
+        backgroundInactive: Module712.colors.CONTROL_CRITICAL_PRIMARY_BACKGROUND_DEFAULT,
+        backgroundPressed: Module712.colors.CONTROL_CRITICAL_PRIMARY_BACKGROUND_ACTIVE,
+        borderInactive: Module712.colors.CONTROL_CRITICAL_PRIMARY_BORDER_DEFAULT,
+        borderPressed: Module712.colors.CONTROL_CRITICAL_PRIMARY_BORDER_ACTIVE
+      };
+    case "critical-secondary":
+      return {
+        backgroundInactive: Module712.colors.CONTROL_CRITICAL_SECONDARY_BACKGROUND_DEFAULT,
+        backgroundPressed: Module712.colors.CONTROL_CRITICAL_SECONDARY_BACKGROUND_ACTIVE,
+        borderInactive: Module712.colors.CONTROL_CRITICAL_SECONDARY_BORDER_DEFAULT,
+        borderPressed: Module712.colors.CONTROL_CRITICAL_SECONDARY_BORDER_ACTIVE
+      };
+    case "active":
+      return {
+        backgroundInactive: Module712.colors.CONTROL_CONNECTED_BACKGROUND_DEFAULT,
+        backgroundPressed: Module712.colors.CONTROL_CONNECTED_BACKGROUND_ACTIVE,
+        borderInactive: Module712.colors.CONTROL_CONNECTED_BORDER_DEFAULT,
+        borderPressed: Module712.colors.CONTROL_CONNECTED_BORDER_ACTIVE
+      };
+    case "experimental_premium-secondary":
+    case "primary-overlay":
+      return {
+        backgroundInactive: Module712.colors.CONTROL_OVERLAY_PRIMARY_BACKGROUND_DEFAULT,
+        backgroundPressed: Module712.colors.CONTROL_OVERLAY_PRIMARY_BACKGROUND_ACTIVE,
+        borderInactive: c2806_4,
+        borderPressed: c2806_4
+      };
+    case "secondary-overlay":
+      return {
+        backgroundInactive: Module712.colors.CONTROL_OVERLAY_SECONDARY_BACKGROUND_DEFAULT,
+        backgroundPressed: Module712.colors.CONTROL_OVERLAY_SECONDARY_BACKGROUND_ACTIVE,
+        borderInactive: c2806_4,
+        borderPressed: c2806_4
+      };
+    case "experimental_welcome-secondary":
+      return {
+        backgroundInactive: c2806_5,
+        backgroundPressed: c2806_6,
+        borderInactive: c2806_4,
+        borderPressed: c2806_4
+      };
+    case "experimental_premium-primary":
+    case "experimental_premium-basic":
+      return {
+        backgroundInactive: c2806_4,
+        backgroundPressed: Module712.colors.REDESIGN_BUTTON_PREMIUM_PRIMARY_PRESSED_BACKGROUND,
+        borderInactive: c2806_4,
+        borderPressed: c2806_4
+      };
+    case "icon-only":
+      return {
+        backgroundInactive: c2806_4,
+        backgroundPressed: Module712.colors.CONTROL_ICON_ONLY_BACKGROUND_ACTIVE,
+        borderInactive: c2806_4,
+        borderPressed: c2806_4
+      };
+    case "expressive":
+      return {
+        backgroundInactive: c2806_4,
+        backgroundPressed: c2806_4,
+        borderInactive: c2806_4,
+        borderPressed: c2806_4
+      };
+    default:
+      return void 0;
+  }
+});
+c2806_8 = styleProperties;
+c2806_9 = {
+  code: "function ButtonHooksNativeTsx1(){const{themedStyles,colors,interpolateColor,pressed}=this.__closure;var _themedStyles$backgro,_themedStyles,_themedStyles$borderC,_themedStyles2;const backgroundColor=(_themedStyles$backgro=(_themedStyles=themedStyles)===null||_themedStyles===void 0?void 0:_themedStyles.backgroundColor)!==null&&_themedStyles$backgro!==void 0?_themedStyles$backgro:[colors.backgroundInactive,colors.backgroundPressed];const borderColor=(_themedStyles$borderC=(_themedStyles2=themedStyles)===null||_themedStyles2===void 0?void 0:_themedStyles2.borderColor)!==null&&_themedStyles$borderC!==void 0?_themedStyles$borderC:[colors.borderInactive,colors.borderPressed];return{backgroundColor:interpolateColor(pressed.get(),[0,1],backgroundColor),borderColor:interpolateColor(pressed.get(),[0,1],borderColor)};}"
+};
+c2806_10 = {
+  code: "function ButtonHooksNativeTsx2(){const{width,scaleAmountInPx,withSpring,interpolate,pressed,ON_PRESS_SPRING}=this.__closure;const scale=width.get()>0?(width.get()-scaleAmountInPx)/width.get():1;return{transform:[{scale:withSpring(interpolate(pressed.get(),[0,1],[1,scale]),ON_PRESS_SPRING,'animate-always')}]};}"
+};
+export const SAFE_TRANSPARENT_COLOR = "rgba(0,0,0,0.001)";
+export function useProfileThemedButtonStyles(a0) {
+  let env14345;
+  const r1 = env14345 = {
+    $parent: env2806
+  };
+  env14345[0] = a0;
+  const themeContext = useThemeContext();
+  const primaryColor = themeContext.primaryColor;
+  env14345[1] = primaryColor;
+  const theme = themeContext.theme;
+  env14345[2] = theme;
+  return useMemo($mk74814(r1), [theme, primaryColor, a0]);
+}
+export function useForegroundColor(a0) {
+  return useToken(c2806_7[a0]);
+}
+export { styleProperties as useButtonColorStyles };
+export function useButtonTextColorStyles(a0) {
+  let env14346;
+  const r5 = env14346 = {
+    $parent: env2806
+  };
+  env14346[0] = a0;
+  const themeContext = useThemeContext();
+  const primaryColor = themeContext.primaryColor;
+  env14346[1] = primaryColor;
+  const theme = themeContext.theme;
+  env14346[2] = theme;
+  const memo2 = useMemo($mk74814(r5), [theme, primaryColor, a0]);
+  const token = useToken(c2806_7[a0]);
+  let color = memo2?.color;
+  if (color == null) {
+    color = token;
+  }
+  return {
+    color
+  };
+}
+export function useIconTintStyles(a0) {
+  let env14348;
+  const r5 = env14348 = {
+    $parent: env2806
+  };
+  env14348[0] = a0;
+  const themeContext = useThemeContext();
+  const primaryColor = themeContext.primaryColor;
+  env14348[1] = primaryColor;
+  const theme = themeContext.theme;
+  env14348[2] = theme;
+  const memo2 = useMemo($mk74814(r5), [theme, primaryColor, a0]);
+  const token = useToken(c2806_7[a0]);
+  let tintColor = memo2?.color;
+  if (tintColor == null) {
+    tintColor = token;
+  }
+  return {
+    tintColor
+  };
+}
+export function useGradientPillStyles(a0) {
+  return {
+    borderColor: c2806_8(a0).borderInactive
+  };
+}
+export function useButtonPillStyles(a0, a1) {
+  let env14350;
+  const r3 = env14350 = {
+    $parent: env2806
+  };
+  env14350[0] = a0;
+  const themeContext = useThemeContext();
+  const primaryColor = themeContext.primaryColor;
+  env14350[1] = primaryColor;
+  const theme = themeContext.theme;
+  env14350[2] = theme;
+  const memo = useMemo($mk74814(r3), [theme, primaryColor, a0]);
+  const colors = c2806_8(a0);
+  let c14349_2 = colors;
+  const r25 = function() {
+    let r12 = memo?.backgroundColor;
+    if (r12 == null) {
+      r12 = [c14349_2.backgroundInactive, c14349_2.backgroundPressed];
+    }
+    let r8 = memo?.borderColor;
+    if (r8 == null) {
+      r8 = [c14349_2.borderInactive, c14349_2.borderPressed];
+    }
+    return {
+      backgroundColor: _ReanimatedRexport.interpolateColor(a1.get(), [0, 1], r12),
+      borderColor: _ReanimatedRexport.interpolateColor(a1.get(), [0, 1], r8)
+    };
+  };
+  r25.__closure = {
+    themedStyles: memo,
+    colors,
+    interpolateColor: _ReanimatedRexport.interpolateColor,
+    pressed: a1
+  };
+  r25.__workletHash = 2383933325137;
+  r25.__initData = c2806_9;
+  return useAnimatedStyle(r25);
+}
+export function useButtonScaleStyles(a0, a1, a2) {
+  let env14347;
+  const r2 = env14347 = {
+    $parent: env2806
+  };
+  env14347[0] = a0;
+  env14347[1] = a1;
+  env14347[2] = a2;
+  const r13 = $mk74815(r2);
+  r13.__closure = {
+    width: a1,
+    scaleAmountInPx: a2,
+    withSpring: _spring.withSpring,
+    interpolate: _ReanimatedRexport.interpolate,
+    pressed: a0,
+    ON_PRESS_SPRING: _springPresets.ON_PRESS_SPRING
+  };
+  r13.__workletHash = 17256006845494;
+  r13.__initData = c2806_10;
+  return useAnimatedStyle(r13);
+}
+export function useButtonPressAnimationProps(a0, scaleAmountInPx = 8, r14) {
+  let c14351_0 = r14;
+  const r6 = arguments[3];
+  let c14351_1 = r6;
+  const r5 = arguments[4];
+  let c14351_2 = r5;
+  let pressed = useSharedValue(0);
+  if (a0 != null) {
+    pressed = a0;
+  }
+  let env14352;
+  let c14351_3 = pressed;
+  const sharedValue = useSharedValue(0);
+  const r25 = {
+    onPressIn: useCallback((a0) => {
+      c14351_3.set(1);
+      if (c14351_1 != null) {
+        c14351_1(a0);
+      }
+    }, [pressed, r6]),
+    onPressOut: useCallback((a0) => {
+      c14351_3.set(0);
+      if (c14351_2 != null) {
+        c14351_2(a0);
+      }
+    }, [pressed, r5]),
+    onLayout: useCallback((a0) => {
+      sharedValue.set(a0.nativeEvent.layout.width);
+      if (c14351_0 != null) {
+        c14351_0(a0);
+      }
+    }, [sharedValue, r14]),
+    style: null
+  };
+  const r34 = env14352 = {
+    $parent: env2806
+  };
+  env14352[0] = pressed;
+  env14352[1] = sharedValue;
+  env14352[2] = scaleAmountInPx;
+  const r38 = $mk74815(r34);
+  r38.__closure = {
+    width: sharedValue,
+    scaleAmountInPx,
+    withSpring: _spring.withSpring,
+    interpolate: _ReanimatedRexport.interpolate,
+    pressed,
+    ON_PRESS_SPRING: _springPresets.ON_PRESS_SPRING
+  };
+  r38.__workletHash = 17256006845494;
+  r38.__initData = c2806_10;
+  r25.style = useAnimatedStyle(r38);
+  return r25;
+}
+export const useIconSizeStyles = function(a0) {
+  let r8 = arguments[1];
+  if (r8 === void 0) {
+    r8 = false;
+  }
+  let c14353_1 = r8;
+  let r7 = arguments[2];
+  if (r7 === void 0) {
+    r7 = _ButtonConstants_native.BUTTON_DEFAULT_MAX_FONT_SIZE_MULTIPLIER;
+  }
+  const BUTTON_DEFAULT_MAX_FONT_SIZE_MULTIPLIER = r7;
+  const fontScale = useFontScale();
+  return useMemo(() => {
+    const iconSize = getIconSize(MEDIUM_BUTTON_ICON_SIZE);
+    let width = a0 === "sm" ? getIconSize(SMALL_BUTTON_ICON_SIZE) : a0 === "lg" ? getIconSize(LARGE_BUTTON_ICON_SIZE) : iconSize;
+    if (c14353_1) {
+      width = width;
+      if (fontScale > 1) {
+        const r39 = TextStyleSheet[getButtonDefaultTextVariant(a0)];
+        const r44 = isAndroid() ? r39.fontSize : r39.lineHeight;
+        width = width;
+        if (width != null) {
+          width = r44 != null ? Math.max(width, r44 * Math.min(fontScale, BUTTON_DEFAULT_MAX_FONT_SIZE_MULTIPLIER)) : width;
+        }
+      }
+    }
+    return {
+      width,
+      height: width
+    };
+  }, [a0, r8, BUTTON_DEFAULT_MAX_FONT_SIZE_MULTIPLIER, fontScale]);
+};

design/components/Button/native/ButtonPill.native.tsx

@@ -0,0 +1,241 @@
+// Metro module 4609 (f4610).
+import { useRef, useState, useEffect, useContext } from "react";
+import { StyleSheet, View } from "react-native";
+import { Fragment } from "react/jsx-runtime";
+import { DEFAULT_BUTTON_SIZE, getButtonPadding, SMALL_BUTTON_HEIGHT, SMALL_BUTTON_ICON_SIZE, MEDIUM_BUTTON_HEIGHT, MEDIUM_BUTTON_ICON_SIZE, LARGE_BUTTON_HEIGHT, LARGE_BUTTON_ICON_SIZE, SMALL_BUTTON_HORIZONTAL_PADDING, MEDIUM_BUTTON_HORIZONTAL_PADDING, LARGE_BUTTON_HORIZONTAL_PADDING, getButtonBorderRadius, BUTTON_BORDER_WIDTH } from "./ButtonConstants.native";
+import { createStyles } from "../../Styles/native/createStyles";
+import Module712 from "../../../../_bundle/Module712";
+import { useButtonPillStyles, useGradientPillStyles } from "./ButtonHooks.native";
+import { useThemeContext, ExpressiveButtonRive } from "../../../../_bundle/Module3901";
+import { useToken } from "../../../tokens/native/useToken";
+import { ButtonShine } from "./ButtonShine.native";
+import Module4611 from "../../../../_bundle/Module4611";
+import * as _ReanimatedRexport from "../../../../modules/reanimated/ReanimatedRexport";
+import ReanimatedRexport, { useAnimatedStyle } from "../../../../modules/reanimated/ReanimatedRexport";
+import { isThemeLight } from "../../../shared";
+import { Ellipsis } from "./ButtonEllipsis.native";
+import { AccessibilityPreferencesContext } from "../../../../_bundle/Module3908";
+import * as _spring from "../../../animation/reanimated/spring/spring";
+import * as _springPresets from "../../../animation/reanimated/spring/springPresets";
+let FADE_DELAY, buttonPadding, buttonPadding2, buttonPadding3, useStyles, BasicButtonPill, LoadingButtonPill, __initData, __initData2, useLoadingStyles;
+const PillWrapper = function PillWrapper(props) {
+  let props2;
+  const { children, variant, style, pressed, shiny = false, expressiveRiveRef, expressivePressState, size } = props;
+  const styles = useButtonPillStyles(variant, pressed);
+  const styles2 = useGradientPillStyles(variant);
+  const theme = useThemeContext().theme;
+  const styles3 = useStyles(variant, size);
+  let colors = [useToken(Module712.colors.REDESIGN_BUTTON_PREMIUM_PRIMARY_PURPLE_FOR_GRADIENT), useToken(Module712.colors.REDESIGN_BUTTON_PREMIUM_PRIMARY_PURPLE_FOR_GRADIENT_2), useToken(Module712.colors.REDESIGN_BUTTON_PREMIUM_PRIMARY_PINK_FOR_GRADIENT)];
+  const r66 = [Module712.unsafe_rawColors.PREMIUM_TIER_0_PURPLE_FOR_GRADIENTS, Module712.unsafe_rawColors.PREMIUM_TIER_0_BLUE_FOR_GRADIENTS_2, Module712.unsafe_rawColors.PREMIUM_TIER_0_BLUE_FOR_GRADIENTS];
+  const r10 = shiny ? <ButtonShine variant={variant} /> : null;
+  if (variant !== "experimental_premium-primary" && variant !== "experimental_premium-basic") {
+    props2 = {
+      children: [variant === "expressive" && <View style={[StyleSheet.absoluteFill, styles3.expressivePill]}>
+        <ExpressiveButtonRive withReducedMotion="short-loop" ref={expressiveRiveRef} fit="layout" artboard={isThemeLight(theme) ? "Mobile Expressive Button Lightmode" : "Mobile Expressive Button Dark Mode"} dataBinding={{
+          buttonColor: styles3.expressiveRiveFill.color,
+          cornerRadius: styles3.expressivePill.borderRadius,
+          ...expressivePressState
+        }} />
+      </View>, <ReanimatedRexport.View style={[style, styles]}>
+        {children}
+        {r10}
+      </ReanimatedRexport.View>]
+    };
+  } else {
+    if (variant === "experimental_premium-basic") {
+      colors = r66;
+    }
+    props2 = {
+      children: [<Module4611 start={{
+        x: 0,
+        y: 0
+      }} end={{
+        x: 1,
+        y: 0
+      }} style={[style, styles2, StyleSheet.absoluteFill]} colors={colors} />, <ReanimatedRexport.View style={[style, styles]}>
+        {children}
+        {r10}
+      </ReanimatedRexport.View>]
+    };
+  }
+  return <Fragment {...props2} />;
+};
+BasicButtonPill = function BasicButtonPill(props) {
+  const { children, style, pressed, variant = "primary", size = DEFAULT_BUTTON_SIZE, shiny = false, expressiveRiveRef, expressivePressState } = props;
+  const styles = useStyles(variant, size);
+  return <PillWrapper variant={variant} size={size} style={[styles.pill, style]} pressed={pressed} shiny={shiny} expressiveRiveRef={expressiveRiveRef} expressivePressState={expressivePressState}>
+    <View style={styles.childContainer}>{children}</View>
+  </PillWrapper>;
+};
+LoadingButtonPill = function LoadingButtonPill(props) {
+  const { children, style, pressed, variant = "primary", size = DEFAULT_BUTTON_SIZE, loading = false } = props;
+  let c14356_0 = loading;
+  let loaderSize = props.loaderSize;
+  const { expressiveRiveRef, expressivePressState } = props;
+  const styles = useStyles(variant, size);
+  const ref = useRef(null);
+  let [state, setState] = useState(loading);
+  useEffect(() => {
+    if (ref.current != null) {
+      clearTimeout(ref.current);
+    }
+    if (c14356_0) {
+      setState(true);
+    } else {
+      ref.current = setTimeout(() => {
+        setState(false);
+      }, 500);
+    }
+  }, [loading]);
+  const [r20, r39] = useLoadingStyles(loading, size);
+  const r54 = [<ReanimatedRexport.View style={[styles.childContainer, r20]}>{children}</ReanimatedRexport.View>, ,];
+  if (state) {
+    if (loaderSize == null) {
+      loaderSize = size;
+    }
+    state = <Ellipsis variant={variant} size={loaderSize} />;
+  }
+  r54[1] = <ReanimatedRexport.View style={[styles.ellipsis, r39]}>{state}</ReanimatedRexport.View>;
+  return <PillWrapper variant={variant} size={size} style={[styles.pill, style]} pressed={pressed} expressiveRiveRef={expressiveRiveRef} expressivePressState={expressivePressState}>{r54}</PillWrapper>;
+};
+useLoadingStyles = function useLoadingStyles(a0, size) {
+  const enabled = useContext(AccessibilityPreferencesContext).reducedMotion.enabled;
+  const offsetY = size === "lg" ? 18 : 12;
+  let c14357_2 = offsetY;
+  const r24 = function() {
+    let r29;
+    const opacity = _spring.withSpring(a0 ? 0 : 1, _springPresets.SUBTLE_SPRING, "animate-always");
+    const r19 = {
+      opacity: null,
+      transform: null
+    };
+    if (enabled) {
+      r19.opacity = a0 ? opacity : _ReanimatedRexport.withDelay(FADE_DELAY, opacity);
+      r19.transform = [{
+        translateY: 0
+      }];
+      r29 = r19;
+    } else {
+      r19.opacity = opacity;
+      r19.transform = [{
+        translateY: _spring.withSpring(a0 ? -1 * c14357_2 : 0, _springPresets.SUBTLE_SPRING)
+      }];
+      r29 = r19;
+    }
+    return r29;
+  };
+  r24.__closure = {
+    withSpring: _spring.withSpring,
+    loading: a0,
+    SUBTLE_SPRING: _springPresets.SUBTLE_SPRING,
+    useReducedMotion: enabled,
+    withDelay: _ReanimatedRexport.withDelay,
+    FADE_DELAY,
+    offsetY
+  };
+  r24.__workletHash = 9388603334085;
+  r24.__initData = __initData;
+  const r35 = [useAnimatedStyle(r24), ,];
+  const l = function l() {
+    let r29;
+    const opacity = _spring.withSpring(a0 ? 1 : 0, _springPresets.SUBTLE_SPRING, "animate-always");
+    const r20 = {
+      opacity: null,
+      transform: null
+    };
+    if (enabled) {
+      r20.opacity = a0 ? _ReanimatedRexport.withDelay(FADE_DELAY, opacity) : opacity;
+      r20.transform = [{
+        translateY: 0
+      }];
+      r29 = r20;
+    } else {
+      r20.opacity = opacity;
+      r20.transform = [{
+        translateY: _spring.withSpring(a0 ? 0 : c14357_2, _springPresets.SUBTLE_SPRING)
+      }];
+      r29 = r20;
+    }
+    return r29;
+  };
+  l.__closure = {
+    withSpring: _spring.withSpring,
+    loading: a0,
+    SUBTLE_SPRING: _springPresets.SUBTLE_SPRING,
+    useReducedMotion: enabled,
+    withDelay: _ReanimatedRexport.withDelay,
+    FADE_DELAY,
+    offsetY
+  };
+  l.__workletHash = 8255420825872;
+  l.__initData = __initData2;
+  r35[1] = useAnimatedStyle(l);
+  return r35;
+};
+FADE_DELAY = 300;
+buttonPadding = getButtonPadding(SMALL_BUTTON_HEIGHT, SMALL_BUTTON_ICON_SIZE);
+buttonPadding2 = getButtonPadding(MEDIUM_BUTTON_HEIGHT, MEDIUM_BUTTON_ICON_SIZE);
+buttonPadding3 = getButtonPadding(LARGE_BUTTON_HEIGHT, LARGE_BUTTON_ICON_SIZE);
+useStyles = createStyles((a0, a1) => {
+  const r6 = a1 === "sm" ? {
+    minHeight: SMALL_BUTTON_HEIGHT,
+    minWidth: SMALL_BUTTON_HEIGHT,
+    paddingHorizontal: SMALL_BUTTON_HORIZONTAL_PADDING,
+    paddingVertical: buttonPadding
+  } : a1 === "md" ? {
+    minHeight: MEDIUM_BUTTON_HEIGHT,
+    minWidth: MEDIUM_BUTTON_HEIGHT,
+    paddingHorizontal: MEDIUM_BUTTON_HORIZONTAL_PADDING,
+    paddingVertical: buttonPadding2
+  } : a1 === "lg" ? {
+    minHeight: LARGE_BUTTON_HEIGHT,
+    minWidth: LARGE_BUTTON_HEIGHT,
+    paddingHorizontal: LARGE_BUTTON_HORIZONTAL_PADDING,
+    paddingVertical: buttonPadding3
+  } : {};
+  const buttonBorderRadius = getButtonBorderRadius(a1);
+  return {
+    pill: {
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "center",
+      overflow: "hidden",
+      borderWidth: BUTTON_BORDER_WIDTH,
+      borderRadius: buttonBorderRadius,
+      ...r6
+    },
+    expressivePill: {
+      overflow: "hidden",
+      borderRadius: buttonBorderRadius
+    },
+    expressiveRiveFill: {
+      color: Module712.colors.CONTROL_EXPRESSIVE_BACKGROUND_DEFAULT
+    },
+    childContainer: {
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "center",
+      flexGrow: 1,
+      maxWidth: "100%"
+    },
+    ellipsis: {
+      position: "absolute",
+      height: "100%",
+      width: "100%",
+      justifyContent: "center",
+      alignItems: "center"
+    }
+  };
+});
+__initData = {
+  code: "function ButtonPillNativeTsx1(){const{withSpring,loading,SUBTLE_SPRING,useReducedMotion,withDelay,FADE_DELAY,offsetY}=this.__closure;const opacityTransition=withSpring(loading?0:1,SUBTLE_SPRING,'animate-always');if(useReducedMotion){return{opacity:loading?opacityTransition:withDelay(FADE_DELAY,opacityTransition),transform:[{translateY:0}]};}return{opacity:opacityTransition,transform:[{translateY:withSpring(loading?-1*offsetY:0,SUBTLE_SPRING)}]};}"
+};
+__initData2 = {
+  code: "function ButtonPillNativeTsx2(){const{withSpring,loading,SUBTLE_SPRING,useReducedMotion,withDelay,FADE_DELAY,offsetY}=this.__closure;const opacityTransition=withSpring(loading?1:0,SUBTLE_SPRING,'animate-always');if(useReducedMotion){return{opacity:loading?withDelay(FADE_DELAY,opacityTransition):opacityTransition,transform:[{translateY:0}]};}return{opacity:opacityTransition,transform:[{translateY:withSpring(loading?0:offsetY,SUBTLE_SPRING)}]};}"
+};
+export function ButtonPill(props) {
+  return props.loading == null ? <BasicButtonPill {...props} /> : <LoadingButtonPill {...props} />;
+}
+export { BasicButtonPill };
+export { LoadingButtonPill };
+export { useLoadingStyles };

design/components/Button/native/ButtonShine.native.tsx

@@ -0,0 +1,101 @@
+// Metro module 4610 (f4611).
+import { useContext, useState } from "react";
+import { useButtonTextColorStyles } from "./ButtonHooks.native";
+import Module689 from "../../../../_bundle/Module689";
+import { AccessibilityPreferencesContext } from "../../../shared";
+import * as _ReanimatedRexport from "../../../../modules/reanimated/ReanimatedRexport";
+import ReanimatedRexport, { useAnimatedStyle } from "../../../../modules/reanimated/ReanimatedRexport";
+import * as _timing from "../../../animation/reanimated/timing/timing";
+import { createStyles } from "../../Styles/native/createStyles";
+let __initData;
+const useShineEffectStyles = function useShineEffectStyles(state, variant) {
+  const backgroundColor = Module689(useButtonTextColorStyles(variant).color).alpha(0.1).hex();
+  const enabled = useContext(AccessibilityPreferencesContext).reducedMotion.enabled;
+  const r32 = function() {
+    let r40;
+    if (state == null) {
+      r40 = {
+        transform: [{
+          translateX: -120
+        }]
+      };
+    } else {
+      const r4 = {
+        transform: null
+      };
+      const r6 = {
+        translateX: null
+      };
+      if (enabled) {
+        r6.translateX = (state - 56) / 2;
+        r4.transform = [r6];
+        r40 = r4;
+      } else {
+        r6.translateX = _ReanimatedRexport.withRepeat(_ReanimatedRexport.withSequence(_timing.withTiming(-120, {
+          duration: 0
+        }, "animate-always"), _ReanimatedRexport.withDelay(750, _timing.withTiming(state + 120, {
+          duration: 2000
+        }, "animate-always"))), -1);
+        r4.transform = [r6];
+        r40 = r4;
+      }
+    }
+    return r40;
+  };
+  r32.__closure = {
+    width: state,
+    SHINE_OFFSCREEN_OFFSET: 120,
+    useReducedMotion: enabled,
+    SHINE_WIDTH: 56,
+    withRepeat: _ReanimatedRexport.withRepeat,
+    withSequence: _ReanimatedRexport.withSequence,
+    withTiming: _timing.withTiming,
+    withDelay: _ReanimatedRexport.withDelay,
+    SHINE_INITIAL_ANIMATION_DELAY: 750,
+    SHINE_ANIMATION_DURATION: 2000
+  };
+  r32.__workletHash = 15814138938406;
+  r32.__initData = __initData;
+  const animatedStyle = useAnimatedStyle(r32);
+  return {
+    shineStyles: createStyles({
+      shineContainer: {
+        width: "100%",
+        height: "200%",
+        position: "absolute",
+        overflow: "hidden"
+      },
+      shine: {
+        width: 56,
+        height: "500%",
+        transform: [{
+          rotate: "30deg"
+        }],
+        backgroundColor,
+        top: "-100%",
+        alignItems: "center"
+      },
+      shineInner: {
+        width: 16,
+        height: "100%",
+        backgroundColor
+      }
+    })(),
+    shineAnimatedStyle: animatedStyle
+  };
+};
+__initData = {
+  code: "function ButtonShineNativeTsx1(){const{width,SHINE_OFFSCREEN_OFFSET,useReducedMotion,SHINE_WIDTH,withRepeat,withSequence,withTiming,withDelay,SHINE_INITIAL_ANIMATION_DELAY,SHINE_ANIMATION_DURATION}=this.__closure;if(width==null){return{transform:[{translateX:-SHINE_OFFSCREEN_OFFSET}]};}if(useReducedMotion){const centerOffset=(width-SHINE_WIDTH)/2;return{transform:[{translateX:centerOffset}]};}return{transform:[{translateX:withRepeat(withSequence(withTiming(-SHINE_OFFSCREEN_OFFSET,{duration:0},'animate-always'),withDelay(SHINE_INITIAL_ANIMATION_DELAY,withTiming(width+SHINE_OFFSCREEN_OFFSET,{duration:SHINE_ANIMATION_DURATION},'animate-always'))),-1)}]};}"
+};
+export { useShineEffectStyles };
+export function ButtonShine(props) {
+  const variant = props.variant;
+  const [state, setState] = useState(null);
+  const styles = useShineEffectStyles(state, variant);
+  const shineStyles = styles.shineStyles;
+  return <ReanimatedRexport.View onLayout={(event) => setState(event.nativeEvent.layout.width)} style={[shineStyles.shineContainer, styles.shineAnimatedStyle]}>
+    <ReanimatedRexport.View style={shineStyles.shine}>
+      <ReanimatedRexport.View style={shineStyles.shineInner} />
+    </ReanimatedRexport.View>
+  </ReanimatedRexport.View>;
+}

design/components/Button/native/FloatingActionButton.native.tsx

@@ -0,0 +1,70 @@
+// Metro module 8243 (f8244).
+import { isValidElement, cloneElement } from "react";
+import { createStyles } from "../../Styles/native/createStyles";
+import Module712 from "../../../../_bundle/Module712";
+import { FAB_BUTTON_SIZE } from "./ButtonConstants.native";
+import MobileVisualRefreshExperiment from "../../../../modules/themes/experiments/MobileVisualRefreshExperiment";
+import ReanimatedRexport, { useAnimatedStyle } from "../../../../modules/reanimated/ReanimatedRexport";
+import * as _spring from "../../../animation/reanimated/spring/spring";
+import { BaseIconButton } from "./BaseIconButton.native";
+let SPRING_CONFIG, __initData;
+const useStyles = createStyles(function(r4 = false) {
+  return {
+    button: {
+      ...Module712.shadows.SHADOW_HIGH
+    },
+    iconButtonPill: {
+      minWidth: FAB_BUTTON_SIZE,
+      minHeight: FAB_BUTTON_SIZE,
+      padding: 0,
+      ...r4 ? {
+        borderRadius: Module712.radii.lg
+      } : {}
+    }
+  };
+});
+SPRING_CONFIG = {
+  mass: 0.5,
+  damping: 80,
+  stiffness: 320
+};
+__initData = {
+  code: "function FloatingActionButtonNativeTsx1(){const{withSpring,positionBottom,DEFAULT_POSITION_OFFSET,SPRING_CONFIG,positionRight}=this.__closure;var _positionBottom,_positionRight;return{position:'absolute',bottom:withSpring((_positionBottom=positionBottom)!==null&&_positionBottom!==void 0?_positionBottom:DEFAULT_POSITION_OFFSET,SPRING_CONFIG),right:withSpring((_positionRight=positionRight)!==null&&_positionRight!==void 0?_positionRight:DEFAULT_POSITION_OFFSET,SPRING_CONFIG)};}"
+};
+export const DEFAULT_POSITION_OFFSET = 16;
+export { useStyles };
+export function FloatingActionButton(props) {
+  const { icon, positionBottom, positionRight, accessibilityLabel, ...props2 } = props;
+  const styles = useStyles(MobileVisualRefreshExperiment("FloatingActionButton"));
+  const F = function F() {
+    let r8 = positionBottom;
+    if (positionBottom == null) {
+      r8 = 16;
+    }
+    const r13 = {
+      position: "absolute",
+      bottom: _spring.withSpring(r8, SPRING_CONFIG),
+      right: null
+    };
+    let r17 = positionRight;
+    if (positionRight == null) {
+      r17 = 16;
+    }
+    r13.right = _spring.withSpring(r17, SPRING_CONFIG);
+    return r13;
+  };
+  F.__closure = {
+    withSpring: _spring.withSpring,
+    positionBottom,
+    DEFAULT_POSITION_OFFSET: 16,
+    SPRING_CONFIG,
+    positionRight
+  };
+  F.__workletHash = 10762818944671;
+  F.__initData = __initData;
+  return <ReanimatedRexport.View style={useAnimatedStyle(F)}>
+    <BaseIconButton {...props2} accessibilityLabel={accessibilityLabel} size="lg" variant="primary" icon={isValidElement(icon) ? cloneElement(icon, {
+      color: Module712.colors.WHITE
+    }) : icon} style={styles.button} pillStyle={styles.iconButtonPill} />
+  </ReanimatedRexport.View>;
+}

design/components/Button/native/IconButton.native.tsx

@@ -0,0 +1,27 @@
+// Metro module 6682 (f6683).
+import { forwardRef } from "react";
+import { createStyles } from "../../Styles/native/createStyles";
+import Module712 from "../../../../_bundle/Module712";
+import { BaseButton } from "./BaseButton.native";
+import { BaseIconButton } from "./BaseIconButton.native";
+import { Text } from "../../Text/native/Text";
+const useStyles = createStyles((a0) => ({
+  labelPressable: {
+    paddingBottom: Module712.space.PX_4,
+    gap: Module712.space.PX_8,
+    alignItems: "center",
+    alignSelf: "center",
+    flexGrow: a0 ? 1 : 0
+  },
+  label: {
+    textAlign: "center"
+  }
+}));
+const r26 = forwardRef(function({ label, grow, accessibilityLabel, maxFontSizeMultiplier, accessibilityHint, ...props }, a1) {
+  const styles = useStyles(grow);
+  return label != null ? <BaseButton style={styles.labelPressable} {...props} variant="none" accessibilityLabel={accessibilityLabel} accessibilityHint={accessibilityHint}>
+    <BaseIconButton ref={a1} {...props} accessibilityRole="none" accessibilityLabel="" size="lg" maxFontSizeMultiplier={maxFontSizeMultiplier} />
+    <Text style={styles.label} variant="text-xs/medium" color="interactive-text-default" maxFontSizeMultiplier={maxFontSizeMultiplier}>{label}</Text>
+  </BaseButton> : <BaseIconButton ref={a1} {...props} accessibilityLabel={accessibilityLabel} accessibilityHint={accessibilityHint} maxFontSizeMultiplier={maxFontSizeMultiplier} />;
+});
+export { r26 as IconButton };

design/components/Button/native/ImageButton.native.tsx

@@ -0,0 +1,103 @@
+// Metro module 12267 (f12268).
+import { forwardRef, useCallback } from "react";
+import { Image as Image2, View } from "react-native";
+import { createStyles } from "../../Styles/native/createStyles";
+import * as _ButtonConstants_native from "./ButtonConstants.native";
+import { SMALL_BUTTON_PADDING, MEDIUM_BUTTON_PADDING, getButtonBorderRadius, BUTTON_BORDER_WIDTH } from "./ButtonConstants.native";
+import Module712 from "../../../../_bundle/Module712";
+import { useIconSizeStyles } from "./ButtonHooks.native";
+import ReanimatedRexport, { useSharedValue, useAnimatedStyle } from "../../../../modules/reanimated/ReanimatedRexport";
+import * as _spring from "../../../animation/reanimated/spring/spring";
+import * as _springPresets from "../../../animation/reanimated/spring/springPresets";
+import { BaseButton } from "./BaseButton.native";
+import { BaseIconButton } from "./BaseIconButton.native";
+import { Text } from "../../Text/native/Text";
+let __initData;
+const useStyles = createStyles((a0, a1, a2) => {
+  let LARGE_BUTTON_PADDING = _ButtonConstants_native.LARGE_BUTTON_PADDING;
+  if (a0 === "sm") {
+    LARGE_BUTTON_PADDING = SMALL_BUTTON_PADDING;
+  } else if (a0 === "md") {
+    LARGE_BUTTON_PADDING = MEDIUM_BUTTON_PADDING;
+  }
+  const minHeight = a1 + 2 * LARGE_BUTTON_PADDING;
+  const buttonBorderRadius = getButtonBorderRadius(a0);
+  return {
+    labelPressable: {
+      paddingBottom: Module712.space.PX_4,
+      gap: Module712.space.PX_8,
+      alignItems: "center",
+      alignSelf: "center",
+      flexGrow: a2 ? 1 : 0
+    },
+    pill: {
+      paddingHorizontal: 0,
+      paddingVertical: 0,
+      minHeight,
+      minWidth: minHeight,
+      borderRadius: buttonBorderRadius,
+      borderWidth: 0,
+      outlineWidth: BUTTON_BORDER_WIDTH,
+      outlineColor: Module712.colors.CONTROL_SECONDARY_BORDER_DEFAULT,
+      outlineStyle: "solid"
+    },
+    imageWrapper: {
+      width: minHeight,
+      height: minHeight,
+      position: "relative"
+    },
+    image: {
+      width: minHeight,
+      height: minHeight
+    },
+    imageDim: {
+      position: "absolute",
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      backgroundColor: Module712.colors.REDESIGN_IMAGE_BUTTON_PRESSED_BACKGROUND,
+      borderRadius: buttonBorderRadius
+    }
+  };
+});
+__initData = {
+  code: "function ImageButtonNativeTsx1(){const{withSpring,pressed,ON_PRESS_SPRING}=this.__closure;return{opacity:withSpring(pressed.get()===1?1:0,ON_PRESS_SPRING,'animate-always')};}"
+};
+const r31 = forwardRef(function({ size = "lg", label, grow, image, accessibilityLabel, maxFontSizeMultiplier, onPressIn, onPressOut, ...props }, a1) {
+  const styles = useStyles(size, useIconSizeStyles(size, true, maxFontSizeMultiplier).width, grow);
+  const sharedValue = useSharedValue(0);
+  const callback = useCallback((a0) => {
+    sharedValue.set(1);
+    if (onPressIn != null) {
+      onPressIn(a0);
+    }
+  }, [sharedValue, onPressIn]);
+  const callback2 = useCallback((a0) => {
+    sharedValue.set(0);
+    if (onPressOut != null) {
+      onPressOut(a0);
+    }
+  }, [sharedValue, onPressOut]);
+  const B = function B() {
+    return {
+      opacity: _spring.withSpring(sharedValue.get() === 1 ? 1 : 0, _springPresets.ON_PRESS_SPRING, "animate-always")
+    };
+  };
+  B.__closure = {
+    withSpring: _spring.withSpring,
+    pressed: sharedValue,
+    ON_PRESS_SPRING: _springPresets.ON_PRESS_SPRING
+  };
+  B.__workletHash = 17257158773379;
+  B.__initData = __initData;
+  const icon = <View style={styles.imageWrapper}>
+    <Image2 source={image} style={styles.image} />
+    <ReanimatedRexport.View style={[styles.imageDim, useAnimatedStyle(B)]} />
+  </View>;
+  return label != null ? <BaseButton style={styles.labelPressable} {...props} variant="none" accessibilityLabel={accessibilityLabel}>
+    <BaseIconButton ref={a1} {...props} icon={icon} accessibilityRole="none" accessibilityLabel="" size="lg" pillStyle={styles.pill} variant="secondary" onPressIn={callback} onPressOut={callback2} maxFontSizeMultiplier={maxFontSizeMultiplier} />
+    <Text variant="text-xs/medium" color="interactive-text-default" maxFontSizeMultiplier={maxFontSizeMultiplier}>{label}</Text>
+  </BaseButton> : <BaseIconButton ref={a1} {...props} size={size} icon={icon} accessibilityLabel={accessibilityLabel} pillStyle={styles.pill} variant="secondary" onPressIn={callback} onPressOut={callback2} />;
+});
+export { r31 as ImageButton };

design/components/Button/native/useToggleButtonProps.native.tsx

@@ -0,0 +1,19 @@
+// Metro module 13208 (f13209).
+export function useToggleButtonProps(a0, a1) {
+  return {
+    ...a1 ? a0.on : a0.off,
+    accessibilityRole: "togglebutton",
+    accessibilityState: {
+      checked: a1
+    }
+  };
+}
+export function useToggleIconButtonProps(a0, a1) {
+  return {
+    ...a1 ? a0.on : a0.off,
+    accessibilityRole: "togglebutton",
+    accessibilityState: {
+      checked: a1
+    }
+  };
+}