@lightsparkdev/ui 1.0.3 → 1.0.5

package/dist/components/index.d.cts

@@ -40,18 +40,20 @@ export { Toggle, ToggleContainer } from './Toggle.cjs';
 export { Tooltip } from './Tooltip.cjs';
 export { UnstyledButton } from './UnstyledButton.cjs';
 import '@emotion/react/jsx-runtime';
-import 'react';
-import '../buttons-36cdd0fe.js';
+import '../themes-37e92940.js';
 import '@emotion/react';
 import '../styles/tokens/typography.cjs';
 import '@emotion/css';
 import '../styles/colors.cjs';
-import '../types/index.cjs';
+import '../styles/typography.cjs';
+import '@lightsparkdev/core';
 import '../utils/toReactNodes.cjs';
 import './typography/renderTypography.cjs';
 import './typography/Code.cjs';
 import '@emotion/styled';
+import 'react';
 import '../utils/toNonTypographicReactNodes.cjs';
+import '../types/index.cjs';
 import './typography/Overline.cjs';
 import './typography/LabelStrong.cjs';
 import './typography/LabelModerate.cjs';
@@ -60,7 +62,6 @@ import './typography/Display.cjs';
 import '../router.cjs';
 import 'react-router-dom';
 import 'graphql/language/ast.js';
-import '@lightsparkdev/core';
 import '../index-dcf19aa7.js';
 import '../icons/AI.cjs';
 import '../icons/AnchorLink.cjs';
@@ -174,6 +175,5 @@ import '../icons/Upload.cjs';
 import '../icons/WalletSDKIcon.cjs';
 import '../icons/WarningSign.cjs';
 import '../styles/type.cjs';
-import '../styles/typography.cjs';
 import '../utils/strings.cjs';
 import 'react-tooltip';

package/dist/components/index.d.ts

@@ -40,18 +40,20 @@ export { Toggle, ToggleContainer } from './Toggle.js';
 export { Tooltip } from './Tooltip.js';
 export { UnstyledButton } from './UnstyledButton.js';
 import '@emotion/react/jsx-runtime';
-import 'react';
-import '../buttons-35280bfe.js';
+import '../themes-832e46b2.js';
 import '@emotion/react';
 import '../styles/tokens/typography.js';
 import '@emotion/css';
 import '../styles/colors.js';
-import '../types/index.js';
+import '../styles/typography.js';
+import '@lightsparkdev/core';
 import '../utils/toReactNodes.js';
 import './typography/renderTypography.js';
 import './typography/Code.js';
 import '@emotion/styled';
+import 'react';
 import '../utils/toNonTypographicReactNodes.js';
+import '../types/index.js';
 import './typography/Overline.js';
 import './typography/LabelStrong.js';
 import './typography/LabelModerate.js';
@@ -60,7 +62,6 @@ import './typography/Display.js';
 import '../router.js';
 import 'react-router-dom';
 import 'graphql/language/ast.js';
-import '@lightsparkdev/core';
 import '../index-71766330.js';
 import '../icons/AI.js';
 import '../icons/AnchorLink.js';
@@ -174,6 +175,5 @@ import '../icons/Upload.js';
 import '../icons/WalletSDKIcon.js';
 import '../icons/WarningSign.js';
 import '../styles/type.js';
-import '../styles/typography.js';
 import '../utils/strings.js';
 import 'react-tooltip';

package/dist/components/index.js

@@ -1,13 +1,8 @@
-import {
-  IconWithCircleBackground,
-  Modal
-} from "../chunk-C4KZC45Y.js";
-import "../chunk-NBCCPGA4.js";
 import {
   CodeInput,
   StyledCodeInput
-} from "../chunk-7N2PFDYE.js";
-import "../chunk-PQKVR2BR.js";
+} from "../chunk-AVV74PTP.js";
+import "../chunk-42D2SXB2.js";
 import {
   PageSection,
   PageSectionBox,
@@ -21,97 +16,101 @@ import {
   PageSectionRowSubSection,
   PageSectionSubheading,
   StyledPageSectionBox
-} from "../chunk-LOL5TJ3H.js";
+} from "../chunk-GMOJB7PP.js";
 import {
   PageSectionNav
-} from "../chunk-LGKXPUSI.js";
+} from "../chunk-VF5KSAZG.js";
 import "../chunk-JJC2AUQ3.js";
 import {
   Toasts
-} from "../chunk-7FHOKVKJ.js";
+} from "../chunk-RRXB5FQC.js";
 import {
   Banner
-} from "../chunk-ILEZ6AWT.js";
+} from "../chunk-7EAO66LB.js";
 import "../chunk-ZSWFGISK.js";
 import "../chunk-E3FGOYEJ.js";
 import {
   PhoneInput
-} from "../chunk-KX5QZXCD.js";
+} from "../chunk-NONMMIMQ.js";
 import "../chunk-5KSG5D3I.js";
