@gearbox-protocol/permissionless-ui 1.7.3 → 1.7.5

package/dist/cjs/components/search-bar/search-bar.cjs

@@ -0,0 +1,103 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const classVarianceAuthority = require('class-variance-authority');
+const lucideReact = require('lucide-react');
+const React = require('react');
+const components_input_input = require('../input/input.cjs');
+const utils_cn = require('../../utils/cn.cjs');
+require('sonner');
+require('@gearbox-protocol/sdk');
+
+const searchBarVariants = classVarianceAuthority.cva("relative w-full transition-all duration-200", {
+  variants: {
+    size: {
+      sm: "max-w-xs",
+      default: "max-w-96",
+      lg: "max-w-lg",
+      full: "max-w-full"
+    }
+  },
+  defaultVariants: {
+    size: "default"
+  }
+});
+const searchBarInputVariants = classVarianceAuthority.cva("transition-all duration-200 pl-10", {
+  variants: {
+    active: {
+      true: "",
+      false: "bg-transparent border-input"
+    },
+    theme: {
+      light: "",
+      dark: ""
+    }
+  },
+  compoundVariants: [
+    {
+      active: true,
+      theme: "light",
+      className: "bg-card text-foreground"
+    },
+    {
+      active: true,
+      theme: "dark",
+      className: "bg-[rgb(40,40,40)] text-foreground"
+    },
+    {
+      active: false,
+      theme: "light",
+      className: "text-foreground placeholder:text-foreground"
+    },
+    {
+      active: false,
+      theme: "dark",
+      className: "text-foreground placeholder:text-foreground"
+    }
+  ],
+  defaultVariants: {
+    active: false,
+    theme: "light"
+  }
+});
+function SearchBar({
+  onChange,
+  placeholder = "Search...",
+  className,
+  size,
+  theme = "light"
+}) {
+  const [searchQuery, setSearchQuery] = React.useState("");
+  const [focused, setFocused] = React.useState(false);
+  const active = searchQuery !== "" || focused;
+  const handleSearch = (e) => {
+    const query = e.target.value;
+    setSearchQuery(query);
+    onChange(query);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils_cn.cn(searchBarVariants({ size }), className), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      lucideReact.Search,
+      {
+        className: "absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground pointer-events-none",
+        size: 18
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      components_input_input.Input,
+      {
+        type: "search",
+        placeholder,
+        value: searchQuery,
+        onChange: handleSearch,
+        onFocus: () => setFocused(true),
+        onBlur: () => setFocused(false),
+        className: utils_cn.cn(searchBarInputVariants({ active, theme }))
+      }
+    )
+  ] }) });
+}
+
+exports.SearchBar = SearchBar;

package/dist/cjs/components/search-line/index.cjs

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const components_searchLine_searchLine = require('./search-line.cjs');
+
+
+
+exports.SearchLine = components_searchLine_searchLine.SearchLine;
+exports.WithSearchLine = components_searchLine_searchLine.WithSearchLine;
+exports.searchLineInputVariants = components_searchLine_searchLine.searchLineInputVariants;
+exports.searchLineVariants = components_searchLine_searchLine.searchLineVariants;

package/dist/cjs/components/search-line/search-line.cjs

