@lightsparkdev/ui 1.0.1 → 1.0.2

package/dist/components/index.cjs

@@ -104,9 +104,11 @@ __export(components_exports, {
   Drawer: () => Drawer,
   Dropdown: () => Dropdown,
   FileInput: () => FileInput,
+  Flex: () => Flex,
   GradientCardHeader: () => GradientCardHeader,
   Icon: () => Icon,
   IconContainer: () => IconContainer,
+  IconWithCircleBackground: () => IconWithCircleBackground,
   InfoIconTooltip: () => InfoIconTooltip,
   InlineCode: () => InlineCode,
   LightboxImage: () => LightboxImage,
@@ -597,8 +599,8 @@ function ArrowUpRightCircleFill() {
       children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
         "path",
         {
-          "fill-rule": "evenodd",
-          "clip-rule": "evenodd",
+          fillRule: "evenodd",
+          clipRule: "evenodd",
           d: "M20 1.25C30.3553 1.25 38.75 9.64468 38.75 20C38.75 30.3553 30.3553 38.75 20 38.75C9.64468 38.75 1.25 30.3553 1.25 20C1.25 9.64468 9.64468 1.25 20 1.25ZM15.4392 12.4122C14.8869 12.4122 14.4392 12.8599 14.4392 13.4122C14.4392 13.9644 14.8869 14.4122 15.4392 14.4122H24.1736L12.7051 25.8807C12.3146 26.2713 12.3146 26.9044 12.7051 27.2949C13.0956 27.6855 13.7288 27.6855 14.1193 27.2949L25.5879 15.8263V24.5608C25.5879 25.1131 26.0356 25.5608 26.5879 25.5608C27.1402 25.5608 27.5879 25.1131 27.5879 24.5608V13.4122C27.5879 12.8599 27.1402 12.4122 26.5879 12.4122H15.4392Z",
           fill: "black"
         }
@@ -1499,8 +1501,8 @@ function Figma() {
       children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
         "path",
         {
-          "fill-rule": "evenodd",
-          "clip-rule": "evenodd",
+          fillRule: "evenodd",
+          clipRule: "evenodd",
           d: "M8.01074 9.04831C8.01074 5.43178 10.9425 2.5 14.5591 2.5L25.7952 2.5C29.4118 2.5 32.3435 5.43178 32.3435 9.04831C32.3435 11.3383 31.1681 13.3537 29.3876 14.5242C31.1681 15.6947 32.3435 17.7102 32.3435 20.0001C32.3435 23.6167 29.4118 26.5485 25.7952 26.5485H25.653C23.9575 26.5485 22.4126 25.9041 21.2496 24.847V30.8806C21.2496 34.5453 18.2412 37.5 14.5944 37.5C10.9868 37.5 8.01074 34.5772 8.01074 30.9517C8.01074 28.6617 9.18619 26.6463 10.9666 25.476C9.18618 24.3055 8.01074 22.2901 8.01074 20.0001C8.01074 17.7102 9.1862 15.6947 10.9667 14.5242C9.18621 13.3537 8.01074 11.3383 8.01074 9.04831ZM14.5591 13.4517C12.1272 13.4517 10.1557 11.4802 10.1557 9.04831C10.1557 6.61641 12.1272 4.64497 14.5591 4.64497L19.1047 4.64497V13.4517H14.5591ZM19.1047 15.5966H14.5591C12.1272 15.5966 10.1557 17.5682 10.1557 20.0001C10.1557 22.4321 12.1272 24.4035 14.5591 24.4035H19.1047V15.5966ZM19.1047 26.5485H14.5591C12.1271 26.5485 10.1557 28.5198 10.1557 30.9517C10.1557 33.3746 12.1535 35.355 14.5944 35.355C17.0746 35.355 19.1047 33.3428 19.1047 30.8806V26.5485ZM25.7952 15.5966L25.653 15.5968C23.2211 15.5968 21.2496 17.5682 21.2496 20.0001C21.2496 22.4321 23.2211 24.4035 25.653 24.4035H25.7952C28.2271 24.4035 30.1986 22.4321 30.1986 20.0001C30.1986 17.5682 28.227 15.5967 25.7952 15.5966C25.7953 15.5966 25.7952 15.5966 25.7952 15.5966ZM25.7952 14.5242V13.4517H21.2496V4.64497H25.7952C28.2271 4.64497 30.1986 6.61641 30.1986 9.04831C30.1986 11.4802 28.2271 13.4517 25.7952 13.4517",
           fill: "black"
         }
@@ -4172,7 +4174,7 @@ var colors = baseColors;
 function isColorKey(key) {
   return key in colors;
 }
-function hcNeutralFromBg(bgHex, defaultHex, altHex) {
+function hcNeutralFromBg(bgHex, defaultHex = colors.black, altHex = colors.white) {
   const bgRGB = hexToRGB(bgHex);
   const hcRGB = hexToRGB(defaultHex);
   if (!bgRGB || !hcRGB)
@@ -4213,7 +4215,8 @@ var import_deepmerge = __toESM(require("deepmerge"), 1);
 // src/styles/buttons.tsx
 var buttonsThemeBase = {
   defaultSize: "Small",
-  defaultTypography: "Body Strong",
+  defaultTypographyType: "Body Strong",
+  defaultColor: "text",
   defaultBorderRadius: 32,
   defaultBorderWidth: 1,
   defaultBackgroundColor: "bg",
@@ -4237,6 +4240,7 @@ var buttonsThemeBase = {
 var defaultButtonsTheme = __spreadProps(__spreadValues({}, buttonsThemeBase), {
   kinds: {
     primary: {
+      defaultColor: "bg",
       defaultBorderWidth: 0,
       defaultBackgroundColor: "c9Neutral",
       defaultBorderColor: "c9Neutral",
@@ -4264,7 +4268,20 @@ var defaultButtonsTheme = __spreadProps(__spreadValues({}, buttonsThemeBase), {
       defaultHoverBorderColor: ["gray90", "gray20"]
     },
     blue39: {
-      defaultBorderColor: "blue39"
+      defaultBorderColor: "blue39",
+      defaultColor: "gray98"
+    },
+    blue43: {
+      defaultColor: "white"
+    },
+    green33: {
+      defaultColor: "white"
+    },
+    purple55: {
+      defaultColor: "white"
+    },
+    danger: {
+      defaultColor: "white"
     }
   }
 });
@@ -7638,28 +7655,30 @@ var bridgeBaseSettings = {
     code: "Monaco"
   }),
   buttons: (0, import_deepmerge.default)(buttonsThemeBase, {
-    defaultTypography: "Title",
+    defaultTypographyType: "Title",
     defaultSize: "Medium",
     defaultBorderRadius: 8,
     defaultBorderWidth: 0,
+    defaultPaddingsY: {
+      ExtraSmall: 14,
+      Small: 14,
+      Schmedium: 14,
+      Medium: 14,
+      Mlarge: 14,
+      Large: 14
+    },
     kinds: {
       primary: {
+        defaultColor: "bg",
         defaultBackgroundColor: "blue39",
         defaultHoverBackgroundColor: "blue37"
       },
       ghost: {
+        defaultColor: "secondary",
         defaultBackgroundColor: "transparent",
         defaultBorderWidth: 0,
         defaultHoverBackgroundColor: "transparent",
-        defaultHoverBorderColor: "transparent",
-        defaultPaddingsY: {
-          ExtraSmall: 0,
-          Small: 0,
-          Schmedium: 0,
-          Medium: 0,
-          Mlarge: 0,
-          Large: 0
-        }
+        defaultHoverBorderColor: "transparent"
       },
       secondary: {
         defaultBackgroundColor: "transparent",
@@ -8966,22 +8985,6 @@ var UnstyledButton = import_styled16.default.button`
 
 // src/components/Button.tsx
 var import_jsx_runtime134 = require("@emotion/react/jsx-runtime");
-function getDefaultTextColor({ kind }) {
-  switch (kind) {
-    case "blue43":
-    case "green33":
-    case "purple55":
-    case "danger":
-      return "white";
-    case "blue39":
-      return "gray98";
-    case "primary": {
-      return "bg";
-    }
-    default:
-      return "text";
-  }
-}
 var roundPaddingsX = {
   [TokenSize.ExtraSmall]: 10,
   [TokenSize.Small]: 10,
@@ -9034,12 +9037,14 @@ function resolveProps(props, theme) {
     kind = "secondary",
     size: sizeProp,
     paddingY: paddingYType = "regular",
-    borderRadius
+    borderRadius,
+    typography: typographyProp
   } = _a, rest = __objRest(_a, [
     "kind",
     "size",
     "paddingY",
-    "borderRadius"
+    "borderRadius",
+    "typography"
   ]);
   const size2 = resolveProp(sizeProp, kind, "defaultSize", theme);
   const defaultPaddingsY = resolveProp(null, kind, "defaultPaddingsY", theme);
@@ -9065,9 +9070,15 @@ function resolveProps(props, theme) {
     kind,
     "defaultHoverBorderColor"
   );
+  const typography = {
+    type: (typographyProp == null ? void 0 : typographyProp.type) || resolveProp(null, kind, "defaultTypographyType", theme),
+    color: (typographyProp == null ? void 0 : typographyProp.color) || resolveProp(null, kind, "defaultColor", theme),
+    size: size2
+  };
   return __spreadProps(__spreadValues({}, rest), {
     kind,
     size: size2,
+    typography,
     paddingY: typeof defaultPaddingY === "number" ? defaultPaddingY : defaultPaddingY[paddingYType],
     borderRadius: resolveProp(borderRadius, kind, "defaultBorderRadius", theme),
     backgroundColor: backgroundColor2,
@@ -9111,12 +9122,6 @@ function Button(props) {
     borderRadius
   } = resolveProps(props, theme);
   const tooltipId = (0, import_react29.useRef)((0, import_lodash_es5.uniqueId)());
-  const fontColor = (typography == null ? void 0 : typography.color) || getDefaultTextColor({ kind, theme });
-  const buttonTypography = {
-    type: (typography == null ? void 0 : typography.type) || theme.buttons.defaultTypography,
-    size: size2,
-    color: fontColor
-  };
   const iconSize = size2 === "ExtraSmall" ? 12 : 16;
   let currentIcon = null;
   if (loading) {
@@ -9125,7 +9130,7 @@ function Button(props) {
       {
         iconSide,
         text,
-        typography: buttonTypography,
+        typography,
         kind,
         children: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(Loading, { size: iconSize, center: false })
       }
@@ -9136,9 +9141,9 @@ function Button(props) {
       {
         iconSide,
         text,
-        typography: buttonTypography,
+        typography,
         kind,
-        children: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(Icon, { name: icon, width: iconSize, color: fontColor })
+        children: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(Icon, { name: icon, width: iconSize, color: typography.color })
       }
     );
   }
@@ -9161,10 +9166,10 @@ function Button(props) {
                 textOverflow: "ellipsis",
                 overflow: "hidden"
               },
-              children: renderTypography(buttonTypography.type, {
+              children: renderTypography(typography.type, {
                 content: text,
-                color: buttonTypography.color,
-                size: buttonTypography.size
+                color: typography.color,
+                size: size2
               })
             }
           ),
@@ -9179,7 +9184,7 @@ function Button(props) {
     id,
     kind,
     type,
-    typography: buttonTypography,
+    typography,
     onClick,
     fullWidth,
     iconSide,
@@ -12112,39 +12117,53 @@ var StyledFileInput = import_styled34.default.div`
   }
 `;
 
+// src/components/Flex.tsx
+var import_styled35 = __toESM(require("@emotion/styled"), 1);
+var import_jsx_runtime154 = require("@emotion/react/jsx-runtime");
+function Flex({ center = false, children, as = "div" }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime154.jsx)(StyledFlex, { center, as, children });
+}
+var StyledFlex = import_styled35.default.div`
+  display: flex;
+  ${({ center }) => center && `
+    justify-content: center;
+    align-items: center;
+  `}
+`;
+
 // src/components/GradientCardHeader.tsx
-var import_styled36 = __toESM(require("@emotion/styled"), 1);
+var import_styled37 = __toESM(require("@emotion/styled"), 1);
 
 // src/components/StatusIndicator.tsx
-var import_styled35 = __toESM(require("@emotion/styled"), 1);
-var import_jsx_runtime154 = require("@emotion/react/jsx-runtime");
+var import_styled36 = __toESM(require("@emotion/styled"), 1);
+var import_jsx_runtime155 = require("@emotion/react/jsx-runtime");
 function StatusIndicator({
   color = "success",
   text,
   size: size2 = 12,
   fontWeight = 700
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime154.jsx)(StyledStatusIndicator, { color, size: size2, fontWeight, children: text });
+  return /* @__PURE__ */ (0, import_jsx_runtime155.jsx)(StyledStatusIndicator, { color, size: size2, fontWeight, children: text });
 }
-var StyledStatusIndicator = import_styled35.default.div`
+var StyledStatusIndicator = import_styled36.default.div`
   color: ${({ theme, color }) => theme[color]};
   font-size: ${({ size: size2 }) => pxToRems(size2)};
   font-weight: ${({ fontWeight }) => fontWeight};
 `;
 
 // src/components/GradientCardHeader.tsx
-var import_jsx_runtime155 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime156 = require("@emotion/react/jsx-runtime");
 function GradientCardHeader(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime155.jsxs)(CardHeaderWrapper, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime155.jsx)(Gradients, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime155.jsxs)("div", { children: [
-      props.status && /* @__PURE__ */ (0, import_jsx_runtime155.jsx)(StatusIndicator, __spreadValues({}, props.status)),
-      /* @__PURE__ */ (0, import_jsx_runtime155.jsx)(CardHeaderTitle, { children: props.title })
+  return /* @__PURE__ */ (0, import_jsx_runtime156.jsxs)(CardHeaderWrapper, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime156.jsx)(Gradients, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime156.jsxs)("div", { children: [
+      props.status && /* @__PURE__ */ (0, import_jsx_runtime156.jsx)(StatusIndicator, __spreadValues({}, props.status)),
+      /* @__PURE__ */ (0, import_jsx_runtime156.jsx)(CardHeaderTitle, { children: props.title })
     ] }),
     props.children
   ] });
 }
-var CardHeaderWrapper = import_styled36.default.div`
+var CardHeaderWrapper = import_styled37.default.div`
   position: relative;
   display: flex;
   flex-direction: column;
@@ -12154,7 +12173,7 @@ var CardHeaderWrapper = import_styled36.default.div`
   color: white;
   height: 264px;
 `;
-var CardHeaderTitle = import_styled36.default.h3`
+var CardHeaderTitle = import_styled37.default.h3`
   font-size: 21px;
   font-weight: 800;
   color: white;
@@ -12163,12 +12182,12 @@ var CardHeaderTitle = import_styled36.default.h3`
   position: relative;
 `;
 var Gradients = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime155.jsxs)("div", { style: { position: "absolute", top: 0, left: 0, right: 0, bottom: 0 }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime155.jsx)(BackgroundGradients, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime155.jsx)(AccentGradients, {})
+  return /* @__PURE__ */ (0, import_jsx_runtime156.jsxs)("div", { style: { position: "absolute", top: 0, left: 0, right: 0, bottom: 0 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime156.jsx)(BackgroundGradients, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime156.jsx)(AccentGradients, {})
   ] });
 };
-var BackgroundGradients = import_styled36.default.div`
+var BackgroundGradients = import_styled37.default.div`
   &:before,
   &:after {
     content: "";
@@ -12203,7 +12222,7 @@ var BackgroundGradients = import_styled36.default.div`
     );
   }
 `;
-var AccentGradients = import_styled36.default.div`
+var AccentGradients = import_styled37.default.div`
   position: absolute;
   top: 0;
   left: 0;
@@ -12243,32 +12262,46 @@ var AccentGradients = import_styled36.default.div`
   }
 `;
 
+// src/components/IconWithCircleBackground.tsx
+var import_styled38 = __toESM(require("@emotion/styled"), 1);
+var import_jsx_runtime157 = require("@emotion/react/jsx-runtime");
+function IconWithCircleBackground({
+  iconName = "WarningSign"
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime157.jsx)(Flex, { center: true, children: /* @__PURE__ */ (0, import_jsx_runtime157.jsx)(StyledIconWithCircleBackground, { children: /* @__PURE__ */ (0, import_jsx_runtime157.jsx)(Icon, { name: iconName, width: 40, color: "grayBlue9" }) }) });
+}
+var StyledIconWithCircleBackground = import_styled38.default.div`
+  background-color: ${({ theme }) => getColor(theme, "grayBlue94")};
+  border-radius: 50%;
+  padding: 20px;
+`;
+
 // src/components/InfoIconTooltip.tsx
 var import_react46 = require("react");
-var import_jsx_runtime156 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime158 = require("@emotion/react/jsx-runtime");
 function InfoIconTooltip({
   id,
   content,
   verticalAlign = "middle"
 }) {
   const contentNodes = toReactNodes(content);
-  return /* @__PURE__ */ (0, import_jsx_runtime156.jsxs)(import_react46.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime156.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime158.jsxs)(import_react46.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime158.jsx)(
       "div",
       {
         "data-tooltip-id": id,
         style: { display: "inline-flex", alignItems: "center", verticalAlign },
-        children: /* @__PURE__ */ (0, import_jsx_runtime156.jsx)(Icon, { name: "Info", width: 12, ml: 4 })
+        children: /* @__PURE__ */ (0, import_jsx_runtime158.jsx)(Icon, { name: "Info", width: 12, ml: 4 })
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime156.jsx)(Tooltip, { id, render: () => contentNodes, clickable: true })
+    /* @__PURE__ */ (0, import_jsx_runtime158.jsx)(Tooltip, { id, render: () => contentNodes, clickable: true })
   ] });
 }
 
 // src/components/LightboxImage.tsx
-var import_styled37 = __toESM(require("@emotion/styled"), 1);
+var import_styled39 = __toESM(require("@emotion/styled"), 1);
 var import_react47 = require("react");
-var import_jsx_runtime157 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime159 = require("@emotion/react/jsx-runtime");
 var LightboxImage = ({ children }) => {
   const [isOpen, setIsOpen] = (0, import_react47.useState)(false);
   const [boundingRect, setBoundingRect] = (0, import_react47.useState)({
@@ -12296,9 +12329,9 @@ var LightboxImage = ({ children }) => {
   (0, import_react47.useEffect)(() => {
     handleSetBoundingRect(imageRef);
   }, [imageRef]);
-  return /* @__PURE__ */ (0, import_jsx_runtime157.jsxs)(import_jsx_runtime157.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime157.jsx)(DummyImage, { isOpen, boundingRect }),
-    /* @__PURE__ */ (0, import_jsx_runtime157.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime159.jsxs)(import_jsx_runtime159.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime159.jsx)(DummyImage, { isOpen, boundingRect }),
+    /* @__PURE__ */ (0, import_jsx_runtime159.jsx)(
       StyledImage,
       {
         isOpen,
@@ -12309,13 +12342,13 @@ var LightboxImage = ({ children }) => {
         children
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime157.jsx)(Lightbox, { isOpen, onClick: handleMouseUp })
+    /* @__PURE__ */ (0, import_jsx_runtime159.jsx)(Lightbox, { isOpen, onClick: handleMouseUp })
   ] });
 };
-var DummyImage = import_styled37.default.div`
+var DummyImage = import_styled39.default.div`
   ${(props) => props.isOpen ? `height: ${props.boundingRect.height}px; width: ${props.boundingRect.width}px;` : ``}
 `;
-var StyledImage = import_styled37.default.div`
+var StyledImage = import_styled39.default.div`
   display: flex;
   justify-content: start;
   align-items: center;
@@ -12363,7 +12396,7 @@ var StyledImage = import_styled37.default.div`
     }
   }
 `;
-var Lightbox = import_styled37.default.div`
+var Lightbox = import_styled39.default.div`
   transition: opacity 0.2s ease-out;
   position: fixed;
   opacity: 0;
@@ -12393,7 +12426,7 @@ var import_react48 = require("@emotion/react");
 var import_react49 = require("react");
 var import_react_tooltip2 = require("react-tooltip/dist/react-tooltip.css");
 var import_fonts = require("../static/fonts.css");
-var import_jsx_runtime158 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime160 = require("@emotion/react/jsx-runtime");
 var globalComponentStyles = ({ theme }) => import_react48.css`
   @import url("https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
 
@@ -12512,20 +12545,20 @@ function GlobalStyles() {
       height: 100%;
     }
   `;
-  return /* @__PURE__ */ (0, import_jsx_runtime158.jsx)(import_react48.Global, { styles: globalStyles });
+  return /* @__PURE__ */ (0, import_jsx_runtime160.jsx)(import_react48.Global, { styles: globalStyles });
 }
 
 // src/components/LightsparkProvider.tsx
-var import_jsx_runtime159 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime161 = require("@emotion/react/jsx-runtime");
 function LightsparkProvider({ children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime159.jsxs)(import_react50.ThemeProvider, { theme: themes.light, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime159.jsx)(GlobalStyles, {}),
+  return /* @__PURE__ */ (0, import_jsx_runtime161.jsxs)(import_react50.ThemeProvider, { theme: themes.light, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(GlobalStyles, {}),
     children
   ] });
 }
 
 // src/components/Modal.tsx
-var import_styled39 = __toESM(require("@emotion/styled"), 1);
+var import_styled41 = __toESM(require("@emotion/styled"), 1);
 var import_react53 = __toESM(require("react"), 1);
 var import_react_dom3 = __toESM(require("react-dom"), 1);
 
@@ -12544,9 +12577,9 @@ function useLiveRef() {
 }
 
 // src/components/ProgressBar.tsx
-var import_styled38 = __toESM(require("@emotion/styled"), 1);
+var import_styled40 = __toESM(require("@emotion/styled"), 1);
 var import_react52 = require("react");
-var import_jsx_runtime160 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime162 = require("@emotion/react/jsx-runtime");
 var defaultProps3 = {
   isSm: false,
   stepDuration: 0.5
@@ -12567,7 +12600,7 @@ function ProgressBar({
       }, 0);
     }
   }, [progressPercentage]);
-  return /* @__PURE__ */ (0, import_jsx_runtime160.jsx)(ProgressBarContainer, { isSm, children: /* @__PURE__ */ (0, import_jsx_runtime160.jsx)(Bar, { isSm, percentage, stepDuration, children: /* @__PURE__ */ (0, import_jsx_runtime160.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime162.jsx)(ProgressBarContainer, { isSm, children: /* @__PURE__ */ (0, import_jsx_runtime162.jsx)(Bar, { isSm, percentage, stepDuration, children: /* @__PURE__ */ (0, import_jsx_runtime162.jsx)(
     BarBg,
     {
       background,
@@ -12578,7 +12611,7 @@ function ProgressBar({
   ) }) });
 }
 ProgressBar.defaultProps = defaultProps3;
-var ProgressBarContainer = import_styled38.default.div`
+var ProgressBarContainer = import_styled40.default.div`
   ${standardBorderRadius(16)}
   background-color: ${({ theme }) => themeOr(theme.c05Neutral, theme.c1Neutral)({ theme })};
   box-sizing: border-box;
@@ -12588,7 +12621,7 @@ var ProgressBarContainer = import_styled38.default.div`
   width: 100%;
   position: relative;
 `;
-var BarBg = import_styled38.default.div`
+var BarBg = import_styled40.default.div`
   ${standardBorderRadius(16)}
   width: ${({ percentage }) => 100 / percentage * 100}%;
   height: 100%;
@@ -12602,7 +12635,7 @@ var BarBg = import_styled38.default.div`
     #3f2e7e 115.32%
   )`};
 `;
-var Bar = import_styled38.default.div`
+var Bar = import_styled40.default.div`
   ${standardBorderRadius(16)}
   overflow: hidden;
   box-sizing: border-box;
@@ -12614,12 +12647,13 @@ var Bar = import_styled38.default.div`
 `;
 
 // src/components/Modal.tsx
-var import_jsx_runtime161 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime163 = require("@emotion/react/jsx-runtime");
 function isSubmitLinkWithHref(submitLink) {
   return Boolean(submitLink && "href" in submitLink);
 }
 function Modal({
   visible,
+  topContent,
   title,
   description,
   children,
@@ -12741,9 +12775,9 @@ function Modal({
   }
   const linkIsHref = isSubmitLinkWithHref(submitLink);
   const linkIsRoute = !linkIsHref && submitLink;
-  const buttonContent = /* @__PURE__ */ (0, import_jsx_runtime161.jsxs)(import_jsx_runtime161.Fragment, { children: [
+  const buttonContent = /* @__PURE__ */ (0, import_jsx_runtime163.jsxs)(import_jsx_runtime163.Fragment, { children: [
     extraActions == null ? void 0 : extraActions.filter((action) => action.placement === "above").map((action) => action.content),
-    !isSm && !cancelHidden && /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(
+    !isSm && !cancelHidden && /* @__PURE__ */ (0, import_jsx_runtime163.jsx)(
       Button,
       {
         disabled: cancelDisabled,
@@ -12751,7 +12785,7 @@ function Modal({
         text: cancelText
       }
     ),
-    onSubmit && /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(
+    (onSubmit || submitLink) && /* @__PURE__ */ (0, import_jsx_runtime163.jsx)(
       Button,
       {
         kind: "primary",
@@ -12765,13 +12799,13 @@ function Modal({
         onClick: submitLink ? onSubmit : void 0
       }
     ),
-    isSm && !cancelHidden && /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(Button, { onClick: onClose, text: cancelText }),
+    isSm && !cancelHidden && /* @__PURE__ */ (0, import_jsx_runtime163.jsx)(Button, { onClick: onClose, text: cancelText }),
     extraActions == null ? void 0 : extraActions.filter((action) => action.placement === "below").map((action) => action.content)
   ] });
   let titleContent = null;
   if (title) {
     if (typeof title === "string") {
-      titleContent = /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(Headline, { heading: "h4", size: TokenSize.Small, children: title });
+      titleContent = /* @__PURE__ */ (0, import_jsx_runtime163.jsx)(Headline, { heading: "h4", size: TokenSize.Small, children: title });
     } else {
       titleContent = toReactNodes(title);
     }
@@ -12779,31 +12813,36 @@ function Modal({
   let descriptionContent = null;
   if (description) {
     if (typeof description === "string") {
-      descriptionContent = /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(Description, { children: /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(Body, { size: "ExtraSmall", content: description }) });
+      descriptionContent = /* @__PURE__ */ (0, import_jsx_runtime163.jsx)(Description, { children: /* @__PURE__ */ (0, import_jsx_runtime163.jsx)(Body, { size: "ExtraSmall", content: description }) });
     } else {
-      descriptionContent = /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(Description, { children: toReactNodes(description) });
+      descriptionContent = /* @__PURE__ */ (0, import_jsx_runtime163.jsx)(Description, { children: toReactNodes(description) });
     }
   }
-  const modalContent = /* @__PURE__ */ (0, import_jsx_runtime161.jsxs)(import_react53.Fragment, { children: [
-    progressBar ? /* @__PURE__ */ (0, import_jsx_runtime161.jsx)("div", { css: { marginBottom: "20px" }, children: /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(
+  let topContentNode = null;
+  if (topContent) {
+    topContentNode = /* @__PURE__ */ (0, import_jsx_runtime163.jsx)("div", { css: { marginBottom: "32px" /* xl */ }, children: /* @__PURE__ */ (0, import_jsx_runtime163.jsx)(IconWithCircleBackground, __spreadValues({}, topContent)) });
+  }
+  const modalContent = /* @__PURE__ */ (0, import_jsx_runtime163.jsxs)(import_react53.Fragment, { children: [
+    progressBar ? /* @__PURE__ */ (0, import_jsx_runtime163.jsx)("div", { css: { marginBottom: "20px" }, children: /* @__PURE__ */ (0, import_jsx_runtime163.jsx)(
       ProgressBar,
       {
         progressPercentage: progressBar.progressPercentage,
         isSm: progressBar.isSm
       }
     ) }) : null,
+    topContentNode,
     titleContent,
     descriptionContent,
     children,
-    onSubmit || onCancel ? buttonLayout === "horizontal" ? /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(ModalButtonRow, { children: buttonContent }) : /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(ModalButtonColumn, { children: buttonContent }) : null
+    onSubmit || onCancel || submitLink ? buttonLayout === "horizontal" ? /* @__PURE__ */ (0, import_jsx_runtime163.jsx)(ModalButtonRow, { children: buttonContent }) : /* @__PURE__ */ (0, import_jsx_runtime163.jsx)(ModalButtonColumn, { children: buttonContent }) : null
   ] });
   let content;
   if (smDrawer && isSm) {
-    content = /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(Drawer, { onClose: () => onClickCloseButton(), closeButton: true, children: modalContent });
+    content = /* @__PURE__ */ (0, import_jsx_runtime163.jsx)(Drawer, { onClose: () => onClickCloseButton(), closeButton: true, children: modalContent });
   } else {
-    content = /* @__PURE__ */ (0, import_jsx_runtime161.jsxs)(import_react53.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(ModalOverlay, { ref: overlayRef }),
-      /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(
+    content = /* @__PURE__ */ (0, import_jsx_runtime163.jsxs)(import_react53.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime163.jsx)(ModalOverlay, { ref: overlayRef }),
+      /* @__PURE__ */ (0, import_jsx_runtime163.jsx)(
         ModalContainer,
         {
           "aria-modal": true,
@@ -12811,27 +12850,27 @@ function Modal({
           tabIndex: -1,
           role: "dialog",
           ref: modalContainerRef,
-          children: /* @__PURE__ */ (0, import_jsx_runtime161.jsxs)(ModalContent, { width: width3, ghost, children: [
-            !firstFocusRef && /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(DefaultFocusTarget, { ref: defaultFirstFocusRefCb }),
-            !(nonDismissable || ghost) && /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(CloseButtonContainer2, { children: /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(CloseButton, { onClick: onClickCloseButton, type: "button", children: /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(Icon, { name: "Close", width: 9 }) }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(ModalContentInner, { ghost, children: modalContent })
+          children: /* @__PURE__ */ (0, import_jsx_runtime163.jsxs)(ModalContent, { width: width3, ghost, children: [
+            !firstFocusRef && /* @__PURE__ */ (0, import_jsx_runtime163.jsx)(DefaultFocusTarget, { ref: defaultFirstFocusRefCb }),
+            !(nonDismissable || ghost) && /* @__PURE__ */ (0, import_jsx_runtime163.jsx)(CloseButtonContainer2, { children: /* @__PURE__ */ (0, import_jsx_runtime163.jsx)(CloseButton, { onClick: onClickCloseButton, type: "button", children: /* @__PURE__ */ (0, import_jsx_runtime163.jsx)(Icon, { name: "Close", width: 9 }) }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime163.jsx)(ModalContentInner, { ghost, children: modalContent })
           ] })
         }
       )
     ] });
   }
   return visible && nodeReady && nodeRef.current ? import_react_dom3.default.createPortal(
-    onSubmit ? /* @__PURE__ */ (0, import_jsx_runtime161.jsx)("form", { onSubmit: onSubmitForm, children: content }) : content,
+    onSubmit ? /* @__PURE__ */ (0, import_jsx_runtime163.jsx)("form", { onSubmit: onSubmitForm, children: content }) : content,
     nodeRef.current
   ) : null;
 }
-var DefaultFocusTarget = (0, import_styled39.default)(UnstyledButton)`
+var DefaultFocusTarget = (0, import_styled41.default)(UnstyledButton)`
   position: absolute;
   top: -30px;
   width: 0;
   height: 0;
 `;
-var ModalOverlay = import_styled39.default.div`
+var ModalOverlay = import_styled41.default.div`
   position: fixed;
   bottom: 0;
   left: 0;
@@ -12840,7 +12879,7 @@ var ModalOverlay = import_styled39.default.div`
   height: 100vh;
   background: rgba(0, 0, 0, 0.5);
 `;
-var ModalContainer = import_styled39.default.div`
+var ModalContainer = import_styled41.default.div`
   pointer-events: none;
   position: fixed;
   top: 0;
@@ -12858,14 +12897,14 @@ var ModalContainer = import_styled39.default.div`
   padding-top: ${standardContentInset.smPx}px;
 `;
 var contentTopMarginPx = 24;
-var Description = import_styled39.default.div`
+var Description = import_styled41.default.div`
   color: ${({ theme }) => theme.mcNeutral};
   margin-top: ${"12px" /* sm */};
   & + * {
     margin-top: ${contentTopMarginPx}px;
   }
 `;
-var ModalButtonRow = import_styled39.default.div`
+var ModalButtonRow = import_styled41.default.div`
   margin-top: ${"24px" /* lg */};
   ${bp.minSm(`display: flex;`)}
   gap: 10px;
@@ -12877,7 +12916,7 @@ var ModalButtonRow = import_styled39.default.div`
     `)}
   }
 `;
-var ModalButtonColumn = import_styled39.default.div`
+var ModalButtonColumn = import_styled41.default.div`
   display: flex;
   flex-direction: column;
   gap: ${"12px" /* sm */};
@@ -12888,7 +12927,7 @@ var ModalButtonColumn = import_styled39.default.div`
 
   margin-top: ${"24px" /* lg */};
 `;
-var ModalContent = import_styled39.default.div`
+var ModalContent = import_styled41.default.div`
   ${overflowAutoWithoutScrollbars}
   ${standardContentInset.smCSS}
   ${(props) => props.ghost ? "" : standardBorderRadius(16)}
@@ -12908,18 +12947,18 @@ var ModalContent = import_styled39.default.div`
     }
   }
 `;
-var CloseButtonContainer2 = import_styled39.default.div`
+var CloseButtonContainer2 = import_styled41.default.div`
   display: flex;
   flex-direction: row;
   width: 100%;
   justify-content: flex-end;
 `;
-var CloseButton = (0, import_styled39.default)(UnstyledButton)`
+var CloseButton = (0, import_styled41.default)(UnstyledButton)`
   ${standardFocusOutline}
   width: 24px;
   height: 24px;
 `;
-var ModalContentInner = import_styled39.default.div`
+var ModalContentInner = import_styled41.default.div`
   ${(props) => props.ghost ? "" : "padding: 32px 24px 0;"}
   ${(props) => props.ghost ? "" : `${bp.sm(`
     padding-left: 10px;
@@ -12929,15 +12968,15 @@ var ModalContentInner = import_styled39.default.div`
 
 // src/components/PageSection/PageSection.tsx
 var import_react55 = require("@emotion/react");
-var import_styled41 = __toESM(require("@emotion/styled"), 1);
+var import_styled43 = __toESM(require("@emotion/styled"), 1);
 var import_react56 = require("react");
 
 // src/components/TextButton.tsx
 var import_react54 = require("@emotion/react");
-var import_styled40 = __toESM(require("@emotion/styled"), 1);
+var import_styled42 = __toESM(require("@emotion/styled"), 1);
 
 // src/components/TextIconAligner.tsx
-var import_jsx_runtime162 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime164 = require("@emotion/react/jsx-runtime");
 function TextIconAligner({
   content,
   typography,
@@ -12950,7 +12989,7 @@ function TextIconAligner({
     size: (typography == null ? void 0 : typography.size) || "Small",
     color: (typography == null ? void 0 : typography.color) || "inherit"
   });
-  const leftIconNode = leftIcon ? /* @__PURE__ */ (0, import_jsx_runtime162.jsx)(
+  const leftIconNode = leftIcon ? /* @__PURE__ */ (0, import_jsx_runtime164.jsx)(
     Icon,
     {
       name: leftIcon.name,
@@ -12959,7 +12998,7 @@ function TextIconAligner({
       color: leftIcon.color
     }
   ) : null;
-  const rightIconNode = rightIcon ? /* @__PURE__ */ (0, import_jsx_runtime162.jsx)(
+  const rightIconNode = rightIcon ? /* @__PURE__ */ (0, import_jsx_runtime164.jsx)(
     Icon,
     {
       name: rightIcon.name,
@@ -12968,7 +13007,7 @@ function TextIconAligner({
       color: rightIcon.color
     }
   ) : null;
-  return /* @__PURE__ */ (0, import_jsx_runtime162.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime164.jsxs)(
     "span",
     {
       css: {
@@ -12987,7 +13026,7 @@ function TextIconAligner({
 }
 
 // src/components/TextButton.tsx
-var import_jsx_runtime163 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime165 = require("@emotion/react/jsx-runtime");
 function TextButton({
   text: textProp,
   to,
@@ -13013,7 +13052,7 @@ function TextButton({
     };
   }
   const defaultIconColor = iconMatchTextColor ? void 0 : "mcNeutral";
-  const content = /* @__PURE__ */ (0, import_jsx_runtime163.jsx)(
+  const content = /* @__PURE__ */ (0, import_jsx_runtime165.jsx)(
     TextIconAligner,
     {
       onClick,
@@ -13043,9 +13082,9 @@ function TextButton({
     }
   };
   if (to) {
-    return /* @__PURE__ */ (0, import_jsx_runtime163.jsx)(ButtonLink2, __spreadProps(__spreadValues({}, commonProps), { to, params: toParams, children: content }));
+    return /* @__PURE__ */ (0, import_jsx_runtime165.jsx)(ButtonLink2, __spreadProps(__spreadValues({}, commonProps), { to, params: toParams, children: content }));
   }
-  return href ? /* @__PURE__ */ (0, import_jsx_runtime163.jsx)(ButtonHrefLink2, __spreadProps(__spreadValues({}, commonProps), { href, target: "_blank", children: content })) : /* @__PURE__ */ (0, import_jsx_runtime163.jsx)(StyledButton2, __spreadProps(__spreadValues({}, commonProps), { children: content }));
+  return href ? /* @__PURE__ */ (0, import_jsx_runtime165.jsx)(ButtonHrefLink2, __spreadProps(__spreadValues({}, commonProps), { href, target: "_blank", children: content })) : /* @__PURE__ */ (0, import_jsx_runtime165.jsx)(StyledButton2, __spreadProps(__spreadValues({}, commonProps), { children: content }));
 }
 var buttonStyle2 = ({
   theme,
@@ -13069,13 +13108,13 @@ var buttonStyle2 = ({
     cursor: ${disabled ? "not-allowed" : "pointer"};
   }
 `;
-var StyledButton2 = (0, import_styled40.default)(UnstyledButton)`
+var StyledButton2 = (0, import_styled42.default)(UnstyledButton)`
   ${(props) => buttonStyle2(props)}
 `;
-var ButtonLink2 = (0, import_styled40.default)(Link)`
+var ButtonLink2 = (0, import_styled42.default)(Link)`
   ${(props) => buttonStyle2(props)}
 `;
-var ButtonHrefLink2 = import_styled40.default.a`
+var ButtonHrefLink2 = import_styled42.default.a`
   ${(props) => buttonStyle2(props)}
 `;
 
@@ -13083,19 +13122,19 @@ var ButtonHrefLink2 = import_styled40.default.a`
 var pageSectionScrollOffset = 20;
 
 // src/components/PageSection/PageSection.tsx
-var import_jsx_runtime164 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime166 = require("@emotion/react/jsx-runtime");
 function PageSection({
   children,
   title,
   sectionId,
   headerOffset = 0
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime164.jsxs)(StyledPageSection, { scrollMarginTop: headerOffset + pageSectionScrollOffset, children: [
-    title ? /* @__PURE__ */ (0, import_jsx_runtime164.jsx)(Heading, { type: "h3", id: sectionId, mt: 0, mb: 40, children: title }) : null,
+  return /* @__PURE__ */ (0, import_jsx_runtime166.jsxs)(StyledPageSection, { scrollMarginTop: headerOffset + pageSectionScrollOffset, children: [
+    title ? /* @__PURE__ */ (0, import_jsx_runtime166.jsx)(Heading, { type: "h3", id: sectionId, mt: 0, mb: 40, children: title }) : null,
     children
   ] });
 }
-var StyledPageSection = import_styled41.default.div`
+var StyledPageSection = import_styled43.default.div`
   &:first-of-type {
     ${bp.minSm(`
       margin-top: 4px;
@@ -13119,24 +13158,24 @@ var PageSectionBoxActionColumn = ({
   label,
   value,
   valueId
-}) => /* @__PURE__ */ (0, import_jsx_runtime164.jsxs)(StyledPageSectionBoxActionColumn, { children: [
-  /* @__PURE__ */ (0, import_jsx_runtime164.jsx)(PageSectionBoxActionColumnLabel, { children: label }),
-  value ? /* @__PURE__ */ (0, import_jsx_runtime164.jsx)(PageSectionBoxActionColumnValue, { id: valueId, children: value }) : /* @__PURE__ */ (0, import_jsx_runtime164.jsx)(PageSectionBoxActionColumnNoValue, { children: "Unknown" })
+}) => /* @__PURE__ */ (0, import_jsx_runtime166.jsxs)(StyledPageSectionBoxActionColumn, { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime166.jsx)(PageSectionBoxActionColumnLabel, { children: label }),
+  value ? /* @__PURE__ */ (0, import_jsx_runtime166.jsx)(PageSectionBoxActionColumnValue, { id: valueId, children: value }) : /* @__PURE__ */ (0, import_jsx_runtime166.jsx)(PageSectionBoxActionColumnNoValue, { children: "Unknown" })
 ] });
-var StyledPageSectionBoxActionColumn = import_styled41.default.div``;
-var PageSectionBoxActionColumnLabel = import_styled41.default.div`
+var StyledPageSectionBoxActionColumn = import_styled43.default.div``;
+var PageSectionBoxActionColumnLabel = import_styled43.default.div`
   color: ${colors.gray40};
   font-weight: 500;
   margin: 0;
 `;
-var PageSectionBoxActionColumnValue = import_styled41.default.div`
+var PageSectionBoxActionColumnValue = import_styled43.default.div`
   font-weight: 700;
   margin-bottom: 0;
   margin-top: 6px;
   overflow: hidden;
   text-overflow: ellipsis;
 `;
-var PageSectionBoxActionColumnNoValue = (0, import_styled41.default)(
+var PageSectionBoxActionColumnNoValue = (0, import_styled43.default)(
   PageSectionBoxActionColumnValue
 )`
   color: ${colors.gray80};
@@ -13153,17 +13192,17 @@ function PageSectionBoxAction({
   toParams
 }) {
   const theme = (0, import_react55.useTheme)();
-  return loading ? /* @__PURE__ */ (0, import_jsx_runtime164.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime164.jsx)(Loading, { size: 12, center: false }) }) : icon ? /* @__PURE__ */ (0, import_jsx_runtime164.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime164.jsx)(UnstyledButton, { onClick: icon.onClick, children: /* @__PURE__ */ (0, import_jsx_runtime164.jsx)(Icon, { name: icon.name, width: 12, color: "mcNeutral" }) }) }) : dropdownItems ? /* @__PURE__ */ (0, import_jsx_runtime164.jsx)(
+  return loading ? /* @__PURE__ */ (0, import_jsx_runtime166.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime166.jsx)(Loading, { size: 12, center: false }) }) : icon ? /* @__PURE__ */ (0, import_jsx_runtime166.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime166.jsx)(UnstyledButton, { onClick: icon.onClick, children: /* @__PURE__ */ (0, import_jsx_runtime166.jsx)(Icon, { name: icon.name, width: 12, color: "mcNeutral" }) }) }) : dropdownItems ? /* @__PURE__ */ (0, import_jsx_runtime166.jsx)(
     Dropdown,
     {
       button: {
-        getContent: () => /* @__PURE__ */ (0, import_jsx_runtime164.jsx)(Icon, { name: "DotGrid1x3Horizontal", width: 16 })
+        getContent: () => /* @__PURE__ */ (0, import_jsx_runtime166.jsx)(Icon, { name: "DotGrid1x3Horizontal", width: 16 })
       },
       dropdownItems
     }
-  ) : isDelete ? /* @__PURE__ */ (0, import_jsx_runtime164.jsx)(UnstyledButton, { css: { color: theme.mcNeutral }, onClick, children: "Delete" }) : label ? (
+  ) : isDelete ? /* @__PURE__ */ (0, import_jsx_runtime166.jsx)(UnstyledButton, { css: { color: theme.mcNeutral }, onClick, children: "Delete" }) : label ? (
     /* Extra div for proper default alignment inside flex contexts */
-    /* @__PURE__ */ (0, import_jsx_runtime164.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime164.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime166.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime166.jsx)(
       TextButton,
       {
         leftIcon: icon,
@@ -13184,26 +13223,26 @@ var PageSectionBoxActionRow = ({
   action,
   smFlexColumn = true
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime164.jsx)(import_react56.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime164.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime166.jsx)(import_react56.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime166.jsxs)(
     SPageSectionBoxActionRow,
     {
       separator: Boolean(separator),
       smFlexColumn: Boolean(smFlexColumn),
       children: [
-        title ? /* @__PURE__ */ (0, import_jsx_runtime164.jsxs)("div", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime164.jsxs)(PageSectionBoxTitle, { children: [
+        title ? /* @__PURE__ */ (0, import_jsx_runtime166.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime166.jsxs)(PageSectionBoxTitle, { children: [
             title,
-            titleBadge ? /* @__PURE__ */ (0, import_jsx_runtime164.jsx)(Badge, { text: titleBadge, ml: 4 }) : null
+            titleBadge ? /* @__PURE__ */ (0, import_jsx_runtime166.jsx)(Badge, { text: titleBadge, ml: 4 }) : null
           ] }),
-          description ? /* @__PURE__ */ (0, import_jsx_runtime164.jsx)(PageSectionBoxDescription, { children: description }) : null
+          description ? /* @__PURE__ */ (0, import_jsx_runtime166.jsx)(PageSectionBoxDescription, { children: description }) : null
         ] }) : null,
         children,
-        /* @__PURE__ */ (0, import_jsx_runtime164.jsx)(PageSectionBoxAction, __spreadValues({}, action))
+        /* @__PURE__ */ (0, import_jsx_runtime166.jsx)(PageSectionBoxAction, __spreadValues({}, action))
       ]
     }
   ) });
 };
-var SPageSectionBoxActionRow = import_styled41.default.div`
+var SPageSectionBoxActionRow = import_styled43.default.div`
   display: flex;
   gap: 12px;
   align-items: top;
@@ -13233,8 +13272,8 @@ var SPageSectionBoxActionRow = import_styled41.default.div`
       padding-top: 32px;
     `}
 `;
-var PageSectionBoxColumn = import_styled41.default.div``;
-var PageSectionBoxRow = import_styled41.default.div`
+var PageSectionBoxColumn = import_styled43.default.div``;
+var PageSectionBoxRow = import_styled43.default.div`
   display: grid;
   grid-template-columns: repeat(
     auto-fit,
@@ -13246,13 +13285,13 @@ function PageSectionBox({
   description,
   children
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime164.jsxs)(StyledPageSectionBox, { children: [
-    description && /* @__PURE__ */ (0, import_jsx_runtime164.jsx)(PageSectionBoxDescription, { children: toReactNodes(description) }),
+  return /* @__PURE__ */ (0, import_jsx_runtime166.jsxs)(StyledPageSectionBox, { children: [
+    description && /* @__PURE__ */ (0, import_jsx_runtime166.jsx)(PageSectionBoxDescription, { children: toReactNodes(description) }),
     children,
-    (action == null ? void 0 : action.label) ? /* @__PURE__ */ (0, import_jsx_runtime164.jsx)("div", { css: { marginTop: "12px" }, children: /* @__PURE__ */ (0, import_jsx_runtime164.jsx)(PageSectionBoxAction, __spreadValues({}, action)) }) : null
+    (action == null ? void 0 : action.label) ? /* @__PURE__ */ (0, import_jsx_runtime166.jsx)("div", { css: { marginTop: "12px" }, children: /* @__PURE__ */ (0, import_jsx_runtime166.jsx)(PageSectionBoxAction, __spreadValues({}, action)) }) : null
   ] });
 }
-var StyledPageSectionBox = import_styled41.default.div`
+var StyledPageSectionBox = import_styled43.default.div`
   & + & {
     margin-top: 32px;
   }
@@ -13310,21 +13349,21 @@ var StyledPageSectionBox = import_styled41.default.div`
       `)}
   }
 `;
-var PageSectionBoxTitle = import_styled41.default.div`
+var PageSectionBoxTitle = import_styled43.default.div`
   display: flex;
   align-items: center;
   font-size: ${({ lg }) => lg ? 14 : 12}px;
   font-weight: 600;
   line-height: ${({ lg }) => standardLineHeightEms * (lg ? 14 : 12) + badgeVPadding * 2}px;
 `;
-var PageSectionBoxDescription = import_styled41.default.div`
+var PageSectionBoxDescription = import_styled43.default.div`
   color: ${({ theme }) => theme.mcNeutral};
   ${PageSectionBoxTitle} + & {
     margin-top: 6px;
   }
 `;
 var gapPx = 24;
-var PageSectionRow = import_styled41.default.div`
+var PageSectionRow = import_styled43.default.div`
   display: flex;
   flex-direction: column;
   gap: ${gapPx}px;
@@ -13338,7 +13377,7 @@ var PageSectionRow = import_styled41.default.div`
     margin-top: 0;
   }
 `;
-var PageSectionRowSubSection = import_styled41.default.div`
+var PageSectionRowSubSection = import_styled43.default.div`
   box-sizing: border-box;
   width: 100%;
 
@@ -13366,10 +13405,10 @@ var PageSectionRowSubSection = import_styled41.default.div`
 `;
 
 // src/components/PageSection/PageSectionNav.tsx
-var import_styled42 = __toESM(require("@emotion/styled"), 1);
+var import_styled44 = __toESM(require("@emotion/styled"), 1);
 var import_core3 = require("@lightsparkdev/core");
-var import_jsx_runtime165 = require("@emotion/react/jsx-runtime");
-var StyledPageSectionNav = import_styled42.default.div`
+var import_jsx_runtime167 = require("@emotion/react/jsx-runtime");
+var StyledPageSectionNav = import_styled44.default.div`
   display: none;
   flex-direction: column;
   margin-right: 32px;
@@ -13384,13 +13423,13 @@ var StyledPageSectionNav = import_styled42.default.div`
     width: 200px;
   `)}
 `;
-var PageSectionList = import_styled42.default.ul`
+var PageSectionList = import_styled44.default.ul`
   margin: 0;
   padding: 0;
   position: sticky;
   top: ${({ top }) => top}px;
 `;
-var StyledPageSectionNavItem = import_styled42.default.li`
+var StyledPageSectionNavItem = import_styled44.default.li`
   align-items: center;
   color: ${colors.gray40};
   display: flex;
@@ -13408,7 +13447,7 @@ var StyledPageSectionNavItem = import_styled42.default.li`
     }
   }
 `;
-var PageSectionListItem = ({ leftIcon, label, sectionId }) => /* @__PURE__ */ (0, import_jsx_runtime165.jsx)(StyledPageSectionNavItem, { children: /* @__PURE__ */ (0, import_jsx_runtime165.jsx)(
+var PageSectionListItem = ({ leftIcon, label, sectionId }) => /* @__PURE__ */ (0, import_jsx_runtime167.jsx)(StyledPageSectionNavItem, { children: /* @__PURE__ */ (0, import_jsx_runtime167.jsx)(
   TextButton,
   {
     text: label,
@@ -13427,8 +13466,8 @@ function PageSectionNav({
   headerOffset = 0,
   pageSectionNavItems
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime165.jsx)(StyledPageSectionNav, { children: /* @__PURE__ */ (0, import_jsx_runtime165.jsx)(PageSectionList, { top: headerOffset + pageSectionScrollOffset, children: pageSectionNavItems.filter(import_core3.notNullUndefined).map((item) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime165.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime167.jsx)(StyledPageSectionNav, { children: /* @__PURE__ */ (0, import_jsx_runtime167.jsx)(PageSectionList, { top: headerOffset + pageSectionScrollOffset, children: pageSectionNavItems.filter(import_core3.notNullUndefined).map((item) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime167.jsx)(
       PageSectionListItem,
       {
         leftIcon: item.leftIcon,
@@ -13704,7 +13743,7 @@ var allCountryNames = Object.values(countryCodesToNames);
 var countryNamesToCodes = (0, import_lodash_es7.invert)(countryCodesToNames);
 
 // src/components/PhoneInput.tsx
-var import_jsx_runtime166 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime168 = require("@emotion/react/jsx-runtime");
 var countries = (0, import_libphonenumber_js.getCountries)();
 var defaultOptions = countries.map((countryCode) => {
   if (countryCodesToNames[countryCode] === void 0) {
@@ -13766,7 +13805,7 @@ function PhoneInput({
   const formattedValue = formatter.input(value);
   const isValidPhone = formatter.isValid();
   const error = !isValidPhone && wasBlurred ? "Please enter a valid phone number." : void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime166.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime168.jsx)(
     TextInput,
     {
       select: {
@@ -13787,9 +13826,9 @@ function PhoneInput({
 }
 
 // src/components/Radio.tsx
-var import_styled43 = __toESM(require("@emotion/styled"), 1);
+var import_styled45 = __toESM(require("@emotion/styled"), 1);
 var import_react58 = require("react");
-var import_jsx_runtime167 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime169 = require("@emotion/react/jsx-runtime");
 function Radio({
   radioOptions,
   onChange,
@@ -13800,8 +13839,8 @@ function Radio({
     onChange(e.target.value);
     setSelectedOption(e.target.value);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime167.jsx)(RadioContainer, { children: radioOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime167.jsxs)(RadioRow, { htmlFor: option.label, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime167.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime169.jsx)(RadioContainer, { children: radioOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime169.jsxs)(RadioRow, { htmlFor: option.label, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime169.jsx)(
       RadioInput,
       {
         id: option.label,
@@ -13811,26 +13850,26 @@ function Radio({
         onChange: handleRadioClick
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime167.jsx)(Label, { children: option.label })
+    /* @__PURE__ */ (0, import_jsx_runtime169.jsx)(Label, { children: option.label })
   ] }, option.label)) });
 }
-var RadioContainer = import_styled43.default.div`
+var RadioContainer = import_styled45.default.div`
   label: flex;
   flex-direction: column;
 `;
-var RadioRow = import_styled43.default.label`
+var RadioRow = import_styled45.default.label`
   display: flex;
   align-items: center;
   gap: ${"12px" /* sm */};
 `;
-var RadioInput = import_styled43.default.input``;
+var RadioInput = import_styled45.default.input``;
 
 // src/components/SecretContainer.tsx
-var import_styled44 = __toESM(require("@emotion/styled"), 1);
-var import_jsx_runtime168 = require("@emotion/react/jsx-runtime");
+var import_styled46 = __toESM(require("@emotion/styled"), 1);
+var import_jsx_runtime170 = require("@emotion/react/jsx-runtime");
 function SecretContainer(props) {
-  return props.secret ? /* @__PURE__ */ (0, import_jsx_runtime168.jsxs)(StyledSecretContainer, { hasSecret: true, success: props.success, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime168.jsx)(
+  return props.secret ? /* @__PURE__ */ (0, import_jsx_runtime170.jsxs)(StyledSecretContainer, { hasSecret: true, success: props.success, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime170.jsx)(
       "span",
       {
         style: {
@@ -13842,10 +13881,10 @@ function SecretContainer(props) {
         children: props.secret
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime168.jsx)(CopyToClipboardButton, { value: props.secret, isSm: true, ml: 4 })
-  ] }) : /* @__PURE__ */ (0, import_jsx_runtime168.jsx)(StyledSecretContainer, { hasSecret: false, children: "There are no tokens associated with this account" });
+    /* @__PURE__ */ (0, import_jsx_runtime170.jsx)(CopyToClipboardButton, { value: props.secret, isSm: true, ml: 4 })
+  ] }) : /* @__PURE__ */ (0, import_jsx_runtime170.jsx)(StyledSecretContainer, { hasSecret: false, children: "There are no tokens associated with this account" });
 }
-var StyledSecretContainer = import_styled44.default.div`
+var StyledSecretContainer = import_styled46.default.div`
   background-color: ${({ theme, hasSecret, success }) => hasSecret ? success ? theme.success : theme.c05Neutral : theme.bg};
   ${standardBorderRadius(8)}
   padding: 18px 20px;
@@ -13857,11 +13896,11 @@ var StyledSecretContainer = import_styled44.default.div`
 `;
 
 // src/components/Toasts.tsx
-var import_styled45 = __toESM(require("@emotion/styled"), 1);
+var import_styled47 = __toESM(require("@emotion/styled"), 1);
 var import_lodash_es8 = require("lodash-es");
 var import_react59 = require("react");
 var import_react_dom4 = __toESM(require("react-dom"), 1);
-var import_jsx_runtime169 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime171 = require("@emotion/react/jsx-runtime");
 var firstDur = 0.3;
 function Toasts({
   queue,
@@ -14000,9 +14039,9 @@ function Toasts({
     const fromCurrent = i === currentToastIndex ? 0 : currentToastIndex - i;
     const movingToCurrent = currentToast.isHiding && i === currentToastIndex - 1;
     const hidingFromCurrent = currentToast.isHiding ? fromCurrent - 1 : fromCurrent;
-    const textNode = /* @__PURE__ */ (0, import_jsx_runtime169.jsx)("span", { children: toast.text ? toReactNodes(toast.text) : null });
-    return /* @__PURE__ */ (0, import_jsx_runtime169.jsx)(import_react59.Fragment, { children: import_react_dom4.default.createPortal(
-      /* @__PURE__ */ (0, import_jsx_runtime169.jsxs)(
+    const textNode = /* @__PURE__ */ (0, import_jsx_runtime171.jsx)("span", { children: toast.text ? toReactNodes(toast.text) : null });
+    return /* @__PURE__ */ (0, import_jsx_runtime171.jsx)(import_react59.Fragment, { children: import_react_dom4.default.createPortal(
+      /* @__PURE__ */ (0, import_jsx_runtime171.jsxs)(
         StyledToast,
         {
           isActive: toast.isActive,
@@ -14022,7 +14061,7 @@ function Toasts({
           movingToCurrent,
           children: [
             textNode,
-            /* @__PURE__ */ (0, import_jsx_runtime169.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime171.jsx)(
               UnstyledButton,
               {
                 css: extend2(flexCenter, {
@@ -14034,7 +14073,7 @@ function Toasts({
                   outlineColor: `${colors.white} !important`
                 }),
                 onClick: () => hideToast(toast.id),
-                children: /* @__PURE__ */ (0, import_jsx_runtime169.jsx)(Icon, { name: "Close", width: 9 })
+                children: /* @__PURE__ */ (0, import_jsx_runtime171.jsx)(Icon, { name: "Close", width: 9 })
               }
             )
           ]
@@ -14048,7 +14087,7 @@ var width2 = 400;
 var beginTopPx = -100;
 var beginHeightPx = 50;
 var minScale = 0.95;
-var StyledToast = import_styled45.default.div`
+var StyledToast = import_styled47.default.div`
   position: fixed;
   z-index: ${z.toast};
   line-height: ${pxToRems(16)};
@@ -14214,9 +14253,11 @@ var StyledToast = import_styled45.default.div`
   Drawer,
   Dropdown,
   FileInput,
+  Flex,
   GradientCardHeader,
   Icon,
   IconContainer,
+  IconWithCircleBackground,
   InfoIconTooltip,
   InlineCode,
   LightboxImage,