@gearbox-protocol/permissionless-ui 1.2.33 → 1.4.0

package/dist/cjs/components/table/table-loader.js

@@ -0,0 +1,46 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var table_loader_exports = {};
+__export(table_loader_exports, {
+  TableLoader: () => TableLoader
+});
+module.exports = __toCommonJS(table_loader_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_grid_loading_line = require('./grid-loading-line.js');
+var import_grid_table = require('./grid-table.js');
+function TableLoader({
+  height = "70px",
+  columns = 6,
+  rows = 5,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_grid_table.GridTableBody, { className, ...props, children: Array.from({ length: rows }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_grid_loading_line.GridLoadingLine,
+    {
+      height,
+      columns
+    },
+    `${index}-${rows}`
+  )) });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  TableLoader
+});

package/dist/cjs/components/table/table-sm.js

@@ -0,0 +1,93 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var table_sm_exports = {};
+__export(table_sm_exports, {
+  TableCellSm: () => TableCellSm,
+  TableLineSm: () => TableLineSm
+});
+module.exports = __toCommonJS(table_sm_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_utils = __toESM(require('../../utils/index.js'));
+function TableCellSm({
+  title,
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: (0, import_utils.default)("flex flex-col gap-1", className), ...props, children: [
+    title && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-xs text-muted-foreground font-medium", children: title }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-sm", children })
+  ] });
+}
+function TableLineSm({
+  title,
+  columnsXs = 1,
+  columnsSm,
+  columnsMd,
+  columns,
+  className,
+  children,
+  ...props
+}) {
+  const colsXs = columnsXs;
+  const colsSm = columnsSm ?? colsXs;
+  const colsMd = columnsMd ?? colsSm;
+  const colsLg = columns ?? colsMd;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      className: (0, import_utils.default)(
+        "flex flex-col gap-3 p-4 border-b border-border",
+        className
+      ),
+      ...props,
+      children: [
+        title && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "font-medium mb-2", children: title }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
+          {
+            className: "grid gap-4 table-sm-grid",
+            style: {
+              "--grid-cols-xs": colsXs,
+              "--grid-cols-sm": colsSm,
+              "--grid-cols-md": colsMd,
+              "--grid-cols-lg": colsLg
+            },
+            children
+          }
+        )
+      ]
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  TableCellSm,
+  TableLineSm
+});

package/dist/cjs/components/{table.js → table/table.js}

@@ -36,23 +36,41 @@ __export(table_exports, {
   TableFooter: () => TableFooter,
   TableHead: () => TableHead,
   TableHeader: () => TableHeader,
-  TableRow: () => TableRow
+  TableRow: () => TableRow,
+  tableCellVariants: () => tableCellVariants,
+  tableHeadVariants: () => tableHeadVariants,
+  tableVariants: () => tableVariants
 });
 module.exports = __toCommonJS(table_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
+var import_class_variance_authority = require("class-variance-authority");
 var import_lucide_react = require("lucide-react");
 var React = __toESM(require("react"));
-var import_utils = __toESM(require('../utils/index.js'));
-var import_button = require('./buttons/button.js');
-var import_tooltip = require('./tooltip.js');
-const Table = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "rounded-xl border relative w-full overflow-auto", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-  "table",
-  {
-    ref,
-    className: (0, import_utils.default)("w-full caption-bottom text-sm", className),
-    ...props
+var import_utils = __toESM(require('../../utils/index.js'));
+var import_button = require('../buttons/button.js');
+var import_tooltip = require('../tooltip.js');
+const tableVariants = (0, import_class_variance_authority.cva)("w-full caption-bottom", {
+  variants: {
+    size: {
+      sm: "text-xs",
+      default: "text-sm",
+      lg: "text-base"
+    }
+  },
+  defaultVariants: {
+    size: "default"
   }
-) }));
+});
+const Table = React.forwardRef(
+  ({ className, size, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "relative w-full overflow-auto", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "table",
+    {
+      ref,
+      className: (0, import_utils.default)(tableVariants({ size, className })),
+      ...props
+    }
+  ) })
+);
 Table.displayName = "Table";
 const TableHeader = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("thead", { ref, className: (0, import_utils.default)("[&_tr]:border-b ", className), ...props }));
 TableHeader.displayName = "TableHeader";
@@ -89,19 +107,54 @@ const TableRow = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__
   }
 ));
 TableRow.displayName = "TableRow";
