@vvedantb/native-ui 0.17.2 → 0.18.0

package/dist/ScreenContainer.jsx

@@ -0,0 +1,117 @@
+import { c as _c } from "react/compiler-runtime";
+import { RefreshControl, ScrollView, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { useAccentColor, useLargerText } from "./theme";
+import { tabBarReserve } from "./floating";
+export function ScreenContainer(t0) {
+  const $ = _c(31);
+  let children;
+  let footer;
+  let onRefresh;
+  let props;
+  let refreshControl;
+  let t1;
+  let t2;
+  if ($[0] !== t0) {
+    ({
+      children,
+      reserveTabBar: t1,
+      footer,
+      refreshing: t2,
+      onRefresh,
+      refreshControl,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = children;
+    $[2] = footer;
+    $[3] = onRefresh;
+    $[4] = props;
+    $[5] = refreshControl;
+    $[6] = t1;
+    $[7] = t2;
+  } else {
+    children = $[1];
+    footer = $[2];
+    onRefresh = $[3];
+    props = $[4];
+    refreshControl = $[5];
+    t1 = $[6];
+    t2 = $[7];
+  }
+  const reserveTabBar = t1 === undefined ? false : t1;
+  const refreshing = t2 === undefined ? false : t2;
+  const insets = useSafeAreaInsets();
+  const largerText = useLargerText();
+  const accent = useAccentColor();
+  let t3;
+  if ($[8] !== insets || $[9] !== largerText || $[10] !== reserveTabBar) {
+    t3 = reserveTabBar ? tabBarReserve(largerText, insets.bottom) : 40;
+    $[8] = insets;
+    $[9] = largerText;
+    $[10] = reserveTabBar;
+    $[11] = t3;
+  } else {
+    t3 = $[11];
+  }
+  const bottomPad = t3;
+  let t4;
+  if ($[12] !== accent || $[13] !== onRefresh || $[14] !== refreshControl || $[15] !== refreshing) {
+    t4 = refreshControl ?? (onRefresh ? <RefreshControl refreshing={refreshing} onRefresh={() => void onRefresh()} tintColor={accent} colors={[accent]} /> : undefined);
+    $[12] = accent;
+    $[13] = onRefresh;
+    $[14] = refreshControl;
+    $[15] = refreshing;
+    $[16] = t4;
+  } else {
+    t4 = $[16];
+  }
+  const control = t4;
+  let t5;
+  if ($[17] !== bottomPad) {
+    t5 = {
+      paddingBottom: bottomPad
+    };
+    $[17] = bottomPad;
+    $[18] = t5;
+  } else {
+    t5 = $[18];
+  }
+  let t6;
+  if ($[19] !== children) {
+    t6 = <View className="flex-col gap-4 p-4">{children}</View>;
+    $[19] = children;
+    $[20] = t6;
+  } else {
+    t6 = $[20];
+  }
+  let t7;
+  if ($[21] !== footer) {
+    t7 = footer ? <View className="pt-4">{footer}</View> : null;
+    $[21] = footer;
+    $[22] = t7;
+  } else {
+    t7 = $[22];
+  }
+  let t8;
+  if ($[23] !== control || $[24] !== t5 || $[25] !== t6 || $[26] !== t7) {
+    t8 = <ScrollView showsVerticalScrollIndicator={false} className="flex-1" contentContainerStyle={t5} refreshControl={control}>{t6}{t7}</ScrollView>;
+    $[23] = control;
+    $[24] = t5;
+    $[25] = t6;
+    $[26] = t7;
+    $[27] = t8;
+  } else {
+    t8 = $[27];
+  }
+  let t9;
+  if ($[28] !== props || $[29] !== t8) {
+    t9 = <View className="flex-1 bg-transparent" {...props}>{t8}</View>;
+    $[28] = props;
+    $[29] = t8;
+    $[30] = t9;
+  } else {
+    t9 = $[30];
+  }
+  return t9;
+}

package/dist/SearchInput.jsx

@@ -0,0 +1,150 @@
+import { c as _c } from "react/compiler-runtime";
+import * as React from "react";
+import { Pressable, useWindowDimensions, View } from "react-native";
+import { IconSearch, IconX } from "@tabler/icons-react-native";
+import { Input as PrimitiveInput } from "./primitives/input";
+import { cn } from "./cn";
+import { fieldStyle, fieldTextStyle, scaledFieldHeight, searchInputSize, sizeStyle, touchSlop, typeStyle } from "./controlStyles";
+import { palette } from "./palette";
+import { tokens } from "./tokens";
+import { useLargerText } from "./theme";
+import { useScheme } from "./useScheme";
+/** The web change rule: `onChange`, then `onClear` whenever the value becomes empty. */
+export function searchChange(onChange, onClear) {
+  return next => {
+    onChange(next);
+    if (onClear && next.length === 0) onClear();
+  };
+}
+
+/**
+ * Search field, the web `SearchInput`: a 16 search icon at the start and,
+ * while there is text, a clear button (a 14 cross labelled "Clear search") at
+ * the end. Controlled with `value` and `onChange(text)`, as on the web. The
+ * field has the `Input` look (`fieldStyle`) at the web sizes from
+ * `searchInputSize`. The clear button is painted at the web 24 and reaches 44
+ * with its hit slop (`touchSlop`). It clears at once and leaves focus where it
+ * was, as the default web clear does after its dissolve. It is hidden when the
+ * field is not editable. Inside a `ScrollView`, set
+ * `keyboardShouldPersistTaps="handled"` so the first tap clears while the
+ * keyboard is up. The web `shortcut` hint and `toolbar` variant are not ported.
+ */
+const SearchInput = React.forwardRef((t0, ref) => {
+  const $ = _c(33);
+  let className;
+  let onChange;
+  let onClear;
+  let placeholder;
+  let placeholderTextColor;
+  let props;
+  let style;
+  let t1;
+  let t2;
+  let t3;
+  let value;
+  let wrapperClassName;
+  if ($[0] !== t0) {
+    ({
+      value,
+      onChange,
+      label: t1,
+      placeholder,
+      size: t2,
+      onClear,
+      clearLabel: t3,
+      className,
+      wrapperClassName,
+      placeholderTextColor,
+      style,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = className;
+    $[2] = onChange;
+    $[3] = onClear;
+    $[4] = placeholder;
+    $[5] = placeholderTextColor;
+    $[6] = props;
+    $[7] = style;
+    $[8] = t1;
+    $[9] = t2;
+    $[10] = t3;
+    $[11] = value;
+    $[12] = wrapperClassName;
+  } else {
+    className = $[1];
+    onChange = $[2];
+    onClear = $[3];
+    placeholder = $[4];
+    placeholderTextColor = $[5];
+    props = $[6];
+    style = $[7];
+    t1 = $[8];
+    t2 = $[9];
+    t3 = $[10];
+    value = $[11];
+    wrapperClassName = $[12];
+  }
+  const label = t1 === undefined ? "Search" : t1;
+  const size = t2 === undefined ? "sm" : t2;
+  const clearLabel = t3 === undefined ? "Clear search" : t3;
+  const largerText = useLargerText();
+  const scheme = useScheme();
+  const {
+    fontScale
+  } = useWindowDimensions();
+  let t4;
+  if ($[13] !== className || $[14] !== clearLabel || $[15] !== fontScale || $[16] !== label || $[17] !== largerText || $[18] !== onChange || $[19] !== onClear || $[20] !== placeholder || $[21] !== placeholderTextColor || $[22] !== props || $[23] !== ref || $[24] !== scheme || $[25] !== size || $[26] !== style || $[27] !== value || $[28] !== wrapperClassName) {
+    const metrics = searchInputSize(size, largerText);
+    let t5;
+    if ($[30] !== onChange || $[31] !== onClear) {
+      t5 = searchChange(onChange, onClear);
+      $[30] = onChange;
+      $[31] = onClear;
+      $[32] = t5;
+    } else {
+      t5 = $[32];
+    }
+    const change = t5;
+    const filled = value.length > 0;
+    const muted = tokens.color.muted[scheme];
+    t4 = <View className={wrapperClassName}><PrimitiveInput ref={ref} value={value} onChangeText={change} accessibilityLabel={label} placeholder={placeholder ?? label} placeholderTextColor={placeholderTextColor ?? palette.fieldPlaceholder[scheme]} returnKeyType="search" className={cn("border font-instrument-sans", metrics.text, largerText && "font-instrument-sans-medium", className)} style={[fieldStyle(scheme), fieldTextStyle(scheme), {
+        minHeight: metrics.minHeight,
+        height: scaledFieldHeight(metrics.height, fontScale),
+        paddingTop: metrics.paddingY,
+        paddingBottom: metrics.paddingY,
+        paddingLeft: metrics.paddingLeft,
+        paddingRight: filled ? metrics.filledPaddingRight : metrics.paddingRight,
+        fontSize: sizeStyle(metrics.text).fontSize
+      }, largerText ? typeStyle("medium") : null, style]} {...props} /><View pointerEvents="none" className="absolute bottom-0 top-0 justify-center" style={{
+        left: metrics.iconLeft
+      }}><IconSearch size={metrics.icon} color={muted} /></View>{filled && props.editable !== false ? <View pointerEvents="box-none" className="absolute bottom-0 top-0 justify-center" style={{
+        right: metrics.clearRight
+      }}><Pressable testID="search-input-clear" accessibilityRole="button" accessibilityLabel={clearLabel} hitSlop={touchSlop(metrics.clear)} onPress={() => change("")} className="items-center justify-center rounded-md active:opacity-70" style={{
+          width: metrics.clear,
+          height: metrics.clear
+        }}><IconX size={metrics.clearIcon} color={muted} strokeWidth={1.75} /></Pressable></View> : null}</View>;
+    $[13] = className;
+    $[14] = clearLabel;
+    $[15] = fontScale;
+    $[16] = label;
+    $[17] = largerText;
+    $[18] = onChange;
+    $[19] = onClear;
+    $[20] = placeholder;
+    $[21] = placeholderTextColor;
+    $[22] = props;
+    $[23] = ref;
+    $[24] = scheme;
+    $[25] = size;
+    $[26] = style;
+    $[27] = value;
+    $[28] = wrapperClassName;
+    $[29] = t4;
+  } else {
+    t4 = $[29];
+  }
+  return t4;
+});
+SearchInput.displayName = "SearchInput";
+export { SearchInput };

package/dist/SectionLabel.jsx

@@ -0,0 +1,128 @@
+import { c as _c } from "react/compiler-runtime";
+import { Text } from "react-native";
+import { cn } from "./cn";
+import { sizeStyle, textStyle, typeStyle } from "./controlStyles";
+import { useLargerText } from "./theme";
+import { useScheme } from "./useScheme";
+/** Letter spacing in em: slightly open, or the web `tracking-widest` (0.1em) in capitals. */
+const TRACKING = {
+  regular: 0.02,
+  uppercase: 0.1
+};
+
+/**
+ * The quiet label above a group of rows ("Today", "Library"), in the spirit of
+ * the web `sidebarSectionLabelClass`: `text-xs` medium (12 / 500), muted, with
+ * slightly open letter spacing. The web label is muted at 55% (2.1:1 on the
+ * light page); this one is the full muted colour (4.4:1). A header for
+ * VoiceOver and TalkBack. No side padding: pass `className="px-4"` to line it
+ * up with `ListRow` text. `SettingsSection` titles are the larger heading.
+ */
+export function SectionLabel(t0) {
+  const $ = _c(27);
+  let className;
+  let props;
+  let style;
+  let t1;
+  if ($[0] !== t0) {
+    ({
+      className,
+      uppercase: t1,
+      style,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = className;
+    $[2] = props;
+    $[3] = style;
+    $[4] = t1;
+  } else {
+    className = $[1];
+    props = $[2];
+    style = $[3];
+    t1 = $[4];
+  }
+  const uppercase = t1 === undefined ? false : t1;
+  const scheme = useScheme();
+  const largerText = useLargerText();
+  const size = largerText ? "text-base" : "text-xs";
+  let t2;
+  if ($[5] !== size) {
+    t2 = sizeStyle(size);
+    $[5] = size;
+    $[6] = t2;
+  } else {
+    t2 = $[6];
+  }
+  const {
+    fontSize
+  } = t2;
+  let t3;
+  if ($[7] !== className || $[8] !== size) {
+    t3 = cn("font-instrument-sans-medium", size, className);
+    $[7] = className;
+    $[8] = size;
+    $[9] = t3;
+  } else {
+    t3 = $[9];
+  }
+  let t4;
+  if ($[10] !== scheme) {
+    t4 = textStyle("muted", scheme);
+    $[10] = scheme;
+    $[11] = t4;
+  } else {
+    t4 = $[11];
+  }
+  let t5;
+  if ($[12] !== size) {
+    t5 = sizeStyle(size);
+    $[12] = size;
+    $[13] = t5;
+  } else {
+    t5 = $[13];
+  }
+  let t6;
+  if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
+    t6 = typeStyle("medium");
+    $[14] = t6;
+  } else {
+    t6 = $[14];
+  }
+  const t7 = fontSize * TRACKING[uppercase ? "uppercase" : "regular"];
+  const t8 = uppercase ? "uppercase" : "none";
+  let t9;
+  if ($[15] !== t7 || $[16] !== t8) {
+    t9 = {
+      letterSpacing: t7,
+      textTransform: t8
+    };
+    $[15] = t7;
+    $[16] = t8;
+    $[17] = t9;
+  } else {
+    t9 = $[17];
+  }
+  let t10;
+  if ($[18] !== style || $[19] !== t4 || $[20] !== t5 || $[21] !== t9) {
+    t10 = [t4, t5, t6, t9, style];
+    $[18] = style;
+    $[19] = t4;
+    $[20] = t5;
+    $[21] = t9;
+    $[22] = t10;
+  } else {
+    t10 = $[22];
+  }
+  let t11;
+  if ($[23] !== props || $[24] !== t10 || $[25] !== t3) {
+    t11 = <Text accessibilityRole="header" className={t3} style={t10} {...props} />;
+    $[23] = props;
+    $[24] = t10;
+    $[25] = t3;
+    $[26] = t11;
+  } else {
+    t11 = $[26];
+  }
+  return t11;
+}

package/dist/Select.jsx

@@ -0,0 +1,223 @@
+import { c as _c } from "react/compiler-runtime";
+import * as React from "react";
+import { Platform } from "react-native";
+import { NativeSelectScrollView, Select as PrimitiveSelect, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "./primitives/select";
+import { cn } from "./cn";
+import { MIN_TOUCH_TARGET, fieldStyle, fieldTextStyle, touchSlop, typeStyle } from "./controlStyles";
+import { palette } from "./palette";
+import { selectItemA11yProps } from "./selectA11y";
+import { useLargerText } from "./theme";
+import { useScheme } from "./useScheme";
+const NULL_SENTINEL = "__null__";
+function toPrimitiveValue(value, options) {
+  if (value === undefined || value === "") {
+    return undefined;
+  }
+  const expectedValue = value === null ? NULL_SENTINEL : String(value);
+  const option = options.find(item => String(item.value ?? NULL_SENTINEL) === expectedValue);
+  if (!option) return undefined;
+  return {
+    label: option.label,
+    value: String(option.value ?? NULL_SENTINEL)
+  };
+}
+function Select(t0) {
+  const $ = _c(54);
+  const {
+    value,
+    onValueChange,
+    options,
+    placeholder,
+    disabled,
+    className,
+    triggerClassName,
+    contentClassName,
+    testID,
+    accessibilityLabel
+  } = t0;
+  const largerText = useLargerText();
+  const scheme = useScheme();
+  let t1;
+  if ($[0] !== options || $[1] !== value) {
+    t1 = toPrimitiveValue(value, options);
+    $[0] = options;
+    $[1] = value;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  const primitiveValue = t1;
+  let t2;
+  if ($[3] !== onValueChange || $[4] !== options) {
+    t2 = nextOption => {
+      if (!nextOption) {
+        return;
+      }
+      const selectedValue = nextOption.value === NULL_SENTINEL ? null : nextOption.value;
+      const match = options.find(option => String(option.value ?? NULL_SENTINEL) === String(selectedValue));
+      if (match) {
+        onValueChange(match.value);
+      }
+    };
+    $[3] = onValueChange;
+    $[4] = options;
+    $[5] = t2;
+  } else {
+    t2 = $[5];
+  }
+  const t3 = Boolean(disabled);
+  let t4;
+  if ($[6] !== t3) {
+    t4 = {
+      disabled: t3
+    };
+    $[6] = t3;
+    $[7] = t4;
+  } else {
+    t4 = $[7];
+  }
+  const t5 = largerText ? 64 : 44;
+  let t6;
+  if ($[8] !== t5) {
+    t6 = touchSlop(MIN_TOUCH_TARGET, t5);
+    $[8] = t5;
+    $[9] = t6;
+  } else {
+    t6 = $[9];
+  }
+  const t7 = largerText && "min-h-16 px-4";
+  let t8;
+  if ($[10] !== className || $[11] !== t7 || $[12] !== triggerClassName) {
+    t8 = cn("h-auto min-h-11 w-full border px-3.5 py-0 shadow-none", t7, triggerClassName, className);
+    $[10] = className;
+    $[11] = t7;
+    $[12] = triggerClassName;
+    $[13] = t8;
+  } else {
+    t8 = $[13];
+  }
+  let t9;
+  if ($[14] !== scheme) {
+    t9 = fieldStyle(scheme);
+    $[14] = scheme;
+    $[15] = t9;
+  } else {
+    t9 = $[15];
+  }
+  const t10 = placeholder ?? "Select option";
+  const t11 = largerText ? "font-instrument-sans-medium text-xl" : "font-instrument-sans text-base";
+  let t12;
+  if ($[16] !== primitiveValue || $[17] !== scheme) {
+    t12 = primitiveValue ? fieldTextStyle(scheme) : {
+      color: palette.fieldPlaceholder[scheme]
+    };
+    $[16] = primitiveValue;
+    $[17] = scheme;
+    $[18] = t12;
+  } else {
+    t12 = $[18];
+  }
+  let t13;
+  if ($[19] !== largerText) {
+    t13 = largerText ? typeStyle("medium") : null;
+    $[19] = largerText;
+    $[20] = t13;
+  } else {
+    t13 = $[20];
+  }
+  let t14;
+  if ($[21] !== t12 || $[22] !== t13) {
+    t14 = [t12, t13];
+    $[21] = t12;
+    $[22] = t13;
+    $[23] = t14;
+  } else {
+    t14 = $[23];
+  }
+  let t15;
+  if ($[24] !== t10 || $[25] !== t11 || $[26] !== t14) {
+    t15 = <SelectValue placeholder={t10} className={t11} style={t14} />;
+    $[24] = t10;
+    $[25] = t11;
+    $[26] = t14;
+    $[27] = t15;
+  } else {
+    t15 = $[27];
+  }
+  let t16;
+  if ($[28] !== accessibilityLabel || $[29] !== t15 || $[30] !== t4 || $[31] !== t6 || $[32] !== t8 || $[33] !== t9 || $[34] !== testID) {
+    t16 = <SelectTrigger testID={testID} accessibilityRole="combobox" accessibilityLabel={accessibilityLabel} accessibilityState={t4} hitSlop={t6} className={t8} style={t9}>{t15}</SelectTrigger>;
+    $[28] = accessibilityLabel;
+    $[29] = t15;
+    $[30] = t4;
+    $[31] = t6;
+    $[32] = t8;
+    $[33] = t9;
+    $[34] = testID;
+    $[35] = t16;
+  } else {
+    t16 = $[35];
+  }
+  let t17;
+  if ($[36] !== contentClassName) {
+    t17 = cn("w-full", contentClassName);
+    $[36] = contentClassName;
+    $[37] = t17;
+  } else {
+    t17 = $[37];
+  }
+  let t18;
+  if ($[38] !== options || $[39] !== testID) {
+    let t19;
+    if ($[41] !== testID) {
+      t19 = option_0 => {
+        const optionId = testID ? `${testID}-${String(option_0.value ?? "null")}` : undefined;
+        return <SelectItem key={`${String(option_0.value)}-${option_0.label}`} {...selectItemA11yProps({
+          label: option_0.label,
+          testID: optionId
+        }, Platform.OS)} label={option_0.label} value={String(option_0.value ?? NULL_SENTINEL)} />;
+      };
+      $[41] = testID;
+      $[42] = t19;
+    } else {
+      t19 = $[42];
+    }
+    t18 = options.map(t19);
+    $[38] = options;
+    $[39] = testID;
+    $[40] = t18;
+  } else {
+    t18 = $[40];
+  }
+  let t19;
+  if ($[43] !== t18) {
+    t19 = <NativeSelectScrollView><SelectGroup>{t18}</SelectGroup></NativeSelectScrollView>;
+    $[43] = t18;
+    $[44] = t19;
+  } else {
+    t19 = $[44];
+  }
+  let t20;
+  if ($[45] !== t17 || $[46] !== t19) {
+    t20 = <SelectContent className={t17}>{t19}</SelectContent>;
+    $[45] = t17;
+    $[46] = t19;
+    $[47] = t20;
+  } else {
+    t20 = $[47];
+  }
+  let t21;
+  if ($[48] !== disabled || $[49] !== primitiveValue || $[50] !== t16 || $[51] !== t2 || $[52] !== t20) {
+    t21 = <PrimitiveSelect value={primitiveValue} onValueChange={t2} disabled={disabled}>{t16}{t20}</PrimitiveSelect>;
+    $[48] = disabled;
+    $[49] = primitiveValue;
+    $[50] = t16;
+    $[51] = t2;
+    $[52] = t20;
+    $[53] = t21;
+  } else {
+    t21 = $[53];
+  }
+  return t21;
+}
+export { Select };

package/dist/Separator.jsx

@@ -0,0 +1,95 @@
+import { c as _c } from "react/compiler-runtime";
+import { StyleSheet, View } from "react-native";
+import { cn } from "./cn";
+import { tokens } from "./tokens";
+import { useScheme } from "./useScheme";
+/** Hairline in `tokens.color.separator`. Vertical separators stretch to the row height. */
+export function Separator(t0) {
+  const $ = _c(22);
+  let className;
+  let props;
+  let style;
+  let t1;
+  let t2;
+  if ($[0] !== t0) {
+    ({
+      orientation: t1,
+      decorative: t2,
+      className,
+      style,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = className;
+    $[2] = props;
+    $[3] = style;
+    $[4] = t1;
+    $[5] = t2;
+  } else {
+    className = $[1];
+    props = $[2];
+    style = $[3];
+    t1 = $[4];
+    t2 = $[5];
+  }
+  const orientation = t1 === undefined ? "horizontal" : t1;
+  const decorative = t2 === undefined ? true : t2;
+  const scheme = useScheme();
+  const t3 = decorative ? "no-hide-descendants" : "auto";
+  let t4;
+  if ($[6] !== className) {
+    t4 = cn("shrink-0", className);
+    $[6] = className;
+    $[7] = t4;
+  } else {
+    t4 = $[7];
+  }
+  let t5;
+  if ($[8] !== orientation) {
+    t5 = orientation === "horizontal" ? {
+      height: StyleSheet.hairlineWidth,
+      width: "100%"
+    } : {
+      width: StyleSheet.hairlineWidth,
+      alignSelf: "stretch"
+    };
+    $[8] = orientation;
+    $[9] = t5;
+  } else {
+    t5 = $[9];
+  }
+  const t6 = tokens.color.separator[scheme];
+  let t7;
+  if ($[10] !== t6) {
+    t7 = {
+      backgroundColor: t6
+    };
+    $[10] = t6;
+    $[11] = t7;
+  } else {
+    t7 = $[11];
+  }
+  let t8;
+  if ($[12] !== style || $[13] !== t5 || $[14] !== t7) {
+    t8 = [t5, t7, style];
+    $[12] = style;
+    $[13] = t5;
+    $[14] = t7;
+    $[15] = t8;
+  } else {
+    t8 = $[15];
+  }
+  let t9;
+  if ($[16] !== decorative || $[17] !== props || $[18] !== t3 || $[19] !== t4 || $[20] !== t8) {
+    t9 = <View accessibilityElementsHidden={decorative} importantForAccessibility={t3} className={t4} style={t8} {...props} />;
+    $[16] = decorative;
+    $[17] = props;
+    $[18] = t3;
+    $[19] = t4;
+    $[20] = t8;
+    $[21] = t9;
+  } else {
+    t9 = $[21];
+  }
+  return t9;
+}