@lightsparkdev/ui 0.0.7 → 0.0.9

package/dist/components/CopyToClipboardButton.cjs

@@ -72,12 +72,15 @@ __export(CopyToClipboardButton_exports, {
 module.exports = __toCommonJS(CopyToClipboardButton_exports);
 var import_styled4 = __toESM(require("@emotion/styled"), 1);
 var import_nanoid = require("nanoid");
-var import_react6 = require("react");
+var import_react8 = require("react");
+
+// src/components/Icon.tsx
+var import_styled2 = __toESM(require("@emotion/styled"), 1);
+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");
@@ -1260,6 +1263,10 @@ var umaLightTheme = extend(lightTheme, {
     bg: uma.blue90
   })
 });
+var isLight = (theme) => theme.type === "light" /* Light */;
+var themeOr = (lightValue, darkValue) => ({ theme }) => {
+  return isLight(theme) ? lightValue : darkValue;
+};
 function luminance(r, g, b) {
   const a = [r, g, b].map(function(v) {
     v /= 255;
@@ -1283,59 +1290,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),
@@ -1370,13 +1365,26 @@ 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
+}) => import_react4.css`
+  border-color: ${themeOr(theme.c1Neutral, theme.c3Neutral)({ theme })}
+    ${important ? "!important" : ""};
+`;
+var overlaySurface = ({
+  theme,
+  important = false
+}) => import_react4.css`
+  background-color: ${themeOr(colors.white, theme.c1Neutral)({ theme })}
+    ${important ? "!important" : ""};
+  border: 0.5px solid ${important ? "!important" : ""};
+  ${overlaySurfaceBorderColor({ theme, important })};
+  ${themeOr(
+  `box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.08), 0px 1px 4px rgba(0, 0, 0, 0.1) ${important ? "!important" : ""};`,
+  ""
+)({ theme })}
 `;
-
-// src/components/Icon.tsx
-var import_styled2 = __toESM(require("@emotion/styled"), 1);
-var import_react5 = require("react");
 
 // src/utils/strings.tsx
 function isString(str) {
@@ -1460,6 +1468,87 @@ var IconContainer = import_styled2.default.span`
   `}
 `;
 
+// src/components/LightTooltip.tsx
+var import_css = require("@emotion/css");
+var import_react6 = require("@emotion/react");
+var import_react7 = __toESM(require("react"), 1);
+var import_react_dom = __toESM(require("react-dom"), 1);
+var import_react_tooltip = require("react-tooltip");
+
+// 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
+  notificationBanner: 170,
+  qrReaderVideo: 180,
+  qrReaderOverlay: 181,
+  modalOverlay: 190,
+  modalContainer: 191,
+  dropdown: 192,
+  tooltip: 193,
+  toast: 200
+};
+
+// src/components/LightTooltip.tsx
+var import_jsx_runtime3 = require("@emotion/react/jsx-runtime");
+function LightTooltip(props) {
+  const nodeRef = (0, import_react7.useRef)(null);
+  const [nodeReady, setNodeReady] = import_react7.default.useState(false);
+  (0, import_react7.useEffect)(() => {
+    if (!nodeRef.current) {
+      nodeRef.current = document.createElement("div");
+      document.body.appendChild(nodeRef.current);
+    }
+    setNodeReady(true);
+    return () => {
+      if (nodeRef.current) {
+        document.body.removeChild(nodeRef.current);
+        nodeRef.current = null;
+      }
+    };
+  }, []);
+  const theme = (0, import_react6.useTheme)();
+  console.log("LightTooltip.tsx: tooltipProps:", props);
+  return nodeReady && nodeRef.current ? import_react_dom.default.createPortal(
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      import_react_tooltip.Tooltip,
+      __spreadProps(__spreadValues({}, props), {
+        id: props.id || "",
+        content: props.content || "",
+        noArrow: true,
+        border: "0.05rem solid rgba(0, 0, 0, 0.1)",
+        className: styles({ theme }),
+        variant: "light",
+        delayShow: 180
+      })
+    ),
+    nodeRef.current
+  ) : null;
+}
+var styles = ({ theme }) => import_css.css`
+  font-size: "10px",
+  color: ${theme.c2Neutral};
+  border-radius: 8px !important;
+  padding: 16px !important;
+  z-index: ${z.tooltip};
+  ${overlaySurface({ theme, important: true })};
+
+  max-width: 260px;
+  box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.10), 0px 4px 8px 0px rgba(0, 0, 0, 0.08) !important;
+`;
+
 // src/components/UnstyledButton.tsx
 var import_styled3 = __toESM(require("@emotion/styled"), 1);
 var UnstyledButton = import_styled3.default.button`
@@ -1477,15 +1566,15 @@ var UnstyledButton = import_styled3.default.button`
 `;
 
 // src/components/CopyToClipboardButton.tsx
-var import_jsx_runtime3 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime4 = 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_react6.useState)(originalTooltipContent);
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+  const [tooltipContent, setTooltipContent] = (0, import_react8.useState)(originalTooltipContent);
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
       Button,
       {
         type: "button",
@@ -1506,12 +1595,19 @@ var CopyToClipboardButton = (props) => {
         ml: props.ml,
         "data-tooltip-id": id,
         children: [
-          props.children ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Children, { children: props.children }) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon, { name: icon, width: props.isSm ? 12 : 16 })
+          props.children ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Children, { children: props.children }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { name: icon, width: props.isSm ? 12 : 16 })
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(StyledTooltip, { id, place: props.place || "right", variant: "dark", children: tooltipContent })
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      LightTooltip,
+      {
+        id,
+        place: props.place || "right",
+        content: tooltipContent
+      }
+    )
   ] });
 };
 var Children = import_styled4.default.span`

package/dist/components/CopyToClipboardButton.js

@@ -1,14 +1,15 @@
 import {
   CopyToClipboardButton
-} from "../chunk-WWFDI534.js";
-import "../chunk-IQFU7CM5.js";
-import "../chunk-NZJCJJH5.js";
+} from "../chunk-7C4MHI6Q.js";
+import "../chunk-3GS5EFXV.js";
+import "../chunk-3EVAP5JT.js";
+import "../chunk-55OQPFLF.js";
+import "../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 {
   CopyToClipboardButton

package/dist/components/CurrencyAmount.cjs

@@ -82,7 +82,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");
@@ -1288,59 +1287,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),
@@ -1360,9 +1347,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/components/CurrencyAmount.js

@@ -1,14 +1,13 @@
 import {
   CurrencyAmount,
   CurrencyIcon
-} from "../chunk-23SR7TFO.js";
-import "../chunk-NZJCJJH5.js";
+} from "../chunk-XZR237JJ.js";
+import "../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 {
   CurrencyAmount,