@lightsparkdev/ui 0.0.13 → 1.0.1

package/dist/chunk-BCXQD6ZP.js

@@ -0,0 +1,27 @@
+// src/icons/TwoArrowsUp.tsx
+import { jsx } from "@emotion/react/jsx-runtime";
+function TwoArrowsUp() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: "100%",
+      viewBox: "0 0 17 14",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M1 3.75904L3.88111 0.87793M3.88111 0.87793L6.76222 3.75904M3.88111 0.87793L3.88111 12.4024M9.73778 3.75904L12.6189 0.87793M12.6189 0.87793L15.5 3.75904M12.6189 0.87793L12.6189 12.4024",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    }
+  );
+}
+
+export {
+  TwoArrowsUp
+};

package/dist/chunk-BDCKN7K3.js

@@ -0,0 +1,179 @@
+// src/icons/LoadingSpinner.tsx
+import { useId } from "react";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+function LoadingSpinner() {
+  const id = useId();
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: "100%",
+      viewBox: "0 0 17 17",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [
+        /* @__PURE__ */ jsxs("g", { clipPath: `url(#clip0_448_7848)-${id})`, children: [
+          /* @__PURE__ */ jsx("circle", { cx: "8.5", cy: "8.5", r: "7", stroke: "#E6E6E6", strokeWidth: "2" }),
+          /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: "M8.5 15.5C4.63401 15.5 1.5 12.366 1.5 8.5C1.5 4.63401 4.63401 1.5 8.5 1.5",
+              stroke: "black",
+              strokeWidth: "2",
+              strokeLinecap: "round"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "mask",
+            {
+              id: `mask0_448_7848-${id}`,
+              style: { maskType: "alpha" },
+              maskUnits: "userSpaceOnUse",
+              x: "0",
+              y: "0",
+              width: "10",
+              height: "17",
+              children: /* @__PURE__ */ jsx(
+                "path",
+                {
+                  d: "M8.5 15.5C4.63401 15.5 1.5 12.366 1.5 8.5C1.5 4.63401 4.63401 1.5 8.5 1.5",
+                  stroke: "black",
+                  strokeWidth: "2",
+                  strokeLinecap: "round"
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxs("g", { mask: `url(#mask0_448_7848-${id})`, children: [
+            /* @__PURE__ */ jsx("g", { filter: `url(#filter0_f_448_7848)-${id})`, children: /* @__PURE__ */ jsx(
+              "ellipse",
+              {
+                cx: "9",
+                cy: "4",
+                rx: "47",
+                ry: "19",
+                fill: `url(#paint0_radial_448_7848-${id})`
+              }
+            ) }),
+            /* @__PURE__ */ jsx("g", { filter: `url(#filter1_f_448_7848)-${id})`, children: /* @__PURE__ */ jsx(
+              "ellipse",
+              {
+                cx: "9.5",
+                cy: "-6.5",
+                rx: "31.5",
+                ry: "25.5",
+                fill: `url(#paint1_radial_448_7848-${id})`
+              }
+            ) })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("defs", { children: [
+          /* @__PURE__ */ jsxs(
+            "filter",
+            {
+              id: `filter0_f_448_7848-${id}`,
+              x: "-44",
+              y: "-21",
+              width: "106",
+              height: "50",
+              filterUnits: "userSpaceOnUse",
+              colorInterpolationFilters: "sRGB",
+              children: [
+                /* @__PURE__ */ jsx("feFlood", { floodOpacity: "0", result: "BackgroundImageFix" }),
+                /* @__PURE__ */ jsx(
+                  "feBlend",
+                  {
+                    mode: "normal",
+                    in: "SourceGraphic",
+                    in2: "BackgroundImageFix",
+                    result: "shape"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "feGaussianBlur",
+                  {
+                    stdDeviation: "3",
+                    result: "effect1_foregroundBlur_448_7848"
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "filter",
+            {
+              id: `filter1_f_448_7848-${id}`,
+              x: "-28",
+              y: "-38",
+              width: "75",
+              height: "63",
+              filterUnits: "userSpaceOnUse",
+              colorInterpolationFilters: "sRGB",
+              children: [
+                /* @__PURE__ */ jsx("feFlood", { floodOpacity: "0", result: "BackgroundImageFix" }),
+                /* @__PURE__ */ jsx(
+                  "feBlend",
+                  {
+                    mode: "normal",
+                    in: "SourceGraphic",
+                    in2: "BackgroundImageFix",
+                    result: "shape"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "feGaussianBlur",
+                  {
+                    stdDeviation: "3",
+                    result: "effect1_foregroundBlur_448_7848"
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "radialGradient",
+            {
+              id: `paint0_radial_448_7848-${id}`,
+              cx: "0",
+              cy: "0",
+              r: "1",
+              gradientUnits: "userSpaceOnUse",
+              gradientTransform: "translate(9.09573 3.9613) rotate(161.271) scale(31.3334 19.6551)",
+              children: [
+                /* @__PURE__ */ jsx("stop", { stopColor: "#0066FF" }),
+                /* @__PURE__ */ jsx("stop", { offset: "1", stopColor: "#0066FF", stopOpacity: "0" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "radialGradient",
+            {
+              id: `paint1_radial_448_7848-${id}`,
+              cx: "0",
+              cy: "0",
+              r: "1",
+              gradientUnits: "userSpaceOnUse",
+              gradientTransform: "translate(9.56416 -6.55194) rotate(145.825) scale(24.0388 23.0445)",
+              children: [
+                /* @__PURE__ */ jsx("stop", { stopColor: "#FFC700" }),
+                /* @__PURE__ */ jsx("stop", { offset: "1", stopColor: "#BF09FF", stopOpacity: "0" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx("clipPath", { id: `clip0_448_7848-${id}`, children: /* @__PURE__ */ jsx(
+            "rect",
+            {
+              width: "16",
+              height: "16",
+              fill: "white",
+              transform: "translate(0.5 0.5)"
+            }
+          ) })
+        ] })
+      ]
+    }
+  );
+}
+
+export {
+  LoadingSpinner
+};

package/dist/{chunk-P3EUPXFA.js → chunk-BPZ7AV7W.js}

@@ -1,13 +1,13 @@
 import {
   firstChild,
   pxToRems
-} from "./chunk-FCZJILMW.js";
+} from "./chunk-JXXIU52B.js";
 import {
   bp
 } from "./chunk-JSGRNWSB.js";
 import {
   __spreadValues
-} from "./chunk-CIGAQ47A.js";
+} from "./chunk-LOPKRCGI.js";
 
 // src/styles/type.tsx
 import { css, useTheme } from "@emotion/react";

package/dist/chunk-BX32TDWY.js

@@ -0,0 +1,27 @@
+// src/icons/Roadmap.tsx
+import { jsx } from "@emotion/react/jsx-runtime";
+function Roadmap() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: "16",
+      height: "16",
+      viewBox: "0 0 16 16",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M4.66667 7.99996H11.3333M7.33333 11.3333H14M2 4.66663H8.66667",
+          stroke: "black",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    }
+  );
+}
+
+export {
+  Roadmap
+};

package/dist/chunk-C4CFIKAL.js

@@ -0,0 +1,27 @@
+// src/icons/Clock.tsx
+import { jsx } from "@emotion/react/jsx-runtime";
+function Clock() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: "100%",
+      viewBox: "0 0 21 21",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M10.5005 6.42187V10.5H14.5786M10.5005 20.0156C9.23785 20.0156 8.60652 20.0156 8.07651 19.9458C4.41653 19.464 1.53649 16.584 1.05464 12.924C0.984863 12.394 0.984863 11.7626 0.984863 10.5C0.984863 9.23736 0.984863 8.60604 1.05464 8.07602C1.53649 4.41604 4.41653 1.536 8.07651 1.05415C8.60652 0.984375 9.23785 0.984375 10.5005 0.984375C11.7631 0.984375 12.3945 0.984375 12.9245 1.05415C16.5845 1.536 19.4645 4.41604 19.9463 8.07602C20.0161 8.60604 20.0161 9.23736 20.0161 10.5C20.0161 11.7626 20.0161 12.394 19.9463 12.924C19.4645 16.584 16.5845 19.464 12.9245 19.9458C12.3945 20.0156 11.7631 20.0156 10.5005 20.0156Z",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    }
+  );
+}
+
+export {
+  Clock
+};

package/dist/chunk-C5PYKGR6.js

@@ -0,0 +1,34 @@
+import {
+  invertStrokeColor
+} from "./chunk-VI6WTKMV.js";
+
+// src/icons/ArrowCircle.tsx
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+function ArrowCircle() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: "100%",
+      viewBox: "0 0 31 31",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [
+        /* @__PURE__ */ jsx("circle", { cx: "15", cy: "15", r: "15", fill: "currentColor" }),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            className: invertStrokeColor,
+            d: "M21 18V9M21 9H12M21 9L9.5 20.5",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        )
+      ]
+    }
+  );
+}
+
+export {
+  ArrowCircle
+};

package/dist/{chunk-QWAHK2QG.js → chunk-C7TNFU3D.js}

@@ -1,9 +1,9 @@
 import {
   Heading
-} from "./chunk-P3EUPXFA.js";
+} from "./chunk-BPZ7AV7W.js";
 import {
   ButtonRowContainer
-} from "./chunk-DFYHIUYN.js";
+} from "./chunk-CY3LZRBR.js";
 import {
   z
 } from "./chunk-55OQPFLF.js";
@@ -11,7 +11,7 @@ import {
   flexCenter,
   overflowAutoWithoutScrollbars,
   size
-} from "./chunk-FCZJILMW.js";
+} from "./chunk-JXXIU52B.js";
 import {
   cardBorderRadiusPx,
   darkGradientBg,
@@ -19,10 +19,10 @@ import {
   standardBorderRadius,
   standardCardShadow,
   standardContentInset
-} from "./chunk-JK4BP73A.js";
+} from "./chunk-52POF2W4.js";
 import {
   themeOr
-} from "./chunk-2VBDEO6M.js";
+} from "./chunk-ZFDYANKZ.js";
 import {
   bp,
   useBreakpoints

package/dist/chunk-CB2PBQ2G.js

@@ -0,0 +1,35 @@
+import {
+  LabelModerate
+} from "./chunk-NMJGBK5W.js";
+import {
+  standardBorderRadius
+} from "./chunk-52POF2W4.js";
+import {
+  getColor,
+  isLight
+} from "./chunk-ZFDYANKZ.js";
+
+// src/components/Badge.tsx
+import styled from "@emotion/styled";
+import { jsx } from "@emotion/react/jsx-runtime";
+function Badge({ text, color, ml = 0, mr = 0 }) {
+  return text ? /* @__PURE__ */ jsx(StyledBadge, { color, ml, children: /* @__PURE__ */ jsx(LabelModerate, { size: "Small", color, children: text }) }) : null;
+}
+var badgeVPadding = 2;
+var StyledBadge = styled.span`
+  ${standardBorderRadius(4)}
+  ${({ ml }) => ml === 0 ? "" : `margin-left: ${ml}px;`}
+  padding: ${badgeVPadding}px 6px;
+  background-color: ${({ theme, color }) => {
+  if (color === "danger") {
+    return getColor(theme, "red42a10");
+  } else {
+    return isLight(theme) ? theme.c05Neutral : theme.c15Neutral;
+  }
+}};
+`;
+
+export {
+  Badge,
+  badgeVPadding
+};

package/dist/chunk-CJDIDKDD.js

@@ -0,0 +1,29 @@
+// src/icons/BitcoinBOnRoundedSquare.tsx
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+function BitcoinBOnRoundedSquare() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: "100%",
+      viewBox: "0 0 16 16",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [
+        /* @__PURE__ */ jsx("rect", { width: "16", height: "16", rx: "2", fill: "#F7931A" }),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M6.02512 4.51426H4.66602M6.02512 4.51426V7.88244M6.02512 4.51426H6.55219M6.02512 7.88244H9.33688M6.02512 7.88244V11.2506M9.33688 7.88244C10.5433 7.88244 11.2676 8.63643 11.2676 9.56653C11.2676 10.4966 10.5433 11.2506 9.33688 11.2506M9.33688 7.88244C10.5433 7.88244 11.2676 7.12845 11.2676 6.19835C11.2676 5.26826 10.5433 4.51426 9.33688 4.51426M9.33688 11.2506V12.8337M9.33688 11.2506H6.55219M6.02512 11.2506H4.66602M6.02512 11.2506H6.55219M9.33688 4.51426V3.16699M9.33688 4.51426H6.55219M6.55219 3.16699V4.51426M6.55219 11.2506V12.8337",
+            stroke: "white",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        )
+      ]
+    }
+  );
+}
+
+export {
+  BitcoinBOnRoundedSquare
+};

package/dist/chunk-CKOW6ME2.js

@@ -0,0 +1,27 @@
+// src/icons/RightArrow.tsx
+import { jsx } from "@emotion/react/jsx-runtime";
+function RightArrow() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: "100%",
+      viewBox: "0 0 12 10",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M1.01704 4.99993L10.9844 4.99993M10.9844 4.99993L6.98438 0.809448M10.9844 4.99993L6.98437 9.1904",
+          stroke: "currentColor",
+          strokeWidth: "1.33333",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    }
+  );
+}
+
+export {
+  RightArrow
+};

package/dist/chunk-CPHTE26N.js

@@ -0,0 +1,37 @@
+// src/icons/LogoOnCircle.tsx
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+function LogoOnCircle() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: "100%",
+      viewBox: "0 0 30 30",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [
+        /* @__PURE__ */ jsxs("g", { clipPath: "url(#clip0_469_6261)", children: [
+          /* @__PURE__ */ jsx("circle", { cx: "15", cy: "15", r: "15", fill: "#FFF14E" }),
+          /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: "M14.901 15.6596H8.94529L17.3565 8.29803L15.7099 11.8657H16.6535L19.8216 5L6.66797 16.5166H14.5062L14.901 15.6596Z",
+              fill: "black"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: "M14.9638 13.4834L14.569 14.3404H20.5247L12.1135 21.702L13.7601 18.1343H12.8165L12.1713 19.5354L9.64844 25L22.802 13.4834H14.9638Z",
+              fill: "black"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", { id: "clip0_469_6261", children: /* @__PURE__ */ jsx("rect", { width: "30", height: "30", fill: "white" }) }) })
+      ]
+    }
+  );
+}
+
+export {
+  LogoOnCircle
+};

package/dist/{chunk-DFYHIUYN.js → chunk-CY3LZRBR.js}

@@ -1,18 +1,18 @@
 import {
   Button
-} from "./chunk-75VDSSXM.js";
+} from "./chunk-GHIYWOAC.js";
 import {
   overflowAutoWithoutScrollbars
-} from "./chunk-FCZJILMW.js";
+} from "./chunk-JXXIU52B.js";
 import {
   standardContentInset
-} from "./chunk-JK4BP73A.js";
+} from "./chunk-52POF2W4.js";
 import {
   bp
 } from "./chunk-JSGRNWSB.js";
 import {
   __spreadValues
-} from "./chunk-CIGAQ47A.js";
+} from "./chunk-LOPKRCGI.js";
 
 // src/components/ButtonRow.tsx
 import styled from "@emotion/styled";

package/dist/{chunk-5POPBNPS.js → chunk-CZH4OCQY.js}

@@ -1,20 +1,29 @@
+import {
+  renderTypography
+} from "./chunk-44UNWWP3.js";
 import {
   Icon
-} from "./chunk-RWIZ7Q74.js";
+} from "./chunk-UAFWDZRG.js";
 
 // src/components/TextIconAligner.tsx
 import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 function TextIconAligner({
-  text,
+  content,
+  typography,
   rightIcon,
   leftIcon,
   onClick
 }) {
+  const nodes = renderTypography((typography == null ? void 0 : typography.type) || "Body", {
+    content,
+    size: (typography == null ? void 0 : typography.size) || "Small",
+    color: (typography == null ? void 0 : typography.color) || "inherit"
+  });
   const leftIconNode = leftIcon ? /* @__PURE__ */ jsx(
     Icon,
     {
       name: leftIcon.name,
-      width: leftIcon.lg ? 16 : 12,
+      width: leftIcon.width ? leftIcon.width : 12,
       mr: leftIcon.mr || 6,
       color: leftIcon.color
     }
@@ -23,7 +32,7 @@ function TextIconAligner({
     Icon,
     {
       name: rightIcon.name,
-      width: rightIcon.lg ? 16 : 12,
+      width: rightIcon.width ? rightIcon.width : 12,
       ml: rightIcon.ml || 6,
       color: rightIcon.color
     }
@@ -39,7 +48,7 @@ function TextIconAligner({
       onClick,
       children: [
         leftIconNode,
-        text,
+        nodes,
         rightIconNode
       ]
     }

package/dist/chunk-DW6LFUI2.js

@@ -0,0 +1,27 @@
+// src/icons/ArrowCircleTier3.tsx
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+function ArrowCircleTier3() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: "100%",
+      viewBox: "0 0 28 32",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [
+        /* @__PURE__ */ jsx("circle", { cx: "14", cy: "14.9639", r: "14", fill: "white" }),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M19.7144 18.998L19.4944 10.298L10.7944 10.098L10.8144 11.998L16.6144 11.958L8.73438 19.838L9.97438 21.078L17.8344 13.218L17.7944 18.978L19.7144 18.998Z",
+            fill: "#0048F7"
+          }
+        )
+      ]
+    }
+  );
+}
+
+export {
+  ArrowCircleTier3
+};

