@lightsparkdev/ui 0.0.7 → 0.0.9

package/dist/styles/fonts/typography/Article.js

@@ -1,7 +1,7 @@
 "use client";
 import {
   Article
-} from "../../../chunk-VBWTKANQ.js";
+} from "../../../chunk-Y37DCY7Y.js";
 import "../../../chunk-FHNYQLMF.js";
 import "../../../chunk-LD5LZXUP.js";
 import "../../../chunk-BCFRW7CV.js";
@@ -9,15 +9,14 @@ import "../../../chunk-QGGOMPHZ.js";
 import "../../../chunk-4TFRLWCC.js";
 import "../../../chunk-YMNSXZ5D.js";
 import "../../../chunk-3XSQV5U4.js";
-import "../../../chunk-UO6U7AYM.js";
-import "../../../chunk-K7D7A34K.js";
-import "../../../chunk-NZJCJJH5.js";
+import "../../../chunk-FCZJILMW.js";
+import "../../../chunk-XP2MX2AA.js";
+import "../../../chunk-RWIZ7Q74.js";
 import "../../../chunk-LAMQKQU3.js";
-import "../../../chunk-RFGKH3R6.js";
+import "../../../chunk-JK4BP73A.js";
 import "../../../chunk-2VBDEO6M.js";
 import "../../../chunk-E4EXM4SY.js";
 import "../../../chunk-JSGRNWSB.js";
-import "../../../chunk-CLU2FRJZ.js";
 import "../../../chunk-CIGAQ47A.js";
 export {
   Article

package/dist/styles/fonts/typography/index.cjs

@@ -70,7 +70,6 @@ var import_styled2 = __toESM(require("@emotion/styled"), 1);
 // src/styles/common.tsx
 var import_react4 = require("@emotion/react");
 var import_styled = __toESM(require("@emotion/styled"), 1);
-var import_react_tooltip = require("react-tooltip");
 
 // src/styles/breakpoints.tsx
 var import_react = require("@emotion/react");
@@ -1288,65 +1287,53 @@ function hexToRGB(hex) {
   ] : [0, 0, 0];
 }
 
-// src/styles/z-index.tsx
-var z = {
-  card: 1,
-  fieldError: 1,
-  textInput: 2,
-  select: 3,
-  selectFocused: 4,
-  walletActionPreviewTopGradient: 1,
-  headerContainer: 99,
-  smBanner: 99,
-  headerTop: 100,
-  navMenu: 100,
-  smNavMenu: 100,
-  navAction: 101,
-  smNavAction: 100,
-  // keep under navDropdown
-  tooltip: 160,
-  notificationBanner: 170,
-  qrReaderVideo: 180,
-  qrReaderOverlay: 181,
-  modalOverlay: 190,
-  modalContainer: 191,
-  dropdown: 192,
-  toast: 200
-};
-
 // src/styles/common.tsx
 var rootFontSizePx = 12;
 var rootFontSizeRems = rootFontSizePx / 16;
-var standardContentInsetPx = 32;
-var standardContentInsetMdPx = 24;
-var standardContentInsetSmPx = 16;
+function buildStandardContentInset(smPx, minSmMaxLgPx, lgPx) {
+  const smCSS = import_react4.css`
+    ${bp.sm(`
+      margin-left: auto;
+      margin-right: auto;
+      width: calc(100% - ${smPx * 2}px);
+    `)}
+  `;
+  const minSmMaxLgCSS = import_react4.css`
+    ${bp.minSmMaxLg(`
+      margin-left: auto;
+      margin-right: auto;
+      width: calc(100% - ${minSmMaxLgPx * 2}px);
+    `)}
+  `;
+  const lgCSS = import_react4.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: import_react4.css`
+      ${lgCSS}
+      ${smCSS}
+      ${minSmMaxLgCSS}
+    `
+  };
+}
+var standardContentInset = buildStandardContentInset(16, 24, 32);
 var standardBorderRadius = (radius) => {
   const borderRadiusPx = Array.isArray(radius) ? radius.map((r) => `${r}px`).join(" ") : `${radius}px`;
   return `
     border-radius: ${borderRadiusPx};
   `;
 };
