@lightsparkdev/ui 1.0.3 → 1.0.5

package/dist/components/typography/Title.d.cts

@@ -3,7 +3,7 @@ import * as react from 'react';
 import { ReactNode } from 'react';
 import * as _emotion_react from '@emotion/react';
 import * as _emotion_react_jsx_runtime from '@emotion/react/jsx-runtime';
-import { F as FontColorKey } from '../../buttons-36cdd0fe.js';
+import { F as FontColorKey } from '../../themes-37e92940.js';
 import { TokenSizeKey } from '../../styles/tokens/typography.cjs';
 import { ToNonTypographicReactNodesArgs } from '../../utils/toNonTypographicReactNodes.cjs';
 import '@emotion/css';
@@ -126,9 +126,9 @@ import '../../types/index.cjs';
 type TitleProps = {
     content?: ToNonTypographicReactNodesArgs | undefined | null;
     children?: string | undefined | null;
-    size?: TokenSizeKey;
+    size?: TokenSizeKey | undefined;
     color?: FontColorKey | undefined;
-    block?: boolean;
+    block?: boolean | undefined;
 };
 declare const Title: ({ content, color, size, children, block, }: TitleProps) => _emotion_react_jsx_runtime.JSX.Element;
 type StyledTitleStrongProps = {

package/dist/components/typography/Title.d.ts

@@ -3,7 +3,7 @@ import * as react from 'react';
 import { ReactNode } from 'react';
 import * as _emotion_react from '@emotion/react';
 import * as _emotion_react_jsx_runtime from '@emotion/react/jsx-runtime';
-import { F as FontColorKey } from '../../buttons-35280bfe.js';
+import { F as FontColorKey } from '../../themes-832e46b2.js';
 import { TokenSizeKey } from '../../styles/tokens/typography.js';
 import { ToNonTypographicReactNodesArgs } from '../../utils/toNonTypographicReactNodes.js';
 import '@emotion/css';
@@ -126,9 +126,9 @@ import '../../types/index.js';
 type TitleProps = {
     content?: ToNonTypographicReactNodesArgs | undefined | null;
     children?: string | undefined | null;
-    size?: TokenSizeKey;
+    size?: TokenSizeKey | undefined;
     color?: FontColorKey | undefined;
-    block?: boolean;
+    block?: boolean | undefined;
 };
 declare const Title: ({ content, color, size, children, block, }: TitleProps) => _emotion_react_jsx_runtime.JSX.Element;
 type StyledTitleStrongProps = {

package/dist/components/typography/Title.js

@@ -2,12 +2,12 @@
 import {
   StyledTitle,
   Title
-} from "../../chunk-35PJW7RT.js";
-import "../../chunk-XDP7GCYE.js";
+} from "../../chunk-4EV5IUUJ.js";
+import "../../chunk-HNK2KIC7.js";
 import "../../chunk-OPV246QW.js";
-import "../../chunk-AAFUVYVP.js";
-import "../../chunk-4C2TISN7.js";
-import "../../chunk-I3FI3FNP.js";
+import "../../chunk-SCIQSZSW.js";
+import "../../chunk-OPUCWQMK.js";
+import "../../chunk-LAGOF7IU.js";
 import "../../chunk-EDN2QDCB.js";
 import "../../chunk-FT62PIPN.js";
 import "../../chunk-5ZDDVLS6.js";
@@ -122,12 +122,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 {
   StyledTitle,

package/dist/components/typography/index.cjs

@@ -4047,7 +4047,6 @@ var neutral = {
   gray30: "#4D4D4D",
   gray40: "#666666",
   gray50: "#808080",
-  gray57: "#8B8E98",
   gray60: "#999999",
   gray70: "#B3B3B3",
   gray80: "#CCCCCC",
@@ -4071,10 +4070,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",
@@ -7447,8 +7449,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),
@@ -7460,6 +7461,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;
@@ -7497,7 +7502,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, {
@@ -7613,7 +7621,10 @@ var bridgeBaseSettings = {
         defaultBorderWidth: 1
       }
     }
-  })
+  }),
+  badge: {
+    bg: "grayBlue94"
+  }
 };
 var bridgeLightTheme = extend(lightTheme, __spreadProps(__spreadValues({}, bridgeBaseSettings), {
   type: "bridgeLight" /* BridgeLight */,
@@ -7839,6 +7850,68 @@ var StyledContentTable = import_styled3.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_react18 = require("@emotion/react");
 function pxToRems(rems, asNum = false) {
@@ -8252,52 +8325,52 @@ var StyledArticle = import_styled9.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 {
@@ -8313,9 +8386,9 @@ var StyledArticle = import_styled9.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};
     }
@@ -8324,23 +8397,23 @@ var StyledArticle = import_styled9.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!
@@ -8352,7 +8425,7 @@ var StyledArticle = import_styled9.default.article`
   }
 
   blockquote {
-    margin: ${"8px" /* xs */} 0;
+    margin: ${Spacing.px.xs} 0;
   }
 `;
 

package/dist/components/typography/index.d.cts

@@ -14,7 +14,7 @@ import 'react';
 import '@emotion/react';
 import '@emotion/react/jsx-runtime';
 import '../../styles/tokens/typography.cjs';
-import '../../buttons-36cdd0fe.js';
+import '../../themes-37e92940.js';
 import '@emotion/css';
 import '../../styles/colors.cjs';
 import '../../utils/toNonTypographicReactNodes.cjs';

package/dist/components/typography/index.d.ts

@@ -14,7 +14,7 @@ import 'react';
 import '@emotion/react';
 import '@emotion/react/jsx-runtime';
 import '../../styles/tokens/typography.js';
-import '../../buttons-35280bfe.js';
+import '../../themes-832e46b2.js';
 import '@emotion/css';
 import '../../styles/colors.js';
 import '../../utils/toNonTypographicReactNodes.js';

package/dist/components/typography/index.js

@@ -1,57 +1,56 @@
 "use client";
-import "../../chunk-B2VYAIYR.js";
 import {
   Article
-} from "../../chunk-4BFBANKF.js";
-import "../../chunk-K7FYXGOI.js";
-import {
-  Label,
-  StyledLabel
-} from "../../chunk-BDZ46Z2I.js";
+} from "../../chunk-NBIK5O3N.js";
+import "../../chunk-TMIBU4ME.js";
 import {
   LabelModerate,
   StyledLabelModerate
-} from "../../chunk-B6S7Y4K7.js";
+} from "../../chunk-GGWFUEDW.js";
 import {
   LabelStrong
-} from "../../chunk-GSKTHUQJ.js";
+} from "../../chunk-XLKL3DNK.js";
 import {
   Overline,
   StyledOverline
-} from "../../chunk-WGKUDRZ7.js";
+} from "../../chunk-HLZNFEDV.js";
 import {
   Code,
   StyledCode
-} from "../../chunk-2AGBCGOW.js";
+} from "../../chunk-ZR2TARGX.js";
 import {
   Display,
   displayElements,
   displaySelector
-} from "../../chunk-MRGHRTKA.js";
+} from "../../chunk-IXAXRBFS.js";
 import {
   StyledTitle,
   Title
-} from "../../chunk-35PJW7RT.js";
+} from "../../chunk-4EV5IUUJ.js";
 import {
   Body,
   StyledBody
-} from "../../chunk-GWHKALYQ.js";
+} from "../../chunk-PBLWYVQF.js";
 import {
   BodyStrong
-} from "../../chunk-WTMJTGW4.js";
+} from "../../chunk-QON4D7N2.js";
 import {
   Headline,
   headlineElements,
   headlineSelector
-} from "../../chunk-CRTTTIAD.js";
+} from "../../chunk-BNHCCR3C.js";
 import "../../chunk-YMNSXZ5D.js";
