@lightsparkdev/ui 0.0.7 → 0.0.9

package/dist/icons/index.cjs

@@ -79,7 +79,6 @@ var import_react5 = require("react");
 // src/styles/common.tsx
 var import_react4 = require("@emotion/react");
 var import_styled = __toESM(require("@emotion/styled"), 1);
-var import_react_tooltip = require("react-tooltip");
 
 // src/styles/breakpoints.tsx
 var import_react = require("@emotion/react");
@@ -1285,59 +1284,47 @@ function hexToRGB(hex) {
   ] : [0, 0, 0];
 }
 
-// src/styles/z-index.tsx
-var z = {
-  card: 1,
-  fieldError: 1,
-  textInput: 2,
-  select: 3,
-  selectFocused: 4,
-  walletActionPreviewTopGradient: 1,
-  headerContainer: 99,
-  smBanner: 99,
-  headerTop: 100,
-  navMenu: 100,
-  smNavMenu: 100,
-  navAction: 101,
-  smNavAction: 100,
-  // keep under navDropdown
-  tooltip: 160,
-  notificationBanner: 170,
-  qrReaderVideo: 180,
-  qrReaderOverlay: 181,
-  modalOverlay: 190,
-  modalContainer: 191,
-  dropdown: 192,
-  toast: 200
-};
-
 // src/styles/common.tsx
 var rootFontSizePx = 12;
 var rootFontSizeRems = rootFontSizePx / 16;
-var standardContentInsetPx = 32;
-var standardContentInsetMdPx = 24;
-var standardContentInsetSmPx = 16;
-var smContentInset = import_react4.css`
-  ${bp.sm(`
-    margin-left: auto;
-    margin-right: auto;
-    width: calc(100% - ${standardContentInsetSmPx * 2}px);
-  `)}
-`;
-var minSmMaxLgContentInset = import_react4.css`
-  ${bp.minSmMaxLg(`
-    width: calc(100% - ${standardContentInsetMdPx * 2}px);
-  `)}
-`;
-var standardContentInset = import_react4.css`
-  margin-left: auto;
-  margin-right: auto;
-  width: calc(100% - ${standardContentInsetPx * 2}px);
-  max-width: 1280px;
-
-  ${smContentInset}
-  ${minSmMaxLgContentInset}
-`;
+function buildStandardContentInset(smPx, minSmMaxLgPx, lgPx) {
+  const smCSS = import_react4.css`
+    ${bp.sm(`
+      margin-left: auto;
+      margin-right: auto;
+      width: calc(100% - ${smPx * 2}px);
+    `)}
+  `;
+  const minSmMaxLgCSS = import_react4.css`
+    ${bp.minSmMaxLg(`
+      margin-left: auto;
+      margin-right: auto;
+      width: calc(100% - ${minSmMaxLgPx * 2}px);
+    `)}
+  `;
+  const lgCSS = import_react4.css`
+    ${bp.lg(`
+      margin-left: auto;
+      margin-right: auto;
+      width: calc(100% - ${lgPx * 2}px);
+      max-width: 1280px;
+    `)}
+  `;
+  return {
+    smPx,
+    minSmMaxLgPx,
+    lgPx,
+    smCSS,
+    minSmMaxLgCSS,
+    lgCSS,
+    css: import_react4.css`
+      ${lgCSS}
+      ${smCSS}
+      ${minSmMaxLgCSS}
+    `
+  };
+}
+var standardContentInset = buildStandardContentInset(16, 24, 32);
 var standardCardShadow = import_react4.css`
   box-shadow:
     0px 4px 10px 0px rgba(0, 0, 0, 0.08),
@@ -1357,9 +1344,6 @@ var Subtext = import_styled.default.div`
 var darkGradientBg = import_react4.css`
   background: ${darkGradient};
 `;
-var StyledTooltip = (0, import_styled.default)(import_react_tooltip.Tooltip)`
-  z-index: ${z.modalOverlay};
-`;
 
 // src/utils/strings.tsx
 function isString(str) {

package/dist/icons/index.js

@@ -1,13 +1,12 @@
 import {
   Icon,
   IconContainer
-} from "../chunk-NZJCJJH5.js";
+} from "../chunk-RWIZ7Q74.js";
 import "../chunk-LAMQKQU3.js";
-import "../chunk-RFGKH3R6.js";
+import "../chunk-JK4BP73A.js";
 import "../chunk-2VBDEO6M.js";
 import "../chunk-E4EXM4SY.js";
 import "../chunk-JSGRNWSB.js";