-var smContentInset = import_react4.css`
-  ${bp.sm(`
-    margin-left: auto;
-    margin-right: auto;
-    width: calc(100% - ${standardContentInsetSmPx * 2}px);
-  `)}
-`;
-var minSmMaxLgContentInset = import_react4.css`
-  ${bp.minSmMaxLg(`
-    width: calc(100% - ${standardContentInsetMdPx * 2}px);
-  `)}
-`;
-var standardContentInset = import_react4.css`
-  margin-left: auto;
-  margin-right: auto;
-  width: calc(100% - ${standardContentInsetPx * 2}px);
-  max-width: 1280px;
-
-  ${smContentInset}
-  ${minSmMaxLgContentInset}
-`;
 var standardCardShadow = import_react4.css`
   box-shadow:
     0px 4px 10px 0px rgba(0, 0, 0, 0.08),
@@ -1366,9 +1353,6 @@ var Subtext = import_styled.default.div`
 var darkGradientBg = import_react4.css`
   background: ${darkGradient};
 `;
-var StyledTooltip = (0, import_styled.default)(import_react_tooltip.Tooltip)`
-  z-index: ${z.modalOverlay};
-`;
 
 // src/components/ContentTable.tsx
 var import_jsx_runtime2 = require("@emotion/react/jsx-runtime");

package/dist/styles/fonts/typography/index.js

@@ -12,7 +12,7 @@ import {
 } from "../../../chunk-RBYRXBPI.js";
 import {
   Article
-} from "../../../chunk-VBWTKANQ.js";
+} from "../../../chunk-Y37DCY7Y.js";
 import {
   Title
 } from "../../../chunk-FHNYQLMF.js";
@@ -33,15 +33,14 @@ import {
 } from "../../../chunk-4TFRLWCC.js";
 import "../../../chunk-YMNSXZ5D.js";
 import "../../../chunk-3XSQV5U4.js";
-import "../../../chunk-UO6U7AYM.js";
-import "../../../chunk-K7D7A34K.js";
-import "../../../chunk-NZJCJJH5.js";
+import "../../../chunk-FCZJILMW.js";
+import "../../../chunk-XP2MX2AA.js";
+import "../../../chunk-RWIZ7Q74.js";
 import "../../../chunk-LAMQKQU3.js";
-import "../../../chunk-RFGKH3R6.js";
+import "../../../chunk-JK4BP73A.js";
 import "../../../chunk-2VBDEO6M.js";
 import "../../../chunk-E4EXM4SY.js";
 import "../../../chunk-JSGRNWSB.js";
