@onlynative/components 0.1.0-alpha.2 → 0.1.0

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,100 +25,31 @@ __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_native2 = require("react-native");
 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");
+var import_utils2 = require("@onlynative/utils");
 
 // src/button/styles.ts
-var import_react_native2 = require("react-native");
-
-// src/utils/color.ts
-function parseHexColor(color) {
-  const normalized = color.replace("#", "");
-  if (normalized.length !== 6 && normalized.length !== 8) {
-    return null;
-  }
-  const r = Number.parseInt(normalized.slice(0, 2), 16);
-  const g = Number.parseInt(normalized.slice(2, 4), 16);
-  const b = Number.parseInt(normalized.slice(4, 6), 16);
-  if (Number.isNaN(r) || Number.isNaN(g) || Number.isNaN(b)) {
-    return null;
-  }
-  return { r, g, b };
-}
-function clampAlpha(alpha) {
-  return Math.max(0, Math.min(1, alpha));
-}
-function alphaColor(color, alpha) {
-  const channels = parseHexColor(color);
-  const boundedAlpha = clampAlpha(alpha);
-  if (!channels) {
-    return color;
-  }
-  return `rgba(${channels.r}, ${channels.g}, ${channels.b}, ${boundedAlpha})`;
-}
-function blendColor(base, overlay, overlayAlpha) {
-  const baseChannels = parseHexColor(base);
-  const overlayChannels = parseHexColor(overlay);
-  const boundedAlpha = clampAlpha(overlayAlpha);
-  if (!baseChannels || !overlayChannels) {
-    return alphaColor(overlay, boundedAlpha);
-  }
-  const r = Math.round(
-    (1 - boundedAlpha) * baseChannels.r + boundedAlpha * overlayChannels.r
-  );
-  const g = Math.round(
-    (1 - boundedAlpha) * baseChannels.g + boundedAlpha * overlayChannels.g
-  );
-  const b = Math.round(
-    (1 - boundedAlpha) * baseChannels.b + boundedAlpha * overlayChannels.b
-  );
-  return `rgb(${r}, ${g}, ${b})`;
-}
-
-// src/utils/elevation.ts
 var import_react_native = require("react-native");
-function elevationStyle(level) {
-  if (import_react_native.Platform.OS === "web") {
-    const { shadowOffset, shadowOpacity, shadowRadius } = level;
-    if (shadowOpacity === 0) {
-      return { boxShadow: "none" };
-    }
-    return {
-      boxShadow: `${shadowOffset.width}px ${shadowOffset.height}px ${shadowRadius}px rgba(0, 0, 0, ${shadowOpacity})`
-    };
-  }
-  return {
-    shadowColor: level.shadowColor,
-    shadowOffset: {
-      width: level.shadowOffset.width,
-      height: level.shadowOffset.height
-    },
-    shadowOpacity: level.shadowOpacity,
-    shadowRadius: level.shadowRadius,
-    elevation: level.elevation
-  };
-}
-
-// src/button/styles.ts
+var import_utils = require("@onlynative/utils");
 function getVariantColors(theme, variant) {
-  const disabledContainerColor = alphaColor(theme.colors.onSurface, 0.12);
-  const disabledLabelColor = alphaColor(theme.colors.onSurface, 0.38);
-  const disabledOutlineColor = alphaColor(theme.colors.onSurface, 0.12);
+  const disabledContainerColor = (0, import_utils.alphaColor)(theme.colors.onSurface, 0.12);
+  const disabledLabelColor = (0, import_utils.alphaColor)(theme.colors.onSurface, 0.38);
+  const disabledOutlineColor = (0, import_utils.alphaColor)(theme.colors.onSurface, 0.12);
   if (variant === "outlined") {
     return {
       backgroundColor: "transparent",
       textColor: theme.colors.primary,
       borderColor: theme.colors.outline,
       borderWidth: 1,
-      hoveredBackgroundColor: alphaColor(
+      hoveredBackgroundColor: (0, import_utils.alphaColor)(
         theme.colors.primary,
         theme.stateLayer.hoveredOpacity
       ),
-      pressedBackgroundColor: alphaColor(
+      pressedBackgroundColor: (0, import_utils.alphaColor)(
         theme.colors.primary,
         theme.stateLayer.pressedOpacity
       ),
@@ -143,11 +64,11 @@ function getVariantColors(theme, variant) {
       textColor: theme.colors.primary,
       borderColor: "transparent",
       borderWidth: 0,
-      hoveredBackgroundColor: alphaColor(
+      hoveredBackgroundColor: (0, import_utils.alphaColor)(
         theme.colors.primary,
         theme.stateLayer.hoveredOpacity
       ),
-      pressedBackgroundColor: alphaColor(
+      pressedBackgroundColor: (0, import_utils.alphaColor)(
         theme.colors.primary,
         theme.stateLayer.pressedOpacity
       ),
@@ -162,12 +83,12 @@ function getVariantColors(theme, variant) {
       textColor: theme.colors.primary,
       borderColor: theme.colors.surfaceContainerLow,
       borderWidth: 0,
-      hoveredBackgroundColor: blendColor(
+      hoveredBackgroundColor: (0, import_utils.blendColor)(
         theme.colors.surfaceContainerLow,
         theme.colors.primary,
         theme.stateLayer.hoveredOpacity
       ),
-      pressedBackgroundColor: blendColor(
+      pressedBackgroundColor: (0, import_utils.blendColor)(
         theme.colors.surfaceContainerLow,
         theme.colors.primary,
         theme.stateLayer.pressedOpacity
@@ -183,12 +104,12 @@ function getVariantColors(theme, variant) {
       textColor: theme.colors.onSecondaryContainer,
       borderColor: theme.colors.secondaryContainer,
       borderWidth: 0,
-      hoveredBackgroundColor: blendColor(
+      hoveredBackgroundColor: (0, import_utils.blendColor)(
         theme.colors.secondaryContainer,
         theme.colors.onSecondaryContainer,
         theme.stateLayer.hoveredOpacity
       ),
-      pressedBackgroundColor: blendColor(
+      pressedBackgroundColor: (0, import_utils.blendColor)(
         theme.colors.secondaryContainer,
         theme.colors.onSecondaryContainer,
         theme.stateLayer.pressedOpacity
@@ -203,12 +124,12 @@ function getVariantColors(theme, variant) {
     textColor: theme.colors.onPrimary,
     borderColor: theme.colors.primary,
     borderWidth: 0,
-    hoveredBackgroundColor: blendColor(
+    hoveredBackgroundColor: (0, import_utils.blendColor)(
       theme.colors.primary,
       theme.colors.onPrimary,
       theme.stateLayer.hoveredOpacity
     ),
-    pressedBackgroundColor: blendColor(
+    pressedBackgroundColor: (0, import_utils.blendColor)(
       theme.colors.primary,
       theme.colors.onPrimary,
       theme.stateLayer.pressedOpacity
@@ -240,33 +161,33 @@ function applyColorOverrides(theme, colors, containerColor, contentColor) {
     const overlay = contentColor != null ? contentColor : colors.textColor;
     result.backgroundColor = containerColor;
     result.borderColor = containerColor;
-    result.hoveredBackgroundColor = blendColor(
+    result.hoveredBackgroundColor = (0, import_utils.blendColor)(
       containerColor,
       overlay,
       theme.stateLayer.hoveredOpacity
     );
-    result.pressedBackgroundColor = blendColor(
+    result.pressedBackgroundColor = (0, import_utils.blendColor)(
       containerColor,
       overlay,
       theme.stateLayer.pressedOpacity
     );
   } else if (contentColor) {
     if (colors.backgroundColor === "transparent") {
-      result.hoveredBackgroundColor = alphaColor(
+      result.hoveredBackgroundColor = (0, import_utils.alphaColor)(
         contentColor,
         theme.stateLayer.hoveredOpacity
       );
-      result.pressedBackgroundColor = alphaColor(
+      result.pressedBackgroundColor = (0, import_utils.alphaColor)(
         contentColor,
         theme.stateLayer.pressedOpacity
       );
     } else {
-      result.hoveredBackgroundColor = blendColor(
+      result.hoveredBackgroundColor = (0, import_utils.blendColor)(
         colors.backgroundColor,
         contentColor,
         theme.stateLayer.hoveredOpacity
       );
-      result.pressedBackgroundColor = blendColor(
+      result.pressedBackgroundColor = (0, import_utils.blendColor)(
         colors.backgroundColor,
         contentColor,
         theme.stateLayer.pressedOpacity
@@ -290,11 +211,11 @@ function createStyles(theme, variant, hasLeadingIcon, hasTrailingIcon, container
     hasLeadingIcon,
     hasTrailingIcon
   );
-  const elevationLevel0 = elevationStyle(theme.elevation.level0);
-  const elevationLevel1 = elevationStyle(theme.elevation.level1);
-  const elevationLevel2 = elevationStyle(theme.elevation.level2);
+  const elevationLevel0 = (0, import_utils.elevationStyle)(theme.elevation.level0);
+  const elevationLevel1 = (0, import_utils.elevationStyle)(theme.elevation.level1);
+  const elevationLevel2 = (0, import_utils.elevationStyle)(theme.elevation.level2);
   const baseElevation = variant === "elevated" ? elevationLevel1 : elevationLevel0;
-  return import_react_native2.StyleSheet.create({
+  return import_react_native.StyleSheet.create({
     container: {
       alignSelf: "flex-start",
       alignItems: "center",
@@ -393,8 +314,9 @@ function Button({
     ),
     [theme, variant, hasLeading, hasTrailing, containerColor, contentColor]
   );
+  const MaterialCommunityIcons = leadingIcon || trailingIcon ? (0, import_utils2.getMaterialCommunityIcons)() : null;
   const resolvedIconColor = (0, import_react.useMemo)(() => {
-    const base = import_react_native4.StyleSheet.flatten([
+    const base = import_react_native3.StyleSheet.flatten([
       styles.label,
       isDisabled ? styles.disabledLabel : void 0
     ]);
@@ -409,12 +331,12 @@ function Button({
     [isDisabled, styles.disabledLabel, styles.label, labelStyleOverride]
   );
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-    import_react_native3.Pressable,
+    import_react_native2.Pressable,
     {
       ...props,
       accessibilityRole: "button",
       accessibilityState: { disabled: isDisabled },
-      hitSlop: import_react_native3.Platform.OS === "web" ? void 0 : 4,
+      hitSlop: import_react_native2.Platform.OS === "web" ? void 0 : 4,
       disabled: isDisabled,
       style: resolveStyle(
         styles.container,
@@ -426,7 +348,7 @@ function Button({
       ),
       children: [
         leadingIcon ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          import_MaterialCommunityIcons.default,
+          MaterialCommunityIcons,
           {
             name: leadingIcon,
             size: iconSize,
@@ -434,9 +356,9 @@ function Button({
             style: styles.leadingIcon
           }
         ) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native5.Text, { style: computedLabelStyle, children }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native4.Text, { style: computedLabelStyle, children }),
         trailingIcon ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          import_MaterialCommunityIcons.default,
+          MaterialCommunityIcons,
           {
             name: trailingIcon,
             size: iconSize,

package/dist/card/index.js

@@ -26,94 +26,25 @@ module.exports = __toCommonJS(card_exports);
 
 // src/card/Card.tsx
 var import_react = require("react");
-var import_react_native3 = require("react-native");
+var import_react_native2 = require("react-native");
 var import_core = require("@onlynative/core");
 
 // src/card/styles.ts
-var import_react_native2 = require("react-native");
-
-// src/utils/color.ts
-function parseHexColor(color) {
-  const normalized = color.replace("#", "");
-  if (normalized.length !== 6 && normalized.length !== 8) {
-    return null;
-  }
-  const r = Number.parseInt(normalized.slice(0, 2), 16);
-  const g = Number.parseInt(normalized.slice(2, 4), 16);
-  const b = Number.parseInt(normalized.slice(4, 6), 16);
-  if (Number.isNaN(r) || Number.isNaN(g) || Number.isNaN(b)) {
-    return null;
-  }
-  return { r, g, b };
-}
-function clampAlpha(alpha) {
-  return Math.max(0, Math.min(1, alpha));
-}
-function alphaColor(color, alpha) {
-  const channels = parseHexColor(color);
-  const boundedAlpha = clampAlpha(alpha);
-  if (!channels) {
-    return color;
-  }
-  return `rgba(${channels.r}, ${channels.g}, ${channels.b}, ${boundedAlpha})`;
-}
-function blendColor(base, overlay, overlayAlpha) {
-  const baseChannels = parseHexColor(base);
-  const overlayChannels = parseHexColor(overlay);
-  const boundedAlpha = clampAlpha(overlayAlpha);
-  if (!baseChannels || !overlayChannels) {
-    return alphaColor(overlay, boundedAlpha);
-  }
-  const r = Math.round(
-    (1 - boundedAlpha) * baseChannels.r + boundedAlpha * overlayChannels.r
-  );
-  const g = Math.round(
-    (1 - boundedAlpha) * baseChannels.g + boundedAlpha * overlayChannels.g
-  );
-  const b = Math.round(
-    (1 - boundedAlpha) * baseChannels.b + boundedAlpha * overlayChannels.b
-  );
-  return `rgb(${r}, ${g}, ${b})`;
-}
-
-// src/utils/elevation.ts
 var import_react_native = require("react-native");
-function elevationStyle(level) {
-  if (import_react_native.Platform.OS === "web") {
-    const { shadowOffset, shadowOpacity, shadowRadius } = level;
-    if (shadowOpacity === 0) {
-      return { boxShadow: "none" };
-    }
-    return {
-      boxShadow: `${shadowOffset.width}px ${shadowOffset.height}px ${shadowRadius}px rgba(0, 0, 0, ${shadowOpacity})`
-    };
-  }
-  return {
-    shadowColor: level.shadowColor,
-    shadowOffset: {
-      width: level.shadowOffset.width,
-      height: level.shadowOffset.height
-    },
-    shadowOpacity: level.shadowOpacity,
-    shadowRadius: level.shadowRadius,
-    elevation: level.elevation
-  };
-}
-
-// src/card/styles.ts
+var import_utils = require("@onlynative/utils");
 function getVariantColors(theme, variant) {
-  const disabledContainerColor = alphaColor(theme.colors.onSurface, 0.12);
-  const disabledOutlineColor = alphaColor(theme.colors.onSurface, 0.12);
+  const disabledContainerColor = (0, import_utils.alphaColor)(theme.colors.onSurface, 0.12);
+  const disabledOutlineColor = (0, import_utils.alphaColor)(theme.colors.onSurface, 0.12);
   if (variant === "outlined") {
     return {
       backgroundColor: theme.colors.surface,
       borderColor: theme.colors.outline,
       borderWidth: 1,
-      hoveredBackgroundColor: alphaColor(
+      hoveredBackgroundColor: (0, import_utils.alphaColor)(
         theme.colors.onSurface,
         theme.stateLayer.hoveredOpacity
       ),
-      pressedBackgroundColor: alphaColor(
+      pressedBackgroundColor: (0, import_utils.alphaColor)(
         theme.colors.onSurface,
         theme.stateLayer.pressedOpacity
       ),
@@ -126,12 +57,12 @@ function getVariantColors(theme, variant) {
       backgroundColor: theme.colors.surfaceContainerHighest,
       borderColor: "transparent",
       borderWidth: 0,
-      hoveredBackgroundColor: blendColor(
+      hoveredBackgroundColor: (0, import_utils.blendColor)(
         theme.colors.surfaceContainerHighest,
         theme.colors.onSurface,
         theme.stateLayer.hoveredOpacity
       ),
-      pressedBackgroundColor: blendColor(
+      pressedBackgroundColor: (0, import_utils.blendColor)(
         theme.colors.surfaceContainerHighest,
         theme.colors.onSurface,
         theme.stateLayer.pressedOpacity
@@ -144,12 +75,12 @@ function getVariantColors(theme, variant) {
     backgroundColor: theme.colors.surface,
     borderColor: "transparent",
     borderWidth: 0,
-    hoveredBackgroundColor: blendColor(
+    hoveredBackgroundColor: (0, import_utils.blendColor)(
       theme.colors.surface,
       theme.colors.onSurface,
       theme.stateLayer.hoveredOpacity
     ),
-    pressedBackgroundColor: blendColor(
+    pressedBackgroundColor: (0, import_utils.blendColor)(
       theme.colors.surface,
       theme.colors.onSurface,
       theme.stateLayer.pressedOpacity
@@ -165,12 +96,12 @@ function applyColorOverrides(theme, colors, containerColor) {
     backgroundColor: containerColor,
     borderColor: containerColor,
     borderWidth: 0,
-    hoveredBackgroundColor: blendColor(
+    hoveredBackgroundColor: (0, import_utils.blendColor)(
       containerColor,
       theme.colors.onSurface,
       theme.stateLayer.hoveredOpacity
     ),
-    pressedBackgroundColor: blendColor(
+    pressedBackgroundColor: (0, import_utils.blendColor)(
       containerColor,
       theme.colors.onSurface,
       theme.stateLayer.pressedOpacity
@@ -180,11 +111,11 @@ function applyColorOverrides(theme, colors, containerColor) {
 function createStyles(theme, variant, containerColor) {
   const baseColors = getVariantColors(theme, variant);
   const colors = applyColorOverrides(theme, baseColors, containerColor);
-  const elevationLevel0 = elevationStyle(theme.elevation.level0);
-  const elevationLevel1 = elevationStyle(theme.elevation.level1);
-  const elevationLevel2 = elevationStyle(theme.elevation.level2);
+  const elevationLevel0 = (0, import_utils.elevationStyle)(theme.elevation.level0);
+  const elevationLevel1 = (0, import_utils.elevationStyle)(theme.elevation.level1);
+  const elevationLevel2 = (0, import_utils.elevationStyle)(theme.elevation.level2);
   const baseElevation = variant === "elevated" ? elevationLevel1 : elevationLevel0;
-  return import_react_native2.StyleSheet.create({
+  return import_react_native.StyleSheet.create({
     container: {
       borderRadius: theme.shape.cornerMedium,
       backgroundColor: colors.backgroundColor,
@@ -234,7 +165,7 @@ function Card({
     [theme, variant, containerColor]
   );
   if (!isInteractive) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native3.View, { ...props, style: [styles.container, style], children });
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native2.View, { ...props, style: [styles.container, style], children });
   }
   const resolvedStyle = (state) => [
     styles.container,
@@ -245,16 +176,16 @@ function Card({
     typeof style === "function" ? style(state) : style
   ];
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_react_native3.Pressable,
+    import_react_native2.Pressable,
     {
       ...props,
       role: "button",
       accessibilityState: { disabled: isDisabled },
-      hitSlop: import_react_native3.Platform.OS === "web" ? void 0 : 4,
+      hitSlop: import_react_native2.Platform.OS === "web" ? void 0 : 4,
       disabled: isDisabled,
       onPress,
       style: resolvedStyle,
-      children: isDisabled ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native3.View, { style: styles.disabledContent, children }) : children
+      children: isDisabled ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native2.View, { style: styles.disabledContent, children }) : children
     }
   );
 }

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,73 +25,28 @@ __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");
+var import_utils2 = require("@onlynative/utils");
 
 // src/checkbox/styles.ts
 var import_react_native = require("react-native");
-
-// src/utils/color.ts
-function parseHexColor(color) {
-  const normalized = color.replace("#", "");
-  if (normalized.length !== 6 && normalized.length !== 8) {
-    return null;
-  }
-  const r = Number.parseInt(normalized.slice(0, 2), 16);
-  const g = Number.parseInt(normalized.slice(2, 4), 16);
-  const b = Number.parseInt(normalized.slice(4, 6), 16);
-  if (Number.isNaN(r) || Number.isNaN(g) || Number.isNaN(b)) {
-    return null;
-  }
-  return { r, g, b };
-}
-function clampAlpha(alpha) {
-  return Math.max(0, Math.min(1, alpha));
-}
-function alphaColor(color, alpha) {
-  const channels = parseHexColor(color);
-  const boundedAlpha = clampAlpha(alpha);
-  if (!channels) {
-    return color;
-  }
-  return `rgba(${channels.r}, ${channels.g}, ${channels.b}, ${boundedAlpha})`;
-}
-function blendColor(base, overlay, overlayAlpha) {
-  const baseChannels = parseHexColor(base);
-  const overlayChannels = parseHexColor(overlay);
-  const boundedAlpha = clampAlpha(overlayAlpha);
-  if (!baseChannels || !overlayChannels) {
-    return alphaColor(overlay, boundedAlpha);
-  }
-  const r = Math.round(
-    (1 - boundedAlpha) * baseChannels.r + boundedAlpha * overlayChannels.r
-  );
-  const g = Math.round(
-    (1 - boundedAlpha) * baseChannels.g + boundedAlpha * overlayChannels.g
-  );
-  const b = Math.round(
-    (1 - boundedAlpha) * baseChannels.b + boundedAlpha * overlayChannels.b
-  );
-  return `rgb(${r}, ${g}, ${b})`;
-}
-
-// src/checkbox/styles.ts
+var import_utils = require("@onlynative/utils");
 function getColors(theme, checked) {
-  const disabledOnSurface38 = alphaColor(theme.colors.onSurface, 0.38);
+  const disabledOnSurface38 = (0, import_utils.alphaColor)(theme.colors.onSurface, 0.38);
   if (checked) {
     return {
       backgroundColor: theme.colors.primary,
       borderColor: "transparent",
       borderWidth: 0,
       iconColor: theme.colors.onPrimary,
-      hoveredBackgroundColor: blendColor(
+      hoveredBackgroundColor: (0, import_utils.blendColor)(
         theme.colors.primary,
         theme.colors.onPrimary,
         theme.stateLayer.hoveredOpacity
       ),
-      pressedBackgroundColor: blendColor(
+      pressedBackgroundColor: (0, import_utils.blendColor)(
         theme.colors.primary,
         theme.colors.onPrimary,
         theme.stateLayer.pressedOpacity
@@ -117,11 +62,11 @@ function getColors(theme, checked) {
     borderColor: theme.colors.onSurfaceVariant,
     borderWidth: 2,
     iconColor: "transparent",
-    hoveredBackgroundColor: alphaColor(
+    hoveredBackgroundColor: (0, import_utils.alphaColor)(
       theme.colors.onSurface,
       theme.stateLayer.hoveredOpacity
     ),
-    pressedBackgroundColor: alphaColor(
+    pressedBackgroundColor: (0, import_utils.alphaColor)(
       theme.colors.onSurface,
       theme.stateLayer.pressedOpacity
     ),
@@ -141,12 +86,12 @@ function applyColorOverrides(theme, colors, containerColor, contentColor) {
     const overlay = contentColor != null ? contentColor : colors.iconColor;
     result.backgroundColor = containerColor;
     result.borderColor = containerColor;
-    result.hoveredBackgroundColor = blendColor(
+    result.hoveredBackgroundColor = (0, import_utils.blendColor)(
       containerColor,
       overlay,
       theme.stateLayer.hoveredOpacity
     );
-    result.pressedBackgroundColor = blendColor(
+    result.pressedBackgroundColor = (0, import_utils.blendColor)(
       containerColor,
       overlay,
       theme.stateLayer.pressedOpacity
@@ -237,6 +182,7 @@ function Checkbox({
 }) {
   const isDisabled = Boolean(disabled);
   const isChecked = Boolean(value);
+  const MaterialCommunityIcons = isChecked ? (0, import_utils2.getMaterialCommunityIcons)() : null;
   const theme = (0, import_core.useTheme)();
   const styles = (0, import_react.useMemo)(
     () => createStyles(theme, isChecked, containerColor, contentColor),
@@ -275,7 +221,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,