react-native-ensys-camera-x 1.0.7

package/lib/module/defaultIcons.js

@@ -0,0 +1,2259 @@
+"use strict";
+
+/**
+ * Default icon implementations built entirely from React Native primitives.
+ *
+ * NO external dependencies required:
+ * - No react-native-vector-icons
+ * - No @expo/vector-icons
+ * - No react-native-svg
+ * - No custom assets or image files
+ *
+ * All icons are drawn using View and simple geometric shapes.
+ * This ensures the plugin works anywhere React Native works, with zero
+ * additional setup or configuration.
+ */
+
+import React from 'react';
+import { View, Text, Animated } from 'react-native';
+import { DEFAULT_ICON_COLOR, DEFAULT_ICON_SIZE, DEFAULT_ICON_STROKE_WIDTH } from "./icons.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Centralized icon defaults — see src/icons.tsx. Components never hardcode
+// sizes/colors/stroke widths; they all flow from the single icon configuration.
+const DEFAULT_SIZE = DEFAULT_ICON_SIZE;
+const DEFAULT_COLOR = DEFAULT_ICON_COLOR;
+const DEFAULT_STROKE = DEFAULT_ICON_STROKE_WIDTH;
+
+// ============================================================================
+// Utility: Create icon wrappers
+// ============================================================================
+
+/**
+ * Base wrapper for all icons.
+ * Ensures consistent sizing and layout.
+ */
+const IconWrapper = ({
+  size = DEFAULT_SIZE,
+  style,
+  children
+}) => /*#__PURE__*/_jsx(View, {
+  style: [{
+    width: size,
+    height: size,
+    alignItems: 'center',
+    justifyContent: 'center',
+    position: 'relative'
+  }, style],
+  children: children
+});
+
+// ============================================================================
+// Common/Control Icons
+// ============================================================================
+
+/** X icon / close button */
+export const CloseIcon = ({
+  size = DEFAULT_SIZE,
+  color = DEFAULT_COLOR,
+  strokeWidth = DEFAULT_STROKE,
+  style
+}) => {
+  const lineLength = size * 0.55;
+  return /*#__PURE__*/_jsxs(IconWrapper, {
+    size: size,
+    style: style,
+    children: [/*#__PURE__*/_jsx(View, {
+      style: {
+        position: 'absolute',
+        width: lineLength,
+        height: strokeWidth,
+        backgroundColor: color,
+        transform: [{
+          rotate: '45deg'
+        }]
+      }
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
+        position: 'absolute',
+        width: lineLength,
+        height: strokeWidth,
+        backgroundColor: color,
+        transform: [{
+          rotate: '-45deg'
+        }]
+      }
+    })]
+  });
+};
+
+/** Left arrow / back button */
+export const BackIcon = ({
+  size = DEFAULT_SIZE,
+  color = DEFAULT_COLOR,
+  strokeWidth = DEFAULT_STROKE,
+  style
+}) => {
+  const arrowSize = size * 0.6;
+  return /*#__PURE__*/_jsxs(IconWrapper, {
+    size: size,
+    style: style,
+    children: [/*#__PURE__*/_jsx(View, {
+      style: {
+        position: 'absolute',
+        width: arrowSize,
+        height: strokeWidth,
+        backgroundColor: color
+      }
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
+        position: 'absolute',
+        left: size * 0.2,
+        top: size * 0.35,
+        width: size * 0.3,
+        height: strokeWidth,
+        backgroundColor: color,
+        transform: [{
+          rotate: '45deg'
+        }]
+      }
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
+        position: 'absolute',
+        left: size * 0.2,
+        bottom: size * 0.35,
+        width: size * 0.3,
+        height: strokeWidth,
+        backgroundColor: color,
+        transform: [{
+          rotate: '-45deg'
+        }]
+      }
+    })]
+  });
+};
+
+/** Checkmark / done button */
+export const DoneIcon = ({
+  size = DEFAULT_SIZE,
+  color = DEFAULT_COLOR,
+  strokeWidth = DEFAULT_STROKE,
+  style
+}) => {
+  return /*#__PURE__*/_jsxs(IconWrapper, {
+    size: size,
+    style: style,
+    children: [/*#__PURE__*/_jsx(View, {
+      style: {
+        position: 'absolute',
+        left: size * 0.35,
+        width: strokeWidth,
+        height: size * 0.4,
+        backgroundColor: color,
+        transform: [{
+          rotate: '-45deg'
+        }]
+      }
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
+        position: 'absolute',
+        left: size * 0.4,
+        width: size * 0.5,
+        height: strokeWidth,
+        backgroundColor: color,
+        transform: [{
+          rotate: '45deg'
+        }]
+      }
+    })]
+  });
+};
+
+/** Cancel / stop button */
+export const CancelIcon = ({
+  size = DEFAULT_SIZE,
+  color = DEFAULT_COLOR,
+  strokeWidth = DEFAULT_STROKE,
+  style
+}) => {
+  const circleSize = size * 0.8;
+  return /*#__PURE__*/_jsx(IconWrapper, {
+    size: size,
+    style: style,
+    children: /*#__PURE__*/_jsxs(View, {
+      style: {
+        width: circleSize,
+        height: circleSize,
+        borderRadius: circleSize / 2,
+        borderWidth: strokeWidth,
+        borderColor: color,
+        alignItems: 'center',
+        justifyContent: 'center'
+      },
+      children: [/*#__PURE__*/_jsx(View, {
+        style: {
+          position: 'absolute',
+          width: circleSize * 0.5,
+          height: strokeWidth,
+          backgroundColor: color,
+          transform: [{
+            rotate: '45deg'
+          }]
+        }
+      }), /*#__PURE__*/_jsx(View, {
+        style: {
+          position: 'absolute',
+          width: circleSize * 0.5,
+          height: strokeWidth,
+          backgroundColor: color,
+          transform: [{
+            rotate: '-45deg'
+          }]
+        }
+      })]
+    })
+  });
+};
+
+// ============================================================================
+// Camera Controls
+// ============================================================================
+
+/** Camera icon */
+export const CameraIcon = ({
+  size = DEFAULT_SIZE,
+  color = DEFAULT_COLOR,
+  strokeWidth = DEFAULT_STROKE,
+  style
+}) => {
+  const bodyW = size * 0.8;
+  const bodyH = size * 0.6;
+  const lensSize = size * 0.3;
+  return /*#__PURE__*/_jsx(IconWrapper, {
+    size: size,
+    style: style,
+    children: /*#__PURE__*/_jsx(View, {
+      style: {
+        width: bodyW,
+        height: bodyH,
+        borderWidth: strokeWidth,
+        borderColor: color,
+        borderRadius: size * 0.12,
+        alignItems: 'center',
+        justifyContent: 'center'
+      },
+      children: /*#__PURE__*/_jsx(View, {
+        style: {
+          width: lensSize,
+          height: lensSize,
+          borderRadius: lensSize / 2,
+          borderWidth: strokeWidth,
+          borderColor: color
+        }
+      })
+    })
+  });
+};
+
+/** Video/camcorder icon */
+export const VideoIcon = ({
+  size = DEFAULT_SIZE,
+  color = DEFAULT_COLOR,
+  strokeWidth = DEFAULT_STROKE,
+  style
+}) => {
+  const mainW = size * 0.7;
+  const mainH = size * 0.55;
+  return /*#__PURE__*/_jsxs(IconWrapper, {
+    size: size,
+    style: style,
+    children: [/*#__PURE__*/_jsx(View, {
+      style: {
+        width: mainW,
+        height: mainH,
+        borderWidth: strokeWidth,
+        borderColor: color,
+        borderRadius: size * 0.08,
+        marginRight: size * 0.15
+      }
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
+        position: 'absolute',
+        right: 0,
+        width: 0,
+        height: 0,
+        borderLeftWidth: size * 0.12,
+        borderTopWidth: size * 0.08,
+        borderBottomWidth: size * 0.08,
+        borderLeftColor: color,
+        borderTopColor: 'transparent',
+        borderBottomColor: 'transparent'
+      }
+    })]
+  });
+};
+
+/** Photo/picture icon */
+export const PhotoIcon = ({
+  size = DEFAULT_SIZE,
+  color = DEFAULT_COLOR,
+  strokeWidth = DEFAULT_STROKE,
+  style
+}) => {
+  return /*#__PURE__*/_jsxs(IconWrapper, {
+    size: size,
+    style: style,
+    children: [/*#__PURE__*/_jsx(View, {
+      style: {
+        width: size * 0.85,
+        height: size * 0.75,
+        borderWidth: strokeWidth,
+        borderColor: color,
+        borderRadius: size * 0.08
+      }
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
+        position: 'absolute',
+        top: size * 0.2,
+        right: size * 0.15,
+        width: size * 0.25,
+        height: size * 0.25,
+        borderRadius: size * 0.25 / 2,
+        borderWidth: strokeWidth,
+        borderColor: color
+      }
+    })]
+  });
+};
+
+/** Flip/mirror camera icon */
+export const FlipIcon = ({
+  size = DEFAULT_SIZE,
+  color = DEFAULT_COLOR,
+  strokeWidth = DEFAULT_STROKE,
+  style
+}) => {
+  return /*#__PURE__*/_jsxs(IconWrapper, {
+    size: size,
+    style: style,
+    children: [/*#__PURE__*/_jsx(View, {
+      style: {
+        position: 'absolute',
+        left: size * 0.1,
+        width: size * 0.25,
+        height: strokeWidth,
+        backgroundColor: color
+      }
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
+        position: 'absolute',
+        left: size * 0.15,
+        top: size * 0.35,
+        width: size * 0.15,
+        height: strokeWidth,
+        backgroundColor: color,
+        transform: [{
+          rotate: '45deg'
+        }]
+      }
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
+        position: 'absolute',
+        left: size * 0.15,
+        bottom: size * 0.35,
+        width: size * 0.15,
+        height: strokeWidth,
+        backgroundColor: color,
+        transform: [{
+          rotate: '-45deg'
+        }]
+      }
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
+        position: 'absolute',
+        right: size * 0.1,
+        width: size * 0.25,
+        height: strokeWidth,
+        backgroundColor: color
+      }
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
+        position: 'absolute',
+        right: size * 0.15,
+        top: size * 0.35,
+        width: size * 0.15,
+        height: strokeWidth,
+        backgroundColor: color,
+        transform: [{
+          rotate: '-45deg'
+        }]
+      }
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
+        position: 'absolute',
+        right: size * 0.15,
+        bottom: size * 0.35,
+        width: size * 0.15,
+        height: strokeWidth,
+        backgroundColor: color,
+        transform: [{
+          rotate: '45deg'
+        }]
+      }
+    })]
+  });
+};
+
+/** Flash on icon */
+export const FlashOnIcon = ({
+  size = DEFAULT_SIZE,
+  color = DEFAULT_COLOR,
+  style
+}) => {
+  return /*#__PURE__*/_jsxs(IconWrapper, {
+    size: size,
+    style: style,
+    children: [/*#__PURE__*/_jsx(View, {
+      style: {
+        position: 'absolute',
+        left: size * 0.4,
+        width: size * 0.2,
+        height: size * 0.35,
+        backgroundColor: color
+      }
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
+        position: 'absolute',
+        top: size * 0.45,
+        width: size * 0.35,
+        height: size * 0.15,
+        backgroundColor: color
+      }
+    })]
+  });
+};
+
+/** Flash off icon */
+export const FlashOffIcon = ({
+  size = DEFAULT_SIZE,
+  color = DEFAULT_COLOR,
+  strokeWidth = DEFAULT_STROKE,
+  style
+}) => {
+  return /*#__PURE__*/_jsxs(IconWrapper, {
+    size: size,
+    style: style,
+    children: [/*#__PURE__*/_jsx(View, {
+      style: {
+        position: 'absolute',
+        left: size * 0.4,
+        width: size * 0.2,
+        height: size * 0.35,
+        backgroundColor: color,
+        opacity: 0.4
+      }
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
+        position: 'absolute',
+        width: size * 0.9,
+        height: strokeWidth * 1.5,
+        backgroundColor: color,
+        transform: [{
+          rotate: '-45deg'
+        }]
+      }
+    })]
+  });
+};
+
+/** Flash auto icon */
+export const FlashAutoIcon = ({
+  size = DEFAULT_SIZE,
+  color = DEFAULT_COLOR,
+  strokeWidth = DEFAULT_STROKE,
+  style
+}) => {
+  return /*#__PURE__*/_jsxs(IconWrapper, {
+    size: size,
+    style: style,
+    children: [/*#__PURE__*/_jsx(View, {
+      style: {
+        position: 'absolute',
+        left: size * 0.4,
+        width: size * 0.2,
+        height: size * 0.35,
+        backgroundColor: color
+      }
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
+        position: 'absolute',
+        top: size * 0.45,
+        width: size * 0.35,
+        height: size * 0.15,
+        backgroundColor: color
+      }
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
+        position: 'absolute',
+        bottom: size * 0.1,
+        right: size * 0.1,
+        width: size * 0.12,
+        height: size * 0.12,
+        borderRadius: size * 0.12 / 2,
+        borderWidth: strokeWidth,
+        borderColor: color
+      }
+    })]
+  });
+};
+
+/** Gallery icon */
+export const GalleryIcon = ({
+  size = DEFAULT_SIZE,
+  color = DEFAULT_COLOR,
+  strokeWidth = DEFAULT_STROKE,
+  style
+}) => {
+  const frameSize = size * 0.75;
+  return /*#__PURE__*/_jsxs(IconWrapper, {
+    size: size,
+    style: style,
+    children: [/*#__PURE__*/_jsx(View, {
+      style: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        width: frameSize,
+        height: frameSize,
+        borderWidth: strokeWidth,
+        borderColor: color,
+        borderRadius: size * 0.06
+      }
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
+        position: 'absolute',
+        bottom: 0,
+        right: 0,
+        width: frameSize,
+        height: frameSize,
+        borderWidth: strokeWidth,
+        borderColor: color,
+        borderRadius: size * 0.06
+      }
+    })]
+  });
+};
+
+// ============================================================================
+// Editor Tools
+// ============================================================================
+
+/** Crop icon */
+export const CropIcon = ({
+  size = DEFAULT_SIZE,
+  color = DEFAULT_COLOR,
+  strokeWidth = DEFAULT_STROKE,
+  style
+}) => {
+  const boxSize = size * 0.6;
+  return /*#__PURE__*/_jsx(IconWrapper, {
+    size: size,
+    style: style,
+    children: /*#__PURE__*/_jsx(View, {
+      style: {
+        width: boxSize,
+        height: boxSize,
+        borderWidth: strokeWidth,
+        borderColor: color,
+        borderStyle: 'dashed'
+      }
+    })
+  });
+};
+
+/** Rotate icon */
+export const RotateIcon = ({
+  size = DEFAULT_SIZE,
+  color = DEFAULT_COLOR,
+  strokeWidth = DEFAULT_STROKE,
+  style
+}) => {
+  return /*#__PURE__*/_jsxs(IconWrapper, {
+    size: size,
+    style: style,
+    children: [/*#__PURE__*/_jsx(View, {
+      style: {
+        width: size * 0.7,
+        height: size * 0.7,
+        borderRadius: size * 0.7 / 2,
+        borderWidth: strokeWidth,
+        borderColor: color,
+        borderTopColor: 'transparent'
+      }
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
+        position: 'absolute',
+        top: size * 0.1,
+        right: size * 0.1,
+        width: size * 0.15,
+        height: strokeWidth,
+        backgroundColor: color,
+        transform: [{
+          rotate: '45deg'
+        }]
+      }
+    })]
+  });
+};
+
+/** Filter icon */
+export const FilterIcon = ({
+  size = DEFAULT_SIZE,
+  color = DEFAULT_COLOR,
+  strokeWidth = DEFAULT_STROKE,
+  style
+}) => {
+  return /*#__PURE__*/_jsxs(IconWrapper, {
+    size: size,
+    style: style,
+    children: [/*#__PURE__*/_jsx(View, {
+      style: {
+        position: 'absolute',
+        top: 0,
+        width: size * 0.8,
+        height: strokeWidth,
+        backgroundColor: color
+      }
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
+        position: 'absolute',
+        top: strokeWidth * 2,
+        width: size * 0.6,
+        height: size * 0.3,
+        borderLeftWidth: size * 0.1,
+        borderRightWidth: size * 0.1,
+        borderLeftColor: 'transparent',
+        borderRightColor: 'transparent',
+        borderTopWidth: size * 0.3,
+        borderTopColor: color
+      }
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
+        position: 'absolute',
+        bottom: 0,
+        width: size * 0.15,
+        height: size * 0.3,
+        backgroundColor: color
+      }
+    })]
+  });
+};
+
+/** Sticker icon */
+export const StickerIcon = ({
+  size = DEFAULT_SIZE,
+  color = DEFAULT_COLOR,
+  strokeWidth = DEFAULT_STROKE,
+  style
+}) => {
+  const stickerSize = size * 0.65;
+  return /*#__PURE__*/_jsx(IconWrapper, {
+    size: size,
+    style: style,
+    children: /*#__PURE__*/_jsx(View, {
+      style: {
+        width: stickerSize,
+        height: stickerSize,
+        borderWidth: strokeWidth,
+        borderColor: color,
+        borderRadius: stickerSize * 0.25,
+        transform: [{
+          rotate: '15deg'
+        }]
+      }
+    })
+  });
+};
+
+/** Emoji icon */
+export const EmojiIcon = ({
+  size = DEFAULT_SIZE,
+  color = DEFAULT_COLOR,
+  strokeWidth = DEFAULT_STROKE,
+  style
+}) => {
+  const faceSize = size * 0.75;
+  return /*#__PURE__*/_jsx(IconWrapper, {
+    size: size,
+    style: style,
+    children: /*#__PURE__*/_jsxs(View, {
+      style: {
+        width: faceSize,
+        height: faceSize,
+        borderRadius: faceSize / 2,
+        borderWidth: strokeWidth,
+        borderColor: color,
+        alignItems: 'center',
+        justifyContent: 'center'
+      },
+      children: [/*#__PURE__*/_jsx(View, {
+        style: {
+          position: 'absolute',
+          top: faceSize * 0.35,
+          left: faceSize * 0.25,
+          width: size * 0.08,
+          height: size * 0.08,
+          borderRadius: size * 0.08 / 2,
+          backgroundColor: color
+        }
+      }), /*#__PURE__*/_jsx(View, {
+        style: {
+          position: 'absolute',
+          top: faceSize * 0.35,
+          right: faceSize * 0.25,
+          width: size * 0.08,
+          height: size * 0.08,
+          borderRadius: size * 0.08 / 2,
+          backgroundColor: color
+        }
+      }), /*#__PURE__*/_jsx(View, {
+        style: {
+          position: 'absolute',
+          bottom: faceSize * 0.2,
+          width: faceSize * 0.3,
+          height: faceSize * 0.15,
+          borderBottomWidth: strokeWidth,
+          borderBottomColor: color,
+          borderRadius: faceSize * 0.15
+        }
+      })]
+    })
+  });
+};
+
+/** Text icon */
+export const TextIcon = ({
+  size = DEFAULT_SIZE,
+  color = DEFAULT_COLOR,
+  strokeWidth = DEFAULT_STROKE,
+  style
+}) => {
+  return /*#__PURE__*/_jsxs(IconWrapper, {
+    size: size,
+    style: style,
+    children: [/*#__PURE__*/_jsx(View, {
+      style: {
+        position: 'absolute',
+        top: 0,
+        width: size * 0.6,
+        height: strokeWidth,
+        backgroundColor: color
+      }
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
+        position: 'absolute',
+        left: size * 0.45,
+        width: strokeWidth,
+        height: size * 0.7,
+        backgroundColor: color
+      }
+    })]
+  });
+};
+
+/** Draw/pencil icon */
+export const DrawIcon = ({
+  size = DEFAULT_SIZE,
+  color = DEFAULT_COLOR,
+  strokeWidth = DEFAULT_STROKE,
+  style
+}) => {
+  return /*#__PURE__*/_jsxs(IconWrapper, {
+    size: size,
+    style: style,
+    children: [/*#__PURE__*/_jsx(View, {
+      style: {
+        width: size * 0.7,
+        height: strokeWidth * 1.5,
+        backgroundColor: color,
+        transform: [{
+          rotate: '-45deg'
+        }]
+      }
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
+        position: 'absolute',
+        bottom: 0,
+        right: 0,
+        width: size * 0.2,
+        height: size * 0.2,
+        borderWidth: strokeWidth,
+        borderColor: color,
+        transform: [{
+          rotate: '-45deg'
+        }]
+      }
+    })]
+  });
+};
+
+/** Undo icon */
+export const UndoIcon = ({
+  size = DEFAULT_SIZE,
+  color = DEFAULT_COLOR,
+  strokeWidth = DEFAULT_STROKE,
+  style
+}) => {
+  return /*#__PURE__*/_jsxs(IconWrapper, {
+    size: size,
+    style: style,
+    children: [/*#__PURE__*/_jsx(View, {
+      style: {
+        width: size * 0.5,
+        height: size * 0.5,
+        borderWidth: strokeWidth,
+        borderColor: color,
+        borderRadius: size * 0.25,
+        borderRightColor: 'transparent',
+        borderBottomColor: 'transparent'
+      }
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
+        position: 'absolute',
+        left: size * 0.15,
+        top: size * 0.15,
+        width: size * 0.15,
+        height: strokeWidth,
+        backgroundColor: color,
+        transform: [{
+          rotate: '-45deg'
+        }]
+      }
+    })]
+  });
+};
+
+/** Redo icon */
+export const RedoIcon = ({
+  size = DEFAULT_SIZE,
+  color = DEFAULT_COLOR,
+  strokeWidth = DEFAULT_STROKE,
+  style
+}) => {
+  return /*#__PURE__*/_jsxs(IconWrapper, {
+    size: size,
+    style: style,
+    children: [/*#__PURE__*/_jsx(View, {
+      style: {
+        width: size * 0.5,
+        height: size * 0.5,
+        borderWidth: strokeWidth,
+        borderColor: color,
+        borderRadius: size * 0.25,
+        borderLeftColor: 'transparent',
+        borderBottomColor: 'transparent',
+        transform: [{
+          scaleX: -1
+        }]
+      }
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
+        position: 'absolute',
+        right: size * 0.15,
+        top: size * 0.15,
+        width: size * 0.15,
+        height: strokeWidth,
+        backgroundColor: color,
+        transform: [{
+          rotate: '45deg'
+        }]
+      }
+    })]
+  });
+};
+
+/** Delete/trash icon */
+export const DeleteIcon = ({
+  size = DEFAULT_SIZE,
+  color = DEFAULT_COLOR,
+  strokeWidth = DEFAULT_STROKE,
+  style
+}) => {
+  const bodyWidth = size * 0.5;
+  const bodyHeight = size * 0.55;
+  const lidWidth = size * 0.6;
+  const handleWidth = size * 0.25;
+  return /*#__PURE__*/_jsxs(IconWrapper, {
+    size: size,
+    style: style,
+    children: [/*#__PURE__*/_jsx(View, {
+      style: {
+        position: 'absolute',
+        top: size * 0.1,
+        width: handleWidth,
+        height: size * 0.15,
+        borderWidth: strokeWidth,
+        borderColor: color,
+        borderBottomWidth: 0,
+        borderTopLeftRadius: size * 0.05,
+        borderTopRightRadius: size * 0.05
+      }
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
+        position: 'absolute',
+        top: size * 0.25,
+        width: lidWidth,
+        height: strokeWidth,
+        backgroundColor: color
+      }
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
+        position: 'absolute',
+        top: size * 0.25 + strokeWidth,
+        width: bodyWidth,
+        height: bodyHeight,
+        borderWidth: strokeWidth,
+        borderColor: color,
+        borderTopWidth: 0,
+        borderBottomLeftRadius: size * 0.1,
+        borderBottomRightRadius: size * 0.1
+      }
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
+        position: 'absolute',
+        top: size * 0.4,
+        width: strokeWidth,
+        height: size * 0.3,
+        backgroundColor: color,
+        left: size * 0.35
+      }
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
+        position: 'absolute',
+        top: size * 0.4,
+        width: strokeWidth,
+        height: size * 0.3,
+        backgroundColor: color,
+        right: size * 0.35
+      }
+    })]
+  });
+};
+
+// ============================================================================
+// Playback & Media
+// ============================================================================
+
+/** Play button */
+export const PlayIcon = ({
+  size = DEFAULT_SIZE,
+  color = DEFAULT_COLOR,
+  style
+}) => {
+  return /*#__PURE__*/_jsx(IconWrapper, {
+    size: size,
+    style: style,
+    children: /*#__PURE__*/_jsx(View, {
+      style: {
+        width: 0,
+        height: 0,
+        borderLeftWidth: size * 0.35,
+        borderTopWidth: size * 0.2,
+        borderBottomWidth: size * 0.2,
+        borderLeftColor: color,
+        borderTopColor: 'transparent',
+        borderBottomColor: 'transparent'
+      }
+    })
+  });
+};
+
+/** Pause button */
+export const PauseIcon = ({
+  size = DEFAULT_SIZE,
+  color = DEFAULT_COLOR,
+  style
+}) => {
+  const barWidth = size * 0.15;
+  const barHeight = size * 0.6;
+  return /*#__PURE__*/_jsxs(IconWrapper, {
+    size: size,
+    style: style,
+    children: [/*#__PURE__*/_jsx(View, {
+      style: {
+        position: 'absolute',
+        left: size * 0.2,
+        width: barWidth,
+        height: barHeight,
+        backgroundColor: color
+      }
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
+        position: 'absolute',
+        right: size * 0.2,
+        width: barWidth,
+        height: barHeight,
+        backgroundColor: color
+      }
+    })]
+  });
+};
+
+/** Download icon */
+export const DownloadIcon = ({
+  size = DEFAULT_SIZE,
+  color = DEFAULT_COLOR,
+  strokeWidth = DEFAULT_STROKE,
+  style
+}) => {
+  return /*#__PURE__*/_jsxs(IconWrapper, {
+    size: size,
+    style: style,
+    children: [/*#__PURE__*/_jsx(View, {
+      style: {
+        position: 'absolute',
+        top: size * 0.2,
+        width: size * 0.4,
+        height: strokeWidth,
+        backgroundColor: color
+      }
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
+        position: 'absolute',
+        top: size * 0.4,
+        width: strokeWidth,
+        height: size * 0.35,
+        backgroundColor: color
+      }
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
+        position: 'absolute',
+        top: size * 0.6,
+        left: size * 0.2,
+        width: size * 0.2,
+        height: strokeWidth,
+        backgroundColor: color,
+        transform: [{
+          rotate: '45deg'
+        }]
+      }
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
+        position: 'absolute',
+        top: size * 0.6,
+        right: size * 0.2,
+        width: size * 0.2,
+        height: strokeWidth,
+        backgroundColor: color,
+        transform: [{
+          rotate: '-45deg'
+        }]
+      }
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
+        position: 'absolute',
+        bottom: 0,
+        width: size * 0.8,
+        height: strokeWidth,
+        backgroundColor: color
+      }
+    })]
+  });
+};
+
+/** Share icon */
+export const ShareIcon = ({
+  size = DEFAULT_SIZE,
+  color = DEFAULT_COLOR,
+  strokeWidth = DEFAULT_STROKE,
+  style
+}) => {
+  const dotSize = size * 0.22;
+  return /*#__PURE__*/_jsxs(IconWrapper, {
+    size: size,
+    style: style,
+    children: [/*#__PURE__*/_jsx(View, {
+      style: {
+        position: 'absolute',
+        left: size * 0.15,
+        width: dotSize,
+        height: dotSize,
+        borderRadius: dotSize / 2,
+        borderWidth: strokeWidth,
+        borderColor: color,
+        backgroundColor: 'transparent'
+      }
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
+        position: 'absolute',
+        top: size * 0.15,
+        right: size * 0.15,
+        width: dotSize,
+        height: dotSize,
+        borderRadius: dotSize / 2,
+        borderWidth: strokeWidth,
+        borderColor: color,
+        backgroundColor: 'transparent'
+      }
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
+        position: 'absolute',
+        bottom: size * 0.15,
+        right: size * 0.15,
+        width: dotSize,
+        height: dotSize,
+        borderRadius: dotSize / 2,
+        borderWidth: strokeWidth,
+        borderColor: color,
+        backgroundColor: 'transparent'
+      }
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
+        position: 'absolute',
+        top: size * 0.32,
+        left: size * 0.34,
+        width: size * 0.35,
+        height: strokeWidth,
+        backgroundColor: color,
+        transform: [{
+          rotate: '-35deg'
+        }]
+      }
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
+        position: 'absolute',
+        bottom: size * 0.32,
+        left: size * 0.34,
+        width: size * 0.35,
+        height: strokeWidth,
+        backgroundColor: color,
+        transform: [{
+          rotate: '35deg'
+        }]
+      }
+    })]
+  });
+};
+
+/** Send/paper plane icon */
+export const SendIcon = ({
+  size = DEFAULT_SIZE,
+  color = DEFAULT_COLOR,
+  strokeWidth = DEFAULT_STROKE,
+  style
+}) => {
+  return /*#__PURE__*/_jsxs(IconWrapper, {
+    size: size,
+    style: style,
+    children: [/*#__PURE__*/_jsx(View, {
+      style: {
+        position: 'absolute',
+        width: 0,
+        height: 0,
+        borderLeftWidth: size * 0.25,
+        borderTopWidth: size * 0.3,
+        borderLeftColor: color,
+        borderTopColor: color
+      }
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
+        position: 'absolute',
+        bottom: size * 0.3,
+        right: size * 0.1,
+        width: size * 0.3,
+        height: strokeWidth,
+        backgroundColor: color,
+        transform: [{
+          rotate: '45deg'
+        }]
+      }
+    })]
+  });
+};
+
+/** More/menu icon (three dots) */
+export const MoreIcon = ({
+  size = DEFAULT_SIZE,
+  color = DEFAULT_COLOR,
+  style
+}) => {
+  const dotSize = size * 0.12;
+  return /*#__PURE__*/_jsxs(IconWrapper, {
+    size: size,
+    style: style,
+    children: [/*#__PURE__*/_jsx(View, {
+      style: {
+        position: 'absolute',
+        left: size * 0.1,
+        width: dotSize,
+        height: dotSize,
+        borderRadius: dotSize / 2,
+        backgroundColor: color
+      }
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
+        width: dotSize,
+        height: dotSize,
+        borderRadius: dotSize / 2,
+        backgroundColor: color
+      }
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
+        position: 'absolute',
+        right: size * 0.1,
+        width: dotSize,
+        height: dotSize,
+        borderRadius: dotSize / 2,
+        backgroundColor: color
+      }
+    })]
+  });
+};
+
+// ============================================================================
+// Document & Audio
+// ============================================================================
+
+/** Document icon */
+export const DocumentIcon = ({
+  size = DEFAULT_SIZE,
+  color = DEFAULT_COLOR,
+  strokeWidth = DEFAULT_STROKE,
+  style
+}) => {
+  const w = size * 0.6;
+  const h = size * 0.8;
+  return /*#__PURE__*/_jsx(IconWrapper, {
+    size: size,
+    style: style,
+    children: /*#__PURE__*/_jsxs(View, {
+      style: {
+        width: w,
+        height: h,
+        borderWidth: strokeWidth,
+        borderColor: color,
+        borderRadius: size * 0.08,
+        alignItems: 'center',
+        justifyContent: 'flex-start',
+        paddingTop: size * 0.1
+      },
+      children: [/*#__PURE__*/_jsx(View, {
+        style: {
+          width: w * 0.7,
+          height: strokeWidth,
+          backgroundColor: color,
+          marginVertical: size * 0.08
+        }
+      }), /*#__PURE__*/_jsx(View, {
+        style: {
+          width: w * 0.7,
+          height: strokeWidth,
+          backgroundColor: color,
+          marginVertical: size * 0.08
+        }
+      }), /*#__PURE__*/_jsx(View, {
+        style: {
+          width: w * 0.7,
+          height: strokeWidth,
+          backgroundColor: color,
+          marginVertical: size * 0.08
+        }
+      })]
+    })
+  });
+};
+
+/** Audio icon */
+export const AudioIcon = ({
+  size = DEFAULT_SIZE,
+  color = DEFAULT_COLOR,
+  strokeWidth = DEFAULT_STROKE,
+  style
+}) => {
+  return /*#__PURE__*/_jsxs(IconWrapper, {
+    size: size,
+    style: style,
+    children: [/*#__PURE__*/_jsx(View, {
+      style: {
+        width: size * 0.2,
+        height: size * 0.6,
+        borderLeftWidth: strokeWidth * 1.5,
+        borderTopWidth: size * 0.25,
+        borderBottomWidth: size * 0.25,
+        borderLeftColor: color,
+        borderTopColor: 'transparent',
+        borderBottomColor: 'transparent'
+      }
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
+        position: 'absolute',
+        right: -size * 0.05,
+        width: size * 0.4,
+        height: size * 0.4,
+        borderWidth: strokeWidth,
+        borderColor: color,
+        borderRadius: size * 0.2
+      }
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
+        position: 'absolute',
+        right: -size * 0.15,
+        width: size * 0.65,
+        height: size * 0.65,
+        borderWidth: strokeWidth,
+        borderColor: color,
+        borderRadius: size * 0.325
+      }
+    })]
+  });
+};
+
+// ============================================================================
+// States & Indicators
+// ============================================================================
+
+/** Lock icon */
+export const LockIcon = ({
+  size = DEFAULT_SIZE,
+  color = DEFAULT_COLOR,
+  strokeWidth = DEFAULT_STROKE,
+  style
+}) => {
+  return /*#__PURE__*/_jsxs(IconWrapper, {
+    size: size,
+    style: style,
+    children: [/*#__PURE__*/_jsx(View, {
+      style: {
+        position: 'absolute',
+        top: size * 0.1,
+        width: size * 0.5,
+        height: size * 0.35,
+        borderWidth: strokeWidth,
+        borderColor: color,
+        borderBottomColor: 'transparent',
+        borderRadius: size * 0.25
+      }
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
+        position: 'absolute',
+        top: size * 0.4,
+        width: size * 0.7,
+        height: size * 0.5,
+        borderWidth: strokeWidth,
+        borderColor: color,
+        borderRadius: size * 0.08
+      }
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
+        position: 'absolute',
+        top: size * 0.55,
+        width: size * 0.15,
+        height: size * 0.15,
+        borderRadius: size * 0.15 / 2,
+        borderWidth: strokeWidth,
+        borderColor: color
+      }
+    })]
+  });
+};
+
+/** Unlock icon */
+export const LockOpenIcon = ({
+  size = DEFAULT_SIZE,
+  color = DEFAULT_COLOR,
+  strokeWidth = DEFAULT_STROKE,
+  style
+}) => {
+  return /*#__PURE__*/_jsxs(IconWrapper, {
+    size: size,
+    style: style,
+    children: [/*#__PURE__*/_jsx(View, {
+      style: {
+        position: 'absolute',
+        top: size * 0.1,
+        left: size * 0.25,
+        width: size * 0.25,
+        height: size * 0.35,
+        borderWidth: strokeWidth,
+        borderColor: color,
+        borderBottomColor: 'transparent',
+        borderTopRightRadius: size * 0.15
+      }
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
+        position: 'absolute',
+        top: size * 0.4,
+        width: size * 0.7,
+        height: size * 0.5,
+        borderWidth: strokeWidth,
+        borderColor: color,
+        borderRadius: size * 0.08
+      }
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
+        position: 'absolute',
+        top: size * 0.55,
+        width: size * 0.15,
+        height: size * 0.15,
+        borderRadius: size * 0.15 / 2,
+        borderWidth: strokeWidth,
+        borderColor: color
+      }
+    })]
+  });
+};
+
+/** Chevron up / collapse icon */
+export const ChevronUpIcon = ({
+  size = DEFAULT_SIZE,
+  color = DEFAULT_COLOR,
+  strokeWidth = DEFAULT_STROKE,
+  style
+}) => {
+  return /*#__PURE__*/_jsxs(IconWrapper, {
+    size: size,
+    style: style,
+    children: [/*#__PURE__*/_jsx(View, {
+      style: {
+        position: 'absolute',
+        left: size * 0.25,
+        width: size * 0.5,
+        height: strokeWidth,
+        backgroundColor: color,
+        transform: [{
+          rotate: '45deg'
+        }]
+      }
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
+        position: 'absolute',
+        right: size * 0.25,
+        width: size * 0.5,
+        height: strokeWidth,
+        backgroundColor: color,
+        transform: [{
+          rotate: '-45deg'
+        }]
+      }
+    })]
+  });
+};
+
+/** Checkmark/check icon */
+export const CheckIcon = ({
+  size = DEFAULT_SIZE,
+  color = DEFAULT_COLOR,
+  strokeWidth = DEFAULT_STROKE,
+  style
+}) => {
+  return /*#__PURE__*/_jsx(DoneIcon, {
+    size: size,
+    color: color,
+    strokeWidth: strokeWidth,
+    style: style
+  });
+};
+
+/** Volume on icon */
+export const VolumeOnIcon = ({
+  size = DEFAULT_SIZE,
+  color = DEFAULT_COLOR,
+  strokeWidth = DEFAULT_STROKE,
+  style
+}) => {
+  return /*#__PURE__*/_jsxs(IconWrapper, {
+    size: size,
+    style: style,
+    children: [/*#__PURE__*/_jsx(View, {
+      style: {
+        width: size * 0.2,
+        height: size * 0.6,
+        borderLeftWidth: strokeWidth * 1.5,
+        borderTopWidth: size * 0.3,
+        borderBottomWidth: size * 0.3,
+        borderLeftColor: color,
+        borderTopColor: 'transparent',
+        borderBottomColor: 'transparent'
+      }
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
+        position: 'absolute',
+        right: -size * 0.08,
+        width: size * 0.35,
+        height: size * 0.35,
+        borderWidth: strokeWidth,
+        borderColor: color,
+        borderRadius: size * 0.175
+      }
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
+        position: 'absolute',
+        right: -size * 0.18,
+        width: size * 0.55,
+        height: size * 0.55,
+        borderWidth: strokeWidth,
+        borderColor: color,
+        borderRadius: size * 0.275
+      }
+    })]
+  });
+};
+
+/** Volume off / mute icon */
+export const VolumeOffIcon = ({
+  size = DEFAULT_SIZE,
+  color = DEFAULT_COLOR,
+  strokeWidth = DEFAULT_STROKE,
+  style
+}) => {
+  return /*#__PURE__*/_jsxs(IconWrapper, {
+    size: size,
+    style: style,
+    children: [/*#__PURE__*/_jsx(View, {
+      style: {
+        width: size * 0.2,
+        height: size * 0.6,
+        borderLeftWidth: strokeWidth * 1.5,
+        borderTopWidth: size * 0.3,
+        borderBottomWidth: size * 0.3,
+        borderLeftColor: color,
+        borderTopColor: 'transparent',
+        borderBottomColor: 'transparent'
+      }
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
+        position: 'absolute',
+        width: size * 0.7,
+        height: strokeWidth * 1.5,
+        backgroundColor: color,
+        transform: [{
+          rotate: '-45deg'
+        }]
+      }
+    })]
+  });
+};
+
+// ============================================================================
+// Media Operations
+// ============================================================================
+
+/** Trim icon */
+export const TrimIcon = ({
+  size = DEFAULT_SIZE,
+  color = DEFAULT_COLOR,
+  strokeWidth = DEFAULT_STROKE,
+  style
+}) => {
+  return /*#__PURE__*/_jsxs(IconWrapper, {
+    size: size,
+    style: style,
+    children: [/*#__PURE__*/_jsx(View, {
+      style: {
+        position: 'absolute',
+        left: size * 0.1,
+        top: size * 0.15,
+        width: strokeWidth,
+        height: size * 0.7,
+        backgroundColor: color
+      }
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
+        position: 'absolute',
+        left: size * 0.1,
+        top: size * 0.15,
+        width: size * 0.15,
+        height: strokeWidth,
+        backgroundColor: color
+      }
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
+        position: 'absolute',
+        left: size * 0.1,
+        bottom: size * 0.15,
+        width: size * 0.15,
+        height: strokeWidth,
+        backgroundColor: color
+      }
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
+        position: 'absolute',
+        right: size * 0.1,
+        top: size * 0.15,
+        width: strokeWidth,
+        height: size * 0.7,
+        backgroundColor: color
+      }
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
+        position: 'absolute',
+        right: size * 0.1,
+        top: size * 0.15,
+        width: size * 0.15,
+        height: strokeWidth,
+        backgroundColor: color
+      }
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
+        position: 'absolute',
+        right: size * 0.1,
+        bottom: size * 0.15,
+        width: size * 0.15,
+        height: strokeWidth,
+        backgroundColor: color
+      }
+    })]
+  });
+};
+
+/** Cover/frame icon */
+export const CoverIcon = ({
+  size = DEFAULT_SIZE,
+  color = DEFAULT_COLOR,
+  strokeWidth = DEFAULT_STROKE,
+  style
+}) => {
+  return /*#__PURE__*/_jsx(IconWrapper, {
+    size: size,
+    style: style,
+    children: /*#__PURE__*/_jsxs(View, {
+      style: {
+        width: size * 0.8,
+        height: size * 0.6,
+        borderWidth: strokeWidth,
+        borderColor: color,
+        borderRadius: size * 0.06,
+        alignItems: 'center',
+        justifyContent: 'center'
+      },
+      children: [/*#__PURE__*/_jsx(View, {
+        style: {
+          position: 'absolute',
+          width: size * 0.5,
+          height: strokeWidth,
+          backgroundColor: color
+        }
+      }), /*#__PURE__*/_jsx(View, {
+        style: {
+          position: 'absolute',
+          width: strokeWidth,
+          height: size * 0.4,
+          backgroundColor: color
+        }
+      })]
+    })
+  });
+};
+
+/** Compress icon */
+export const CompressIcon = ({
+  size = DEFAULT_SIZE,
+  color = DEFAULT_COLOR,
+  strokeWidth = DEFAULT_STROKE,
+  style
+}) => {
+  return /*#__PURE__*/_jsxs(IconWrapper, {
+    size: size,
+    style: style,
+    children: [/*#__PURE__*/_jsx(View, {
+      style: {
+        position: 'absolute',
+        top: size * 0.1,
+        left: size * 0.1,
+        width: size * 0.2,
+        height: strokeWidth,
+        backgroundColor: color,
+        transform: [{
+          rotate: '45deg'
+        }]
+      }
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
+        position: 'absolute',
+        bottom: size * 0.1,
+        right: size * 0.1,
+        width: size * 0.2,
+        height: strokeWidth,
+        backgroundColor: color,
+        transform: [{
+          rotate: '45deg'
+        }]
+      }
+    })]
+  });
+};
+
+/** Export icon */
+export const ExportIcon = ({
+  size = DEFAULT_SIZE,
+  color = DEFAULT_COLOR,
+  strokeWidth = DEFAULT_STROKE,
+  style
+}) => {
+  return /*#__PURE__*/_jsxs(IconWrapper, {
+    size: size,
+    style: style,
+    children: [/*#__PURE__*/_jsx(View, {
+      style: {
+        position: 'absolute',
+        top: size * 0.15,
+        width: size * 0.4,
+        height: strokeWidth,
+        backgroundColor: color
+      }
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
+        position: 'absolute',
+        top: size * 0.25,
+        left: size * 0.3,
+        width: strokeWidth,
+        height: size * 0.25,
+        backgroundColor: color
+      }
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
+        position: 'absolute',
+        top: size * 0.4,
+        left: size * 0.2,
+        width: size * 0.2,
+        height: strokeWidth,
+        backgroundColor: color,
+        transform: [{
+          rotate: '-45deg'
+        }]
+      }
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
+        position: 'absolute',
+        bottom: 0,
+        width: size * 0.8,
+        height: size * 0.3,
+        borderTopWidth: strokeWidth,
+        borderColor: color
+      }
+    })]
+  });
+};
+
+/** Upload icon */
+export const UploadIcon = ({
+  size = DEFAULT_SIZE,
+  color = DEFAULT_COLOR,
+  strokeWidth = DEFAULT_STROKE,
+  style
+}) => {
+  return /*#__PURE__*/_jsxs(IconWrapper, {
+    size: size,
+    style: style,
+    children: [/*#__PURE__*/_jsx(View, {
+      style: {
+        position: 'absolute',
+        top: size * 0.2,
+        width: size * 0.4,
+        height: strokeWidth,
+        backgroundColor: color
+      }
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
+        position: 'absolute',
+        top: size * 0.3,
+        left: size * 0.3,
+        width: strokeWidth,
+        height: size * 0.25,
+        backgroundColor: color
+      }
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
+        position: 'absolute',
+        top: size * 0.2,
+        left: size * 0.2,
+        width: size * 0.2,
+        height: strokeWidth,
+        backgroundColor: color,
+        transform: [{
+          rotate: '45deg'
+        }]
+      }
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
+        position: 'absolute',
+        bottom: 0,
+        width: size * 0.8,
+        height: strokeWidth,
+        backgroundColor: color
+      }
+    })]
+  });
+};
+
+// ============================================================================
+// Basic Shapes
+// ============================================================================
+
+/** Plus/add icon */
+export const PlusIcon = ({
+  size = DEFAULT_SIZE,
+  color = DEFAULT_COLOR,
+  strokeWidth = DEFAULT_STROKE,
+  style
+}) => {
+  const barLength = size * 0.5;
+  return /*#__PURE__*/_jsxs(IconWrapper, {
+    size: size,
+    style: style,
+    children: [/*#__PURE__*/_jsx(View, {
+      style: {
+        position: 'absolute',
+        width: barLength,
+        height: strokeWidth,
+        backgroundColor: color
+      }
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
+        position: 'absolute',
+        width: strokeWidth,
+        height: barLength,
+        backgroundColor: color
+      }
+    })]
+  });
+};
+
+/** Minus/subtract icon */
+export const MinusIcon = ({
+  size = DEFAULT_SIZE,
+  color = DEFAULT_COLOR,
+  strokeWidth = DEFAULT_STROKE,
+  style
+}) => {
+  return /*#__PURE__*/_jsx(IconWrapper, {
+    size: size,
+    style: style,
+    children: /*#__PURE__*/_jsx(View, {
+      style: {
+        width: size * 0.6,
+        height: strokeWidth,
+        backgroundColor: color
+      }
+    })
+  });
+};
+
+/** Stop button (square) */
+export const StopIcon = ({
+  size = DEFAULT_SIZE,
+  color = DEFAULT_COLOR,
+  style
+}) => {
+  const squareSize = size * 0.5;
+  return /*#__PURE__*/_jsx(IconWrapper, {
+    size: size,
+    style: style,
+    children: /*#__PURE__*/_jsx(View, {
+      style: {
+        width: squareSize,
+        height: squareSize,
+        backgroundColor: color,
+        borderRadius: size * 0.05
+      }
+    })
+  });
+};
+
+/** Mute icon (speaker with X) */
+export const MuteIcon = ({
+  size = DEFAULT_SIZE,
+  color = DEFAULT_COLOR,
+  strokeWidth = DEFAULT_STROKE,
+  style
+}) => {
+  return /*#__PURE__*/_jsxs(IconWrapper, {
+    size: size,
+    style: style,
+    children: [/*#__PURE__*/_jsx(View, {
+      style: {
+        width: size * 0.2,
+        height: size * 0.6,
+        borderLeftWidth: strokeWidth * 1.5,
+        borderTopWidth: size * 0.3,
+        borderBottomWidth: size * 0.3,
+        borderLeftColor: color,
+        borderTopColor: 'transparent',
+        borderBottomColor: 'transparent'
+      }
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
+        position: 'absolute',
+        right: size * 0.05,
+        width: size * 0.3,
+        height: strokeWidth,
+        backgroundColor: color,
+        transform: [{
+          rotate: '45deg'
+        }]
+      }
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
+        position: 'absolute',
+        right: size * 0.05,
+        width: size * 0.3,
+        height: strokeWidth,
+        backgroundColor: color,
+        transform: [{
+          rotate: '-45deg'
+        }]
+      }
+    })]
+  });
+};
+
+// ============================================================================
+// Recording / audio / mode icons
+// ============================================================================
+
+/** Photo-mode indicator — reuses the camera glyph. */
+export const PhotoModeIcon = props => /*#__PURE__*/_jsx(CameraIcon, {
+  ...props
+});
+
+/** Video-mode indicator — reuses the video glyph. */
+export const VideoModeIcon = props => /*#__PURE__*/_jsx(VideoIcon, {
+  ...props
+});
+
+/** Browse-audio default — reuses the audio glyph. */
+export const BrowseAudioIcon = props => /*#__PURE__*/_jsx(AudioIcon, {
+  ...props
+});
+
+/** Image+video (combined media) default — reuses the photo glyph. */
+export const ImageVideoIcon = props => /*#__PURE__*/_jsx(PhotoIcon, {
+  ...props
+});
+
+/** Chevron right / disclosure icon */
+export const ChevronRightIcon = ({
+  size = DEFAULT_SIZE,
+  color = DEFAULT_COLOR,
+  strokeWidth = DEFAULT_STROKE,
+  style
+}) => {
+  return /*#__PURE__*/_jsxs(IconWrapper, {
+    size: size,
+    style: style,
+    children: [/*#__PURE__*/_jsx(View, {
+      style: {
+        position: 'absolute',
+        top: size * 0.25,
+        width: size * 0.5,
+        height: strokeWidth,
+        backgroundColor: color,
+        transform: [{
+          rotate: '45deg'
+        }]
+      }
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
+        position: 'absolute',
+        bottom: size * 0.25,
+        width: size * 0.5,
+        height: strokeWidth,
+        backgroundColor: color,
+        transform: [{
+          rotate: '-45deg'
+        }]
+      }
+    })]
+  });
+};
+
+/** Record button — filled circle (color-driven). */
+export const RecordIcon = ({
+  size = DEFAULT_SIZE,
+  color = DEFAULT_COLOR,
+  style
+}) => {
+  const dot = size * 0.6;
+  return /*#__PURE__*/_jsx(IconWrapper, {
+    size: size,
+    style: style,
+    children: /*#__PURE__*/_jsx(View, {
+      style: {
+        width: dot,
+        height: dot,
+        borderRadius: dot / 2,
+        backgroundColor: color
+      }
+    })
+  });
+};
+
+/** Warning — triangle outline with an exclamation mark. */
+export const WarningIcon = ({
+  size = DEFAULT_SIZE,
+  color = DEFAULT_COLOR,
+  strokeWidth = DEFAULT_STROKE,
+  style
+}) => {
+  return /*#__PURE__*/_jsxs(IconWrapper, {
+    size: size,
+    style: style,
+    children: [/*#__PURE__*/_jsx(View, {
+      style: {
+        position: 'absolute',
+        top: size * 0.1,
+        width: 0,
+        height: 0,
+        borderLeftWidth: size * 0.44,
+        borderRightWidth: size * 0.44,
+        borderBottomWidth: size * 0.72,
+        borderLeftColor: 'transparent',
+        borderRightColor: 'transparent',
+        borderBottomColor: color
+      }
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
+        position: 'absolute',
+        top: size * 0.42,
+        width: strokeWidth,
+        height: size * 0.22,
+        backgroundColor: '#FFFFFF'
+      }
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
+        position: 'absolute',
+        top: size * 0.68,
+        width: strokeWidth,
+        height: strokeWidth,
+        borderRadius: strokeWidth,
+        backgroundColor: '#FFFFFF'
+      }
+    })]
+  });
+};
+
+/** Microphone — rounded capsule head, stand arc, and base. */
+export const MicIcon = ({
+  size = DEFAULT_SIZE,
+  color = DEFAULT_COLOR,
+  strokeWidth = DEFAULT_STROKE,
+  style
+}) => {
+  const capsuleW = size * 0.28;
+  const capsuleH = size * 0.42;
+  return /*#__PURE__*/_jsxs(IconWrapper, {
+    size: size,
+    style: style,
+    children: [/*#__PURE__*/_jsx(View, {
+      style: {
+        position: 'absolute',
+        top: size * 0.12,
+        width: capsuleW,
+        height: capsuleH,
+        borderRadius: capsuleW / 2,
+        backgroundColor: color
+      }
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
+        position: 'absolute',
+        top: size * 0.38,
+        width: size * 0.5,
+        height: size * 0.28,
+        borderColor: color,
+        borderWidth: strokeWidth,
+        borderTopWidth: 0,
+        borderBottomLeftRadius: size * 0.25,
+        borderBottomRightRadius: size * 0.25
+      }
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
+        position: 'absolute',
+        top: size * 0.66,
+        width: strokeWidth,
+        height: size * 0.14,
+        backgroundColor: color
+      }
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
+        position: 'absolute',
+        top: size * 0.8,
+        width: size * 0.4,
+        height: strokeWidth,
+        backgroundColor: color
+      }
+    })]
+  });
+};
+
+// ============================================================================
+// Interactive & Inline Icons
+// ============================================================================
+
+/**
+ * Plus icon that morphs into a Cross (✕) as [progress] animates 0 → 1.
+ * When progress is omitted or 0, renders a static Plus (+).
+ */
+export const PlusCloseIcon = ({
+  size = DEFAULT_SIZE,
+  color = DEFAULT_COLOR,
+  strokeWidth = 2.4,
+  progress,
+  style
+}) => {
+  const barLength = Math.round(size * 0.58);
+  let spin = '0deg';
+  if (progress && typeof progress.interpolate === 'function') {
+    spin = progress.interpolate({
+      inputRange: [0, 1],
+      outputRange: ['0deg', '225deg']
+    });
+  } else if (typeof progress === 'number') {
+    spin = `${progress * 225}deg`;
+  }
+  const horizontal = {
+    position: 'absolute',
+    width: barLength,
+    height: strokeWidth,
+    borderRadius: strokeWidth,
+    backgroundColor: color
+  };
+  const vertical = {
+    position: 'absolute',
+    width: strokeWidth,
+    height: barLength,
+    borderRadius: strokeWidth,
+    backgroundColor: color
+  };
+  return /*#__PURE__*/_jsxs(Animated.View, {
+    style: [{
+      width: size,
+      height: size,
+      alignItems: 'center',
+      justifyContent: 'center',
+      position: 'relative',
+      transform: [{
+        rotate: spin
+      }]
+    }, style],
+    children: [/*#__PURE__*/_jsx(View, {
+      style: horizontal
+    }), /*#__PURE__*/_jsx(View, {
+      style: vertical
+    })]
+  });
+};
+
+/**
+ * Circular seek skip ring icon (◀ -10s / ▶ +10s).
+ * Renders an open-topped circular arrow ring with directional arrowhead
+ * and a centered seconds label.
+ */
+export const CircularSeekIcon = ({
+  direction = 'forward',
+  label = '10',
+  size = DEFAULT_SIZE,
+  color = DEFAULT_COLOR,
+  strokeWidth = DEFAULT_STROKE,
+  style
+}) => {
+  const head = Math.max(3, strokeWidth * 2);
+  return /*#__PURE__*/_jsxs(View, {
+    style: [{
+      width: size,
+      height: size,
+      alignItems: 'center',
+      justifyContent: 'center',
+      position: 'relative'
+    }, style],
+    children: [/*#__PURE__*/_jsx(View, {
+      style: {
+        position: 'absolute',
+        width: size,
+        height: size,
+        borderRadius: size / 2,
+        borderWidth: strokeWidth,
+        borderColor: color,
+        borderTopColor: 'transparent'
+      }
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
+        position: 'absolute',
+        top: -strokeWidth * 0.4,
+        left: direction === 'back' ? size * 0.24 : undefined,
+        right: direction === 'forward' ? size * 0.24 : undefined,
+        width: 0,
+        height: 0,
+        borderTopWidth: head,
+        borderBottomWidth: head,
+        borderTopColor: 'transparent',
+        borderBottomColor: 'transparent',
+        borderLeftWidth: direction === 'forward' ? head : 0,
+        borderRightWidth: direction === 'back' ? head : 0,
+        borderLeftColor: direction === 'forward' ? color : 'transparent',
+        borderRightColor: direction === 'back' ? color : 'transparent'
+      }
+    }), /*#__PURE__*/_jsx(Text, {
+      style: {
+        color: color,
+        fontSize: size * 0.4,
+        fontWeight: '600',
+        includeFontPadding: false,
+        textAlign: 'center'
+      },
+      children: label
+    })]
+  });
+};
+
+/**
+ * View Details / Info (ⓘ) icon.
+ * Renders an outlined circular badge with a centered 'i' glyph (dot + stem).
+ */
+export const ViewDetailsIcon = ({
+  size = DEFAULT_SIZE,
+  color = DEFAULT_COLOR,
+  strokeWidth = DEFAULT_STROKE,
+  style
+}) => {
+  const circleSize = size * 0.85;
+  const dotSize = Math.max(2, strokeWidth * 1.2);
+  const stemWidth = Math.max(1.5, strokeWidth);
+  const stemHeight = size * 0.28;
+  return /*#__PURE__*/_jsx(IconWrapper, {
+    size: size,
+    style: style,
+    children: /*#__PURE__*/_jsxs(View, {
+      style: {
+        width: circleSize,
+        height: circleSize,
+        borderRadius: circleSize / 2,
+        borderWidth: strokeWidth,
+        borderColor: color,
+        alignItems: 'center',
+        justifyContent: 'center'
+      },
+      children: [/*#__PURE__*/_jsx(View, {
+        style: {
+          position: 'absolute',
+          top: circleSize * 0.22,
+          width: dotSize,
+          height: dotSize,
+          borderRadius: dotSize / 2,
+          backgroundColor: color
+        }
+      }), /*#__PURE__*/_jsx(View, {
+        style: {
+          position: 'absolute',
+          bottom: circleSize * 0.22,
+          width: stemWidth,
+          height: stemHeight,
+          borderRadius: stemWidth / 2,
+          backgroundColor: color
+        }
+      })]
+    })
+  });
+};
+
+/** Alias for ViewDetailsIcon */
+export const InfoIcon = ViewDetailsIcon;
+//# sourceMappingURL=defaultIcons.js.map