@onlynative/components 0.1.0-alpha.2 → 0.1.0-alpha.3

package/dist/index.js

@@ -52,6 +52,7 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/typography/Typography.tsx
+var import_react = require("react");
 var import_react_native = require("react-native");
 var import_core = require("@onlynative/core");
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -75,6 +76,13 @@ function Typography({
   const theme = (0, import_core.useTheme)();
   const typographyStyle = theme.typography[variant];
   const resolvedRole = accessibilityRole != null ? accessibilityRole : HEADING_VARIANTS.has(variant) ? "header" : void 0;
+  const lineHeightFix = (0, import_react.useMemo)(() => {
+    if (!style) return void 0;
+    const flat = import_react_native.StyleSheet.flatten(style);
+    if (!(flat == null ? void 0 : flat.fontSize) || flat.lineHeight) return void 0;
+    const ratio = typographyStyle.lineHeight / typographyStyle.fontSize;
+    return { lineHeight: Math.ceil(flat.fontSize * ratio) };
+  }, [style, typographyStyle.fontSize, typographyStyle.lineHeight]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     Component,
     {
@@ -84,6 +92,7 @@ function Typography({
         { color: theme.colors.onSurface },
         typographyStyle,
         style,
+        lineHeightFix,
         color != null ? { color } : void 0
       ],
       children
@@ -92,7 +101,7 @@ function Typography({
 }
 
 // src/layout/Layout.tsx
-var import_react = require("react");
+var import_react2 = require("react");
 var import_react_native2 = require("react-native");
 var import_react_native_safe_area_context = require("react-native-safe-area-context");
 var import_core2 = require("@onlynative/core");
@@ -126,15 +135,15 @@ function removeBackgroundColor(style) {
 }
 function Layout({ immersive, edges, children, style }) {
   const theme = (0, import_core2.useTheme)();
-  const themeBackgroundStyle = (0, import_react.useMemo)(
+  const themeBackgroundStyle = (0, import_react2.useMemo)(
     () => ({ backgroundColor: theme.colors.background }),
     [theme.colors.background]
   );
-  const styleWithoutBackground = (0, import_react.useMemo)(
+  const styleWithoutBackground = (0, import_react2.useMemo)(
     () => removeBackgroundColor(style),
     [style]
   );
-  const safeAreaEdges = (0, import_react.useMemo)(
+  const safeAreaEdges = (0, import_react2.useMemo)(
     () => resolveEdges(immersive, edges),
     [immersive, edges]
   );
@@ -149,7 +158,7 @@ function Layout({ immersive, edges, children, style }) {
 }
 
 // src/layout/Box.tsx
-var import_react2 = require("react");
+var import_react3 = require("react");
 var import_react_native3 = require("react-native");
 var import_core3 = require("@onlynative/core");
 
@@ -188,7 +197,7 @@ function Box({
   ...viewProps
 }) {
   const { spacing } = (0, import_core3.useTheme)();
-  const layoutStyle = (0, import_react2.useMemo)(() => {
+  const layoutStyle = (0, import_react3.useMemo)(() => {
     const s = (v) => resolveSpacing(spacing, v);
     return {
       ...p !== void 0 && { padding: s(p) },
@@ -253,10 +262,10 @@ function Box({
 }
 
 // src/layout/Column.tsx
-var import_react3 = require("react");
+var import_react4 = require("react");
 var import_jsx_runtime4 = require("react/jsx-runtime");
 function Column({ inverted = false, style, ...boxProps }) {
-  const directionStyle = (0, import_react3.useMemo)(
+  const directionStyle = (0, import_react4.useMemo)(
     () => ({
       flexDirection: inverted ? "column-reverse" : "column"
     }),
@@ -266,12 +275,12 @@ function Column({ inverted = false, style, ...boxProps }) {
 }
 
 // src/layout/Grid.tsx
-var import_react5 = __toESM(require("react"));
+var import_react6 = __toESM(require("react"));
 var import_react_native4 = require("react-native");
 var import_core4 = require("@onlynative/core");
 
 // src/layout/Row.tsx
-var import_react4 = require("react");
+var import_react5 = require("react");
 var import_jsx_runtime5 = require("react/jsx-runtime");
 function Row({
   wrap = false,
@@ -279,7 +288,7 @@ function Row({
   style,
   ...boxProps
 }) {
-  const directionStyle = (0, import_react4.useMemo)(
+  const directionStyle = (0, import_react5.useMemo)(
     () => ({
       flexDirection: inverted ? "row-reverse" : "row",
       ...wrap && { flexWrap: "wrap" }
@@ -304,7 +313,7 @@ function Grid({
   const resolvedColumnGap = resolveSpacing(spacing, columnGap != null ? columnGap : gap);
   const resolvedRowGap = resolveSpacing(spacing, rowGap != null ? rowGap : gap);
   const halfGap = resolvedColumnGap ? resolvedColumnGap / 2 : 0;
-  const cellStyle = (0, import_react5.useMemo)(
+  const cellStyle = (0, import_react6.useMemo)(
     () => ({
       flexBasis: `${100 / columns}%`,
       flexShrink: 1,
@@ -313,27 +322,47 @@ function Grid({
     }),
     [columns, halfGap]
   );
-  const rowStyle = (0, import_react5.useMemo)(
+  const rowStyle = (0, import_react6.useMemo)(
     () => ({
       marginLeft: -halfGap,
       marginRight: -halfGap
     }),
     [halfGap]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Row, { wrap: true, rowGap: resolvedRowGap, ...rowProps, style: [rowStyle, style], children: import_react5.default.Children.map(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Row, { wrap: true, rowGap: resolvedRowGap, ...rowProps, style: [rowStyle, style], children: import_react6.default.Children.map(
     children,
     (child) => child != null ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native4.View, { style: cellStyle, children: child }) : null
   ) });
 }
 
 // src/button/Button.tsx
-var import_MaterialCommunityIcons = __toESM(require("@expo/vector-icons/MaterialCommunityIcons"));
-var import_react6 = require("react");
+var import_react7 = require("react");
 var import_react_native7 = require("react-native");
 var import_react_native8 = require("react-native");
 var import_react_native9 = require("react-native");
 var import_core5 = require("@onlynative/core");
 
+// src/utils/icon.ts
+var _MCIcons = null;
+var _resolved = false;
+function getMaterialCommunityIcons() {
+  if (!_resolved) {
+    _resolved = true;
+    try {
+      const mod = require("@expo/vector-icons/MaterialCommunityIcons");
+      _MCIcons = mod.default || mod;
+    } catch {
+      _MCIcons = null;
+    }
+  }
+  if (!_MCIcons) {
+    throw new Error(
+      "@expo/vector-icons is required for icon support. Install it with: npx expo install @expo/vector-icons"
+    );
+  }
+  return _MCIcons;
+}
+
 // src/button/styles.ts
 var import_react_native6 = require("react-native");
 
@@ -674,7 +703,7 @@ function Button({
   const hasLeading = Boolean(leadingIcon);
   const hasTrailing = Boolean(trailingIcon);
   const theme = (0, import_core5.useTheme)();
-  const styles2 = (0, import_react6.useMemo)(
+  const styles2 = (0, import_react7.useMemo)(
     () => createStyles(
       theme,
       variant,
@@ -685,14 +714,15 @@ function Button({
     ),
     [theme, variant, hasLeading, hasTrailing, containerColor, contentColor]
   );
-  const resolvedIconColor = (0, import_react6.useMemo)(() => {
+  const MaterialCommunityIcons = leadingIcon || trailingIcon ? getMaterialCommunityIcons() : null;
+  const resolvedIconColor = (0, import_react7.useMemo)(() => {
     const base = import_react_native8.StyleSheet.flatten([
       styles2.label,
       isDisabled ? styles2.disabledLabel : void 0
     ]);
     return typeof (base == null ? void 0 : base.color) === "string" ? base.color : void 0;
   }, [styles2.label, styles2.disabledLabel, isDisabled]);
-  const computedLabelStyle = (0, import_react6.useMemo)(
+  const computedLabelStyle = (0, import_react7.useMemo)(
     () => [
       styles2.label,
       isDisabled ? styles2.disabledLabel : void 0,
@@ -718,7 +748,7 @@ function Button({
       ),
       children: [
         leadingIcon ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-          import_MaterialCommunityIcons.default,
+          MaterialCommunityIcons,
           {
             name: leadingIcon,
             size: iconSize,
@@ -728,7 +758,7 @@ function Button({
         ) : null,
         /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native9.Text, { style: computedLabelStyle, children }),
         trailingIcon ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-          import_MaterialCommunityIcons.default,
+          MaterialCommunityIcons,
           {
             name: trailingIcon,
             size: iconSize,
@@ -742,8 +772,7 @@ function Button({
 }
 
 // src/icon-button/IconButton.tsx
-var import_MaterialCommunityIcons2 = __toESM(require("@expo/vector-icons/MaterialCommunityIcons"));
-var import_react7 = require("react");
+var import_react8 = require("react");
 var import_react_native11 = require("react-native");
 var import_core6 = require("@onlynative/core");
 
@@ -1155,8 +1184,9 @@ function IconButton({
   ...props
 }) {
   var _a;
+  const MaterialCommunityIcons = getMaterialCommunityIcons();
   const theme = (0, import_core6.useTheme)();
-  const styles2 = (0, import_react7.useMemo)(() => createStyles2(theme), [theme]);
+  const styles2 = (0, import_react8.useMemo)(() => createStyles2(theme), [theme]);
   const isDisabled = Boolean(disabled);
   const isToggle = selected !== void 0;
   const isSelected = Boolean(selected);
@@ -1164,7 +1194,7 @@ function IconButton({
   const displayIcon = isToggle && isSelected && selectedIcon ? selectedIcon : icon;
   const iconPixelSize = getIconPixelSize(size);
   const accessibilityState = isToggle ? { disabled: isDisabled, selected: isSelected } : { disabled: isDisabled };
-  const containerOverrides = (0, import_react7.useMemo)(() => {
+  const containerOverrides = (0, import_react8.useMemo)(() => {
     if (!containerColor) return null;
     const overlay = resolvedIconColor;
     return {
@@ -1220,7 +1250,7 @@ function IconButton({
         return base;
       },
       children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-        import_MaterialCommunityIcons2.default,
+        MaterialCommunityIcons,
         {
           name: displayIcon,
           size: iconPixelSize,
@@ -1232,7 +1262,7 @@ function IconButton({
 }
 
 // src/appbar/AppBar.tsx
-var import_react8 = require("react");
+var import_react9 = require("react");
 var import_react_native14 = require("react-native");
 var import_react_native_safe_area_context2 = require("react-native-safe-area-context");
 var import_core8 = require("@onlynative/core");
@@ -1395,10 +1425,10 @@ function AppBar({
   var _a;
   const theme = (0, import_core8.useTheme)();
   const topAppBar = (_a = theme.topAppBar) != null ? _a : import_core8.defaultTopAppBarTokens;
-  const styles2 = (0, import_react8.useMemo)(() => createStyles3(theme), [theme]);
-  const [leadingWidth, setLeadingWidth] = (0, import_react8.useState)(0);
-  const [actionsWidth, setActionsWidth] = (0, import_react8.useState)(0);
-  const titleColorStyle = (0, import_react8.useMemo)(
+  const styles2 = (0, import_react9.useMemo)(() => createStyles3(theme), [theme]);
+  const [leadingWidth, setLeadingWidth] = (0, import_react9.useState)(0);
+  const [actionsWidth, setActionsWidth] = (0, import_react9.useState)(0);
+  const titleColorStyle = (0, import_react9.useMemo)(
     () => ({ color: contentColor != null ? contentColor : theme.colors.onSurface }),
     [contentColor, theme.colors.onSurface]
   );
@@ -1409,15 +1439,15 @@ function AppBar({
   const titleStartInset = topAppBar.horizontalPadding + Math.max(topAppBar.titleStartInset, leadingWidth);
   const compactTitleEndInset = topAppBar.horizontalPadding + actionsWidth;
   const centeredSideInset = topAppBar.horizontalPadding + Math.max(leadingWidth, actionsWidth);
-  const expandedTitleInsetStyle = (0, import_react8.useMemo)(
+  const expandedTitleInsetStyle = (0, import_react9.useMemo)(
     () => ({ paddingStart: titleStartInset }),
     [titleStartInset]
   );
-  const overlayTitleInsetStyle = (0, import_react8.useMemo)(
+  const overlayTitleInsetStyle = (0, import_react9.useMemo)(
     () => isCenterAligned ? { start: centeredSideInset, end: centeredSideInset } : { start: titleStartInset, end: compactTitleEndInset },
     [centeredSideInset, compactTitleEndInset, isCenterAligned, titleStartInset]
   );
-  const leadingContent = (0, import_react8.useMemo)(() => {
+  const leadingContent = (0, import_react9.useMemo)(() => {
     if (leading) {
       return leading;
     }
@@ -1443,7 +1473,7 @@ function AppBar({
     styles2.iconFrame,
     theme.colors.onSurface
   ]);
-  const actionsContent = (0, import_react8.useMemo)(() => {
+  const actionsContent = (0, import_react9.useMemo)(() => {
     if (trailing) {
       return trailing;
     }
@@ -1470,7 +1500,7 @@ function AppBar({
       `${String(action.icon)}-${index}`
     )) });
   }, [actions, contentColor, styles2.actionsRow, styles2.iconFrame, trailing]);
-  const onLeadingLayout = (0, import_react8.useCallback)((event) => {
+  const onLeadingLayout = (0, import_react9.useCallback)((event) => {
     const nextWidth = measureWidth(event);
     setLeadingWidth((currentWidth) => {
       if (currentWidth === nextWidth) {
@@ -1479,7 +1509,7 @@ function AppBar({
       return nextWidth;
     });
   }, []);
-  const onActionsLayout = (0, import_react8.useCallback)((event) => {
+  const onActionsLayout = (0, import_react9.useCallback)((event) => {
     const nextWidth = measureWidth(event);
     setActionsWidth((currentWidth) => {
       if (currentWidth === nextWidth) {
@@ -1572,7 +1602,7 @@ function AppBar({
 }
 
 // src/card/Card.tsx
-var import_react9 = require("react");
+var import_react10 = require("react");
 var import_react_native16 = require("react-native");
 var import_core9 = require("@onlynative/core");
 
@@ -1706,7 +1736,7 @@ function Card({
   const isDisabled = Boolean(disabled);
   const isInteractive = onPress !== void 0;
   const theme = (0, import_core9.useTheme)();
-  const styles2 = (0, import_react9.useMemo)(
+  const styles2 = (0, import_react10.useMemo)(
     () => createStyles4(theme, variant, containerColor),
     [theme, variant, containerColor]
   );
@@ -1737,8 +1767,7 @@ function Card({
 }
 
 // src/chip/Chip.tsx
-var import_MaterialCommunityIcons3 = __toESM(require("@expo/vector-icons/MaterialCommunityIcons"));
-var import_react10 = require("react");
+var import_react11 = require("react");
 var import_react_native18 = require("react-native");
 var import_core10 = require("@onlynative/core");
 
@@ -1968,8 +1997,10 @@ function Chip({
   const hasLeadingContent = Boolean(
     variant === "input" && avatar || leadingIcon || variant === "filter" && isSelected
   );
+  const needsIcons = Boolean(leadingIcon) || variant === "filter" && isSelected || showCloseIcon;
+  const MaterialCommunityIcons = needsIcons ? getMaterialCommunityIcons() : null;
   const theme = (0, import_core10.useTheme)();
-  const styles2 = (0, import_react10.useMemo)(
+  const styles2 = (0, import_react11.useMemo)(
     () => createStyles5(
       theme,
       variant,
@@ -1991,14 +2022,14 @@ function Chip({
       contentColor
     ]
   );
-  const resolvedIconColor = (0, import_react10.useMemo)(() => {
+  const resolvedIconColor = (0, import_react11.useMemo)(() => {
     const base = import_react_native18.StyleSheet.flatten([
       styles2.label,
       isDisabled ? styles2.disabledLabel : void 0
     ]);
     return typeof (base == null ? void 0 : base.color) === "string" ? base.color : void 0;
   }, [styles2.label, styles2.disabledLabel, isDisabled]);
-  const computedLabelStyle = (0, import_react10.useMemo)(
+  const computedLabelStyle = (0, import_react11.useMemo)(
     () => [
       styles2.label,
       isDisabled ? styles2.disabledLabel : void 0,
@@ -2012,7 +2043,7 @@ function Chip({
     }
     if (leadingIcon) {
       return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-        import_MaterialCommunityIcons3.default,
+        MaterialCommunityIcons,
         {
           name: leadingIcon,
           size: iconSize,
@@ -2023,7 +2054,7 @@ function Chip({
     }
     if (variant === "filter" && isSelected) {
       return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-        import_MaterialCommunityIcons3.default,
+        MaterialCommunityIcons,
         {
           name: "check",
           size: iconSize,
@@ -2065,7 +2096,7 @@ function Chip({
             hitSlop: 4,
             style: styles2.closeButton,
             children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-              import_MaterialCommunityIcons3.default,
+              MaterialCommunityIcons,
               {
                 name: "close",
                 size: iconSize,
@@ -2080,8 +2111,7 @@ function Chip({
 }
 
 // src/checkbox/Checkbox.tsx
-var import_MaterialCommunityIcons4 = __toESM(require("@expo/vector-icons/MaterialCommunityIcons"));
-var import_react11 = require("react");
+var import_react12 = require("react");
 var import_react_native20 = require("react-native");
 var import_core11 = require("@onlynative/core");
 
@@ -2236,12 +2266,13 @@ function Checkbox({
 }) {
   const isDisabled = Boolean(disabled);
   const isChecked = Boolean(value);
+  const MaterialCommunityIcons = isChecked ? getMaterialCommunityIcons() : null;
   const theme = (0, import_core11.useTheme)();
-  const styles2 = (0, import_react11.useMemo)(
+  const styles2 = (0, import_react12.useMemo)(
     () => createStyles6(theme, isChecked, containerColor, contentColor),
     [theme, isChecked, containerColor, contentColor]
   );
-  const resolvedIconColor = (0, import_react11.useMemo)(() => {
+  const resolvedIconColor = (0, import_react12.useMemo)(() => {
     const base = import_react_native20.StyleSheet.flatten([
       styles2.iconColor,
       isDisabled ? styles2.disabledIconColor : void 0
@@ -2274,7 +2305,7 @@ function Checkbox({
         style
       ),
       children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_native20.View, { style: [styles2.box, isDisabled ? styles2.disabledBox : void 0], children: isChecked ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-        import_MaterialCommunityIcons4.default,
+        MaterialCommunityIcons,
         {
           name: "check",
           size: 14,
@@ -2286,7 +2317,7 @@ function Checkbox({
 }
 
 // src/radio/Radio.tsx
-var import_react12 = require("react");
+var import_react13 = require("react");
 var import_react_native22 = require("react-native");
 var import_core12 = require("@onlynative/core");
 
@@ -2430,7 +2461,7 @@ function Radio({
   const isDisabled = Boolean(disabled);
   const isSelected = Boolean(value);
   const theme = (0, import_core12.useTheme)();
-  const styles2 = (0, import_react12.useMemo)(
+  const styles2 = (0, import_react13.useMemo)(
     () => createStyles7(theme, isSelected, containerColor, contentColor),
     [theme, isSelected, containerColor, contentColor]
   );
@@ -2479,8 +2510,7 @@ function Radio({
 }
 
 // src/switch/Switch.tsx
-var import_MaterialCommunityIcons5 = __toESM(require("@expo/vector-icons/MaterialCommunityIcons"));
-var import_react13 = require("react");
+var import_react14 = require("react");
 var import_react_native24 = require("react-native");
 var import_core13 = require("@onlynative/core");
 
@@ -2652,11 +2682,11 @@ function Switch({
   const isSelected = Boolean(value);
   const hasIcon = isSelected || Boolean(unselectedIcon);
   const theme = (0, import_core13.useTheme)();
-  const styles2 = (0, import_react13.useMemo)(
+  const styles2 = (0, import_react14.useMemo)(
     () => createStyles8(theme, isSelected, hasIcon, containerColor, contentColor),
     [theme, isSelected, hasIcon, containerColor, contentColor]
   );
-  const resolvedIconColor = (0, import_react13.useMemo)(() => {
+  const resolvedIconColor = (0, import_react14.useMemo)(() => {
     const base = import_react_native24.StyleSheet.flatten([
       styles2.iconColor,
       isDisabled ? styles2.disabledIconColor : void 0
@@ -2669,6 +2699,7 @@ function Switch({
     }
   };
   const iconName = isSelected ? selectedIcon : unselectedIcon;
+  const MaterialCommunityIcons = iconName ? getMaterialCommunityIcons() : null;
   const iconSize = 16;
   return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
     import_react_native24.Pressable,
@@ -2695,7 +2726,7 @@ function Switch({
         {
           style: [styles2.thumb, isDisabled ? styles2.disabledThumb : void 0],
           children: iconName ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-            import_MaterialCommunityIcons5.default,
+            MaterialCommunityIcons,
             {
               name: iconName,
               size: iconSize,
@@ -2709,8 +2740,7 @@ function Switch({
 }
 
 // src/text-field/TextField.tsx
-var import_MaterialCommunityIcons6 = __toESM(require("@expo/vector-icons/MaterialCommunityIcons"));
-var import_react14 = require("react");
+var import_react15 = require("react");
 var import_react_native26 = require("react-native");
 var import_core14 = require("@onlynative/core");
 
@@ -2938,28 +2968,29 @@ function TextField({
   const isError = Boolean(error) || Boolean(errorText);
   const isFilled = variant === "filled";
   const hasLeadingIcon = Boolean(leadingIcon);
-  const { colors, styles: styles2 } = (0, import_react14.useMemo)(
+  const MaterialCommunityIcons = leadingIcon || trailingIcon ? getMaterialCommunityIcons() : null;
+  const { colors, styles: styles2 } = (0, import_react15.useMemo)(
     () => createStyles9(theme, variant),
     [theme, variant]
   );
-  const [isFocused, setIsFocused] = (0, import_react14.useState)(false);
-  const [internalHasText, setInternalHasText] = (0, import_react14.useState)(
+  const [isFocused, setIsFocused] = (0, import_react15.useState)(false);
+  const [internalHasText, setInternalHasText] = (0, import_react15.useState)(
     () => value !== void 0 && value !== ""
   );
-  const inputRef = (0, import_react14.useRef)(null);
+  const inputRef = (0, import_react15.useRef)(null);
   const isControlled = value !== void 0;
   const hasValue = isControlled ? value !== "" : internalHasText;
   const isLabelFloated = isFocused || hasValue;
-  const labelAnimRef = (0, import_react14.useRef)(new import_react_native26.Animated.Value(isLabelFloated ? 1 : 0));
+  const labelAnimRef = (0, import_react15.useRef)(new import_react_native26.Animated.Value(isLabelFloated ? 1 : 0));
   const labelAnim = labelAnimRef.current;
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     import_react_native26.Animated.timing(labelAnim, {
       toValue: isLabelFloated ? 1 : 0,
       duration: 150,
       useNativeDriver: import_react_native26.Platform.OS !== "web"
     }).start();
   }, [isLabelFloated, labelAnim]);
-  const labelScale = (0, import_react14.useMemo)(() => {
+  const labelScale = (0, import_react15.useMemo)(() => {
     const restingScale = theme.typography.bodyLarge.fontSize / theme.typography.bodySmall.fontSize;
     return labelAnim.interpolate({
       inputRange: [0, 1],
@@ -2970,7 +3001,7 @@ function TextField({
     theme.typography.bodyLarge.fontSize,
     theme.typography.bodySmall.fontSize
   ]);
-  const labelTranslateY = (0, import_react14.useMemo)(() => {
+  const labelTranslateY = (0, import_react15.useMemo)(() => {
     const restingTop = isFilled ? labelPositions.filledRestingTop : labelPositions.outlinedRestingTop;
     const floatedTop = isFilled ? labelPositions.filledFloatedTop : labelPositions.outlinedFloatedTop;
     const restingOffset = restingTop - floatedTop;
@@ -2981,7 +3012,7 @@ function TextField({
   }, [isFilled, labelAnim]);
   const labelStart = theme.spacing.md + (hasLeadingIcon ? ICON_WITH_GAP - theme.spacing.md : 0);
   const labelStaticTop = isFilled ? labelPositions.filledFloatedTop : labelPositions.outlinedFloatedTop;
-  const handleChangeText = (0, import_react14.useCallback)(
+  const handleChangeText = (0, import_react15.useCallback)(
     (text) => {
       if (!isControlled) {
         setInternalHasText(text !== "");
@@ -2990,7 +3021,7 @@ function TextField({
     },
     [isControlled, onChangeText]
   );
-  const handleFocus = (0, import_react14.useCallback)(
+  const handleFocus = (0, import_react15.useCallback)(
     (event) => {
       if (isDisabled) return;
       setIsFocused(true);
@@ -2998,14 +3029,14 @@ function TextField({
     },
     [isDisabled, onFocus]
   );
-  const handleBlur = (0, import_react14.useCallback)(
+  const handleBlur = (0, import_react15.useCallback)(
     (event) => {
       setIsFocused(false);
       onBlur == null ? void 0 : onBlur(event);
     },
     [onBlur]
   );
-  const handleContainerPress = (0, import_react14.useCallback)(() => {
+  const handleContainerPress = (0, import_react15.useCallback)(() => {
     var _a;
     if (!isDisabled) {
       (_a = inputRef.current) == null ? void 0 : _a.focus();
@@ -3014,7 +3045,7 @@ function TextField({
   const labelColor = isDisabled ? colors.disabledLabelColor : isError ? colors.errorLabelColor : isFocused ? colors.focusedLabelColor : colors.labelColor;
   const labelBackgroundColor = variant === "outlined" && isLabelFloated ? theme.colors.surface : "transparent";
   const iconColor = isDisabled ? colors.disabledIconColor : isError ? colors.errorIconColor : contentColor != null ? contentColor : colors.iconColor;
-  const containerStyle = (0, import_react14.useMemo)(
+  const containerStyle = (0, import_react15.useMemo)(
     () => [
       styles2.container,
       containerColor && !isDisabled ? { backgroundColor: containerColor } : void 0,
@@ -3024,7 +3055,7 @@ function TextField({
     ],
     [styles2, isFocused, isError, isDisabled, containerColor]
   );
-  const indicatorStyle = (0, import_react14.useMemo)(
+  const indicatorStyle = (0, import_react15.useMemo)(
     () => [
       styles2.indicator,
       isFocused && styles2.indicatorFocused,
@@ -3037,7 +3068,7 @@ function TextField({
   return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_react_native26.View, { style: [styles2.root, style], children: [
     /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native26.Pressable, { onPress: handleContainerPress, disabled: isDisabled, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_react_native26.View, { style: containerStyle, children: [
       leadingIcon ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native26.View, { style: styles2.leadingIcon, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-        import_MaterialCommunityIcons6.default,
+        MaterialCommunityIcons,
         {
           name: leadingIcon,
           size: ICON_SIZE2,
@@ -3086,7 +3117,7 @@ function TextField({
           hitSlop: 12,
           style: styles2.trailingIconPressable,
           children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native26.View, { style: styles2.trailingIcon, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-            import_MaterialCommunityIcons6.default,
+            MaterialCommunityIcons,
             {
               name: trailingIcon,
               size: ICON_SIZE2,
@@ -3132,7 +3163,7 @@ function TextField({
 }
 
 // src/list/List.tsx
-var import_react15 = require("react");
+var import_react16 = require("react");
 var import_react_native28 = require("react-native");
 var import_core15 = require("@onlynative/core");
 
@@ -3251,12 +3282,12 @@ function createDividerStyles(theme, inset) {
 var import_jsx_runtime16 = require("react/jsx-runtime");
 function List({ children, style, ...props }) {
   const theme = (0, import_core15.useTheme)();
-  const styles2 = (0, import_react15.useMemo)(() => createListStyles(theme), [theme]);
+  const styles2 = (0, import_react16.useMemo)(() => createListStyles(theme), [theme]);
   return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_native28.View, { ...props, style: [styles2.container, style], children });
 }
 
 // src/list/ListItem.tsx
-var import_react16 = require("react");
+var import_react17 = require("react");
 var import_react_native29 = require("react-native");
 var import_core16 = require("@onlynative/core");
 var import_jsx_runtime17 = require("react/jsx-runtime");
@@ -3285,7 +3316,7 @@ function ListItem({
   const isInteractive = onPress !== void 0;
   const theme = (0, import_core16.useTheme)();
   const lines = getLines(supportingText, overlineText, supportingTextNumberOfLines);
-  const styles2 = (0, import_react16.useMemo)(
+  const styles2 = (0, import_react17.useMemo)(
     () => createListItemStyles(theme, lines, containerColor),
     [theme, lines, containerColor]
   );
@@ -3335,7 +3366,7 @@ function ListItem({
 }
 
 // src/list/ListDivider.tsx
-var import_react17 = require("react");
+var import_react18 = require("react");
 var import_react_native30 = require("react-native");
 var import_core17 = require("@onlynative/core");
 var import_jsx_runtime18 = require("react/jsx-runtime");
@@ -3345,7 +3376,7 @@ function ListDivider({
   ...props
 }) {
   const theme = (0, import_core17.useTheme)();
-  const styles2 = (0, import_react17.useMemo)(
+  const styles2 = (0, import_react18.useMemo)(
     () => createDividerStyles(theme, inset),
     [theme, inset]
   );