-import "../../chunk-XDP7GCYE.js";
+import {
+  Label,
+  StyledLabel
+} from "../../chunk-IH5SIRJL.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";
@@ -166,12 +165,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,

package/dist/components/typography/renderTypography.cjs

@@ -22,6 +22,18 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -71,6 +83,7 @@ __export(renderTypography_exports, {
   typographyMap: () => typographyMap
 });
 module.exports = __toCommonJS(renderTypography_exports);
+var import_react21 = __toESM(require("react"), 1);
 
 // src/components/typography/Body.tsx
 var import_styled3 = __toESM(require("@emotion/styled"), 1);
@@ -260,7 +273,6 @@ var neutral = {
   gray30: "#4D4D4D",
   gray40: "#666666",
   gray50: "#808080",
-  gray57: "#8B8E98",
   gray60: "#999999",
   gray70: "#B3B3B3",
   gray80: "#CCCCCC",
@@ -284,10 +296,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",
@@ -3582,8 +3597,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),
@@ -3595,6 +3609,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;
@@ -3632,7 +3650,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, {
@@ -3748,7 +3769,10 @@ var bridgeBaseSettings = {
         defaultBorderWidth: 1
       }
     }
-  })
+  }),
+  badge: {
+    bg: "grayBlue94"
+  }
 };
 var bridgeLightTheme = extend(lightTheme, __spreadProps(__spreadValues({}, bridgeBaseSettings), {
   type: "bridgeLight" /* BridgeLight */,
@@ -8208,7 +8232,6 @@ var StyledTitle = import_styled12.default.span`
 `;
 
 // src/components/typography/renderTypography.tsx
-var import_jsx_runtime128 = require("@emotion/react/jsx-runtime");
 var typographyMap = {
   Display,
   Headline,
@@ -8220,11 +8243,12 @@ var typographyMap = {
   "Label Strong": LabelStrong,
   Overline,
   Code: Code2,
-  "Code Strong": () => /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("div", { children: "Unimplemented" })
+  "Code Strong": Code2
 };
 var renderTypography = (type, props) => {
   const TypographyComponent = typographyMap[type];
-  return /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(TypographyComponent, __spreadValues({}, props));
+  const _a = props, { children } = _a, rest = __objRest(_a, ["children"]);
+  return import_react21.default.createElement(TypographyComponent, rest, children);
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {