@lightsparkdev/ui 0.0.6 → 0.0.8

package/dist/components/index.cjs

@@ -67,6 +67,7 @@ var __async = (__this, __arguments, generator) => {
 // src/components/index.tsx
 var components_exports = {};
 __export(components_exports, {
+  Badge: () => Badge,
   Button: () => Button,
   ButtonRow: () => ButtonRow,
   ButtonRowContainer: () => ButtonRowContainer,
@@ -78,11 +79,13 @@ __export(components_exports, {
   CurrencyIcon: () => CurrencyIcon,
   Icon: () => Icon,
   IconContainer: () => IconContainer,
+  LightTooltip: () => LightTooltip,
   LightboxImage: () => LightboxImage,
   LightsparkProvider: () => LightsparkProvider,
   Loading: () => Loading,
   LoadingWrapper: () => LoadingWrapper,
   Modal: () => Modal,
+  Pill: () => Pill,
   ProgressBar: () => ProgressBar,
   SecretContainer: () => SecretContainer,
   StyledButton: () => StyledButton,
@@ -91,14 +94,8 @@ __export(components_exports, {
 });
 module.exports = __toCommonJS(components_exports);
 
-// src/components/Button.tsx
-var import_react7 = require("@emotion/react");
-var import_styled5 = __toESM(require("@emotion/styled"), 1);
-
-// src/router.tsx
-var import_lodash_es2 = require("lodash-es");
-var import_react4 = require("react");
-var import_react_router_dom = require("react-router-dom");
+// src/components/Badge.tsx
+var import_styled2 = __toESM(require("@emotion/styled"), 1);
 
 // src/styles/colors.tsx
 var import_react3 = require("@emotion/react");
@@ -1344,108 +1341,9 @@ function useThemeBg() {
   return isSm ? theme.smBg : theme.bg;
 }
 
-// src/utils/strings.tsx
-function isString(str) {
-  return typeof str === "string";
-}
-
-// src/router.tsx
-var import_jsx_runtime2 = require("@emotion/react/jsx-runtime");
-function replaceParams(to, params) {
-  if (params) {
-    let toWithParams = to;
-    Object.entries((0, import_lodash_es2.omit)(params, "query")).forEach(([key, value]) => {
-      if (typeof value !== "string") {
-        throw new Error(
-          `Only 'query' may be an object. Route params must be a string, but '${key}' is not.`
-        );
-      }
-      toWithParams = toWithParams.replace(`:${key}`, value);
-    });
-    if (params.query) {
-      let query = params.query;
-      if (typeof query !== "string") {
-        query = Object.entries(params.query).map(([key, value]) => `${key}${value ? `=${value}` : ""}`).join("&");
-      }
-      toWithParams = `${toWithParams}?${query}`;
-    }
-    to = toWithParams;
-  }
-  return to;
-}
-function Link({
-  to,
-  externalLink,
-  params,
-  children,
-  css: css7,
-  onClick,
-  className,
-  hash = null,
-  blue = false,
-  newTab = false
-}) {
-  if (!isString(to) && !externalLink) {
-    throw new Error("Link must have either `to` or `externalLink` defined");
-  }
-  let toStr;
-  if (isString(to)) {
-    toStr = replaceParams(to, params);
-    toStr += hash ? `#${hash}` : "";
-  } else {
-    const definedExternalLink = externalLink;
-    if (!definedExternalLink.startsWith("http")) {
-      throw new Error("Link's externalLink must start with http");
-    }
-    toStr = definedExternalLink;
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-    import_react_router_dom.Link,
-    {
-      to: toStr,
-      css: css7,
-      onClick,
-      className,
-      style: { color: blue ? colors.blue43 : "inherit" },
-      target: newTab ? "_blank" : void 0,
-      rel: newTab ? "noopener noreferrer" : void 0,
-      children
-    }
-  );
-}
-
 // src/styles/common.tsx
-var import_react5 = require("@emotion/react");
+var import_react4 = require("@emotion/react");
 var import_styled = __toESM(require("@emotion/styled"), 1);
-var import_react_tooltip = require("react-tooltip");
-
-// src/styles/z-index.tsx
-var z = {
-  card: 1,
-  fieldError: 1,
-  textInput: 2,
-  select: 3,
-  selectFocused: 4,
-  walletActionPreviewTopGradient: 1,
-  headerContainer: 99,
-  smBanner: 99,
-  headerTop: 100,
-  navMenu: 100,
-  smNavMenu: 100,
-  navAction: 101,
-  smNavAction: 100,
-  // keep under navDropdown
-  tooltip: 160,
-  notificationBanner: 170,
-  qrReaderVideo: 180,
-  qrReaderOverlay: 181,
-  modalOverlay: 190,
-  modalContainer: 191,
-  dropdown: 192,
-  toast: 200
-};
-
-// src/styles/common.tsx
 var rootFontSizePx = 12;
 var rootFontSizeRems = rootFontSizePx / 16;
 var standardLineHeightEms = 1.21;
@@ -1458,19 +1356,19 @@ var standardBorderRadius = (radius) => {
     border-radius: ${borderRadiusPx};
   `;
 };
-var smContentInset = import_react5.css`
+var smContentInset = import_react4.css`
   ${bp.sm(`
     margin-left: auto;
     margin-right: auto;
     width: calc(100% - ${standardContentInsetSmPx * 2}px);
   `)}
 `;
-var minSmMaxLgContentInset = import_react5.css`
+var minSmMaxLgContentInset = import_react4.css`
   ${bp.minSmMaxLg(`
     width: calc(100% - ${standardContentInsetMdPx * 2}px);
   `)}
 `;
-var standardContentInset = import_react5.css`
+var standardContentInset = import_react4.css`
   margin-left: auto;
   margin-right: auto;
   width: calc(100% - ${standardContentInsetPx * 2}px);
@@ -1479,7 +1377,7 @@ var standardContentInset = import_react5.css`
   ${smContentInset}
   ${minSmMaxLgContentInset}
 `;
-var standardCardShadow = import_react5.css`
+var standardCardShadow = import_react4.css`
   box-shadow:
     0px 4px 10px 0px rgba(0, 0, 0, 0.08),
     0px 8px 24px 0px rgba(0, 0, 0, 0.04);
@@ -1493,7 +1391,7 @@ var getFocusOutline = ({
   onBgHex
 }) => `${onBgHex ? theme.hcNeutralFromBg(onBgHex) : theme.hcNeutral} dashed 1px`;
 var outlineOffset = "-2px";
-var standardFocusOutline = ({ theme }) => import_react5.css`
+var standardFocusOutline = ({ theme }) => import_react4.css`
   &,
   & a,
   & button {
@@ -1503,30 +1401,27 @@ var standardFocusOutline = ({ theme }) => import_react5.css`
     }
   }
 `;
-var subtext = ({ theme }) => import_react5.css`
+var subtext = ({ theme }) => import_react4.css`
   color: ${theme.c6Neutral};
   font-weight: 600;
 `;
 var Subtext = import_styled.default.div`
   ${subtext}
 `;
-var darkGradientBg = import_react5.css`
+var darkGradientBg = import_react4.css`
   background: ${darkGradient};
 `;
-var StyledTooltip = (0, import_styled.default)(import_react_tooltip.Tooltip)`
-  z-index: ${z.modalOverlay};
-`;
 var overlaySurfaceBorderColor = ({
   theme,
   important = false
-}) => import_react5.css`
+}) => import_react4.css`
   border-color: ${themeOr(theme.c1Neutral, theme.c3Neutral)({ theme })}
     ${important ? "!important" : ""};
 `;
 var overlaySurface = ({
   theme,
   important = false
-}) => import_react5.css`
+}) => import_react4.css`
   background-color: ${themeOr(colors.white, theme.c1Neutral)({ theme })}
     ${important ? "!important" : ""};
   border: 0.5px solid ${important ? "!important" : ""};
@@ -1537,15 +1432,113 @@ var overlaySurface = ({
 )({ theme })}
 `;
 
+// src/components/Badge.tsx
+var import_jsx_runtime2 = require("@emotion/react/jsx-runtime");
+function Badge({ text, ml = 0 }) {
+  return text ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(StyledBadge, { ml, children: text }) : null;
+}
+var badgeVPadding = 2;
+var StyledBadge = import_styled2.default.span`
+  ${standardBorderRadius(4)}
+  ${({ ml }) => ml === 0 ? "" : `margin-left: ${ml}px;`}
+  padding: ${badgeVPadding}px 6px;
+  background-color: ${({ theme }) => isLight(theme) ? theme.c05Neutral : theme.c15Neutral};
+`;
+
+// src/components/Button.tsx
+var import_react9 = require("@emotion/react");
+var import_styled6 = __toESM(require("@emotion/styled"), 1);
+var import_lodash_es3 = require("lodash-es");
+var import_react10 = require("react");
+
+// src/router.tsx
+var import_lodash_es2 = require("lodash-es");
+var import_react5 = require("react");
+var import_react_router_dom = require("react-router-dom");
+
+// src/utils/strings.tsx
+function isString(str) {
+  return typeof str === "string";
+}
+
+// src/router.tsx
+var import_jsx_runtime3 = require("@emotion/react/jsx-runtime");
+function replaceParams(to, params) {
+  if (params) {
+    let toWithParams = to;
+    Object.entries((0, import_lodash_es2.omit)(params, "query")).forEach(([key, value]) => {
+      if (typeof value !== "string") {
+        throw new Error(
+          `Only 'query' may be an object. Route params must be a string, but '${key}' is not.`
+        );
+      }
+      toWithParams = toWithParams.replace(`:${key}`, value);
+    });
+    if (params.query) {
+      let query = params.query;
+      if (typeof query !== "string") {
+        query = Object.entries(params.query).map(([key, value]) => `${key}${value ? `=${value}` : ""}`).join("&");
+      }
+      toWithParams = `${toWithParams}?${query}`;
+    }
+    to = toWithParams;
+  }
+  return to;
+}
+function Link({
+  to,
+  externalLink,
+  params,
+  children,
+  css: css8,
+  onClick,
+  className,
+  hash = null,
+  blue = false,
+  newTab = false
+}) {
+  if (!isString(to) && !externalLink && !onClick) {
+    throw new Error(
+      "Link must have either `to` or `externalLink` or `onClick` defined"
+    );
+  }
+  let toStr;
+  if (isString(to)) {
+    toStr = replaceParams(to, params);
+    toStr += hash ? `#${hash}` : "";
+  } else if (externalLink) {
+    const definedExternalLink = externalLink;
+    if (!definedExternalLink.startsWith("http")) {
+      throw new Error("Link's externalLink must start with http");
+    }
+    toStr = definedExternalLink;
+  } else {
+    toStr = "#";
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    import_react_router_dom.Link,
+    {
+      to: toStr,
+      css: css8,
+      onClick,
+      className,
+      style: { color: blue ? colors.blue43 : "inherit" },
+      target: newTab ? "_blank" : void 0,
+      rel: newTab ? "noopener noreferrer" : void 0,
+      children
+    }
+  );
+}
+
 // src/utils/emotion.tsx
 function select(component) {
   return component.toString();
 }
 
 // src/components/Icon.tsx
