@lightsparkdev/ui 0.0.12 → 0.0.13

package/dist/components/StatusIndicator.d.cts

@@ -0,0 +1,12 @@
+import * as _emotion_react_jsx_runtime from '@emotion/react/jsx-runtime';
+
+type StatusIndicatorColors = "success" | "warning" | "danger" | "text" | "c4Neutral";
+type StatusIndicatorProps = {
+    color?: StatusIndicatorColors;
+    text: string;
+    size?: 12 | 14;
+    fontWeight?: 500 | 700;
+};
+declare function StatusIndicator({ color, text, size, fontWeight, }: StatusIndicatorProps): _emotion_react_jsx_runtime.JSX.Element;
+
+export { StatusIndicator, StatusIndicatorColors, StatusIndicatorProps };

package/dist/components/StatusIndicator.d.ts

@@ -0,0 +1,12 @@
+import * as _emotion_react_jsx_runtime from '@emotion/react/jsx-runtime';
+
+type StatusIndicatorColors = "success" | "warning" | "danger" | "text" | "c4Neutral";
+type StatusIndicatorProps = {
+    color?: StatusIndicatorColors;
+    text: string;
+    size?: 12 | 14;
+    fontWeight?: 500 | 700;
+};
+declare function StatusIndicator({ color, text, size, fontWeight, }: StatusIndicatorProps): _emotion_react_jsx_runtime.JSX.Element;
+
+export { StatusIndicator, StatusIndicatorColors, StatusIndicatorProps };

package/dist/components/StatusIndicator.js

@@ -0,0 +1,12 @@
+import {
+  StatusIndicator
+} from "../chunk-34CIJVQQ.js";
+import "../chunk-FCZJILMW.js";
+import "../chunk-JK4BP73A.js";
+import "../chunk-2VBDEO6M.js";
+import "../chunk-E4EXM4SY.js";
+import "../chunk-JSGRNWSB.js";
+import "../chunk-CIGAQ47A.js";
+export {
+  StatusIndicator
+};

package/dist/components/index.cjs