-import {
-  ProgressBar
-} from "../chunk-54EOEIEN.js";
 import {
   Radio
-} from "../chunk-OKXC33OU.js";
+} from "../chunk-XQIQOMNE.js";
 import {
   SecretContainer
-} from "../chunk-DXA3WUSX.js";
+} from "../chunk-PZTZ4436.js";
 import {
   TextButton
-} from "../chunk-2XUHQWCJ.js";
+} from "../chunk-LKJ7QTWL.js";
 import {
   TextIconAligner
-} from "../chunk-7YY6BH5O.js";
-import {
-  Flex
-} from "../chunk-IL6J7EBZ.js";
+} from "../chunk-GMEJR5XX.js";
 import {
   GradientCardHeader
-} from "../chunk-QQSV7XJX.js";
+} from "../chunk-JZKGVGBU.js";
 import {
   StatusIndicator
-} from "../chunk-MWDDIXIP.js";
+} from "../chunk-LH5VFS3E.js";
 import {
   InfoIconTooltip
-} from "../chunk-UH5F35II.js";
-import "../chunk-LIQSJ5R7.js";
+} from "../chunk-BRJKMY6Z.js";
 import {
   LightboxImage
 } from "../chunk-Z5TPS2BO.js";
 import {
   LightsparkProvider
-} from "../chunk-XB4KQFK2.js";
-import "../chunk-7IHNYMFQ.js";
+} from "../chunk-EKU5IWJW.js";
+import "../chunk-FE477HOE.js";
+import {
+  Modal
+} from "../chunk-ILCC45G7.js";
+import "../chunk-NBCCPGA4.js";
+import {
+  ProgressBar
+} from "../chunk-3DXU76SI.js";
+import {
+  IconWithCircleBackground
+} from "../chunk-QTPYP3IK.js";
+import {
+  Flex
+} from "../chunk-IL6J7EBZ.js";
 import {
   CommaNumberInput
-} from "../chunk-HGOGF6I7.js";
+} from "../chunk-QEZ7L6YF.js";
 import {
   TextInput,
   TextInputHalfRow
-} from "../chunk-N2NPIZCV.js";
+} from "../chunk-M7E2PMFK.js";
 import {
   Toggle,
   ToggleContainer
-} from "../chunk-SNFRMD6Z.js";
+} from "../chunk-AXNQ7BDD.js";
 import {
   CommandKey
 } from "../chunk-WOR7J4KZ.js";
 import {
   CurrencyAmount,
   CurrencyIcon
-} from "../chunk-LH7GLNMY.js";
+} from "../chunk-QZMD3YHI.js";
 import {
   Drawer
-} from "../chunk-JNNJVBHF.js";
+} from "../chunk-QBRCVOJ4.js";
 import {
   Dropdown
-} from "../chunk-XM2HQVUK.js";
+} from "../chunk-4IHNUHE3.js";
 import "../chunk-VQVEZVAG.js";
 import {
   FileInput,
   StyledFileInput
-} from "../chunk-BSH6WRUZ.js";
+} from "../chunk-45BHB7K7.js";
 import {
   Pill
-} from "../chunk-J3YVJWRG.js";
-import "../chunk-6CNJ5ZCC.js";
+} from "../chunk-EHH4M2LZ.js";
+import "../chunk-Q76C6FJ5.js";
 import {
   Badge
-} from "../chunk-SEZEDINC.js";
-import "../chunk-B2VYAIYR.js";
-import "../chunk-4BFBANKF.js";
-import "../chunk-K7FYXGOI.js";
+} from "../chunk-ERNTWEIJ.js";
+import "../chunk-AKGW3FMJ.js";
 import {
   CardPage,
   CardPageContent,
@@ -119,67 +118,67 @@ import {
   CardPageFullWidth,
   CardPageRightContentInner,
   CardPageSubtitle
-} from "../chunk-Y7RQUJUS.js";
-import "../chunk-BHP5YL2N.js";
+} from "../chunk-NWPPTOKK.js";
+import "../chunk-N67Y7GWR.js";
 import {
   ButtonRow,
   ButtonRowContainer,
   StyledButtonRow
-} from "../chunk-YIHC25WB.js";
+} from "../chunk-IIRG6R42.js";
 import {
   Button,
   ButtonSelector,
   StyledButton
-} from "../chunk-SLKPLSJU.js";
-import "../chunk-VXKNN4SF.js";
+} from "../chunk-NK7WH3TK.js";
 import {
   Loading,
   LoadingWrapper
-} from "../chunk-5TTLUOJ5.js";
-import "../chunk-BDZ46Z2I.js";
-import "../chunk-B6S7Y4K7.js";
-import "../chunk-GSKTHUQJ.js";
-import "../chunk-WGKUDRZ7.js";
-import "../chunk-2AGBCGOW.js";
-import "../chunk-MRGHRTKA.js";
-import "../chunk-35PJW7RT.js";
-import "../chunk-GWHKALYQ.js";
-import "../chunk-WTMJTGW4.js";
-import "../chunk-CRTTTIAD.js";
+} from "../chunk-SIYZ5PZT.js";
+import "../chunk-RQLRNKOP.js";
+import "../chunk-GGWFUEDW.js";
+import "../chunk-XLKL3DNK.js";
+import "../chunk-HLZNFEDV.js";
+import "../chunk-ZR2TARGX.js";
+import "../chunk-IXAXRBFS.js";
+import "../chunk-4EV5IUUJ.js";
+import "../chunk-PBLWYVQF.js";
+import "../chunk-QON4D7N2.js";
+import "../chunk-BNHCCR3C.js";
 import "../chunk-YMNSXZ5D.js";
