@lightsparkdev/ui 0.0.0

package/dist/chunk-7ENCWBAN.js

@@ -0,0 +1,112 @@
+import {
+  overflowAutoWithoutScrollbars
+} from "./chunk-LZHLWOXG.js";
+import {
+  Icon
+} from "./chunk-L7XFJWMY.js";
+
+// src/components/Collapsible.tsx
+import styled from "@emotion/styled";
+import { useEffect, useState } from "react";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+function Collapsible({
+  children,
+  className,
+  text,
+  open,
+  handleToggle,
+  hamburger,
+  full
+}) {
+  const [isOpen, setIsOpen] = useState(open);
+  const handleClick = () => {
+    if (handleToggle) {
+      handleToggle(!isOpen);
+    }
+    setIsOpen(!isOpen);
+  };
+  useEffect(() => {
+    setIsOpen(open);
+  }, [open]);
+  const iconName = hamburger ? isOpen ? "Close" : "StackedLines" : "Down";
+  const iconWidth = iconName === "Close" ? 12 : 14;
+  return /* @__PURE__ */ jsxs(StyledCollapsible, { className, children: [
+    /* @__PURE__ */ jsxs(StyledCollapsibleButton, { onClick: handleClick, children: [
+      text ? text : /* @__PURE__ */ jsx("div", {}),
+      /* @__PURE__ */ jsx(IconContainer, { isOpen, hamburger, children: /* @__PURE__ */ jsx(Icon, { width: iconWidth, name: iconName }) })
+    ] }),
+    /* @__PURE__ */ jsx(CollapsingContainer, { isOpen, full, children: /* @__PURE__ */ jsx(InnerPadding, { children }) })
+  ] });
+}
+var StyledCollapsible = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+var StyledCollapsibleButton = styled.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 IconContainer = styled.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 = styled.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 = styled.div`
+  padding: 4px 0 4px 16px;
+  gap: 4px;
+  display: flex;
+  flex-direction: column;
+`;
+
+export {
+  Collapsible,
+  StyledCollapsible,
+  StyledCollapsibleButton,
+  CollapsingContainer
+};

package/dist/chunk-7NQH4LBZ.js

@@ -0,0 +1,25 @@
+import {
+  colors
+} from "./chunk-ACZDUWPH.js";
+import {
+  getTypographyString
+} from "./chunk-WVJNZRKF.js";
+
+// src/styles/fonts/typography/Body.tsx
+import styled from "@emotion/styled";
+import { jsx } from "@emotion/react/jsx-runtime";
+var Body = ({ children, color, size = "Medium" /* Medium */ }) => {
+  return /* @__PURE__ */ jsx(StyledBody, { size, color, children });
+};
+var StyledBody = styled.span`
+  display: block;
+  color: ${({ theme, color }) => `${color || theme.text || colors.black}`};
+  ${({ theme, size }) => {
+  return size ? getTypographyString(theme.typography[theme.app].Body[size]) : "";
+}}
+`;
+
+export {
+  Body,
+  StyledBody
+};

package/dist/chunk-ACZDUWPH.js

@@ -0,0 +1,304 @@
+import {
+  getTypography
+} from "./chunk-WVJNZRKF.js";
+import {
+  useBreakpoints
+} from "./chunk-JSGRNWSB.js";
+import {
+  __spreadProps,
+  __spreadValues
+} from "./chunk-CIGAQ47A.js";
+
+// src/styles/colors.tsx
+import { css, useTheme } from "@emotion/react";
+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 Themes = /* @__PURE__ */ ((Themes2) => {
+  Themes2["Light"] = "light";
+  Themes2["Dark"] = "dark";
+  return Themes2;
+})(Themes || {});
+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 themeWithTypography = (theme, typography) => {
+  return extendBase(theme, { typography });
+};
+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 ifLight(style) {
+  return function({ theme }) {
+    if (theme.type === "light" /* Light */) {
+      return css`
+        ${style}
+      `;
+    }
+    return "";
+  };
+}
+function ifDark(style) {
+  return function({ theme }) {
+    if (theme.type === "dark" /* Dark */) {
+      return css`
+        ${style}
+      `;
+    }
+    return "";
+  };
+}
+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 componentToHex(c) {
+  const hex = c.toString(16);
+  return hex.length === 1 ? "0" + hex : hex;
+}
+function rgbToHex(r, g, b) {
+  return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
+}
+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 hexToRGBAStr(hex, alpha) {
+  const rgb = hexToRGB(hex);
+  return `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, ${alpha})`;
+}
+function useThemeBg() {
+  const theme = useTheme();
+  const bp = useBreakpoints();
+  const isSm = bp.current("sm" /* sm */);
+  if (isDark(theme)) {
+    return darkGradient;
+  }
+  return isSm ? theme.smBg : theme.bg;
+}
+
+export {
+  darkGradient,
+  Themes,
+  colors,
+  themeWithTypography,
+  themes,
+  isDark,
+  isLight,
+  themeOr,
+  ifLight,
+  ifDark,
+  luminance,
+  contrast,
+  componentToHex,
+  rgbToHex,
+  hexToRGB,
+  hexToRGBAStr,
+  useThemeBg
+};