@@ -97,6 +97,7 @@ __export(components_exports, {
   Pill: () => Pill,
   ProgressBar: () => ProgressBar,
   SecretContainer: () => SecretContainer,
+  StatusIndicator: () => StatusIndicator,
   StyledButton: () => StyledButton,
   StyledCodeBlock: () => StyledCodeBlock,
   TextIconAligner: () => TextIconAligner,
@@ -1460,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;
@@ -1513,6 +1514,7 @@ function replaceParams(to, params) {
 }
 function Link({
   to,
+  id,
   externalLink,
   params,
   children,
@@ -1545,6 +1547,7 @@ function Link({
     import_react_router_dom.Link,
     {
       to: toStr,
+      id,
       css: css9,
       onClick,
       className,
@@ -1887,6 +1890,7 @@ function Button({
   ghost = false,
   text,
   to,
+  id,
   hash,
   href,
   toParams,
@@ -1943,6 +1947,7 @@ function Button({
   ] });
   const isSingleCharRoundButton = Boolean(text && text.length === 1 && !icon);
   const commonProps = {
+    id,
     backgroundColor: backgroundColor2,
     color,
     hoverColor,
@@ -3048,8 +3053,9 @@ 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_styled14.default.span`
   color: inherit !important;
@@ -3072,19 +3078,38 @@ CurrencyAmount.fragments = {
 };
 
 // src/components/GradientCardHeader.tsx
+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_runtime16.jsxs)(CardHeaderWrapper, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Gradients, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { children: [
-      props.status,
-      /* @__PURE__ */ (0, import_jsx_runtime16.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_styled15.default.div`
+var CardHeaderWrapper = import_styled16.default.div`
   position: relative;
   display: flex;
   flex-direction: column;
@@ -3094,7 +3119,7 @@ var CardHeaderWrapper = import_styled15.default.div`
   color: white;
   height: 264px;
 `;
-var CardHeaderTitle = import_styled15.default.h3`
+var CardHeaderTitle = import_styled16.default.h3`
   font-size: 21px;
   font-weight: 800;
   color: white;
@@ -3103,12 +3128,12 @@ var CardHeaderTitle = import_styled15.default.h3`
   position: relative;
 `;
 var Gradients = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { style: { position: "absolute", top: 0, left: 0, right: 0, bottom: 0 }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(BackgroundGradients, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime16.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_styled15.default.div`
+var BackgroundGradients = import_styled16.default.div`
   &:before,
   &:after {
     content: "";
@@ -3143,7 +3168,7 @@ var BackgroundGradients = import_styled15.default.div`
     );
   }
 `;
-var AccentGradients = import_styled15.default.div`
+var AccentGradients = import_styled16.default.div`
   position: absolute;
   top: 0;
   left: 0;
@@ -3184,9 +3209,9 @@ var AccentGradients = import_styled15.default.div`
 `;
 
 // src/components/LightboxImage.tsx
-var import_styled16 = __toESM(require("@emotion/styled"), 1);
+var import_styled17 = __toESM(require("@emotion/styled"), 1);
 var import_react17 = require("react");
-var import_jsx_runtime17 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime18 = require("@emotion/react/jsx-runtime");
 var LightboxImage = ({ children }) => {
   const [isOpen, setIsOpen] = (0, import_react17.useState)(false);
   const [boundingRect, setBoundingRect] = (0, import_react17.useState)({
@@ -3214,9 +3239,9 @@ var LightboxImage = ({ children }) => {
   (0, import_react17.useEffect)(() => {
     handleSetBoundingRect(imageRef);
   }, [imageRef]);
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(DummyImage, { isOpen, boundingRect }),
-    /* @__PURE__ */ (0, import_jsx_runtime17.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,
@@ -3227,13 +3252,13 @@ var LightboxImage = ({ children }) => {
         children
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Lightbox, { isOpen, onClick: handleMouseUp })
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Lightbox, { isOpen, onClick: handleMouseUp })
   ] });
 };
-var DummyImage = import_styled16.default.div`
+var DummyImage = import_styled17.default.div`
   ${(props) => props.isOpen ? `height: ${props.boundingRect.height}px; width: ${props.boundingRect.width}px;` : ``}
 `;
-var StyledImage = import_styled16.default.div`
+var StyledImage = import_styled17.default.div`
   display: flex;
   justify-content: start;
   align-items: center;
@@ -3281,7 +3306,7 @@ var StyledImage = import_styled16.default.div`
     }
   }
 `;
-var Lightbox = import_styled16.default.div`
+var Lightbox = import_styled17.default.div`
   transition: opacity 0.2s ease-out;
   position: fixed;
   opacity: 0;
@@ -3318,7 +3343,7 @@ var cssVars = {
 };
 
 // src/styles/global.tsx
-var import_jsx_runtime18 = require("@emotion/react/jsx-runtime");
+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");
 
@@ -3432,20 +3457,20 @@ function GlobalStyles() {
       height: 100%;
     }
   `;
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react18.Global, { styles: globalStyles });
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react18.Global, { styles: globalStyles });
 }
 
 // src/components/LightsparkProvider.tsx
-var import_jsx_runtime19 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime20 = require("@emotion/react/jsx-runtime");
 function LightsparkProvider({ children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react20.ThemeProvider, { theme: themes.light, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime19.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_styled18 = __toESM(require("@emotion/styled"), 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);
 
@@ -3465,7 +3490,7 @@ function useLiveRef() {
 
 // src/utils/toReactNodes.tsx
 var import_react22 = require("react");
-var import_jsx_runtime20 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime21 = require("@emotion/react/jsx-runtime");
 var ToReactNodesTypes = {
   Link: "link"
 };
@@ -3473,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_runtime20.jsx)(import_react22.Fragment, { children: node.split("\n").map((str, j, strArr) => /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react22.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_runtime20.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_runtime20.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_runtime20.jsx)(import_react22.Fragment, { children: reactNodes });
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react22.Fragment, { children: reactNodes });
 }
 
 // src/components/ProgressBar.tsx
-var import_styled17 = __toESM(require("@emotion/styled"), 1);
+var import_styled18 = __toESM(require("@emotion/styled"), 1);
 var import_react23 = require("react");
-var import_jsx_runtime21 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime22 = require("@emotion/react/jsx-runtime");
 var defaultProps2 = {
   isSm: false,
   stepDuration: 0.5
@@ -3509,7 +3534,7 @@ function ProgressBar({
       }, 0);
     }
   }, [progressPercentage]);
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ProgressBarContainer, { isSm, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Bar, { isSm, percentage, stepDuration, children: /* @__PURE__ */ (0, import_jsx_runtime21.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,
@@ -3520,7 +3545,7 @@ function ProgressBar({
   ) }) });
 }
 ProgressBar.defaultProps = defaultProps2;
-var ProgressBarContainer = import_styled17.default.div`
+var ProgressBarContainer = import_styled18.default.div`
   ${standardBorderRadius(16)}
   background-color: ${({ theme }) => themeOr(theme.c05Neutral, theme.c1Neutral)({ theme })};
   box-sizing: border-box;
@@ -3530,7 +3555,7 @@ var ProgressBarContainer = import_styled17.default.div`
   width: 100%;
   position: relative;
 `;
-var BarBg = import_styled17.default.div`
+var BarBg = import_styled18.default.div`
   ${standardBorderRadius(16)}
   width: ${({ percentage }) => 100 / percentage * 100}%;
   height: 100%;
@@ -3544,7 +3569,7 @@ var BarBg = import_styled17.default.div`
     #3f2e7e 115.32%
   )`};
 `;
-var Bar = import_styled17.default.div`
+var Bar = import_styled18.default.div`
   ${standardBorderRadius(16)}
   overflow: hidden;
   box-sizing: border-box;
@@ -3556,7 +3581,7 @@ var Bar = import_styled17.default.div`
 `;
 
 // src/components/Modal.tsx
-var import_jsx_runtime22 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime23 = require("@emotion/react/jsx-runtime");
 function Modal({
   visible,
   title,
@@ -3675,9 +3700,9 @@ function Modal({
       onClose();
     }
   }
-  const modalContent = /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_react24.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ModalOverlay, { ref: overlayRef }),
-    /* @__PURE__ */ (0, import_jsx_runtime22.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,
@@ -3685,22 +3710,22 @@ function Modal({
         tabIndex: -1,
         role: "dialog",
         ref: modalContainerRef,
-        children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(ModalContent, { width, ghost, children: [
-          !firstFocusRef && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(DefaultFocusTarget, { ref: defaultFirstFocusRefCb }),
-          !(nonDismissable || ghost) && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(CloseButton, { onClick: onClickCloseButton, type: "button", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Icon, { name: "Close", width: 9 }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(ModalContentInner, { ghost, children: [
-            progressBar ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { css: { marginBottom: "20px" }, children: /* @__PURE__ */ (0, import_jsx_runtime22.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_runtime22.jsx)("h4", { children: title }) : null,
-            formattedDescription ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Description, { children: formattedDescription }) : null,
-            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { children }),
-            onSubmit || onCancel ? /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(ModalButtonRow, { children: [
-              !isSm && !cancelHidden && /* @__PURE__ */ (0, import_jsx_runtime22.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,
@@ -3708,7 +3733,7 @@ function Modal({
                   text: cancelText
                 }
               ),
-              onSubmit && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+              onSubmit && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
                 Button,
                 {
                   disabled: submitDisabled,
@@ -3718,7 +3743,7 @@ function Modal({
                   type: "submit"
                 }
               ),
-              isSm && !cancelHidden && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Button, { onClick: onClose, text: cancelText })
+              isSm && !cancelHidden && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Button, { onClick: onClose, text: cancelText })
             ] }) : null
           ] })
         ] })
@@ -3726,17 +3751,17 @@ function Modal({
     )
   ] });
   return visible && nodeReady && nodeRef.current ? import_react_dom2.default.createPortal(
-    onSubmit ? /* @__PURE__ */ (0, import_jsx_runtime22.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_styled18.default)(UnstyledButton)`
+var DefaultFocusTarget = (0, import_styled19.default)(UnstyledButton)`
   position: absolute;
   top: -30px;
   width: 0;
   height: 0;
 `;
-var ModalOverlay = import_styled18.default.div`
+var ModalOverlay = import_styled19.default.div`
   position: fixed;
   bottom: 0;
   left: 0;
@@ -3746,7 +3771,7 @@ var ModalOverlay = import_styled18.default.div`
   background: rgba(0, 0, 0, 0.5);
   backdrop-filter: blur(2px);
 `;
-var ModalContainer = import_styled18.default.div`
+var ModalContainer = import_styled19.default.div`
   pointer-events: none;
   position: fixed;
   top: 0;
@@ -3764,14 +3789,14 @@ var ModalContainer = import_styled18.default.div`
   padding-top: ${standardContentInset.smPx}px;
 `;
 var contentTopMarginPx = 24;
-var Description = import_styled18.default.div`
+var Description = import_styled19.default.div`
   color: ${({ theme }) => theme.mcNeutral};
   margin-top: 4px;
   & + * {
     margin-top: ${contentTopMarginPx}px;
   }
 `;
-var ModalButtonRow = import_styled18.default.div`
+var ModalButtonRow = import_styled19.default.div`
   margin-top: 32px;
   ${bp.minSm(`display: flex;`)}
   gap: 10px;
@@ -3789,7 +3814,7 @@ var ModalButtonRow = import_styled18.default.div`
     `)}
   }
 `;
-var ModalContent = import_styled18.default.div`
+var ModalContent = import_styled19.default.div`
   ${overflowAutoWithoutScrollbars}
   ${standardContentInset.smCSS}
   ${standardBorderRadius(16)}
@@ -3811,12 +3836,12 @@ var ModalContent = import_styled18.default.div`
     }
   }
 `;
-var CloseButton = (0, import_styled18.default)(UnstyledButton)`
+var CloseButton = (0, import_styled19.default)(UnstyledButton)`
   ${standardFocusOutline}
   width: 24px;
   height: 24px;
 `;
-var ModalContentInner = import_styled18.default.div`
+var ModalContentInner = import_styled19.default.div`
   ${(props) => props.ghost ? "" : "padding: 32px 24px 0;"}
   ${(props) => props.ghost ? "" : `${bp.sm(`
     padding-left: 10px;
@@ -3825,9 +3850,9 @@ var ModalContentInner = import_styled18.default.div`
 `;
 
 // src/components/Pill.tsx
-var import_styled19 = __toESM(require("@emotion/styled"), 1);
+var import_styled20 = __toESM(require("@emotion/styled"), 1);
 var import_react25 = require("react");
-var import_jsx_runtime23 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime24 = require("@emotion/react/jsx-runtime");
 function Pill({
   text,
   onDeleteMouseDown,
@@ -3866,7 +3891,7 @@ function Pill({
       }
     }
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
     StyledPill,
     {
       hasIcon: Boolean(icon || loading || onDeleteMouseDown),
@@ -3878,7 +3903,7 @@ function Pill({
         }
       },
       children: [
-        isEditing ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+        isEditing ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
           PillInput,
           {
             value: text,
@@ -3887,14 +3912,14 @@ function Pill({
             onBlur: onBlurTextInput,
             ref: textInputRef
           }
-        ) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(PillText, { children: text }),
-        (icon || loading || onDeleteMouseDown) && /* @__PURE__ */ (0, import_jsx_runtime23.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_runtime23.jsx)(Loading, { size: 16.1, center: false, ml: 5 }),
-              !loading && onDeleteMouseDown && /* @__PURE__ */ (0, import_jsx_runtime23.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,
@@ -3905,10 +3930,10 @@ function Pill({
                     padding: "10px",
                     marginRight: "-10px"
                   },
-                  children: /* @__PURE__ */ (0, import_jsx_runtime23.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_runtime23.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 })
             ]
           }
         )
@@ -3916,7 +3941,7 @@ function Pill({
     }
   );
 }
-var PillText = import_styled19.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;
@@ -3926,7 +3951,7 @@ var PillText = import_styled19.default.div`
   overflow: hidden;
   font-weight: 600;
 `;
-var StyledPill = import_styled19.default.div`
+var StyledPill = import_styled20.default.div`
   * + & {
     margin-top: 16px;
   }
@@ -3940,7 +3965,7 @@ var StyledPill = import_styled19.default.div`
   cursor: ${({ cursor }) => cursor};
   position: relative;
 `;
-var PillIconContainer = import_styled19.default.div`
+var PillIconContainer = import_styled20.default.div`
   ${flexCenter}
   ${({ hasIconInset }) => hasIconInset ? `
     background-color: ${colors.blue43};
@@ -3951,7 +3976,7 @@ var PillIconContainer = import_styled19.default.div`
   margin-left: 12px;
   position: absolute;
 `;
-var PillInput = import_styled19.default.input`
+var PillInput = import_styled20.default.input`
   background-color: transparent;
   border: none;
   outline: none;
@@ -3969,11 +3994,11 @@ var PillInput = import_styled19.default.input`
 `;
 
 // src/components/SecretContainer.tsx
-var import_styled20 = __toESM(require("@emotion/styled"), 1);
-var import_jsx_runtime24 = 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_runtime24.jsxs)(StyledSecretContainer, { hasSecret: true, success: props.success, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime24.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: {
@@ -3985,10 +4010,10 @@ function SecretContainer(props) {
         children: props.secret
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(CopyToClipboardButton, { value: props.secret, isSm: true, ml: 4 })
-  ] }) : /* @__PURE__ */ (0, import_jsx_runtime24.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_styled20.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;
@@ -4000,14 +4025,14 @@ var StyledSecretContainer = import_styled20.default.div`
 `;
 
 // src/components/TextIconAligner.tsx
-var import_jsx_runtime25 = 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_runtime25.jsx)(
+  const leftIconNode = leftIcon ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
     Icon,
     {
       name: leftIcon.name,
@@ -4016,7 +4041,7 @@ function TextIconAligner({
       color: leftIcon.color
     }
   ) : null;
-  const rightIconNode = rightIcon ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+  const rightIconNode = rightIcon ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
     Icon,
     {
       name: rightIcon.name,
@@ -4025,7 +4050,7 @@ function TextIconAligner({
       color: rightIcon.color
     }
   ) : null;
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
     "span",
     {
       css: {
@@ -4074,6 +4099,7 @@ function TextIconAligner({
   Pill,
   ProgressBar,
   SecretContainer,
+  StatusIndicator,
   StyledButton,
   StyledCodeBlock,
   TextIconAligner,

package/dist/components/index.d.cts

@@ -1,4 +1,4 @@
-export { Badge } from './Badge.cjs';
+export { Badge, BadgeProps } from './Badge.cjs';
 export { Button, ButtonProps, ButtonSelector, StyledButton } from './Button.cjs';
 export { ButtonRow, ButtonRowContainer, ButtonRowProps } from './ButtonRow.cjs';
 export { CardPage, CardPageContent, CardPageFullContent, CardPageFullWidth, CardPageRightContentInner, CardPageSubtitle } from './CardPage.cjs';
@@ -17,6 +17,7 @@ export { Modal } from './Modal.cjs';
 export { Pill } from './Pill.cjs';
 export { ProgressBar, ProgressBarProps } from './ProgressBar.cjs';
 export { SecretContainer } from './SecretContainer.cjs';
+export { StatusIndicator, StatusIndicatorColors, StatusIndicatorProps } from './StatusIndicator.cjs';
 export { TextIconAligner, TextIconAlignerProps } from './TextIconAligner.cjs';
 export { UnstyledButton } from './UnstyledButton.cjs';
 import '@emotion/react/jsx-runtime';