@lightsparkdev/ui 0.0.7 → 0.0.9

package/dist/chunk-IPAXAP6K.js

@@ -0,0 +1,119 @@
+import {
+  z
+} from "./chunk-55OQPFLF.js";
+
+// src/components/GradientCardHeader.tsx
+import styled from "@emotion/styled";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+function GradientCardHeader(props) {
+  return /* @__PURE__ */ jsxs(CardHeaderWrapper, { children: [
+    /* @__PURE__ */ jsx(Gradients, {}),
+    /* @__PURE__ */ jsxs("div", { children: [
+      props.status,
+      /* @__PURE__ */ jsx(CardHeaderTitle, { children: props.title })
+    ] }),
+    props.children
+  ] });
+}
+var CardHeaderWrapper = styled.div`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  padding: 40px 32px 24px 32px;
+  background-color: black;
+  color: white;
+  height: 264px;
+`;
+var CardHeaderTitle = styled.h3`
+  font-size: 21px;
+  font-weight: 800;
+  color: white;
+  margin: 0;
+  z-index: ${z.headerContainer} - 1;
+  position: relative;
+`;
+var Gradients = () => {
+  return /* @__PURE__ */ jsxs("div", { style: { position: "absolute", top: 0, left: 0, right: 0, bottom: 0 }, children: [
+    /* @__PURE__ */ jsx(BackgroundGradients, {}),
+    /* @__PURE__ */ jsx(AccentGradients, {})
+  ] });
+};
+var BackgroundGradients = styled.div`
+  &:before,
+  &:after {
+    content: "";
+    position: absolute;
+    margin: auto;
+    filter: blur(38.5px);
+  }
+  &:before {
+    z-index: ${z.walletActionPreviewTopGradient};
+    right: -280px;
+    top: -340px;
+    width: 704px;
+    height: 619px;
+    background: radial-gradient(
+      31.57% 32.06% at 50.1% 49.9%,
+      #0032ff 0%,
+      rgb(0 121 255 / 31%) 97%,
+      rgba(0, 102, 255, 0.05) 100%
+    );
+  }
+  &:after {
+    z-index: ${z.walletActionPreviewTopGradient - 1};
+    width: 636px;
+    height: 552px;
+    top: -400px;
+    right: -280px;
+    background: radial-gradient(
+      31.57% 32.06% at 50.1% 49.9%,
+      rgb(255 114 104) 0%,
+      rgb(191 9 255 / 14%) 90%,
+      rgb(191 9 255 / 5%) 100%
+    );
+  }
+`;
+var AccentGradients = styled.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  right: 0;
+  bottom: 0;
+  z-index: ${z.walletActionPreviewTopGradient - 1};
+  &:before,
+  &:after {
+    content: "";
+    position: absolute;
+    margin: auto;
+    filter: blur(38.5px);
+  }
+  &:before {
+    right: -70px;
+    top: -100px;
+    width: 169px;
+    height: 323px;
+    background: radial-gradient(
+      31.57% 32.06% at 50.1% 49.9%,
+      #ff8c28,
+      rgba(191, 9, 255, 0.1) 100%
+    );
+  }
+  &:after {
+    right: -22px;
+    top: -140px;
+    width: 225px;
+    height: 190px;
+    background: radial-gradient(
+      41.57% 62.06% at 53.1% 49.9%,
+      rgb(255 119 0),
+      rgb(255 106 9 / 55%) 100%
+    );
+  }
+`;
+
+export {
+  GradientCardHeader
+};

package/dist/{chunk-NGS4OSWT.js → chunk-J4FJQ3FN.js}

@@ -1,6 +1,6 @@
 import {
   Icon
-} from "./chunk-NZJCJJH5.js";
+} from "./chunk-RWIZ7Q74.js";
 
 // src/components/Loading.tsx
 import styled from "@emotion/styled";

package/dist/{chunk-RFGKH3R6.js → chunk-JK4BP73A.js}

@@ -6,21 +6,52 @@ import {
 import {
   bp
 } from "./chunk-JSGRNWSB.js";
-import {
-  z
-} from "./chunk-CLU2FRJZ.js";
 
 // src/styles/common.tsx
 import { css } from "@emotion/react";
 import styled from "@emotion/styled";
-import { Tooltip } from "react-tooltip";
 var rootFontSizePx = 12;
 var rootFontSizeRems = rootFontSizePx / 16;
 var standardLineHeightEms = 1.21;
 var headingContentMarginPx = 30;
-var standardContentInsetPx = 32;
-var standardContentInsetMdPx = 24;
-var standardContentInsetSmPx = 16;
+function buildStandardContentInset(smPx, minSmMaxLgPx, lgPx) {
+  const smCSS = css`
+    ${bp.sm(`
+      margin-left: auto;
+      margin-right: auto;
+      width: calc(100% - ${smPx * 2}px);
+    `)}
+  `;
+  const minSmMaxLgCSS = css`
+    ${bp.minSmMaxLg(`
+      margin-left: auto;
+      margin-right: auto;
+      width: calc(100% - ${minSmMaxLgPx * 2}px);
+    `)}
+  `;
+  const lgCSS = css`
+    ${bp.lg(`
+      margin-left: auto;
+      margin-right: auto;
+      width: calc(100% - ${lgPx * 2}px);
+      max-width: 1280px;
+    `)}
+  `;
+  return {
+    smPx,
+    minSmMaxLgPx,
+    lgPx,
+    smCSS,
+    minSmMaxLgCSS,
+    lgCSS,
+    css: css`
+      ${lgCSS}
+      ${smCSS}
+      ${minSmMaxLgCSS}
+    `
+  };
+}
+var standardContentInset = buildStandardContentInset(16, 24, 32);
 var cardBorderRadiusPx = 16;
 var standardBorderRadius = (radius) => {
   const borderRadiusPx = Array.isArray(radius) ? radius.map((r) => `${r}px`).join(" ") : `${radius}px`;
@@ -28,27 +59,6 @@ var standardBorderRadius = (radius) => {
     border-radius: ${borderRadiusPx};
   `;
 };