-import "../chunk-CLU2FRJZ.js";
 import "../chunk-CIGAQ47A.js";
 export {
   Icon,

package/dist/router.cjs

@@ -1200,19 +1200,23 @@ function Link({
   blue = false,
   newTab = false
 }) {
-  if (!isString(to) && !externalLink) {
-    throw new Error("Link must have either `to` or `externalLink` defined");
+  if (!isString(to) && !externalLink && !onClick) {
+    throw new Error(
+      "Link must have either `to` or `externalLink` or `onClick` defined"
+    );
   }
   let toStr;
   if (isString(to)) {
     toStr = replaceParams(to, params);
     toStr += hash ? `#${hash}` : "";
-  } else {
+  } else if (externalLink) {
     const definedExternalLink = externalLink;
     if (!definedExternalLink.startsWith("http")) {
       throw new Error("Link's externalLink must start with http");
     }
     toStr = definedExternalLink;
+  } else {
+    toStr = "#";
   }
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_react_router_dom.Link,

package/dist/router.js

@@ -8,7 +8,7 @@ import {
   useMatchRoute,
   useMatchRoutes,
   useNavigate
-} from "./chunk-M56R3RJ7.js";
+} from "./chunk-OGSDZTHM.js";
 import "./chunk-LAMQKQU3.js";
 import "./chunk-2VBDEO6M.js";
 import "./chunk-E4EXM4SY.js";

package/dist/styles/common.cjs

@@ -47,7 +47,6 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/styles/common.tsx
 var common_exports = {};
 __export(common_exports, {
-  StyledTooltip: () => StyledTooltip,
   Subtext: () => Subtext,
   cardBorderRadiusPx: () => cardBorderRadiusPx,
   darkGradientBg: () => darkGradientBg,
@@ -56,7 +55,6 @@ __export(common_exports, {
   headingContentMarginPx: () => headingContentMarginPx,
   mcBold: () => mcBold,
   mcBoldStyled: () => mcBoldStyled,
-  minSmMaxLgContentInset: () => minSmMaxLgContentInset,
   outlineOffset: () => outlineOffset,
   overlaySurface: () => overlaySurface,
   overlaySurfaceBorderColor: () => overlaySurfaceBorderColor,
@@ -64,13 +62,9 @@ __export(common_exports, {
   pageBorderRadiusPx: () => pageBorderRadiusPx,
   rootFontSizePx: () => rootFontSizePx,
   rootFontSizeRems: () => rootFontSizeRems,
-  smContentInset: () => smContentInset,
   standardBorderRadius: () => standardBorderRadius,
   standardCardShadow: () => standardCardShadow,
   standardContentInset: () => standardContentInset,
-  standardContentInsetMdPx: () => standardContentInsetMdPx,
-  standardContentInsetPx: () => standardContentInsetPx,
-  standardContentInsetSmPx: () => standardContentInsetSmPx,
   standardFocusOutline: () => standardFocusOutline,
   standardLineHeightEms: () => standardLineHeightEms,
   subtext: () => subtext
@@ -78,7 +72,6 @@ __export(common_exports, {
 module.exports = __toCommonJS(common_exports);
 var import_react4 = require("@emotion/react");
 var import_styled = __toESM(require("@emotion/styled"), 1);
-var import_react_tooltip = require("react-tooltip");
 
 // src/styles/breakpoints.tsx
 var import_react = require("@emotion/react");
@@ -1288,40 +1281,49 @@ function hexToRGB(hex) {
   ] : [0, 0, 0];
 }
 
-// src/styles/z-index.tsx
-var z = {
-  card: 1,
-  fieldError: 1,
-  textInput: 2,
-  select: 3,
-  selectFocused: 4,
-  walletActionPreviewTopGradient: 1,
-  headerContainer: 99,
-  smBanner: 99,
-  headerTop: 100,
-  navMenu: 100,
-  smNavMenu: 100,
-  navAction: 101,
-  smNavAction: 100,
-  // keep under navDropdown
-  tooltip: 160,
-  notificationBanner: 170,
-  qrReaderVideo: 180,
-  qrReaderOverlay: 181,
-  modalOverlay: 190,
-  modalContainer: 191,
-  dropdown: 192,
-  toast: 200
-};
-
 // src/styles/common.tsx
 var rootFontSizePx = 12;
 var rootFontSizeRems = rootFontSizePx / 16;
 var standardLineHeightEms = 1.21;
 var headingContentMarginPx = 30;
-var standardContentInsetPx = 32;
-var standardContentInsetMdPx = 24;
-var standardContentInsetSmPx = 16;
+function buildStandardContentInset(smPx, minSmMaxLgPx, lgPx) {
+  const smCSS = import_react4.css`
+    ${bp.sm(`
+      margin-left: auto;
+      margin-right: auto;
+      width: calc(100% - ${smPx * 2}px);
+    `)}
+  `;
+  const minSmMaxLgCSS = import_react4.css`
+    ${bp.minSmMaxLg(`
+      margin-left: auto;
+      margin-right: auto;
+      width: calc(100% - ${minSmMaxLgPx * 2}px);
+    `)}
+  `;
+  const lgCSS = import_react4.css`
+    ${bp.lg(`
+      margin-left: auto;
+      margin-right: auto;
+      width: calc(100% - ${lgPx * 2}px);
+      max-width: 1280px;
+    `)}
+  `;
+  return {
+    smPx,
+    minSmMaxLgPx,
+    lgPx,
+    smCSS,
+    minSmMaxLgCSS,
+    lgCSS,
+    css: import_react4.css`
+      ${lgCSS}
+      ${smCSS}
+      ${minSmMaxLgCSS}
+    `
+  };
+}
+var standardContentInset = buildStandardContentInset(16, 24, 32);
 var cardBorderRadiusPx = 16;
 var standardBorderRadius = (radius) => {
   const borderRadiusPx = Array.isArray(radius) ? radius.map((r) => `${r}px`).join(" ") : `${radius}px`;
@@ -1329,27 +1331,6 @@ var standardBorderRadius = (radius) => {
     border-radius: ${borderRadiusPx};
   `;
 };
-var smContentInset = import_react4.css`
-  ${bp.sm(`
-    margin-left: auto;
-    margin-right: auto;
-    width: calc(100% - ${standardContentInsetSmPx * 2}px);
-  `)}
-`;
-var minSmMaxLgContentInset = import_react4.css`
-  ${bp.minSmMaxLg(`
-    width: calc(100% - ${standardContentInsetMdPx * 2}px);
-  `)}
-`;
-var standardContentInset = import_react4.css`
-  margin-left: auto;
-  margin-right: auto;
-  width: calc(100% - ${standardContentInsetPx * 2}px);
-  max-width: 1280px;
-
-  ${smContentInset}
-  ${minSmMaxLgContentInset}
-`;
 var standardCardShadow = import_react4.css`
   box-shadow:
     0px 4px 10px 0px rgba(0, 0, 0, 0.08),
@@ -1392,9 +1373,6 @@ var Subtext = import_styled.default.div`
 var darkGradientBg = import_react4.css`
   background: ${darkGradient};
 `;
-var StyledTooltip = (0, import_styled.default)(import_react_tooltip.Tooltip)`
-  z-index: ${z.modalOverlay};
-`;
 var overlaySurfaceBorderColor = ({
   theme,
   important = false
@@ -1422,7 +1400,6 @@ var mcBold = (theme) => import_react4.css`
 var mcBoldStyled = ({ theme }) => mcBold(theme);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  StyledTooltip,
   Subtext,
   cardBorderRadiusPx,
   darkGradientBg,
@@ -1431,7 +1408,6 @@ var mcBoldStyled = ({ theme }) => mcBold(theme);
   headingContentMarginPx,
   mcBold,
   mcBoldStyled,
-  minSmMaxLgContentInset,
   outlineOffset,
   overlaySurface,
   overlaySurfaceBorderColor,
@@ -1439,13 +1415,9 @@ var mcBoldStyled = ({ theme }) => mcBold(theme);
   pageBorderRadiusPx,
   rootFontSizePx,
   rootFontSizeRems,
-  smContentInset,
   standardBorderRadius,
   standardCardShadow,
   standardContentInset,
-  standardContentInsetMdPx,
-  standardContentInsetPx,
-  standardContentInsetSmPx,
   standardFocusOutline,
   standardLineHeightEms,
   subtext

package/dist/styles/common.d.cts

@@ -1,4 +1,3 @@
-import * as react_tooltip from 'react-tooltip';
 import * as _emotion_styled from '@emotion/styled';
 import * as react from 'react';
 import * as _emotion_react from '@emotion/react';
@@ -11,17 +10,20 @@ declare const rootFontSizePx = 12;
 declare const rootFontSizeRems: number;
 declare const standardLineHeightEms = 1.21;
 declare const headingContentMarginPx = 30;
-declare const standardContentInsetPx = 32;
-declare const standardContentInsetMdPx = 24;
-declare const standardContentInsetSmPx = 16;
+declare const standardContentInset: {
+    smPx: number;
+    minSmMaxLgPx: number;
+    lgPx: number;
+    smCSS: _emotion_react.SerializedStyles;
+    minSmMaxLgCSS: _emotion_react.SerializedStyles;
+    lgCSS: _emotion_react.SerializedStyles;
+    css: _emotion_react.SerializedStyles;
+};
 declare const standardBorderRadiusPx: readonly [0, 4, 8, 12, 16];
 type StandardBorderRadius = (typeof standardBorderRadiusPx)[number];
 declare const cardBorderRadiusPx = 16;
 type BorderRadiusArg = StandardBorderRadius | StandardBorderRadius[];
 declare const standardBorderRadius: (radius: BorderRadiusArg) => string;
-declare const smContentInset: _emotion_react.SerializedStyles;
-declare const minSmMaxLgContentInset: _emotion_react.SerializedStyles;
-declare const standardContentInset: _emotion_react.SerializedStyles;
 declare const standardCardShadow: _emotion_react.SerializedStyles;
 declare const pageBorderRadiusPx = 16;
 declare const pageBorderRadius = "\n  border-radius: 16px;\n";
@@ -40,9 +42,6 @@ declare const Subtext: _emotion_styled.StyledComponent<{
     as?: react.ElementType<any>;
 }, react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 declare const darkGradientBg: _emotion_react.SerializedStyles;
-declare const StyledTooltip: _emotion_styled.StyledComponent<react_tooltip.ITooltip & react.RefAttributes<react_tooltip.TooltipRefProps> & {
-    theme?: Theme;
-}, {}, {}>;
 declare const overlaySurfaceBorderColor: ({ theme, important, }: WithTheme<{
     important?: boolean;
 }>) => _emotion_react.SerializedStyles;
@@ -52,4 +51,4 @@ declare const overlaySurface: ({ theme, important, }: WithTheme<{
 declare const mcBold: (theme: Theme) => _emotion_react.SerializedStyles;
 declare const mcBoldStyled: ({ theme }: ThemeProp) => _emotion_react.SerializedStyles;
 
-export { StyledTooltip, Subtext, cardBorderRadiusPx, darkGradientBg, delta, getFocusOutline, headingContentMarginPx, mcBold, mcBoldStyled, minSmMaxLgContentInset, outlineOffset, overlaySurface, overlaySurfaceBorderColor, pageBorderRadius, pageBorderRadiusPx, rootFontSizePx, rootFontSizeRems, smContentInset, standardBorderRadius, standardCardShadow, standardContentInset, standardContentInsetMdPx, standardContentInsetPx, standardContentInsetSmPx, standardFocusOutline, standardLineHeightEms, subtext };
+export { Subtext, cardBorderRadiusPx, darkGradientBg, delta, getFocusOutline, headingContentMarginPx, mcBold, mcBoldStyled, outlineOffset, overlaySurface, overlaySurfaceBorderColor, pageBorderRadius, pageBorderRadiusPx, rootFontSizePx, rootFontSizeRems, standardBorderRadius, standardCardShadow, standardContentInset, standardFocusOutline, standardLineHeightEms, subtext };

package/dist/styles/common.d.ts

@@ -1,4 +1,3 @@
-import * as react_tooltip from 'react-tooltip';
 import * as _emotion_styled from '@emotion/styled';
 import * as react from 'react';
 import * as _emotion_react from '@emotion/react';
@@ -11,17 +10,20 @@ declare const rootFontSizePx = 12;
 declare const rootFontSizeRems: number;
 declare const standardLineHeightEms = 1.21;
 declare const headingContentMarginPx = 30;
-declare const standardContentInsetPx = 32;
-declare const standardContentInsetMdPx = 24;
-declare const standardContentInsetSmPx = 16;
+declare const standardContentInset: {
+    smPx: number;
+    minSmMaxLgPx: number;
+    lgPx: number;
+    smCSS: _emotion_react.SerializedStyles;
+    minSmMaxLgCSS: _emotion_react.SerializedStyles;
+    lgCSS: _emotion_react.SerializedStyles;
+    css: _emotion_react.SerializedStyles;
+};
 declare const standardBorderRadiusPx: readonly [0, 4, 8, 12, 16];
 type StandardBorderRadius = (typeof standardBorderRadiusPx)[number];
 declare const cardBorderRadiusPx = 16;
 type BorderRadiusArg = StandardBorderRadius | StandardBorderRadius[];
 declare const standardBorderRadius: (radius: BorderRadiusArg) => string;
-declare const smContentInset: _emotion_react.SerializedStyles;
-declare const minSmMaxLgContentInset: _emotion_react.SerializedStyles;
-declare const standardContentInset: _emotion_react.SerializedStyles;
 declare const standardCardShadow: _emotion_react.SerializedStyles;
 declare const pageBorderRadiusPx = 16;
 declare const pageBorderRadius = "\n  border-radius: 16px;\n";
@@ -40,9 +42,6 @@ declare const Subtext: _emotion_styled.StyledComponent<{
     as?: react.ElementType<any>;
 }, react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 declare const darkGradientBg: _emotion_react.SerializedStyles;
-declare const StyledTooltip: _emotion_styled.StyledComponent<react_tooltip.ITooltip & react.RefAttributes<react_tooltip.TooltipRefProps> & {
-    theme?: Theme;
-}, {}, {}>;
 declare const overlaySurfaceBorderColor: ({ theme, important, }: WithTheme<{
     important?: boolean;
 }>) => _emotion_react.SerializedStyles;
@@ -52,4 +51,4 @@ declare const overlaySurface: ({ theme, important, }: WithTheme<{
 declare const mcBold: (theme: Theme) => _emotion_react.SerializedStyles;
 declare const mcBoldStyled: ({ theme }: ThemeProp) => _emotion_react.SerializedStyles;
 
-export { StyledTooltip, Subtext, cardBorderRadiusPx, darkGradientBg, delta, getFocusOutline, headingContentMarginPx, mcBold, mcBoldStyled, minSmMaxLgContentInset, outlineOffset, overlaySurface, overlaySurfaceBorderColor, pageBorderRadius, pageBorderRadiusPx, rootFontSizePx, rootFontSizeRems, smContentInset, standardBorderRadius, standardCardShadow, standardContentInset, standardContentInsetMdPx, standardContentInsetPx, standardContentInsetSmPx, standardFocusOutline, standardLineHeightEms, subtext };
+export { Subtext, cardBorderRadiusPx, darkGradientBg, delta, getFocusOutline, headingContentMarginPx, mcBold, mcBoldStyled, outlineOffset, overlaySurface, overlaySurfaceBorderColor, pageBorderRadius, pageBorderRadiusPx, rootFontSizePx, rootFontSizeRems, standardBorderRadius, standardCardShadow, standardContentInset, standardFocusOutline, standardLineHeightEms, subtext };

package/dist/styles/common.js

@@ -1,5 +1,4 @@
 import {
-  StyledTooltip,
   Subtext,
   cardBorderRadiusPx,
   darkGradientBg,
@@ -8,7 +7,6 @@ import {
   headingContentMarginPx,
   mcBold,
   mcBoldStyled,
-  minSmMaxLgContentInset,
   outlineOffset,
   overlaySurface,
   overlaySurfaceBorderColor,
@@ -16,24 +14,18 @@ import {
   pageBorderRadiusPx,
   rootFontSizePx,
   rootFontSizeRems,
-  smContentInset,
   standardBorderRadius,
   standardCardShadow,
   standardContentInset,
-  standardContentInsetMdPx,
-  standardContentInsetPx,
-  standardContentInsetSmPx,
   standardFocusOutline,
   standardLineHeightEms,
   subtext
-} from "../chunk-RFGKH3R6.js";
+} from "../chunk-JK4BP73A.js";
 import "../chunk-2VBDEO6M.js";
 import "../chunk-E4EXM4SY.js";
 import "../chunk-JSGRNWSB.js";
-import "../chunk-CLU2FRJZ.js";
 import "../chunk-CIGAQ47A.js";
 export {
-  StyledTooltip,
   Subtext,
   cardBorderRadiusPx,
   darkGradientBg,
@@ -42,7 +34,6 @@ export {
   headingContentMarginPx,
   mcBold,
   mcBoldStyled,
-  minSmMaxLgContentInset,
   outlineOffset,
   overlaySurface,
   overlaySurfaceBorderColor,
@@ -50,13 +41,9 @@ export {
   pageBorderRadiusPx,
   rootFontSizePx,
   rootFontSizeRems,
-  smContentInset,
   standardBorderRadius,
   standardCardShadow,
   standardContentInset,
-  standardContentInsetMdPx,
-  standardContentInsetPx,
-  standardContentInsetSmPx,
   standardFocusOutline,
   standardLineHeightEms,
   subtext