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

package/README.md

@@ -8,7 +8,7 @@ Material Design 3 UI components for React Native, part of [OnlyNative UI](https:
 pnpm add @onlynative/core @onlynative/components @expo/vector-icons react-native-safe-area-context
 ```
 
-Wrap your app with `MaterialProvider` from `@onlynative/core` (see [@onlynative/core](https://www.npmjs.com/package/@onlynative/core)).
+Wrap your app with `ThemeProvider` from `@onlynative/core` (see [@onlynative/core](https://www.npmjs.com/package/@onlynative/core)).
 
 ## Import
 

package/dist/appbar/index.js

@@ -1,9 +1,7 @@
 "use strict";
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -17,14 +15,6 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/appbar/index.ts
@@ -41,11 +31,31 @@ var import_react_native_safe_area_context = require("react-native-safe-area-cont
 var import_core4 = require("@onlynative/core");
 
 // src/icon-button/IconButton.tsx
-var import_MaterialCommunityIcons = __toESM(require("@expo/vector-icons/MaterialCommunityIcons"));
 var import_react = require("react");
 var import_react_native2 = require("react-native");
 var import_core = 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/icon-button/styles.ts
 var import_react_native = require("react-native");
 
@@ -500,6 +510,7 @@ function IconButton({
   ...props
 }) {
   var _a;
+  const MaterialCommunityIcons = getMaterialCommunityIcons();
   const theme = (0, import_core.useTheme)();
   const styles = (0, import_react.useMemo)(() => createStyles(theme), [theme]);
   const isDisabled = Boolean(disabled);
@@ -565,7 +576,7 @@ function IconButton({
         return base;
       },
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_MaterialCommunityIcons.default,
+        MaterialCommunityIcons,
         {
           name: displayIcon,
           size: iconPixelSize,
@@ -600,17 +611,26 @@ function Typography({
 }) {
   const theme = (0, import_core2.useTheme)();
   const typographyStyle = theme.typography[variant];
-  const colorStyle = (0, import_react2.useMemo)(
-    () => ({ color: color != null ? color : theme.colors.onSurface }),
-    [color, theme.colors.onSurface]
-  );
   const resolvedRole = accessibilityRole != null ? accessibilityRole : HEADING_VARIANTS.has(variant) ? "header" : void 0;
+  const lineHeightFix = (0, import_react2.useMemo)(() => {
+    if (!style) return void 0;
+    const flat = import_react_native3.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_runtime2.jsx)(
     Component,
     {
       ...textProps,
       accessibilityRole: resolvedRole,
-      style: [typographyStyle, colorStyle, style],
+      style: [
+        { color: theme.colors.onSurface },
+        typographyStyle,
+        style,
+        lineHeightFix,
+        color != null ? { color } : void 0
+      ],
       children
     }
   );

package/dist/button/index.js

@@ -1,9 +1,7 @@
 "use strict";
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -17,14 +15,6 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/button/index.ts
@@ -35,13 +25,33 @@ __export(button_exports, {
 module.exports = __toCommonJS(button_exports);
 
 // src/button/Button.tsx
-var import_MaterialCommunityIcons = __toESM(require("@expo/vector-icons/MaterialCommunityIcons"));
 var import_react = require("react");
 var import_react_native3 = require("react-native");
 var import_react_native4 = require("react-native");
 var import_react_native5 = require("react-native");
 var import_core = 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_native2 = require("react-native");
 
@@ -393,6 +403,7 @@ function Button({
     ),
     [theme, variant, hasLeading, hasTrailing, containerColor, contentColor]
   );
+  const MaterialCommunityIcons = leadingIcon || trailingIcon ? getMaterialCommunityIcons() : null;
   const resolvedIconColor = (0, import_react.useMemo)(() => {
     const base = import_react_native4.StyleSheet.flatten([
       styles.label,
@@ -426,7 +437,7 @@ function Button({
       ),
       children: [
         leadingIcon ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          import_MaterialCommunityIcons.default,
+          MaterialCommunityIcons,
           {
             name: leadingIcon,
             size: iconSize,
@@ -436,7 +447,7 @@ function Button({
         ) : null,
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native5.Text, { style: computedLabelStyle, children }),
         trailingIcon ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          import_MaterialCommunityIcons.default,
+          MaterialCommunityIcons,
           {
             name: trailingIcon,
             size: iconSize,

package/dist/checkbox/index.js

@@ -1,9 +1,7 @@
 "use strict";
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -17,14 +15,6 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/checkbox/index.ts
@@ -35,11 +25,31 @@ __export(checkbox_exports, {
 module.exports = __toCommonJS(checkbox_exports);
 
 // src/checkbox/Checkbox.tsx
-var import_MaterialCommunityIcons = __toESM(require("@expo/vector-icons/MaterialCommunityIcons"));
 var import_react = require("react");
 var import_react_native2 = require("react-native");
 var import_core = 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/checkbox/styles.ts
 var import_react_native = require("react-native");
 
@@ -237,6 +247,7 @@ function Checkbox({
 }) {
   const isDisabled = Boolean(disabled);
   const isChecked = Boolean(value);
+  const MaterialCommunityIcons = isChecked ? getMaterialCommunityIcons() : null;
   const theme = (0, import_core.useTheme)();
   const styles = (0, import_react.useMemo)(
     () => createStyles(theme, isChecked, containerColor, contentColor),
@@ -275,7 +286,7 @@ function Checkbox({
         style
       ),
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native2.View, { style: [styles.box, isDisabled ? styles.disabledBox : void 0], children: isChecked ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_MaterialCommunityIcons.default,
+        MaterialCommunityIcons,
         {
           name: "check",
           size: 14,

package/dist/chip/index.js

@@ -1,9 +1,7 @@
 "use strict";
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -17,14 +15,6 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/chip/index.ts
@@ -35,11 +25,31 @@ __export(chip_exports, {
 module.exports = __toCommonJS(chip_exports);
 
 // src/chip/Chip.tsx
-var import_MaterialCommunityIcons = __toESM(require("@expo/vector-icons/MaterialCommunityIcons"));
 var import_react = require("react");
 var import_react_native3 = require("react-native");
 var import_core = 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/chip/styles.ts
 var import_react_native2 = require("react-native");
 
@@ -336,6 +346,8 @@ 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_core.useTheme)();
   const styles = (0, import_react.useMemo)(
     () => createStyles(
@@ -380,7 +392,7 @@ function Chip({
     }
     if (leadingIcon) {
       return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_MaterialCommunityIcons.default,
+        MaterialCommunityIcons,
         {
           name: leadingIcon,
           size: iconSize,
@@ -391,7 +403,7 @@ function Chip({
     }
     if (variant === "filter" && isSelected) {
       return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_MaterialCommunityIcons.default,
+        MaterialCommunityIcons,
         {
           name: "check",
           size: iconSize,
@@ -433,7 +445,7 @@ function Chip({
             hitSlop: 4,
             style: styles.closeButton,
             children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              import_MaterialCommunityIcons.default,
+              MaterialCommunityIcons,
               {
                 name: "close",
                 size: iconSize,

package/dist/icon-button/index.js

@@ -1,9 +1,7 @@
 "use strict";
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -17,14 +15,6 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/icon-button/index.ts
@@ -35,11 +25,31 @@ __export(icon_button_exports, {
 module.exports = __toCommonJS(icon_button_exports);
 
 // src/icon-button/IconButton.tsx
-var import_MaterialCommunityIcons = __toESM(require("@expo/vector-icons/MaterialCommunityIcons"));
 var import_react = require("react");
 var import_react_native2 = require("react-native");
 var import_core = 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/icon-button/styles.ts
 var import_react_native = require("react-native");
 
@@ -494,6 +504,7 @@ function IconButton({
   ...props
 }) {
   var _a;
+  const MaterialCommunityIcons = getMaterialCommunityIcons();
   const theme = (0, import_core.useTheme)();
   const styles = (0, import_react.useMemo)(() => createStyles(theme), [theme]);
   const isDisabled = Boolean(disabled);
@@ -559,7 +570,7 @@ function IconButton({
         return base;
       },
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_MaterialCommunityIcons.default,
+        MaterialCommunityIcons,
         {
           name: displayIcon,
           size: iconPixelSize,

package/dist/index.js

@@ -75,17 +75,26 @@ function Typography({
 }) {
   const theme = (0, import_core.useTheme)();
   const typographyStyle = theme.typography[variant];
-  const colorStyle = (0, import_react.useMemo)(
-    () => ({ color: color != null ? color : theme.colors.onSurface }),
-    [color, theme.colors.onSurface]
-  );
   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,
     {
       ...textProps,
       accessibilityRole: resolvedRole,
-      style: [typographyStyle, colorStyle, style],
+      style: [
+        { color: theme.colors.onSurface },
+        typographyStyle,
+        style,
+        lineHeightFix,
+        color != null ? { color } : void 0
+      ],
       children
     }
   );
@@ -327,13 +336,33 @@ function Grid({
 }
 
 // src/button/Button.tsx
-var import_MaterialCommunityIcons = __toESM(require("@expo/vector-icons/MaterialCommunityIcons"));
 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");
 
@@ -685,6 +714,7 @@ function Button({
     ),
     [theme, variant, hasLeading, hasTrailing, containerColor, contentColor]
   );
+  const MaterialCommunityIcons = leadingIcon || trailingIcon ? getMaterialCommunityIcons() : null;
   const resolvedIconColor = (0, import_react7.useMemo)(() => {
     const base = import_react_native8.StyleSheet.flatten([
       styles2.label,
@@ -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,7 +772,6 @@ function Button({
 }
 
 // src/icon-button/IconButton.tsx
-var import_MaterialCommunityIcons2 = __toESM(require("@expo/vector-icons/MaterialCommunityIcons"));
 var import_react8 = require("react");
 var import_react_native11 = require("react-native");
 var import_core6 = require("@onlynative/core");
@@ -1155,6 +1184,7 @@ function IconButton({
   ...props
 }) {
   var _a;
+  const MaterialCommunityIcons = getMaterialCommunityIcons();
   const theme = (0, import_core6.useTheme)();
   const styles2 = (0, import_react8.useMemo)(() => createStyles2(theme), [theme]);
   const isDisabled = Boolean(disabled);
@@ -1220,7 +1250,7 @@ function IconButton({
         return base;
       },
       children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-        import_MaterialCommunityIcons2.default,
+        MaterialCommunityIcons,
         {
           name: displayIcon,
           size: iconPixelSize,
@@ -1737,7 +1767,6 @@ function Card({
 }
 
 // src/chip/Chip.tsx
-var import_MaterialCommunityIcons3 = __toESM(require("@expo/vector-icons/MaterialCommunityIcons"));
 var import_react11 = require("react");
 var import_react_native18 = require("react-native");
 var import_core10 = require("@onlynative/core");
@@ -1968,6 +1997,8 @@ 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_react11.useMemo)(
     () => createStyles5(
@@ -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,7 +2111,6 @@ function Chip({
 }
 
 // src/checkbox/Checkbox.tsx
-var import_MaterialCommunityIcons4 = __toESM(require("@expo/vector-icons/MaterialCommunityIcons"));
 var import_react12 = require("react");
 var import_react_native20 = require("react-native");
 var import_core11 = require("@onlynative/core");
@@ -2236,6 +2266,7 @@ 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_react12.useMemo)(
     () => createStyles6(theme, isChecked, containerColor, contentColor),
@@ -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,
@@ -2479,7 +2510,6 @@ function Radio({
 }
 
 // src/switch/Switch.tsx
-var import_MaterialCommunityIcons5 = __toESM(require("@expo/vector-icons/MaterialCommunityIcons"));
 var import_react14 = require("react");
 var import_react_native24 = require("react-native");
 var import_core13 = require("@onlynative/core");
@@ -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,7 +2740,6 @@ function Switch({
 }
 
 // src/text-field/TextField.tsx
-var import_MaterialCommunityIcons6 = __toESM(require("@expo/vector-icons/MaterialCommunityIcons"));
 var import_react15 = require("react");
 var import_react_native26 = require("react-native");
 var import_core14 = require("@onlynative/core");
@@ -2938,6 +2968,7 @@ function TextField({
   const isError = Boolean(error) || Boolean(errorText);
   const isFilled = variant === "filled";
   const hasLeadingIcon = Boolean(leadingIcon);
+  const MaterialCommunityIcons = leadingIcon || trailingIcon ? getMaterialCommunityIcons() : null;
   const { colors, styles: styles2 } = (0, import_react15.useMemo)(
     () => createStyles9(theme, variant),
     [theme, variant]
@@ -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,