-import "../../../chunk-CLU2FRJZ.js";
 import "../../../chunk-CIGAQ47A.js";
 export {
   Article,

package/dist/styles/global.cjs

@@ -53,7 +53,7 @@ __export(global_exports, {
 module.exports = __toCommonJS(global_exports);
 var import_react5 = require("@emotion/react");
 var import_react6 = require("react");
-var import_react_tooltip2 = require("react-tooltip/dist/react-tooltip.css");
+var import_react_tooltip = require("react-tooltip/dist/react-tooltip.css");
 var import_fonts = require("../static/fonts.css");
 
 // src/styles/breakpoints.tsx
@@ -1292,62 +1292,47 @@ function useThemeBg() {
 // src/styles/common.tsx
 var import_react4 = require("@emotion/react");
 var import_styled = __toESM(require("@emotion/styled"), 1);
-var import_react_tooltip = require("react-tooltip");
-
-// src/styles/z-index.tsx
-var z = {
-  card: 1,
-  fieldError: 1,
-  textInput: 2,
-  select: 3,
-  selectFocused: 4,
-  walletActionPreviewTopGradient: 1,
-  headerContainer: 99,
-  smBanner: 99,
-  headerTop: 100,
-  navMenu: 100,
-  smNavMenu: 100,
-  navAction: 101,
-  smNavAction: 100,
-  // keep under navDropdown
-  tooltip: 160,
-  notificationBanner: 170,
-  qrReaderVideo: 180,
-  qrReaderOverlay: 181,
-  modalOverlay: 190,
-  modalContainer: 191,
-  dropdown: 192,
-  toast: 200
-};
-
-// src/styles/common.tsx
 var rootFontSizePx = 12;
 var rootFontSizeRems = rootFontSizePx / 16;
 var standardLineHeightEms = 1.21;
-var standardContentInsetPx = 32;
-var standardContentInsetMdPx = 24;
-var standardContentInsetSmPx = 16;
-var smContentInset = import_react4.css`
-  ${bp.sm(`
-    margin-left: auto;
-    margin-right: auto;
-    width: calc(100% - ${standardContentInsetSmPx * 2}px);
-  `)}
-`;
-var minSmMaxLgContentInset = import_react4.css`
-  ${bp.minSmMaxLg(`
-    width: calc(100% - ${standardContentInsetMdPx * 2}px);
-  `)}
-`;
-var standardContentInset = import_react4.css`
-  margin-left: auto;
-  margin-right: auto;
-  width: calc(100% - ${standardContentInsetPx * 2}px);
-  max-width: 1280px;
-
-  ${smContentInset}
-  ${minSmMaxLgContentInset}
-`;
+function buildStandardContentInset(smPx, minSmMaxLgPx, lgPx) {
+  const smCSS = import_react4.css`
+    ${bp.sm(`
+      margin-left: auto;
+      margin-right: auto;
+      width: calc(100% - ${smPx * 2}px);
+    `)}
+  `;
+  const minSmMaxLgCSS = import_react4.css`
+    ${bp.minSmMaxLg(`
+      margin-left: auto;
+      margin-right: auto;
+      width: calc(100% - ${minSmMaxLgPx * 2}px);
+    `)}
+  `;
+  const lgCSS = import_react4.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: import_react4.css`
+      ${lgCSS}
+      ${smCSS}
+      ${minSmMaxLgCSS}
+    `
+  };
+}
+var standardContentInset = buildStandardContentInset(16, 24, 32);
 var standardCardShadow = import_react4.css`
   box-shadow:
     0px 4px 10px 0px rgba(0, 0, 0, 0.08),
@@ -1367,9 +1352,6 @@ var Subtext = import_styled.default.div`
 var darkGradientBg = import_react4.css`
   background: ${darkGradient};
 `;
-var StyledTooltip = (0, import_styled.default)(import_react_tooltip.Tooltip)`
-  z-index: ${z.modalOverlay};
-`;
 
 // src/styles/constants.ts
 var cssVars = {
@@ -1470,6 +1452,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/styles/global.js

@@ -1,13 +1,12 @@
 import {
   GlobalStyles,
   globalComponentStyles
-} from "../chunk-T33SBHYI.js";
+} from "../chunk-KMR5C25B.js";
 import "../chunk-IJVWYT5G.js";
-import "../chunk-RFGKH3R6.js";
+import "../chunk-JK4BP73A.js";
 import "../chunk-2VBDEO6M.js";
 import "../chunk-E4EXM4SY.js";
 import "../chunk-JSGRNWSB.js";
-import "../chunk-CLU2FRJZ.js";
 import "../chunk-CIGAQ47A.js";
 export {
   GlobalStyles,

package/dist/styles/type.cjs

@@ -62,7 +62,6 @@ var import_react5 = require("@emotion/react");
 // src/styles/common.tsx
 var import_react4 = require("@emotion/react");
 var import_styled = __toESM(require("@emotion/styled"), 1);
-var import_react_tooltip = require("react-tooltip");
 
 // src/styles/breakpoints.tsx
 var import_react = require("@emotion/react");
@@ -1268,59 +1267,47 @@ function hexToRGB(hex) {
   ] : [0, 0, 0];
 }
 
-// src/styles/z-index.tsx
-var z = {
-  card: 1,
-  fieldError: 1,
-  textInput: 2,
-  select: 3,
-  selectFocused: 4,
-  walletActionPreviewTopGradient: 1,
-  headerContainer: 99,
-  smBanner: 99,
-  headerTop: 100,
-  navMenu: 100,
-  smNavMenu: 100,
-  navAction: 101,
-  smNavAction: 100,
-  // keep under navDropdown
-  tooltip: 160,
-  notificationBanner: 170,
-  qrReaderVideo: 180,
-  qrReaderOverlay: 181,
-  modalOverlay: 190,
-  modalContainer: 191,
-  dropdown: 192,
-  toast: 200
-};
-
 // src/styles/common.tsx
 var rootFontSizePx = 12;
 var rootFontSizeRems = rootFontSizePx / 16;
-var standardContentInsetPx = 32;
-var standardContentInsetMdPx = 24;
-var standardContentInsetSmPx = 16;
-var smContentInset = import_react4.css`
-  ${bp.sm(`
-    margin-left: auto;
-    margin-right: auto;
-    width: calc(100% - ${standardContentInsetSmPx * 2}px);
-  `)}
-`;
-var minSmMaxLgContentInset = import_react4.css`
-  ${bp.minSmMaxLg(`
-    width: calc(100% - ${standardContentInsetMdPx * 2}px);
-  `)}
-`;
-var standardContentInset = import_react4.css`
-  margin-left: auto;
-  margin-right: auto;
-  width: calc(100% - ${standardContentInsetPx * 2}px);
-  max-width: 1280px;
-
-  ${smContentInset}
-  ${minSmMaxLgContentInset}
-`;
+function buildStandardContentInset(smPx, minSmMaxLgPx, lgPx) {
+  const smCSS = import_react4.css`
+    ${bp.sm(`
+      margin-left: auto;
+      margin-right: auto;
+      width: calc(100% - ${smPx * 2}px);
+    `)}
+  `;
+  const minSmMaxLgCSS = import_react4.css`
+    ${bp.minSmMaxLg(`
+      margin-left: auto;
+      margin-right: auto;
+      width: calc(100% - ${minSmMaxLgPx * 2}px);
+    `)}
+  `;
+  const lgCSS = import_react4.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: import_react4.css`
+      ${lgCSS}
+      ${smCSS}
+      ${minSmMaxLgCSS}
+    `
+  };
+}
+var standardContentInset = buildStandardContentInset(16, 24, 32);
 var standardCardShadow = import_react4.css`
   box-shadow:
     0px 4px 10px 0px rgba(0, 0, 0, 0.08),
@@ -1340,9 +1327,6 @@ var Subtext = import_styled.default.div`
 var darkGradientBg = import_react4.css`
   background: ${darkGradient};
 `;
-var StyledTooltip = (0, import_styled.default)(import_react_tooltip.Tooltip)`
-  z-index: ${z.modalOverlay};
-`;
 
 // src/styles/utils.tsx
 function pxToRems(rems, asNum = false) {

package/dist/styles/type.js

@@ -1,152 +1,15 @@
 "use client";
 import {
-  firstChild,
-  pxToRems
-} from "../chunk-UO6U7AYM.js";
-import "../chunk-RFGKH3R6.js";
+  Heading,
+  headingWithDefaults,
+  headings
+} from "../chunk-P3EUPXFA.js";
+import "../chunk-FCZJILMW.js";
+import "../chunk-JK4BP73A.js";
 import "../chunk-2VBDEO6M.js";
 import "../chunk-E4EXM4SY.js";
-import {
-  bp
-} from "../chunk-JSGRNWSB.js";
-import "../chunk-CLU2FRJZ.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));
-}
+import "../chunk-JSGRNWSB.js";
+import "../chunk-CIGAQ47A.js";
 export {
   Heading,
   headingWithDefaults,