@buoy-gg/shared-ui 1.7.2

package/lib/module/icons/lucide-icons-original-full.js

@@ -0,0 +1,3174 @@
+"use strict";
+
+import { Fragment } from "react";
+import { View } from "react-native";
+import { gameUIColors } from "../ui/gameUI/constants/gameUIColors.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Core helper components with proper sizing
+const PureSvg = ({
+  width,
+  height,
+  viewBox,
+  children,
+  style,
+  ...props
+}) => {
+  const [,, vbWidth, vbHeight] = viewBox.split(" ").map(Number);
+  const scaleX = width / vbWidth;
+  const scaleY = height / vbHeight;
+  return /*#__PURE__*/_jsx(View, {
+    style: [{
+      width,
+      height,
+      position: "relative",
+      overflow: "hidden"
+    }, style],
+    ...props,
+    children: /*#__PURE__*/_jsx(View, {
+      style: {
+        transform: [{
+          scaleX
+        }, {
+          scaleY
+        }],
+        transformOrigin: "top left",
+        width: vbWidth,
+        height: vbHeight
+      },
+      children: children
+    })
+  });
+};
+const PureLine = ({
+  x1,
+  y1,
+  x2,
+  y2,
+  stroke,
+  strokeWidth = 2
+}) => {
+  const length = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
+  const angle = Math.atan2(y2 - y1, x2 - x1) * (180 / Math.PI);
+  return /*#__PURE__*/_jsx(View, {
+    style: {
+      position: "absolute",
+      left: x1,
+      top: y1 - strokeWidth / 2,
+      width: length,
+      height: strokeWidth,
+      backgroundColor: stroke,
+      transform: [{
+        rotate: `${angle}deg`
+      }],
+      transformOrigin: "left center"
+    }
+  });
+};
+const PureCircle = ({
+  cx,
+  cy,
+  r,
+  fill,
+  stroke,
+  strokeWidth = 2
+}) => {
+  const diameter = r * 2;
+  return /*#__PURE__*/_jsx(View, {
+    style: {
+      position: "absolute",
+      left: cx - r,
+      top: cy - r,
+      width: diameter,
+      height: diameter,
+      borderRadius: r,
+      backgroundColor: fill || "transparent",
+      borderColor: stroke,
+      borderWidth: stroke ? strokeWidth : 0
+    }
+  });
+};
+const PureRect = ({
+  x,
+  y,
+  width,
+  height,
+  fill,
+  stroke,
+  strokeWidth = 2,
+  rx = 0
+}) => /*#__PURE__*/_jsx(View, {
+  style: {
+    position: "absolute",
+    left: x,
+    top: y,
+    width,
+    height,
+    backgroundColor: fill || "transparent",
+    borderColor: stroke,
+    borderWidth: stroke ? strokeWidth : 0,
+    borderRadius: rx
+  }
+});
+
+// IMPROVED WIFI ICON - Using cone shape for perfect WiFi arcs
+export const WifiIcon = ({
+  size = 1,
+  color = "currentColor",
+  strokeWidth = 2
+}) => {
+  const strength = 4;
+  const scale = 28 / 60;
+  strokeWidth = 4 * scale;
+  return /*#__PURE__*/_jsxs(View, {
+    style: {
+      position: "relative",
+      width: size,
+      height: size
+    },
+    children: [/*#__PURE__*/_jsx(View, {
+      style: {
+        position: "absolute",
+        width: 5 * scale,
+        height: 5 * scale,
+        borderRadius: 2.5 * scale,
+        backgroundColor: color,
+        bottom: 0,
+        left: size / 2 - 2.5 * scale,
+        zIndex: 10
+      }
+    }), strength >= 2 && /*#__PURE__*/_jsx(View, {
+      style: {
+        position: "absolute",
+        bottom: -8 * scale,
+        // Move down to show more arc
+        left: size / 2 - 10 * scale,
+        transform: [{
+          rotate: "180deg"
+        }] // Rotate to show bottom half
+      },
+      children: /*#__PURE__*/_jsx(View, {
+        style: {
+          width: 20 * scale,
+          height: 20 * scale,
+          borderRadius: 10 * scale,
+          borderWidth: strokeWidth * scale,
+          borderColor: color,
+          borderTopColor: "transparent",
+          // Hide top after rotation
+          borderLeftColor: "transparent",
+          borderRightColor: "transparent"
+        }
+      })
+    }), strength >= 3 && /*#__PURE__*/_jsx(View, {
+      style: {
+        position: "absolute",
+        bottom: -14 * scale,
+        left: size / 2 - 17 * scale,
+        transform: [{
+          rotate: "180deg"
+        }]
+      },
+      children: /*#__PURE__*/_jsx(View, {
+        style: {
+          width: 34 * scale,
+          height: 34 * scale,
+          borderRadius: 17 * scale,
+          borderWidth: strokeWidth * scale,
+          borderColor: color,
+          borderTopColor: "transparent",
+          borderLeftColor: "transparent",
+          borderRightColor: "transparent"
+        }
+      })
+    }), strength >= 4 && /*#__PURE__*/_jsx(View, {
+      style: {
+        position: "absolute",
+        bottom: -22 * scale,
+        left: size / 2 - 25 * scale,
+        transform: [{
+          rotate: "180deg"
+        }]
+      },
+      children: /*#__PURE__*/_jsx(View, {
+        style: {
+          width: 50 * scale,
+          height: 50 * scale,
+          borderRadius: 25 * scale,
+          borderWidth: strokeWidth * scale,
+          borderColor: color,
+          borderTopColor: "transparent",
+          borderLeftColor: "transparent",
+          borderRightColor: "transparent"
+        }
+      })
+    })]
+  });
+};
+
+// SIMPLIFIED SETTINGS ICON - Minimal gear
+export const SettingsIcon = ({
+  size = 24,
+  color = "currentColor",
+  strokeWidth = 2,
+  ...props
+}) => /*#__PURE__*/_jsxs(PureSvg, {
+  width: size,
+  height: size,
+  viewBox: "0 0 24 24",
+  ...props,
+  children: [/*#__PURE__*/_jsx(PureCircle, {
+    cx: 12,
+    cy: 12,
+    r: 8,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureCircle, {
+    cx: 12,
+    cy: 12,
+    r: 3,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 12,
+    y1: 1,
+    x2: 12,
+    y2: 4,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 12,
+    y1: 20,
+    x2: 12,
+    y2: 23,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 1,
+    y1: 12,
+    x2: 4,
+    y2: 12,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 20,
+    y1: 12,
+    x2: 23,
+    y2: 12,
+    stroke: color,
+    strokeWidth: strokeWidth
+  })]
+});
+
+// SIMPLIFIED CLOUD ICON
+export const CloudIcon = ({
+  size = 24,
+  color = "currentColor",
+  strokeWidth = 2,
+  ...props
+}) => /*#__PURE__*/_jsxs(PureSvg, {
+  width: size,
+  height: size,
+  viewBox: "0 0 24 24",
+  ...props,
+  children: [/*#__PURE__*/_jsx(PureCircle, {
+    cx: 8,
+    cy: 15,
+    r: 4,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureCircle, {
+    cx: 16,
+    cy: 15,
+    r: 4,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureCircle, {
+    cx: 12,
+    cy: 11,
+    r: 4,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureRect, {
+    x: 8,
+    y: 13,
+    width: 8,
+    height: 6,
+    fill: "white",
+    stroke: "white"
+  })]
+});
+
+// SIMPLIFIED PHONE ICON
+export const PhoneIcon = ({
+  size = 24,
+  color = "currentColor",
+  strokeWidth = 2,
+  ...props
+}) => /*#__PURE__*/_jsxs(PureSvg, {
+  width: size,
+  height: size,
+  viewBox: "0 0 24 24",
+  ...props,
+  children: [/*#__PURE__*/_jsx(PureRect, {
+    x: 5,
+    y: 15,
+    width: 6,
+    height: 6,
+    rx: 2,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureRect, {
+    x: 13,
+    y: 3,
+    width: 6,
+    height: 6,
+    rx: 2,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 11,
+    y1: 15,
+    x2: 13,
+    y2: 9,
+    stroke: color,
+    strokeWidth: strokeWidth
+  })]
+});
+
+// SIMPLIFIED VOLUME ICON
+export const VolumeIcon = ({
+  size = 24,
+  color = "currentColor",
+  strokeWidth = 2,
+  ...props
+}) => /*#__PURE__*/_jsxs(PureSvg, {
+  width: size,
+  height: size,
+  viewBox: "0 0 24 24",
+  ...props,
+  children: [/*#__PURE__*/_jsx(PureRect, {
+    x: 3,
+    y: 9,
+    width: 5,
+    height: 6,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 8,
+    y1: 9,
+    x2: 11,
+    y2: 6,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 8,
+    y1: 15,
+    x2: 11,
+    y2: 18,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 8,
+    y1: 9,
+    x2: 8,
+    y2: 15,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 13,
+    y1: 9,
+    x2: 13,
+    y2: 15,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 16,
+    y1: 7,
+    x2: 16,
+    y2: 17,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 19,
+    y1: 5,
+    x2: 19,
+    y2: 19,
+    stroke: color,
+    strokeWidth: strokeWidth
+  })]
+});
+
+// SIMPLIFIED EYE ICON
+export const EyeIcon = ({
+  size = 24,
+  color = "currentColor",
+  strokeWidth = 2,
+  ...props
+}) => /*#__PURE__*/_jsxs(PureSvg, {
+  width: size,
+  height: size,
+  viewBox: "0 0 24 24",
+  ...props,
+  children: [/*#__PURE__*/_jsx(PureCircle, {
+    cx: 12,
+    cy: 12,
+    r: 10,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureCircle, {
+    cx: 12,
+    cy: 12,
+    r: 4,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureCircle, {
+    cx: 12,
+    cy: 12,
+    r: 2,
+    fill: color
+  })]
+});
+
+// SIMPLIFIED EYE OFF ICON
+export const EyeOffIcon = ({
+  size = 24,
+  color = "currentColor",
+  strokeWidth = 2,
+  ...props
+}) => /*#__PURE__*/_jsxs(PureSvg, {
+  width: size,
+  height: size,
+  viewBox: "0 0 24 24",
+  ...props,
+  children: [/*#__PURE__*/_jsx(PureCircle, {
+    cx: 12,
+    cy: 12,
+    r: 10,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureCircle, {
+    cx: 12,
+    cy: 12,
+    r: 4,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 4,
+    y1: 4,
+    x2: 20,
+    y2: 20,
+    stroke: color,
+    strokeWidth: strokeWidth
+  })]
+});
+
+// SIMPLIFIED REFRESH ICON
+export const RefreshCwIcon = ({
+  size = 24,
+  color = "currentColor",
+  strokeWidth = 2,
+  ...props
+}) => /*#__PURE__*/_jsxs(PureSvg, {
+  width: size,
+  height: size,
+  viewBox: "0 0 24 24",
+  ...props,
+  children: [/*#__PURE__*/_jsx(PureCircle, {
+    cx: 12,
+    cy: 12,
+    r: 9,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 12,
+    y1: 3,
+    x2: 15,
+    y2: 6,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 12,
+    y1: 3,
+    x2: 9,
+    y2: 6,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 12,
+    y1: 21,
+    x2: 15,
+    y2: 18,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 12,
+    y1: 21,
+    x2: 9,
+    y2: 18,
+    stroke: color,
+    strokeWidth: strokeWidth
+  })]
+});
+
+// SIMPLIFIED SHIELD ICON
+export const ShieldIcon = ({
+  size = 24,
+  color = "currentColor",
+  strokeWidth = 2,
+  ...props
+}) => /*#__PURE__*/_jsxs(PureSvg, {
+  width: size,
+  height: size,
+  viewBox: "0 0 24 24",
+  ...props,
+  children: [/*#__PURE__*/_jsx(PureLine, {
+    x1: 12,
+    y1: 2,
+    x2: 4,
+    y2: 8,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 12,
+    y1: 2,
+    x2: 20,
+    y2: 8,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 4,
+    y1: 8,
+    x2: 4,
+    y2: 14,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 20,
+    y1: 8,
+    x2: 20,
+    y2: 14,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 4,
+    y1: 14,
+    x2: 12,
+    y2: 22,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 20,
+    y1: 14,
+    x2: 12,
+    y2: 22,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 8,
+    y1: 11,
+    x2: 11,
+    y2: 14,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 11,
+    y1: 14,
+    x2: 16,
+    y2: 9,
+    stroke: color,
+    strokeWidth: strokeWidth
+  })]
+});
+
+// SIMPLIFIED PALETTE ICON
+export const PaletteIcon = ({
+  size = 24,
+  color = "currentColor",
+  strokeWidth = 2,
+  ...props
+}) => /*#__PURE__*/_jsxs(PureSvg, {
+  width: size,
+  height: size,
+  viewBox: "0 0 24 24",
+  ...props,
+  children: [/*#__PURE__*/_jsx(PureCircle, {
+    cx: 12,
+    cy: 12,
+    r: 10,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureCircle, {
+    cx: 8,
+    cy: 8,
+    r: 1,
+    fill: color
+  }), /*#__PURE__*/_jsx(PureCircle, {
+    cx: 16,
+    cy: 8,
+    r: 1,
+    fill: color
+  }), /*#__PURE__*/_jsx(PureCircle, {
+    cx: 8,
+    cy: 14,
+    r: 1,
+    fill: color
+  }), /*#__PURE__*/_jsx(PureCircle, {
+    cx: 14,
+    cy: 14,
+    r: 1,
+    fill: color
+  }), /*#__PURE__*/_jsx(PureCircle, {
+    cx: 17,
+    cy: 17,
+    r: 2,
+    stroke: color,
+    strokeWidth: strokeWidth
+  })]
+});
+
+// SIMPLIFIED HAND ICON
+export const HandIcon = ({
+  size = 24,
+  color = "currentColor",
+  strokeWidth = 2,
+  ...props
+}) => /*#__PURE__*/_jsxs(PureSvg, {
+  width: size,
+  height: size,
+  viewBox: "0 0 24 24",
+  ...props,
+  children: [/*#__PURE__*/_jsx(PureRect, {
+    x: 7,
+    y: 11,
+    width: 10,
+    height: 10,
+    rx: 2,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 9,
+    y1: 11,
+    x2: 9,
+    y2: 6,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 12,
+    y1: 11,
+    x2: 12,
+    y2: 4,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 15,
+    y1: 11,
+    x2: 15,
+    y2: 6,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 7,
+    y1: 14,
+    x2: 4,
+    y2: 12,
+    stroke: color,
+    strokeWidth: strokeWidth
+  })]
+});
+
+// Copy all the rest of the existing icons from the original file...
+// (I'll include the key ones that are visible in your screenshots)
+
+export const ActivityIcon = ({
+  size = 24,
+  color = "currentColor",
+  strokeWidth = 2,
+  ...props
+}) => /*#__PURE__*/_jsxs(PureSvg, {
+  width: size,
+  height: size,
+  viewBox: "0 0 24 24",
+  ...props,
+  children: [/*#__PURE__*/_jsx(PureLine, {
+    x1: 3,
+    y1: 12,
+    x2: 7,
+    y2: 12,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 7,
+    y1: 12,
+    x2: 10,
+    y2: 6,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 10,
+    y1: 6,
+    x2: 14,
+    y2: 18,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 14,
+    y1: 18,
+    x2: 17,
+    y2: 12,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 17,
+    y1: 12,
+    x2: 21,
+    y2: 12,
+    stroke: color,
+    strokeWidth: strokeWidth
+  })]
+});
+
+// SIMPLIFIED DATABASE ICON
+export const DatabaseIcon = ({
+  size = 24,
+  color = "currentColor",
+  strokeWidth = 2,
+  ...props
+}) => /*#__PURE__*/_jsxs(PureSvg, {
+  width: size,
+  height: size,
+  viewBox: "0 0 24 24",
+  ...props,
+  children: [/*#__PURE__*/_jsx(PureRect, {
+    x: 5,
+    y: 3,
+    width: 14,
+    height: 4,
+    rx: 2,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureRect, {
+    x: 5,
+    y: 7,
+    width: 14,
+    height: 4,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureRect, {
+    x: 5,
+    y: 11,
+    width: 14,
+    height: 8,
+    rx: 2,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 5,
+    y1: 7,
+    x2: 19,
+    y2: 7,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 5,
+    y1: 11,
+    x2: 19,
+    y2: 11,
+    stroke: color,
+    strokeWidth: strokeWidth
+  })]
+});
+export const BugIcon = ({
+  size = 24,
+  color = "currentColor",
+  strokeWidth = 2,
+  ...props
+}) => {
+  const scale = 20 / 30;
+  return /*#__PURE__*/_jsx(View, {
+    style: {
+      width: size * 1.5,
+      height: size * 1,
+      alignItems: "center",
+      justifyContent: "center"
+    },
+    children: /*#__PURE__*/_jsxs(View, {
+      style: {
+        transform: [{
+          rotate: "20deg"
+        }],
+        position: "relative"
+      },
+      children: [/*#__PURE__*/_jsx(View, {
+        style: {
+          width: 20 * scale,
+          height: 26 * scale,
+          backgroundColor: color,
+          borderRadius: 10 * scale,
+          // Create oval/egg shape
+          borderTopLeftRadius: 10 * scale,
+          borderTopRightRadius: 10 * scale,
+          borderBottomLeftRadius: 12 * scale,
+          borderBottomRightRadius: 12 * scale
+        }
+      }), /*#__PURE__*/_jsx(View, {
+        style: {
+          position: "absolute",
+          width: 12 * scale,
+          height: 8 * scale,
+          backgroundColor: color,
+          borderRadius: 6 * scale,
+          top: -4 * scale,
+          left: 4 * scale
+        }
+      }), /*#__PURE__*/_jsx(View, {
+        style: {
+          position: "absolute",
+          width: 2 * scale,
+          height: 8 * scale,
+          backgroundColor: color,
+          top: -10 * scale,
+          left: 6 * scale,
+          transform: [{
+            rotate: "-15deg"
+          }]
+        }
+      }), /*#__PURE__*/_jsx(View, {
+        style: {
+          position: "absolute",
+          width: 2 * scale,
+          height: 8 * scale,
+          backgroundColor: color,
+          top: -10 * scale,
+          right: 6 * scale,
+          transform: [{
+            rotate: "15deg"
+          }]
+        }
+      }), /*#__PURE__*/_jsx(View, {
+        style: {
+          position: "absolute",
+          width: 3 * scale,
+          height: 3 * scale,
+          backgroundColor: "#fff",
+          borderRadius: 1.5 * scale,
+          top: -2 * scale,
+          left: 6 * scale
+        }
+      }), /*#__PURE__*/_jsx(View, {
+        style: {
+          position: "absolute",
+          width: 3 * scale,
+          height: 3 * scale,
+          backgroundColor: "#fff",
+          borderRadius: 1.5 * scale,
+          top: -2 * scale,
+          right: 6 * scale
+        }
+      }), [0, 1, 2].map(index => /*#__PURE__*/_jsxs(Fragment, {
+        children: [/*#__PURE__*/_jsx(View, {
+          style: {
+            position: "absolute",
+            width: 8 * scale,
+            height: 2 * scale,
+            backgroundColor: color,
+            top: (6 + index * 6) * scale,
+            left: -6 * scale,
+            transform: [{
+              rotate: "-45deg"
+            }]
+          }
+        }), /*#__PURE__*/_jsx(View, {
+          style: {
+            position: "absolute",
+            width: 8 * scale,
+            height: 2 * scale,
+            backgroundColor: color,
+            top: (6 + index * 6) * scale,
+            right: -6 * scale,
+            transform: [{
+              rotate: "45deg"
+            }]
+          }
+        })]
+      }, index))]
+    })
+  });
+};
+export const ServerIcon = ({
+  size = 24,
+  color = "currentColor",
+  strokeWidth = 2,
+  ...props
+}) => {
+  const scale = 20 / 30;
+  return /*#__PURE__*/_jsxs(View, {
+    style: {
+      width: size,
+      height: size,
+      alignItems: "center",
+      justifyContent: "center"
+    },
+    children: [/*#__PURE__*/_jsx(View, {
+      style: {
+        width: 28 * scale,
+        height: 18 * scale,
+        backgroundColor: color,
+        borderRadius: 2 * scale,
+        marginBottom: -2 * scale
+      }
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
+        position: "absolute",
+        width: 24 * scale,
+        height: 14 * scale,
+        backgroundColor: "#fff",
+        borderRadius: 1 * scale,
+        top: 11 * scale,
+        opacity: 0.2
+      }
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
+        width: 36 * scale,
+        height: 3 * scale,
+        backgroundColor: color,
+        borderRadius: 1 * scale
+      }
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
+        position: "absolute",
+        width: 8 * scale,
+        height: 1 * scale,
+        backgroundColor: "#fff",
+        bottom: 17 * scale,
+        opacity: 0.3
+      }
+    })]
+  });
+};
+export const GlobeIcon = ({
+  size = 24,
+  color = gameUIColors.env,
+  strokeWidth = 2,
+  ...props
+}) => {
+  color = gameUIColors.env;
+  const scale = size / 24;
+  const globeSize = 18 * scale;
+  return /*#__PURE__*/_jsxs(View, {
+    style: {
+      width: size,
+      height: size
+    },
+    children: [/*#__PURE__*/_jsx(View, {
+      style: {
+        position: "absolute",
+        width: globeSize,
+        height: globeSize,
+        borderWidth: 2 * scale,
+        borderColor: color,
+        borderRadius: globeSize / 2,
+        top: (size - globeSize) / 2,
+        left: (size - globeSize) / 2,
+        backgroundColor: gameUIColors.blackTint1,
+        shadowColor: color,
+        shadowOffset: {
+          width: 0,
+          height: 0
+        },
+        shadowOpacity: 0.6,
+        shadowRadius: 4 * scale
+      }
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
+        position: "absolute",
+        width: globeSize,
+        height: globeSize,
+        borderWidth: 2 * scale,
+        borderColor: color,
+        borderRadius: globeSize / 2,
+        top: (size - globeSize) / 2,
+        left: (size - globeSize) / 2,
+        transform: [{
+          scaleX: 0.45
+        }],
+        opacity: 0.6
+      }
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
+        position: "absolute",
+        width: globeSize,
+        height: globeSize,
+        borderWidth: 2 * scale,
+        borderColor: color,
+        borderRadius: globeSize / 2,
+        top: (size - globeSize) / 2,
+        left: (size - globeSize) / 2,
+        transform: [{
+          scaleX: 1.33
+        }, {
+          scaleY: 0.6
+        }],
+        opacity: 0.6
+      }
+    })]
+  });
+};
+export const XIcon = ({
+  size = 24,
+  color = "currentColor",
+  strokeWidth = 2,
+  ...props
+}) => /*#__PURE__*/_jsxs(PureSvg, {
+  width: size,
+  height: size,
+  viewBox: "0 0 24 24",
+  ...props,
+  children: [/*#__PURE__*/_jsx(PureLine, {
+    x1: 6,
+    y1: 6,
+    x2: 18,
+    y2: 18,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 18,
+    y1: 6,
+    x2: 6,
+    y2: 18,
+    stroke: color,
+    strokeWidth: strokeWidth
+  })]
+});
+
+// IMPROVED CHECK CIRCLE ICON
+export const CheckCircle2Icon = ({
+  size = 24,
+  color = "currentColor",
+  strokeWidth = 2,
+  ...props
+}) => /*#__PURE__*/_jsxs(PureSvg, {
+  width: size,
+  height: size,
+  viewBox: "0 0 24 24",
+  ...props,
+  children: [/*#__PURE__*/_jsx(PureCircle, {
+    cx: 12,
+    cy: 12,
+    r: 10,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 8,
+    y1: 12,
+    x2: 11,
+    y2: 15,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 11,
+    y1: 15,
+    x2: 16,
+    y2: 9,
+    stroke: color,
+    strokeWidth: strokeWidth
+  })]
+});
+
+// IMPROVED X CIRCLE ICON
+export const XCircleIcon = ({
+  size = 24,
+  color = "currentColor",
+  strokeWidth = 2,
+  ...props
+}) => /*#__PURE__*/_jsxs(PureSvg, {
+  width: size,
+  height: size,
+  viewBox: "0 0 24 24",
+  ...props,
+  children: [/*#__PURE__*/_jsx(PureCircle, {
+    cx: 12,
+    cy: 12,
+    r: 10,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 8,
+    y1: 8,
+    x2: 16,
+    y2: 16,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 16,
+    y1: 8,
+    x2: 8,
+    y2: 16,
+    stroke: color,
+    strokeWidth: strokeWidth
+  })]
+});
+
+// SIMPLIFIED FILE CODE ICON
+export const FileCodeIcon = ({
+  size = 24,
+  color = "currentColor",
+  strokeWidth = 2,
+  ...props
+}) => /*#__PURE__*/_jsxs(PureSvg, {
+  width: size,
+  height: size,
+  viewBox: "0 0 24 24",
+  ...props,
+  children: [/*#__PURE__*/_jsx(PureRect, {
+    x: 5,
+    y: 2,
+    width: 14,
+    height: 20,
+    rx: 1,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 14,
+    y1: 2,
+    x2: 19,
+    y2: 7,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 14,
+    y1: 2,
+    x2: 14,
+    y2: 7,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 14,
+    y1: 7,
+    x2: 19,
+    y2: 7,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 8,
+    y1: 11,
+    x2: 10,
+    y2: 13,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 8,
+    y1: 15,
+    x2: 10,
+    y2: 13,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 14,
+    y1: 11,
+    x2: 16,
+    y2: 13,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 14,
+    y1: 15,
+    x2: 16,
+    y2: 13,
+    stroke: color,
+    strokeWidth: strokeWidth
+  })]
+});
+
+// IMPROVED FILE TEXT ICON
+export const FileTextIcon = ({
+  size = 24,
+  color = "currentColor",
+  strokeWidth = 2,
+  ...props
+}) => /*#__PURE__*/_jsxs(PureSvg, {
+  width: size,
+  height: size,
+  viewBox: "0 0 24 24",
+  ...props,
+  children: [/*#__PURE__*/_jsx(PureRect, {
+    x: 4,
+    y: 2,
+    width: 12,
+    height: 20,
+    rx: 1,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(View, {
+    style: {
+      position: "absolute",
+      left: 14,
+      top: 2,
+      width: 0,
+      height: 0,
+      borderLeftWidth: 4,
+      borderTopWidth: 4,
+      borderLeftColor: color,
+      borderTopColor: "transparent"
+    }
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 14,
+    y1: 6,
+    x2: 18,
+    y2: 6,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 7,
+    y1: 10,
+    x2: 13,
+    y2: 10,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 7,
+    y1: 13,
+    x2: 13,
+    y2: 13,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 7,
+    y1: 16,
+    x2: 10,
+    y2: 16,
+    stroke: color,
+    strokeWidth: strokeWidth
+  })]
+});
+
+// SIMPLIFIED FILE JSON ICON
+export const FileJsonIcon = ({
+  size = 24,
+  color = "currentColor",
+  strokeWidth = 2,
+  ...props
+}) => /*#__PURE__*/_jsxs(PureSvg, {
+  width: size,
+  height: size,
+  viewBox: "0 0 24 24",
+  ...props,
+  children: [/*#__PURE__*/_jsx(PureRect, {
+    x: 5,
+    y: 2,
+    width: 14,
+    height: 20,
+    rx: 1,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 14,
+    y1: 2,
+    x2: 19,
+    y2: 7,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 14,
+    y1: 2,
+    x2: 14,
+    y2: 7,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 14,
+    y1: 7,
+    x2: 19,
+    y2: 7,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 9,
+    y1: 11,
+    x2: 9,
+    y2: 15,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 9,
+    y1: 11,
+    x2: 10,
+    y2: 11,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 9,
+    y1: 15,
+    x2: 10,
+    y2: 15,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 15,
+    y1: 11,
+    x2: 15,
+    y2: 15,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 14,
+    y1: 11,
+    x2: 15,
+    y2: 11,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 14,
+    y1: 15,
+    x2: 15,
+    y2: 15,
+    stroke: color,
+    strokeWidth: strokeWidth
+  })]
+});
+
+// SIMPLIFIED TEST TUBE ICON
+export const TestTube2Icon = ({
+  size = 24,
+  color = "currentColor",
+  strokeWidth = 2,
+  ...props
+}) => /*#__PURE__*/_jsxs(PureSvg, {
+  width: size,
+  height: size,
+  viewBox: "0 0 24 24",
+  ...props,
+  children: [/*#__PURE__*/_jsx(PureRect, {
+    x: 10,
+    y: 2,
+    width: 4,
+    height: 18,
+    rx: 2,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 8,
+    y1: 4,
+    x2: 16,
+    y2: 4,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 10,
+    y1: 14,
+    x2: 14,
+    y2: 14,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureRect, {
+    x: 11,
+    y: 15,
+    width: 2,
+    height: 4,
+    fill: color
+  })]
+});
+
+// SIMPLIFIED FLASK ICON
+export const FlaskConicalIcon = ({
+  size = 24,
+  color = "currentColor",
+  strokeWidth = 2,
+  ...props
+}) => /*#__PURE__*/_jsxs(PureSvg, {
+  width: size,
+  height: size,
+  viewBox: "0 0 24 24",
+  ...props,
+  children: [/*#__PURE__*/_jsx(PureLine, {
+    x1: 10,
+    y1: 2,
+    x2: 10,
+    y2: 9,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 14,
+    y1: 2,
+    x2: 14,
+    y2: 9,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 8,
+    y1: 2,
+    x2: 16,
+    y2: 2,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 10,
+    y1: 9,
+    x2: 4,
+    y2: 21,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 14,
+    y1: 9,
+    x2: 20,
+    y2: 21,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 4,
+    y1: 21,
+    x2: 20,
+    y2: 21,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 8,
+    y1: 16,
+    x2: 16,
+    y2: 16,
+    stroke: color,
+    strokeWidth: strokeWidth
+  })]
+});
+
+// IMPROVED TRASH ICON
+export const Trash2Icon = ({
+  size = 24,
+  color = "currentColor",
+  strokeWidth = 2,
+  ...props
+}) => /*#__PURE__*/_jsxs(PureSvg, {
+  width: size,
+  height: size,
+  viewBox: "0 0 24 24",
+  ...props,
+  children: [/*#__PURE__*/_jsx(PureRect, {
+    x: 5,
+    y: 7,
+    width: 14,
+    height: 14,
+    rx: 1,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 3,
+    y1: 7,
+    x2: 21,
+    y2: 7,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureRect, {
+    x: 9,
+    y: 3,
+    width: 6,
+    height: 4,
+    rx: 1,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 10,
+    y1: 11,
+    x2: 10,
+    y2: 17,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 14,
+    y1: 11,
+    x2: 14,
+    y2: 17,
+    stroke: color,
+    strokeWidth: strokeWidth
+  })]
+});
+
+// IMPROVED HASH ICON
+export const HashIcon = ({
+  size = 24,
+  color = "currentColor",
+  strokeWidth = 2,
+  ...props
+}) => /*#__PURE__*/_jsxs(PureSvg, {
+  width: size,
+  height: size,
+  viewBox: "0 0 24 24",
+  ...props,
+  children: [/*#__PURE__*/_jsx(PureLine, {
+    x1: 4,
+    y1: 9,
+    x2: 20,
+    y2: 9,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 4,
+    y1: 15,
+    x2: 20,
+    y2: 15,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 10,
+    y1: 3,
+    x2: 8,
+    y2: 21,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 16,
+    y1: 3,
+    x2: 14,
+    y2: 21,
+    stroke: color,
+    strokeWidth: strokeWidth
+  })]
+});
+
+// IMPROVED USERS ICON
+export const UsersIcon = ({
+  size = 24,
+  color = "currentColor",
+  strokeWidth = 2,
+  ...props
+}) => /*#__PURE__*/_jsxs(PureSvg, {
+  width: size,
+  height: size,
+  viewBox: "0 0 24 24",
+  ...props,
+  children: [/*#__PURE__*/_jsx(PureCircle, {
+    cx: 9,
+    cy: 8,
+    r: 3,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(View, {
+    style: {
+      position: "absolute",
+      left: 4,
+      top: 14,
+      width: 10,
+      height: 6,
+      borderRadius: 5,
+      borderWidth: strokeWidth,
+      borderColor: color,
+      backgroundColor: "transparent"
+    }
+  }), /*#__PURE__*/_jsx(PureCircle, {
+    cx: 16,
+    cy: 7,
+    r: 2,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(View, {
+    style: {
+      position: "absolute",
+      left: 13,
+      top: 12,
+      width: 6,
+      height: 8,
+      borderRadius: 3,
+      borderWidth: strokeWidth,
+      borderColor: color,
+      backgroundColor: "transparent"
+    }
+  })]
+});
+
+// SIMPLIFIED BOX ICON
+export const BoxIcon = ({
+  size = 24,
+  color = "currentColor",
+  strokeWidth = 2,
+  ...props
+}) => /*#__PURE__*/_jsxs(PureSvg, {
+  width: size,
+  height: size,
+  viewBox: "0 0 24 24",
+  ...props,
+  children: [/*#__PURE__*/_jsx(PureRect, {
+    x: 4,
+    y: 8,
+    width: 16,
+    height: 12,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 4,
+    y1: 8,
+    x2: 8,
+    y2: 4,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 20,
+    y1: 8,
+    x2: 16,
+    y2: 4,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 8,
+    y1: 4,
+    x2: 16,
+    y2: 4,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 12,
+    y1: 4,
+    x2: 12,
+    y2: 8,
+    stroke: color,
+    strokeWidth: strokeWidth
+  })]
+});
+
+// SIMPLIFIED KEY ICON
+export const KeyIcon = ({
+  size = 24,
+  color = "currentColor",
+  strokeWidth = 2,
+  ...props
+}) => /*#__PURE__*/_jsxs(PureSvg, {
+  width: size,
+  height: size,
+  viewBox: "0 0 24 24",
+  ...props,
+  children: [/*#__PURE__*/_jsx(PureCircle, {
+    cx: 7,
+    cy: 12,
+    r: 5,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureCircle, {
+    cx: 7,
+    cy: 12,
+    r: 1.5,
+    fill: color
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 12,
+    y1: 12,
+    x2: 21,
+    y2: 12,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 19,
+    y1: 12,
+    x2: 19,
+    y2: 15,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 21,
+    y1: 12,
+    x2: 21,
+    y2: 14,
+    stroke: color,
+    strokeWidth: strokeWidth
+  })]
+});
+
+// SIMPLIFIED ROUTE ICON
+export const RouteIcon = ({
+  size = 24,
+  color = "currentColor",
+  strokeWidth = 2,
+  ...props
+}) => /*#__PURE__*/_jsxs(PureSvg, {
+  width: size,
+  height: size,
+  viewBox: "0 0 24 24",
+  ...props,
+  children: [/*#__PURE__*/_jsx(PureCircle, {
+    cx: 5,
+    cy: 12,
+    r: 3,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureCircle, {
+    cx: 19,
+    cy: 12,
+    r: 3,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 8,
+    y1: 12,
+    x2: 16,
+    y2: 12,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 13,
+    y1: 9,
+    x2: 16,
+    y2: 12,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 13,
+    y1: 15,
+    x2: 16,
+    y2: 12,
+    stroke: color,
+    strokeWidth: strokeWidth
+  })]
+});
+
+// SIMPLIFIED TRIANGLE ALERT ICON
+export const TriangleAlertIcon = ({
+  size = 24,
+  color = "currentColor",
+  strokeWidth = 2,
+  ...props
+}) => /*#__PURE__*/_jsxs(PureSvg, {
+  width: size,
+  height: size,
+  viewBox: "0 0 24 24",
+  ...props,
+  children: [/*#__PURE__*/_jsx(PureLine, {
+    x1: 12,
+    y1: 3,
+    x2: 3,
+    y2: 20,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 12,
+    y1: 3,
+    x2: 21,
+    y2: 20,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 3,
+    y1: 20,
+    x2: 21,
+    y2: 20,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 12,
+    y1: 9,
+    x2: 12,
+    y2: 13,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureCircle, {
+    cx: 12,
+    cy: 16,
+    r: 1,
+    fill: color
+  })]
+});
+
+// SIMPLIFIED UNLOCK ICON
+export const UnlockIcon = ({
+  size = 24,
+  color = "currentColor",
+  strokeWidth = 2,
+  ...props
+}) => /*#__PURE__*/_jsxs(PureSvg, {
+  width: size,
+  height: size,
+  viewBox: "0 0 24 24",
+  ...props,
+  children: [/*#__PURE__*/_jsx(PureRect, {
+    x: 5,
+    y: 11,
+    width: 14,
+    height: 10,
+    rx: 1,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 7,
+    y1: 11,
+    x2: 7,
+    y2: 7,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 7,
+    y1: 7,
+    x2: 14,
+    y2: 7,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureCircle, {
+    cx: 12,
+    cy: 16,
+    r: 1,
+    fill: color
+  })]
+});
+
+// SIMPLIFIED IMAGE ICON
+export const ImageIcon = ({
+  size = 24,
+  color = "currentColor",
+  strokeWidth = 2,
+  ...props
+}) => /*#__PURE__*/_jsxs(PureSvg, {
+  width: size,
+  height: size,
+  viewBox: "0 0 24 24",
+  ...props,
+  children: [/*#__PURE__*/_jsx(PureRect, {
+    x: 3,
+    y: 3,
+    width: 18,
+    height: 18,
+    rx: 1,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureCircle, {
+    cx: 8,
+    cy: 8,
+    r: 2,
+    fill: color
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 3,
+    y1: 21,
+    x2: 10,
+    y2: 14,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 10,
+    y1: 14,
+    x2: 21,
+    y2: 21,
+    stroke: color,
+    strokeWidth: strokeWidth
+  })]
+});
+
+// SIMPLIFIED FILM ICON
+export const FilmIcon = ({
+  size = 24,
+  color = "currentColor",
+  strokeWidth = 2,
+  ...props
+}) => /*#__PURE__*/_jsxs(PureSvg, {
+  width: size,
+  height: size,
+  viewBox: "0 0 24 24",
+  ...props,
+  children: [/*#__PURE__*/_jsx(PureRect, {
+    x: 5,
+    y: 3,
+    width: 14,
+    height: 18,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureRect, {
+    x: 7,
+    y: 5,
+    width: 2,
+    height: 2,
+    fill: color
+  }), /*#__PURE__*/_jsx(PureRect, {
+    x: 7,
+    y: 17,
+    width: 2,
+    height: 2,
+    fill: color
+  }), /*#__PURE__*/_jsx(PureRect, {
+    x: 15,
+    y: 5,
+    width: 2,
+    height: 2,
+    fill: color
+  }), /*#__PURE__*/_jsx(PureRect, {
+    x: 15,
+    y: 17,
+    width: 2,
+    height: 2,
+    fill: color
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 5,
+    y1: 12,
+    x2: 19,
+    y2: 12,
+    stroke: color,
+    strokeWidth: strokeWidth
+  })]
+});
+
+// SIMPLIFIED MUSIC ICON
+export const MusicIcon = ({
+  size = 24,
+  color = "currentColor",
+  strokeWidth = 2,
+  ...props
+}) => /*#__PURE__*/_jsxs(PureSvg, {
+  width: size,
+  height: size,
+  viewBox: "0 0 24 24",
+  ...props,
+  children: [/*#__PURE__*/_jsx(PureLine, {
+    x1: 8,
+    y1: 6,
+    x2: 8,
+    y2: 18,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 8,
+    y1: 6,
+    x2: 18,
+    y2: 3,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 18,
+    y1: 3,
+    x2: 18,
+    y2: 8,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 8,
+    y1: 10,
+    x2: 18,
+    y2: 8,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureCircle, {
+    cx: 8,
+    cy: 18,
+    r: 2,
+    fill: color
+  })]
+});
+
+// SIMPLIFIED TIMER ICON
+export const TimerIcon = ({
+  size = 24,
+  color = "currentColor",
+  strokeWidth = 2,
+  ...props
+}) => /*#__PURE__*/_jsxs(PureSvg, {
+  width: size,
+  height: size,
+  viewBox: "0 0 24 24",
+  ...props,
+  children: [/*#__PURE__*/_jsx(PureCircle, {
+    cx: 12,
+    cy: 13,
+    r: 9,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 12,
+    y1: 2,
+    x2: 12,
+    y2: 4,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 9,
+    y1: 2,
+    x2: 15,
+    y2: 2,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 12,
+    y1: 13,
+    x2: 12,
+    y2: 8,
+    stroke: color,
+    strokeWidth: strokeWidth
+  })]
+});
+
+// SIMPLIFIED SMARTPHONE ICON
+export const SmartphoneIcon = ({
+  size = 24,
+  color = "currentColor",
+  strokeWidth = 2,
+  ...props
+}) => /*#__PURE__*/_jsxs(PureSvg, {
+  width: size,
+  height: size,
+  viewBox: "0 0 24 24",
+  ...props,
+  children: [/*#__PURE__*/_jsx(PureRect, {
+    x: 6,
+    y: 2,
+    width: 12,
+    height: 20,
+    rx: 2,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 6,
+    y1: 5,
+    x2: 18,
+    y2: 5,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 6,
+    y1: 19,
+    x2: 18,
+    y2: 19,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 10,
+    y1: 20.5,
+    x2: 14,
+    y2: 20.5,
+    stroke: color,
+    strokeWidth: strokeWidth
+  })]
+});
+
+// SIMPLIFIED LAYERS ICON
+export const LayersIcon = ({
+  size = 24,
+  color = "currentColor",
+  strokeWidth = 2,
+  ...props
+}) => /*#__PURE__*/_jsxs(PureSvg, {
+  width: size,
+  height: size,
+  viewBox: "0 0 24 24",
+  ...props,
+  children: [/*#__PURE__*/_jsx(PureRect, {
+    x: 5,
+    y: 15,
+    width: 14,
+    height: 4,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureRect, {
+    x: 5,
+    y: 10,
+    width: 14,
+    height: 4,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureRect, {
+    x: 5,
+    y: 5,
+    width: 14,
+    height: 4,
+    stroke: color,
+    strokeWidth: strokeWidth
+  })]
+});
+
+// SIMPLIFIED NAVIGATION ICON
+export const NavigationIcon = ({
+  size = 24,
+  color = "currentColor",
+  strokeWidth = 2,
+  ...props
+}) => /*#__PURE__*/_jsxs(PureSvg, {
+  width: size,
+  height: size,
+  viewBox: "0 0 24 24",
+  ...props,
+  children: [/*#__PURE__*/_jsx(PureLine, {
+    x1: 12,
+    y1: 2,
+    x2: 5,
+    y2: 19,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 12,
+    y1: 2,
+    x2: 19,
+    y2: 19,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 5,
+    y1: 19,
+    x2: 12,
+    y2: 16,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 19,
+    y1: 19,
+    x2: 12,
+    y2: 16,
+    stroke: color,
+    strokeWidth: strokeWidth
+  })]
+});
+
+// SIMPLIFIED TOUCHPAD ICON
+export const TouchpadIcon = ({
+  size = 24,
+  color = "currentColor",
+  strokeWidth = 2,
+  ...props
+}) => /*#__PURE__*/_jsxs(PureSvg, {
+  width: size,
+  height: size,
+  viewBox: "0 0 24 24",
+  ...props,
+  children: [/*#__PURE__*/_jsx(PureRect, {
+    x: 3,
+    y: 5,
+    width: 18,
+    height: 14,
+    rx: 1,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 12,
+    y1: 15,
+    x2: 12,
+    y2: 19,
+    stroke: color,
+    strokeWidth: strokeWidth
+  })]
+});
+
+// IMPROVED BAR CHART ICON
+export const AlertCircleIcon = ({
+  size = 24,
+  color = "currentColor",
+  strokeWidth = 2,
+  ...props
+}) => /*#__PURE__*/_jsxs(PureSvg, {
+  width: size,
+  height: size,
+  viewBox: "0 0 24 24",
+  ...props,
+  children: [/*#__PURE__*/_jsx(PureCircle, {
+    cx: 12,
+    cy: 12,
+    r: 10,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 12,
+    y1: 8,
+    x2: 12,
+    y2: 12,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(View, {
+    style: {
+      position: "absolute",
+      left: 11,
+      top: 15,
+      width: 2,
+      height: 2,
+      borderRadius: 1,
+      backgroundColor: color
+    }
+  })]
+});
+export const AlertTriangleIcon = TriangleAlertIcon;
+export const CheckIcon = ({
+  size = 24,
+  color = "currentColor",
+  strokeWidth = 2,
+  ...props
+}) => /*#__PURE__*/_jsxs(PureSvg, {
+  width: size,
+  height: size,
+  viewBox: "0 0 24 24",
+  ...props,
+  children: [/*#__PURE__*/_jsx(PureLine, {
+    x1: 5,
+    y1: 12,
+    x2: 10,
+    y2: 17,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 10,
+    y1: 17,
+    x2: 19,
+    y2: 7,
+    stroke: color,
+    strokeWidth: strokeWidth
+  })]
+});
+export const CheckCircleIcon = CheckCircle2Icon;
+export const ChevronDownIcon = ({
+  size = 24,
+  color = "currentColor",
+  strokeWidth = 2,
+  ...props
+}) => /*#__PURE__*/_jsxs(PureSvg, {
+  width: size,
+  height: size,
+  viewBox: "0 0 24 24",
+  ...props,
+  children: [/*#__PURE__*/_jsx(PureLine, {
+    x1: 6,
+    y1: 9,
+    x2: 12,
+    y2: 15,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 12,
+    y1: 15,
+    x2: 18,
+    y2: 9,
+    stroke: color,
+    strokeWidth: strokeWidth
+  })]
+});
+export const ChevronLeftIcon = ({
+  size = 24,
+  color = "currentColor",
+  strokeWidth = 2,
+  ...props
+}) => /*#__PURE__*/_jsxs(PureSvg, {
+  width: size,
+  height: size,
+  viewBox: "0 0 24 24",
+  ...props,
+  children: [/*#__PURE__*/_jsx(PureLine, {
+    x1: 15,
+    y1: 6,
+    x2: 9,
+    y2: 12,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 9,
+    y1: 12,
+    x2: 15,
+    y2: 18,
+    stroke: color,
+    strokeWidth: strokeWidth
+  })]
+});
+export const ChevronRightIcon = ({
+  size = 24,
+  color = "currentColor",
+  strokeWidth = 2,
+  ...props
+}) => /*#__PURE__*/_jsxs(PureSvg, {
+  width: size,
+  height: size,
+  viewBox: "0 0 24 24",
+  ...props,
+  children: [/*#__PURE__*/_jsx(PureLine, {
+    x1: 9,
+    y1: 6,
+    x2: 15,
+    y2: 12,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 15,
+    y1: 12,
+    x2: 9,
+    y2: 18,
+    stroke: color,
+    strokeWidth: strokeWidth
+  })]
+});
+export const ChevronUpIcon = ({
+  size = 24,
+  color = "currentColor",
+  strokeWidth = 2,
+  ...props
+}) => /*#__PURE__*/_jsxs(PureSvg, {
+  width: size,
+  height: size,
+  viewBox: "0 0 24 24",
+  ...props,
+  children: [/*#__PURE__*/_jsx(PureLine, {
+    x1: 6,
+    y1: 15,
+    x2: 12,
+    y2: 9,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 12,
+    y1: 9,
+    x2: 18,
+    y2: 15,
+    stroke: color,
+    strokeWidth: strokeWidth
+  })]
+});
+export const ClockIcon = ({
+  size = 24,
+  color = "currentColor",
+  strokeWidth = 2,
+  ...props
+}) => /*#__PURE__*/_jsxs(PureSvg, {
+  width: size,
+  height: size,
+  viewBox: "0 0 24 24",
+  ...props,
+  children: [/*#__PURE__*/_jsx(PureCircle, {
+    cx: 12,
+    cy: 12,
+    r: 10,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 12,
+    y1: 6,
+    x2: 12,
+    y2: 12,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 12,
+    y1: 12,
+    x2: 16,
+    y2: 14,
+    stroke: color,
+    strokeWidth: strokeWidth
+  })]
+});
+export const CopyIcon = ({
+  size = 24,
+  color = "currentColor",
+  strokeWidth = 2,
+  ...props
+}) => /*#__PURE__*/_jsxs(PureSvg, {
+  width: size,
+  height: size,
+  viewBox: "0 0 24 24",
+  ...props,
+  children: [/*#__PURE__*/_jsx(PureRect, {
+    x: 8,
+    y: 8,
+    width: 12,
+    height: 12,
+    rx: 1,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(View, {
+    style: {
+      position: "absolute",
+      left: 4,
+      top: 4,
+      width: 12,
+      height: 12,
+      borderRadius: 1,
+      borderWidth: strokeWidth,
+      borderColor: color,
+      borderRightColor: "transparent",
+      borderBottomColor: "transparent",
+      backgroundColor: "transparent"
+    }
+  })]
+});
+export const DownloadIcon = ({
+  size = 24,
+  color = "currentColor",
+  strokeWidth = 2,
+  ...props
+}) => /*#__PURE__*/_jsxs(PureSvg, {
+  width: size,
+  height: size,
+  viewBox: "0 0 24 24",
+  ...props,
+  children: [/*#__PURE__*/_jsx(PureLine, {
+    x1: 12,
+    y1: 3,
+    x2: 12,
+    y2: 15,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 8,
+    y1: 11,
+    x2: 12,
+    y2: 15,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 16,
+    y1: 11,
+    x2: 12,
+    y2: 15,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 4,
+    y1: 17,
+    x2: 20,
+    y2: 17,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 4,
+    y1: 17,
+    x2: 4,
+    y2: 21,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 20,
+    y1: 17,
+    x2: 20,
+    y2: 21,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 4,
+    y1: 21,
+    x2: 20,
+    y2: 21,
+    stroke: color,
+    strokeWidth: strokeWidth
+  })]
+});
+
+// SIMPLIFIED FILTER ICON
+export const FilterIcon = ({
+  size = 24,
+  color = "currentColor",
+  strokeWidth = 2,
+  ...props
+}) => /*#__PURE__*/_jsxs(PureSvg, {
+  width: size,
+  height: size,
+  viewBox: "0 0 24 24",
+  ...props,
+  children: [/*#__PURE__*/_jsx(PureLine, {
+    x1: 4,
+    y1: 5,
+    x2: 20,
+    y2: 5,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 4,
+    y1: 5,
+    x2: 10,
+    y2: 12,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 20,
+    y1: 5,
+    x2: 14,
+    y2: 12,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 10,
+    y1: 12,
+    x2: 10,
+    y2: 19,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 14,
+    y1: 12,
+    x2: 14,
+    y2: 19,
+    stroke: color,
+    strokeWidth: strokeWidth
+  })]
+});
+
+// SIMPLIFIED GIT BRANCH ICON
+export const GitBranchIcon = ({
+  size = 24,
+  color = "currentColor",
+  strokeWidth = 2,
+  ...props
+}) => /*#__PURE__*/_jsxs(PureSvg, {
+  width: size,
+  height: size,
+  viewBox: "0 0 24 24",
+  ...props,
+  children: [/*#__PURE__*/_jsx(PureLine, {
+    x1: 6,
+    y1: 3,
+    x2: 6,
+    y2: 15,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 6,
+    y1: 9,
+    x2: 18,
+    y2: 9,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 18,
+    y1: 9,
+    x2: 18,
+    y2: 6,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureCircle, {
+    cx: 6,
+    cy: 18,
+    r: 3,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureCircle, {
+    cx: 18,
+    cy: 6,
+    r: 3,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureCircle, {
+    cx: 6,
+    cy: 6,
+    r: 3,
+    stroke: color,
+    strokeWidth: strokeWidth
+  })]
+});
+
+// SIMPLIFIED LINK ICON
+export const LinkIcon = ({
+  size = 24,
+  color = "currentColor",
+  strokeWidth = 2,
+  ...props
+}) => /*#__PURE__*/_jsxs(PureSvg, {
+  width: size,
+  height: size,
+  viewBox: "0 0 24 24",
+  ...props,
+  children: [/*#__PURE__*/_jsx(PureRect, {
+    x: 8,
+    y: 10,
+    width: 8,
+    height: 4,
+    rx: 2,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureRect, {
+    x: 4,
+    y: 10,
+    width: 8,
+    height: 4,
+    rx: 2,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureRect, {
+    x: 12,
+    y: 10,
+    width: 8,
+    height: 4,
+    rx: 2,
+    stroke: color,
+    strokeWidth: strokeWidth
+  })]
+});
+export const PauseIcon = ({
+  size = 24,
+  color = "currentColor",
+  strokeWidth = 2,
+  ...props
+}) => /*#__PURE__*/_jsxs(PureSvg, {
+  width: size,
+  height: size,
+  viewBox: "0 0 24 24",
+  ...props,
+  children: [/*#__PURE__*/_jsx(PureRect, {
+    x: 6,
+    y: 4,
+    width: 4,
+    height: 16,
+    rx: 1,
+    fill: color
+  }), /*#__PURE__*/_jsx(PureRect, {
+    x: 14,
+    y: 4,
+    width: 4,
+    height: 16,
+    rx: 1,
+    fill: color
+  })]
+});
+export const PlayIcon = ({
+  size = 24,
+  color = "currentColor",
+  strokeWidth = 2,
+  ...props
+}) => /*#__PURE__*/_jsx(PureSvg, {
+  width: size,
+  height: size,
+  viewBox: "0 0 24 24",
+  ...props,
+  children: /*#__PURE__*/_jsx(View, {
+    style: {
+      position: "absolute",
+      left: 7,
+      top: 4,
+      width: 0,
+      height: 0,
+      borderLeftWidth: 10,
+      borderTopWidth: 8,
+      borderBottomWidth: 8,
+      borderLeftColor: color,
+      borderTopColor: "transparent",
+      borderBottomColor: "transparent"
+    }
+  })
+});
+export const PlusIcon = ({
+  size = 24,
+  color = "currentColor",
+  strokeWidth = 2,
+  ...props
+}) => /*#__PURE__*/_jsxs(PureSvg, {
+  width: size,
+  height: size,
+  viewBox: "0 0 24 24",
+  ...props,
+  children: [/*#__PURE__*/_jsx(PureLine, {
+    x1: 12,
+    y1: 5,
+    x2: 12,
+    y2: 19,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 5,
+    y1: 12,
+    x2: 19,
+    y2: 12,
+    stroke: color,
+    strokeWidth: strokeWidth
+  })]
+});
+export const TrashIcon = Trash2Icon;
+export const UploadIcon = ({
+  size = 24,
+  color = "currentColor",
+  strokeWidth = 2,
+  ...props
+}) => /*#__PURE__*/_jsxs(PureSvg, {
+  width: size,
+  height: size,
+  viewBox: "0 0 24 24",
+  ...props,
+  children: [/*#__PURE__*/_jsx(PureLine, {
+    x1: 12,
+    y1: 15,
+    x2: 12,
+    y2: 3,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 8,
+    y1: 7,
+    x2: 12,
+    y2: 3,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 16,
+    y1: 7,
+    x2: 12,
+    y2: 3,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 4,
+    y1: 17,
+    x2: 20,
+    y2: 17,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 4,
+    y1: 17,
+    x2: 4,
+    y2: 21,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 20,
+    y1: 17,
+    x2: 20,
+    y2: 21,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 4,
+    y1: 21,
+    x2: 20,
+    y2: 21,
+    stroke: color,
+    strokeWidth: strokeWidth
+  })]
+});
+
+// SIMPLIFIED ZAP ICON
+export const ZapIcon = ({
+  size = 24,
+  color = "currentColor",
+  strokeWidth = 2,
+  ...props
+}) => /*#__PURE__*/_jsxs(PureSvg, {
+  width: size,
+  height: size,
+  viewBox: "0 0 24 24",
+  ...props,
+  children: [/*#__PURE__*/_jsx(PureLine, {
+    x1: 13,
+    y1: 2,
+    x2: 5,
+    y2: 14,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 5,
+    y1: 14,
+    x2: 11,
+    y2: 14,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 11,
+    y1: 14,
+    x2: 11,
+    y2: 10,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 11,
+    y1: 10,
+    x2: 19,
+    y2: 10,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 19,
+    y1: 10,
+    x2: 11,
+    y2: 22,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 11,
+    y1: 22,
+    x2: 13,
+    y2: 14,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 13,
+    y1: 14,
+    x2: 13,
+    y2: 2,
+    stroke: color,
+    strokeWidth: strokeWidth
+  })]
+});
+export const UserIcon = ({
+  size = 24,
+  color = "currentColor",
+  strokeWidth = 2,
+  ...props
+}) => /*#__PURE__*/_jsxs(PureSvg, {
+  width: size,
+  height: size,
+  viewBox: "0 0 24 24",
+  ...props,
+  children: [/*#__PURE__*/_jsx(PureCircle, {
+    cx: 12,
+    cy: 7,
+    r: 4,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(View, {
+    style: {
+      position: "absolute",
+      left: 5,
+      top: 14,
+      width: 14,
+      height: 7,
+      borderTopLeftRadius: 7,
+      borderTopRightRadius: 7,
+      borderWidth: strokeWidth,
+      borderColor: color,
+      borderBottomColor: "transparent",
+      backgroundColor: "transparent"
+    }
+  })]
+});
+export const LockIcon = ({
+  size = 24,
+  color = "currentColor",
+  strokeWidth = 2,
+  ...props
+}) => /*#__PURE__*/_jsxs(PureSvg, {
+  width: size,
+  height: size,
+  viewBox: "0 0 24 24",
+  ...props,
+  children: [/*#__PURE__*/_jsx(PureRect, {
+    x: 5,
+    y: 11,
+    width: 14,
+    height: 10,
+    rx: 1,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(View, {
+    style: {
+      position: "absolute",
+      left: 7,
+      top: 4,
+      width: 10,
+      height: 9,
+      borderTopLeftRadius: 5,
+      borderTopRightRadius: 5,
+      borderWidth: strokeWidth,
+      borderColor: color,
+      borderBottomColor: "transparent",
+      backgroundColor: "transparent"
+    }
+  }), /*#__PURE__*/_jsx(View, {
+    style: {
+      position: "absolute",
+      left: 11,
+      top: 15,
+      width: 2,
+      height: 3,
+      backgroundColor: color
+    }
+  })]
+});
+
+// SIMPLIFIED POWER ICON
+export const PowerIcon = ({
+  size = 24,
+  color = "currentColor",
+  strokeWidth = 2,
+  ...props
+}) => /*#__PURE__*/_jsxs(PureSvg, {
+  width: size,
+  height: size,
+  viewBox: "0 0 24 24",
+  ...props,
+  children: [/*#__PURE__*/_jsx(PureCircle, {
+    cx: 12,
+    cy: 12,
+    r: 10,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 12,
+    y1: 2,
+    x2: 12,
+    y2: 12,
+    stroke: color,
+    strokeWidth: strokeWidth
+  })]
+});
+export const SearchIcon = ({
+  size = 24,
+  color = "currentColor",
+  strokeWidth = 2,
+  ...props
+}) => /*#__PURE__*/_jsxs(PureSvg, {
+  width: size,
+  height: size,
+  viewBox: "0 0 24 24",
+  ...props,
+  children: [/*#__PURE__*/_jsx(PureCircle, {
+    cx: 11,
+    cy: 11,
+    r: 8,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 16.5,
+    y1: 16.5,
+    x2: 21,
+    y2: 21,
+    stroke: color,
+    strokeWidth: strokeWidth
+  })]
+});
+export const InfoIcon = ({
+  size = 24,
+  color = "currentColor",
+  strokeWidth = 2,
+  ...props
+}) => /*#__PURE__*/_jsxs(PureSvg, {
+  width: size,
+  height: size,
+  viewBox: "0 0 24 24",
+  ...props,
+  children: [/*#__PURE__*/_jsx(PureCircle, {
+    cx: 12,
+    cy: 12,
+    r: 10,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 12,
+    y1: 11,
+    x2: 12,
+    y2: 16,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(View, {
+    style: {
+      position: "absolute",
+      left: 11,
+      top: 7,
+      width: 2,
+      height: 2,
+      borderRadius: 1,
+      backgroundColor: color
+    }
+  })]
+});
+export const MinusIcon = ({
+  size = 24,
+  color = "currentColor",
+  strokeWidth = 2,
+  ...props
+}) => /*#__PURE__*/_jsx(PureSvg, {
+  width: size,
+  height: size,
+  viewBox: "0 0 24 24",
+  ...props,
+  children: /*#__PURE__*/_jsx(PureLine, {
+    x1: 5,
+    y1: 12,
+    x2: 19,
+    y2: 12,
+    stroke: color,
+    strokeWidth: strokeWidth
+  })
+});
+export const BarChart3Icon = ({
+  size = 24,
+  color = "currentColor",
+  strokeWidth = 2,
+  ...props
+}) => /*#__PURE__*/_jsxs(PureSvg, {
+  width: size,
+  height: size,
+  viewBox: "0 0 24 24",
+  ...props,
+  children: [/*#__PURE__*/_jsx(PureLine, {
+    x1: 3,
+    y1: 3,
+    x2: 3,
+    y2: 21,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 3,
+    y1: 21,
+    x2: 21,
+    y2: 21,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureRect, {
+    x: 7,
+    y: 12,
+    width: 3,
+    height: 9,
+    fill: color
+  }), /*#__PURE__*/_jsx(PureRect, {
+    x: 12,
+    y: 8,
+    width: 3,
+    height: 13,
+    fill: color
+  }), /*#__PURE__*/_jsx(PureRect, {
+    x: 17,
+    y: 15,
+    width: 3,
+    height: 6,
+    fill: color
+  })]
+});
+
+// IMPROVED HARD DRIVE ICON
+export const HardDriveIcon = ({
+  size = 24,
+  color = "currentColor",
+  strokeWidth = 2,
+  ...props
+}) => /*#__PURE__*/_jsxs(PureSvg, {
+  width: size,
+  height: size,
+  viewBox: "0 0 24 24",
+  ...props,
+  children: [/*#__PURE__*/_jsx(PureRect, {
+    x: 3,
+    y: 6,
+    width: 18,
+    height: 12,
+    rx: 2,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 3,
+    y1: 12,
+    x2: 21,
+    y2: 12,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureCircle, {
+    cx: 6,
+    cy: 15,
+    r: 1,
+    fill: color
+  }), /*#__PURE__*/_jsx(PureCircle, {
+    cx: 9,
+    cy: 15,
+    r: 0.5,
+    fill: color
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 18,
+    y1: 9,
+    x2: 21,
+    y2: 9,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 18,
+    y1: 15,
+    x2: 21,
+    y2: 15,
+    stroke: color,
+    strokeWidth: strokeWidth
+  })]
+});
+
+// Export aliases for convenience (without "Icon" suffix)
+export const Activity = ActivityIcon;
+export const AlertCircle = AlertCircleIcon;
+export const AlertTriangle = AlertTriangleIcon;
+export const BarChart3 = BarChart3Icon;
+export const Box = BoxIcon;
+export const Bug = BugIcon;
+export const Check = CheckIcon;
+export const CheckCircle = CheckCircleIcon;
+export const CheckCircle2 = CheckCircle2Icon;
+export const ChevronDown = ChevronDownIcon;
+export const ChevronLeft = ChevronLeftIcon;
+export const ChevronRight = ChevronRightIcon;
+export const ChevronUp = ChevronUpIcon;
+export const Clock = ClockIcon;
+export const Cloud = CloudIcon;
+export const Copy = CopyIcon;
+export const Database = DatabaseIcon;
+export const Download = DownloadIcon;
+export const Eye = EyeIcon;
+export const EyeOff = EyeOffIcon;
+export const FileCode = FileCodeIcon;
+export const FileJson = FileJsonIcon;
+export const FileText = FileTextIcon;
+export const Film = FilmIcon;
+export const Filter = FilterIcon;
+export const FlaskConical = FlaskConicalIcon;
+export const GitBranch = GitBranchIcon;
+export const Globe = GlobeIcon;
+export const Hand = HandIcon;
+export const HardDrive = HardDriveIcon;
+export const Hash = HashIcon;
+export const Image = ImageIcon;
+export const Info = InfoIcon;
+export const Key = KeyIcon;
+export const Layers = LayersIcon;
+export const Link = LinkIcon;
+export const Lock = LockIcon;
+export const Minus = MinusIcon;
+export const Music = MusicIcon;
+export const Navigation = NavigationIcon;
+export const Palette = PaletteIcon;
+export const Pause = PauseIcon;
+export const Phone = PhoneIcon;
+export const Play = PlayIcon;
+export const Plus = PlusIcon;
+export const Power = PowerIcon;
+export const RefreshCw = RefreshCwIcon;
+export const Route = RouteIcon;
+export const Search = SearchIcon;
+export const Server = ServerIcon;
+export const Settings = SettingsIcon;
+export const Shield = ShieldIcon;
+export const Smartphone = SmartphoneIcon;
+export const TestTube2 = TestTube2Icon;
+export const Timer = TimerIcon;
+export const Touchpad = TouchpadIcon;
+export const Trash = TrashIcon;
+export const Trash2 = Trash2Icon;
+export const TriangleAlert = TriangleAlertIcon;
+export const Unlock = UnlockIcon;
+export const Upload = UploadIcon;
+export const User = UserIcon;
+export const Users = UsersIcon;
+export const Volume = VolumeIcon;
+export const Wifi = WifiIcon;
+export const X = XIcon;
+export const XCircle = XCircleIcon;
+export const Zap = ZapIcon;
+
+// Additional aliases for commonly used icons
+export const Edit3 = ({
+  size = 24,
+  color = "currentColor",
+  strokeWidth = 2,
+  ...props
+}) => /*#__PURE__*/_jsxs(PureSvg, {
+  width: size,
+  height: size,
+  viewBox: "0 0 24 24",
+  ...props,
+  children: [/*#__PURE__*/_jsx(PureLine, {
+    x1: 12,
+    y1: 20,
+    x2: 20,
+    y2: 12,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 16,
+    y1: 8,
+    x2: 2,
+    y2: 22,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 17.5,
+    y1: 15,
+    x2: 9,
+    y2: 6.5,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureRect, {
+    x: 20,
+    y: 2,
+    width: 4,
+    height: 4,
+    rx: 1,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(PureLine, {
+    x1: 2,
+    y1: 22,
+    x2: 6,
+    y2: 18,
+    stroke: color,
+    strokeWidth: strokeWidth
+  })]
+});
+
+// Type export for icon component props