-import "../chunk-XDP7GCYE.js";
+import "../chunk-IH5SIRJL.js";
+import "../chunk-HNK2KIC7.js";
 import "../chunk-OPV246QW.js";
-import "../chunk-AAFUVYVP.js";
-import "../chunk-4C2TISN7.js";
+import "../chunk-SCIQSZSW.js";
+import "../chunk-OPUCWQMK.js";
 import {
   Checkbox,
   CheckboxContainer
-} from "../chunk-E4DUADXU.js";
+} from "../chunk-PYAKYQWS.js";
 import {
   CodeBlock,
   InlineCode,
   StyledCodeBlock
-} from "../chunk-YRNEIRHM.js";
+} from "../chunk-E6ZY35LN.js";
 import {
   CopyToClipboardButton
-} from "../chunk-X4TGLNCH.js";
+} from "../chunk-5JJUXAVA.js";
 import {
   Tooltip
-} from "../chunk-RPNTFEXE.js";
+} from "../chunk-H3UUVMZ3.js";
 import {
   UnstyledButton
-} from "../chunk-LTCJ6LNO.js";
+} from "../chunk-TN5UPDZG.js";
 import "../chunk-55OQPFLF.js";
 import {
   Collapsible,
   StyledCollapsible
-} from "../chunk-4JHXRPRB.js";
-import "../chunk-3XSQV5U4.js";
-import "../chunk-7WDAN3OC.js";
+} from "../chunk-YXAKRSFW.js";
+import "../chunk-E5DUKMCU.js";
+import "../chunk-D4DFISYR.js";
 import {
   Icon,
   IconContainer
-} from "../chunk-I3FI3FNP.js";
+} from "../chunk-LAGOF7IU.js";
 import "../chunk-EDN2QDCB.js";
 import "../chunk-FT62PIPN.js";
 import "../chunk-5ZDDVLS6.js";
@@ -294,12 +293,12 @@ import "../chunk-VI6WTKMV.js";
 import "../chunk-QW2INB5A.js";
 import "../chunk-JLD7MGLC.js";
 import "../chunk-DW6LFUI2.js";