package/dist/chunk-BKOTW3CK.js

@@ -0,0 +1,51 @@
+import {
+  Icon
+} from "./chunk-L7XFJWMY.js";
+
+// src/components/TextIconAligner.tsx
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+function TextIconAligner({
+  text,
+  rightIcon,
+  leftIcon,
+  onClick
+}) {
+  const leftIconNode = leftIcon ? /* @__PURE__ */ jsx(
+    Icon,
+    {
+      name: leftIcon.name,
+      width: leftIcon.lg ? 16 : 12,
+      mr: leftIcon.mr || 6,
+      color: leftIcon.color
+    }
+  ) : null;
+  const rightIconNode = rightIcon ? /* @__PURE__ */ jsx(
+    Icon,
+    {
+      name: rightIcon.name,
+      width: rightIcon.lg ? 16 : 12,
+      ml: rightIcon.ml || 6,
+      color: rightIcon.color
+    }
+  ) : null;
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      css: {
+        cursor: onClick ? "pointer" : "inherit",
+        display: "inline-flex",
+        alignItems: "center"
+      },
+      onClick,
+      children: [
+        leftIconNode,
+        text,
+        rightIconNode
+      ]
+    }
+  );
+}
+
+export {
+  TextIconAligner
+};

package/dist/chunk-BZ5MKMI2.js

@@ -0,0 +1,58 @@
+import {
+  Icon
+} from "./chunk-L7XFJWMY.js";
+
+// src/components/Loading.tsx
+import styled from "@emotion/styled";
+import { jsx } from "@emotion/react/jsx-runtime";
+var defaultProps = {
+  size: 60,
+  center: true,
+  ml: 0
+};
+function Loading({
+  center = defaultProps.center,
+  size = defaultProps.size,
+  ml = defaultProps.ml
+}) {
+  return /* @__PURE__ */ jsx(LoadingWrapper, { center, ml, children: /* @__PURE__ */ jsx(Rotate, { children: /* @__PURE__ */ jsx(Icon, { name: "LoadingSpinner", width: size }) }) });
+}
+Loading.defaultProps = defaultProps;
+var LoadingWrapper = styled.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 = styled.div`
+  display: inline-flex;
+  animation: rotate 0.5s linear infinite;
+
+  @keyframes rotate {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+`;
+
+export {
+  Loading,
+  LoadingWrapper
+};

package/dist/chunk-CIGAQ47A.js

@@ -0,0 +1,45 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+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 __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());
+  });
+};
+
+export {
+  __spreadValues,
+  __spreadProps,
+  __async
+};

package/dist/chunk-CLU2FRJZ.js

@@ -0,0 +1,29 @@
+// 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
+};
+
+export {
+  z
+};

package/dist/chunk-CQDQFIWT.js

@@ -0,0 +1,24 @@
+import {
+  colors
+} from "./chunk-ACZDUWPH.js";
+import {
+  getTypographyString
+} from "./chunk-WVJNZRKF.js";
+
+// src/styles/fonts/typography/Title.tsx
+import styled from "@emotion/styled";
+import { jsx } from "@emotion/react/jsx-runtime";
+var Title = ({ children, color, size = "Medium" /* Medium */ }) => {
+  return /* @__PURE__ */ jsx(StyledTitle, { size, color, children });
+};
+var StyledTitle = styled.span`
+  color: ${({ theme, color }) => `${color || theme.text || colors.black}`};
+  ${({ theme, size }) => {
+  return size ? getTypographyString(theme.typography[theme.app].Title[size]) : "";
+}}
+`;
+
+export {
+  Title,
+  StyledTitle
+};

package/dist/chunk-DE24BV2C.js

@@ -0,0 +1,61 @@
+import {
+  Headline
+} from "./chunk-W4GDCWKZ.js";
+import {
+  Icon
+} from "./chunk-L7XFJWMY.js";
+import {
+  __spreadProps,
+  __spreadValues
+} from "./chunk-CIGAQ47A.js";
+
+// src/components/documentation/AnchorLinkHeader.tsx
+import { useTheme } from "@emotion/react";
+import styled from "@emotion/styled";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+var AnchorLinkHeader = (props) => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsx(StyledAnchorLinkHeader, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ jsxs(Headline, __spreadProps(__spreadValues({}, props), { children: [
+    props.children,
+    /* @__PURE__ */ jsx(
+      IconWrapper,
+      {
+        name: "AnchorLink",
+        color: props.color || theme.text,
+        width: 0
+      }
+    )
+  ] })) }));
+};
+var IconWrapper = styled(Icon)`
+  width: 20px;
+  opacity: 0;
+  margin: 0 0 4px -20px;
+  transform: translateX(-8px);
+  transition:
+    opacity 0.1s ease-out,
+    transform 0.1s ease-out;
+
+  svg {
+    margin: 0;
+  }
+`;
+var StyledAnchorLinkHeader = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  width: fit-content;
+
+  a {
+    padding-right: 24px;
+  }
+
+  &:hover ${IconWrapper} {
+    opacity: 1;
+    transform: translateX(0px);
+  }
+`;
+
+export {
+  AnchorLinkHeader
+};