package/dist/chunk-E3FGOYEJ.js

@@ -0,0 +1,8 @@
+// src/components/Banner/constants.ts
+var bannerTimingSecs = 0.2;
+var bannerTiming = `${bannerTimingSecs}s ease`;
+
+export {
+  bannerTimingSecs,
+  bannerTiming
+};

package/dist/{chunk-4TFRLWCC.js → chunk-E6XGSPA6.js}

@@ -1,23 +1,13 @@
 import {
-  select
-} from "./chunk-YMNSXZ5D.js";
+  isReactNodeWithChildren
+} from "./chunk-2NT4RAQ3.js";
 import {
-  colors
-} from "./chunk-2VBDEO6M.js";
-import {
-  getTypographyString
-} from "./chunk-E4EXM4SY.js";
+  StyledHeadline
+} from "./chunk-4YN25H5H.js";
 
-// src/styles/fonts/typography/Headline.tsx
-import styled from "@emotion/styled";
+// src/components/documentation/DocsHeadline.tsx
 import React from "react";
 import { jsx } from "@emotion/react/jsx-runtime";
-var HEADINGS = ["h1", "h2", "h3", "h4", "h5", "h6"];
-function isReactNodeWithChildren(node) {
-  return Boolean(
-    node && React.isValidElement(node) && typeof node.props === "object" && node.props !== null && "children" in node.props && node.props.children !== void 0
-  );
-}
 var getHeadlineText = (element) => {
   if (typeof element === "string") {
     return element;
@@ -53,37 +43,27 @@ var getHeaderId = (element) => {
 var toKebabCase = (str) => {
   return str.replaceAll(" ", "-").toLowerCase();
 };
-var Headline = ({
+var DocsHeadline = ({
   children,
   color,
-  size = "Medium" /* Medium */,
+  size = "Medium",
   heading = "h1"
 }) => {
   const id = toKebabCase(getHeaderId(children));
-  return /* @__PURE__ */ jsx(StyledHeadline, { as: heading, id, size, color, children });
+  return /* @__PURE__ */ jsx(
+    StyledHeadline,
+    {
+      as: heading,
+      id,
+      size,
+      colorProp: color,
+      displayProp: "block",
+      children
+    }
+  );
 };
-var StyledHeadline = styled.span`
-  color: ${({ theme, color }) => `${color || theme.text || colors.black}`};
-  ${({ theme, size }) => {
-  return size ? getTypographyString(theme.typography[theme.app].Headline[size]) : "";
-}}
-
-  * {
-    color: ${({ theme, color }) => `${color || theme.text || colors.black}`};
-    ${({ theme, size }) => {
-  return size ? getTypographyString(theme.typography[theme.app].Headline[size]) : "";
-}}
-  }
-`;
-function headlineSelector(heading) {
-  return `${heading}${select(StyledHeadline)}`;
-}
-var ALL_HEADLINE_SELECTORS = HEADINGS.map(headlineSelector).join(",");
 
 export {
-  HEADINGS,
   getHeadlineText,
-  Headline,
-  headlineSelector,
-  ALL_HEADLINE_SELECTORS
+  DocsHeadline
 };