-import "../chunk-PG2W2HVB.js";
-import "../chunk-IBZBPQMZ.js";
+import "../chunk-YG5BANJH.js";
+import "../chunk-UAUAYQ3C.js";
 import "../chunk-ENBUKLVT.js";
 import "../chunk-JSGRNWSB.js";
 import "../chunk-FO7I4E45.js";
-import "../chunk-XUWFUTR4.js";
+import "../chunk-KPAVY3UH.js";
 import "../chunk-LOPKRCGI.js";
 export {
   Badge,

package/dist/components/typography/Article.cjs

@@ -168,7 +168,6 @@ var neutral = {
   gray30: "#4D4D4D",
   gray40: "#666666",
   gray50: "#808080",
-  gray57: "#8B8E98",
   gray60: "#999999",
   gray70: "#B3B3B3",
   gray80: "#CCCCCC",
@@ -192,10 +191,13 @@ var baseColors = __spreadProps(__spreadValues({}, neutral), {
   blue37: "#21529c",
   blue58: "#28BFFF",
   // less than 50% saturated blue
+  grayBlue5: "#0c0d0f",
   grayBlue9: "#16171A",
+  grayBlue18: "#21283a",
   grayBlue32: "#4F5156",
   grayBlue43: "#686A72",
   grayBlue45: "#676F80",
+  grayBlue57: "#8B8E98",
   grayBlue67: "#9BA7B9",
   grayBlue80: "#C0C9D6",
   grayBlue88: "#DEDFE4",
@@ -3568,8 +3570,7 @@ var baseThemeColors = {
   success: colors.success,
   text: colors.black,
   vlcNeutral: colors.gray95,
-  warning: colors.warning,
-  inputBackground: colors.white
+  warning: colors.warning
 };
 var themeOrColorKeyValues = [
   ...Object.keys(baseThemeColors),
@@ -3581,6 +3582,10 @@ var baseTheme = __spreadProps(__spreadValues({}, baseThemeColors), {
   typography: getTypography("Lightspark" /* Lightspark */),
   hcNeutralFromBg: (bgHex) => hcNeutralFromBg(bgHex, colors.black, colors.white),
   buttons: defaultButtonsTheme,
+  badge: {
+    bg: "c05Neutral"
+  },
+  inputBackground: colors.white,
   loading: "LoadingSpinner"
 });
 var lightBaseTheme = baseTheme;
@@ -3618,7 +3623,10 @@ var darkBaseTheme = {
   warning: colors.warning,
   buttons: defaultButtonsTheme,
   loading: "LoadingSpinner",
-  inputBackground: colors.black
+  inputBackground: colors.black,
+  badge: {
+    bg: "c15Neutral"
+  }
 };
 var lightTheme = extend(lightBaseTheme, {
   header: extendBase(lightBaseTheme, {
@@ -3734,7 +3742,10 @@ var bridgeBaseSettings = {
         defaultBorderWidth: 1
       }
     }
-  })
+  }),
+  badge: {
+    bg: "grayBlue94"
+  }
 };
 var bridgeLightTheme = extend(lightTheme, __spreadProps(__spreadValues({}, bridgeBaseSettings), {
   type: "bridgeLight" /* BridgeLight */,
@@ -3883,6 +3894,68 @@ var StyledContentTable = import_styled2.default.table`
   }
 `;
 
+// src/styles/tokens/spacing.tsx
+var n = {
+  "4xs": 2,
+  "3xs": 4,
+  "2xs": 6,
+  xs: 8,
+  sm: 12,
+  md: 16,
+  lg: 24,
+  xl: 32,
+  "2xl": 40,
+  "3xl": 48,
+  "4xl": 56,
+  "5xl": 64,
+  "6xl": 72,
+  "7xl": 80,
+  "8xl": 96,
+  "9xl": 112,
+  "10xl": 128,
+  "11xl": 160
+};
+var Spacing = {
+  "4xs": n["4xs"],
+  "3xs": n["3xs"],
+  "2xs": n["2xs"],
+  xs: n.xs,
+  sm: n.sm,
+  md: n.md,
+  lg: n.lg,
+  xl: n.xl,
+  "2xl": n["2xl"],
+  "3xl": n["3xl"],
+  "4xl": n["4xl"],
+  "5xl": n["5xl"],
+  "6xl": n["6xl"],
+  "7xl": n["7xl"],
+  "8xl": n["8xl"],
+  "9xl": n["9xl"],
+  "10xl": n["10xl"],
+  "11xl": n["11xl"],
+  px: {
+    "4xs": `${n["4xs"]}px`,
+    "3xs": `${n["3xs"]}px`,
+    "2xs": `${n["2xs"]}px`,
+    xs: `${n.xs}px`,
+    sm: `${n.sm}px`,
+    md: `${n.md}px`,
+    lg: `${n.lg}px`,
+    xl: `${n.xl}px`,
+    "2xl": `${n["2xl"]}px`,
+    "3xl": `${n["3xl"]}px`,
+    "4xl": `${n["4xl"]}px`,
+    "5xl": `${n["5xl"]}px`,
+    "6xl": `${n["6xl"]}px`,
+    "7xl": `${n["7xl"]}px`,
+    "8xl": `${n["8xl"]}px`,
+    "9xl": `${n["9xl"]}px`,
+    "10xl": `${n["10xl"]}px`,
+    "11xl": `${n["11xl"]}px`
+  }
+};
+
 // src/styles/utils.tsx
 var import_react5 = require("@emotion/react");
 function pxToRems(rems, asNum = false) {
@@ -4033,52 +4106,52 @@ var StyledArticle = import_styled8.default.article`
 
   ${headlineSelector("h1")} {
     margin: 0;
-    padding-bottom: ${"8px" /* xs */};
+    padding-bottom: ${Spacing.px.xs};
   }
 
   ${headlineSelector("h2")} {
-    padding-top: ${"40px" /* 2xl */};
-    padding-bottom: ${"8px" /* xs */};
+    padding-top: ${Spacing.px["2xl"]};
+    padding-bottom: ${Spacing.px.xs};
     margin: 0;
   }
 
   ${headlineSelector("h3")} {
-    padding-top: ${"40px" /* 2xl */};
-    padding-bottom: ${"8px" /* xs */};
+    padding-top: ${Spacing.px["2xl"]};
+    padding-bottom: ${Spacing.px.xs};
     margin: 0;
   }
 
   ${headlineSelector("h4")} {
-    padding-top: ${"40px" /* 2xl */};
-    padding-bottom: ${"8px" /* xs */};
+    padding-top: ${Spacing.px["2xl"]};
+    padding-bottom: ${Spacing.px.xs};
     margin: 0;
   }
 
   ${headlineSelector("h5")} {
-    padding-top: ${"40px" /* 2xl */};
-    padding-bottom: ${"8px" /* xs */};
+    padding-top: ${Spacing.px["2xl"]};
+    padding-bottom: ${Spacing.px.xs};
     margin: 0;
   }
 
   ${headlineSelector("h6")} {
-    padding-top: ${"40px" /* 2xl */};
-    padding-bottom: ${"8px" /* xs */};
+    padding-top: ${Spacing.px["2xl"]};
+    padding-bottom: ${Spacing.px.xs};
     margin: 0;
   }
 
   ${select(StyledBody)} {
-    margin-top: ${"8px" /* xs */};
-    margin-bottom: ${"8px" /* xs */};
+    margin-top: ${Spacing.px.xs};
+    margin-bottom: ${Spacing.px.xs};
   }
 
   ${select(StyledContentTable)} {
-    margin: ${"40px" /* 2xl */} 0;
+    margin: ${Spacing.px["2xl"]} 0;
   }
 
   img,
   video {
-    margin-top: ${"16px" /* md */};
-    margin-bottom: ${"16px" /* md */};
+    margin-top: ${Spacing.px.md};
+    margin-bottom: ${Spacing.px.md};
   }
 
   strong {
@@ -4094,9 +4167,9 @@ var StyledArticle = import_styled8.default.article`
 
   ul,
   ol {
-    padding-left: ${"24px" /* lg */};
-    margin-top: ${"8px" /* xs */};
-    margin-bottom: ${"8px" /* xs */};
+    padding-left: ${Spacing.px.lg};
+    margin-top: ${Spacing.px.xs};
+    margin-bottom: ${Spacing.px.xs};
     *:not(a) {
       color: ${({ theme }) => theme.text};
     }
@@ -4105,23 +4178,23 @@ var StyledArticle = import_styled8.default.article`
   li {
     ${({ theme }) => getTypographyString(theme, "Body", "Medium")}
     :not(:last-child) {
-      margin-bottom: ${"4px" /* 3xs */};
+      margin-bottom: ${Spacing.px["3xs"]};
     }
   }
 
   code:not([class|="language"]) {
     ${({ theme }) => getTypographyString(theme, "Code", "Medium")}
     background: ${colors.grayBlue94};
-    padding: ${"2px" /* 4xs */} ${"6px" /* 2xs */};
-    margin: ${"2px" /* 4xs */};
+    padding: ${Spacing.px["4xs"]} ${Spacing.px["2xs"]};
+    margin: ${Spacing.px["4xs"]};
     border-radius: 4px;
   }
 
   pre[class|="language"] {
     ${standardBorderRadius(8)}
     width: 100%;
-    padding: ${"16px" /* md */} ${"24px" /* lg */};
-    margin: ${"16px" /* md */} 0;
+    padding: ${Spacing.px.md} ${Spacing.px.lg};
+    margin: ${Spacing.px.md} 0;
   }
 
   // Must match specificity of prismjs to get proper line height!
@@ -4133,7 +4206,7 @@ var StyledArticle = import_styled8.default.article`
   }
 
   blockquote {
-    margin: ${"8px" /* xs */} 0;
+    margin: ${Spacing.px.xs} 0;
   }
 `;
 // Annotate the CommonJS export names for ESM import in node:

package/dist/components/typography/Article.js

@@ -2,21 +2,21 @@
 import {
   Article,
   StyledArticle
-} from "../../chunk-4BFBANKF.js";
-import "../../chunk-K7FYXGOI.js";
-import "../../chunk-2AGBCGOW.js";
-import "../../chunk-MRGHRTKA.js";
-import "../../chunk-35PJW7RT.js";
-import "../../chunk-GWHKALYQ.js";
-import "../../chunk-CRTTTIAD.js";
+} from "../../chunk-NBIK5O3N.js";
+import "../../chunk-TMIBU4ME.js";
+import "../../chunk-ZR2TARGX.js";
+import "../../chunk-IXAXRBFS.js";
+import "../../chunk-4EV5IUUJ.js";
+import "../../chunk-PBLWYVQF.js";
+import "../../chunk-BNHCCR3C.js";
 import "../../chunk-YMNSXZ5D.js";
-import "../../chunk-XDP7GCYE.js";
+import "../../chunk-HNK2KIC7.js";
 import "../../chunk-OPV246QW.js";
-import "../../chunk-AAFUVYVP.js";
-import "../../chunk-4C2TISN7.js";
-import "../../chunk-3XSQV5U4.js";
-import "../../chunk-7WDAN3OC.js";
-import "../../chunk-I3FI3FNP.js";
+import "../../chunk-SCIQSZSW.js";
+import "../../chunk-OPUCWQMK.js";
+import "../../chunk-E5DUKMCU.js";
+import "../../chunk-D4DFISYR.js";
+import "../../chunk-LAGOF7IU.js";
 import "../../chunk-EDN2QDCB.js";
 import "../../chunk-FT62PIPN.js";
 import "../../chunk-5ZDDVLS6.js";
@@ -131,12 +131,12 @@ import "../../chunk-VI6WTKMV.js";
 import "../../chunk-QW2INB5A.js";
 import "../../chunk-JLD7MGLC.js";
 import "../../chunk-DW6LFUI2.js";
-import "../../chunk-PG2W2HVB.js";
-import "../../chunk-IBZBPQMZ.js";
+import "../../chunk-YG5BANJH.js";
+import "../../chunk-UAUAYQ3C.js";
 import "../../chunk-ENBUKLVT.js";
 import "../../chunk-JSGRNWSB.js";
 import "../../chunk-FO7I4E45.js";
-import "../../chunk-XUWFUTR4.js";
+import "../../chunk-KPAVY3UH.js";
 import "../../chunk-LOPKRCGI.js";
 export {
   Article,