@thenamespace/ens-components 1.5.2 → 2.0.0-alpha.1

package/dist/index.js

@@ -4,7 +4,7 @@ import * as chains$1 from 'viem/chains';
 import { baseSepolia, sepolia, mainnet, optimism, base as base$3, zoraSepolia, zora, celoAlfajores, celo, polygonMumbai, polygon, arbitrumSepolia, arbitrum, optimismSepolia } from 'viem/chains';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
-import React__default, { forwardRef, createElement, useState, useRef, useEffect, useCallback, useLayoutEffect, useMemo, createContext, useContext } from 'react';
+import React__default, { forwardRef, createElement, useState, useRef, useEffect, useMemo, useCallback, useLayoutEffect, createContext, useContext } from 'react';
 import { useAccount, useSwitchChain, useReadContract, usePublicClient, useWalletClient } from 'wagmi';
 import { AvatarSDKError, ErrorCodes, createAvatarClient, HEADER_MAX_SIZE, AVATAR_MAX_SIZE, ALLOWED_FORMATS } from '@thenamespace/avatar';
 import 'crypto';
@@ -1516,6 +1516,97 @@ const ShurikenSpinner = ({
   );
 };
 
+const Tag = ({
+  children,
+  tone = "outline",
+  className = "",
+  dataTestId,
+  ...rest
+}) => {
+  const classes = ["ns-tag", `ns-tag--${tone}`, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx("span", { className: classes, "data-test-id": dataTestId, ...rest, children });
+};
+
+const IDENTICON_LIGHT = "#9CCBE8";
+const IDENTICON_DARK = "#1E7FBF";
+const IDENTICON_GROUND = "#E6F1FA";
+const GRID = 8;
+const HALF = GRID / 2;
+const hashSeed = (seed) => {
+  let hash = 2166136261;
+  for (let i = 0; i < seed.length; i++) {
+    hash ^= seed.charCodeAt(i);
+    hash = Math.imul(hash, 16777619);
+  }
+  return hash >>> 0;
+};
+const makeRandom = (seed) => {
+  let state = seed >>> 0;
+  return () => {
+    state = Math.imul(state, 1664525) + 1013904223 >>> 0;
+    return state / 4294967296;
+  };
+};
+const buildSvg = (seed) => {
+  const random = makeRandom(hashSeed(seed));
+  const cells = [];
+  for (let y = 0; y < GRID; y++) {
+    for (let x = 0; x < HALF; x++) {
+      const filled = random() > 0.45;
+      const fill = random() > 0.5 ? IDENTICON_DARK : IDENTICON_LIGHT;
+      if (!filled) {
+        continue;
+      }
+      cells.push(`<rect x="${x}" y="${y}" width="1" height="1" fill="${fill}"/>`);
+      cells.push(
+        `<rect x="${GRID - 1 - x}" y="${y}" width="1" height="1" fill="${fill}"/>`
+      );
+    }
+  }
+  return [
+    `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${GRID} ${GRID}" shape-rendering="crispEdges">`,
+    `<rect width="${GRID}" height="${GRID}" fill="${IDENTICON_GROUND}"/>`,
+    cells.join(""),
+    "</svg>"
+  ].join("");
+};
+const Identicon = ({
+  seed,
+  size = 34,
+  alt = "",
+  className = "",
+  style,
+  dataTestId,
+  ...rest
+}) => {
+  const src = useMemo(
+    () => `data:image/svg+xml;charset=utf-8,${encodeURIComponent(buildSvg(seed))}`,
+    [seed]
+  );
+  const classes = ["ns-identicon", "identicon", className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx(
+    "img",
+    {
+      className: classes,
+      src,
+      alt,
+      width: size,
+      height: size,
+      "data-test-id": dataTestId,
+      style: {
+        display: "block",
+        flex: "none",
+        width: size,
+        height: size,
+        borderRadius: 0,
+        background: "var(--ns-blue-100)",
+        ...style
+      },
+      ...rest
+    }
+  );
+};
+
 const Dropdown = ({
   trigger,
   children,
@@ -12055,19 +12146,19 @@ const PricingDisplay = ({
         minSeconds: expiryPicker.minSeconds
       }
     ) }),
-    /* @__PURE__ */ jsxs("div", { className: "d-flex justify-content-between align-items-center mb-1", children: [
-      /* @__PURE__ */ jsx(Text, { size: "sm", color: "grey", children: primaryFee.label }),
-      /* @__PURE__ */ jsx(Text, { size: "sm", color: "grey", children: primaryFee.isChecking ? /* @__PURE__ */ jsx(ShurikenSpinner, { size: 14 }) : isSentinel(primaryFee.amount) ? primaryFee.amount : `${primaryFee.amount} ETH` })
+    /* @__PURE__ */ jsxs("div", { className: "d-flex justify-content-between align-items-center mb-1 pricing-row", children: [
+      /* @__PURE__ */ jsx(Text, { size: "sm", color: "grey", className: "pricing-label", children: primaryFee.label }),
+      /* @__PURE__ */ jsx(Text, { size: "sm", color: "grey", className: "pricing-value", children: primaryFee.isChecking ? /* @__PURE__ */ jsx(ShurikenSpinner, { size: 14 }) : isSentinel(primaryFee.amount) ? primaryFee.amount : `${primaryFee.amount} ETH` })
     ] }),
-    networkFees && /* @__PURE__ */ jsxs("div", { className: "d-flex justify-content-between align-items-center mb-1", children: [
-      /* @__PURE__ */ jsx(Text, { size: "sm", color: "grey", children: "Est. network fees" }),
-      /* @__PURE__ */ jsx(Text, { size: "sm", color: "grey", children: networkFees.isChecking ? /* @__PURE__ */ jsx(ShurikenSpinner, { size: 14 }) : networkFees.amount === "N/A" ? "N/A" : `${networkFees.amount} ETH` })
+    networkFees && /* @__PURE__ */ jsxs("div", { className: "d-flex justify-content-between align-items-center mb-1 pricing-row", children: [
+      /* @__PURE__ */ jsx(Text, { size: "sm", color: "grey", className: "pricing-label", children: "Est. network fees" }),
+      /* @__PURE__ */ jsx(Text, { size: "sm", color: "grey", className: "pricing-value", children: networkFees.isChecking ? /* @__PURE__ */ jsx(ShurikenSpinner, { size: 14 }) : networkFees.amount === "N/A" ? "N/A" : `${networkFees.amount} ETH` })
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "d-flex justify-content-between align-items-center mt-2 total-fee", children: [
-      /* @__PURE__ */ jsx(Text, { size: "lg", weight: "bold", children: "Total" }),
-      /* @__PURE__ */ jsxs("div", { style: { textAlign: "right" }, children: [
-        /* @__PURE__ */ jsx(Text, { size: "lg", weight: "bold", children: totalLoading ? /* @__PURE__ */ jsx(ShurikenSpinner, { size: 18 }) : isSentinel(total.amount) ? total.amount : `${total.amount} ETH` }),
-        /* @__PURE__ */ jsx(Text, { size: "xs", color: "grey", children: totalUsd ? `\u2248 $${totalUsd}` : NBSP })
+      /* @__PURE__ */ jsx(Text, { size: "lg", weight: "bold", className: "pricing-total-label", children: "Total" }),
+      /* @__PURE__ */ jsxs("div", { className: "pricing-total-values", style: { textAlign: "right" }, children: [
+        /* @__PURE__ */ jsx(Text, { size: "lg", weight: "bold", className: "pricing-total-value", children: totalLoading ? /* @__PURE__ */ jsx(ShurikenSpinner, { size: 18 }) : isSentinel(total.amount) ? total.amount : `${total.amount} ETH` }),
+        /* @__PURE__ */ jsx(Text, { size: "xs", color: "grey", className: "pricing-total-usd", children: totalUsd ? `\u2248 $${totalUsd}` : NBSP })
       ] })
     ] })
   ] });
@@ -12082,7 +12173,8 @@ const TextRecords = ({
   initialTexts,
   searchFilter,
   focusRecordKey,
-  focusTrigger
+  focusTrigger,
+  onVisibilityChange
 }) => {
   const existingTextsMap = useMemo(() => {
     const map = {};
@@ -12229,7 +12321,11 @@ const TextRecords = ({
   }, [searchFilter]);
   const isGeneralCategory = category === TextRecordCategory.General;
   const hasCustomContent = isGeneralCategory && (committedCustomTexts.length > 0 || customDrafts.length > 0);
-  if (filteredItems.length === 0 && !hasCustomContent) {
+  const isVisible = filteredItems.length > 0 || hasCustomContent;
+  useEffect(() => {
+    onVisibilityChange?.(isVisible);
+  }, [isVisible]);
+  if (!isVisible) {
     return /* @__PURE__ */ jsx(Fragment, {});
   }
   return /* @__PURE__ */ jsxs("div", { className: "ns-text-records", children: [
@@ -12374,13 +12470,13 @@ const TextRecords = ({
           className: "ns-text-suggestion",
           onClick: () => handleTextAdded(record.key),
           children: [
-            /* @__PURE__ */ jsx(Icon, { size: 18, color: "grey", name: record.icon }),
+            /* @__PURE__ */ jsx(Icon, { size: 16, color: "grey", name: record.icon }),
             /* @__PURE__ */ jsx(Text, { className: "ns-mt-1", size: "xs", weight: "medium", children: record.label })
           ]
         }
       ) }, record.key)),
       isGeneralCategory && /* @__PURE__ */ jsx("div", { className: "col col-lg-3 col-sm-6 col-6", children: /* @__PURE__ */ jsxs("div", { className: "ns-text-suggestion", onClick: handleAddCustomDraft, children: [
-        /* @__PURE__ */ jsx(Icon, { size: 18, color: "grey", name: "circle-help" }),
+        /* @__PURE__ */ jsx(Icon, { size: 16, color: "grey", name: "circle-help" }),
         /* @__PURE__ */ jsx(Text, { className: "ns-mt-1", size: "xs", weight: "medium", children: "Custom" })
       ] }) })
     ] })
@@ -12391,7 +12487,8 @@ const AddressRecords = ({
   addresses,
   onAddressesChanged,
   initialAddresses,
-  searchFilter
+  searchFilter,
+  onVisibilityChange
 }) => {
   const existingAddressMap = useMemo(() => {
     const map = {};
@@ -12442,7 +12539,11 @@ const AddressRecords = ({
   const filteredAddresses = useMemo(() => {
     return supportedAddresses.filter((record) => filterAddress(record));
   }, [searchFilter]);
-  if (filteredAddresses.length === 0) {
+  const isVisible = filteredAddresses.length > 0;
+  useEffect(() => {
+    onVisibilityChange?.(isVisible);
+  }, [isVisible]);
+  if (!isVisible) {
     return /* @__PURE__ */ jsx(Fragment, {});
   }
   return /* @__PURE__ */ jsxs("div", { className: "ns-text-records", children: [
@@ -12509,7 +12610,7 @@ const AddressRecords = ({
         className: "ns-text-suggestion",
         onClick: () => handleAddressAdded(record.coinType),
         children: [
-          /* @__PURE__ */ jsx(ChainIcon, { size: 20, chain: record.chainName }),
+          /* @__PURE__ */ jsx(ChainIcon, { size: 16, chain: record.chainName }),
           /* @__PURE__ */ jsx(Text, { className: "ns-mt-1", size: "xs", weight: "medium", children: record.label })
         ]
       }
@@ -12522,7 +12623,8 @@ const ContenthashRecord = ({
   onContenthashChanged,
   onContenthashRemoved,
   onContenthashAdded,
-  searchFilter
+  searchFilter,
+  onVisibilityChange
 }) => {
   const inputRef = useRef(null);
   const metadata = useMemo(() => {
@@ -12565,7 +12667,11 @@ const ContenthashRecord = ({
   const filteredSuggestions = useMemo(() => {
     return supportedContenthashRecords.filter((record) => filterChash(record));
   }, [searchFilter]);
-  if (filteredSuggestions.length === 0) {
+  const isVisible = filteredSuggestions.length > 0;
+  useEffect(() => {
+    onVisibilityChange?.(isVisible);
+  }, [isVisible]);
+  if (!isVisible) {
     return /* @__PURE__ */ jsx(Fragment, {});
   }
   return /* @__PURE__ */ jsxs("div", { className: "ns-text-records", children: [
@@ -12576,7 +12682,7 @@ const ContenthashRecord = ({
         className: "ns-text-suggestion",
         onClick: () => onContenthashAdded(record.protocol),
         children: [
-          /* @__PURE__ */ jsx(ContenthashIcon, { size: 20, protocol: record.protocol }),
+          /* @__PURE__ */ jsx(ContenthashIcon, { size: 16, protocol: record.protocol }),
           /* @__PURE__ */ jsx(Text, { className: "ns-mt-1", size: "xs", weight: "medium", children: record.label })
         ]
       }
@@ -48278,6 +48384,12 @@ var RecordsSidebarItem = /* @__PURE__ */ ((RecordsSidebarItem2) => {
   RecordsSidebarItem2["Website"] = "Website";
   return RecordsSidebarItem2;
 })(RecordsSidebarItem || {});
+const navIcons = {
+  ["General" /* General */]: "box",
+  ["Social" /* Social */]: "square-user",
+  ["Addresses" /* Addresses */]: "pin",
+  ["Website" /* Website */]: "globe"
+};
 const IMAGE_RECORD_LABELS = {
   avatar: "Avatar",
   header: "Header"
@@ -48303,6 +48415,15 @@ const SelectRecordsForm = ({
   const addressesCategoryRef = useRef(null);
   const websiteCategoryRef = useRef(null);
   const [searchFilter, setSearchFilter] = useState("");
+  const [sectionVisibility, setSectionVisibility] = useState({});
+  const handleSectionVisibility = useCallback(
+    (section) => (isVisible) => setSectionVisibility(
+      (prev) => prev[section] === isVisible ? prev : { ...prev, [section]: isVisible }
+    ),
+    []
+  );
+  const hasSearchResults = Object.values(sectionVisibility).some(Boolean);
+  const showEmptyState = searchFilter.trim().length > 0 && !hasSearchResults;
   const [currentNav, setCurrentNav] = useState(
     "General" /* General */
   );
@@ -48539,12 +48660,15 @@ const SelectRecordsForm = ({
         }
       ) }),
       /* @__PURE__ */ jsx("div", { className: "col col-sm-3 col-12 ns-records-sidebar", children: Object.keys(RecordsSidebarItem).map((item) => {
-        return /* @__PURE__ */ jsx(
+        return /* @__PURE__ */ jsxs(
           "div",
           {
             onClick: () => handleSidebarChange(item),
             className: `sidebar-item ${item === currentNav ? "active" : ""}`,
-            children: /* @__PURE__ */ jsx(Text, { weight: "medium", size: "sm", children: item })
+            children: [
+              /* @__PURE__ */ jsx(Icon, { size: 16, name: navIcons[item] }),
+              /* @__PURE__ */ jsx(Text, { weight: "medium", size: "sm", children: item })
+            ]
           },
           item
         );
@@ -48563,6 +48687,7 @@ const SelectRecordsForm = ({
                 onTextsChanged: handleTextsUpdated,
                 category: TextRecordCategory.General,
                 searchFilter,
+                onVisibilityChange: handleSectionVisibility("general"),
                 focusRecordKey: imageManualFocus?.record,
                 focusTrigger: imageManualFocus?.trigger
               }
@@ -48574,7 +48699,8 @@ const SelectRecordsForm = ({
                 texts: records.texts,
                 onTextsChanged: handleTextsUpdated,
                 category: TextRecordCategory.Social,
-                searchFilter
+                searchFilter,
+                onVisibilityChange: handleSectionVisibility("social")
               }
             ) }),
             /* @__PURE__ */ jsx("div", { ref: addressesCategoryRef, className: "ns-mb-2", children: /* @__PURE__ */ jsx(
@@ -48583,7 +48709,8 @@ const SelectRecordsForm = ({
                 initialAddresses: initialRecords.addresses,
                 addresses: records.addresses,
                 onAddressesChanged: (e) => handleAddressesUpdated(e),
-                searchFilter
+                searchFilter,
+                onVisibilityChange: handleSectionVisibility("addresses")
               }
             ) }),
             /* @__PURE__ */ jsx("div", { ref: websiteCategoryRef, className: "ns-mb-2", children: /* @__PURE__ */ jsx(
@@ -48593,9 +48720,22 @@ const SelectRecordsForm = ({
                 onContenthashChanged: (e) => handleContenthashUpdated(e),
                 onContenthashRemoved: () => handleContenthashRemoved(),
                 onContenthashAdded: (e) => handleContenthashAdded(e),
-                searchFilter
+                searchFilter,
+                onVisibilityChange: handleSectionVisibility("website")
               }
-            ) })
+            ) }),
+            showEmptyState && /* @__PURE__ */ jsxs("div", { className: "ns-records-empty", children: [
+              /* @__PURE__ */ jsx(Text, { weight: "medium", size: "sm", children: "No records found" }),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: "ns-records-empty__clear",
+                  onClick: () => setSearchFilter(""),
+                  children: "Clear filter"
+                }
+              )
+            ] })
           ]
         }
       )
@@ -48746,21 +48886,28 @@ const RegistrationSummary = ({
         suffix: /* @__PURE__ */ jsx(Text, { weight: "medium", size: "sm", color: "grey", children: ".eth" })
       }
     ),
-    label.length < MIN_ENS_LEN$2 && /* @__PURE__ */ jsx("div", { className: "ns-text-center mt-2", children: /* @__PURE__ */ jsx(Text, { size: "xs", color: "grey", children: "Minimum ENS name length is 3 characters" }) }),
-    label.length >= MIN_ENS_LEN$2 && nameValidation.isChecking && /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: "ns-text-center mt-2 d-flex align-items-center justify-content-center",
-        style: { gap: "8px" },
-        children: [
-          /* @__PURE__ */ jsx(ShurikenSpinner, { size: 18 }),
-          /* @__PURE__ */ jsx(Text, { size: "sm", color: "grey", children: "Checking availability" })
-        ]
-      }
-    ),
-    label.length >= MIN_ENS_LEN$2 && !nameValidation.isChecking && nameValidation.isTaken && /* @__PURE__ */ jsx("div", { className: "ns-text-center mt-2", children: /* @__PURE__ */ jsxs(Text, { size: "xs", color: "grey", children: [
-      label,
-      ".eth is not available"
+    /* @__PURE__ */ jsx("div", { className: "ns-name-status", children: label.length < MIN_ENS_LEN$2 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("span", { className: "ns-dot" }),
+      /* @__PURE__ */ jsxs("span", { className: "ns-name-status__text", children: [
+        "Minimum ENS name length is ",
+        MIN_ENS_LEN$2,
+        " characters"
+      ] })
+    ] }) : nameValidation.isChecking ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(ShurikenSpinner, { size: 14 }),
+      /* @__PURE__ */ jsx("span", { className: "ns-name-status__text", children: "Checking availability" })
+    ] }) : nameValidation.isTaken ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("span", { className: "ns-dot ns-dot--bad" }),
+      /* @__PURE__ */ jsxs("span", { className: "ns-name-status__text", children: [
+        label,
+        ".eth is not available"
+      ] })
+    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("span", { className: "ns-dot ns-dot--ok" }),
+      /* @__PURE__ */ jsxs("span", { className: "ns-name-status__text", children: [
+        label,
+        ".eth is available"
+      ] })
     ] }) }),
     isNameAvailable && /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(
@@ -48800,7 +48947,19 @@ const RegistrationSummary = ({
                 /* @__PURE__ */ jsx(Text, { size: "xs", color: "grey", children: "Make your ENS more discoverable" })
               ] })
             ] }),
-            /* @__PURE__ */ jsx(Button, { style: { width: 40, height: 40 }, children: `>` })
+            /* @__PURE__ */ jsx("span", { className: "profile-cta-arrow", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
+              "svg",
+              {
+                width: "14",
+                height: "14",
+                viewBox: "0 0 16 16",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "1.6",
+                strokeLinecap: "round",
+                children: /* @__PURE__ */ jsx("path", { d: "M6 3.6 10.4 8 6 12.4" })
+              }
+            ) })
           ] })
         }
       )
@@ -49960,8 +50119,6 @@ function extractCanvasProps(props) {
 }
 const ReactConfetti = React__default.forwardRef((props, ref) => jsx(ReactConfettiInternal, { canvasRef: ref, ...props }));
 
-var img = "data:image/png;base64,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";
-
 const SuccessScreen$1 = ({
   ensName,
   durationLabel,
@@ -49998,7 +50155,7 @@ const SuccessScreen$1 = ({
     {
       ref: containerRef,
       className: "ens-registration-success-container",
-      style: { position: "relative", overflow: "hidden", padding: "10px" },
+      style: { position: "relative", overflow: "hidden" },
       children: [
         containerSize.width > 0 && containerSize.height > 0 && /* @__PURE__ */ jsx(
           ReactConfetti,
@@ -50015,71 +50172,73 @@ const SuccessScreen$1 = ({
           }
         ),
         /* @__PURE__ */ jsxs("div", { className: "ens-registration-success-card", style: { position: "relative", zIndex: 1 }, children: [
-          /* @__PURE__ */ jsx("div", { className: "ens-registration-success-illustration", children: /* @__PURE__ */ jsx("img", { src: img, alt: "Success Illustration" }) }),
-          /* @__PURE__ */ jsxs("div", { className: "ens-registration-success-title-section", children: [
-            /* @__PURE__ */ jsx(Text, { size: "sm", color: "grey", className: "mb-2", children: "Hooray! You've registered" }),
-            /* @__PURE__ */ jsxs(Text, { size: "lg", weight: "bold", children: [
-              ensName,
-              ".eth"
-            ] })
-          ] }),
-          /* @__PURE__ */ jsxs("div", { className: "ens-registration-success-summary", children: [
-            /* @__PURE__ */ jsxs("div", { className: "ens-registration-success-summary-row", children: [
-              /* @__PURE__ */ jsxs(Text, { size: "sm", color: "grey", children: [
-                durationLabel,
-                " registration"
-              ] }),
-              /* @__PURE__ */ jsxs(Text, { size: "sm", color: "grey", children: [
-                parseFloat(registrationCost).toFixed(4),
-                " ETH"
+          /* @__PURE__ */ jsx("div", { className: "ens-registration-success-band", children: "REGISTERED" }),
+          /* @__PURE__ */ jsxs("div", { className: "ens-registration-success-body", children: [
+            /* @__PURE__ */ jsxs("div", { className: "ens-registration-success-title-section", children: [
+              /* @__PURE__ */ jsx(Identicon, { seed: `${ensName}.eth`, size: 44 }),
+              /* @__PURE__ */ jsxs("span", { className: "ens-registration-success-name", children: [
+                ensName,
+                ".eth"
               ] })
             ] }),
-            /* @__PURE__ */ jsxs("div", { className: "ens-registration-success-summary-row", children: [
-              /* @__PURE__ */ jsx(Text, { size: "sm", color: "grey", children: "Transaction fees" }),
-              /* @__PURE__ */ jsxs(Text, { size: "sm", color: "grey", children: [
-                parseFloat(transactionFees).toFixed(4),
-                " ETH"
+            /* @__PURE__ */ jsxs("div", { className: "ens-registration-success-summary", children: [
+              /* @__PURE__ */ jsxs("div", { className: "ens-registration-success-summary-row", children: [
+                /* @__PURE__ */ jsxs(Text, { size: "sm", color: "grey", children: [
+                  durationLabel,
+                  " registration"
+                ] }),
+                /* @__PURE__ */ jsxs(Text, { size: "sm", color: "grey", children: [
+                  parseFloat(registrationCost).toFixed(4),
+                  " ETH"
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "ens-registration-success-summary-row", children: [
+                /* @__PURE__ */ jsx(Text, { size: "sm", color: "grey", children: "Transaction fees" }),
+                /* @__PURE__ */ jsxs(Text, { size: "sm", color: "grey", children: [
+                  parseFloat(transactionFees).toFixed(4),
+                  " ETH"
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "ens-registration-success-summary-row ens-registration-success-total", children: [
+                /* @__PURE__ */ jsx(Text, { size: "lg", weight: "bold", children: "Total" }),
+                /* @__PURE__ */ jsx("div", { className: "ens-registration-success-total-amount", children: /* @__PURE__ */ jsxs(Text, { size: "lg", weight: "bold", children: [
+                  parseFloat(total).toFixed(4),
+                  " ETH"
+                ] }) })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "ens-registration-success-summary-row ens-registration-success-expiry", children: [
+                /* @__PURE__ */ jsx(Text, { size: "sm", color: "grey", children: "Name Expires" }),
+                /* @__PURE__ */ jsx(Text, { size: "sm", color: "grey", children: expiryDate })
               ] })
             ] }),
-            /* @__PURE__ */ jsxs("div", { className: "ens-registration-success-summary-row ens-registration-success-total", children: [
-              /* @__PURE__ */ jsx(Text, { size: "lg", weight: "bold", children: "Total" }),
-              /* @__PURE__ */ jsx("div", { className: "ens-registration-success-total-amount", children: /* @__PURE__ */ jsxs(Text, { size: "lg", weight: "bold", children: [
-                parseFloat(total).toFixed(4),
-                " ETH"
-              ] }) })
+            /* @__PURE__ */ jsxs("div", { className: "ens-registration-success-actions", children: [
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "outline",
+                  onClick: onRegisterAnother,
+                  className: "ens-registration-success-register-another-btn",
+                  children: "Register another"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "outline",
+                  onClick: () => {
+                    if (onViewName) {
+                      onViewName();
+                    } else {
+                      window.open(getEnsAppUrl(`${ensName}.eth`, isTestnet), "_blank", "noopener,noreferrer");
+                    }
+                  },
+                  className: "ens-registration-success-view-name-btn",
+                  children: "View Name"
+                }
+              )
             ] }),
-            /* @__PURE__ */ jsxs("div", { className: "ens-registration-success-summary-row ens-registration-success-expiry", children: [
-              /* @__PURE__ */ jsx(Text, { size: "sm", color: "grey", children: "Name Expires" }),
-              /* @__PURE__ */ jsx(Text, { size: "sm", color: "grey", children: expiryDate })
-            ] })
-          ] }),
-          /* @__PURE__ */ jsxs("div", { className: "ens-registration-success-actions", children: [
-            /* @__PURE__ */ jsx(
-              Button,
-              {
-                variant: "outline",
-                onClick: onRegisterAnother,
-                className: "ens-registration-success-register-another-btn",
-                children: "Register another"
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              Button,
-              {
-                variant: "outline",
-                onClick: () => {
-                  if (onViewName) {
-                    onViewName();
-                  } else {
-                    window.open(getEnsAppUrl(`${ensName}.eth`, isTestnet), "_blank", "noopener,noreferrer");
-                  }
-                },
-                className: "ens-registration-success-view-name-btn",
-                children: "View Name"
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsx(Button, { onClick: () => onGreat?.(), size: "lg", className: "ns-wd-100 mt-2", children: "Great!" })
+            /* @__PURE__ */ jsx(Button, { onClick: () => onGreat?.(), size: "lg", className: "ns-wd-100 mt-2", children: "Great!" })
+          ] })
         ] })
       ]
     }
@@ -50974,6 +51133,8 @@ const RecordUpdateSummary = ({
   ] });
 };
 
+var img = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALQAAACBCAYAAABpepAsAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAA+JSURBVHgB7V2/b9xGFv54uSJIc3udO48BFwFcWIcghSvxylRWAqQMtNcdkCJS/gGtuwQIIMmFixRZGUhq2U1arosA10mu4o5MbeBkl9eEx7fc0XK5/DFDzgxnuPMBT7viktzhzMdv37x5nAE8PNSDff3119F8Pk9//vnnOAzDE3h4OIJJZgeZhXzD+fl5nBYQx3F6//79I0gjqHnv0Q+u1KX5cu599913NxmWpCUiZ9u+of/L+P7772+Qk3+cCCQ/9PenfSgrMWE6naZVuPnvTUeV1gXPKI9N7F1dXW0Rl5Q6iqJKUj99+jSGBhSp+ReIIi0fquDbPfpDW31un/jBgwfTH3744ZI6fFlH7+Ddu3db+zDGkCRJ5Rm/+uorRueAYqTw8JAERSpIfYtKfHR0VKnEnVXaVrGzoVyBon1sgI5yyp7zl19+icvkJNLWEZdCdlWgDqMOleYQdzkkYMNPQKponyKGugF01KfsOT/66CNW3papdq17sbe3h8VisbV9Mpngyy+/1BaX1kLosWKXfbVMWa+rttf5zERo7mNfX18v35PR+8PDQ6ZTpT0shw2uERGwKr5c515QBIR8aR6jLv5P7589exZBAz6Ac/BhkiHw9u3byYcffjgllc1el64DB22j/2k7KfCdO3eW79+8eYOPP/54uQ9t5+9J0T/99FP2+vXrV0mdz+LhACy9F9uKVY5wkCIX/69SYeos8u30ypWZqzx9rkOlvQ+tAMI8tdQJbykWOz09nZGvzJGNBuLly5dLZSaB5QrNfWZ6JR+aVJk+p8+KQszfP3r0KEQhB8TDox+C2z9NOEhrwm9nZ2e3/jLH5eXlrQpzRebqXdyXq3im/kpV2juksqAa261wB8uIRymgWx+Q0j5//hyPHz9eKjapeMZVcDWnY0il6X9S6RcvXiyVm3B8fLwM661U/Z+ZLeDhYQKZa3BWF+EgxSVVbkLRrz44OEgzcpMkFE1LxMNjl9HyW50NhkRpR1AnkobJsUnisoXQUXAPjxpMZrNZ3MrePzeVmdJJ0UzkXVdpf0cOCPbjjz/etHFaksgKVHoM8LzOYb4ewq086D97E1mjSg9AFM/NZthWP5999tlRcWBlFX7rQeSg+H5Mj2mNkNojvVuzTuIZRTe6Ezmo+2wGD48BQEpKD76mii2CXRiryjpwXZ2K2Ou6ZlBPaDI1bsd4qOi9ckPYVulACaEP0BEbyUkpxoLxXElnBBsvukDj1ucbW9RU/R5GCy+2tkOHLz1HR9ifPurF1nZsq3RXrMWLwcNjQDCoVegYHeET/D1UIGn60KTX6AntoQKNYTaTXqMntIcKqI5KJOgIxwmt+MfMR1S64hAeHh3BMruEPXMtfwP1I4VncBQReowKjQQM4mGqEHkEoFesViF0kJmsfh7pwX5Fxb6YCE1BeQZhDOcXKPzmEOtrLzYkbZvWHFNFnhDmQb8MRLgIesis4LqG40iMddzR3jxY2fqp359BjAhzrOtjsvq/vA+dx+QQcZjZKfRk2BXtBg6DE5o3kFGYu4+X38Sweb1tFtUcQ9tDsa9UghB61bhsL+Awyo11ivGiLynKRN5afUoh6NwnaFXjoOZ9L5vCetSrRYztC6KKHNT9UJP+vHGCKfoTOauTgF5PsXlzzKEOITrfeEoIHVeWypV8dDT/BN+sPi/aFezo3cuCwmxijbqdT0zXG6FeLa/QAQV6cDW+Ei6jPpvDBDTdGwzd7mAG96CzIxWjG0KY6eTJGENP/FVkp7Rya+9J3k4K7ykF8QlWanF0dISHDx/i1atXuLi44PssMvt8ta9VEKiJDReKZu/c399fzvt2ft6aeUmdpNdYDwe/K5kMqBzTzB5DV8ivOy2o/RM4h2BZqRE270weSGfledJoGikM5mYo+21aqiA9IV2e00LgqekQ/cEg1MnTaEHrr4yT0xcwVPjNe3t76aNHj06Pj4/Pqmbioe1wGLSuX91qUTR5IZobWhIbN2EIsyG3rhbCQYRoUAhSKrIqrNaJdhbZJWytF0yzcQpMYNhlKWHBkJs1NoODoApuvTiaZrVq2lbaBsfnPfvtt9+uaIJwmiqLbtyKKWX7qnMImWiKHXYJB8GHbgsWXJKbQQ3LGNu4yKwTmI7R7YDcSOEVxHr8JvIqdNkVHPWbl6CFZ2g61p9++unqk08+mRdnsTw5Obm90Dq3g/aHNejcWWSZXaC+kekaZ2hv6BBtITcF82MEnsw5ys1NHb6iK8H9xyK4Pzlmt6MAhlxZ5wWj/5samYfcIugjmgm7gMvKnGFStTAjX/arCB7CqnI7aN8sNm1TYrspSHfyqpVVWa5FH+vSyW2B+SFxVrcGR5m4RFryqbnbQf/TzUD70Q1AMdxff/01fvDgwSFGgcbGCOG+GnOLMKbZkJ4+fRpXEbqK6DTvMJE687crVZyrOzoqtdqcI+XgahzDLcLWGf2qTDE2ZIo7qyI0EbM4cTahvEppHTLSz2AFOjJ887AQ9uVVNFvQqshTjNg9DOtGyvjijU2qXQWKmDR9oZXJhpuFsj7kFrQTt6zGFFoNMSCEkpOqIZWFsvj9998XYXn1xuzwu3fvLhdfpEUZCcVF0Zuwv7/PkFfeoupz4ZKZRF4o8iUpOagtqiGBjhlBLYelgMhpKUGKMqzOYGHimDaQi1CltORikCpzZa6KiNSBXBm4gxDCamxFRKLNIlgYRjU20UySJBe0FG4ZpMgk3PRKn9+7d2+53C6pNlfuJ0+eVJ7ziy++OIRKqPdTip08CQJIqG3Q62NZ8DTfv8Pq5YwNOZy0UHkxakGdP4pm8G2k0nwbZaEVF0KvwiraEaI35Cug5YgQrnXy2tX4ABIu0lB9GKPfS25HNsx9svziINhY6JwvcE4J74eHh7fb2/Dtt9+en56eCgbsZX1Nqf35Q6uH6HiT9X5kQi1IjZ8jf8BgAY9KTEh1aYCEfOWiMtN7ykSThQWppQIjeQ74xMGGGivssI4cz549W7odnNic1ORmiMSfyy7HauXSEOYRYjwjeWSX2OmlibvjdhVSPhJI/1PGnSiJifyltFNTqaWuJc+LWtxgEXKyU5+AlDuEV+8NTPhoIBl/xo5IWgfeUWx4/q6327FjnTxpq0h4ilZ1EmLXQc/YcWWmV554VARtp1FEiaV3Q6iFy8nzpi1GngLLsIu4f//+ER9IKfrN9SQW6lSpcjsMuhV2dxY7JvhH2EHVnvDcjkoSd3vaosbtEI5MhvBqrNIiKFVsC7NzikWiQRbBh0XbbX0DyCaQj7WTZ5PNYcIVMcr36i8j8qmuPCKmSCJ5iB3v5Bm2GEOs1GBY1EkddVReXVL5+Dt5ahaO12kn0IyhHZMI+joQSWbXyIdwJ9i1+Kll4+gF0FD6v9CQampv0dsxhd2KosicSAdVb/W/GNqmMRhaoemiYuzsyJPLWtQb9OtJKaglpe5XJ0MvvEkXc42dhWzDWflgWVdQ5z3Clpj1u8E/wPD4A2N8MtgKWH8D3FnZSyiCDYROkHfYmOgBo9IpYwiENg0AUur3mf0HCmALN0IMtKzbQB4s9xt91toa/0Cd+ynRUDaJHRE6xLixQO5iPcSYZhJSgwQ5qXs9OW6Dy8FB64j8G+PEAnnslUCDO3cggZ14Pi//tfofRva4l47h8KGsODUuqbENy6a5UGcMI0MEtxqhbBE2XadvLC9vL9Mwh7Sls/p3/73igy2pQ1Y1DRaDT0ftZIFtfSkFvheDG6SOUP2E9Al8Jl8fc3LtlTYw2EvqCNUqEoqUWeNSD+1mc0beZtkcCWnKyTeDxpWdJInVtP4JXxgp9aaoXQJXlnvr5o/MMFwFR6j36fwTL/osxsjBYM4FEZnreAorXaKOqaqBhnP2txCS6DE/tHEkmd1DTqQT6IlXLpAnylygfsQqhNWP7KeS+y+vM8kOo2Hn99gclr+LZQw9ZVtHmckbCLFD8+qFaF7zT0aN52hXA/o8UvB9NpjsbPs0MHShs0w1/ZmoujjOp6c1XgCf9ZMaiCpApDGvsG7Qtt70FOMZ5YsEr7kOROzYcJRGuqwMo0PAkDdc0agxmOAJxtbZm6Okxj00jhmulxCSiODBEWJc0xvQrxCDeoQATF3DESTR6S4YEcY4vcEcFUQObv8oQQQYuxZxrPyhCLuHEHll9Vxy2CqLYMqFDAoqrXf08QqS4AdOMX6EIJci6OZSWLmGdnBL5BDm0c01k7sBYkiieODYHglaTjATaPaLB1TuGMMK0QXMXKcUigfO4ArqfUGGtU885iHpGYYXoNoHMhTf5FIoHkgEcE2lGfKKnWM3cioi2BNqnUIfiYvGRHuz5aFv3uOfwU4w5PHk/dUr2WjcpJbRZBqSfgJz68lII4VOVJy9osKqcjnokaGh120mkjLkhOVPSI+KvFVoIMQC+UO2CTzWqKiwnNCbTOejZMfQB4Y1acnuYv0wKf/MwwFVtg05obeZTm7H+8L/CdoxwZqIfyu8Z4XPivsohpn0L4NYQESVR3fZ/ZF6k7dA33moYys93DsQptBUvyVjm19b30F0KR9aPyTUTnA32fMs4H1lAdTX/tDT6XaCtmxYVSwtQqyw5Ct/jny+5AQet5BtaycJrYN32tBe2HPkT+K8gC5oUwD9kG3rYQntcEUrwAK5IpO/rDREulWtTilAP9QQ2hDTrKzoPtcudGyC3E8mMi+gAU7xVzHVajqF9lWJuehUn29pPJZUmNyLoQetlKJ7u6yOVNyozkQ5HP7VHCWRObq3i54W9WE7fRg1kW2F/YTu7WsEy3zytGK7JpXwRB4QRgndiUK9OZfWnEL+xALZcJ7IA8MooV2PHtWU3xPZIngfujsWyDPhFrAFPlFJN6HdrOGGUpMCP0c+qrdo3ds0WorRO8TmADQTWldyhN7KTbe/cpFt3JjEcV2KXZBEd66xhtBipBnmvjX2jQlyNT7LvvLdYKVQCFUtarNe9xopHKE2JchJvMAOTeO6hvvt7juFOXFfYWdJ3BGWyrQiQtcNXlgJch+ukU9sTp27BD3Rp22dDUxYWmhFhLaezAvkSy8TgYnMSuPFfbzOHY+yiSJCHiK9ENk5HZndrCqgZULz4ZKx3UgDFyrlFK3toXTuvxgCU5+lNlmHpdZodsr56kL34GESUwzDkxg1k1N2czlEHL+OzmHDIQlyd+GP1esCzjx/t8tDeFqunSH/FV6g9FBxN0I3lq9z4nYCviJTTtoEaxInMIFl0XU0gLrzuXdraC1tiFytL5D72Emw2sDo01JlJWiZGKaict9hs8OVlF75smFJxasbcFhsNRQ9RM1k+QNV0wU8PMaE/wMRdkPOOuRNywAAAABJRU5ErkJggg==";
+
 const RecordUpdateProgress = ({
   tx,
   chainId,
@@ -51451,29 +51612,41 @@ const NameAvailabilityInput = ({
         suffix: /* @__PURE__ */ jsx(Text, { weight: "medium", size: "sm", color: "grey", children: parentName })
       }
     ),
-    showMinLengthMessage && /* @__PURE__ */ jsx("div", { className: "ns-text-center mt-2", children: /* @__PURE__ */ jsx(Text, { size: "xs", color: "grey", children: "Minimum subname length is 1 character" }) }),
-    showCheckingMessage && /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: "ns-text-center mt-2 d-flex align-items-center justify-content-center",
-        style: { gap: "8px" },
-        children: [
-          /* @__PURE__ */ jsx(ShurikenSpinner, { size: 18 }),
-          /* @__PURE__ */ jsx(Text, { size: "sm", color: "grey", children: "Checking availability" })
-        ]
-      }
-    ),
-    showUnavailableMessage && /* @__PURE__ */ jsx("div", { className: "ns-text-center mt-2", children: /* @__PURE__ */ jsxs(Text, { size: "xs", color: "grey", children: [
-      label,
-      ".",
-      parentName,
-      " is not available"
-    ] }) }),
-    showReservedMessage && /* @__PURE__ */ jsx("div", { className: "ns-text-center mt-2", children: /* @__PURE__ */ jsxs(Text, { size: "xs", color: "grey", children: [
-      label,
-      ".",
-      parentName,
-      " is reserved"
+    /* @__PURE__ */ jsx("div", { className: "ns-name-status", children: showMinLengthMessage ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("span", { className: "ns-dot" }),
+      /* @__PURE__ */ jsxs("span", { className: "ns-name-status__text", children: [
+        "Minimum subname length is ",
+        minLength,
+        " character",
+        minLength === 1 ? "" : "s"
+      ] })
+    ] }) : showCheckingMessage ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(ShurikenSpinner, { size: 14 }),
+      /* @__PURE__ */ jsx("span", { className: "ns-name-status__text", children: "Checking availability" })
+    ] }) : showUnavailableMessage ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("span", { className: "ns-dot ns-dot--bad" }),
+      /* @__PURE__ */ jsxs("span", { className: "ns-name-status__text", children: [
+        label,
+        ".",
+        parentName,
+        " is not available"
+      ] })
+    ] }) : showReservedMessage ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("span", { className: "ns-dot ns-dot--soon" }),
+      /* @__PURE__ */ jsxs("span", { className: "ns-name-status__text", children: [
+        label,
+        ".",
+        parentName,
+        " is reserved"
+      ] })
+    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("span", { className: "ns-dot ns-dot--ok" }),
+      /* @__PURE__ */ jsxs("span", { className: "ns-name-status__text", children: [
+        label,
+        ".",
+        parentName,
+        " is available"
+      ] })
     ] }) })
   ] });
 };
@@ -51501,7 +51674,19 @@ const ProfileSelector = ({ onSelect }) => {
             /* @__PURE__ */ jsx(Text, { size: "xs", color: "grey", children: "Make your ENS more discoverable" })
           ] })
         ] }),
-        /* @__PURE__ */ jsx(Button, { style: { width: 40, height: 40 }, children: `>` })
+        /* @__PURE__ */ jsx("span", { className: "profile-cta-arrow", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
+          "svg",
+          {
+            width: "14",
+            height: "14",
+            viewBox: "0 0 16 16",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "1.6",
+            strokeLinecap: "round",
+            children: /* @__PURE__ */ jsx("path", { d: "M6 3.6 10.4 8 6 12.4" })
+          }
+        ) })
       ] })
     }
   );
@@ -52374,16 +52559,33 @@ const SubnameInput = ({
         ] }) })
       }
     ),
-    value.length > 0 && value.length < minLength && /* @__PURE__ */ jsx("div", { className: "ns-text-center mt-2", children: /* @__PURE__ */ jsxs(Text, { size: "xs", color: "grey", children: [
-      "Minimum subname length is ",
-      minLength,
-      " character"
-    ] }) }),
-    !isUpdateMode && value.length >= minLength && !isChecking && !isLoading && !isAvailable && /* @__PURE__ */ jsx("div", { className: "mt-2", children: /* @__PURE__ */ jsxs(Text, { size: "xs", color: "grey", children: [
-      value,
-      ".",
-      parentName,
-      " is not available"
+    !isUpdateMode && value.length > 0 && /* @__PURE__ */ jsx("div", { className: "ns-name-status", children: value.length < minLength ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("span", { className: "ns-dot" }),
+      /* @__PURE__ */ jsxs("span", { className: "ns-name-status__text", children: [
+        "Minimum subname length is ",
+        minLength,
+        " character",
+        minLength === 1 ? "" : "s"
+      ] })
+    ] }) : isChecking || isLoading ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(ShurikenSpinner, { size: 14 }),
+      /* @__PURE__ */ jsx("span", { className: "ns-name-status__text", children: "Checking availability" })
+    ] }) : isAvailable ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("span", { className: "ns-dot ns-dot--ok" }),
+      /* @__PURE__ */ jsxs("span", { className: "ns-name-status__text", children: [
+        value,
+        ".",
+        parentName,
+        " is available"
+      ] })
+    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("span", { className: "ns-dot ns-dot--bad" }),
+      /* @__PURE__ */ jsxs("span", { className: "ns-name-status__text", children: [
+        value,
+        ".",
+        parentName,
+        " is not available"
+      ] })
     ] }) })
   ] });
 };
@@ -52884,5 +53086,5 @@ const useTheme = () => {
   return ctx;
 };
 
-export { Accordion, Alert, Button, Card, ChainIcon, ConnectAndSetChain, ContenthashIcon, ContenthashProtocol, ContractErrorLabel, Dropdown, DurationPicker, ENS_RESOLVER_ABI, ETH_SENTINELS, EnsNameRegistrationForm, EnsRecordsForm, Icon, Input, ListingNetwork, ListingType, MIN_REGISTRATION_SECONDS, MULTICALL, Modal, ONE_DAY, ONE_YEAR, OffchainSubnameForm, PricingDisplay, ProfileHeader, ProgressBar, SET_ADDRESS_FUNC, SET_CONTENTHASH_FUNC, SET_TEXT_FUNC, SelectRecordsForm, ShurikenSpinner, SubnameMintForm, Text, TextRecordCategory, Textarea, ThemeProvider, Tooltip, TransactionPendingScreen, TxProgress, capitalize, computeUsd, convertEVMChainIdToCoinType, convertToMulticallResolverData, convertToResolverData, createEnsReferer, debounce, deepCopy, diffToEnsRecords, ensureFloatInput, equalsIgnoreCase, formatDurationSummary, formatEth, formatFloat, getAvatarUploadErrorMessage, getBlockExplorer, getBlockExplorerAddressUrl, getBlockExplorerName, getBlockExplorerTransactionUrl, getChainIdForListingNetwork, getEnsAppUrl, getEnsRecordsDiff, getImageUploadErrorMessage, getSupportedAddressByChainId, getSupportedAddressByCoin, getSupportedAddressByName, getSupportedAddressMap, getSupportedChashByProtocol, getSupportedText, isCommitmentToNewErr, isContenthashValid, isSentinel, isUserDeniedError, roundDurationWithDay, secondsFromYears, secondsToDateInput, supportedAddresses, supportedContenthashRecords, supportedTexts, usdFromWei, useAvatarClient, useENSResolver, useEthDollarValue, useMintManager, useMintSubname, useOffchainManager, useRegisterENS, useTheme, useWaitTransaction, validateEnsRecords, wait, yearsFromSeconds };
+export { Accordion, Alert, Button, Card, ChainIcon, ConnectAndSetChain, ContenthashIcon, ContenthashProtocol, ContractErrorLabel, Dropdown, DurationPicker, ENS_RESOLVER_ABI, ETH_SENTINELS, EnsNameRegistrationForm, EnsRecordsForm, Icon, Identicon, Input, ListingNetwork, ListingType, MIN_REGISTRATION_SECONDS, MULTICALL, Modal, ONE_DAY, ONE_YEAR, OffchainSubnameForm, PricingDisplay, ProfileHeader, ProgressBar, SET_ADDRESS_FUNC, SET_CONTENTHASH_FUNC, SET_TEXT_FUNC, SelectRecordsForm, ShurikenSpinner, SubnameMintForm, Tag, Text, TextRecordCategory, Textarea, ThemeProvider, Tooltip, TransactionPendingScreen, TxProgress, capitalize, computeUsd, convertEVMChainIdToCoinType, convertToMulticallResolverData, convertToResolverData, createEnsReferer, debounce, deepCopy, diffToEnsRecords, ensureFloatInput, equalsIgnoreCase, formatDurationSummary, formatEth, formatFloat, getAvatarUploadErrorMessage, getBlockExplorer, getBlockExplorerAddressUrl, getBlockExplorerName, getBlockExplorerTransactionUrl, getChainIdForListingNetwork, getEnsAppUrl, getEnsRecordsDiff, getImageUploadErrorMessage, getSupportedAddressByChainId, getSupportedAddressByCoin, getSupportedAddressByName, getSupportedAddressMap, getSupportedChashByProtocol, getSupportedText, isCommitmentToNewErr, isContenthashValid, isSentinel, isUserDeniedError, roundDurationWithDay, secondsFromYears, secondsToDateInput, supportedAddresses, supportedContenthashRecords, supportedTexts, usdFromWei, useAvatarClient, useENSResolver, useEthDollarValue, useMintManager, useMintSubname, useOffchainManager, useRegisterENS, useTheme, useWaitTransaction, validateEnsRecords, wait, yearsFromSeconds };
 //# sourceMappingURL=index.js.map