-const TableHead = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-  "th",
+const tableHeadVariants = (0, import_class_variance_authority.cva)(
+  "border-b bg-muted/50 text-left align-middle font-medium text-muted-foreground",
   {
-    ref,
-    className: (0, import_utils.default)(
-      "h-10 px-2  border-b bg-muted/50 text-left align-middle font-medium text-muted-foreground",
-      className
-    ),
-    ...props
+    variants: {
+      size: {
+        sm: "h-8 px-1 text-xs",
+        default: "h-10 px-2",
+        lg: "h-12 px-4"
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
   }
-));
+);
+const TableHead = React.forwardRef(
+  ({ className, size, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "th",
+    {
+      ref,
+      className: (0, import_utils.default)(tableHeadVariants({ size, className })),
+      ...props
+    }
+  )
+);
 TableHead.displayName = "TableHead";
-const TableCell = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { ref, className: (0, import_utils.default)("p-2 align-middle", className), ...props }));
+const tableCellVariants = (0, import_class_variance_authority.cva)("align-middle", {
+  variants: {
+    size: {
+      sm: "p-1",
+      default: "p-2",
+      lg: "p-4"
+    }
+  },
+  defaultVariants: {
+    size: "default"
+  }
+});
+const TableCell = React.forwardRef(
+  ({ className, size, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "td",
+    {
+      ref,
+      className: (0, import_utils.default)(tableCellVariants({ size, className })),
+      ...props
+    }
+  )
+);
 TableCell.displayName = "TableCell";
 const TableCaption = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
   "caption",
@@ -171,5 +224,8 @@ SortingTableHead.displayName = "SortingTableHead";
   TableFooter,
   TableHead,
   TableHeader,
-  TableRow
+  TableRow,
+  tableCellVariants,
+  tableHeadVariants,
+  tableVariants
 });

package/dist/cjs/components/textarea.js