@@ -0,0 +1,213 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const classVarianceAuthority = require('class-variance-authority');
+const lucideReact = require('lucide-react');
+const React = require('react');
+const components_input_input = require('../input/input.cjs');
+const utils_cn = require('../../utils/cn.cjs');
+require('sonner');
+require('@gearbox-protocol/sdk');
+
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
+  if (e) {
+    for (const k in e) {
+      if (k !== 'default') {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+const React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+const searchLineVariants = classVarianceAuthority.cva("relative w-full transition-all duration-200", {
+  variants: {
+    size: {
+      sm: "max-w-xs",
+      default: "max-w-md",
+      lg: "max-w-lg",
+      full: "max-w-full"
+    }
+  },
+  defaultVariants: {
+    size: "default"
+  }
+});
+const searchLineInputVariants = classVarianceAuthority.cva("transition-all duration-200 pr-10", {
+  variants: {
+    active: {
+      true: "",
+      false: "bg-transparent border-input"
+    },
+    theme: {
+      light: "",
+      dark: ""
+    }
+  },
+  compoundVariants: [
+    {
+      active: true,
+      theme: "light",
+      className: "bg-card text-foreground"
+    },
+    {
+      active: true,
+      theme: "dark",
+      className: "bg-[rgb(40,40,40)] text-foreground"
+    },
+    {
+      active: false,
+      theme: "light",
+      className: "text-foreground placeholder:text-foreground"
+    },
+    {
+      active: false,
+      theme: "dark",
+      className: "text-foreground placeholder:text-foreground"
+    }
+  ],
+  defaultVariants: {
+    active: false,
+    theme: "light"
+  }
+});
+const SearchLine = React__namespace.forwardRef(
+  ({
+    className,
+    size,
+    searchState,
+    placeholder = "Search...",
+    theme = "light",
+    showSearchIcon = false,
+    customIcon,
+    onSubmit,
+    ...props
+  }, ref) => {
+    const { value, handleSubmit, handleInput, loading } = searchState;
+    const [focused, setFocused] = React__namespace.useState(false);
+    const active = value !== "" || focused;
+    const handleFormSubmit = React__namespace.useCallback(
+      (e) => {
+        e.preventDefault();
+        handleSubmit({ preventDefault: () => {
+        } });
+        if (onSubmit) {
+          onSubmit(value);
+        }
+      },
+      [handleSubmit, onSubmit, value]
+    );
+    const handleIconClick = React__namespace.useCallback(() => {
+      handleSubmit({ preventDefault: () => {
+      } });
+      if (onSubmit) {
+        onSubmit(value);
+      }
+    }, [handleSubmit, onSubmit, value]);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        className: utils_cn.cn(searchLineVariants({ size }), className),
+        ...props,
+        children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "form",
+          {
+            onSubmit: handleFormSubmit,
+            onFocus: () => setFocused(true),
+            onBlur: () => setFocused(false),
+            className: "relative",
+            children: [
+              showSearchIcon && /* @__PURE__ */ jsxRuntime.jsx(
+                lucideReact.Search,
+                {
+                  className: "absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground pointer-events-none",
+                  size: 18
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                components_input_input.Input,
+                {
+                  type: "search",
+                  placeholder,
+                  value,
+                  onChange: handleInput,
+                  className: utils_cn.cn(
+                    searchLineInputVariants({ active, theme }),
+                    showSearchIcon && "pl-10"
+                  )
+                }
+              ),
+              active && !loading && /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: handleIconClick,
+                  className: "absolute right-2 top-1/2 transform -translate-y-1/2 w-9 h-9 flex items-center justify-center rounded-full transition-colors cursor-pointer",
+                  "aria-label": "Submit search",
+                  children: customIcon || /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowRight, { className: "text-primary", size: 18 })
+                }
+              ),
+              loading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute right-2 top-1/2 transform -translate-y-1/2 w-9 h-9 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
+                lucideReact.Loader2,
+                {
+                  className: "text-muted-foreground animate-spin",
+                  size: 18
+                }
+              ) })
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+SearchLine.displayName = "SearchLine";
+const WithSearchLine = React__namespace.forwardRef(
+  ({
+    searchState,
+    children,
+    placeholder = "Search...",
+    theme = "light",
+    className
+  }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        className: utils_cn.cn(
+          "w-full flex gap-4 flex-col sm:flex-row sm:items-center md:justify-between",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sm:flex-shrink-0 sm:flex-grow-1", children }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full sm:flex-1 md:flex-initial md:max-w-md", children: /* @__PURE__ */ jsxRuntime.jsx(
+            SearchLine,
+            {
+              searchState,
+              placeholder,
+              theme,
+              size: "full"
+            }
+          ) })
+        ]
+      }
+    );
+  }
+);
+WithSearchLine.displayName = "WithSearchLine";
+
+exports.SearchLine = SearchLine;
+exports.WithSearchLine = WithSearchLine;
+exports.searchLineInputVariants = searchLineInputVariants;
+exports.searchLineVariants = searchLineVariants;

package/dist/cjs/components/select/index.cjs

@@ -0,0 +1,19 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const components_select_select = require('./select.cjs');
+
+
+
+exports.Select = components_select_select.Select;
+exports.SelectContent = components_select_select.SelectContent;
+exports.SelectGroup = components_select_select.SelectGroup;
+exports.SelectItem = components_select_select.SelectItem;
+exports.SelectLabel = components_select_select.SelectLabel;
+exports.SelectScrollDownButton = components_select_select.SelectScrollDownButton;
+exports.SelectScrollUpButton = components_select_select.SelectScrollUpButton;
+exports.SelectSeparator = components_select_select.SelectSeparator;
+exports.SelectTrigger = components_select_select.SelectTrigger;
+exports.SelectValue = components_select_select.SelectValue;
+exports.selectTriggerVariants = components_select_select.selectTriggerVariants;

package/dist/cjs/components/select/select.cjs

