@lightsparkdev/ui 1.1.3 → 1.1.5

package/dist/{chunk-5YPZRUZG.js → chunk-RER3U6XC.js}

@@ -1,77 +1,74 @@
 import {
   Headline
-} from "./chunk-TKLFSNHO.js";
+} from "./chunk-7TIZ57QQ.js";
 import {
   StyledSelect
-} from "./chunk-6GPS5UZL.js";
+} from "./chunk-4CUWKENB.js";
 import {
   TextInputHalfRow
-} from "./chunk-GNNSP254.js";
+} from "./chunk-ABPBF6Q3.js";
 import {
   ToggleContainer
-} from "./chunk-A5TI24JJ.js";
+} from "./chunk-VM2CHRVK.js";
 import {
   StyledFileInput
-} from "./chunk-I5TCLIUL.js";
+} from "./chunk-GK2RSNWZ.js";
 import {
   formButtonTopMarginStyle,
   inputSpacingPx
-} from "./chunk-AO3ZBQ6T.js";
+} from "./chunk-6VB5CUJJ.js";
 import {
-  Flex
-} from "./chunk-NPKEAEDV.js";
+  StyledButtonRowButton
+} from "./chunk-FGKPMMGQ.js";
+import {
+  ButtonSelector
+} from "./chunk-AIZ5GNQB.js";
+import {
+  LoadingWrapper
+} from "./chunk-27XXVPBQ.js";
 import {
   Checkbox
-} from "./chunk-D3WSMM2N.js";
+} from "./chunk-SLT7CSGY.js";
+import {
+  Spacing
+} from "./chunk-E5DUKMCU.js";
 import {
   toReactNodesWithTypographyMap
-} from "./chunk-H7KIUDPL.js";
+} from "./chunk-TYGUATM2.js";
 import {
   toReactNodes
-} from "./chunk-H37TWCVW.js";
+} from "./chunk-BQEN763M.js";
 import {
   icon
 } from "./chunk-FZUV52PP.js";
 import {
   ClipboardTextField
-} from "./chunk-A6APLSNG.js";
-import {
-  StyledButtonRowButton
-} from "./chunk-PGMKAWUJ.js";
-import {
-  Spacing
-} from "./chunk-E5DUKMCU.js";
+} from "./chunk-YV4GTXNK.js";
 import {
   pxToRems
-} from "./chunk-MGHQ74CH.js";
-import {
-  ButtonSelector
-} from "./chunk-KWNSXCDT.js";
-import {
-  LoadingWrapper
-} from "./chunk-HGYZXUCB.js";
+} from "./chunk-Q3MTVY74.js";
 import {
   mcBold,
   standardBorderRadius,
   standardCardShadow,
   standardCardShadowHard,
   standardContentInset
-} from "./chunk-VAPNTHG5.js";
+} from "./chunk-ZD2DY4VO.js";
 import {
   Link
-} from "./chunk-BMCY2VFD.js";
+} from "./chunk-V5KYCLRU.js";
 import {
   select
 } from "./chunk-YMNSXZ5D.js";
 import {
   getColor
-} from "./chunk-GZILHEOA.js";
+} from "./chunk-CQKSDNQF.js";
 import {
   bp
 } from "./chunk-JSGRNWSB.js";
 import {
   colors
-} from "./chunk-EA22C7OJ.js";
+} from "./chunk-DDUDWE23.js";
 import {
   __spreadProps,
   __spreadValues
@@ -80,7 +77,7 @@ import {
 // src/components/CardForm/CardForm.tsx
 import { css, useTheme } from "@emotion/react";
 import styled from "@emotion/styled";
-import { Fragment, useCallback } from "react";
+import { Fragment, useCallback, useEffect, useMemo } from "react";
 import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 function resolveProps(args, theme) {
   const paddingTop = resolveCardFormProp(
@@ -193,6 +190,7 @@ function CardForm({
   forceMarginAfterSubtitle = true,
   afterTitleMargin = 40,
   graphicHeader,
+  statusHeaderProps,
   centeredContent = false,
   contentMarginTop,
   formButtonTopMargin,
@@ -290,8 +288,21 @@ function CardForm({
     smDontAdjustWidth
   };
   const Container = full ? CardFormContentFull : CardFormContainer;
+  const statusHeader = useMemo(
+    () => statusHeaderProps ? /* @__PURE__ */ jsx(StatusHeader, __spreadValues({}, statusHeaderProps)) : null,
+    [statusHeaderProps]
+  );
+  useEffect(() => {
+    var _a;
+    (_a = document.querySelector("meta[name='theme-color']")) == null ? void 0 : _a.setAttribute("content", statusHeader ? theme.linkLight : theme.bg);
+    return () => {
+      var _a2;
+      (_a2 = document.querySelector("meta[name='theme-color']")) == null ? void 0 : _a2.setAttribute("content", theme.bg);
+    };
+  }, [statusHeader, theme.linkLight, theme.bg]);
   return /* @__PURE__ */ jsxs(Container, { paddingBottom, children: [
-    hasChildForm ? /* @__PURE__ */ jsx(StyledCardFormDiv, __spreadProps(__spreadValues({}, commonProps), { children: content })) : /* @__PURE__ */ jsxs(Flex, { column: true, align: "center", height: full ? "100%" : "auto", children: [
+    hasChildForm ? /* @__PURE__ */ jsx(StyledCardFormDiv, __spreadProps(__spreadValues({}, commonProps), { children: content })) : /* @__PURE__ */ jsxs(StyledCardFormContainer, { full, statusHeader: !!statusHeader, children: [
+      statusHeader,
       graphicHeader && graphicHeader,
       /* @__PURE__ */ jsx(
         StyledCardForm,
@@ -300,7 +311,8 @@ function CardForm({
           noValidate: true
         }, commonProps), {
           forceMarginAfterSubtitle,
-          graphicHeader: graphicHeader ? true : false,
+          graphicHeader: !!graphicHeader,
+          statusHeader: !!statusHeader,
           formButtonTopMargin,
           selectMarginTop,
           children: content
@@ -310,6 +322,38 @@ function CardForm({
     belowFormContentNodes && /* @__PURE__ */ jsx(BelowCardFormContent, { gap: belowFormContentGap, children: belowFormContentNodes })
   ] });
 }
+var StatusHeader = ({ content, onClick }) => {
+  return /* @__PURE__ */ jsx(StatusHeaderContainer, { onClick, children: toReactNodes(content) });
+};
+var StatusHeaderContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  cursor: ${({ onClick }) => onClick ? "pointer" : "default"};
+  gap: 2px;
+  width: 100%;
+  min-height: 49px;
+  background-color: ${({ theme }) => theme.linkLight};
+  padding: ${Spacing.px.xs} ${Spacing.px.lg};
+
+  ${bp.minSm(`
+    margin-bottom: ${Spacing.px.xs};
+    width: fit-content;
+    border-radius: 32px;
+  `)}
+`;
+var StyledCardFormContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: ${({ full }) => full ? "100%" : "auto"};
+  background-color: ${({ statusHeader, theme }) => statusHeader ? theme.linkLight : theme.bg};
+  ${bp.minSm(`
+    background-color: #F9F9F9;
+  `)}
+`;
 var CenteredHeader = styled.div`
   display: flex;
   flex-direction: column;
@@ -415,20 +459,18 @@ var formInset = ({
     width: ${wide ? 700 : 408}px;
   `)}
 
-  ${bp.sm(`
-    padding: ${graphicHeader ? "24px" : "0"};
-  `)}
-
   ${graphicHeader || smDontAdjustWidth ? `width: 100%;` : standardContentInset.smCSS}
 
   & ${CardFormFullWidth}, & ${CardFormFullTopContent} {
     ${smDontAdjustWidth ? "" : bp.sm(`
-      width: calc(100% + ${standardContentInset.smPx * 2}px);
+      padding-right: ${standardContentInset.smPx}px;
+      padding-left: ${standardContentInset.smPx}px;
       margin-left: -${standardContentInset.smPx}px;
     `)}
 
     ${smDontAdjustWidth ? "" : bp.minSm(`
-      width: calc(100% + ${paddingX * 2}px);
+      padding-right: ${paddingX}px;
+      padding-left: ${paddingX}px;
       margin-left: -${paddingX}px;
     `)}
   }
@@ -455,6 +497,7 @@ var StyledCardFormStyle = ({
   smBorderWidth,
   forceMarginAfterSubtitle = true,
   graphicHeader,
+  statusHeader,
   formButtonTopMargin = 32,
   selectMarginTop = inputSpacingPx,
   smDontAdjustWidth = false
@@ -488,6 +531,8 @@ var StyledCardFormStyle = ({
       box-shadow: none;
       background-color: ${getColor(theme, smBackgroundColor)};
       border-width: ${smBorderWidth}px;
+      border-radius: ${statusHeader ? `${borderRadius}px ${borderRadius}px 0 0` : 0};
+      ${statusHeader ? `box-shadow: 0 -0.5px 0 0px ${getColor(theme, borderColor)};` : ""}
     `)}
 
     ${bp.minSm(`

package/dist/{chunk-G6X5Y734.js → chunk-RJOOKBYO.js}

@@ -1,36 +1,36 @@
 import {
   InfoIconTooltip
-} from "./chunk-QMJ2TXEF.js";
+} from "./chunk-KRWXVQQD.js";
 import {
-  ClipboardTextField
-} from "./chunk-A6APLSNG.js";
+  Loading
+} from "./chunk-27XXVPBQ.js";
 import {
-  useClipboard
-} from "./chunk-QHODHUW2.js";
+  ClipboardTextField
+} from "./chunk-YV4GTXNK.js";
 import {
   lineClamp,
   overflowAutoWithoutScrollbars
-} from "./chunk-MGHQ74CH.js";
-import {
-  Loading
-} from "./chunk-HGYZXUCB.js";
+} from "./chunk-Q3MTVY74.js";
 import {
   Icon
-} from "./chunk-5VKJXXI3.js";
+} from "./chunk-ZSZGVHHS.js";
 import {
   standardContentInset
-} from "./chunk-VAPNTHG5.js";
+} from "./chunk-ZD2DY4VO.js";
 import {
   Link,
   replaceParams,
   useNavigate
-} from "./chunk-BMCY2VFD.js";
+} from "./chunk-V5KYCLRU.js";
 import {
   themeOrWithKey
-} from "./chunk-GZILHEOA.js";
+} from "./chunk-CQKSDNQF.js";
 import {
   bp
 } from "./chunk-JSGRNWSB.js";
+import {
+  useClipboard
+} from "./chunk-QHODHUW2.js";
 import {
   __spreadProps,
   __spreadValues

package/dist/{chunk-5EMWGLNC.cjs → chunk-RN3OAEYP.cjs}

@@ -1,36 +1,36 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _chunkCJ7ADAD6cjs = require('./chunk-CJ7ADAD6.cjs');
+var _chunkCYHISYZNcjs = require('./chunk-CYHISYZN.cjs');
 
 
-var _chunkD2W2ROKQcjs = require('./chunk-D2W2ROKQ.cjs');
+var _chunkPUWHPIPEcjs = require('./chunk-PUWHPIPE.cjs');
 
 
-var _chunkJZ3TGO3Dcjs = require('./chunk-JZ3TGO3D.cjs');
+var _chunk7FEMUABVcjs = require('./chunk-7FEMUABV.cjs');
 
 
 
-var _chunkWX5R7NU7cjs = require('./chunk-WX5R7NU7.cjs');
+var _chunkSRAWECJ4cjs = require('./chunk-SRAWECJ4.cjs');
 
 
-var _chunk5VSTXVUIcjs = require('./chunk-5VSTXVUI.cjs');
+var _chunkTRVU37HAcjs = require('./chunk-TRVU37HA.cjs');
 
 
-var _chunkCKSZUZXJcjs = require('./chunk-CKSZUZXJ.cjs');
+var _chunkZBJ5SGHGcjs = require('./chunk-ZBJ5SGHG.cjs');
 
 
-var _chunk545K27C4cjs = require('./chunk-545K27C4.cjs');
 
 
+var _chunkGMHCVXAKcjs = require('./chunk-GMHCVXAK.cjs');
 
 
-var _chunkT3LKI5VGcjs = require('./chunk-T3LKI5VG.cjs');
+var _chunkYIAN5J2Dcjs = require('./chunk-YIAN5J2D.cjs');
 
 
-var _chunkEGKT7YHPcjs = require('./chunk-EGKT7YHP.cjs');
+var _chunkKW3JYLRIcjs = require('./chunk-KW3JYLRI.cjs');
 
 
-var _chunkKW3JYLRIcjs = require('./chunk-KW3JYLRI.cjs');
+var _chunkJZ3TGO3Dcjs = require('./chunk-JZ3TGO3D.cjs');
 
 
 
@@ -73,7 +73,7 @@ function Table({
   rowHoverEffect = "border",
   minHeight = 300
 }) {
-  const navigate = _chunkT3LKI5VGcjs.useNavigate.call(void 0, );
+  const navigate = _chunkGMHCVXAKcjs.useNavigate.call(void 0, );
   const [sorting, setSorting] = _react3.useState.call(void 0, []);
   const { canWriteToClipboard, writeTextToClipboard } = _chunkJZ3TGO3Dcjs.useClipboard.call(void 0, clipboardCallbacks);
   const onClickCopy = _react3.useCallback.call(void 0, 
@@ -88,7 +88,7 @@ function Table({
       header: (context) => typeof column.header === "string" ? column.header : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { children: [
         column.header.name,
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _chunkCJ7ADAD6cjs.InfoIconTooltip,
+          _chunkCYHISYZNcjs.InfoIconTooltip,
           {
             id: `tooltip-${column.header.name}`,
             content: column.header.tooltip || "",
@@ -103,7 +103,7 @@ function Table({
         let icon = null;
         if (isObjectCell(value)) {
           const base64icon = value.base64icon ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Base64Icon, { src: value.base64icon, alt: "Icon" }) : null;
-          icon = value.icon ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkCKSZUZXJcjs.Icon, { name: value.icon, width: 14, mr: 4, color: "c4Neutral" }) : null;
+          icon = value.icon ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkTRVU37HAcjs.Icon, { name: value.icon, width: 14, mr: 4, color: "c4Neutral" }) : null;
           if (isMultilineCell(value)) {
             content = /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, LineClampSpan, { children: [
               base64icon ? base64icon : icon,
@@ -125,7 +125,7 @@ function Table({
               onClick: onClickCopy(value.text),
               role: "button",
               tabIndex: 0,
-              children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkCKSZUZXJcjs.Icon, { name: "Copy", width: 16, mr: 12 })
+              children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkTRVU37HAcjs.Icon, { name: "Copy", width: 16, mr: 12 })
             }
           );
           return value.link ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, LinkClipboardCell, { children: [
@@ -139,7 +139,7 @@ function Table({
                   e.stopPropagation();
                 },
                 children: [
-                  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkCKSZUZXJcjs.Icon, { name: "LinkIcon", width: 12 }),
+                  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkTRVU37HAcjs.Icon, { name: "LinkIcon", width: 12 }),
                   /* @__PURE__ */ _jsxruntime.jsx.call(void 0, LinkCellContent, { children: content })
                 ]
               }
@@ -147,7 +147,7 @@ function Table({
             copyButton
           ] }) : value.to ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, HoverableCellWrapper, { children: [
             /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-              _chunkT3LKI5VGcjs.Link,
+              _chunkGMHCVXAKcjs.Link,
               {
                 to: value.to,
                 params: value.toParams,
@@ -173,12 +173,12 @@ function Table({
                 e.stopPropagation();
               },
               children: [
-                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkCKSZUZXJcjs.Icon, { name: "LinkIcon", width: 12 }),
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkTRVU37HAcjs.Icon, { name: "LinkIcon", width: 12 }),
                 /* @__PURE__ */ _jsxruntime.jsx.call(void 0, LinkCellContent, { children: content })
               ]
             }
           ) : value.to ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, HoverableCellWrapper, { children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-            _chunkT3LKI5VGcjs.Link,
+            _chunkGMHCVXAKcjs.Link,
             {
               to: value.to,
               params: value.toParams,
@@ -203,7 +203,7 @@ function Table({
           return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, HoverableCellWrapper, { children: [
             icon,
             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-              _chunkD2W2ROKQcjs.ClipboardTextField,
+              _chunk7FEMUABVcjs.ClipboardTextField,
               {
                 value: value.text,
                 elide: maxChars ? {
@@ -242,7 +242,7 @@ function Table({
       if ((onClickRowResult == null ? void 0 : onClickRowResult.link) || (onClickRowResult == null ? void 0 : onClickRowResult.to) && newTabKey) {
         let link = onClickRowResult == null ? void 0 : onClickRowResult.link;
         if (!link) {
-          link = _chunkT3LKI5VGcjs.replaceParams.call(void 0, onClickRowResult.to, onClickRowResult.params);
+          link = _chunkGMHCVXAKcjs.replaceParams.call(void 0, onClickRowResult.to, onClickRowResult.params);
         }
         const target = newTabKey ? "_blank" : void 0;
         window.open(link, target);
@@ -293,13 +293,13 @@ function Table({
       }
     ),
     emptyState,
-    loading && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk5VSTXVUIcjs.Loading, {})
+    loading && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkPUWHPIPEcjs.Loading, {})
   ] });
 }
 var TableWrapper = _styled2.default.div`
   position: relative;
   min-height: ${({ minHeight }) => minHeight}px;
-  ${_chunkWX5R7NU7cjs.overflowAutoWithoutScrollbars}
+  ${_chunkSRAWECJ4cjs.overflowAutoWithoutScrollbars}
 `;
 var hoverCellStyles = _react.css`
   cursor: pointer;
@@ -315,7 +315,7 @@ var LinkCellContent = _styled2.default.span`
 var HoverableCellWrapper = _styled2.default.div`
   ${hoverCellStyles}
 
-  ${_chunkT3LKI5VGcjs.Link} {
+  ${_chunkGMHCVXAKcjs.Link} {
     text-overflow: ellipsis;
     overflow: hidden;
   }
@@ -343,7 +343,7 @@ var CopyButton = _styled2.default.span`
   display: inline-table;
 `;
 var LineClampSpan = _styled2.default.span`
-  ${_chunkWX5R7NU7cjs.lineClamp.call(void 0, 2)}
+  ${_chunkSRAWECJ4cjs.lineClamp.call(void 0, 2)}
 `;
 var Base64Icon = _styled2.default.img`
   width: 32px;
@@ -360,16 +360,16 @@ var StyledTable = _styled2.default.table`
 
   /* Important to use padding here instead of width so that table container overflow functions properly: */
   ${_chunkKW3JYLRIcjs.bp.lg(`
-    padding-left: ${_chunk545K27C4cjs.standardContentInset.lgPx}px;
-    padding-right: ${_chunk545K27C4cjs.standardContentInset.lgPx}px;
+    padding-left: ${_chunkZBJ5SGHGcjs.standardContentInset.lgPx}px;
+    padding-right: ${_chunkZBJ5SGHGcjs.standardContentInset.lgPx}px;
   `)}
   ${_chunkKW3JYLRIcjs.bp.sm(`
-    padding-left: ${_chunk545K27C4cjs.standardContentInset.smPx}px;
-    padding-right: ${_chunk545K27C4cjs.standardContentInset.smPx}px;
+    padding-left: ${_chunkZBJ5SGHGcjs.standardContentInset.smPx}px;
+    padding-right: ${_chunkZBJ5SGHGcjs.standardContentInset.smPx}px;
   `)}
   ${_chunkKW3JYLRIcjs.bp.minSmMaxLg(`
-    padding-left: ${_chunk545K27C4cjs.standardContentInset.minSmMaxLgPx}px;
-    padding-right: ${_chunk545K27C4cjs.standardContentInset.minSmMaxLgPx}px;
+    padding-left: ${_chunkZBJ5SGHGcjs.standardContentInset.minSmMaxLgPx}px;
+    padding-right: ${_chunkZBJ5SGHGcjs.standardContentInset.minSmMaxLgPx}px;
   `)}
 
   th {
@@ -379,7 +379,7 @@ var StyledTable = _styled2.default.table`
     text-align: left;
     padding: ${cellPaddingPx}px 0px;
     border-bottom: 1px solid
-      ${({ theme }) => _chunkEGKT7YHPcjs.themeOrWithKey.call(void 0, "c1Neutral", "c2Neutral")({ theme })};
+      ${({ theme }) => _chunkYIAN5J2Dcjs.themeOrWithKey.call(void 0, "c1Neutral", "c2Neutral")({ theme })};
     padding: ${cellPaddingPx}px;
     &:first-of-type {
       padding-left: 0px;
@@ -439,7 +439,7 @@ var StyledTable = _styled2.default.table`
               top: 10%;
               bottom: 10%;
               ${rowHoverEffect === "background" ? `background: ${theme.c1Neutral};` : `
-                    border: 1px solid ${_chunkEGKT7YHPcjs.themeOrWithKey.call(void 0, 
+                    border: 1px solid ${_chunkYIAN5J2Dcjs.themeOrWithKey.call(void 0, 
   "c1Neutral",
   "c2Neutral"
 )({ theme })};

package/dist/{chunk-ZH2UD7RB.cjs → chunk-RUT36LUS.cjs}

@@ -1,9 +1,9 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunk237X7NK7cjs = require('./chunk-237X7NK7.cjs');
+var _chunkT3JYHG7Gcjs = require('./chunk-T3JYHG7G.cjs');
 
 
-var _chunkDZYN7Z4Bcjs = require('./chunk-DZYN7Z4B.cjs');
+var _chunkXIBBWWXUcjs = require('./chunk-XIBBWWXU.cjs');
 
 
 
@@ -25,7 +25,7 @@ function SatoshiInput(_a) {
   ]);
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _react.Fragment, { children: [
     label && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunk237X7NK7cjs.SatoshiInputLabel,
+      _chunkT3JYHG7Gcjs.SatoshiInputLabel,
       {
         text: label.text,
         availableSats: label.availableSats,
@@ -33,7 +33,7 @@ function SatoshiInput(_a) {
       }
     ),
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunkDZYN7Z4Bcjs.NumberInput_default,
+      _chunkXIBBWWXUcjs.NumberInput_default,
       _chunkZ6EUSUADcjs.__spreadProps.call(void 0, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {
         placeholder: "SATs"
       }, rest), {