@@ -28,21 +28,40 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var textarea_exports = {};
 __export(textarea_exports, {
-  Textarea: () => Textarea
+  Textarea: () => Textarea,
+  textareaVariants: () => textareaVariants
 });
 module.exports = __toCommonJS(textarea_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
+var import_class_variance_authority = require("class-variance-authority");
 var React = __toESM(require("react"));
 var import_utils = __toESM(require('../utils/index.js'));
+const textareaVariants = (0, import_class_variance_authority.cva)(
+  "flex w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+  {
+    variants: {
+      size: {
+        sm: "min-h-[60px] text-xs px-2 py-1.5",
+        default: "min-h-[80px]",
+        lg: "min-h-[120px] text-base px-4 py-3"
+      },
+      variant: {
+        default: "",
+        error: "border-red-500 focus-visible:ring-red-500"
+      }
+    },
+    defaultVariants: {
+      size: "default",
+      variant: "default"
+    }
+  }
+);
 const Textarea = React.forwardRef(
-  ({ className, ...props }, ref) => {
+  ({ className, size, variant, ...props }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "textarea",
       {
-        className: (0, import_utils.default)(
-          "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-          className
-        ),
+        className: (0, import_utils.default)(textareaVariants({ size, variant, className })),
         ref,
         ...props
       }
@@ -52,5 +71,6 @@ const Textarea = React.forwardRef(
 Textarea.displayName = "Textarea";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  Textarea
+  Textarea,
+  textareaVariants
 });

package/dist/cjs/components/theme-provider.js

@@ -0,0 +1,127 @@
+"use strict";
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var theme_provider_exports = {};
+__export(theme_provider_exports, {
+  ThemeProvider: () => ThemeProvider,
+  useTheme: () => useTheme
+});
+module.exports = __toCommonJS(theme_provider_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+const ThemeContext = (0, import_react.createContext)(void 0);
+function useTheme() {
+  const context = (0, import_react.useContext)(ThemeContext);
+  if (!context) {
+    throw new Error("useTheme must be used within ThemeProvider");
+  }
+  return context;
+}
+function ThemeProvider({
+  children,
+  defaultTheme = "system",
+  storageKey = "ui-theme",
+  attribute = "class",
+  enableColorScheme = true
+}) {
+  const [theme, setThemeState] = (0, import_react.useState)(() => {
+    if (typeof window !== "undefined") {
+      const saved = localStorage.getItem(storageKey);
+      const initialTheme = saved || defaultTheme;
+      const resolved = initialTheme === "system" ? window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light" : initialTheme;
+      const root = document.documentElement;
+      root.classList.remove("light", "dark");
+      root.removeAttribute("data-theme");
+      if (attribute === "class") {
+        root.classList.add(resolved);
+      } else {
+        root.setAttribute("data-theme", resolved);
+      }
+      if (enableColorScheme) {
+        root.style.colorScheme = resolved;
+      }
+      return initialTheme;
+    }
+    return defaultTheme;
+  });
+  const [actualTheme, setActualTheme] = (0, import_react.useState)(() => {
+    if (typeof window !== "undefined") {
+      const saved = localStorage.getItem(storageKey);
+      const themeToResolve = saved || defaultTheme;
+      if (themeToResolve === "system") {
+        return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+      }
+      return themeToResolve;
+    }
+    return "light";
+  });
+  const getSystemTheme = (0, import_react.useCallback)(() => {
+    if (typeof window !== "undefined") {
+      return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+    }
+    return "light";
+  }, []);
+  const resolveTheme = (0, import_react.useCallback)(
+    (theme2) => {
+      return theme2 === "system" ? getSystemTheme() : theme2;
+    },
+    [getSystemTheme]
+  );
+  (0, import_react.useEffect)(() => {
+    if (typeof window === "undefined") return;
+    const savedTheme = localStorage.getItem(storageKey);
+    if (savedTheme) {
+      setThemeState(savedTheme);
+    }
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    const handleChange = () => {
+      if (theme === "system") {
+        setActualTheme(getSystemTheme());
+      }
+    };
+    mediaQuery.addEventListener("change", handleChange);
+    return () => mediaQuery.removeEventListener("change", handleChange);
+  }, [storageKey, theme, getSystemTheme]);
+  (0, import_react.useEffect)(() => {
+    if (typeof window === "undefined") return;
+    const root = document.documentElement;
+    const resolved = resolveTheme(theme);
+    setActualTheme(resolved);
+    root.classList.remove("light", "dark");
+    root.removeAttribute("data-theme");
+    if (attribute === "class") {
+      root.classList.add(resolved);
+    } else {
+      root.setAttribute("data-theme", resolved);
+    }
+    if (enableColorScheme) {
+      root.style.colorScheme = resolved;
+    }
+    localStorage.setItem(storageKey, theme);
+  }, [theme, attribute, enableColorScheme, storageKey, resolveTheme]);
+  const setTheme = (newTheme) => {
+    setThemeState(newTheme);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ThemeContext.Provider, { value: { theme, setTheme, actualTheme }, children });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ThemeProvider,
+  useTheme
+});

package/dist/cjs/components/theme-toggle.js

@@ -0,0 +1,85 @@
+"use strict";
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var theme_toggle_exports = {};
+__export(theme_toggle_exports, {
+  ThemeToggle: () => ThemeToggle
+});
+module.exports = __toCommonJS(theme_toggle_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_theme_provider = require('./theme-provider.js');
+function ThemeToggle() {
+  const { setTheme, actualTheme } = (0, import_theme_provider.useTheme)();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "button",
+    {
+      type: "button",
+      onClick: () => setTheme(actualTheme === "dark" ? "light" : "dark"),
+      className: "rounded-md p-2 hover:bg-accent",
+      "aria-label": "Toggle theme",
+      children: actualTheme === "dark" ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        "svg",
+        {
+          xmlns: "http://www.w3.org/2000/svg",
+          width: "20",
+          height: "20",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("title", { children: "Light theme" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "12", r: "4" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 2v2" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 20v2" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m4.93 4.93 1.41 1.41" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m17.66 17.66 1.41 1.41" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M2 12h2" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M20 12h2" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m6.34 17.66-1.41 1.41" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m19.07 4.93-1.41 1.41" })
+          ]
+        }
+      ) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        "svg",
+        {
+          xmlns: "http://www.w3.org/2000/svg",
+          width: "20",
+          height: "20",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("title", { children: "Dark theme" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" })
+          ]
+        }
+      )
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ThemeToggle
+});

package/dist/cjs/components/token-icon.js

@@ -1,9 +1,8 @@
 "use strict";
-var __create = Object.create;
+"use client";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -17,14 +16,6 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var token_icon_exports = {};
 __export(token_icon_exports, {
@@ -32,23 +23,81 @@ __export(token_icon_exports, {
 });
 module.exports = __toCommonJS(token_icon_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_image = __toESM(require("next/image"));
 var import_react = require("react");
-function TokenIcon({ symbol, size = 48 }) {
+var import_image = require('./image.js');
+function TokenIcon({
+  symbol,
+  size = 48,
+  className,
+  ImageComponent = import_image.Image
+}) {
   const name = symbol.replace("/", "").replace(" ", "").replace("-f", "").replace("-", "_").toLowerCase();
   const defaultSrc = "https://static.gearbox.fi/tokens/default.svg";
   const [src, setSrc] = (0, import_react.useState)(
     `https://static.gearbox.fi/tokens/${name}.svg`
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_image.default,
+  const [isLoading, setIsLoading] = (0, import_react.useState)(true);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
     {
-      src,
-      alt: `${symbol} icon`,
-      width: size,
-      height: size,
-      className: "rounded-full",
-      onError: () => setSrc(defaultSrc)
+      style: {
+        width: size,
+        height: size,
+        position: "relative",
+        display: "inline-block",
+        border: "none"
+      },
+      children: [
+        isLoading && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
+          {
+            style: {
+              width: size,
+              height: size,
+              borderRadius: "50%",
+              backgroundColor: "#9ca3af",
+              position: "absolute",
+              top: 0,
+              left: 0,
+              animation: "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite"
+            }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
+          {
+            style: {
+              width: size,
+              height: size,
+              position: "relative",
+              opacity: isLoading ? 0 : 1,
+              transition: "opacity 0.3s ease-in-out"
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              ImageComponent,
+              {
+                src,
+                alt: "",
+                width: size,
+                height: size,
+                className,
+                onError: () => setSrc(defaultSrc),
+                onLoad: () => setIsLoading(false)
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { children: `
+          @keyframes pulse {
+            0%, 100% {
+              opacity: 1;
+            }
+            50% {
+              opacity: 0.5;
+            }
+          }
+        ` })
+      ]
     }
   );
 }