@@ -0,0 +1,170 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const SelectPrimitive = require('@radix-ui/react-select');
+const classVarianceAuthority = require('class-variance-authority');
+const lucideReact = require('lucide-react');
+const React = require('react');
+const utils_cn = require('../../utils/cn.cjs');
+require('sonner');
+require('@gearbox-protocol/sdk');
+
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
+  if (e) {
+    for (const k in e) {
+      if (k !== 'default') {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+const SelectPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(SelectPrimitive);
+const React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+const Select = SelectPrimitive__namespace.Root;
+const SelectGroup = SelectPrimitive__namespace.Group;
+const SelectValue = SelectPrimitive__namespace.Value;
+const selectTriggerVariants = classVarianceAuthority.cva(
+  "flex w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 bg-[rgb(40,40,40)] text-foreground cursor-pointer",
+  {
+    variants: {
+      size: {
+        sm: "h-8 text-xs px-2",
+        default: "h-9",
+        lg: "h-11 text-base px-4"
+      },
+      variant: {
+        default: "",
+        error: "border-red-500",
+        success: "border-green-500"
+      }
+    },
+    defaultVariants: {
+      size: "default",
+      variant: "default"
+    }
+  }
+);
+const SelectTrigger = React__namespace.forwardRef(({ className, children, size, variant, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+  SelectPrimitive__namespace.Trigger,
+  {
+    ref,
+    className: utils_cn.cn(selectTriggerVariants({ size, variant, className })),
+    ...props,
+    children: [
+      children,
+      /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Icon, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "h-4 w-4 opacity-50" }) })
+    ]
+  }
+));
+SelectTrigger.displayName = SelectPrimitive__namespace.Trigger.displayName;
+const SelectScrollUpButton = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  SelectPrimitive__namespace.ScrollUpButton,
+  {
+    ref,
+    className: utils_cn.cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronUp, { className: "h-4 w-4" })
+  }
+));
+SelectScrollUpButton.displayName = SelectPrimitive__namespace.ScrollUpButton.displayName;
+const SelectScrollDownButton = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  SelectPrimitive__namespace.ScrollDownButton,
+  {
+    ref,
+    className: utils_cn.cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "h-4 w-4" })
+  }
+));
+SelectScrollDownButton.displayName = SelectPrimitive__namespace.ScrollDownButton.displayName;
+const SelectContent = React__namespace.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+  SelectPrimitive__namespace.Content,
+  {
+    ref,
+    className: utils_cn.cn(
+      "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+      className
+    ),
+    position,
+    ...props,
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx(SelectScrollUpButton, {}),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        SelectPrimitive__namespace.Viewport,
+        {
+          className: utils_cn.cn(
+            "p-1",
+            position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+          ),
+          children
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(SelectScrollDownButton, {})
+    ]
+  }
+) }));
+SelectContent.displayName = SelectPrimitive__namespace.Content.displayName;
+const SelectLabel = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  SelectPrimitive__namespace.Label,
+  {
+    ref,
+    className: utils_cn.cn("px-2 py-1.5 text-sm font-semibold", className),
+    ...props
+  }
+));
+SelectLabel.displayName = SelectPrimitive__namespace.Label.displayName;
+const SelectItem = React__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+  SelectPrimitive__namespace.Item,
+  {
+    ref,
+    className: utils_cn.cn(
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none hover:bg-secondary focus:bg-secondary data-[disabled]:pointer-events-none data-[disabled]:opacity-50 bg-transparent text-foreground border-[rgb(100,100,100)] cursor-pointer",
+      className
+    ),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.ItemIndicator, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "h-4 w-4" }) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.ItemText, { children })
+    ]
+  }
+));
+SelectItem.displayName = SelectPrimitive__namespace.Item.displayName;
+const SelectSeparator = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  SelectPrimitive__namespace.Separator,
+  {
+    ref,
+    className: utils_cn.cn("-mx-1 my-1 h-px bg-muted", className),
+    ...props
+  }
+));
+SelectSeparator.displayName = SelectPrimitive__namespace.Separator.displayName;
+
+exports.Select = Select;
+exports.SelectContent = SelectContent;
+exports.SelectGroup = SelectGroup;
+exports.SelectItem = SelectItem;
+exports.SelectLabel = SelectLabel;
+exports.SelectScrollDownButton = SelectScrollDownButton;
+exports.SelectScrollUpButton = SelectScrollUpButton;
+exports.SelectSeparator = SelectSeparator;
+exports.SelectTrigger = SelectTrigger;
+exports.SelectValue = SelectValue;
+exports.selectTriggerVariants = selectTriggerVariants;