-var smContentInset = css`
-  ${bp.sm(`
-    margin-left: auto;
-    margin-right: auto;
-    width: calc(100% - ${standardContentInsetSmPx * 2}px);
-  `)}
-`;
-var minSmMaxLgContentInset = css`
-  ${bp.minSmMaxLg(`
-    width: calc(100% - ${standardContentInsetMdPx * 2}px);
-  `)}
-`;
-var standardContentInset = css`
-  margin-left: auto;
-  margin-right: auto;
-  width: calc(100% - ${standardContentInsetPx * 2}px);
-  max-width: 1280px;
-
-  ${smContentInset}
-  ${minSmMaxLgContentInset}
-`;
 var standardCardShadow = css`
   box-shadow:
     0px 4px 10px 0px rgba(0, 0, 0, 0.08),
@@ -91,9 +101,6 @@ var Subtext = styled.div`
 var darkGradientBg = css`
   background: ${darkGradient};
 `;
-var StyledTooltip = styled(Tooltip)`
-  z-index: ${z.modalOverlay};
-`;
 var overlaySurfaceBorderColor = ({
   theme,
   important = false
@@ -125,14 +132,9 @@ export {
   rootFontSizeRems,
   standardLineHeightEms,
   headingContentMarginPx,
-  standardContentInsetPx,
-  standardContentInsetMdPx,
-  standardContentInsetSmPx,
+  standardContentInset,
   cardBorderRadiusPx,
   standardBorderRadius,
-  smContentInset,
-  minSmMaxLgContentInset,
-  standardContentInset,
   standardCardShadow,
   pageBorderRadiusPx,
   pageBorderRadius,
@@ -143,7 +145,6 @@ export {
   subtext,
   Subtext,
   darkGradientBg,
-  StyledTooltip,
   overlaySurfaceBorderColor,
   overlaySurface,
   mcBold,

package/dist/{chunk-T33SBHYI.js → chunk-KMR5C25B.js}

@@ -4,7 +4,7 @@ import {
 import {
   rootFontSizeRems,
   standardLineHeightEms
-} from "./chunk-RFGKH3R6.js";
+} from "./chunk-JK4BP73A.js";
 import {
   useThemeBg
 } from "./chunk-2VBDEO6M.js";
@@ -110,6 +110,8 @@ function GlobalStyles() {
     :root {
       ${cssVars.docHeight}: 100vh;
       --rt-opacity: 1 !important;
+      --rt-transition-show-delay: 0.15s !important;
+      --rt-transition-closing-delay: 0.2s !important;
     }
 
     html {

package/dist/{chunk-JYWYEOM6.js → chunk-NFSAJ5GJ.js}

@@ -1,12 +1,12 @@
 import {
   Button
-} from "./chunk-FKETYVPP.js";
+} from "./chunk-ZANLDY2W.js";
 import {
   overflowAutoWithoutScrollbars
-} from "./chunk-UO6U7AYM.js";
+} from "./chunk-FCZJILMW.js";
 import {
-  standardContentInsetSmPx
-} from "./chunk-RFGKH3R6.js";
+  standardContentInset
+} from "./chunk-JK4BP73A.js";
 import {
   bp
 } from "./chunk-JSGRNWSB.js";
@@ -23,7 +23,9 @@ function ButtonRow({
   smSticky = true,
   headerHeight = 0
 }) {
-  return /* @__PURE__ */ jsx(ButtonRowContainer, { smSticky, headerHeight, children: /* @__PURE__ */ jsx(StyledButtonRow, { className, children: buttons.map((button, idx) => /* @__PURE__ */ jsx(Button, __spreadValues({}, button), idx)) }) });
+  return /* @__PURE__ */ jsx(ButtonRowContainer, { smSticky, headerHeight, children: /* @__PURE__ */ jsx(StyledButtonRow, { className, children: buttons.map(
+    (button, idx) => button === "divider" ? /* @__PURE__ */ jsx(ButtonRowDivider, {}, idx) : /* @__PURE__ */ jsx(Button, __spreadValues({}, button), idx)
+  ) }) });
 }
 var ButtonRowContainer = styled.div`
   max-width: 100%;
@@ -35,9 +37,9 @@ var ButtonRowContainer = styled.div`
             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);
+            margin-left: -${standardContentInset.smPx}px;
+            width: calc(100% + ${standardContentInset.smPx * 2}px);
+            max-width: calc(100% + ${standardContentInset.smPx * 2}px);
             z-index: 2;` : `position: relative;`}
         z-index: 2;
         &:before {
@@ -53,6 +55,11 @@ var ButtonRowContainer = styled.div`
       `
 )}
 `;
+var ButtonRowDivider = styled.div`
+  border-left: 1px #d9d9d9 solid;
+  margin-left: 16px;
+  padding-left: 16px;
+`;
 var StyledButtonRow = styled.div`
   ${overflowAutoWithoutScrollbars}
   background: ${({ theme }) => theme.bg};
@@ -65,12 +72,18 @@ var StyledButtonRow = styled.div`
     margin-left: 8px;
   }
 
+  & ${ButtonRowDivider} + button,
+  & ${ButtonRowDivider} + a {
+    margin-left: 0;
+  }
+
   ${bp.sm(`
-    padding: 12px;
+    padding: ${standardContentInset.smPx}px;
   `)}
 `;
 
 export {
   ButtonRow,
-  ButtonRowContainer
+  ButtonRowContainer,
+  StyledButtonRow
 };

package/dist/{chunk-G2PZZFJL.js → chunk-NM7UW54G.js}

@@ -1,42 +1,41 @@
 import {
   toReactNodes
-} from "./chunk-TAI352I3.js";
+} from "./chunk-VE7J2N47.js";
 import {
   useLiveRef
 } from "./chunk-NBCCPGA4.js";
 import {
   ProgressBar
-} from "./chunk-RTUZVKPK.js";
+} from "./chunk-E3AOYBY5.js";
 import {
   Button
-} from "./chunk-FKETYVPP.js";
+} from "./chunk-ZANLDY2W.js";
 import {
   select
 } from "./chunk-YMNSXZ5D.js";
+import {
+  UnstyledButton
+} from "./chunk-3GS5EFXV.js";
+import {
+  z
+} from "./chunk-55OQPFLF.js";
 import {
   overflowAutoWithoutScrollbars,
   pxToRems
-} from "./chunk-UO6U7AYM.js";
-import {
-  UnstyledButton
-} from "./chunk-IQFU7CM5.js";
+} from "./chunk-FCZJILMW.js";
 import {
   Icon
-} from "./chunk-NZJCJJH5.js";
+} from "./chunk-RWIZ7Q74.js";
 import {
   overlaySurface,
-  smContentInset,
   standardBorderRadius,
-  standardContentInsetSmPx,
+  standardContentInset,
   standardFocusOutline
-} from "./chunk-RFGKH3R6.js";
+} from "./chunk-JK4BP73A.js";
 import {
   bp,
   useBreakpoints
 } from "./chunk-JSGRNWSB.js";
-import {
-  z
-} from "./chunk-CLU2FRJZ.js";
 
 // src/components/Modal.tsx
 import styled from "@emotion/styled";
@@ -57,7 +56,7 @@ function Modal({
   submitDisabled,
   submitLoading,
   submitText,
-  cancelText,
+  cancelText = "Cancel",
   firstFocusRef,
   nonDismissable = false,
   autoFocus = true,
@@ -185,16 +184,16 @@ function Modal({
             title ? /* @__PURE__ */ jsx("h4", { children: title }) : null,
             formattedDescription ? /* @__PURE__ */ jsx(Description, { children: formattedDescription }) : null,
             /* @__PURE__ */ jsx("div", { children }),
-            onSubmit ? /* @__PURE__ */ jsxs(ModalButtonRow, { children: [
+            onSubmit || onCancel ? /* @__PURE__ */ jsxs(ModalButtonRow, { children: [
               !isSm && !cancelHidden && /* @__PURE__ */ jsx(
                 Button,
                 {
                   disabled: cancelDisabled,
                   onClick: onClickCancel,
-                  text: cancelText != null ? cancelText : "Cancel"
+                  text: cancelText
                 }
               ),
-              /* @__PURE__ */ jsx(
+              onSubmit && /* @__PURE__ */ jsx(
                 Button,
                 {
                   disabled: submitDisabled,
@@ -204,7 +203,7 @@ function Modal({
                   type: "submit"
                 }
               ),
-              isSm && !cancelHidden && /* @__PURE__ */ jsx(Button, { onClick: onClose, text: "Cancel" })
+              isSm && !cancelHidden && /* @__PURE__ */ jsx(Button, { onClick: onClose, text: cancelText })
             ] }) : null
           ] })
         ] })
@@ -247,7 +246,7 @@ var ModalContainer = styled.div`
   justify-content: center;
   align-items: center;
   color: ${({ theme }) => theme.text};
-  padding-top: ${standardContentInsetSmPx}px;
+  padding-top: ${standardContentInset.smPx}px;
 `;
 var contentTopMarginPx = 24;
 var Description = styled.div`
@@ -260,6 +259,7 @@ var Description = styled.div`
 var ModalButtonRow = styled.div`
   margin-top: 32px;
   ${bp.minSm(`display: flex;`)}
+  gap: 10px;
 
   button {
     width: 50%;
@@ -272,14 +272,11 @@ var ModalButtonRow = styled.div`
     ${bp.sm(`
       margin-top: 16px;
     `)}
-    ${bp.minSm(`
-      margin-left: 10px;
-    `)}
   }
 `;
 var ModalContent = styled.div`
   ${overflowAutoWithoutScrollbars}
-  ${smContentInset}
+  ${standardContentInset.smCSS}
   ${standardBorderRadius(16)}
   ${(props) => props.ghost ? "" : overlaySurface}
   pointer-events: auto;

package/dist/{chunk-M56R3RJ7.js → chunk-OGSDZTHM.js}

@@ -50,19 +50,23 @@ function Link({
   blue = false,
   newTab = false
 }) {
-  if (!isString(to) && !externalLink) {
-    throw new Error("Link must have either `to` or `externalLink` defined");
+  if (!isString(to) && !externalLink && !onClick) {
+    throw new Error(
+      "Link must have either `to` or `externalLink` or `onClick` defined"
+    );
   }
   let toStr;
   if (isString(to)) {
     toStr = replaceParams(to, params);
     toStr += hash ? `#${hash}` : "";
-  } else {
+  } else if (externalLink) {
     const definedExternalLink = externalLink;
     if (!definedExternalLink.startsWith("http")) {
       throw new Error("Link's externalLink must start with http");
     }
     toStr = definedExternalLink;
+  } else {
+    toStr = "#";
   }
   return /* @__PURE__ */ jsx(
     RLink,

package/dist/chunk-P3EUPXFA.js

@@ -0,0 +1,150 @@
+import {
+  firstChild,
+  pxToRems
+} from "./chunk-FCZJILMW.js";
+import {
+  bp
+} from "./chunk-JSGRNWSB.js";
+import {
+  __spreadValues
+} from "./chunk-CIGAQ47A.js";
+
+// src/styles/type.tsx
+import { css, useTheme } from "@emotion/react";
+import styled from "@emotion/styled";
+import { jsx } from "@emotion/react/jsx-runtime";
+var defaultHeadingSizes = {
+  h1: {
+    size: 32,
+    sizeSm: 21
+  },
+  h2: {
+    size: 24,
+    sizeSm: 18
+  },
+  h3: {
+    size: 21,
+    sizeSm: 18
+  },
+  h4: {
+    size: 14,
+    sizeSm: 14
+  }
+};
+var defaultHeadingMargins = {
+  h1: {
+    mt: 24,
+    mb: 24,
+    mtSm: 24,
+    mbSm: 24
+  },
+  h2: {
+    mt: 24,
+    mb: 24,
+    mtSm: 24,
+    mbSm: 24
+  },
+  h3: {
+    mt: 24,
+    mb: 24,
+    mtSm: 24,
+    mbSm: 24
+  },
+  h4: {
+    mt: 16,
+    mb: 16,
+    mtSm: 16,
+    mbSm: 16
+  }
+};
+var baseHeading = ({ mt, mb, mtSm, mbSm, theme }) => css`
+  line-height: 1.214em;
+
+  margin-bottom: ${mb}px;
+  margin-top: ${mt}px;
+
+  ${bp.sm(`
+    margin-top: ${mtSm}px;
+    margin-bottom: ${mbSm}px;
+  `)}
+`;
+var firstChildStyles = firstChild(`margin-top: 0;`);
+var headings = {
+  h1: styled.h1`
+    ${(props) => baseHeading(props)}
+    ${firstChildStyles}
+
+    font-size: ${pxToRems(defaultHeadingSizes.h1.size)};
+    font-weight: ${({ light }) => light ? 400 : 800}};
+    ${bp.sm(`
+      font-size: ${pxToRems(defaultHeadingSizes.h1.sizeSm)};
+    `)}
+  `,
+  h2: styled.h2`
+    ${(props) => baseHeading(props)}
+    ${firstChildStyles}
+
+    font-size: ${pxToRems(defaultHeadingSizes.h2.size)};
+    font-weight: ${({ light }) => light ? 400 : 700}};
+    ${bp.sm(`
+      font-size: ${pxToRems(defaultHeadingSizes.h2.sizeSm)};
+    `)}
+  `,
+  h3: styled.h3`
+    ${(props) => baseHeading(props)}
+    ${firstChildStyles}
+
+    font-size: ${pxToRems(defaultHeadingSizes.h3.size)};
+    font-weight: ${({ light }) => light ? 400 : 700}};
+    ${bp.sm(`
+      font-size: ${pxToRems(defaultHeadingSizes.h3.sizeSm)};
+    `)}
+  `,
+  h4: styled.h4`
+    ${(props) => baseHeading(props)}
+    ${firstChildStyles}
+
+    font-size: ${pxToRems(defaultHeadingSizes.h4.size)};
+    font-weight: ${({ light }) => light ? 400 : 600}};
+    ${bp.sm(`
+      font-size: ${pxToRems(defaultHeadingSizes.h4.sizeSm)};
+    `)}
+  `
+};
+function Heading({
+  children,
+  type = "h2",
+  id,
+  mt = defaultHeadingMargins[type].mt,
+  mb = defaultHeadingMargins[type].mb,
+  mtSm = defaultHeadingMargins[type].mtSm,
+  mbSm = defaultHeadingMargins[type].mbSm,
+  m0 = false,
+  light = false
+}) {
+  const StyledHeading = headings[type];
+  const theme = useTheme();
+  const heading = /* @__PURE__ */ jsx(
+    StyledHeading,
+    {
+      id,
+      mt: m0 ? 0 : mt,
+      mb: m0 ? 0 : mb,
+      mtSm: m0 ? 0 : mtSm,
+      mbSm: m0 ? 0 : mbSm,
+      light,
+      theme,
+      children: id ? /* @__PURE__ */ jsx("a", { href: `#${id}`, css: { color: "inherit" }, children }) : children
+    }
+  );
+  return heading;
+}
+function headingWithDefaults(defaultProps) {
+  return (props) => /* @__PURE__ */ jsx(Heading, __spreadValues(__spreadValues({}, defaultProps), props));
+}
+
+export {
+  headings,
+  Heading,
+  headingWithDefaults
+};