-var import_styled2 = __toESM(require("@emotion/styled"), 1);
+var import_styled3 = __toESM(require("@emotion/styled"), 1);
 var import_react6 = require("react");
-var import_jsx_runtime3 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime4 = require("@emotion/react/jsx-runtime");
 var iconMap = {};
 function loadIcon(iconName) {
   return __async(this, null, function* () {
@@ -1587,7 +1580,7 @@ function Icon({
   const mrRems = parseFloat((mr / rootFontSizePx).toFixed(2));
   const mlRems = parseFloat((ml / rootFontSizePx).toFixed(2));
   const va = typeof verticalAlign === "string" ? verticalAlign : parseFloat((verticalAlign / rootFontSizePx).toFixed(2));
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     IconContainer,
     {
       className,
@@ -1597,11 +1590,11 @@ function Icon({
       verticalAlign: va,
       fontColor: color,
       "data-tutorial-tip": tutorialStep == null ? void 0 : tutorialStep.toString(),
-      children: IconComponent ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(IconComponent, {}) : null
+      children: IconComponent ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(IconComponent, {}) : null
     }
   );
 }
-var IconContainer = import_styled2.default.span`
+var IconContainer = import_styled3.default.span`
   pointer-events: none;
   display: inline-flex;
   ${({ mr, ml, w }) => `
@@ -1621,9 +1614,90 @@ var IconContainer = import_styled2.default.span`
   `}
 `;
 
+// src/components/LightTooltip.tsx
+var import_css = require("@emotion/css");
+var import_react7 = require("@emotion/react");
+var import_react8 = __toESM(require("react"), 1);
+var import_react_dom = __toESM(require("react-dom"), 1);
+var import_react_tooltip = require("react-tooltip");
+
+// src/styles/z-index.tsx
+var z = {
+  card: 1,
+  fieldError: 1,
+  textInput: 2,
+  select: 3,
+  selectFocused: 4,
+  walletActionPreviewTopGradient: 1,
+  headerContainer: 99,
+  smBanner: 99,
+  headerTop: 100,
+  navMenu: 100,
+  smNavMenu: 100,
+  navAction: 101,
+  smNavAction: 100,
+  // keep under navDropdown
+  notificationBanner: 170,
+  qrReaderVideo: 180,
+  qrReaderOverlay: 181,
+  modalOverlay: 190,
+  modalContainer: 191,
+  dropdown: 192,
+  tooltip: 193,
+  toast: 200
+};
+
+// src/components/LightTooltip.tsx
+var import_jsx_runtime5 = require("@emotion/react/jsx-runtime");
+function LightTooltip(props) {
+  const nodeRef = (0, import_react8.useRef)(null);
+  const [nodeReady, setNodeReady] = import_react8.default.useState(false);
+  (0, import_react8.useEffect)(() => {
+    if (!nodeRef.current) {
+      nodeRef.current = document.createElement("div");
+      document.body.appendChild(nodeRef.current);
+    }
+    setNodeReady(true);
+    return () => {
+      if (nodeRef.current) {
+        document.body.removeChild(nodeRef.current);
+        nodeRef.current = null;
+      }
+    };
+  }, []);
+  const theme = (0, import_react7.useTheme)();
+  console.log("LightTooltip.tsx: tooltipProps:", props);
+  return nodeReady && nodeRef.current ? import_react_dom.default.createPortal(
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      import_react_tooltip.Tooltip,
+      __spreadProps(__spreadValues({}, props), {
+        id: props.id || "",
+        content: props.content || "",
+        noArrow: true,
+        border: "0.05rem solid rgba(0, 0, 0, 0.1)",
+        className: styles({ theme }),
+        variant: "light",
+        delayShow: 180
+      })
+    ),
+    nodeRef.current
+  ) : null;
+}
+var styles = ({ theme }) => import_css.css`
+  font-size: "10px",
+  color: ${theme.c2Neutral};
+  border-radius: 8px !important;
+  padding: 16px !important;
+  z-index: ${z.tooltip};
+  ${overlaySurface({ theme, important: true })};
+
+  max-width: 260px;
+  box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.10), 0px 4px 8px 0px rgba(0, 0, 0, 0.08) !important;
+`;
+
 // src/components/Loading.tsx
-var import_styled3 = __toESM(require("@emotion/styled"), 1);
-var import_jsx_runtime4 = require("@emotion/react/jsx-runtime");
+var import_styled4 = __toESM(require("@emotion/styled"), 1);
+var import_jsx_runtime6 = require("@emotion/react/jsx-runtime");
 var defaultProps = {
   size: 60,
   center: true,
@@ -1634,10 +1708,10 @@ function Loading({
   size: size2 = defaultProps.size,
   ml = defaultProps.ml
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(LoadingWrapper, { center, ml, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Rotate, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { name: "LoadingSpinner", width: size2 }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(LoadingWrapper, { center, ml, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Rotate, { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon, { name: "LoadingSpinner", width: size2 }) }) });
 }
 Loading.defaultProps = defaultProps;
-var LoadingWrapper = import_styled3.default.div`
+var LoadingWrapper = import_styled4.default.div`
   flex-grow: 1;
   display: flex;
   align-items: center;
@@ -1657,7 +1731,7 @@ var LoadingWrapper = import_styled3.default.div`
     margin: 0 !important;
   `}
 `;
-var Rotate = import_styled3.default.div`
+var Rotate = import_styled4.default.div`
   display: inline-flex;
   animation: rotate 0.5s linear infinite;
 
@@ -1672,8 +1746,8 @@ var Rotate = import_styled3.default.div`
 `;
 
 // src/components/UnstyledButton.tsx
-var import_styled4 = __toESM(require("@emotion/styled"), 1);
-var UnstyledButton = import_styled4.default.button`
+var import_styled5 = __toESM(require("@emotion/styled"), 1);
+var UnstyledButton = import_styled5.default.button`
   ${standardFocusOutline}
   font-family: ${({ theme }) => theme.typography.fontFamilies.main};
   appearance: none;
@@ -1688,7 +1762,7 @@ var UnstyledButton = import_styled4.default.button`
 `;
 
 // src/components/Button.tsx
-var import_jsx_runtime5 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime7 = require("@emotion/react/jsx-runtime");
 function getTextColor({ color, theme, primary: primary2, blue }) {
   if (color) {
     return color;
@@ -1723,12 +1797,37 @@ function getBackgroundColor({
   }
   return themeOr(colors.white, theme.c1Neutral)({ theme });
 }
-function getPaddingX({ size: size2, ghost }) {
-  return ghost ? 0 : size2 === "lg" ? hPaddingPx : size2 === "md" ? 18 : 16;
+var paddingsY = {
+  lg: 14,
+  md: 9,
+  sm: 6
+};
+var roundPaddingsX = {
+  lg: 19,
+  md: 14,
+  sm: 10
+};
+var paddingsX = {
+  lg: 24,
+  md: 18,
+  sm: 16
+};
+function getPaddingX({
+  size: size2,
+  ghost,
+  isRound
+}) {
+  return ghost ? 0 : isRound ? roundPaddingsX[size2] : paddingsX[size2];
 }
-function getPadding({ iconWidth, size: size2, ghost, iconSide }) {
-  const paddingY = ghost ? 0 : size2 === "lg" ? 14 : size2 === "md" ? 9 : 6;
-  const paddingX = getPaddingX({ size: size2, ghost });
+function getPadding({
+  iconWidth,
+  size: size2,
+  ghost,
+  iconSide,
+  isRound
+}) {
+  const paddingY = ghost ? 0 : paddingsY[size2];
+  const paddingX = getPaddingX({ size: size2, ghost, isRound });
   const paddingForIcon = iconWidth && !ghost ? iconWidth : 0;
   return `${paddingY}px ${paddingX + (iconSide === "right" ? paddingForIcon : 0)}px ${paddingY}px ${paddingX + (iconSide === "left" ? paddingForIcon : 0)}px`;
 }
@@ -1777,40 +1876,46 @@ function Button({
   type = "button",
   blue = false,
   newTab = false,
-  zIndex = void 0
+  zIndex = void 0,
+  tooltipText
 }) {
+  const tooltipId = (0, import_react10.useRef)((0, import_lodash_es3.uniqueId)());
   const iconMarginRight = 6;
   const iconSize = size2 === "lg" ? 16 : 12;
   let currentIcon = null;
   if (loading) {
-    currentIcon = /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ButtonIcon, { ghost, iconSide, text, size: size2, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Loading, { size: iconSize, center: false }) });
+    currentIcon = /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ButtonIcon, { ghost, iconSide, text, size: size2, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Loading, { size: iconSize, center: false }) });
   } else if (icon) {
-    currentIcon = /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ButtonIcon, { ghost, iconSide, text, size: size2, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { name: icon, width: iconSize }) });
+    currentIcon = /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ButtonIcon, { ghost, iconSide, text, size: size2, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Icon, { name: icon, width: iconSize }) });
   }
-  const content = /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
-    "div",
-    {
-      css: {
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center"
-      },
-      children: [
-        iconSide === "left" && currentIcon,
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-          "div",
-          {
-            css: {
-              textOverflow: "ellipsis",
-              overflow: "hidden"
-            },
-            children: text
-          }
-        ),
-        iconSide === "right" && currentIcon
-      ]
-    }
-  );
+  const content = /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react10.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+      "div",
+      __spreadProps(__spreadValues({}, tooltipText ? { "data-tooltip-id": tooltipId.current } : {}), {
+        css: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center"
+        },
+        children: [
+          iconSide === "left" && currentIcon,
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            "div",
+            {
+              css: {
+                textOverflow: "ellipsis",
+                overflow: "hidden"
+              },
+              children: text
+            }
+          ),
+          iconSide === "right" && currentIcon
+        ]
+      })
+    ),
+    tooltipText ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(LightTooltip, { id: tooltipId.current, content: tooltipText }) : null
+  ] });
+  const isSingleCharRoundButton = Boolean(text && text.length === 1 && !icon);
   const commonProps = {
     backgroundColor,
     color,
@@ -1823,6 +1928,7 @@ function Button({
     fullWidth,
     blue,
     iconSide,
+    isRound: isSingleCharRoundButton,
     iconWidth: currentIcon ? iconSize + iconMarginRight : 0,
     isLoading: loading,
     disabled: disabled || loading,
@@ -1835,11 +1941,10 @@ function Button({
     zIndex
   };
   if (to) {
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ButtonLink, __spreadProps(__spreadValues({}, commonProps), { to, params: toParams, hash, children: content }));
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ButtonLink, __spreadProps(__spreadValues({}, commonProps), { to, params: toParams, hash, children: content }));
   }
-  return href ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ButtonHrefLink, __spreadProps(__spreadValues({}, commonProps), { href, target: "_blank", children: content })) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(StyledButton, __spreadProps(__spreadValues({}, commonProps), { children: content }));
+  return href ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ButtonHrefLink, __spreadProps(__spreadValues({}, commonProps), { href, target: "_blank", children: content })) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(StyledButton, __spreadProps(__spreadValues({}, commonProps), { children: content }));
 }
-var hPaddingPx = 24;
 var buttonStyle = ({
   color,
   backgroundColor,
@@ -1855,8 +1960,9 @@ var buttonStyle = ({
   blue,
   text,
   zIndex,
-  iconSide
-}) => import_react7.css`
+  iconSide,
+  isRound
+}) => import_react9.css`
   display: inline-flex;
   opacity: ${disabled && !isLoading ? 0.2 : 1};
   transition: opacity 0.2s;
@@ -1892,8 +1998,15 @@ var buttonStyle = ({
   primary: primary2,
   blue
 })};
-    border-radius: 32px;
-    padding: ${getPadding({ size: size2, iconWidth, text, ghost, iconSide })};
+    border-radius: ${isRound ? "100%" : "32px"};
+    padding: ${getPadding({
+  size: size2,
+  iconWidth,
+  text,
+  ghost,
+  iconSide,
+  isRound
+})};
     color: ${getTextColor({ color, theme, primary: primary2, blue })};
     transition:
       background-color 0.2s ease-out,
@@ -1904,28 +2017,28 @@ var buttonStyle = ({
     }
   }
 `;
-var ButtonIcon = import_styled5.default.div`
+var ButtonIcon = import_styled6.default.div`
   ${(props) => props.ghost ? "" : "position: absolute;"}
-  ${({ iconSide, ghost, text, size: size2 }) => `${iconSide}: ${ghost && text ? 0 : getPaddingX({ size: size2, ghost })}px;`}
+  ${({ iconSide, ghost, text, size: size2 }) => `${iconSide}: ${ghost && text ? 0 : getPaddingX({ size: size2, ghost, isRound: false })}px;`}
 `;
-var StyledButton = (0, import_styled5.default)(UnstyledButton)`
+var StyledButton = (0, import_styled6.default)(UnstyledButton)`
   ${(props) => buttonStyle(props)}
 `;
-var ButtonLink = (0, import_styled5.default)(Link)`
+var ButtonLink = (0, import_styled6.default)(Link)`
   ${(props) => buttonStyle(props)}
 `;
-var ButtonHrefLink = import_styled5.default.a`
+var ButtonHrefLink = import_styled6.default.a`
   ${(props) => buttonStyle(props)}
 `;
-var ButtonSelector = (prepend = "", append = "") => `${prepend}${select(StyledButton)}${append}, ${prepend}${select(
-  ButtonLink
-)}${append}, ${prepend}${select(ButtonHrefLink)}${append}`;
+var ButtonSelector = (prepend = "", append = "") => `${prepend}*:is(${select(StyledButton)}, ${select(ButtonLink)}, ${select(
+  ButtonHrefLink
+)})${append}`;
 
 // src/components/ButtonRow.tsx
-var import_styled6 = __toESM(require("@emotion/styled"), 1);
+var import_styled7 = __toESM(require("@emotion/styled"), 1);
 
 // src/styles/utils.tsx
-var import_react8 = require("@emotion/react");
+var import_react11 = require("@emotion/react");
 function pxToRems(rems, asNum = false) {
   const value = (rems / rootFontSizePx).toFixed(6);
   return asNum ? Number(value) : `${value}rem`;
@@ -1941,26 +2054,26 @@ var size = {
   px21: pxToRems(21),
   px24: pxToRems(24)
 };
-var flexCenterAxis = import_react8.css`
+var flexCenterAxis = import_react11.css`
   display: flex;
   align-items: center;
 `;
-var flexCenter = import_react8.css`
+var flexCenter = import_react11.css`
   display: flex;
   justify-content: center;
   align-items: center;
 `;
-var inlineFlexCenter = import_react8.css`
+var inlineFlexCenter = import_react11.css`
   display: flex;
   justify-content: center;
   align-items: center;
 `;
-var flexBetween = import_react8.css`
+var flexBetween = import_react11.css`
   display: flex;
   justify-content: space-between;
   align-items: center;
 `;
-var absoluteCenter = import_react8.css`
+var absoluteCenter = import_react11.css`
   position: absolute;
   top: 0;
   bottom: 0;
@@ -1968,10 +2081,10 @@ var absoluteCenter = import_react8.css`
   right: 0;
   margin: auto;
 `;
-var textCenter = import_react8.css`
+var textCenter = import_react11.css`
   text-align: center;
 `;
-var overflowAutoWithoutScrollbars = import_react8.css`
+var overflowAutoWithoutScrollbars = import_react11.css`
   overflow: auto;
   scrollbar-width: none;
   -ms-overflow-style: none;
@@ -1986,16 +2099,18 @@ var overflowAutoWithoutScrollbars = import_react8.css`
 `;
 
 // src/components/ButtonRow.tsx
-var import_jsx_runtime6 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime8 = require("@emotion/react/jsx-runtime");
 function ButtonRow({
   buttons,
   className,
   smSticky = true,
   headerHeight = 0
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ButtonRowContainer, { smSticky, headerHeight, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(StyledButtonRow, { className, children: buttons.map((button, idx) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Button, __spreadValues({}, button), idx)) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ButtonRowContainer, { smSticky, headerHeight, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(StyledButtonRow, { className, children: buttons.map(
+    (button, idx) => button === "divider" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ButtonRowDivider, {}, idx) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Button, __spreadValues({}, button), idx)
+  ) }) });
 }
-var ButtonRowContainer = import_styled6.default.div`
+var ButtonRowContainer = import_styled7.default.div`
   max-width: 100%;
   ${({ theme }) => bp.sm(`background: ${theme.bg}`)}
   ${({ headerHeight, smSticky }) => bp.sm(
@@ -2023,7 +2138,12 @@ var ButtonRowContainer = import_styled6.default.div`
       `
 )}
 `;
-var StyledButtonRow = import_styled6.default.div`
+var ButtonRowDivider = import_styled7.default.div`
+  border-left: 1px #d9d9d9 solid;
+  margin-left: 16px;
+  padding-left: 16px;
+`;
+var StyledButtonRow = import_styled7.default.div`
   ${overflowAutoWithoutScrollbars}
   background: ${({ theme }) => theme.bg};
   display: flex;
@@ -2035,15 +2155,20 @@ var StyledButtonRow = import_styled6.default.div`
     margin-left: 8px;
   }
 
+  & ${ButtonRowDivider} + button,
+  & ${ButtonRowDivider} + a {
+    margin-left: 0;
+  }
+
   ${bp.sm(`
     padding: 12px;
   `)}
 `;
 
 // src/components/Collapsible.tsx
-var import_styled7 = __toESM(require("@emotion/styled"), 1);
-var import_react9 = require("react");
-var import_jsx_runtime7 = require("@emotion/react/jsx-runtime");
+var import_styled8 = __toESM(require("@emotion/styled"), 1);
+var import_react12 = require("react");
+var import_jsx_runtime9 = require("@emotion/react/jsx-runtime");
 function Collapsible({
   children,
   className,
@@ -2056,37 +2181,37 @@ function Collapsible({
   buttonTextElement,
   contentIndent = true
 }) {
-  const [isOpen, setIsOpen] = (0, import_react9.useState)(open);
+  const [isOpen, setIsOpen] = (0, import_react12.useState)(open);
   const handleClick = () => {
     if (handleToggle) {
       handleToggle(!isOpen);
     }
     setIsOpen(!isOpen);
   };
-  (0, import_react9.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     setIsOpen(open);
   }, [open]);
   const iconName = hamburger ? isOpen ? "Close" : "StackedLines" : "Down";
   const iconWidth = iconName === "Close" ? 12 : 14;
-  let textElement = /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", {});
+  let textElement = /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", {});
   if (buttonTextElement) {
     textElement = buttonTextElement;
   } else if (text) {
-    textElement = /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Text, { color, children: text });
+    textElement = /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Text, { color, children: text });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(StyledCollapsible, { className, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(StyledCollapsibleButton, { onClick: handleClick, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(StyledCollapsible, { className, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(StyledCollapsibleButton, { onClick: handleClick, children: [
       textElement,
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(IconContainer2, { isOpen, hamburger, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Icon, { width: iconWidth, name: iconName }) })
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(IconContainer2, { isOpen, hamburger, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Icon, { width: iconWidth, name: iconName }) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CollapsingContainer, { isOpen, full, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(InnerPadding, { contentIndent, children }) })
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(CollapsingContainer, { isOpen, full, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(InnerPadding, { contentIndent, children }) })
   ] });
 }
-var StyledCollapsible = import_styled7.default.div`
+var StyledCollapsible = import_styled8.default.div`
   display: flex;
   flex-direction: column;
 `;
-var StyledCollapsibleButton = import_styled7.default.button`
+var StyledCollapsibleButton = import_styled8.default.button`
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -2097,7 +2222,7 @@ var StyledCollapsibleButton = import_styled7.default.button`
   ${standardBorderRadius(8)}
   padding: 0;
 `;
-var IconContainer2 = import_styled7.default.div`
+var IconContainer2 = import_styled8.default.div`
   ${(props) => {
   if (props.hamburger) {
     return;
@@ -2107,7 +2232,7 @@ var IconContainer2 = import_styled7.default.div`
   transition: transform 0.25s ease-out;
   width: 20px;
 `;
-var CollapsingContainer = import_styled7.default.div`
+var CollapsingContainer = import_styled8.default.div`
   overflow: scroll;
   opacity: 0;
   animation-duration: 0.4s;
@@ -2141,28 +2266,28 @@ var CollapsingContainer = import_styled7.default.div`
     }
   }
 `;
-var InnerPadding = import_styled7.default.div`
+var InnerPadding = import_styled8.default.div`
   padding: ${"4px" /* 3xs */} 0 ${"4px" /* 3xs */}
     ${(props) => props.contentIndent ? "16px" /* md */ : "0"};
   gap: ${"2px" /* 4xs */};
   display: flex;
   flex-direction: column;
 `;
-var Text = import_styled7.default.span`
+var Text = import_styled8.default.span`
   ${(props) => props.color ? `color: ${props.color};` : ""}
   line-height: inherit;
 `;
 
 // src/components/CommandKey.tsx
-var import_styled8 = __toESM(require("@emotion/styled"), 1);
-var import_jsx_runtime8 = require("@emotion/react/jsx-runtime");
+var import_styled9 = __toESM(require("@emotion/styled"), 1);
+var import_jsx_runtime10 = require("@emotion/react/jsx-runtime");
 var CommandKey = ({
   keyboardKey,
   size: size2,
   color,
   backgroundColor
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     StyledCommandKey,
     {
       color,
@@ -2172,7 +2297,7 @@ var CommandKey = ({
     }
   );
 };
-var StyledCommandKey = import_styled8.default.div`
+var StyledCommandKey = import_styled9.default.div`
   height: 24px;
   display: flex;
   align-items: center;
@@ -2188,18 +2313,18 @@ var StyledCommandKey = import_styled8.default.div`
 `;
 
 // src/components/CopyToClipboardButton.tsx
-var import_styled9 = __toESM(require("@emotion/styled"), 1);
+var import_styled10 = __toESM(require("@emotion/styled"), 1);
 var import_nanoid = require("nanoid");
-var import_react10 = require("react");
-var import_jsx_runtime9 = require("@emotion/react/jsx-runtime");
+var import_react13 = require("react");
+var import_jsx_runtime11 = require("@emotion/react/jsx-runtime");
 var CopyToClipboardButton = (props) => {
   var _a;
   const originalTooltipContent = props.tooltipContent || "Click to copy";
   const icon = props.icon || "Copy";
   const id = `copy-node-name-${(_a = props.id) != null ? _a : (0, import_nanoid.nanoid)()}`;
-  const [tooltipContent, setTooltipContent] = (0, import_react10.useState)(originalTooltipContent);
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+  const [tooltipContent, setTooltipContent] = (0, import_react13.useState)(originalTooltipContent);
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
       Button2,
       {
         type: "button",
@@ -2220,18 +2345,25 @@ var CopyToClipboardButton = (props) => {
         ml: props.ml,
         "data-tooltip-id": id,
         children: [
-          props.children ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Children, { children: props.children }) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Icon, { name: icon, width: props.isSm ? 12 : 16 })
+          props.children ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Children, { children: props.children }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Icon, { name: icon, width: props.isSm ? 12 : 16 })
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(StyledTooltip, { id, place: props.place || "right", variant: "dark", children: tooltipContent })
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      LightTooltip,
+      {
+        id,
+        place: props.place || "right",
+        content: tooltipContent
+      }
+    )
   ] });
 };
-var Children = import_styled9.default.span`
+var Children = import_styled10.default.span`
   margin-right: 4px;
 `;
-var Button2 = (0, import_styled9.default)(UnstyledButton)`
+var Button2 = (0, import_styled10.default)(UnstyledButton)`
   background: rgba(0, 0, 0, 0);
   vertical-align: middle;
   ${({ ml }) => ml ? `margin-left: ${ml}px` : ""};
@@ -2239,9 +2371,9 @@ var Button2 = (0, import_styled9.default)(UnstyledButton)`
 
 // src/components/CurrencyAmount.tsx
 var import_client = require("@apollo/client");
-var import_styled10 = __toESM(require("@emotion/styled"), 1);
+var import_styled11 = __toESM(require("@emotion/styled"), 1);
 var import_core = require("@lightsparkdev/core");
-var import_jsx_runtime10 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime12 = require("@emotion/react/jsx-runtime");
 function CurrencyAmount({
   amount,
   displayUnit = import_core.CurrencyUnit.SATOSHI,
@@ -2273,18 +2405,18 @@ function CurrencyAmount({
   if (showUnits) {
     formattedNumber += ` ${shorttext(unit, value)}`;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(StyledCurrencyAmount, { ml, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(StyledCurrencyAmount, { ml, children: [
     includeEstimatedIndicator && "Est. ",
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(CurrencyIcon, { unit }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(CurrencyIcon, { unit }),
     formattedNumber
   ] });
 }
 var CurrencyIcon = ({ unit }) => {
   switch (unit) {
     case import_core.CurrencyUnit.BITCOIN:
-      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Icon, { name: "BitcoinB", width: 8, verticalAlign: -2, mr: 2 });
+      return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Icon, { name: "BitcoinB", width: 8, verticalAlign: -2, mr: 2 });
     case import_core.CurrencyUnit.SATOSHI:
-      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Icon, { name: "Satoshi", width: 8, verticalAlign: -2, mr: 2 });
+      return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Icon, { name: "Satoshi", width: 8, verticalAlign: -2, mr: 2 });
     default:
       return null;
   }
@@ -2305,7 +2437,7 @@ var shorttext = (unit, value) => {
   }
   return unit;
 };
-var StyledCurrencyAmount = import_styled10.default.span`
+var StyledCurrencyAmount = import_styled11.default.span`
   color: inherit !important;
   white-space: nowrap;
   font-feature-settings:
@@ -2326,18 +2458,18 @@ CurrencyAmount.fragments = {
 };
 
 // src/components/LightboxImage.tsx
-var import_styled11 = __toESM(require("@emotion/styled"), 1);
-var import_react11 = require("react");
-var import_jsx_runtime11 = require("@emotion/react/jsx-runtime");
+var import_styled12 = __toESM(require("@emotion/styled"), 1);
+var import_react14 = require("react");
+var import_jsx_runtime13 = require("@emotion/react/jsx-runtime");
 var LightboxImage = ({ children }) => {
-  const [isOpen, setIsOpen] = (0, import_react11.useState)(false);
-  const [boundingRect, setBoundingRect] = (0, import_react11.useState)({
+  const [isOpen, setIsOpen] = (0, import_react14.useState)(false);
+  const [boundingRect, setBoundingRect] = (0, import_react14.useState)({
     x: 0,
     y: 0,
     width: 0,
     height: 0
   });
-  const imageRef = (0, import_react11.useRef)(null);
+  const imageRef = (0, import_react14.useRef)(null);
   const handleMouseUp = () => {
     setIsOpen(!isOpen);
   };
@@ -2353,12 +2485,12 @@ var LightboxImage = ({ children }) => {
       });
     }
   };
-  (0, import_react11.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     handleSetBoundingRect(imageRef);
   }, [imageRef]);
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DummyImage, { isOpen, boundingRect }),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DummyImage, { isOpen, boundingRect }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       StyledImage,
       {
         isOpen,
@@ -2369,13 +2501,13 @@ var LightboxImage = ({ children }) => {
         children
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Lightbox, { isOpen, onClick: handleMouseUp })
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Lightbox, { isOpen, onClick: handleMouseUp })
   ] });
 };
-var DummyImage = import_styled11.default.div`
+var DummyImage = import_styled12.default.div`
   ${(props) => props.isOpen ? `height: ${props.boundingRect.height}px; width: ${props.boundingRect.width}px;` : ``}
 `;
-var StyledImage = import_styled11.default.div`
+var StyledImage = import_styled12.default.div`
   display: flex;
   justify-content: start;
   align-items: center;
@@ -2423,7 +2555,7 @@ var StyledImage = import_styled11.default.div`
     }
   }
 `;
-var Lightbox = import_styled11.default.div`
+var Lightbox = import_styled12.default.div`
   transition: opacity 0.2s ease-out;
   position: fixed;
   opacity: 0;
@@ -2446,11 +2578,11 @@ var Lightbox = import_styled11.default.div`
 `;
 
 // src/components/LightsparkProvider.tsx
-var import_react14 = require("@emotion/react");
+var import_react17 = require("@emotion/react");
 
 // src/styles/global.tsx
-var import_react12 = require("@emotion/react");
-var import_react13 = require("react");
+var import_react15 = require("@emotion/react");
+var import_react16 = require("react");
 var import_react_tooltip2 = require("react-tooltip/dist/react-tooltip.css");
 var import_fonts = require("../static/fonts.css");
 
@@ -2460,8 +2592,8 @@ var cssVars = {
 };
 
 // src/styles/global.tsx
-var import_jsx_runtime12 = require("@emotion/react/jsx-runtime");
-var globalComponentStyles = ({ theme }) => import_react12.css`
+var import_jsx_runtime14 = require("@emotion/react/jsx-runtime");
+var globalComponentStyles = ({ theme }) => import_react15.css`
   @import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
 
   html {
@@ -2536,9 +2668,9 @@ var globalComponentStyles = ({ theme }) => import_react12.css`
   }
 `;
 function GlobalStyles() {
-  const theme = (0, import_react12.useTheme)();
+  const theme = (0, import_react15.useTheme)();
   const bg = useThemeBg();
-  (0, import_react13.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     const documentHeight = () => {
       const doc = document.documentElement;
       doc.style.setProperty(cssVars.docHeight, `${window.innerHeight}px`);
@@ -2547,12 +2679,14 @@ function GlobalStyles() {
     documentHeight();
     return () => window.removeEventListener("resize", documentHeight);
   }, []);
-  const globalStyles = import_react12.css`
+  const globalStyles = import_react15.css`
     ${globalComponentStyles({ theme })}
 
     :root {
       ${cssVars.docHeight}: 100vh;
       --rt-opacity: 1 !important;
+      --rt-transition-show-delay: 0.15s !important;
+      --rt-transition-closing-delay: 0.2s !important;
     }
 
     html {
@@ -2572,29 +2706,29 @@ function GlobalStyles() {
       height: 100%;
     }
   `;
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react12.Global, { styles: globalStyles });
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react15.Global, { styles: globalStyles });
 }
 
 // src/components/LightsparkProvider.tsx
-var import_jsx_runtime13 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime15 = require("@emotion/react/jsx-runtime");
 function LightsparkProvider({ children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react14.ThemeProvider, { theme: themes.light, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(GlobalStyles, {}),
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_react17.ThemeProvider, { theme: themes.light, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(GlobalStyles, {}),
     children
   ] });
 }
 
 // src/components/Modal.tsx
-var import_styled13 = __toESM(require("@emotion/styled"), 1);
-var import_react18 = __toESM(require("react"), 1);
-var import_react_dom = __toESM(require("react-dom"), 1);
+var import_styled14 = __toESM(require("@emotion/styled"), 1);
+var import_react21 = __toESM(require("react"), 1);
+var import_react_dom2 = __toESM(require("react-dom"), 1);
 
 // src/hooks/useLiveRef.tsx
-var import_react15 = require("react");
+var import_react18 = require("react");
 function useLiveRef() {
-  const [ready, setReady] = (0, import_react15.useState)(false);
-  const ref = (0, import_react15.useRef)(null);
-  const refCb = (0, import_react15.useCallback)((node) => {
+  const [ready, setReady] = (0, import_react18.useState)(false);
+  const ref = (0, import_react18.useRef)(null);
+  const refCb = (0, import_react18.useCallback)((node) => {
     if (node !== null) {
       ref.current = node;
       setReady(true);
@@ -2604,8 +2738,8 @@ function useLiveRef() {
 }
 
 // src/utils/toReactNodes.tsx
-var import_react16 = require("react");
-var import_jsx_runtime14 = require("@emotion/react/jsx-runtime");
+var import_react19 = require("react");
+var import_jsx_runtime16 = require("@emotion/react/jsx-runtime");
 var ToReactNodesTypes = {
   Link: "link"
 };
@@ -2613,22 +2747,22 @@ function toReactNodes(toReactNodesArg) {
   const toReactNodesArray = Array.isArray(toReactNodesArg) ? toReactNodesArg : [toReactNodesArg];
   const reactNodes = toReactNodesArray.map((node, i) => {
     if (typeof node === "string") {
-      return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react16.Fragment, { children: node.split("\n").map((str, j, strArr) => /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_react16.Fragment, { children: [
+      return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react19.Fragment, { children: node.split("\n").map((str, j, strArr) => /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_react19.Fragment, { children: [
         str,
-        j < strArr.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("br", {})
+        j < strArr.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("br", {})
       ] }, `str-${i}-break-${j}`)) }, `str-${i}`);
     } else if (node.type === ToReactNodesTypes.Link) {
-      return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Link, { to: node.to, children: node.text }, `link-${i}`);
+      return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Link, { to: node.to, children: node.text }, `link-${i}`);
     }
     return null;
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react16.Fragment, { children: reactNodes });
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react19.Fragment, { children: reactNodes });
 }
 
 // src/components/ProgressBar.tsx
-var import_styled12 = __toESM(require("@emotion/styled"), 1);
-var import_react17 = require("react");
-var import_jsx_runtime15 = require("@emotion/react/jsx-runtime");
+var import_styled13 = __toESM(require("@emotion/styled"), 1);
+var import_react20 = require("react");
+var import_jsx_runtime17 = require("@emotion/react/jsx-runtime");
 var defaultProps2 = {
   isSm: false,
   stepDuration: 0.5
@@ -2639,8 +2773,8 @@ function ProgressBar({
   isSm = defaultProps2.isSm,
   stepDuration = defaultProps2.stepDuration
 }) {
-  const [percentage, setPercentage] = (0, import_react17.useState)(5);
-  (0, import_react17.useEffect)(() => {
+  const [percentage, setPercentage] = (0, import_react20.useState)(5);
+  (0, import_react20.useEffect)(() => {
     if (progressPercentage !== void 0) {
       setPercentage(progressPercentage);
     } else {
@@ -2649,7 +2783,7 @@ function ProgressBar({
       }, 0);
     }
   }, [progressPercentage]);
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ProgressBarContainer, { isSm, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Bar, { isSm, percentage, stepDuration, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ProgressBarContainer, { isSm, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Bar, { isSm, percentage, stepDuration, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     BarBg,
     {
       background,
@@ -2660,7 +2794,7 @@ function ProgressBar({
   ) }) });
 }
 ProgressBar.defaultProps = defaultProps2;
-var ProgressBarContainer = import_styled12.default.div`
+var ProgressBarContainer = import_styled13.default.div`
   ${standardBorderRadius(16)}
   background-color: ${({ theme }) => themeOr(theme.c05Neutral, theme.c1Neutral)({ theme })};
   box-sizing: border-box;
@@ -2670,7 +2804,7 @@ var ProgressBarContainer = import_styled12.default.div`
   width: 100%;
   position: relative;
 `;
-var BarBg = import_styled12.default.div`
+var BarBg = import_styled13.default.div`
   ${standardBorderRadius(16)}
   width: ${({ percentage }) => 100 / percentage * 100}%;
   height: 100%;
@@ -2684,7 +2818,7 @@ var BarBg = import_styled12.default.div`
     #3f2e7e 115.32%
   )`};
 `;
-var Bar = import_styled12.default.div`
+var Bar = import_styled13.default.div`
   ${standardBorderRadius(16)}
   overflow: hidden;
   box-sizing: border-box;
@@ -2696,7 +2830,7 @@ var Bar = import_styled12.default.div`
 `;
 
 // src/components/Modal.tsx
-var import_jsx_runtime16 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime18 = require("@emotion/react/jsx-runtime");
 function Modal({
   visible,
   title,
@@ -2718,24 +2852,24 @@ function Modal({
   width = 460,
   progressBar
 }) {
-  const visibleChangedRef = (0, import_react18.useRef)(false);
-  const nodeRef = (0, import_react18.useRef)(null);
+  const visibleChangedRef = (0, import_react21.useRef)(false);
+  const nodeRef = (0, import_react21.useRef)(null);
   const [defaultFirstFocusRef, defaultFirstFocusRefCb] = useLiveRef();
   const ref = firstFocusRef || defaultFirstFocusRef;
-  const [nodeReady, setNodeReady] = import_react18.default.useState(false);
-  const overlayRef = (0, import_react18.useRef)(null);
-  const prevFocusedElement = (0, import_react18.useRef)();
-  const modalContainerRef = (0, import_react18.useRef)(null);
+  const [nodeReady, setNodeReady] = import_react21.default.useState(false);
+  const overlayRef = (0, import_react21.useRef)(null);
+  const prevFocusedElement = (0, import_react21.useRef)();
+  const modalContainerRef = (0, import_react21.useRef)(null);
   const bp2 = useBreakpoints();
   const isSm = bp2.current("sm" /* sm */);
   const formattedDescription = description ? toReactNodes(description) : null;
-  (0, import_react18.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     if (visible !== visibleChangedRef.current) {
       visibleChangedRef.current = visible;
     }
   }, [visible]);
   const visibleChanged = visible !== visibleChangedRef.current;
-  (0, import_react18.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     prevFocusedElement.current = document.activeElement;
     if (!nodeRef.current) {
       nodeRef.current = document.createElement("div");
@@ -2749,7 +2883,7 @@ function Modal({
       }
     };
   }, []);
-  (0, import_react18.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     const handleOutsideClick = (event) => {
       if (visible && overlayRef.current && event.target && overlayRef.current.contains(event.target) && !nonDismissable) {
         onClose();
@@ -2786,7 +2920,7 @@ function Modal({
       }
     };
   }, [onClose, visible, nonDismissable]);
-  (0, import_react18.useLayoutEffect)(() => {
+  (0, import_react21.useLayoutEffect)(() => {
     if (visible) {
       if (visibleChanged) {
         prevFocusedElement.current = document.activeElement;
@@ -2815,9 +2949,9 @@ function Modal({
       onClose();
     }
   }
-  const modalContent = /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_react18.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ModalOverlay, { ref: overlayRef }),
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  const modalContent = /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_react21.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ModalOverlay, { ref: overlayRef }),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
       ModalContainer,
       {
         "aria-modal": true,
@@ -2825,22 +2959,22 @@ function Modal({
         tabIndex: -1,
         role: "dialog",
         ref: modalContainerRef,
-        children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(ModalContent, { width, ghost, children: [
-          !firstFocusRef && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(DefaultFocusTarget, { ref: defaultFirstFocusRefCb }),
-          !(nonDismissable || ghost) && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(CloseButton, { onClick: onClickCloseButton, type: "button", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Icon, { name: "Close", width: 9 }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(ModalContentInner, { ghost, children: [
-            progressBar ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { css: { marginBottom: "20px" }, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(ModalContent, { width, ghost, children: [
+          !firstFocusRef && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(DefaultFocusTarget, { ref: defaultFirstFocusRefCb }),
+          !(nonDismissable || ghost) && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(CloseButton, { onClick: onClickCloseButton, type: "button", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Icon, { name: "Close", width: 9 }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(ModalContentInner, { ghost, children: [
+            progressBar ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { css: { marginBottom: "20px" }, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
               ProgressBar,
               {
                 progressPercentage: progressBar.progressPercentage,
                 isSm: progressBar.isSm
               }
             ) }) : null,
-            title ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("h4", { children: title }) : null,
-            formattedDescription ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Description, { children: formattedDescription }) : null,
-            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { children }),
-            onSubmit ? /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(ModalButtonRow, { children: [
-              !isSm && !cancelHidden && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+            title ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("h4", { children: title }) : null,
+            formattedDescription ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Description, { children: formattedDescription }) : null,
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { children }),
+            onSubmit ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(ModalButtonRow, { children: [
+              !isSm && !cancelHidden && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
                 Button,
                 {
                   disabled: cancelDisabled,
@@ -2848,7 +2982,7 @@ function Modal({
                   text: cancelText != null ? cancelText : "Cancel"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
                 Button,
                 {
                   disabled: submitDisabled,
@@ -2858,25 +2992,25 @@ function Modal({
                   type: "submit"
                 }
               ),
-              isSm && !cancelHidden && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Button, { onClick: onClose, text: "Cancel" })
+              isSm && !cancelHidden && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Button, { onClick: onClose, text: "Cancel" })
             ] }) : null
           ] })
         ] })
       }
     )
   ] });
-  return visible && nodeReady && nodeRef.current ? import_react_dom.default.createPortal(
-    onSubmit ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("form", { onSubmit: onSubmitForm, children: modalContent }) : modalContent,
+  return visible && nodeReady && nodeRef.current ? import_react_dom2.default.createPortal(
+    onSubmit ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("form", { onSubmit: onSubmitForm, children: modalContent }) : modalContent,
     nodeRef.current
   ) : null;
 }
-var DefaultFocusTarget = (0, import_styled13.default)(UnstyledButton)`
+var DefaultFocusTarget = (0, import_styled14.default)(UnstyledButton)`
   position: absolute;
   top: -30px;
   width: 0;
   height: 0;
 `;
-var ModalOverlay = import_styled13.default.div`
+var ModalOverlay = import_styled14.default.div`
   position: fixed;
   bottom: 0;
   left: 0;
@@ -2886,7 +3020,7 @@ var ModalOverlay = import_styled13.default.div`
   background: rgba(0, 0, 0, 0.5);
   backdrop-filter: blur(2px);
 `;
-var ModalContainer = import_styled13.default.div`
+var ModalContainer = import_styled14.default.div`
   pointer-events: none;
   position: fixed;
   top: 0;
@@ -2904,14 +3038,14 @@ var ModalContainer = import_styled13.default.div`
   padding-top: ${standardContentInsetSmPx}px;
 `;
 var contentTopMarginPx = 24;
-var Description = import_styled13.default.div`
+var Description = import_styled14.default.div`
   color: ${({ theme }) => theme.mcNeutral};
   margin-top: 4px;
   & + * {
     margin-top: ${contentTopMarginPx}px;
   }
 `;
-var ModalButtonRow = import_styled13.default.div`
+var ModalButtonRow = import_styled14.default.div`
   margin-top: 32px;
   ${bp.minSm(`display: flex;`)}
 
@@ -2931,7 +3065,7 @@ var ModalButtonRow = import_styled13.default.div`
     `)}
   }
 `;
-var ModalContent = import_styled13.default.div`
+var ModalContent = import_styled14.default.div`
   ${overflowAutoWithoutScrollbars}
   ${smContentInset}
   ${standardBorderRadius(16)}
@@ -2953,12 +3087,12 @@ var ModalContent = import_styled13.default.div`
     }
   }
 `;
-var CloseButton = (0, import_styled13.default)(UnstyledButton)`
+var CloseButton = (0, import_styled14.default)(UnstyledButton)`
   ${standardFocusOutline}
   width: 24px;
   height: 24px;
 `;
-var ModalContentInner = import_styled13.default.div`
+var ModalContentInner = import_styled14.default.div`
   ${(props) => props.ghost ? "" : "padding: 32px 24px 0;"}
   ${(props) => props.ghost ? "" : `${bp.sm(`
     padding-left: 10px;
@@ -2966,12 +3100,156 @@ var ModalContentInner = import_styled13.default.div`
   `)}`}
 `;
 
+// src/components/Pill.tsx
+var import_styled15 = __toESM(require("@emotion/styled"), 1);
+var import_react22 = require("react");
+var import_jsx_runtime19 = require("@emotion/react/jsx-runtime");
+function Pill({
+  text,
+  onDeleteMouseDown,
+  onDeleteMouseUp,
+  onDeleteFromKeyboard,
+  icon,
+  loading = false,
+  cursor = "text",
+  isEditing = false,
+  onChangeTextInput = () => {
+  },
+  onFocusTextInput = () => {
+  },
+  onClickPillBody = () => {
+  },
+  onBlurTextInput = () => {
+  }
+}) {
+  const textInputRef = (0, import_react22.useRef)(null);
+  (0, import_react22.useEffect)(() => {
+    if (isEditing && textInputRef.current) {
+      textInputRef.current.focus();
+    }
+  }, [isEditing]);
+  function handleOnDeleteMouseDown(event) {
+    if (onDeleteMouseDown) {
+      event.stopPropagation();
+      onDeleteMouseDown(event);
+    }
+  }
+  function handleOnDeleteKeyDown(event) {
+    if (onDeleteFromKeyboard) {
+      event.stopPropagation();
+      if (event.key === "Enter") {
+        onDeleteFromKeyboard();
+      }
+    }
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+    StyledPill,
+    {
+      hasIcon: Boolean(icon || loading || onDeleteMouseDown),
+      cursor,
+      onClick: (event) => {
+        if (onClickPillBody) {
+          event.stopPropagation();
+          onClickPillBody();
+        }
+      },
+      children: [
+        isEditing ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+          PillInput,
+          {
+            value: text,
+            onChange: (event) => onChangeTextInput(event.target.value),
+            onFocus: onFocusTextInput,
+            onBlur: onBlurTextInput,
+            ref: textInputRef
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(PillText, { children: text }),
+        (icon || loading || onDeleteMouseDown) && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+          PillIconContainer,
+          {
+            hasIconInset: Boolean(icon && !loading && !onDeleteMouseDown),
+            children: [
+              loading && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Loading, { size: 16.1, center: false, ml: 5 }),
+              !loading && onDeleteMouseDown && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                UnstyledButton,
+                {
+                  onMouseDown: handleOnDeleteMouseDown,
+                  onKeyDown: handleOnDeleteKeyDown,
+                  type: "button",
+                  css: {
+                    display: "flex",
+                    padding: "10px",
+                    marginRight: "-10px"
+                  },
+                  children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Icon, { name: "DeleteIcon", width: 16.1 })
+                }
+              ),
+              !loading && icon && !onDeleteMouseDown && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Icon, { name: icon, width: 16.1, color: colors.white })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+var PillText = import_styled15.default.div`
+  /* For mobile ensure empty values don't prevent div from having height: */
+  height: 1.2rem;
+  min-width: 100px;
+  max-width: 210px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  font-weight: 600;
+`;
+var StyledPill = import_styled15.default.div`
+  * + & {
+    margin-top: 16px;
+  }
+  background-color: ${({ theme }) => theme.c05Neutral};
+  color: ${({ theme }) => theme.text};
+  padding: 12px 18px;
+  ${({ hasIcon }) => hasIcon && `padding-right: 48px;`}
+  border-radius: 2em;
+  display: flex;
+  align-items: center;
+  cursor: ${({ cursor }) => cursor};
+  position: relative;
+`;
+var PillIconContainer = import_styled15.default.div`
+  ${flexCenter}
+  ${({ hasIconInset }) => hasIconInset ? `
+    background-color: ${colors.blue43};
+    padding: 8px;
+    right: 4px;
+    top: 3.5px;` : `right: 18px;`}
+  border-radius: 50%;
+  margin-left: 12px;
+  position: absolute;
+`;
+var PillInput = import_styled15.default.input`
+  background-color: transparent;
+  border: none;
+  outline: none;
+  color: ${({ theme }) => theme.text};
+  font-weight: 600;
+  font-size: 1rem;
+  padding: 0;
+  margin: 0;
+  width: 100%;
+  max-width: 210px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  font-family: ${({ theme }) => theme.typography.fontFamilies.main};
+`;
+
 // src/components/SecretContainer.tsx
-var import_styled14 = __toESM(require("@emotion/styled"), 1);
-var import_jsx_runtime17 = require("@emotion/react/jsx-runtime");
+var import_styled16 = __toESM(require("@emotion/styled"), 1);
+var import_jsx_runtime20 = require("@emotion/react/jsx-runtime");
 function SecretContainer(props) {
-  return props.secret ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(StyledSecretContainer, { hasSecret: true, success: props.success, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  return props.secret ? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(StyledSecretContainer, { hasSecret: true, success: props.success, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
       "span",
       {
         style: {
@@ -2983,10 +3261,10 @@ function SecretContainer(props) {
         children: props.secret
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(CopyToClipboardButton, { value: props.secret, isSm: true, ml: 4 })
-  ] }) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(StyledSecretContainer, { hasSecret: false, children: "There are no tokens associated with this account" });
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(CopyToClipboardButton, { value: props.secret, isSm: true, ml: 4 })
+  ] }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(StyledSecretContainer, { hasSecret: false, children: "There are no tokens associated with this account" });
 }
-var StyledSecretContainer = import_styled14.default.div`
+var StyledSecretContainer = import_styled16.default.div`
   background-color: ${({ theme, hasSecret, success }) => hasSecret ? success ? theme.success : theme.c05Neutral : theme.bg};
   ${standardBorderRadius(8)}
   padding: 18px 20px;
@@ -2998,14 +3276,14 @@ var StyledSecretContainer = import_styled14.default.div`
 `;
 
 // src/components/TextIconAligner.tsx
-var import_jsx_runtime18 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime21 = require("@emotion/react/jsx-runtime");
 function TextIconAligner({
   text,
   rightIcon,
   leftIcon,
   onClick
 }) {
-  const leftIconNode = leftIcon ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  const leftIconNode = leftIcon ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     Icon,
     {
       name: leftIcon.name,
@@ -3014,7 +3292,7 @@ function TextIconAligner({
       color: leftIcon.color
     }
   ) : null;
-  const rightIconNode = rightIcon ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  const rightIconNode = rightIcon ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     Icon,
     {
       name: rightIcon.name,
@@ -3023,7 +3301,7 @@ function TextIconAligner({
       color: rightIcon.color
     }
   ) : null;
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
     "span",
     {
       css: {
@@ -3042,6 +3320,7 @@ function TextIconAligner({
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  Badge,
   Button,
   ButtonRow,
   ButtonRowContainer,
@@ -3053,11 +3332,13 @@ function TextIconAligner({
   CurrencyIcon,
   Icon,
   IconContainer,
+  LightTooltip,
   LightboxImage,
   LightsparkProvider,
   Loading,
   LoadingWrapper,
   Modal,
+  Pill,
   ProgressBar,
   SecretContainer,
   StyledButton,