@lightsparkdev/ui 0.0.0

package/dist/components/index.cjs

@@ -0,0 +1,2720 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+
+// src/components/index.tsx
+var components_exports = {};
+__export(components_exports, {
+  Button: () => Button,
+  ButtonRow: () => ButtonRow,
+  ButtonRowContainer: () => ButtonRowContainer,
+  ButtonSelector: () => ButtonSelector,
+  Collapsible: () => Collapsible,
+  CommandKey: () => CommandKey,
+  CopyToClipboardButton: () => CopyToClipboardButton,
+  CurrencyAmount: () => CurrencyAmount,
+  CurrencyIcon: () => CurrencyIcon,
+  Icon: () => Icon,
+  IconContainer: () => IconContainer,
+  LightboxImage: () => LightboxImage,
+  LightsparkProvider: () => LightsparkProvider,
+  Loading: () => Loading,
+  LoadingWrapper: () => LoadingWrapper,
+  Modal: () => Modal,
+  SecretContainer: () => SecretContainer,
+  StyledButton: () => StyledButton,
+  TextIconAligner: () => TextIconAligner,
+  UnstyledButton: () => UnstyledButton
+});
+module.exports = __toCommonJS(components_exports);
+
+// src/components/Button.tsx
+var import_react7 = require("@emotion/react");
+var import_styled5 = __toESM(require("@emotion/styled"), 1);
+
+// src/router.tsx
+var import_lodash_es2 = require("lodash-es");
+var import_react4 = require("react");
+var import_react_router_dom = require("react-router-dom");
+
+// 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;
+}
+function useBreakpoints() {
+  const [currentBp, setCurrentBp] = (0, import_react2.useState)(bp.current());
+  (0, import_react2.useLayoutEffect)(() => {
+    const handleResize = () => {
+      const newBp = bp.current();
+      if (newBp !== currentBp) {
+        setCurrentBp(newBp);
+      }
+    };
+    handleResize();
+    window.addEventListener("resize", handleResize);
+    window.addEventListener("deviceorientation", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+      window.removeEventListener("deviceorientation", handleResize);
+    };
+  });
+  return bp;
+}
+
+// src/styles/fonts/typographyTokens.ts
+var FONT_FAMILIES = {
+  main: "Montserrat",
+  code: "Monaco"
+};
+var LINE_HEIGHTS = {
+  "5xl": "72px",
+  "4xl": "60px",
+  "3xl": "44px",
+  "2xl": "40px",
+  xl: "36px",
+  lg: "32px",
+  md: "28px",
+  sm: "24px",
+  xs: "20px",
+  "2xs": "16px"
+};
+var FONT_WEIGHTS = {
+  main: {
+    Bold: 700,
+    SemiBold: 600,
+    Medium: 500
+  },
+  code: {
+    Bold: 700,
+    Regular: 400
+  }
+};
+var FONT_SIZE = {
+  "2xs": "11px",
+  xs: "12px",
+  sm: "14px",
+  md: "16px",
+  lg: "20px",
+  xl: "24px",
+  "2xl": "28px",
+  "3xl": "32px",
+  "4xl": "36px",
+  "5xl": "48px",
+  "6xl": "64px"
+};
+var LETTER_SPACING = {
+  tight: "-.02em",
+  normal: "0",
+  loose: ".1em"
+};
+var TEXT_CASE = {
+  none: "none",
+  uppercase: "uppercase"
+};
+var TEXT_DECORATION = {
+  none: "none"
+};
+var PARAGRAPH_INDENT = {
+  0: "0px"
+};
+var PARAGRAPH_SPACING = {
+  default: "default",
+  16: "16px",
+  40: "40px"
+};
+var getTypography = (customFontFamilies) => {
+  const fontFamilies = customFontFamilies != null ? customFontFamilies : FONT_FAMILIES;
+  return {
+    fontFamilies,
+    lineHeights: LINE_HEIGHTS,
+    fontWeights: FONT_WEIGHTS,
+    fontSize: FONT_SIZE,
+    letterSpacing: LETTER_SPACING,
+    textCase: TEXT_CASE,
+    textDecoration: TEXT_DECORATION,
+    paragraphIndent: PARAGRAPH_INDENT,
+    paragraphSpacing: PARAGRAPH_SPACING,
+    ["Lightspark" /* Lightspark */]: {
+      Display: {
+        ["Large" /* Large */]: {
+          "font-family": `${fontFamilies.main}`,
+          "font-weight": `${FONT_WEIGHTS.main.Bold}`,
+          "line-height": `${LINE_HEIGHTS["5xl"]}`,
+          "font-size": `${FONT_SIZE["6xl"]}`,
+          "letter-spacing": `${LETTER_SPACING.tight}`,
+          "paragraph-spacing": `${PARAGRAPH_SPACING.default}`,
+          "paragraph-indent": `${PARAGRAPH_INDENT[0]}`,
+          "text-case": `${TEXT_CASE.none}`,
+          "text-decoration": `${TEXT_DECORATION.none}`
+        },
+        ["Medium" /* Medium */]: {
+          "font-family": `${fontFamilies.main}`,
+          "font-weight": `${FONT_WEIGHTS.main.Bold}`,
+          "line-height": `${LINE_HEIGHTS["4xl"]}`,
+          "font-size": `${FONT_SIZE["5xl"]}`,
+          "letter-spacing": `${LETTER_SPACING.tight}`,
+          "paragraph-spacing": `${PARAGRAPH_SPACING.default}`,
+          "paragraph-indent": `${PARAGRAPH_INDENT[0]}`,
+          "text-case": `${TEXT_CASE.none}`,
+          "text-decoration": `${TEXT_DECORATION.none}`
+        },
+        ["Small" /* Small */]: {
+          "font-family": `${fontFamilies.main}`,
+          "font-weight": `${FONT_WEIGHTS.main.Bold}`,
+          "line-height": `${LINE_HEIGHTS["3xl"]}`,
+          "font-size": `${FONT_SIZE["4xl"]}`,
+          "letter-spacing": `${LETTER_SPACING.tight}`,
+          "paragraph-spacing": `${PARAGRAPH_SPACING.default}`,
+          "paragraph-indent": `${PARAGRAPH_INDENT[0]}`,
+          "text-case": `${TEXT_CASE.none}`,
+          "text-decoration": `${TEXT_DECORATION.none}`
+        }
+      },
+      Headline: {
+        ["Large" /* Large */]: {
+          "font-family": `${fontFamilies.main}`,
+          "font-weight": `${FONT_WEIGHTS.main.Bold}`,
+          "line-height": `${LINE_HEIGHTS["2xl"]}`,
+          "font-size": `${FONT_SIZE["3xl"]}`,
+          "letter-spacing": `${LETTER_SPACING.tight}`,
+          "paragraph-spacing": `${PARAGRAPH_SPACING[16]}`,
+          "paragraph-indent": `${PARAGRAPH_INDENT[0]}`,
+          "text-case": `${TEXT_CASE.none}`,
+          "text-decoration": `${TEXT_DECORATION.none}`
+        },
+        ["Medium" /* Medium */]: {
+          "font-family": `${fontFamilies.main}`,
+          "font-weight": `${FONT_WEIGHTS.main.Bold}`,
+          "line-height": `${LINE_HEIGHTS.xl}`,
+          "font-size": `${FONT_SIZE["2xl"]}`,
+          "letter-spacing": `${LETTER_SPACING.tight}`,
+          "paragraph-spacing": `${PARAGRAPH_SPACING[16]}`,
+          "paragraph-indent": `${PARAGRAPH_INDENT[0]}`,
+          "text-case": `${TEXT_CASE.none}`,
+          "text-decoration": `${TEXT_DECORATION.none}`
+        },
+        ["Small" /* Small */]: {
+          "font-family": `${fontFamilies.main}`,
+          "font-weight": `${FONT_WEIGHTS.main.Bold}`,
+          "line-height": `${LINE_HEIGHTS.lg}`,
+          "font-size": `${FONT_SIZE.xl}`,
+          "letter-spacing": `${LETTER_SPACING.tight}`,
+          "paragraph-spacing": `${PARAGRAPH_SPACING[16]}`,
+          "paragraph-indent": `${PARAGRAPH_INDENT[0]}`,
+          "text-case": `${TEXT_CASE.none}`,
+          "text-decoration": `${TEXT_DECORATION.none}`
+        }
+      },
+      Title: {
+        ["Large" /* Large */]: {
+          "font-family": `${fontFamilies.main}`,
+          "font-weight": `${FONT_WEIGHTS.main.Bold}`,
+          "line-height": `${LINE_HEIGHTS.md}`,
+          "font-size": `${FONT_SIZE.lg}`,
+          "letter-spacing": `${LETTER_SPACING.normal}`,
+          "paragraph-spacing": `${PARAGRAPH_SPACING.default}`,
+          "paragraph-indent": `${PARAGRAPH_INDENT[0]}`,
+          "text-case": `${TEXT_CASE.none}`,
+          "text-decoration": `${TEXT_DECORATION.none}`
+        },
+        ["Medium" /* Medium */]: {
+          "font-family": `${fontFamilies.main}`,
+          "font-weight": `${FONT_WEIGHTS.main.Bold}`,
+          "line-height": `${LINE_HEIGHTS.sm}`,
+          "font-size": `${FONT_SIZE.md}`,
+          "letter-spacing": `${LETTER_SPACING.normal}`,
+          "paragraph-spacing": `${PARAGRAPH_SPACING.default}`,
+          "paragraph-indent": `${PARAGRAPH_INDENT[0]}`,
+          "text-case": `${TEXT_CASE.none}`,
+          "text-decoration": `${TEXT_DECORATION.none}`
+        },
+        ["Small" /* Small */]: {
+          "font-family": `${fontFamilies.main}`,
+          "font-weight": `${FONT_WEIGHTS.main.Bold}`,
+          "line-height": `${LINE_HEIGHTS.xs}`,
+          "font-size": `${FONT_SIZE.sm}`,
+          "letter-spacing": `${LETTER_SPACING.normal}`,
+          "paragraph-spacing": `${PARAGRAPH_SPACING.default}`,
+          "paragraph-indent": `${PARAGRAPH_INDENT[0]}`,
+          "text-case": `${TEXT_CASE.none}`,
+          "text-decoration": `${TEXT_DECORATION.none}`
+        }
+      },
+      Body: {
+        ["Large" /* Large */]: {
+          "font-family": `${fontFamilies.main}`,
+          "font-weight": `${FONT_WEIGHTS.main.SemiBold}`,
+          "line-height": `${LINE_HEIGHTS.sm}`,
+          "font-size": `${FONT_SIZE.md}`,
+          "letter-spacing": `${LETTER_SPACING.normal}`,
+          "paragraph-spacing": `${PARAGRAPH_SPACING.default}`,
+          "paragraph-indent": `${PARAGRAPH_INDENT[0]}`,
+          "text-case": `${TEXT_CASE.none}`,
+          "text-decoration": `${TEXT_DECORATION.none}`
+        },
+        ["Medium" /* Medium */]: {
+          "font-family": `${fontFamilies.main}`,
+          "font-weight": `${FONT_WEIGHTS.main.Medium}`,
+          "line-height": `${LINE_HEIGHTS.sm}`,
+          "font-size": `${FONT_SIZE.sm}`,
+          "letter-spacing": `${LETTER_SPACING.normal}`,
+          "paragraph-spacing": `${PARAGRAPH_SPACING.default}`,
+          "paragraph-indent": `${PARAGRAPH_INDENT[0]}`,
+          "text-case": `${TEXT_CASE.none}`,
+          "text-decoration": `${TEXT_DECORATION.none}`
+        },
+        ["Small" /* Small */]: {
+          "font-family": `${fontFamilies.main}`,
+          "font-weight": `${FONT_WEIGHTS.main.Medium}`,
+          "line-height": `${LINE_HEIGHTS.sm}`,
+          "font-size": `${FONT_SIZE.xs}`,
+          "letter-spacing": `${LETTER_SPACING.normal}`,
+          "paragraph-spacing": `${PARAGRAPH_SPACING.default}`,
+          "paragraph-indent": `${PARAGRAPH_INDENT[0]}`,
+          "text-case": `${TEXT_CASE.none}`,
+          "text-decoration": `${TEXT_DECORATION.none}`
+        }
+      },
+      Label: {
+        ["Large" /* Large */]: {
+          "font-family": `${fontFamilies.main}`,
+          "font-weight": `${FONT_WEIGHTS.main.SemiBold}`,
+          "line-height": `${LINE_HEIGHTS.xs}`,
+          "font-size": `${FONT_SIZE.sm}`,
+          "letter-spacing": `${LETTER_SPACING.normal}`,
+          "paragraph-spacing": `${PARAGRAPH_SPACING.default}`,
+          "paragraph-indent": `${PARAGRAPH_INDENT[0]}`,
+          "text-case": `${TEXT_CASE.none}`,
+          "text-decoration": `${TEXT_DECORATION.none}`
+        },
+        ["Medium" /* Medium */]: {
+          "font-family": `${fontFamilies.main}`,
+          "font-weight": `${FONT_WEIGHTS.main.SemiBold}`,
+          "line-height": `${LINE_HEIGHTS["2xs"]}`,
+          "font-size": `${FONT_SIZE.xs}`,
+          "letter-spacing": `${LETTER_SPACING.normal}`,
+          "paragraph-spacing": `${PARAGRAPH_SPACING.default}`,
+          "paragraph-indent": `${PARAGRAPH_INDENT[0]}`,
+          "text-case": `${TEXT_CASE.none}`,
+          "text-decoration": `${TEXT_DECORATION.none}`
+        },
+        ["Small" /* Small */]: {
+          "font-family": `${fontFamilies.main}`,
+          "font-weight": `${FONT_WEIGHTS.main.SemiBold}`,
+          "line-height": `${LINE_HEIGHTS["2xs"]}`,
+          "font-size": `${FONT_SIZE["2xs"]}`,
+          "letter-spacing": `${LETTER_SPACING.normal}`,
+          "paragraph-spacing": `${PARAGRAPH_SPACING.default}`,
+          "paragraph-indent": `${PARAGRAPH_INDENT[0]}`,
+          "text-case": `${TEXT_CASE.none}`,
+          "text-decoration": `${TEXT_DECORATION.none}`
+        }
+      },
+      "Label Strong": {
+        ["Large" /* Large */]: {
+          "font-family": `${fontFamilies.main}`,
+          "font-weight": `${FONT_WEIGHTS.main.Bold}`,
+          "line-height": `${LINE_HEIGHTS.xs}`,
+          "font-size": `${FONT_SIZE.sm}`,
+          "letter-spacing": `${LETTER_SPACING.normal}`,
+          "paragraph-spacing": `${PARAGRAPH_SPACING.default}`,
+          "paragraph-indent": `${PARAGRAPH_INDENT[0]}`,
+          "text-case": `${TEXT_CASE.none}`,
+          "text-decoration": `${TEXT_DECORATION.none}`
+        },
+        ["Medium" /* Medium */]: {
+          "font-family": `${fontFamilies.main}`,
+          "font-weight": `${FONT_WEIGHTS.main.Bold}`,
+          "line-height": `${LINE_HEIGHTS["2xs"]}`,
+          "font-size": `${FONT_SIZE.xs}`,
+          "letter-spacing": `${LETTER_SPACING.normal}`,
+          "paragraph-spacing": `${PARAGRAPH_SPACING.default}`,
+          "paragraph-indent": `${PARAGRAPH_INDENT[0]}`,
+          "text-case": `${TEXT_CASE.none}`,
+          "text-decoration": `${TEXT_DECORATION.none}`
+        },
+        ["Small" /* Small */]: {
+          "font-family": `${fontFamilies.main}`,
+          "font-weight": `${FONT_WEIGHTS.main.Bold}`,
+          "line-height": `${LINE_HEIGHTS["2xs"]}`,
+          "font-size": `${FONT_SIZE["2xs"]}`,
+          "letter-spacing": `${LETTER_SPACING.normal}`,
+          "paragraph-spacing": `${PARAGRAPH_SPACING.default}`,
+          "paragraph-indent": `${PARAGRAPH_INDENT[0]}`,
+          "text-case": `${TEXT_CASE.none}`,
+          "text-decoration": `${TEXT_DECORATION.none}`
+        }
+      },
+      Overline: {
+        ["Large" /* Large */]: {
+          "font-family": `${fontFamilies.code}`,
+          "font-weight": `${FONT_WEIGHTS.code.Bold}`,
+          "line-height": `${LINE_HEIGHTS.sm}`,
+          "font-size": `${FONT_SIZE.md}`,
+          "letter-spacing": `${LETTER_SPACING.loose}`,
+          "paragraph-spacing": `${PARAGRAPH_SPACING.default}`,
+          "paragraph-indent": `${PARAGRAPH_INDENT[0]}`,
+          "text-case": `${TEXT_CASE.uppercase}`,
+          "text-decoration": `${TEXT_DECORATION.none}`
+        },
+        ["Medium" /* Medium */]: {
+          "font-family": `${fontFamilies.code}`,
+          "font-weight": `${FONT_WEIGHTS.code.Bold}`,
+          "line-height": `${LINE_HEIGHTS.xs}`,
+          "font-size": `${FONT_SIZE.sm}`,
+          "letter-spacing": `${LETTER_SPACING.loose}`,
+          "paragraph-spacing": `${PARAGRAPH_SPACING.default}`,
+          "paragraph-indent": `${PARAGRAPH_INDENT[0]}`,
+          "text-case": `${TEXT_CASE.uppercase}`,
+          "text-decoration": `${TEXT_DECORATION.none}`
+        },
+        ["Small" /* Small */]: {
+          "font-family": `${fontFamilies.code}`,
+          "font-weight": `${FONT_WEIGHTS.code.Bold}`,
+          "line-height": `${LINE_HEIGHTS["2xs"]}`,
+          "font-size": `${FONT_SIZE.xs}`,
+          "letter-spacing": `${LETTER_SPACING.loose}`,
+          "paragraph-spacing": `${PARAGRAPH_SPACING.default}`,
+          "paragraph-indent": `${PARAGRAPH_INDENT[0]}`,
+          "text-case": `${TEXT_CASE.uppercase}`,
+          "text-decoration": `${TEXT_DECORATION.none}`
+        }
+      },
+      Code: {
+        ["Large" /* Large */]: {
+          "font-family": `${fontFamilies.code}`,
+          "font-weight": `${FONT_WEIGHTS.code.Regular}`,
+          "line-height": `${LINE_HEIGHTS.sm}`,
+          "font-size": `${FONT_SIZE.md}`,
+          "letter-spacing": `${LETTER_SPACING.normal}`,
+          "paragraph-spacing": `${PARAGRAPH_SPACING.default}`,
+          "paragraph-indent": `${PARAGRAPH_INDENT[0]}`,
+          "text-case": `${TEXT_CASE.none}`,
+          "text-decoration": `${TEXT_DECORATION.none}`
+        },
+        ["Medium" /* Medium */]: {
+          "font-family": `${fontFamilies.code}`,
+          "font-weight": `${FONT_WEIGHTS.code.Regular}`,
+          "line-height": `${LINE_HEIGHTS.sm}`,
+          "font-size": `${FONT_SIZE.sm}`,
+          "letter-spacing": `${LETTER_SPACING.normal}`,
+          "paragraph-spacing": `${PARAGRAPH_SPACING.default}`,
+          "paragraph-indent": `${PARAGRAPH_INDENT[0]}`,
+          "text-case": `${TEXT_CASE.none}`,
+          "text-decoration": `${TEXT_DECORATION.none}`
+        },
+        ["Small" /* Small */]: {
+          "font-family": `${fontFamilies.code}`,
+          "font-weight": `${FONT_WEIGHTS.code.Regular}`,
+          "line-height": `${LINE_HEIGHTS.xs}`,
+          "font-size": `${FONT_SIZE.xs}`,
+          "letter-spacing": `${LETTER_SPACING.normal}`,
+          "paragraph-spacing": `${PARAGRAPH_SPACING.default}`,
+          "paragraph-indent": `${PARAGRAPH_INDENT[0]}`,
+          "text-case": `${TEXT_CASE.none}`,
+          "text-decoration": `${TEXT_DECORATION.none}`
+        }
+      },
+      "Code Strong": {
+        ["Large" /* Large */]: {
+          "font-family": `${fontFamilies.code}`,
+          "font-weight": `${FONT_WEIGHTS.code.Bold}`,
+          "line-height": `${LINE_HEIGHTS.sm}`,
+          "font-size": `${FONT_SIZE.md}`,
+          "letter-spacing": `${LETTER_SPACING.normal}`,
+          "paragraph-spacing": `${PARAGRAPH_SPACING.default}`,
+          "paragraph-indent": `${PARAGRAPH_INDENT[0]}`,
+          "text-case": `${TEXT_CASE.none}`,
+          "text-decoration": `${TEXT_DECORATION.none}`
+        },
+        ["Medium" /* Medium */]: {
+          "font-family": `${fontFamilies.code}`,
+          "font-weight": `${FONT_WEIGHTS.code.Bold}`,
+          "line-height": `${LINE_HEIGHTS.sm}`,
+          "font-size": `${FONT_SIZE.sm}`,
+          "letter-spacing": `${LETTER_SPACING.normal}`,
+          "paragraph-spacing": `${PARAGRAPH_SPACING.default}`,
+          "paragraph-indent": `${PARAGRAPH_INDENT[0]}`,
+          "text-case": `${TEXT_CASE.none}`,
+          "text-decoration": `${TEXT_DECORATION.none}`
+        },
+        ["Small" /* Small */]: {
+          "font-family": `${fontFamilies.code}`,
+          "font-weight": `${FONT_WEIGHTS.code.Bold}`,
+          "line-height": `${LINE_HEIGHTS.xs}`,
+          "font-size": `${FONT_SIZE.xs}`,
+          "letter-spacing": `${LETTER_SPACING.normal}`,
+          "paragraph-spacing": `${PARAGRAPH_SPACING.default}`,
+          "paragraph-indent": `${PARAGRAPH_INDENT[0]}`,
+          "text-case": `${TEXT_CASE.none}`,
+          "text-decoration": `${TEXT_DECORATION.none}`
+        }
+      }
+    },
+    ["UmaDocs" /* UmaDocs */]: {
+      Display: {
+        ["Large" /* Large */]: {
+          "font-family": `${fontFamilies.main}`,
+          "font-weight": `${FONT_WEIGHTS.main.Bold}`,
+          "line-height": `${LINE_HEIGHTS["5xl"]}`,
+          "font-size": `${FONT_SIZE["6xl"]}`,
+          "letter-spacing": `${LETTER_SPACING.tight}`,
+          "paragraph-spacing": `${PARAGRAPH_SPACING.default}`,
+          "paragraph-indent": `${PARAGRAPH_INDENT[0]}`,
+          "text-case": `${TEXT_CASE.none}`,
+          "text-decoration": `${TEXT_DECORATION.none}`
+        },
+        ["Medium" /* Medium */]: {
+          "font-family": `${fontFamilies.main}`,
+          "font-weight": `${FONT_WEIGHTS.main.Bold}`,
+          "line-height": `${LINE_HEIGHTS["4xl"]}`,
+          "font-size": `${FONT_SIZE["5xl"]}`,
+          "letter-spacing": `${LETTER_SPACING.tight}`,
+          "paragraph-spacing": `${PARAGRAPH_SPACING.default}`,
+          "paragraph-indent": `${PARAGRAPH_INDENT[0]}`,
+          "text-case": `${TEXT_CASE.none}`,
+          "text-decoration": `${TEXT_DECORATION.none}`
+        },
+        ["Small" /* Small */]: {
+          "font-family": `${fontFamilies.main}`,
+          "font-weight": `${FONT_WEIGHTS.main.Bold}`,
+          "line-height": `${LINE_HEIGHTS["3xl"]}`,
+          "font-size": `${FONT_SIZE["4xl"]}`,
+          "letter-spacing": `${LETTER_SPACING.tight}`,
+          "paragraph-spacing": `${PARAGRAPH_SPACING.default}`,
+          "paragraph-indent": `${PARAGRAPH_INDENT[0]}`,
+          "text-case": `${TEXT_CASE.none}`,
+          "text-decoration": `${TEXT_DECORATION.none}`
+        }
+      },
+      Headline: {
+        ["Large" /* Large */]: {
+          "font-family": `${fontFamilies.main}`,
+          "font-weight": `${FONT_WEIGHTS.main.Bold}`,
+          "line-height": `${LINE_HEIGHTS["2xl"]}`,
+          "font-size": `${FONT_SIZE["3xl"]}`,
+          "letter-spacing": `${LETTER_SPACING.tight}`,
+          "paragraph-spacing": `${PARAGRAPH_SPACING[16]}`,
+          "paragraph-indent": `${PARAGRAPH_INDENT[0]}`,
+          "text-case": `${TEXT_CASE.none}`,
+          "text-decoration": `${TEXT_DECORATION.none}`
+        },
+        ["Medium" /* Medium */]: {
+          "font-family": `${fontFamilies.main}`,
+          "font-weight": `${FONT_WEIGHTS.main.Bold}`,
+          "line-height": `${LINE_HEIGHTS.xl}`,
+          "font-size": `${FONT_SIZE["2xl"]}`,
+          "letter-spacing": `${LETTER_SPACING.tight}`,
+          "paragraph-spacing": `${PARAGRAPH_SPACING[16]}`,
+          "paragraph-indent": `${PARAGRAPH_INDENT[0]}`,
+          "text-case": `${TEXT_CASE.none}`,
+          "text-decoration": `${TEXT_DECORATION.none}`
+        },
+        ["Small" /* Small */]: {
+          "font-family": `${fontFamilies.main}`,
+          "font-weight": `${FONT_WEIGHTS.main.Bold}`,
+          "line-height": `${LINE_HEIGHTS.lg}`,
+          "font-size": `${FONT_SIZE.xl}`,
+          "letter-spacing": `${LETTER_SPACING.tight}`,
+          "paragraph-spacing": `${PARAGRAPH_SPACING[16]}`,
+          "paragraph-indent": `${PARAGRAPH_INDENT[0]}`,
+          "text-case": `${TEXT_CASE.none}`,
+          "text-decoration": `${TEXT_DECORATION.none}`
+        }
+      },
+      Title: {
+        ["Large" /* Large */]: {
+          "font-family": `${fontFamilies.main}`,
+          "font-weight": `${FONT_WEIGHTS.main.Bold}`,
+          "line-height": `${LINE_HEIGHTS.md}`,
+          "font-size": `${FONT_SIZE.lg}`,
+          "letter-spacing": `${LETTER_SPACING.normal}`,
+          "paragraph-spacing": `${PARAGRAPH_SPACING.default}`,
+          "paragraph-indent": `${PARAGRAPH_INDENT[0]}`,
+          "text-case": `${TEXT_CASE.none}`,
+          "text-decoration": `${TEXT_DECORATION.none}`
+        },
+        ["Medium" /* Medium */]: {
+          "font-family": `${fontFamilies.main}`,
+          "font-weight": `${FONT_WEIGHTS.main.Bold}`,
+          "line-height": `${LINE_HEIGHTS.sm}`,
+          "font-size": `${FONT_SIZE.md}`,
+          "letter-spacing": `${LETTER_SPACING.normal}`,
+          "paragraph-spacing": `${PARAGRAPH_SPACING.default}`,
+          "paragraph-indent": `${PARAGRAPH_INDENT[0]}`,
+          "text-case": `${TEXT_CASE.none}`,
+          "text-decoration": `${TEXT_DECORATION.none}`
+        },
+        ["Small" /* Small */]: {
+          "font-family": `${fontFamilies.main}`,
+          "font-weight": `${FONT_WEIGHTS.main.Bold}`,
+          "line-height": `${LINE_HEIGHTS.xs}`,
+          "font-size": `${FONT_SIZE.sm}`,
+          "letter-spacing": `${LETTER_SPACING.normal}`,
+          "paragraph-spacing": `${PARAGRAPH_SPACING.default}`,
+          "paragraph-indent": `${PARAGRAPH_INDENT[0]}`,
+          "text-case": `${TEXT_CASE.none}`,
+          "text-decoration": `${TEXT_DECORATION.none}`
+        }
+      },
+      Body: {
+        ["Large" /* Large */]: {
+          "font-family": `${fontFamilies.main}`,
+          "font-weight": `${FONT_WEIGHTS.main.SemiBold}`,
+          "line-height": `${LINE_HEIGHTS.sm}`,
+          "font-size": `${FONT_SIZE.md}`,
+          "letter-spacing": `${LETTER_SPACING.normal}`,
+          "paragraph-spacing": `${PARAGRAPH_SPACING.default}`,
+          "paragraph-indent": `${PARAGRAPH_INDENT[0]}`,
+          "text-case": `${TEXT_CASE.none}`,
+          "text-decoration": `${TEXT_DECORATION.none}`
+        },
+        ["Medium" /* Medium */]: {
+          "font-family": `${fontFamilies.main}`,
+          "font-weight": `${FONT_WEIGHTS.main.Medium}`,
+          "line-height": `${LINE_HEIGHTS.sm}`,
+          "font-size": `${FONT_SIZE.sm}`,
+          "letter-spacing": `${LETTER_SPACING.normal}`,
+          "paragraph-spacing": `${PARAGRAPH_SPACING.default}`,
+          "paragraph-indent": `${PARAGRAPH_INDENT[0]}`,
+          "text-case": `${TEXT_CASE.none}`,
+          "text-decoration": `${TEXT_DECORATION.none}`
+        },
+        ["Small" /* Small */]: {
+          "font-family": `${fontFamilies.main}`,
+          "font-weight": `${FONT_WEIGHTS.main.Medium}`,
+          "line-height": `${LINE_HEIGHTS.sm}`,
+          "font-size": `${FONT_SIZE.xs}`,
+          "letter-spacing": `${LETTER_SPACING.normal}`,
+          "paragraph-spacing": `${PARAGRAPH_SPACING.default}`,
+          "paragraph-indent": `${PARAGRAPH_INDENT[0]}`,
+          "text-case": `${TEXT_CASE.none}`,
+          "text-decoration": `${TEXT_DECORATION.none}`
+        }
+      },
+      Label: {
+        ["Large" /* Large */]: {
+          "font-family": `${fontFamilies.main}`,
+          "font-weight": `${FONT_WEIGHTS.main.SemiBold}`,
+          "line-height": `${LINE_HEIGHTS.xs}`,
+          "font-size": `${FONT_SIZE.sm}`,
+          "letter-spacing": `${LETTER_SPACING.normal}`,
+          "paragraph-spacing": `${PARAGRAPH_SPACING.default}`,
+          "paragraph-indent": `${PARAGRAPH_INDENT[0]}`,
+          "text-case": `${TEXT_CASE.none}`,
+          "text-decoration": `${TEXT_DECORATION.none}`
+        },
+        ["Medium" /* Medium */]: {
+          "font-family": `${fontFamilies.main}`,
+          "font-weight": `${FONT_WEIGHTS.main.SemiBold}`,
+          "line-height": `${LINE_HEIGHTS["2xs"]}`,
+          "font-size": `${FONT_SIZE.xs}`,
+          "letter-spacing": `${LETTER_SPACING.normal}`,
+          "paragraph-spacing": `${PARAGRAPH_SPACING.default}`,
+          "paragraph-indent": `${PARAGRAPH_INDENT[0]}`,
+          "text-case": `${TEXT_CASE.none}`,
+          "text-decoration": `${TEXT_DECORATION.none}`
+        },
+        ["Small" /* Small */]: {
+          "font-family": `${fontFamilies.main}`,
+          "font-weight": `${FONT_WEIGHTS.main.SemiBold}`,
+          "line-height": `${LINE_HEIGHTS["2xs"]}`,
+          "font-size": `${FONT_SIZE["2xs"]}`,
+          "letter-spacing": `${LETTER_SPACING.normal}`,
+          "paragraph-spacing": `${PARAGRAPH_SPACING.default}`,
+          "paragraph-indent": `${PARAGRAPH_INDENT[0]}`,
+          "text-case": `${TEXT_CASE.none}`,
+          "text-decoration": `${TEXT_DECORATION.none}`
+        }
+      },
+      "Label Strong": {
+        ["Large" /* Large */]: {
+          "font-family": `${fontFamilies.main}`,
+          "font-weight": `${FONT_WEIGHTS.main.Bold}`,
+          "line-height": `${LINE_HEIGHTS.xs}`,
+          "font-size": `${FONT_SIZE.sm}`,
+          "letter-spacing": `${LETTER_SPACING.normal}`,
+          "paragraph-spacing": `${PARAGRAPH_SPACING.default}`,
+          "paragraph-indent": `${PARAGRAPH_INDENT[0]}`,
+          "text-case": `${TEXT_CASE.none}`,
+          "text-decoration": `${TEXT_DECORATION.none}`
+        },
+        ["Medium" /* Medium */]: {
+          "font-family": `${fontFamilies.main}`,
+          "font-weight": `${FONT_WEIGHTS.main.Bold}`,
+          "line-height": `${LINE_HEIGHTS["2xs"]}`,
+          "font-size": `${FONT_SIZE.xs}`,
+          "letter-spacing": `${LETTER_SPACING.normal}`,
+          "paragraph-spacing": `${PARAGRAPH_SPACING.default}`,
+          "paragraph-indent": `${PARAGRAPH_INDENT[0]}`,
+          "text-case": `${TEXT_CASE.none}`,
+          "text-decoration": `${TEXT_DECORATION.none}`
+        },
+        ["Small" /* Small */]: {
+          "font-family": `${fontFamilies.main}`,
+          "font-weight": `${FONT_WEIGHTS.main.Bold}`,
+          "line-height": `${LINE_HEIGHTS["2xs"]}`,
+          "font-size": `${FONT_SIZE["2xs"]}`,
+          "letter-spacing": `${LETTER_SPACING.normal}`,
+          "paragraph-spacing": `${PARAGRAPH_SPACING.default}`,
+          "paragraph-indent": `${PARAGRAPH_INDENT[0]}`,
+          "text-case": `${TEXT_CASE.none}`,
+          "text-decoration": `${TEXT_DECORATION.none}`
+        }
+      },
+      Overline: {
+        ["Large" /* Large */]: {
+          "font-family": `${fontFamilies.code}`,
+          "font-weight": `${FONT_WEIGHTS.code.Bold}`,
+          "line-height": `${LINE_HEIGHTS.sm}`,
+          "font-size": `${FONT_SIZE.md}`,
+          "letter-spacing": `${LETTER_SPACING.loose}`,
+          "paragraph-spacing": `${PARAGRAPH_SPACING.default}`,
+          "paragraph-indent": `${PARAGRAPH_INDENT[0]}`,
+          "text-case": `${TEXT_CASE.uppercase}`,
+          "text-decoration": `${TEXT_DECORATION.none}`
+        },
+        ["Medium" /* Medium */]: {
+          "font-family": `${fontFamilies.code}`,
+          "font-weight": `${FONT_WEIGHTS.code.Bold}`,
+          "line-height": `${LINE_HEIGHTS.xs}`,
+          "font-size": `${FONT_SIZE.sm}`,
+          "letter-spacing": `${LETTER_SPACING.loose}`,
+          "paragraph-spacing": `${PARAGRAPH_SPACING.default}`,
+          "paragraph-indent": `${PARAGRAPH_INDENT[0]}`,
+          "text-case": `${TEXT_CASE.uppercase}`,
+          "text-decoration": `${TEXT_DECORATION.none}`
+        },
+        ["Small" /* Small */]: {
+          "font-family": `${fontFamilies.code}`,
+          "font-weight": `${FONT_WEIGHTS.code.Bold}`,
+          "line-height": `${LINE_HEIGHTS["2xs"]}`,
+          "font-size": `${FONT_SIZE.xs}`,
+          "letter-spacing": `${LETTER_SPACING.loose}`,
+          "paragraph-spacing": `${PARAGRAPH_SPACING.default}`,
+          "paragraph-indent": `${PARAGRAPH_INDENT[0]}`,
+          "text-case": `${TEXT_CASE.uppercase}`,
+          "text-decoration": `${TEXT_DECORATION.none}`
+        }
+      },
+      Code: {
+        ["Large" /* Large */]: {
+          "font-family": `${fontFamilies.code}`,
+          "font-weight": `${FONT_WEIGHTS.code.Regular}`,
+          "line-height": `${LINE_HEIGHTS.sm}`,
+          "font-size": `${FONT_SIZE.md}`,
+          "letter-spacing": `${LETTER_SPACING.normal}`,
+          "paragraph-spacing": `${PARAGRAPH_SPACING.default}`,
+          "paragraph-indent": `${PARAGRAPH_INDENT[0]}`,
+          "text-case": `${TEXT_CASE.none}`,
+          "text-decoration": `${TEXT_DECORATION.none}`
+        },
+        ["Medium" /* Medium */]: {
+          "font-family": `${fontFamilies.code}`,
+          "font-weight": `${FONT_WEIGHTS.code.Regular}`,
+          "line-height": `${LINE_HEIGHTS.sm}`,
+          "font-size": `${FONT_SIZE.sm}`,
+          "letter-spacing": `${LETTER_SPACING.normal}`,
+          "paragraph-spacing": `${PARAGRAPH_SPACING.default}`,
+          "paragraph-indent": `${PARAGRAPH_INDENT[0]}`,
+          "text-case": `${TEXT_CASE.none}`,
+          "text-decoration": `${TEXT_DECORATION.none}`
+        },
+        ["Small" /* Small */]: {
+          "font-family": `${fontFamilies.code}`,
+          "font-weight": `${FONT_WEIGHTS.code.Regular}`,
+          "line-height": `${LINE_HEIGHTS.xs}`,
+          "font-size": `${FONT_SIZE.xs}`,
+          "letter-spacing": `${LETTER_SPACING.normal}`,
+          "paragraph-spacing": `${PARAGRAPH_SPACING.default}`,
+          "paragraph-indent": `${PARAGRAPH_INDENT[0]}`,
+          "text-case": `${TEXT_CASE.none}`,
+          "text-decoration": `${TEXT_DECORATION.none}`
+        }
+      },
+      "Code Strong": {
+        ["Large" /* Large */]: {
+          "font-family": `${fontFamilies.code}`,
+          "font-weight": `${FONT_WEIGHTS.code.Bold}`,
+          "line-height": `${LINE_HEIGHTS.sm}`,
+          "font-size": `${FONT_SIZE.md}`,
+          "letter-spacing": `${LETTER_SPACING.normal}`,
+          "paragraph-spacing": `${PARAGRAPH_SPACING.default}`,
+          "paragraph-indent": `${PARAGRAPH_INDENT[0]}`,
+          "text-case": `${TEXT_CASE.none}`,
+          "text-decoration": `${TEXT_DECORATION.none}`
+        },
+        ["Medium" /* Medium */]: {
+          "font-family": `${fontFamilies.code}`,
+          "font-weight": `${FONT_WEIGHTS.code.Bold}`,
+          "line-height": `${LINE_HEIGHTS.sm}`,
+          "font-size": `${FONT_SIZE.sm}`,
+          "letter-spacing": `${LETTER_SPACING.normal}`,
+          "paragraph-spacing": `${PARAGRAPH_SPACING.default}`,
+          "paragraph-indent": `${PARAGRAPH_INDENT[0]}`,
+          "text-case": `${TEXT_CASE.none}`,
+          "text-decoration": `${TEXT_DECORATION.none}`
+        },
+        ["Small" /* Small */]: {
+          "font-family": `${fontFamilies.code}`,
+          "font-weight": `${FONT_WEIGHTS.code.Bold}`,
+          "line-height": `${LINE_HEIGHTS.sm}`,
+          "font-size": `${FONT_SIZE.xs}`,
+          "letter-spacing": `${LETTER_SPACING.normal}`,
+          "paragraph-spacing": `${PARAGRAPH_SPACING.default}`,
+          "paragraph-indent": `${PARAGRAPH_INDENT[0]}`,
+          "text-case": `${TEXT_CASE.none}`,
+          "text-decoration": `${TEXT_DECORATION.none}`
+        }
+      }
+    }
+  };
+};
+
+// src/styles/colors.tsx
+var neutral = {
+  black: "#000000",
+  gray5: "#0D0D0D",
+  gray10: "#1A1A1A",
+  gray15: "#262626",
+  gray20: "#333333",
+  gray25: "#404040",
+  gray30: "#4D4D4D",
+  gray40: "#666666",
+  gray50: "#808080",
+  gray60: "#999999",
+  gray70: "#B3B3B3",
+  gray80: "#CCCCCC",
+  gray85: "#D9D9D9",
+  gray90: "#E6E6E6",
+  gray95: "#F2F2F2",
+  white: "#FFFFFF"
+};
+var uma = {
+  background: "#F9F9F9",
+  black: "#16171A",
+  blue: "#0068C9",
+  blue50: "#C0C9D6",
+  blue80: "#DCE2EA",
+  blue90: "#EBEEF2",
+  blue95: "#F2F5F7",
+  grey300: "#DEDFE4",
+  secondary: "#686A72",
+  stroke: "#C0C9D6",
+  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,
+  // green
+  success: "#17C27C",
+  // blue
+  blue43: "#145BC6",
+  blue22: "#0E2E60",
+  blue58: "#28BFFF",
+  blue95: "#EBEEF2",
+  // yellow
+  primary,
+  warning: primary,
+  // orange
+  danger: "#FD2C0F",
+  // neutral
+  secondary: neutral.black,
+  // billing
+  tier1: "#179257",
+  tier2: "#8B38DE",
+  tier3: "#0048F7"
+});
+function extend(obj, rest) {
+  return __spreadValues(__spreadValues({}, obj), rest);
+}
+function extendBase(obj, rest) {
+  return __spreadValues(__spreadValues({}, obj), rest);
+}
+function hcNeutralFromBg(bgHex, defaultHex, altHex) {
+  const bgRGB = hexToRGB(bgHex);
+  const hcRGB = hexToRGB(defaultHex);
+  if (!bgRGB || !hcRGB)
+    return defaultHex;
+  const c = contrast(bgRGB, hcRGB);
+  if (c < 4.5) {
+    return altHex;
+  }
+  return defaultHex;
+}
+var lightBaseTheme = {
+  type: "light" /* Light */,
+  app: "Lightspark" /* Lightspark */,
+  bg: colors.white,
+  smBg: colors.white,
+  c05Neutral: neutral.gray95,
+  c1Neutral: neutral.gray90,
+  c15Neutral: neutral.gray85,
+  c2Neutral: neutral.gray80,
+  c3Neutral: neutral.gray70,
+  c4Neutral: neutral.gray60,
+  c5Neutral: neutral.gray50,
+  c6Neutral: neutral.gray40,
+  c7Neutral: neutral.gray30,
+  c8Neutral: neutral.gray20,
+  c9Neutral: neutral.gray10,
+  danger: colors.danger,
+  hcNeutral: colors.black,
+  hcNeutralFromBg: (bgHex) => hcNeutralFromBg(bgHex, colors.black, colors.white),
+  info: colors.blue43,
+  lcNeutral: neutral.gray80,
+  link: colors.blue43,
+  mcNeutral: neutral.gray40,
+  onInfoText: colors.white,
+  onPrimaryText: colors.black,
+  onSuccessText: colors.white,
+  primary: colors.primary,
+  secondary: colors.secondary,
+  success: colors.success,
+  text: colors.black,
+  typography: getTypography(),
+  vlcNeutral: neutral.gray95,
+  warning: colors.warning
+};
+var darkBaseTheme = {
+  type: "dark" /* Dark */,
+  app: "Lightspark" /* Lightspark */,
+  bg: colors.black,
+  smBg: colors.black,
+  c05Neutral: neutral.gray5,
+  c1Neutral: neutral.gray10,
+  c15Neutral: neutral.gray15,
+  c2Neutral: neutral.gray20,
+  c3Neutral: neutral.gray30,
+  c4Neutral: neutral.gray40,
+  c5Neutral: neutral.gray50,
+  c6Neutral: neutral.gray60,
+  c7Neutral: neutral.gray70,
+  c8Neutral: neutral.gray80,
+  c9Neutral: neutral.gray90,
+  danger: colors.danger,
+  hcNeutral: colors.white,
+  hcNeutralFromBg: (bgHex) => hcNeutralFromBg(bgHex, colors.white, colors.black),
+  info: colors.white,
+  lcNeutral: neutral.gray40,
+  link: colors.blue43,
+  mcNeutral: neutral.gray60,
+  onInfoText: colors.white,
+  onPrimaryText: colors.black,
+  onSuccessText: colors.white,
+  primary: colors.primary,
+  secondary: colors.secondary,
+  success: colors.success,
+  text: colors.white,
+  typography: getTypography(),
+  vlcNeutral: neutral.gray20,
+  warning: colors.warning
+};
+var lightTheme = extend(lightBaseTheme, {
+  header: extendBase(lightBaseTheme, {
+    text: colors.gray60
+  }),
+  nav: extendBase(lightBaseTheme, {
+    text: colors.gray10,
+    secondary: colors.secondary
+  }),
+  content: extendBase(lightBaseTheme, {
+    bg: colors.white,
+    smBg: colors.white
+  }),
+  controls: extendBase(lightBaseTheme, {
+    bg: neutral.gray95,
+    smBg: neutral.gray95,
+    text: neutral.gray60,
+    secondary: colors.secondary
+  })
+});
+var darkTheme = extend(darkBaseTheme, {
+  header: extendBase(darkBaseTheme, {}),
+  nav: extendBase(darkBaseTheme, {}),
+  content: extendBase(darkBaseTheme, {}),
+  controls: extendBase(darkBaseTheme, {
+    bg: neutral.gray40,
+    smBg: neutral.gray40,
+    text: neutral.white,
+    secondary: colors.secondary
+  })
+});
+var umaLightTheme = extend(lightTheme, {
+  app: "UmaDocs" /* UmaDocs */,
+  bg: uma.background,
+  smBg: uma.background,
+  secondary: uma.secondary,
+  text: uma.black,
+  link: uma.blue,
+  content: extendBase(lightBaseTheme, {
+    bg: uma.background,
+    smBg: uma.background,
+    text: uma.black,
+    secondary: uma.secondary
+  }),
+  controls: extendBase(lightBaseTheme, {
+    text: uma.black,
+    secondary: uma.secondary,
+    bg: uma.blue90
+  })
+});
+var themes = {
+  light: lightTheme,
+  dark: darkTheme,
+  uma: {
+    light: umaLightTheme
+  }
+};
+var isDark = (theme) => theme.type === "dark" /* Dark */;
+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;
+    return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
+  });
+  return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722;
+}
+function contrast(rgb1, rgb2) {
+  const lum1 = luminance(rgb1[0], rgb1[1], rgb1[2]);
+  const lum2 = luminance(rgb2[0], rgb2[1], rgb2[2]);
+  const brightest = Math.max(lum1, lum2);
+  const darkest = Math.min(lum1, lum2);
+  return (brightest + 0.05) / (darkest + 0.05);
+}
+function hexToRGB(hex) {
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  return result ? [
+    parseInt(result[1], 16),
+    parseInt(result[2], 16),
+    parseInt(result[3], 16)
+  ] : [0, 0, 0];
+}
+function useThemeBg() {
+  const theme = (0, import_react3.useTheme)();
+  const bp2 = useBreakpoints();
+  const isSm = bp2.current("sm" /* sm */);
+  if (isDark(theme)) {
+    return darkGradient;
+  }
+  return isSm ? theme.smBg : theme.bg;
+}
+
+// src/router.tsx
+var import_jsx_runtime2 = require("@emotion/react/jsx-runtime");
+function replaceParams(to, params) {
+  if (params) {
+    let toWithParams = to;
+    Object.entries((0, import_lodash_es2.omit)(params, "query")).forEach(([key, value]) => {
+      if (typeof value !== "string") {
+        throw new Error(
+          `Only 'query' may be an object. Route params must be a string, but '${key}' is not.`
+        );
+      }
+      toWithParams = toWithParams.replace(`:${key}`, value);
+    });
+    if (params.query) {
+      let query = params.query;
+      if (typeof query !== "string") {
+        query = Object.entries(params.query).map(([key, value]) => `${key}${value ? `=${value}` : ""}`).join("&");
+      }
+      toWithParams = `${toWithParams}?${query}`;
+    }
+    to = toWithParams;
+  }
+  return to;
+}
+function Link({
+  to,
+  params,
+  children,
+  css: css7,
+  onClick,
+  className,
+  hash = null,
+  blue = false,
+  newTab = false
+}) {
+  let toStr = replaceParams(to, params);
+  toStr += hash ? `#${hash}` : "";
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    import_react_router_dom.Link,
+    {
+      to: toStr,
+      css: css7,
+      onClick,
+      className,
+      style: { color: blue ? colors.blue43 : "inherit" },
+      target: newTab ? "_blank" : void 0,
+      rel: newTab ? "noopener noreferrer" : void 0,
+      children
+    }
+  );
+}
+
+// src/styles/common.tsx
+var import_react5 = 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 standardLineHeightEms = 1.21;
+var standardContentInsetPx = 32;
+var standardContentInsetMdPx = 24;
+var standardContentInsetSmPx = 16;
+var smContentInset = import_react5.css`
+  ${bp.sm(`
+    margin-left: auto;
+    margin-right: auto;
+    width: calc(100% - ${standardContentInsetSmPx * 2}px);
+  `)}
+`;
+var minSmMaxLgContentInset = import_react5.css`
+  ${bp.minSmMaxLg(`
+    width: calc(100% - ${standardContentInsetMdPx * 2}px);
+  `)}
+`;
+var standardContentInset = import_react5.css`
+  margin-left: auto;
+  margin-right: auto;
+  width: calc(100% - ${standardContentInsetPx * 2}px);
+  max-width: 1280px;
+
+  ${smContentInset}
+  ${minSmMaxLgContentInset}
+`;
+var standardCardShadow = import_react5.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 getFocusOutline = ({
+  theme,
+  onBgHex
+}) => `${onBgHex ? theme.hcNeutralFromBg(onBgHex) : theme.hcNeutral} dashed 1px`;
+var outlineOffset = "-2px";
+var standardFocusOutline = ({ theme }) => import_react5.css`
+  &,
+  & a,
+  & button {
+    &:focus-visible {
+      outline: ${getFocusOutline({ theme })};
+      outline-offset: ${outlineOffset};
+    }
+  }
+`;
+var subtext = ({ theme }) => import_react5.css`
+  color: ${theme.c6Neutral};
+  font-weight: 600;
+`;
+var Subtext = import_styled.default.div`
+  ${subtext}
+`;
+var darkGradientBg = import_react5.css`
+  background: ${darkGradient};
+`;
+var StyledTooltip = (0, import_styled.default)(import_react_tooltip.Tooltip)`
+  z-index: ${z.modalOverlay};
+`;
+var overlaySurface = ({ theme }) => import_react5.css`
+  background-color: ${themeOr(colors.white, theme.c1Neutral)({ theme })};
+  border: 0.5px solid ${themeOr(theme.c1Neutral, theme.c3Neutral)({ theme })};
+  ${themeOr(
+  "box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.08), 0px 1px 4px rgba(0, 0, 0, 0.1);",
+  ""
+)({ theme })}
+`;
+
+// src/components/Icon.tsx
+var import_styled2 = __toESM(require("@emotion/styled"), 1);
+var import_react6 = require("react");
+
+// src/utils/strings.tsx
+function isString(str) {
+  return typeof str === "string";
+}
+
+// src/components/Icon.tsx
+var import_jsx_runtime3 = require("@emotion/react/jsx-runtime");
+var iconMap = {};
+function loadIcon(iconName) {
+  return __async(this, null, function* () {
+    let IconComp;
+    try {
+      ({ default: IconComp } = yield import(
+        /* webpackMode: "eager" */
+        // this can't be a variable only, needs to have some string constraints:
+        `./icons/${iconName}.js`
+      ));
+    } catch (e) {
+      throw new Error(`Icon ${iconName} not found`);
+    }
+    iconMap[iconName] = IconComp;
+  });
+}
+function Icon({
+  className,
+  name,
+  width,
+  tutorialStep,
+  mr = 0,
+  ml = 0,
+  verticalAlign = "middle",
+  color = void 0
+}) {
+  const [, setLoading] = (0, import_react6.useState)(false);
+  const IconComponent = iconMap[name] || null;
+  (0, import_react6.useLayoutEffect)(() => {
+    void (() => __async(this, null, function* () {
+      if (!iconMap[name]) {
+        setLoading(true);
+        yield loadIcon(name);
+        setLoading(false);
+      }
+    }))();
+  }, [name]);
+  const w = parseFloat((width / rootFontSizePx).toFixed(2));
+  const mrRems = parseFloat((mr / rootFontSizePx).toFixed(2));
+  const mlRems = parseFloat((ml / rootFontSizePx).toFixed(2));
+  const va = typeof verticalAlign === "string" ? verticalAlign : parseFloat((verticalAlign / rootFontSizePx).toFixed(2));
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    IconContainer,
+    {
+      className,
+      w,
+      mr: mrRems,
+      ml: mlRems,
+      verticalAlign: va,
+      fontColor: color,
+      "data-tutorial-tip": tutorialStep == null ? void 0 : tutorialStep.toString(),
+      children: IconComponent ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(IconComponent, {}) : null
+    }
+  );
+}
+var IconContainer = import_styled2.default.span`
+  pointer-events: none;
+  display: inline-flex;
+  ${({ mr, ml, w }) => `
+    width: ${w}em;
+    /* ensure no shrink in flex containers: */
+    min-width: ${w}em;
+    ${mr ? `margin-right: ${mr}em;` : ""}
+    ${ml ? `margin-left: ${ml}em;` : ""}
+  `}
+
+  vertical-align: ${({ verticalAlign }) => isString(verticalAlign) ? verticalAlign : `${verticalAlign}em`};
+
+  ${({ fontColor }) => `
+    & svg {
+      color: ${fontColor || "inherit"};
+    }
+  `}
+`;
+
+// src/components/Loading.tsx
+var import_styled3 = __toESM(require("@emotion/styled"), 1);
+var import_jsx_runtime4 = require("@emotion/react/jsx-runtime");
+var defaultProps = {
+  size: 60,
+  center: true,
+  ml: 0
+};
+function Loading({
+  center = defaultProps.center,
+  size: size2 = defaultProps.size,
+  ml = defaultProps.ml
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(LoadingWrapper, { center, ml, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Rotate, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { name: "LoadingSpinner", width: size2 }) }) });
+}
+Loading.defaultProps = defaultProps;
+var LoadingWrapper = import_styled3.default.div`
+  flex-grow: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  width: 100%;
+  margin-left: ${({ ml }) => ml}px;
+
+  ${({ center }) => center && `
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    margin: 0 !important;
+  `}
+`;
+var Rotate = import_styled3.default.div`
+  display: inline-flex;
+  animation: rotate 0.5s linear infinite;
+
+  @keyframes rotate {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+`;
+
+// src/components/UnstyledButton.tsx
+var import_styled4 = __toESM(require("@emotion/styled"), 1);
+var UnstyledButton = import_styled4.default.button`
+  ${standardFocusOutline}
+  font-family: ${({ theme }) => theme.typography.fontFamilies.main};
+  appearance: none;
+  background: transparent;
+  border: none;
+  padding: 0;
+  cursor: ${({ disabled }) => disabled ? "not-allowed" : "pointer"};
+  /* needed in Safari for some reason */
+  font-size: 1rem;
+  color: inherit;
+  font-weight: inherit;
+`;
+
+// src/components/Button.tsx
+var import_jsx_runtime5 = require("@emotion/react/jsx-runtime");
+function getTextColor({ color, theme, primary: primary2, blue }) {
+  if (color) {
+    return color;
+  }
+  if (blue) {
+    return colors.white;
+  }
+  if (primary2) {
+    const color2 = theme.hcNeutralFromBg(theme.hcNeutral);
+    return color2;
+  }
+  return theme.text;
+}
+function getBackgroundColor({
+  backgroundColor,
+  theme,
+  primary: primary2,
+  blue,
+  ghost
+}) {
+  if (ghost) {
+    return "none";
+  }
+  if (backgroundColor) {
+    return backgroundColor;
+  }
+  if (blue) {
+    return colors.blue43;
+  }
+  if (primary2) {
+    return themeOr(theme.c9Neutral, colors.white)({ theme });
+  }
+  return themeOr(colors.white, theme.c1Neutral)({ theme });
+}
+function getPaddingX({ size: size2, ghost }) {
+  return ghost ? 0 : size2 === "lg" ? hPaddingPx : size2 === "md" ? 18 : 16;
+}
+function getPadding({ iconWidth, size: size2, ghost, iconSide }) {
+  const paddingY = ghost ? 0 : size2 === "lg" ? 14 : size2 === "md" ? 9 : 6;
+  const paddingX = getPaddingX({ size: size2, ghost });
+  const paddingForIcon = iconWidth && !ghost ? iconWidth : 0;
+  return `${paddingY}px ${paddingX + (iconSide === "right" ? paddingForIcon : 0)}px ${paddingY}px ${paddingX + (iconSide === "left" ? paddingForIcon : 0)}px`;
+}
+function getBorder({ ghost }) {
+  if (ghost) {
+    return "none";
+  }
+  return "1px solid";
+}
+function getInnerBorderColor({
+  backgroundColor,
+  theme,
+  primary: primary2,
+  blue
+}) {
+  if (primary2 || blue || backgroundColor) {
+    return getBackgroundColor({
+      backgroundColor,
+      theme,
+      primary: primary2,
+      blue
+    });
+  }
+  return themeOr(colors.gray90, colors.gray20)({ theme });
+}
+function Button({
+  backgroundColor,
+  color,
+  hoverColor,
+  primary: primary2 = false,
+  ghost = false,
+  text,
+  to,
+  hash,
+  href,
+  toParams,
+  onClick,
+  icon,
+  iconSide = "left",
+  loading = false,
+  fullWidth = false,
+  disabled = false,
+  size: size2 = "lg",
+  mt = 0,
+  ml = 0,
+  type = "button",
+  blue = false,
+  newTab = false,
+  zIndex = void 0
+}) {
+  const iconMarginRight = 6;
+  const iconSize = size2 === "lg" ? 16 : 12;
+  let currentIcon = null;
+  if (loading) {
+    currentIcon = /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ButtonIcon, { ghost, iconSide, text, size: size2, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Loading, { size: iconSize, center: false }) });
+  } else if (icon) {
+    currentIcon = /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ButtonIcon, { ghost, iconSide, text, size: size2, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { name: icon, width: iconSize }) });
+  }
+  const content = /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    "div",
+    {
+      css: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center"
+      },
+      children: [
+        iconSide === "left" && currentIcon,
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "div",
+          {
+            css: {
+              textOverflow: "ellipsis",
+              overflow: "hidden"
+            },
+            children: text
+          }
+        ),
+        iconSide === "right" && currentIcon
+      ]
+    }
+  );
+  const commonProps = {
+    backgroundColor,
+    color,
+    hoverColor,
+    type,
+    size: size2,
+    onClick,
+    primary: primary2,
+    ghost,
+    fullWidth,
+    blue,
+    iconSide,
+    iconWidth: currentIcon ? iconSize + iconMarginRight : 0,
+    isLoading: loading,
+    disabled: disabled || loading,
+    css: {
+      marginTop: mt ? `${mt}px` : void 0,
+      marginLeft: ml ? `${ml}px` : void 0
+    },
+    newTab,
+    text,
+    zIndex
+  };
+  if (to) {
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ButtonLink, __spreadProps(__spreadValues({}, commonProps), { to, params: toParams, hash, children: content }));
+  }
+  return href ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ButtonHrefLink, __spreadProps(__spreadValues({}, commonProps), { href, target: "_blank", children: content })) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(StyledButton, __spreadProps(__spreadValues({}, commonProps), { children: content }));
+}
+var hPaddingPx = 24;
+var buttonStyle = ({
+  color,
+  backgroundColor,
+  hoverColor,
+  theme,
+  primary: primary2,
+  ghost,
+  disabled,
+  isLoading,
+  size: size2,
+  fullWidth,
+  iconWidth,
+  blue,
+  text,
+  zIndex,
+  iconSide
+}) => import_react7.css`
+  display: inline-flex;
+  opacity: ${disabled && !isLoading ? 0.2 : 1};
+  transition: opacity 0.2s;
+  position: relative;
+
+  ${zIndex && `z-index: ${zIndex};`}
+
+  color: ${getTextColor({ color, theme, primary: primary2, blue })};
+  font-size: ${["lg", "md"].includes(size2) ? "14px" : "12px"};
+  font-weight: 600;
+
+  &:focus-visible {
+    outline: ${getFocusOutline({ theme })};
+  }
+
+  width: ${fullWidth ? "100%" : "fit-content"};
+
+  & > * {
+    width: 100%;
+    text-align: center;
+    white-space: nowrap;
+    background-color: ${getBackgroundColor({
+  backgroundColor,
+  theme,
+  primary: primary2,
+  blue,
+  ghost
+})};
+    border: ${getBorder({ ghost })};
+    border-color: ${getInnerBorderColor({
+  backgroundColor,
+  theme,
+  primary: primary2,
+  blue
+})};
+    border-radius: 32px;
+    padding: ${getPadding({ size: size2, iconWidth, text, ghost, iconSide })};
+    color: ${getTextColor({ color, theme, primary: primary2, blue })};
+    transition:
+      background-color 0.2s ease-out,
+      border-color 0.2s ease-out;
+
+    &:hover {
+      ${hoverColor && ghost ? "" : `background-color: ${hoverColor}; border-color: ${hoverColor};`}
+    }
+  }
+`;
+var ButtonIcon = import_styled5.default.div`
+  ${(props) => props.ghost ? "" : "position: absolute;"}
+  ${({ iconSide, ghost, text, size: size2 }) => `${iconSide}: ${ghost && text ? 0 : getPaddingX({ size: size2, ghost })}px;`}
+`;
+var StyledButton = (0, import_styled5.default)(UnstyledButton)`
+  ${(props) => buttonStyle(props)}
+`;
+var ButtonLink = (0, import_styled5.default)(Link)`
+  ${(props) => buttonStyle(props)}
+`;
+var ButtonHrefLink = import_styled5.default.a`
+  ${(props) => buttonStyle(props)}
+`;
+var ButtonSelector = (prepend = "", append = "") => `${prepend}${StyledButton.toString()}${append}, ${prepend}${ButtonLink.toString()}${append}, ${prepend}${ButtonHrefLink.toString()}${append}`;
+
+// src/components/ButtonRow.tsx
+var import_styled6 = __toESM(require("@emotion/styled"), 1);
+
+// src/styles/utils.tsx
+var import_react8 = require("@emotion/react");
+function pxToRems(rems, asNum = false) {
+  const value = (rems / rootFontSizePx).toFixed(6);
+  return asNum ? Number(value) : `${value}rem`;
+}
+var size = {
+  px8: pxToRems(8),
+  px10: pxToRems(10),
+  px12: pxToRems(12),
+  px14: pxToRems(14),
+  px16: pxToRems(16),
+  px18: pxToRems(18),
+  px20: pxToRems(20),
+  px21: pxToRems(21),
+  px24: pxToRems(24)
+};
+var flexCenterAxis = import_react8.css`
+  display: flex;
+  align-items: center;
+`;
+var flexCenter = import_react8.css`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+var inlineFlexCenter = import_react8.css`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+var flexBetween = import_react8.css`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`;
+var absoluteCenter = import_react8.css`
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  margin: auto;
+`;
+var textCenter = import_react8.css`
+  text-align: center;
+`;
+var overflowAutoWithoutScrollbars = import_react8.css`
+  overflow: auto;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  &::-moz-scrollbar {
+    display: none;
+  }
+`;
+
+// src/components/ButtonRow.tsx
+var import_jsx_runtime6 = require("@emotion/react/jsx-runtime");
+function ButtonRow({
+  buttons,
+  className,
+  smSticky = true,
+  headerHeight = 0
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ButtonRowContainer, { smSticky, headerHeight, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(StyledButtonRow, { className, children: buttons.map((button, idx) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Button, __spreadValues({}, button), idx)) }) });
+}
+var ButtonRowContainer = import_styled6.default.div`
+  max-width: 100%;
+  ${({ theme }) => bp.sm(`background: ${theme.bg}`)}
+  ${({ headerHeight, smSticky }) => bp.sm(
+  `
+        ${smSticky ? `
+            display: block;
+            position: sticky;
+            top: ${headerHeight}px;
+            margin-top: 24px;
+            margin-left: -${standardContentInsetSmPx}px;
+            width: calc(100% + ${standardContentInsetSmPx * 2}px);
+            max-width: calc(100% + ${standardContentInsetSmPx * 2}px);
+            z-index: 2;` : `position: relative;`}
+        z-index: 2;
+        &:before {
+          content: "";
+          box-shadow: 0px 0px 9px 3px rgba(0, 0, 0, 0.09);
+          height: 1px;
+          position: absolute;
+          background: black;
+          bottom: 1px;
+          width: 100%;
+          z-index: 0;
+        }
+      `
+)}
+`;
+var StyledButtonRow = import_styled6.default.div`
+  ${overflowAutoWithoutScrollbars}
+  background: ${({ theme }) => theme.bg};
+  display: flex;
+  position: relative;
+  z-index: 1;
+
+  & button:not(:first-of-type),
+  & a:not(:first-of-type) {
+    margin-left: 8px;
+  }
+
+  ${bp.sm(`
+    padding: 12px;
+  `)}
+`;
+
+// src/components/Collapsible.tsx
+var import_styled7 = __toESM(require("@emotion/styled"), 1);
+var import_react9 = require("react");
+var import_jsx_runtime7 = require("@emotion/react/jsx-runtime");
+function Collapsible({
+  children,
+  className,
+  text,
+  open,
+  handleToggle,
+  hamburger,
+  full
+}) {
+  const [isOpen, setIsOpen] = (0, import_react9.useState)(open);
+  const handleClick = () => {
+    if (handleToggle) {
+      handleToggle(!isOpen);
+    }
+    setIsOpen(!isOpen);
+  };
+  (0, import_react9.useEffect)(() => {
+    setIsOpen(open);
+  }, [open]);
+  const iconName = hamburger ? isOpen ? "Close" : "StackedLines" : "Down";
+  const iconWidth = iconName === "Close" ? 12 : 14;
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(StyledCollapsible, { className, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(StyledCollapsibleButton, { onClick: handleClick, children: [
+      text ? text : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", {}),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(IconContainer2, { isOpen, hamburger, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Icon, { width: iconWidth, name: iconName }) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CollapsingContainer, { isOpen, full, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(InnerPadding, { children }) })
+  ] });
+}
+var StyledCollapsible = import_styled7.default.div`
+  display: flex;
+  flex-direction: column;
+`;
+var StyledCollapsibleButton = import_styled7.default.button`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  background: none;
+  border: none;
+  cursor: pointer;
+  border-radius: 8px;
+  padding: 0;
+`;
+var IconContainer2 = import_styled7.default.div`
+  ${(props) => {
+  if (props.hamburger) {
+    return;
+  }
+  return props.isOpen ? `transform: rotate(0deg);` : `transform: rotate(-90deg);`;
+}}
+  transition: transform 0.25s ease-out;
+  width: 20px;
+`;
+var CollapsingContainer = import_styled7.default.div`
+  overflow: scroll;
+  opacity: 0;
+  animation-duration: 0.4s;
+  animation-fill-mode: forwards;
+
+  ${(props) => props.isOpen ? `height: 100%; animation-name: fadeIn;` : `height: 0; animation-name: fadeOut;`}
+  ${(props) => props.full ? `height: ${props.isOpen ? "100vh" : 0};` : ""}
+
+  ${overflowAutoWithoutScrollbars}
+
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+      transform: translateY(-10px);
+    }
+    to {
+      opacity: 1;
+      transform: none;
+    }
+  }
+
+  @keyframes fadeOut {
+    from {
+      opacity: 1;
+      transform: none;
+    }
+    to {
+      opacity: 0;
+      transform: translateY(-10px);
+      visibility: hidden;
+    }
+  }
+`;
+var InnerPadding = import_styled7.default.div`
+  padding: 4px 0 4px 16px;
+  gap: 4px;
+  display: flex;
+  flex-direction: column;
+`;
+
+// src/components/CommandKey.tsx
+var import_styled8 = __toESM(require("@emotion/styled"), 1);
+var import_jsx_runtime8 = require("@emotion/react/jsx-runtime");
+var CommandKey = ({
+  keyboardKey,
+  size: size2,
+  color,
+  backgroundColor
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    StyledCommandKey,
+    {
+      color,
+      size: size2,
+      backgroundColor,
+      children: keyboardKey
+    }
+  );
+};
+var StyledCommandKey = import_styled8.default.div`
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 500;
+  color: ${(props) => props.color || "black"};
+  ${(props) => props.backgroundColor ? `background-color: ${props.backgroundColor};` : ""}
+  border-radius: 3.6px;
+  min-width: ${(props) => props.size === "sm" ? 20 : 24}px;
+  height: ${(props) => props.size === "sm" ? 20 : 24}px;
+  font-size: ${(props) => props.size === "sm" ? 12 : 14}px;
+  padding: 3px 6px;
+`;
+
+// src/components/CopyToClipboardButton.tsx
+var import_styled9 = __toESM(require("@emotion/styled"), 1);
+var import_nanoid = require("nanoid");
+var import_react10 = require("react");
+var import_jsx_runtime9 = 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_react10.useState)(originalTooltipContent);
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+      Button2,
+      {
+        type: "button",
+        onClick: () => {
+          void (() => __async(void 0, null, function* () {
+            try {
+              yield navigator.clipboard.writeText(props.value);
+              setTooltipContent("Copied!");
+            } catch (err) {
+              setTooltipContent("Unable to copy");
+            }
+            setTimeout(() => {
+              setTooltipContent(originalTooltipContent);
+            }, 2e3);
+          }))();
+        },
+        css: props.buttonCSS,
+        ml: props.ml,
+        "data-tooltip-id": id,
+        children: [
+          props.children ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Children, { children: props.children }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Icon, { name: icon, width: props.isSm ? 12 : 16 })
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(StyledTooltip, { id, place: props.place || "right", variant: "dark", children: tooltipContent })
+  ] });
+};
+var Children = import_styled9.default.span`
+  margin-right: 4px;
+`;
+var Button2 = (0, import_styled9.default)(UnstyledButton)`
+  background: rgba(0, 0, 0, 0);
+  vertical-align: middle;
+  ${({ ml }) => ml ? `margin-left: ${ml}px` : ""};
+`;
+
+// src/components/CurrencyAmount.tsx
+var import_client = require("@apollo/client");
+var import_styled10 = __toESM(require("@emotion/styled"), 1);
+var import_core = require("@lightsparkdev/core");
+var import_jsx_runtime10 = require("@emotion/react/jsx-runtime");
+function CurrencyAmount({
+  amount,
+  displayUnit = import_core.CurrencyUnit.SATOSHI,
+  shortNumber = false,
+  showUnits = false,
+  includeEstimatedIndicator = false,
+  /* Product has voted to hide msats from end users.
+     showSubSatDigits should only be used in ops tools: */
+  showSubSatDigits = false,
+  ml = 0
+}) {
+  const unit = displayUnit;
+  const amountMap = (0, import_core.isCurrencyMap)(amount) ? amount : (0, import_core.mapCurrencyAmount)(amount);
+  const value = amountMap[unit];
+  const defaultFormattedNumber = amountMap.formatted[unit];
+  let formattedNumber = defaultFormattedNumber;
+  if (shortNumber) {
+    formattedNumber = (0, import_core.formatCurrencyStr)(
+      { value: Number(value), unit },
+      1,
+      true
+    );
+  } else if (showSubSatDigits) {
+    formattedNumber = (0, import_core.formatCurrencyStr)(
+      { value: Number(value), unit: import_core.CurrencyUnit.SATOSHI },
+      3
+    );
+  }
+  if (showUnits) {
+    formattedNumber += ` ${shorttext(unit, value)}`;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(StyledCurrencyAmount, { ml, children: [
+    includeEstimatedIndicator && "Est. ",
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(CurrencyIcon, { unit }),
+    formattedNumber
+  ] });
+}
+var CurrencyIcon = ({ unit }) => {
+  switch (unit) {
+    case import_core.CurrencyUnit.BITCOIN:
+      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Icon, { name: "BitcoinB", width: 8, verticalAlign: -2, mr: 2 });
+    case import_core.CurrencyUnit.SATOSHI:
+      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Icon, { name: "Satoshi", width: 8, verticalAlign: -2, mr: 2 });
+    default:
+      return null;
+  }
+};
+var shorttext = (unit, value) => {
+  const pl = value !== 1;
+  switch (unit) {
+    case import_core.CurrencyUnit.BITCOIN:
+      return "BTC";
+    case import_core.CurrencyUnit.MILLIBITCOIN:
+      return "mBTC";
+    case import_core.CurrencyUnit.MICROBITCOIN:
+      return "\u03BCBTC";
+    case import_core.CurrencyUnit.SATOSHI:
+      return `sat${pl ? "s" : ""}`;
+    case import_core.CurrencyUnit.MILLISATOSHI:
+      return `msat${pl ? "s" : ""}`;
+  }
+  return unit;
+};
+var StyledCurrencyAmount = import_styled10.default.span`
+  color: inherit !important;
+  white-space: nowrap;
+  font-feature-settings:
+    "tnum" on,
+    "lnum" on;
+  margin-left: ${({ ml }) => ml}px;
+`;
+CurrencyAmount.fragments = {
+  amount: import_client.gql`
+    fragment CurrencyAmount_amount on CurrencyAmount {
+      original_value
+      original_unit
+      preferred_currency_unit
+      preferred_currency_value_rounded
+      preferred_currency_value_approx
+    }
+  `
+};
+
+// src/components/LightboxImage.tsx
+var import_styled11 = __toESM(require("@emotion/styled"), 1);
+var import_react11 = require("react");
+var import_jsx_runtime11 = require("@emotion/react/jsx-runtime");
+var LightboxImage = ({ children }) => {
+  const [isOpen, setIsOpen] = (0, import_react11.useState)(false);
+  const [boundingRect, setBoundingRect] = (0, import_react11.useState)({
+    x: 0,
+    y: 0,
+    width: 0,
+    height: 0
+  });
+  const imageRef = (0, import_react11.useRef)(null);
+  const handleMouseUp = () => {
+    setIsOpen(!isOpen);
+  };
+  const handleSetBoundingRect = (ref) => {
+    var _a;
+    const rect = (_a = ref.current) == null ? void 0 : _a.getBoundingClientRect();
+    if (rect) {
+      setBoundingRect({
+        x: rect.x,
+        y: rect.y,
+        width: rect.width,
+        height: rect.height
+      });
+    }
+  };
+  (0, import_react11.useEffect)(() => {
+    handleSetBoundingRect(imageRef);
+  }, [imageRef]);
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DummyImage, { isOpen, boundingRect }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      StyledImage,
+      {
+        isOpen,
+        ref: imageRef,
+        boundingRect,
+        onMouseDown: () => handleSetBoundingRect(imageRef),
+        onMouseUp: handleMouseUp,
+        children
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Lightbox, { isOpen, onClick: handleMouseUp })
+  ] });
+};
+var DummyImage = import_styled11.default.div`
+  ${(props) => props.isOpen ? `height: ${props.boundingRect.height}px; width: ${props.boundingRect.width}px;` : ``}
+`;
+var StyledImage = import_styled11.default.div`
+  display: flex;
+  justify-content: start;
+  align-items: center;
+  z-index: ${z.modalContainer};
+
+  animation-duration: 0.4s;
+  animation-fill-mode: forwards;
+  transition: all 0.2s ease-out;
+
+  ${(props) => props.isOpen ? `
+    animation-direction: normal;
+    position: fixed;
+    animation-name: zoomIn;
+    pointer-events: none;
+  ` : `
+    &:hover {
+      cursor: zoom-in;
+    }
+  `}
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+  }
+
+  @keyframes zoomIn {
+    from {
+      ${(props) => {
+  const { x, y, width, height } = props.boundingRect;
+  return `
+          top: ${y}px;
+          left: ${x}px;
+          width: ${width}px;
+          height: ${height}px;
+        `;
+}}
+    }
+    to {
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      padding: 24px;
+    }
+  }
+`;
+var Lightbox = import_styled11.default.div`
+  transition: opacity 0.2s ease-out;
+  position: fixed;
+  opacity: 0;
+  z-index: ${z.modalOverlay};
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+
+  ${({ theme, isOpen }) => isOpen ? `
+    opacity: 1;
+    background: ${theme.bg};
+
+    &:hover {
+      cursor: zoom-out;
+    }
+  ` : `
+    pointer-events: none;
+  `}
+`;
+
+// src/components/LightsparkProvider.tsx
+var import_react14 = require("@emotion/react");
+
+// src/styles/global.tsx
+var import_react12 = require("@emotion/react");
+var import_react13 = require("react");
+var import_react_tooltip2 = require("react-tooltip/dist/react-tooltip.css");
+var import_fonts = require("../static/fonts.css");
+
+// src/styles/constants.ts
+var cssVars = {
+  docHeight: "--doc-height"
+};
+
+// src/styles/global.tsx
+var import_jsx_runtime12 = require("@emotion/react/jsx-runtime");
+var globalComponentStyles = ({ theme }) => import_react12.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");
+
+  html {
+    font-size: ${rootFontSizeRems}rem;
+    color: ${theme.text};
+
+    /* required for iOS https://bit.ly/3Q8syG8 */
+    -webkit-text-size-adjust: none;
+    text-size-adjust: none;
+  }
+
+  body {
+    font-family: ${theme.typography.fontFamilies.main}, sans-serif;
+    font-weight: 500;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+
+    &:before {
+      position: absolute;
+      visibility: hidden;
+    }
+
+    ${bp.sm(`&:before { content: "${"sm" /* sm */}"; }`)}
+    ${bp.minSmMaxMd(`&:before { content: "${"minSmMaxMd" /* minSmMaxMd */}"; }`)}
+      ${bp.minMdMaxLg(
+  `&:before { content: "${"minMdMaxLg" /* minMdMaxLg */}"; }`
+)}
+    ${bp.lg(`&:before { content: "${"lg" /* lg */}"; }`)}
+  }
+
+  * {
+    box-sizing: border-box;
+    line-height: ${standardLineHeightEms}em;
+  }
+
+  code {
+    font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
+      monospace;
+  }
+
+  a {
+    color: #0d6efd;
+    text-decoration: none;
+  }
+
+  .pretty-scrollbar {
+    scrollbar-width: auto;
+    scrollbar-color: #333333 #000000;
+  }
+
+  .pretty-scrollbar::-webkit-scrollbar {
+    width: 16px;
+  }
+
+  .pretty-scrollbar::-webkit-scrollbar-track {
+    background: #000000;
+  }
+
+  .pretty-scrollbar::-webkit-scrollbar-thumb {
+    background-color: #333333;
+    border-radius: 10px;
+    border: 3px solid #000000;
+  }
+
+  *:focus-visible {
+    outline: ${theme.hcNeutral} dashed 1px;
+  }
+
+  strong {
+    font-weight: 600;
+  }
+`;
+function GlobalStyles() {
+  const theme = (0, import_react12.useTheme)();
+  const bg = useThemeBg();
+  (0, import_react13.useEffect)(() => {
+    const documentHeight = () => {
+      const doc = document.documentElement;
+      doc.style.setProperty(cssVars.docHeight, `${window.innerHeight}px`);
+    };
+    window.addEventListener("resize", documentHeight);
+    documentHeight();
+    return () => window.removeEventListener("resize", documentHeight);
+  }, []);
+  const globalStyles = import_react12.css`
+    ${globalComponentStyles({ theme })}
+
+    :root {
+      ${cssVars.docHeight}: 100vh;
+      --rt-opacity: 1;
+    }
+
+    html {
+      background: ${bg};
+    }
+
+    body {
+      height: 100%;
+      margin: 0;
+      min-height: var(${cssVars.docHeight});
+      overflow-x: hidden;
+      overflow-y: auto;
+      overscroll-behavior: auto;
+    }
+
+    [id="root"] {
+      height: 100%;
+    }
+  `;
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react12.Global, { styles: globalStyles });
+}
+
+// src/components/LightsparkProvider.tsx
+var import_jsx_runtime13 = require("@emotion/react/jsx-runtime");
+function LightsparkProvider({ children }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react14.ThemeProvider, { theme: themes.light, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(GlobalStyles, {}),
+    children
+  ] });
+}
+
+// src/components/Modal.tsx
+var import_styled12 = __toESM(require("@emotion/styled"), 1);
+var import_react16 = __toESM(require("react"), 1);
+var import_react_dom = __toESM(require("react-dom"), 1);
+
+// src/hooks/useLiveRef.tsx
+var import_react15 = require("react");
+function useLiveRef() {
+  const [ready, setReady] = (0, import_react15.useState)(false);
+  const ref = (0, import_react15.useRef)(null);
+  const refCb = (0, import_react15.useCallback)((node) => {
+    if (node !== null) {
+      ref.current = node;
+      setReady(true);
+    }
+  }, []);
+  return [ready ? ref : { current: null }, refCb];
+}
+
+// src/components/Modal.tsx
+var import_jsx_runtime14 = require("@emotion/react/jsx-runtime");
+function Modal({
+  visible,
+  title,
+  description,
+  children,
+  onClose,
+  onCancel,
+  cancelDisabled,
+  cancelHidden,
+  ghost,
+  onSubmit,
+  submitDisabled,
+  submitLoading,
+  submitText,
+  cancelText,
+  firstFocusRef,
+  nonDismissable = false,
+  autoFocus = true,
+  width
+}) {
+  const nodeRef = (0, import_react16.useRef)(null);
+  const [defaultFirstFocusRef, defaultFirstFocusRefCb] = useLiveRef();
+  const ref = firstFocusRef || defaultFirstFocusRef;
+  const [nodeReady, setNodeReady] = import_react16.default.useState(false);
+  const overlayRef = (0, import_react16.useRef)(null);
+  const prevFocusedElement = (0, import_react16.useRef)();
+  const modalContainerRef = (0, import_react16.useRef)(null);
+  const bp2 = useBreakpoints();
+  const isSm = bp2.current("sm" /* sm */);
+  (0, import_react16.useEffect)(() => {
+    prevFocusedElement.current = document.activeElement;
+    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;
+      }
+    };
+  }, []);
+  (0, import_react16.useEffect)(() => {
+    const handleOutsideClick = (event) => {
+      if (visible && overlayRef.current && event.target && overlayRef.current.contains(event.target) && !nonDismissable) {
+        onClose();
+      }
+    };
+    const handleKeyDown = (event) => {
+      if (visible && event.key === "Escape" && !nonDismissable) {
+        onClose();
+      }
+    };
+    if (visible) {
+      if (modalContainerRef.current) {
+        modalContainerRef.current.addEventListener("keydown", handleKeyDown);
+      }
+      if (overlayRef.current) {
+        overlayRef.current.addEventListener("click", handleOutsideClick);
+      }
+    } else {
+      if (modalContainerRef.current) {
+        modalContainerRef.current.removeEventListener("keydown", handleKeyDown);
+      }
+      if (overlayRef.current) {
+        overlayRef.current.removeEventListener("click", handleOutsideClick);
+      }
+    }
+    const containerRef = modalContainerRef.current;
+    const overlayRefVar = overlayRef.current;
+    return () => {
+      if (containerRef) {
+        containerRef.removeEventListener("keydown", handleKeyDown);
+      }
+      if (overlayRefVar) {
+        overlayRefVar.removeEventListener("click", handleOutsideClick);
+      }
+    };
+  }, [onClose, visible, nonDismissable]);
+  (0, import_react16.useLayoutEffect)(() => {
+    if (visible) {
+      prevFocusedElement.current = document.activeElement;
+      if (typeof ref === "object" && (ref == null ? void 0 : ref.current) && autoFocus) {
+        ref.current.focus();
+      }
+    } else if (prevFocusedElement.current) {
+      prevFocusedElement.current.focus();
+    }
+  }, [visible, ref, autoFocus]);
+  function onClickCloseButton(event) {
+    event.stopPropagation();
+    onClose();
+  }
+  function onSubmitForm(e) {
+    e.preventDefault();
+    if (!submitDisabled && onSubmit) {
+      onSubmit();
+    }
+  }
+  function onClickCancel() {
+    if (onCancel) {
+      onCancel();
+    } else {
+      onClose();
+    }
+  }
+  const modalContent = /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_react16.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ModalOverlay, { ref: overlayRef }),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      ModalContainer,
+      {
+        "aria-modal": true,
+        "aria-hidden": true,
+        tabIndex: -1,
+        role: "dialog",
+        ref: modalContainerRef,
+        children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(ModalContent, { width, ghost, children: [
+          !firstFocusRef && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DefaultFocusTarget, { ref: defaultFirstFocusRefCb }),
+          !(nonDismissable || ghost) && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(CloseButton, { onClick: onClickCloseButton, type: "button", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Icon, { name: "Close", width: 9 }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(ModalContentInner, { ghost, children: [
+            title ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("h4", { children: title }) : null,
+            description ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Description, { children: description }) : null,
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { children }),
+            onSubmit ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(ModalButtonRow, { children: [
+              !isSm && !cancelHidden && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                Button,
+                {
+                  disabled: cancelDisabled,
+                  onClick: onClickCancel,
+                  text: cancelText != null ? cancelText : "Cancel"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                Button,
+                {
+                  disabled: submitDisabled,
+                  primary: true,
+                  text: submitText != null ? submitText : "Continue",
+                  loading: submitLoading,
+                  type: "submit"
+                }
+              ),
+              isSm && !cancelHidden && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Button, { onClick: onClose, text: "Cancel" })
+            ] }) : null
+          ] })
+        ] })
+      }
+    )
+  ] });
+  return visible && nodeReady && nodeRef.current ? import_react_dom.default.createPortal(
+    onSubmit ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("form", { onSubmit: onSubmitForm, children: modalContent }) : modalContent,
+    nodeRef.current
+  ) : null;
+}
+var DefaultFocusTarget = (0, import_styled12.default)(UnstyledButton)`
+  position: absolute;
+  top: -30px;
+  width: 0;
+  height: 0;
+`;
+var ModalOverlay = import_styled12.default.div`
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  z-index: ${z.modalOverlay};
+  width: 100vw;
+  height: 100vh;
+  background: rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(2px);
+`;
+var ModalContainer = import_styled12.default.div`
+  pointer-events: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: ${z.modalContainer};
+  width: 100%;
+  height: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+  outline: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: ${({ theme }) => theme.text};
+  padding-top: ${standardContentInsetSmPx}px;
+`;
+var contentTopMarginPx = 24;
+var Description = import_styled12.default.div`
+  color: ${({ theme }) => theme.mcNeutral};
+  margin-top: 4px;
+  & + * {
+    margin-top: ${contentTopMarginPx}px;
+  }
+`;
+var ModalButtonRow = import_styled12.default.div`
+  margin-top: 32px;
+  ${bp.minSm(`display: flex;`)}
+
+  button {
+    width: 50%;
+    ${bp.sm(`
+      width: 100%;
+    `)}
+  }
+
+  button:last-of-type {
+    ${bp.sm(`
+      margin-top: 16px;
+    `)}
+    ${bp.minSm(`
+      margin-left: 10px;
+    `)}
+  }
+`;
+var ModalContent = import_styled12.default.div`
+  ${overflowAutoWithoutScrollbars}
+  ${smContentInset}
+  ${(props) => props.ghost ? "" : overlaySurface}
+  pointer-events: auto;
+  width: ${(props) => props.width || 430}px;
+  max-width: 100%;
+  max-height: 100%;
+  border-radius: 16px;
+  position: absolute;
+  ${(props) => props.ghost ? "" : "padding: 16px 16px 40px;"}
+
+  h4 {
+    margin: 0;
+    font-weight: 800;
+    font-size: ${pxToRems(21)};
+    & + *:not(${Description}) {
+      margin-top: ${contentTopMarginPx}px;
+    }
+  }
+`;
+var CloseButton = (0, import_styled12.default)(UnstyledButton)`
+  ${standardFocusOutline}
+  width: 24px;
+  height: 24px;
+`;
+var ModalContentInner = import_styled12.default.div`
+  ${(props) => props.ghost ? "" : "padding: 32px 24px 0;"}
+  ${(props) => props.ghost ? "" : `${bp.sm(`
+    padding-left: 10px;
+    padding-right: 10px;
+  `)}`}
+`;
+
+// src/components/SecretContainer.tsx
+var import_styled13 = __toESM(require("@emotion/styled"), 1);
+var import_jsx_runtime15 = require("@emotion/react/jsx-runtime");
+function SecretContainer(props) {
+  return props.secret ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(StyledSecretContainer, { hasSecret: true, success: props.success, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      "span",
+      {
+        style: {
+          textOverflow: "ellipsis",
+          whiteSpace: "nowrap",
+          overflow: "hidden",
+          flex: 1
+        },
+        children: props.secret
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(CopyToClipboardButton, { value: props.secret, isSm: true, ml: 4 })
+  ] }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(StyledSecretContainer, { hasSecret: false, children: "There are no tokens associated with this account" });
+}
+var StyledSecretContainer = import_styled13.default.div`
+  background-color: ${({ theme, hasSecret, success }) => hasSecret ? success ? theme.success : theme.c05Neutral : theme.bg};
+  border-radius: 8px;
+  padding: 18px 20px;
+  color: ${({ theme, success }) => success ? theme.hcNeutral : theme.text};
+  border: solid 1px
+    ${({ theme, hasSecret }) => hasSecret ? theme.c05Neutral : theme.c1Neutral};
+  display: flex;
+  gap: 4px;
+`;
+
+// src/components/TextIconAligner.tsx
+var import_jsx_runtime16 = require("@emotion/react/jsx-runtime");
+function TextIconAligner({
+  text,
+  rightIcon,
+  leftIcon,
+  onClick
+}) {
+  const leftIconNode = leftIcon ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    Icon,
+    {
+      name: leftIcon.name,
+      width: leftIcon.lg ? 16 : 12,
+      mr: leftIcon.mr || 6,
+      color: leftIcon.color
+    }
+  ) : null;
+  const rightIconNode = rightIcon ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    Icon,
+    {
+      name: rightIcon.name,
+      width: rightIcon.lg ? 16 : 12,
+      ml: rightIcon.ml || 6,
+      color: rightIcon.color
+    }
+  ) : null;
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+    "span",
+    {
+      css: {
+        cursor: onClick ? "pointer" : "inherit",
+        display: "inline-flex",
+        alignItems: "center"
+      },
+      onClick,
+      children: [
+        leftIconNode,
+        text,
+        rightIconNode
+      ]
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Button,
+  ButtonRow,
+  ButtonRowContainer,
+  ButtonSelector,
+  Collapsible,
+  CommandKey,
+  CopyToClipboardButton,
+  CurrencyAmount,
+  CurrencyIcon,
+  Icon,
+  IconContainer,
+  LightboxImage,
+  LightsparkProvider,
+  Loading,
+  LoadingWrapper,
+  Modal,
+  SecretContainer,
+  StyledButton,
+  TextIconAligner,
+  UnstyledButton
+});