@lightsparkdev/ui 0.0.5 → 0.0.7

package/dist/components/ProgressBar.cjs

@@ -50,11 +50,107 @@ __export(ProgressBar_exports, {
   ProgressBar: () => ProgressBar
 });
 module.exports = __toCommonJS(ProgressBar_exports);
-var import_styled = __toESM(require("@emotion/styled"), 1);
-var import_react2 = require("react");
+var import_styled2 = __toESM(require("@emotion/styled"), 1);
+var import_react5 = require("react");
 
 // src/styles/colors.tsx
+var import_react3 = require("@emotion/react");
+
+// src/styles/breakpoints.tsx
 var import_react = require("@emotion/react");
+var import_lodash_es = require("lodash-es");
+var import_react2 = require("react");
+var import_jsx_runtime = require("@emotion/react/jsx-runtime");
+var Breakpoints = /* @__PURE__ */ ((Breakpoints2) => {
+  Breakpoints2["sm"] = "sm";
+  Breakpoints2["md"] = "md";
+  Breakpoints2["lg"] = "lg";
+  return Breakpoints2;
+})(Breakpoints || {});
+var breakpoints = {
+  ["sm" /* sm */]: 640,
+  ["md" /* md */]: 834,
+  ["lg" /* lg */]: 1200
+};
+var breakpointFn = (mq) => (style) => `@media ${mq} { ${style} }`;
+var bp = {
+  key: Breakpoints,
+  ["sm" /* sm */]: breakpointFn(`(max-width:${breakpoints.sm}px)`),
+  ["lg" /* lg */]: breakpointFn(`(min-width:${breakpoints.lg}px)`),
+  ["minSmMaxLg" /* minSmMaxLg */]: breakpointFn(
+    `(min-width:${breakpoints.sm + 1}px) and (max-width:${breakpoints.lg - 1}px)`
+  ),
+  ["minSmMaxMd" /* minSmMaxMd */]: breakpointFn(
+    `(min-width:${breakpoints.sm + 1}px) and (max-width:${breakpoints.md - 1}px)`
+  ),
+  ["minMdMaxLg" /* minMdMaxLg */]: breakpointFn(
+    `(min-width:${breakpoints.md}px) and (max-width:${breakpoints.lg - 1}px)`
+  ),
+  ["maxLg" /* maxLg */]: breakpointFn(`(max-width:${breakpoints.lg - 1}px)`),
+  ["maxMd" /* maxMd */]: breakpointFn(`(max-width:${breakpoints.md - 1}px)`),
+  ["minSm" /* minSm */]: breakpointFn(`(min-width:${breakpoints.sm + 1}px)`),
+  ["minMd" /* minMd */]: breakpointFn(`(min-width:${breakpoints.md + 1}px)`),
+  current: function(assertBp) {
+    const currentBp = (
+      /* window is undefined in first server side render for Next apps: */
+      typeof window === "undefined" ? "sm" /* sm */ : window.getComputedStyle(document.body, ":before").content.replace(/"/g, "")
+    );
+    if (assertBp) {
+      return inRange(
+        currentBp,
+        assertBp
+      );
+    }
+    return currentBp;
+  },
+  switch: (smVal, minSmMaxMdVal, minMdMaxLgVal, lgVal) => {
+    const currentBp = bp.current();
+    if (currentBp === "sm" /* sm */) {
+      return smVal;
+    } else if (currentBp === "minSmMaxMd" /* minSmMaxMd */) {
+      return minSmMaxMdVal;
+    } else if (currentBp === "minMdMaxLg" /* minMdMaxLg */) {
+      return minMdMaxLgVal;
+    }
+    return lgVal;
+  },
+  isSm: () => bp.current("sm" /* sm */),
+  isMinSm: () => bp.current("minSm" /* minSm */),
+  isMinSmMaxMd: () => bp.current("minSmMaxMd" /* minSmMaxMd */),
+  isMinMdMaxLg: () => bp.current("minMdMaxLg" /* minMdMaxLg */),
+  isLg: () => bp.current("lg" /* lg */)
+};
+function inRange(currentBp, assertBp) {
+  const isSm = currentBp === "sm" /* sm */;
+  const isMinSmMaxMd = currentBp === "minSmMaxMd" /* minSmMaxMd */;
+  const isMinMdMaxLg = currentBp === "minMdMaxLg" /* minMdMaxLg */;
+  const isLg = currentBp === "lg" /* lg */;
+  if (assertBp) {
+    switch (assertBp) {
+      case "sm" /* sm */:
+        return isSm;
+      case "minSmMaxMd" /* minSmMaxMd */:
+        return isMinSmMaxMd;
+      case "minMdMaxLg" /* minMdMaxLg */:
+        return isMinMdMaxLg;
+      case "lg" /* lg */:
+        return isLg;
+      case "minSmMaxLg" /* minSmMaxLg */:
+        return isMinSmMaxMd || isMinMdMaxLg;
+      case "maxLg" /* maxLg */:
+        return isSm || isMinSmMaxMd || isMinMdMaxLg;
+      case "maxMd" /* maxMd */:
+        return isSm || isMinSmMaxMd;
+      case "minSm" /* minSm */:
+        return isMinSmMaxMd || isMinMdMaxLg || isLg;
+      case "minMd" /* minMd */:
+        return isMinMdMaxLg || isLg;
+      default:
+        return false;
+    }
+  }
+  return false;
+}
 
 // src/styles/fonts/typographyTokens.ts
 var FONT_FAMILIES = {
@@ -981,6 +1077,7 @@ var uma = {
   strokeProminent: "#9BA7B9",
   fill: "#EBEEF2"
 };
+var darkGradient = "#1d1d1d linear-gradient(180deg, #090909 63.08%, #1d1d1d 100.52%)";
 var primary = "#FFF14E";
 var colors = __spreadProps(__spreadValues({}, neutral), {
   uma,
@@ -1164,8 +1261,95 @@ function hexToRGB(hex) {
   ] : [0, 0, 0];
 }
 
+// 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/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 standardBorderRadius = (radius) => {
+  const borderRadiusPx = Array.isArray(radius) ? radius.map((r) => `${r}px`).join(" ") : `${radius}px`;
+  return `
+    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),
+    0px 8px 24px 0px rgba(0, 0, 0, 0.04);
+`;
+var pageBorderRadiusPx = 16;
+var pageBorderRadius = `
+  border-radius: ${pageBorderRadiusPx}px;
+`;
+var subtext = ({ theme }) => import_react4.css`
+  color: ${theme.c6Neutral};
+  font-weight: 600;
+`;
+var Subtext = import_styled.default.div`
+  ${subtext}
+`;
+var darkGradientBg = import_react4.css`
+  background: ${darkGradient};
+`;
+var StyledTooltip = (0, import_styled.default)(import_react_tooltip.Tooltip)`
+  z-index: ${z.modalOverlay};
+`;
+
 // src/components/ProgressBar.tsx
-var import_jsx_runtime = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime2 = require("@emotion/react/jsx-runtime");
 var defaultProps = {
   isSm: false,
   stepDuration: 0.5
@@ -1176,18 +1360,17 @@ function ProgressBar({
   isSm = defaultProps.isSm,
   stepDuration = defaultProps.stepDuration
 }) {
-  const [percentage, setPercentage] = (0, import_react2.useState)(5);
-  if (progressPercentage === void 0) {
-    setTimeout(() => {
-      setPercentage(100);
-    }, 0);
-  }
-  (0, import_react2.useEffect)(() => {
+  const [percentage, setPercentage] = (0, import_react5.useState)(5);
+  (0, import_react5.useEffect)(() => {
     if (progressPercentage !== void 0) {
       setPercentage(progressPercentage);
+    } else {
+      setTimeout(() => {
+        setPercentage(100);
+      }, 0);
     }
   }, [progressPercentage]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ProgressBarContainer, { isSm, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Bar, { isSm, percentage, stepDuration, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ProgressBarContainer, { isSm, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Bar, { isSm, percentage, stepDuration, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     BarBg,
     {
       background,
@@ -1198,9 +1381,9 @@ function ProgressBar({
   ) }) });
 }
 ProgressBar.defaultProps = defaultProps;
-var ProgressBarContainer = import_styled.default.div`
+var ProgressBarContainer = import_styled2.default.div`
+  ${standardBorderRadius(16)}
   background-color: ${({ theme }) => themeOr(theme.c05Neutral, theme.c1Neutral)({ theme })};
-  border-radius: 16px;
   box-sizing: border-box;
   display: flex;
   height: ${({ isSm }) => isSm ? "6px" : "16px"};
@@ -1208,8 +1391,8 @@ var ProgressBarContainer = import_styled.default.div`
   width: 100%;
   position: relative;
 `;
-var BarBg = import_styled.default.div`
-  border-radius: 16px;
+var BarBg = import_styled2.default.div`
+  ${standardBorderRadius(16)}
   width: ${({ percentage }) => 100 / percentage * 100}%;
   height: 100%;
 
@@ -1222,9 +1405,9 @@ var BarBg = import_styled.default.div`
     #3f2e7e 115.32%
   )`};
 `;
-var Bar = import_styled.default.div`
+var Bar = import_styled2.default.div`
+  ${standardBorderRadius(16)}
   overflow: hidden;
-  border-radius: ${({ isSm }) => isSm ? "6px" : "16px"};
   box-sizing: border-box;
   display: inline-block;
   height: ${({ isSm }) => isSm ? "6px" : "16px"};

package/dist/components/ProgressBar.js

@@ -1,9 +1,11 @@
 import {
   ProgressBar
-} from "../chunk-ZQTE53SK.js";
+} from "../chunk-RTUZVKPK.js";
+import "../chunk-RFGKH3R6.js";
 import "../chunk-2VBDEO6M.js";
 import "../chunk-E4EXM4SY.js";
 import "../chunk-JSGRNWSB.js";
+import "../chunk-CLU2FRJZ.js";
 import "../chunk-CIGAQ47A.js";
 export {
   ProgressBar

package/dist/components/SecretContainer.cjs

@@ -72,11 +72,6 @@ __export(SecretContainer_exports, {
 module.exports = __toCommonJS(SecretContainer_exports);
 var import_styled5 = __toESM(require("@emotion/styled"), 1);
 
-// src/components/CopyToClipboardButton.tsx
-var import_styled4 = __toESM(require("@emotion/styled"), 1);
-var import_nanoid = require("nanoid");
-var import_react6 = require("react");
-
 // src/styles/common.tsx
 var import_react4 = require("@emotion/react");
 var import_styled = __toESM(require("@emotion/styled"), 1);
@@ -1318,6 +1313,12 @@ var rootFontSizeRems = rootFontSizePx / 16;
 var standardContentInsetPx = 32;
 var standardContentInsetMdPx = 24;
 var standardContentInsetSmPx = 16;
+var standardBorderRadius = (radius) => {
+  const borderRadiusPx = Array.isArray(radius) ? radius.map((r) => `${r}px`).join(" ") : `${radius}px`;
+  return `
+    border-radius: ${borderRadiusPx};
+  `;
+};
 var smContentInset = import_react4.css`
   ${bp.sm(`
     margin-left: auto;
@@ -1377,6 +1378,11 @@ var StyledTooltip = (0, import_styled.default)(import_react_tooltip.Tooltip)`
   z-index: ${z.modalOverlay};
 `;
 
+// src/components/CopyToClipboardButton.tsx
+var import_styled4 = __toESM(require("@emotion/styled"), 1);
+var import_nanoid = require("nanoid");
+var import_react6 = require("react");
+
 // src/components/Icon.tsx
 var import_styled2 = __toESM(require("@emotion/styled"), 1);
 var import_react5 = require("react");
@@ -1547,7 +1553,7 @@ function SecretContainer(props) {
 }
 var StyledSecretContainer = import_styled5.default.div`
   background-color: ${({ theme, hasSecret, success }) => hasSecret ? success ? theme.success : theme.c05Neutral : theme.bg};
-  border-radius: 8px;
+  ${standardBorderRadius(8)}
   padding: 18px 20px;
   color: ${({ theme, success }) => success ? theme.hcNeutral : theme.text};
   border: solid 1px

package/dist/components/SecretContainer.js

@@ -1,15 +1,15 @@
 import {
   SecretContainer
-} from "../chunk-PVUPVJ3F.js";
-import "../chunk-FRIQXHPR.js";
-import "../chunk-DHNWT2E5.js";
-import "../chunk-MYG24ZWT.js";
+} from "../chunk-3CZOYF3X.js";
+import "../chunk-WWFDI534.js";
+import "../chunk-IQFU7CM5.js";
+import "../chunk-NZJCJJH5.js";
 import "../chunk-LAMQKQU3.js";
-import "../chunk-XUGLVWSH.js";
-import "../chunk-CLU2FRJZ.js";
+import "../chunk-RFGKH3R6.js";
 import "../chunk-2VBDEO6M.js";
 import "../chunk-E4EXM4SY.js";
 import "../chunk-JSGRNWSB.js";
+import "../chunk-CLU2FRJZ.js";
 import "../chunk-CIGAQ47A.js";
 export {
   SecretContainer

package/dist/components/TextIconAligner.d.cts

@@ -9,13 +9,13 @@ type TextIconAlignerProps = {
         color?: string;
         lg?: boolean | undefined;
         ml?: MarginPx | undefined;
-    } | null;
+    } | undefined | null;
     leftIcon?: {
         name: string;
         color?: string;
         lg?: boolean | undefined;
         mr?: MarginPx | undefined;
-    } | null;
+    } | undefined | null;
     onClick?: (() => void) | undefined;
 };
 declare function TextIconAligner({ text, rightIcon, leftIcon, onClick, }: TextIconAlignerProps): _emotion_react_jsx_runtime.JSX.Element;

package/dist/components/TextIconAligner.d.ts

@@ -9,13 +9,13 @@ type TextIconAlignerProps = {
         color?: string;
         lg?: boolean | undefined;
         ml?: MarginPx | undefined;
-    } | null;
+    } | undefined | null;
     leftIcon?: {
         name: string;
         color?: string;
         lg?: boolean | undefined;
         mr?: MarginPx | undefined;
-    } | null;
+    } | undefined | null;
     onClick?: (() => void) | undefined;
 };
 declare function TextIconAligner({ text, rightIcon, leftIcon, onClick, }: TextIconAlignerProps): _emotion_react_jsx_runtime.JSX.Element;

package/dist/components/TextIconAligner.js

@@ -1,13 +1,13 @@
 import {
   TextIconAligner
-} from "../chunk-WEPQ7LRL.js";
-import "../chunk-MYG24ZWT.js";
+} from "../chunk-N2RDQJQ5.js";
+import "../chunk-NZJCJJH5.js";
 import "../chunk-LAMQKQU3.js";
-import "../chunk-XUGLVWSH.js";
-import "../chunk-CLU2FRJZ.js";
+import "../chunk-RFGKH3R6.js";
 import "../chunk-2VBDEO6M.js";
 import "../chunk-E4EXM4SY.js";
 import "../chunk-JSGRNWSB.js";
+import "../chunk-CLU2FRJZ.js";
 import "../chunk-CIGAQ47A.js";
 export {
   TextIconAligner

package/dist/components/UnstyledButton.js

@@ -1,11 +1,11 @@
 import {
   UnstyledButton
-} from "../chunk-DHNWT2E5.js";
-import "../chunk-XUGLVWSH.js";
-import "../chunk-CLU2FRJZ.js";
+} from "../chunk-IQFU7CM5.js";
+import "../chunk-RFGKH3R6.js";
 import "../chunk-2VBDEO6M.js";
 import "../chunk-E4EXM4SY.js";
 import "../chunk-JSGRNWSB.js";
+import "../chunk-CLU2FRJZ.js";
 import "../chunk-CIGAQ47A.js";
 export {
   UnstyledButton

package/dist/components/documentation/AnchorLinkHeader.cjs

@@ -78,6 +78,11 @@ var import_styled4 = __toESM(require("@emotion/styled"), 1);
 var import_styled = __toESM(require("@emotion/styled"), 1);
 var import_react4 = __toESM(require("react"), 1);
 
+// src/utils/emotion.tsx
+function select(component) {
+  return component.toString();
+}
+
 // src/styles/colors.tsx
 var import_react3 = require("@emotion/react");
 
@@ -1346,7 +1351,7 @@ var StyledHeadline = import_styled.default.span`
   }
 `;
 function headlineSelector(heading) {
-  return `${heading}${StyledHeadline.toString()}`;
+  return `${heading}${select(StyledHeadline)}`;
 }
 var ALL_HEADLINE_SELECTORS = HEADINGS.map(headlineSelector).join(",");
 
@@ -1556,7 +1561,7 @@ var StyledAnchorLinkHeader = import_styled4.default.div`
     padding-right: 24px;
   }
 
-  &:hover ${IconWrapper} {
+  &:hover ${select(IconWrapper)} {
     opacity: 1;
     transform: translateX(0px);
   }

package/dist/components/documentation/AnchorLinkHeader.js

@@ -1,15 +1,16 @@
 "use client";
 import {
   AnchorLinkHeader
-} from "../../chunk-ANJDI74G.js";
-import "../../chunk-4K2KAYVH.js";
-import "../../chunk-MYG24ZWT.js";
+} from "../../chunk-NH25O7PC.js";
+import "../../chunk-4TFRLWCC.js";
+import "../../chunk-YMNSXZ5D.js";
+import "../../chunk-NZJCJJH5.js";
 import "../../chunk-LAMQKQU3.js";
-import "../../chunk-XUGLVWSH.js";
-import "../../chunk-CLU2FRJZ.js";
+import "../../chunk-RFGKH3R6.js";
 import "../../chunk-2VBDEO6M.js";
 import "../../chunk-E4EXM4SY.js";
 import "../../chunk-JSGRNWSB.js";
+import "../../chunk-CLU2FRJZ.js";
 import "../../chunk-CIGAQ47A.js";
 export {
   AnchorLinkHeader

package/dist/components/documentation/index.cjs

@@ -79,6 +79,11 @@ var import_styled4 = __toESM(require("@emotion/styled"), 1);
 var import_styled = __toESM(require("@emotion/styled"), 1);
 var import_react4 = __toESM(require("react"), 1);
 
+// src/utils/emotion.tsx
+function select(component) {
+  return component.toString();
+}
+
 // src/styles/colors.tsx
 var import_react3 = require("@emotion/react");
 
@@ -1347,7 +1352,7 @@ var StyledHeadline = import_styled.default.span`
   }
 `;
 function headlineSelector(heading) {
-  return `${heading}${StyledHeadline.toString()}`;
+  return `${heading}${select(StyledHeadline)}`;
 }
 var ALL_HEADLINE_SELECTORS = HEADINGS.map(headlineSelector).join(",");
 
@@ -1557,7 +1562,7 @@ var StyledAnchorLinkHeader = import_styled4.default.div`
     padding-right: 24px;
   }
 
-  &:hover ${IconWrapper} {
+  &:hover ${select(IconWrapper)} {
     opacity: 1;
     transform: translateX(0px);
   }

package/dist/components/documentation/index.js

@@ -1,14 +1,15 @@
 import {
   AnchorLinkHeader
-} from "../../chunk-ANJDI74G.js";
-import "../../chunk-4K2KAYVH.js";
-import "../../chunk-MYG24ZWT.js";
+} from "../../chunk-NH25O7PC.js";
+import "../../chunk-4TFRLWCC.js";
+import "../../chunk-YMNSXZ5D.js";
+import "../../chunk-NZJCJJH5.js";
 import "../../chunk-LAMQKQU3.js";
-import "../../chunk-XUGLVWSH.js";
-import "../../chunk-CLU2FRJZ.js";
+import "../../chunk-RFGKH3R6.js";
 import "../../chunk-2VBDEO6M.js";
 import "../../chunk-E4EXM4SY.js";
 import "../../chunk-JSGRNWSB.js";
+import "../../chunk-CLU2FRJZ.js";
 import "../../chunk-CIGAQ47A.js";
 export {
   AnchorLinkHeader