package/dist/cjs/components/short-string/index.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const components_shortString_shortString = require('./short-string.cjs');
+
+
+
+exports.ShortString = components_shortString_shortString.ShortString;

package/dist/cjs/components/short-string/short-string.cjs

@@ -0,0 +1,38 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const components_tooltip_tooltip = require('../tooltip/tooltip.cjs');
+const utils_cn = require('../../utils/cn.cjs');
+
+function ShortString({
+  children,
+  maxLength,
+  className,
+  showTooltip = true
+}) {
+  if (maxLength === void 0) {
+    const content = /* @__PURE__ */ jsxRuntime.jsx("span", { className: utils_cn.cn("inline-block max-w-full truncate", className), children });
+    if (!showTooltip) {
+      return content;
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(components_tooltip_tooltip.TooltipProvider, { delayDuration: 200, children: /* @__PURE__ */ jsxRuntime.jsxs(components_tooltip_tooltip.Tooltip, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(components_tooltip_tooltip.TooltipTrigger, { asChild: true, children: content }),
+      /* @__PURE__ */ jsxRuntime.jsx(components_tooltip_tooltip.TooltipContent, { children: /* @__PURE__ */ jsxRuntime.jsx("p", { children }) })
+    ] }) });
+  }
+  if (!children || children.length <= maxLength) {
+    return /* @__PURE__ */ jsxRuntime.jsx("span", { className, children });
+  }
+  const truncated = `${children.slice(0, maxLength)}...`;
+  if (!showTooltip) {
+    return /* @__PURE__ */ jsxRuntime.jsx("span", { className, children: truncated });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(components_tooltip_tooltip.TooltipProvider, { delayDuration: 200, children: /* @__PURE__ */ jsxRuntime.jsxs(components_tooltip_tooltip.Tooltip, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(components_tooltip_tooltip.TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className, children: truncated }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(components_tooltip_tooltip.TooltipContent, { children: /* @__PURE__ */ jsxRuntime.jsx("p", { children }) })
+  ] }) });
+}
+
+exports.ShortString = ShortString;

package/dist/cjs/components/signatures/confirmation-item.cjs

@@ -0,0 +1,40 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+require('../buttons/back-button/back-button.cjs');
+require('../buttons/button/button.cjs');
+const components_buttons_copyButton_copyButton = require('../buttons/copy-button/copy-button.cjs');
+const components_buttons_externalButton_externalButton = require('../buttons/external-button/external-button.cjs');
+require('../buttons/filter-button/filter-button.cjs');
+require('../buttons/navigation-button/navigation-button.cjs');
+require('react');
+require('clsx');
+require('tailwind-merge');
+require('sonner');
+const utils_format = require('../../utils/format.cjs');
+require('@gearbox-protocol/sdk');
+require('../buttons/tab-button/tab-button.cjs');
+const components_signatures_identicon = require('./identicon.cjs');
+
+function ConfirmationItem({
+  confirmation,
+  note,
+  explorerUrl
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "group relative flex items-center", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-[8px] h-2 w-2 rounded-full bg-green-500" }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ml-10 flex items-center gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(components_signatures_identicon.Identicon, { address: confirmation, size: 32 }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-foreground whitespace-nowrap", children: utils_format.shortenHash(confirmation) }),
+      note && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-500 text-xs whitespace-nowrap", children: note }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2 opacity-0 transition-opacity group-hover:opacity-100", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(components_buttons_copyButton_copyButton.CopyButton, { text: confirmation }),
+        explorerUrl && /* @__PURE__ */ jsxRuntime.jsx(components_buttons_externalButton_externalButton.ExternalButton, { url: explorerUrl })
+      ] })
+    ] })
+  ] });
+}
+
+exports.ConfirmationItem = ConfirmationItem;

package/dist/cjs/components/signatures/identicon.cjs

@@ -0,0 +1,21 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+
+function Identicon({
+  address,
+  size = 32
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: "rounded-full bg-gray-700 flex items-center justify-center text-foreground text-xs",
+      style: { width: size, height: size },
+      children: address.slice(2, 4)
+    }
+  );
+}
+
+exports.Identicon = Identicon;

package/dist/cjs/components/signatures/index.cjs

@@ -0,0 +1,13 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const components_signatures_confirmationItem = require('./confirmation-item.cjs');
+const components_signatures_identicon = require('./identicon.cjs');
+const components_signatures_verticalTimeline = require('./vertical-timeline.cjs');
+
+
+
+exports.ConfirmationItem = components_signatures_confirmationItem.ConfirmationItem;
+exports.Identicon = components_signatures_identicon.Identicon;
+exports.VerticalTimeline = components_signatures_verticalTimeline.VerticalTimeline;