@lightsparkdev/ui 0.0.11 → 0.0.13

package/dist/components/index.cjs

@@ -78,6 +78,7 @@ __export(components_exports, {
   CardPageFullWidth: () => CardPageFullWidth,
   CardPageRightContentInner: () => CardPageRightContentInner,
   CardPageSubtitle: () => CardPageSubtitle,
+  CodeBlock: () => CodeBlock,
   Collapsible: () => Collapsible,
   CommandKey: () => CommandKey,
   CopyToClipboardButton: () => CopyToClipboardButton,
@@ -86,6 +87,7 @@ __export(components_exports, {
   GradientCardHeader: () => GradientCardHeader,
   Icon: () => Icon,
   IconContainer: () => IconContainer,
+  InlineCode: () => InlineCode,
   LightTooltip: () => LightTooltip,
   LightboxImage: () => LightboxImage,
   LightsparkProvider: () => LightsparkProvider,
@@ -95,7 +97,9 @@ __export(components_exports, {
   Pill: () => Pill,
   ProgressBar: () => ProgressBar,
   SecretContainer: () => SecretContainer,
+  StatusIndicator: () => StatusIndicator,
   StyledButton: () => StyledButton,
+  StyledCodeBlock: () => StyledCodeBlock,
   TextIconAligner: () => TextIconAligner,
   UnstyledButton: () => UnstyledButton
 });
@@ -1457,7 +1461,7 @@ var overlaySurface = ({
 
 // src/components/Badge.tsx
 var import_jsx_runtime2 = require("@emotion/react/jsx-runtime");
-function Badge({ text, ml = 0 }) {
+function Badge({ text, ml = 0, mr = 0 }) {
   return text ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(StyledBadge, { ml, children: text }) : null;
 }
 var badgeVPadding = 2;
@@ -1510,6 +1514,7 @@ function replaceParams(to, params) {
 }
 function Link({
   to,
+  id,
   externalLink,
   params,
   children,
@@ -1542,6 +1547,7 @@ function Link({
     import_react_router_dom.Link,
     {
       to: toStr,
+      id,
       css: css9,
       onClick,
       className,
@@ -1800,7 +1806,7 @@ function getTextColor({ color, theme, primary: primary2, blue }) {
   return theme.text;
 }
 function getBackgroundColor({
-  backgroundColor,
+  backgroundColor: backgroundColor2,
   theme,
   primary: primary2,
   blue,
@@ -1809,8 +1815,8 @@ function getBackgroundColor({
   if (ghost) {
     return "none";
   }
-  if (backgroundColor) {
-    return backgroundColor;
+  if (backgroundColor2) {
+    return backgroundColor2;
   }
   if (blue) {
     return colors.blue43;
@@ -1861,14 +1867,14 @@ function getBorder({ ghost }) {
   return "1px solid";
 }
 function getInnerBorderColor({
-  backgroundColor,
+  backgroundColor: backgroundColor2,
   theme,
   primary: primary2,
   blue
 }) {
-  if (primary2 || blue || backgroundColor) {
+  if (primary2 || blue || backgroundColor2) {
     return getBackgroundColor({
-      backgroundColor,
+      backgroundColor: backgroundColor2,
       theme,
       primary: primary2,
       blue
@@ -1877,13 +1883,14 @@ function getInnerBorderColor({
   return themeOr(colors.gray90, colors.gray20)({ theme });
 }
 function Button({
-  backgroundColor,
+  backgroundColor: backgroundColor2,
   color,
   hoverColor,
   primary: primary2 = false,
   ghost = false,
   text,
   to,
+  id,
   hash,
   href,
   toParams,
@@ -1940,7 +1947,8 @@ function Button({
   ] });
   const isSingleCharRoundButton = Boolean(text && text.length === 1 && !icon);
   const commonProps = {
-    backgroundColor,
+    id,
+    backgroundColor: backgroundColor2,
     color,
     hoverColor,
     type,
@@ -1970,7 +1978,7 @@ function Button({
 }
 var buttonStyle = ({
   color,
-  backgroundColor,
+  backgroundColor: backgroundColor2,
   hoverColor,
   theme,
   primary: primary2,
@@ -2008,7 +2016,7 @@ var buttonStyle = ({
     text-align: center;
     white-space: nowrap;
     background-color: ${getBackgroundColor({
-  backgroundColor,
+  backgroundColor: backgroundColor2,
   theme,
   primary: primary2,
   blue,
@@ -2016,7 +2024,7 @@ var buttonStyle = ({
 })};
     border: ${getBorder({ ghost })};
     border-color: ${getInnerBorderColor({
-  backgroundColor,
+  backgroundColor: backgroundColor2,
   theme,
   primary: primary2,
   blue
@@ -2600,10 +2608,243 @@ var CardPageContent = import_styled9.default.div`
   `}
 `;
 
-// src/components/Collapsible.tsx
+// src/components/CodeBlock.tsx
+var import_styled11 = __toESM(require("@emotion/styled"), 1);
+var import_prismjs = __toESM(require("prismjs"), 1);
+var import_prism_dart_min = require("prismjs/components/prism-dart.min.js");
+var import_prism_go_min = require("prismjs/components/prism-go.min.js");
+var import_prism_graphql_min = require("prismjs/components/prism-graphql.min.js");
+var import_prism_java_min = require("prismjs/components/prism-java.min.js");
+var import_prism_json_min = require("prismjs/components/prism-json.min.js");
+var import_prism_jsx_min = require("prismjs/components/prism-jsx.min.js");
+var import_prism_kotlin_min = require("prismjs/components/prism-kotlin.min.js");
+var import_prism_python_min = require("prismjs/components/prism-python.min.js");
+var import_prism_rust_min = require("prismjs/components/prism-rust.min.js");
+var import_prism_swift_min = require("prismjs/components/prism-swift.min.js");
+var import_prism_tomorrow = require("prismjs/themes/prism-tomorrow.css");
+var import_react15 = require("react");
+var import_react_select = __toESM(require("react-select"), 1);
+
+// src/components/CopyToClipboardButton.tsx
 var import_styled10 = __toESM(require("@emotion/styled"), 1);
+var import_nanoid = require("nanoid");
 var import_react14 = 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_react14.useState)(originalTooltipContent);
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+      Button2,
+      {
+        type: "button",
+        onClick: () => {
+          void (() => __async(void 0, null, function* () {
+            try {
+              yield navigator.clipboard.writeText(props.value);
+              setTooltipContent("Copied!");
+            } catch (err) {
+              setTooltipContent("Unable to copy");
+            }
+            setTimeout(() => {
+              setTooltipContent(originalTooltipContent);
+            }, 2e3);
+          }))();
+        },
+        css: props.buttonCSS,
+        ml: props.ml,
+        "data-tooltip-id": id,
+        children: [
+          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_runtime11.jsx)(
+      LightTooltip,
+      {
+        id,
+        place: props.place || "right",
+        content: tooltipContent
+      }
+    )
+  ] });
+};
+var Children = import_styled10.default.span`
+  margin-right: 4px;
+`;
+var Button2 = (0, import_styled10.default)(UnstyledButton)`
+  background: rgba(0, 0, 0, 0);
+  vertical-align: middle;
+  ${({ ml }) => ml ? `margin-left: ${ml}px` : ""};
+`;
+
+// src/components/CodeBlock.tsx
+var import_jsx_runtime12 = require("@emotion/react/jsx-runtime");
+var ProgrammingLanguageOptions = {
+  Bash: "bash",
+  Flutter: "dart",
+  Go: "go",
+  GraphQL: "graphql",
+  Java: "java",
+  JavaScript: "js",
+  JSON: "json",
+  Kotlin: "kotlin",
+  Python: "python",
+  React: "react",
+  ReactNative: "tsx",
+  Rust: "rust",
+  Swift: "swift",
+  Text: "txt"
+};
+var backgroundColor = "#2d2d2d";
+var InlineCode = import_styled11.default.span`
+  font-family: "Roboto Mono", monospace;
+  background-color: #2d2d2d;
+  border: 1px solid ${themeOr(colors.gray90, colors.gray20)};
+  border-radius: 3px;
+  line-height: 24px;
+  padding: 0 4px;
+`;
+var codeSelectStyles = {
+  container: (styles2) => __spreadProps(__spreadValues({}, styles2), {
+    display: "flex"
+  }),
+  control: (styles2) => __spreadProps(__spreadValues({}, styles2), {
+    backgroundColor,
+    border: "none",
+    cursor: "pointer",
+    "&:hover": {
+      border: "#none"
+    },
+    boxShadow: "none",
+    minHeight: 0
+  }),
+  dropdownIndicator: (styles2) => __spreadProps(__spreadValues({}, styles2), {
+    color: "#ffffff",
+    padding: "0 0 0 4px",
+    "&:hover": {
+      color: "#ffffff"
+    }
+  }),
+  indicatorSeparator: (styles2) => ({
+    display: "none"
+  }),
+  input: (styles2) => __spreadProps(__spreadValues({}, styles2), {
+    fontSize: "1rem",
+    margin: 0,
+    color: "transparent"
+  }),
+  menu: (styles2) => __spreadProps(__spreadValues({}, styles2), {
+    backgroundColor,
+    width: "auto"
+  }),
+  menuList: (styles2) => __spreadProps(__spreadValues({}, styles2), {
+    borderRadius: "4px",
+    padding: 0
+  }),
+  option: (styles2, state) => __spreadProps(__spreadValues({}, styles2), {
+    cursor: "pointer",
+    backgroundColor: state.isSelected ? colors.gray25 : backgroundColor,
+    "&:hover": {
+      backgroundColor: colors.gray25
+    }
+  }),
+  singleValue: (styles2) => __spreadProps(__spreadValues({}, styles2), {
+    color: "#ffffff",
+    margin: 0
+  }),
+  valueContainer: (styles2) => __spreadProps(__spreadValues({}, styles2), {
+    padding: 0
+  })
+};
+var CodeBlock = ({
+  title,
+  children,
+  className,
+  language = "Text",
+  languageOptions,
+  onSelectLanguage,
+  withCopyButton
+}) => {
+  (0, import_react15.useLayoutEffect)(() => {
+    import_prismjs.default.highlightAll();
+  }, [children, language]);
+  const header = withCopyButton || languageOptions && onSelectLanguage ? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(CodeBlockHeader, { children: [
+    title && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(CodeBlockHeaderTitle, { children: title }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+      "div",
+      {
+        css: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: title ? "flex-end" : "space-between",
+          width: "100%"
+        },
+        children: [
+          languageOptions && onSelectLanguage ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { css: { margin: title ? "0 16px 0 auto" : "0" }, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+            import_react_select.default,
+            {
+              value: { value: language, label: language },
+              options: languageOptions.map((lang) => ({
+                value: lang,
+                label: lang
+              })),
+              onChange: (selected) => {
+                if (selected == null ? void 0 : selected.value) {
+                  onSelectLanguage(selected.value);
+                }
+              },
+              styles: codeSelectStyles
+            }
+          ) }) : null,
+          withCopyButton ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(CopyToClipboardButton, { value: children }) : null
+        ]
+      }
+    )
+  ] }) : null;
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(StyledCodeBlock, { className, children: [
+    header,
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(CodeBlockContainer, { hasHeader: header !== null, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("code", { className: `language-${ProgrammingLanguageOptions[language]}`, children }) })
+  ] });
+};
+var StyledCodeBlock = import_styled11.default.div``;
+var CodeBlockHeader = import_styled11.default.div`
+  align-items: center;
+  background-color: #2d2d2d;
+  border-bottom: 1px solid ${colors.gray25};
+  border-top-left-radius: 8px;
+  border-top-right-radius: 8px;
+  color: #ffffff;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  padding: 16px 20px;
+`;
+var CodeBlockContainer = import_styled11.default.pre`
+  ${overflowAutoWithoutScrollbars}
+  &[class*="language-"] {
+    padding: 20px;
+    font-weight: 500;
+    ${standardBorderRadius(8)}
+    ${(props) => props.hasHeader ? `border-top-left-radius: 0;
+            border-top-right-radius: 0;
+            margin-top: 0;` : ""}
+  }
+`;
+var CodeBlockHeaderTitle = import_styled11.default.div`
+  width: 100%;
+  font-weight: 500;
+  color: ${({ theme }) => theme.hcNeutralFromBg(backgroundColor)};
+`;
+
+// src/components/Collapsible.tsx
+var import_styled12 = __toESM(require("@emotion/styled"), 1);
+var import_react16 = require("react");
+var import_jsx_runtime13 = require("@emotion/react/jsx-runtime");
 function Collapsible({
   children,
   className,
@@ -2616,37 +2857,37 @@ function Collapsible({
   buttonTextElement,
   contentIndent = true
 }) {
-  const [isOpen, setIsOpen] = (0, import_react14.useState)(open);
+  const [isOpen, setIsOpen] = (0, import_react16.useState)(open);
   const handleClick = () => {
     if (handleToggle) {
       handleToggle(!isOpen);
     }
     setIsOpen(!isOpen);
   };
-  (0, import_react14.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     setIsOpen(open);
   }, [open]);
   const iconName = hamburger ? isOpen ? "Close" : "StackedLines" : "Down";
   const iconWidth = iconName === "Close" ? 12 : 14;
-  let textElement = /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", {});
+  let textElement = /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", {});
   if (buttonTextElement) {
     textElement = buttonTextElement;
   } else if (text) {
-    textElement = /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Text, { color, children: text });
+    textElement = /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Text, { color, children: text });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(StyledCollapsible, { className, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(StyledCollapsibleButton, { onClick: handleClick, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(StyledCollapsible, { className, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(StyledCollapsibleButton, { onClick: handleClick, children: [
       textElement,
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(IconContainer2, { isOpen, hamburger, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Icon, { width: iconWidth, name: iconName }) })
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(IconContainer2, { isOpen, hamburger, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Icon, { width: iconWidth, name: iconName }) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(CollapsingContainer, { isOpen, full, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(InnerPadding, { contentIndent, children }) })
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(CollapsingContainer, { isOpen, full, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(InnerPadding, { contentIndent, children }) })
   ] });
 }
-var StyledCollapsible = import_styled10.default.div`
+var StyledCollapsible = import_styled12.default.div`
   display: flex;
   flex-direction: column;
 `;
-var StyledCollapsibleButton = import_styled10.default.button`
+var StyledCollapsibleButton = import_styled12.default.button`
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -2657,7 +2898,7 @@ var StyledCollapsibleButton = import_styled10.default.button`
   ${standardBorderRadius(8)}
   padding: 0;
 `;
-var IconContainer2 = import_styled10.default.div`
+var IconContainer2 = import_styled12.default.div`
   ${(props) => {
   if (props.hamburger) {
     return;
@@ -2667,7 +2908,7 @@ var IconContainer2 = import_styled10.default.div`
   transition: transform 0.25s ease-out;
   width: 20px;
 `;
-var CollapsingContainer = import_styled10.default.div`
+var CollapsingContainer = import_styled12.default.div`
   overflow: scroll;
   opacity: 0;
   animation-duration: 0.4s;
@@ -2701,38 +2942,38 @@ var CollapsingContainer = import_styled10.default.div`
     }
   }
 `;
-var InnerPadding = import_styled10.default.div`
+var InnerPadding = import_styled12.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_styled10.default.span`
+var Text = import_styled12.default.span`
   ${(props) => props.color ? `color: ${props.color};` : ""}
   line-height: inherit;
 `;
 
 // src/components/CommandKey.tsx
-var import_styled11 = __toESM(require("@emotion/styled"), 1);
-var import_jsx_runtime12 = require("@emotion/react/jsx-runtime");
+var import_styled13 = __toESM(require("@emotion/styled"), 1);
+var import_jsx_runtime14 = require("@emotion/react/jsx-runtime");
 var CommandKey = ({
   keyboardKey,
   size: size2,
   color,
-  backgroundColor
+  backgroundColor: backgroundColor2
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
     StyledCommandKey,
     {
       color,
       size: size2,
-      backgroundColor,
+      backgroundColor: backgroundColor2,
       children: keyboardKey
     }
   );
 };
-var StyledCommandKey = import_styled11.default.div`
+var StyledCommandKey = import_styled13.default.div`
   height: 24px;
   display: flex;
   align-items: center;
@@ -2747,68 +2988,11 @@ var StyledCommandKey = import_styled11.default.div`
   padding: 3px 6px;
 `;
 
-// src/components/CopyToClipboardButton.tsx
-var import_styled12 = __toESM(require("@emotion/styled"), 1);
-var import_nanoid = require("nanoid");
-var import_react15 = require("react");
-var import_jsx_runtime13 = 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_react15.useState)(originalTooltipContent);
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
-      Button2,
-      {
-        type: "button",
-        onClick: () => {
-          void (() => __async(void 0, null, function* () {
-            try {
-              yield navigator.clipboard.writeText(props.value);
-              setTooltipContent("Copied!");
-            } catch (err) {
-              setTooltipContent("Unable to copy");
-            }
-            setTimeout(() => {
-              setTooltipContent(originalTooltipContent);
-            }, 2e3);
-          }))();
-        },
-        css: props.buttonCSS,
-        ml: props.ml,
-        "data-tooltip-id": id,
-        children: [
-          props.children ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Children, { children: props.children }) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Icon, { name: icon, width: props.isSm ? 12 : 16 })
-        ]
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-      LightTooltip,
-      {
-        id,
-        place: props.place || "right",
-        content: tooltipContent
-      }
-    )
-  ] });
-};
-var Children = import_styled12.default.span`
-  margin-right: 4px;
-`;
-var Button2 = (0, import_styled12.default)(UnstyledButton)`
-  background: rgba(0, 0, 0, 0);
-  vertical-align: middle;
-  ${({ ml }) => ml ? `margin-left: ${ml}px` : ""};
-`;
-
 // src/components/CurrencyAmount.tsx
 var import_client = require("@apollo/client");
-var import_styled13 = __toESM(require("@emotion/styled"), 1);
+var import_styled14 = __toESM(require("@emotion/styled"), 1);
 var import_core = require("@lightsparkdev/core");
-var import_jsx_runtime14 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime15 = require("@emotion/react/jsx-runtime");
 function CurrencyAmount({
   amount,
   displayUnit = import_core.CurrencyUnit.SATOSHI,
@@ -2840,18 +3024,18 @@ function CurrencyAmount({
   if (showUnits) {
     formattedNumber += ` ${shorttext(unit, value)}`;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(StyledCurrencyAmount, { ml, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(StyledCurrencyAmount, { ml, children: [
     includeEstimatedIndicator && "Est. ",
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(CurrencyIcon, { unit }),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(CurrencyIcon, { unit }),
     formattedNumber
   ] });
 }
 var CurrencyIcon = ({ unit }) => {
   switch (unit) {
     case import_core.CurrencyUnit.BITCOIN:
-      return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Icon, { name: "BitcoinB", width: 8, verticalAlign: -2, mr: 2 });
+      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Icon, { name: "BitcoinB", width: 8, verticalAlign: -2, mr: 2 });
     case import_core.CurrencyUnit.SATOSHI:
-      return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Icon, { name: "Satoshi", width: 8, verticalAlign: -2, mr: 2 });
+      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Icon, { name: "Satoshi", width: 8, verticalAlign: -2, mr: 2 });
     default:
       return null;
   }
@@ -2869,10 +3053,11 @@ var shorttext = (unit, value) => {
       return `sat${pl ? "s" : ""}`;
     case import_core.CurrencyUnit.MILLISATOSHI:
       return `msat${pl ? "s" : ""}`;
+    default:
+      return unit;
   }
-  return unit;
 };
-var StyledCurrencyAmount = import_styled13.default.span`
+var StyledCurrencyAmount = import_styled14.default.span`
   color: inherit !important;
   white-space: nowrap;
   font-feature-settings:
@@ -2893,19 +3078,38 @@ CurrencyAmount.fragments = {
 };
 
 // src/components/GradientCardHeader.tsx
-var import_styled14 = __toESM(require("@emotion/styled"), 1);
-var import_jsx_runtime15 = require("@emotion/react/jsx-runtime");
+var import_styled16 = __toESM(require("@emotion/styled"), 1);
+
+// src/components/StatusIndicator.tsx
+var import_styled15 = __toESM(require("@emotion/styled"), 1);
+var import_jsx_runtime16 = require("@emotion/react/jsx-runtime");
+function StatusIndicator({
+  color = "success",
+  text,
+  size: size2 = 12,
+  fontWeight = 700
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(StyledStatusIndicator, { color, size: size2, fontWeight, children: text });
+}
+var StyledStatusIndicator = import_styled15.default.div`
+  color: ${({ theme, color }) => theme[color]};
+  font-size: ${({ size: size2 }) => pxToRems(size2)};
+  font-weight: ${({ fontWeight }) => fontWeight};
+`;
+
+// src/components/GradientCardHeader.tsx
+var import_jsx_runtime17 = require("@emotion/react/jsx-runtime");
 function GradientCardHeader(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(CardHeaderWrapper, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Gradients, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { children: [
-      props.status,
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(CardHeaderTitle, { children: props.title })
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(CardHeaderWrapper, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Gradients, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { children: [
+      props.status && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(StatusIndicator, __spreadValues({}, props.status)),
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(CardHeaderTitle, { children: props.title })
     ] }),
     props.children
   ] });
 }
-var CardHeaderWrapper = import_styled14.default.div`
+var CardHeaderWrapper = import_styled16.default.div`
   position: relative;
   display: flex;
   flex-direction: column;
@@ -2915,7 +3119,7 @@ var CardHeaderWrapper = import_styled14.default.div`
   color: white;
   height: 264px;
 `;
-var CardHeaderTitle = import_styled14.default.h3`
+var CardHeaderTitle = import_styled16.default.h3`
   font-size: 21px;
   font-weight: 800;
   color: white;
@@ -2924,12 +3128,12 @@ var CardHeaderTitle = import_styled14.default.h3`
   position: relative;
 `;
 var Gradients = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { style: { position: "absolute", top: 0, left: 0, right: 0, bottom: 0 }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(BackgroundGradients, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(AccentGradients, {})
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { style: { position: "absolute", top: 0, left: 0, right: 0, bottom: 0 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(BackgroundGradients, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(AccentGradients, {})
   ] });
 };
-var BackgroundGradients = import_styled14.default.div`
+var BackgroundGradients = import_styled16.default.div`
   &:before,
   &:after {
     content: "";
@@ -2964,7 +3168,7 @@ var BackgroundGradients = import_styled14.default.div`
     );
   }
 `;
-var AccentGradients = import_styled14.default.div`
+var AccentGradients = import_styled16.default.div`
   position: absolute;
   top: 0;
   left: 0;
@@ -3005,18 +3209,18 @@ var AccentGradients = import_styled14.default.div`
 `;
 
 // src/components/LightboxImage.tsx
-var import_styled15 = __toESM(require("@emotion/styled"), 1);
-var import_react16 = require("react");
-var import_jsx_runtime16 = require("@emotion/react/jsx-runtime");
+var import_styled17 = __toESM(require("@emotion/styled"), 1);
+var import_react17 = require("react");
+var import_jsx_runtime18 = require("@emotion/react/jsx-runtime");
 var LightboxImage = ({ children }) => {
-  const [isOpen, setIsOpen] = (0, import_react16.useState)(false);
-  const [boundingRect, setBoundingRect] = (0, import_react16.useState)({
+  const [isOpen, setIsOpen] = (0, import_react17.useState)(false);
+  const [boundingRect, setBoundingRect] = (0, import_react17.useState)({
     x: 0,
     y: 0,
     width: 0,
     height: 0
   });
-  const imageRef = (0, import_react16.useRef)(null);
+  const imageRef = (0, import_react17.useRef)(null);
   const handleMouseUp = () => {
     setIsOpen(!isOpen);
   };
@@ -3032,12 +3236,12 @@ var LightboxImage = ({ children }) => {
       });
     }
   };
-  (0, import_react16.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     handleSetBoundingRect(imageRef);
   }, [imageRef]);
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(DummyImage, { isOpen, boundingRect }),
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(DummyImage, { isOpen, boundingRect }),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
       StyledImage,
       {
         isOpen,
@@ -3048,13 +3252,13 @@ var LightboxImage = ({ children }) => {
         children
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Lightbox, { isOpen, onClick: handleMouseUp })
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Lightbox, { isOpen, onClick: handleMouseUp })
   ] });
 };
-var DummyImage = import_styled15.default.div`
+var DummyImage = import_styled17.default.div`
   ${(props) => props.isOpen ? `height: ${props.boundingRect.height}px; width: ${props.boundingRect.width}px;` : ``}
 `;
-var StyledImage = import_styled15.default.div`
+var StyledImage = import_styled17.default.div`
   display: flex;
   justify-content: start;
   align-items: center;
@@ -3102,7 +3306,7 @@ var StyledImage = import_styled15.default.div`
     }
   }
 `;
-var Lightbox = import_styled15.default.div`
+var Lightbox = import_styled17.default.div`
   transition: opacity 0.2s ease-out;
   position: fixed;
   opacity: 0;
@@ -3125,11 +3329,11 @@ var Lightbox = import_styled15.default.div`
 `;
 
 // src/components/LightsparkProvider.tsx
-var import_react19 = require("@emotion/react");
+var import_react20 = require("@emotion/react");
 
 // src/styles/global.tsx
-var import_react17 = require("@emotion/react");
-var import_react18 = require("react");
+var import_react18 = require("@emotion/react");
+var import_react19 = require("react");
 var import_react_tooltip2 = require("react-tooltip/dist/react-tooltip.css");
 var import_fonts = require("../static/fonts.css");
 
@@ -3139,8 +3343,8 @@ var cssVars = {
 };
 
 // src/styles/global.tsx
-var import_jsx_runtime17 = require("@emotion/react/jsx-runtime");
-var globalComponentStyles = ({ theme }) => import_react17.css`
+var import_jsx_runtime19 = require("@emotion/react/jsx-runtime");
+var globalComponentStyles = ({ theme }) => import_react18.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 {
@@ -3215,9 +3419,9 @@ var globalComponentStyles = ({ theme }) => import_react17.css`
   }
 `;
 function GlobalStyles() {
-  const theme = (0, import_react17.useTheme)();
+  const theme = (0, import_react18.useTheme)();
   const bg = useThemeBg();
-  (0, import_react18.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     const documentHeight = () => {
       const doc = document.documentElement;
       doc.style.setProperty(cssVars.docHeight, `${window.innerHeight}px`);
@@ -3226,7 +3430,7 @@ function GlobalStyles() {
     documentHeight();
     return () => window.removeEventListener("resize", documentHeight);
   }, []);
-  const globalStyles = import_react17.css`
+  const globalStyles = import_react18.css`
     ${globalComponentStyles({ theme })}
 
     :root {
@@ -3253,29 +3457,29 @@ function GlobalStyles() {
       height: 100%;
     }
   `;
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react17.Global, { styles: globalStyles });
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react18.Global, { styles: globalStyles });
 }
 
 // src/components/LightsparkProvider.tsx
-var import_jsx_runtime18 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime20 = require("@emotion/react/jsx-runtime");
 function LightsparkProvider({ children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_react19.ThemeProvider, { theme: themes.light, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(GlobalStyles, {}),
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react20.ThemeProvider, { theme: themes.light, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(GlobalStyles, {}),
     children
   ] });
 }
 
 // src/components/Modal.tsx
-var import_styled17 = __toESM(require("@emotion/styled"), 1);
-var import_react23 = __toESM(require("react"), 1);
+var import_styled19 = __toESM(require("@emotion/styled"), 1);
+var import_react24 = __toESM(require("react"), 1);
 var import_react_dom2 = __toESM(require("react-dom"), 1);
 
 // src/hooks/useLiveRef.tsx
-var import_react20 = require("react");
+var import_react21 = require("react");
 function useLiveRef() {
-  const [ready, setReady] = (0, import_react20.useState)(false);
-  const ref = (0, import_react20.useRef)(null);
-  const refCb = (0, import_react20.useCallback)((node) => {
+  const [ready, setReady] = (0, import_react21.useState)(false);
+  const ref = (0, import_react21.useRef)(null);
+  const refCb = (0, import_react21.useCallback)((node) => {
     if (node !== null) {
       ref.current = node;
       setReady(true);
@@ -3285,8 +3489,8 @@ function useLiveRef() {
 }
 
 // src/utils/toReactNodes.tsx
-var import_react21 = require("react");
-var import_jsx_runtime19 = require("@emotion/react/jsx-runtime");
+var import_react22 = require("react");
+var import_jsx_runtime21 = require("@emotion/react/jsx-runtime");
 var ToReactNodesTypes = {
   Link: "link"
 };
@@ -3294,22 +3498,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_runtime19.jsx)(import_react21.Fragment, { children: node.split("\n").map((str, j, strArr) => /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react21.Fragment, { children: [
+      return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react22.Fragment, { children: node.split("\n").map((str, j, strArr) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_react22.Fragment, { children: [
         str,
-        j < strArr.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("br", {})
+        j < strArr.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("br", {})
       ] }, `str-${i}-break-${j}`)) }, `str-${i}`);
     } else if (node.type === ToReactNodesTypes.Link) {
-      return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Link, { to: node.to, children: node.text }, `link-${i}`);
+      return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Link, { to: node.to, children: node.text }, `link-${i}`);
     }
     return null;
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react21.Fragment, { children: reactNodes });
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react22.Fragment, { children: reactNodes });
 }
 
 // src/components/ProgressBar.tsx
-var import_styled16 = __toESM(require("@emotion/styled"), 1);
-var import_react22 = require("react");
-var import_jsx_runtime20 = require("@emotion/react/jsx-runtime");
+var import_styled18 = __toESM(require("@emotion/styled"), 1);
+var import_react23 = require("react");
+var import_jsx_runtime22 = require("@emotion/react/jsx-runtime");
 var defaultProps2 = {
   isSm: false,
   stepDuration: 0.5
@@ -3320,8 +3524,8 @@ function ProgressBar({
   isSm = defaultProps2.isSm,
   stepDuration = defaultProps2.stepDuration
 }) {
-  const [percentage, setPercentage] = (0, import_react22.useState)(5);
-  (0, import_react22.useEffect)(() => {
+  const [percentage, setPercentage] = (0, import_react23.useState)(5);
+  (0, import_react23.useEffect)(() => {
     if (progressPercentage !== void 0) {
       setPercentage(progressPercentage);
     } else {
@@ -3330,7 +3534,7 @@ function ProgressBar({
       }, 0);
     }
   }, [progressPercentage]);
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ProgressBarContainer, { isSm, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Bar, { isSm, percentage, stepDuration, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ProgressBarContainer, { isSm, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Bar, { isSm, percentage, stepDuration, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     BarBg,
     {
       background,
@@ -3341,7 +3545,7 @@ function ProgressBar({
   ) }) });
 }
 ProgressBar.defaultProps = defaultProps2;
-var ProgressBarContainer = import_styled16.default.div`
+var ProgressBarContainer = import_styled18.default.div`
   ${standardBorderRadius(16)}
   background-color: ${({ theme }) => themeOr(theme.c05Neutral, theme.c1Neutral)({ theme })};
   box-sizing: border-box;
@@ -3351,7 +3555,7 @@ var ProgressBarContainer = import_styled16.default.div`
   width: 100%;
   position: relative;
 `;
-var BarBg = import_styled16.default.div`
+var BarBg = import_styled18.default.div`
   ${standardBorderRadius(16)}
   width: ${({ percentage }) => 100 / percentage * 100}%;
   height: 100%;
@@ -3365,7 +3569,7 @@ var BarBg = import_styled16.default.div`
     #3f2e7e 115.32%
   )`};
 `;
-var Bar = import_styled16.default.div`
+var Bar = import_styled18.default.div`
   ${standardBorderRadius(16)}
   overflow: hidden;
   box-sizing: border-box;
@@ -3377,7 +3581,7 @@ var Bar = import_styled16.default.div`
 `;
 
 // src/components/Modal.tsx
-var import_jsx_runtime21 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime23 = require("@emotion/react/jsx-runtime");
 function Modal({
   visible,
   title,
@@ -3399,24 +3603,24 @@ function Modal({
   width = 460,
   progressBar
 }) {
-  const visibleChangedRef = (0, import_react23.useRef)(false);
-  const nodeRef = (0, import_react23.useRef)(null);
+  const visibleChangedRef = (0, import_react24.useRef)(false);
+  const nodeRef = (0, import_react24.useRef)(null);
   const [defaultFirstFocusRef, defaultFirstFocusRefCb] = useLiveRef();
   const ref = firstFocusRef || defaultFirstFocusRef;
-  const [nodeReady, setNodeReady] = import_react23.default.useState(false);
-  const overlayRef = (0, import_react23.useRef)(null);
-  const prevFocusedElement = (0, import_react23.useRef)();
-  const modalContainerRef = (0, import_react23.useRef)(null);
+  const [nodeReady, setNodeReady] = import_react24.default.useState(false);
+  const overlayRef = (0, import_react24.useRef)(null);
+  const prevFocusedElement = (0, import_react24.useRef)();
+  const modalContainerRef = (0, import_react24.useRef)(null);
   const bp2 = useBreakpoints();
   const isSm = bp2.current("sm" /* sm */);
   const formattedDescription = description ? toReactNodes(description) : null;
-  (0, import_react23.useEffect)(() => {
+  (0, import_react24.useEffect)(() => {
     if (visible !== visibleChangedRef.current) {
       visibleChangedRef.current = visible;
     }
   }, [visible]);
   const visibleChanged = visible !== visibleChangedRef.current;
-  (0, import_react23.useEffect)(() => {
+  (0, import_react24.useEffect)(() => {
     prevFocusedElement.current = document.activeElement;
     if (!nodeRef.current) {
       nodeRef.current = document.createElement("div");
@@ -3430,7 +3634,7 @@ function Modal({
       }
     };
   }, []);
-  (0, import_react23.useEffect)(() => {
+  (0, import_react24.useEffect)(() => {
     const handleOutsideClick = (event) => {
       if (visible && overlayRef.current && event.target && overlayRef.current.contains(event.target) && !nonDismissable) {
         onClose();
@@ -3467,7 +3671,7 @@ function Modal({
       }
     };
   }, [onClose, visible, nonDismissable]);
-  (0, import_react23.useLayoutEffect)(() => {
+  (0, import_react24.useLayoutEffect)(() => {
     if (visible) {
       if (visibleChanged) {
         prevFocusedElement.current = document.activeElement;
@@ -3496,9 +3700,9 @@ function Modal({
       onClose();
     }
   }
-  const modalContent = /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_react23.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ModalOverlay, { ref: overlayRef }),
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  const modalContent = /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react24.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ModalOverlay, { ref: overlayRef }),
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
       ModalContainer,
       {
         "aria-modal": true,
@@ -3506,22 +3710,22 @@ function Modal({
         tabIndex: -1,
         role: "dialog",
         ref: modalContainerRef,
-        children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(ModalContent, { width, ghost, children: [
-          !firstFocusRef && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(DefaultFocusTarget, { ref: defaultFirstFocusRefCb }),
-          !(nonDismissable || ghost) && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CloseButton, { onClick: onClickCloseButton, type: "button", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Icon, { name: "Close", width: 9 }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(ModalContentInner, { ghost, children: [
-            progressBar ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { css: { marginBottom: "20px" }, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(ModalContent, { width, ghost, children: [
+          !firstFocusRef && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(DefaultFocusTarget, { ref: defaultFirstFocusRefCb }),
+          !(nonDismissable || ghost) && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(CloseButton, { onClick: onClickCloseButton, type: "button", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Icon, { name: "Close", width: 9 }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(ModalContentInner, { ghost, children: [
+            progressBar ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { css: { marginBottom: "20px" }, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
               ProgressBar,
               {
                 progressPercentage: progressBar.progressPercentage,
                 isSm: progressBar.isSm
               }
             ) }) : null,
-            title ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("h4", { children: title }) : null,
-            formattedDescription ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Description, { children: formattedDescription }) : null,
-            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { children }),
-            onSubmit || onCancel ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(ModalButtonRow, { children: [
-              !isSm && !cancelHidden && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+            title ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("h4", { children: title }) : null,
+            formattedDescription ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Description, { children: formattedDescription }) : null,
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { children }),
+            onSubmit || onCancel ? /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(ModalButtonRow, { children: [
+              !isSm && !cancelHidden && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
                 Button,
                 {
                   disabled: cancelDisabled,
@@ -3529,7 +3733,7 @@ function Modal({
                   text: cancelText
                 }
               ),
-              onSubmit && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+              onSubmit && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
                 Button,
                 {
                   disabled: submitDisabled,
@@ -3539,7 +3743,7 @@ function Modal({
                   type: "submit"
                 }
               ),
-              isSm && !cancelHidden && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Button, { onClick: onClose, text: cancelText })
+              isSm && !cancelHidden && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Button, { onClick: onClose, text: cancelText })
             ] }) : null
           ] })
         ] })
@@ -3547,17 +3751,17 @@ function Modal({
     )
   ] });
   return visible && nodeReady && nodeRef.current ? import_react_dom2.default.createPortal(
-    onSubmit ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("form", { onSubmit: onSubmitForm, children: modalContent }) : modalContent,
+    onSubmit ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("form", { onSubmit: onSubmitForm, children: modalContent }) : modalContent,
     nodeRef.current
   ) : null;
 }
-var DefaultFocusTarget = (0, import_styled17.default)(UnstyledButton)`
+var DefaultFocusTarget = (0, import_styled19.default)(UnstyledButton)`
   position: absolute;
   top: -30px;
   width: 0;
   height: 0;
 `;
-var ModalOverlay = import_styled17.default.div`
+var ModalOverlay = import_styled19.default.div`
   position: fixed;
   bottom: 0;
   left: 0;
@@ -3567,7 +3771,7 @@ var ModalOverlay = import_styled17.default.div`
   background: rgba(0, 0, 0, 0.5);
   backdrop-filter: blur(2px);
 `;
-var ModalContainer = import_styled17.default.div`
+var ModalContainer = import_styled19.default.div`
   pointer-events: none;
   position: fixed;
   top: 0;
@@ -3585,14 +3789,14 @@ var ModalContainer = import_styled17.default.div`
   padding-top: ${standardContentInset.smPx}px;
 `;
 var contentTopMarginPx = 24;
-var Description = import_styled17.default.div`
+var Description = import_styled19.default.div`
   color: ${({ theme }) => theme.mcNeutral};
   margin-top: 4px;
   & + * {
     margin-top: ${contentTopMarginPx}px;
   }
 `;
-var ModalButtonRow = import_styled17.default.div`
+var ModalButtonRow = import_styled19.default.div`
   margin-top: 32px;
   ${bp.minSm(`display: flex;`)}
   gap: 10px;
@@ -3610,7 +3814,7 @@ var ModalButtonRow = import_styled17.default.div`
     `)}
   }
 `;
-var ModalContent = import_styled17.default.div`
+var ModalContent = import_styled19.default.div`
   ${overflowAutoWithoutScrollbars}
   ${standardContentInset.smCSS}
   ${standardBorderRadius(16)}
@@ -3632,12 +3836,12 @@ var ModalContent = import_styled17.default.div`
     }
   }
 `;
-var CloseButton = (0, import_styled17.default)(UnstyledButton)`
+var CloseButton = (0, import_styled19.default)(UnstyledButton)`
   ${standardFocusOutline}
   width: 24px;
   height: 24px;
 `;
-var ModalContentInner = import_styled17.default.div`
+var ModalContentInner = import_styled19.default.div`
   ${(props) => props.ghost ? "" : "padding: 32px 24px 0;"}
   ${(props) => props.ghost ? "" : `${bp.sm(`
     padding-left: 10px;
@@ -3646,9 +3850,9 @@ var ModalContentInner = import_styled17.default.div`
 `;
 
 // src/components/Pill.tsx
-var import_styled18 = __toESM(require("@emotion/styled"), 1);
-var import_react24 = require("react");
-var import_jsx_runtime22 = require("@emotion/react/jsx-runtime");
+var import_styled20 = __toESM(require("@emotion/styled"), 1);
+var import_react25 = require("react");
+var import_jsx_runtime24 = require("@emotion/react/jsx-runtime");
 function Pill({
   text,
   onDeleteMouseDown,
@@ -3667,8 +3871,8 @@ function Pill({
   onBlurTextInput = () => {
   }
 }) {
-  const textInputRef = (0, import_react24.useRef)(null);
-  (0, import_react24.useEffect)(() => {
+  const textInputRef = (0, import_react25.useRef)(null);
+  (0, import_react25.useEffect)(() => {
     if (isEditing && textInputRef.current) {
       textInputRef.current.focus();
     }
@@ -3687,7 +3891,7 @@ function Pill({
       }
     }
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
     StyledPill,
     {
       hasIcon: Boolean(icon || loading || onDeleteMouseDown),
@@ -3699,7 +3903,7 @@ function Pill({
         }
       },
       children: [
-        isEditing ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        isEditing ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
           PillInput,
           {
             value: text,
@@ -3708,14 +3912,14 @@ function Pill({
             onBlur: onBlurTextInput,
             ref: textInputRef
           }
-        ) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(PillText, { children: text }),
-        (icon || loading || onDeleteMouseDown) && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+        ) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(PillText, { children: text }),
+        (icon || loading || onDeleteMouseDown) && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
           PillIconContainer,
           {
             hasIconInset: Boolean(icon && !loading && !onDeleteMouseDown),
             children: [
-              loading && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Loading, { size: 16.1, center: false, ml: 5 }),
-              !loading && onDeleteMouseDown && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+              loading && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Loading, { size: 16.1, center: false, ml: 5 }),
+              !loading && onDeleteMouseDown && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                 UnstyledButton,
                 {
                   onMouseDown: handleOnDeleteMouseDown,
@@ -3726,10 +3930,10 @@ function Pill({
                     padding: "10px",
                     marginRight: "-10px"
                   },
-                  children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Icon, { name: "DeleteIcon", width: 16.1 })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Icon, { name: "DeleteIcon", width: 16.1 })
                 }
               ),
-              !loading && icon && !onDeleteMouseDown && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Icon, { name: icon, width: 16.1, color: colors.white })
+              !loading && icon && !onDeleteMouseDown && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Icon, { name: icon, width: 16.1, color: colors.white })
             ]
           }
         )
@@ -3737,7 +3941,7 @@ function Pill({
     }
   );
 }
-var PillText = import_styled18.default.div`
+var PillText = import_styled20.default.div`
   /* For mobile ensure empty values don't prevent div from having height: */
   height: 1.2rem;
   min-width: 100px;
@@ -3747,7 +3951,7 @@ var PillText = import_styled18.default.div`
   overflow: hidden;
   font-weight: 600;
 `;
-var StyledPill = import_styled18.default.div`
+var StyledPill = import_styled20.default.div`
   * + & {
     margin-top: 16px;
   }
@@ -3761,7 +3965,7 @@ var StyledPill = import_styled18.default.div`
   cursor: ${({ cursor }) => cursor};
   position: relative;
 `;
-var PillIconContainer = import_styled18.default.div`
+var PillIconContainer = import_styled20.default.div`
   ${flexCenter}
   ${({ hasIconInset }) => hasIconInset ? `
     background-color: ${colors.blue43};
@@ -3772,7 +3976,7 @@ var PillIconContainer = import_styled18.default.div`
   margin-left: 12px;
   position: absolute;
 `;
-var PillInput = import_styled18.default.input`
+var PillInput = import_styled20.default.input`
   background-color: transparent;
   border: none;
   outline: none;
@@ -3790,11 +3994,11 @@ var PillInput = import_styled18.default.input`
 `;
 
 // src/components/SecretContainer.tsx
-var import_styled19 = __toESM(require("@emotion/styled"), 1);
-var import_jsx_runtime23 = require("@emotion/react/jsx-runtime");
+var import_styled21 = __toESM(require("@emotion/styled"), 1);
+var import_jsx_runtime25 = require("@emotion/react/jsx-runtime");
 function SecretContainer(props) {
-  return props.secret ? /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(StyledSecretContainer, { hasSecret: true, success: props.success, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  return props.secret ? /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(StyledSecretContainer, { hasSecret: true, success: props.success, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
       "span",
       {
         style: {
@@ -3806,10 +4010,10 @@ function SecretContainer(props) {
         children: props.secret
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(CopyToClipboardButton, { value: props.secret, isSm: true, ml: 4 })
-  ] }) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(StyledSecretContainer, { hasSecret: false, children: "There are no tokens associated with this account" });
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(CopyToClipboardButton, { value: props.secret, isSm: true, ml: 4 })
+  ] }) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(StyledSecretContainer, { hasSecret: false, children: "There are no tokens associated with this account" });
 }
-var StyledSecretContainer = import_styled19.default.div`
+var StyledSecretContainer = import_styled21.default.div`
   background-color: ${({ theme, hasSecret, success }) => hasSecret ? success ? theme.success : theme.c05Neutral : theme.bg};
   ${standardBorderRadius(8)}
   padding: 18px 20px;
@@ -3821,14 +4025,14 @@ var StyledSecretContainer = import_styled19.default.div`
 `;
 
 // src/components/TextIconAligner.tsx
-var import_jsx_runtime24 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime26 = require("@emotion/react/jsx-runtime");
 function TextIconAligner({
   text,
   rightIcon,
   leftIcon,
   onClick
 }) {
-  const leftIconNode = leftIcon ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+  const leftIconNode = leftIcon ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
     Icon,
     {
       name: leftIcon.name,
@@ -3837,7 +4041,7 @@ function TextIconAligner({
       color: leftIcon.color
     }
   ) : null;
-  const rightIconNode = rightIcon ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+  const rightIconNode = rightIcon ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
     Icon,
     {
       name: rightIcon.name,
@@ -3846,7 +4050,7 @@ function TextIconAligner({
       color: rightIcon.color
     }
   ) : null;
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
     "span",
     {
       css: {
@@ -3876,6 +4080,7 @@ function TextIconAligner({
   CardPageFullWidth,
   CardPageRightContentInner,
   CardPageSubtitle,
+  CodeBlock,
   Collapsible,
   CommandKey,
   CopyToClipboardButton,
@@ -3884,6 +4089,7 @@ function TextIconAligner({
   GradientCardHeader,
   Icon,
   IconContainer,
+  InlineCode,
   LightTooltip,
   LightboxImage,
   LightsparkProvider,
@@ -3893,7 +4099,9 @@ function TextIconAligner({
   Pill,
   ProgressBar,
   SecretContainer,
+  StatusIndicator,
   StyledButton,
+  StyledCodeBlock,
   TextIconAligner,
   UnstyledButton
 });