@lightsparkdev/ui 1.0.3 → 1.0.5

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

@@ -3,12 +3,12 @@ import { OverlineProps } from './Overline.cjs';
 import { LabelStrongProps } from './LabelStrong.cjs';
 import { LabelModerateProps } from './LabelModerate.cjs';
 import { TitleProps } from './Title.cjs';
-import { F as FontColorKey } from '../../buttons-36cdd0fe.js';
+import { F as FontColorKey } from '../../themes-37e92940.js';
 import { TokenSizeKey, TypographyTypeKey } from '../../styles/tokens/typography.cjs';
 import { ToNonTypographicReactNodesArgs } from '../../utils/toNonTypographicReactNodes.cjs';
 import * as _emotion_react_jsx_runtime from '@emotion/react/jsx-runtime';
 import { DisplayProps } from './Display.cjs';
-import { ComponentProps } from 'react';
+import react__default, { ComponentProps } from 'react';
 import '@emotion/styled';
 import '@emotion/react';
 import '@emotion/css';
@@ -133,82 +133,82 @@ declare const typographyMap: {
     readonly Headline: ({ content, color, size, children, heading, id, display, }: {
         content?: ToNonTypographicReactNodesArgs | null | undefined;
         children?: string | null | undefined;
-        size?: TokenSizeKey;
+        size?: TokenSizeKey | undefined;
         color?: FontColorKey | undefined;
         heading?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
         id?: string | undefined;
-        display?: "flex" | "block" | "inline-flex";
+        display?: "block" | "flex" | "inline-flex";
     }) => _emotion_react_jsx_runtime.JSX.Element;
     readonly Title: ({ content, color, size, children, block, }: TitleProps) => _emotion_react_jsx_runtime.JSX.Element;
     readonly Body: ({ content, color, size, children, block, tag, }: {
         content?: ToNonTypographicReactNodesArgs | null | undefined;
         children?: string | null | undefined;
-        size?: TokenSizeKey;
+        size?: TokenSizeKey | undefined;
         color?: FontColorKey | undefined;
         block?: boolean | undefined;
-        tag?: ("div" | "p" | "pre" | "span") | undefined;
+        tag?: ("span" | "p" | "pre" | "div") | undefined;
     }) => _emotion_react_jsx_runtime.JSX.Element;
     readonly "Body Strong": ({ content, children, color, size, block, }: {
         content?: ToNonTypographicReactNodesArgs | null | undefined;
         children?: string | null | undefined;
-        size?: TokenSizeKey;
+        size?: TokenSizeKey | undefined;
         color?: FontColorKey | undefined;
         block?: boolean | undefined;
     }) => _emotion_react_jsx_runtime.JSX.Element;
     readonly Label: ({ content, color, size, children, }: {
         content?: ToNonTypographicReactNodesArgs | null | undefined;
         children?: string | null | undefined;
-        size?: TokenSizeKey;
+        size?: TokenSizeKey | undefined;
         color?: FontColorKey | undefined;
     }) => _emotion_react_jsx_runtime.JSX.Element;
     readonly "Label Moderate": ({ content, color, size, children, }: LabelModerateProps) => _emotion_react_jsx_runtime.JSX.Element;
     readonly "Label Strong": ({ content, color, size, children, block, }: LabelStrongProps) => _emotion_react_jsx_runtime.JSX.Element;
     readonly Overline: ({ content, color, size, children, }: OverlineProps) => _emotion_react_jsx_runtime.JSX.Element;
     readonly Code: ({ content, color, size, children, }: CodeProps) => _emotion_react_jsx_runtime.JSX.Element;
-    readonly "Code Strong": () => _emotion_react_jsx_runtime.JSX.Element;
+    readonly "Code Strong": ({ content, color, size, children, }: CodeProps) => _emotion_react_jsx_runtime.JSX.Element;
 };
-type RenderTypographyArgs<T extends TypographyTypeKey = TypographyTypeKey> = {
+type RenderTypographyArgs<T extends TypographyTypeKey> = {
     type: T;
-    props?: ComponentProps<(typeof typographyMap)[T]>;
+    props: ComponentProps<(typeof typographyMap)[T]>;
 };
-declare const renderTypography: <T extends TypographyTypeKey>(type: T, props: ComponentProps<{
+declare const renderTypography: <T extends TypographyTypeKey>(type: T, props: react__default.ComponentProps<{
     readonly Display: ({ content, children, color, size, element, }: DisplayProps) => _emotion_react_jsx_runtime.JSX.Element;
     readonly Headline: ({ content, color, size, children, heading, id, display, }: {
         content?: ToNonTypographicReactNodesArgs | null | undefined;
         children?: string | null | undefined;
-        size?: TokenSizeKey;
+        size?: TokenSizeKey | undefined;
         color?: FontColorKey | undefined;
         heading?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
         id?: string | undefined;
-        display?: "flex" | "block" | "inline-flex";
+        display?: "block" | "flex" | "inline-flex";
     }) => _emotion_react_jsx_runtime.JSX.Element;
     readonly Title: ({ content, color, size, children, block, }: TitleProps) => _emotion_react_jsx_runtime.JSX.Element;
     readonly Body: ({ content, color, size, children, block, tag, }: {
         content?: ToNonTypographicReactNodesArgs | null | undefined;
         children?: string | null | undefined;
-        size?: TokenSizeKey;
+        size?: TokenSizeKey | undefined;
         color?: FontColorKey | undefined;
         block?: boolean | undefined;
-        tag?: ("div" | "p" | "pre" | "span") | undefined;
+        tag?: ("span" | "p" | "pre" | "div") | undefined;
     }) => _emotion_react_jsx_runtime.JSX.Element;
     readonly "Body Strong": ({ content, children, color, size, block, }: {
         content?: ToNonTypographicReactNodesArgs | null | undefined;
         children?: string | null | undefined;
-        size?: TokenSizeKey;
+        size?: TokenSizeKey | undefined;
         color?: FontColorKey | undefined;
         block?: boolean | undefined;
     }) => _emotion_react_jsx_runtime.JSX.Element;
     readonly Label: ({ content, color, size, children, }: {
         content?: ToNonTypographicReactNodesArgs | null | undefined;
         children?: string | null | undefined;
-        size?: TokenSizeKey;
+        size?: TokenSizeKey | undefined;
         color?: FontColorKey | undefined;
     }) => _emotion_react_jsx_runtime.JSX.Element;
     readonly "Label Moderate": ({ content, color, size, children, }: LabelModerateProps) => _emotion_react_jsx_runtime.JSX.Element;
     readonly "Label Strong": ({ content, color, size, children, block, }: LabelStrongProps) => _emotion_react_jsx_runtime.JSX.Element;
     readonly Overline: ({ content, color, size, children, }: OverlineProps) => _emotion_react_jsx_runtime.JSX.Element;
     readonly Code: ({ content, color, size, children, }: CodeProps) => _emotion_react_jsx_runtime.JSX.Element;
-    readonly "Code Strong": () => _emotion_react_jsx_runtime.JSX.Element;
-}[T]>) => _emotion_react_jsx_runtime.JSX.Element;
+    readonly "Code Strong": ({ content, color, size, children, }: CodeProps) => _emotion_react_jsx_runtime.JSX.Element;
+}[T]>) => react__default.FunctionComponentElement<DisplayProps>;
 
 export { RenderTypographyArgs, renderTypography, typographyMap };

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

@@ -3,12 +3,12 @@ import { OverlineProps } from './Overline.js';
 import { LabelStrongProps } from './LabelStrong.js';
 import { LabelModerateProps } from './LabelModerate.js';
 import { TitleProps } from './Title.js';
-import { F as FontColorKey } from '../../buttons-35280bfe.js';
+import { F as FontColorKey } from '../../themes-832e46b2.js';
 import { TokenSizeKey, TypographyTypeKey } from '../../styles/tokens/typography.js';
 import { ToNonTypographicReactNodesArgs } from '../../utils/toNonTypographicReactNodes.js';
 import * as _emotion_react_jsx_runtime from '@emotion/react/jsx-runtime';
 import { DisplayProps } from './Display.js';
-import { ComponentProps } from 'react';
+import react__default, { ComponentProps } from 'react';
 import '@emotion/styled';
 import '@emotion/react';
 import '@emotion/css';
@@ -133,82 +133,82 @@ declare const typographyMap: {
     readonly Headline: ({ content, color, size, children, heading, id, display, }: {
         content?: ToNonTypographicReactNodesArgs | null | undefined;
         children?: string | null | undefined;
-        size?: TokenSizeKey;
+        size?: TokenSizeKey | undefined;
         color?: FontColorKey | undefined;
         heading?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
         id?: string | undefined;
-        display?: "flex" | "block" | "inline-flex";
+        display?: "block" | "flex" | "inline-flex";
     }) => _emotion_react_jsx_runtime.JSX.Element;
     readonly Title: ({ content, color, size, children, block, }: TitleProps) => _emotion_react_jsx_runtime.JSX.Element;
     readonly Body: ({ content, color, size, children, block, tag, }: {
         content?: ToNonTypographicReactNodesArgs | null | undefined;
         children?: string | null | undefined;
-        size?: TokenSizeKey;
+        size?: TokenSizeKey | undefined;
         color?: FontColorKey | undefined;
         block?: boolean | undefined;
-        tag?: ("div" | "p" | "pre" | "span") | undefined;
+        tag?: ("span" | "p" | "pre" | "div") | undefined;
     }) => _emotion_react_jsx_runtime.JSX.Element;
     readonly "Body Strong": ({ content, children, color, size, block, }: {
         content?: ToNonTypographicReactNodesArgs | null | undefined;
         children?: string | null | undefined;
-        size?: TokenSizeKey;
+        size?: TokenSizeKey | undefined;
         color?: FontColorKey | undefined;
         block?: boolean | undefined;
     }) => _emotion_react_jsx_runtime.JSX.Element;
     readonly Label: ({ content, color, size, children, }: {
         content?: ToNonTypographicReactNodesArgs | null | undefined;
         children?: string | null | undefined;
-        size?: TokenSizeKey;
+        size?: TokenSizeKey | undefined;
         color?: FontColorKey | undefined;
     }) => _emotion_react_jsx_runtime.JSX.Element;
     readonly "Label Moderate": ({ content, color, size, children, }: LabelModerateProps) => _emotion_react_jsx_runtime.JSX.Element;
     readonly "Label Strong": ({ content, color, size, children, block, }: LabelStrongProps) => _emotion_react_jsx_runtime.JSX.Element;
     readonly Overline: ({ content, color, size, children, }: OverlineProps) => _emotion_react_jsx_runtime.JSX.Element;
     readonly Code: ({ content, color, size, children, }: CodeProps) => _emotion_react_jsx_runtime.JSX.Element;
-    readonly "Code Strong": () => _emotion_react_jsx_runtime.JSX.Element;
+    readonly "Code Strong": ({ content, color, size, children, }: CodeProps) => _emotion_react_jsx_runtime.JSX.Element;
 };
-type RenderTypographyArgs<T extends TypographyTypeKey = TypographyTypeKey> = {
+type RenderTypographyArgs<T extends TypographyTypeKey> = {
     type: T;
-    props?: ComponentProps<(typeof typographyMap)[T]>;
+    props: ComponentProps<(typeof typographyMap)[T]>;
 };
-declare const renderTypography: <T extends TypographyTypeKey>(type: T, props: ComponentProps<{
+declare const renderTypography: <T extends TypographyTypeKey>(type: T, props: react__default.ComponentProps<{
     readonly Display: ({ content, children, color, size, element, }: DisplayProps) => _emotion_react_jsx_runtime.JSX.Element;
     readonly Headline: ({ content, color, size, children, heading, id, display, }: {
         content?: ToNonTypographicReactNodesArgs | null | undefined;
         children?: string | null | undefined;
-        size?: TokenSizeKey;
+        size?: TokenSizeKey | undefined;
         color?: FontColorKey | undefined;
         heading?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
         id?: string | undefined;
-        display?: "flex" | "block" | "inline-flex";
+        display?: "block" | "flex" | "inline-flex";
     }) => _emotion_react_jsx_runtime.JSX.Element;
     readonly Title: ({ content, color, size, children, block, }: TitleProps) => _emotion_react_jsx_runtime.JSX.Element;
     readonly Body: ({ content, color, size, children, block, tag, }: {
         content?: ToNonTypographicReactNodesArgs | null | undefined;
         children?: string | null | undefined;
-        size?: TokenSizeKey;
+        size?: TokenSizeKey | undefined;
         color?: FontColorKey | undefined;
         block?: boolean | undefined;
-        tag?: ("div" | "p" | "pre" | "span") | undefined;
+        tag?: ("span" | "p" | "pre" | "div") | undefined;
     }) => _emotion_react_jsx_runtime.JSX.Element;
     readonly "Body Strong": ({ content, children, color, size, block, }: {
         content?: ToNonTypographicReactNodesArgs | null | undefined;
         children?: string | null | undefined;
-        size?: TokenSizeKey;
+        size?: TokenSizeKey | undefined;
         color?: FontColorKey | undefined;
         block?: boolean | undefined;
     }) => _emotion_react_jsx_runtime.JSX.Element;
     readonly Label: ({ content, color, size, children, }: {
         content?: ToNonTypographicReactNodesArgs | null | undefined;
         children?: string | null | undefined;
-        size?: TokenSizeKey;
+        size?: TokenSizeKey | undefined;
         color?: FontColorKey | undefined;
     }) => _emotion_react_jsx_runtime.JSX.Element;
     readonly "Label Moderate": ({ content, color, size, children, }: LabelModerateProps) => _emotion_react_jsx_runtime.JSX.Element;
     readonly "Label Strong": ({ content, color, size, children, block, }: LabelStrongProps) => _emotion_react_jsx_runtime.JSX.Element;
     readonly Overline: ({ content, color, size, children, }: OverlineProps) => _emotion_react_jsx_runtime.JSX.Element;
     readonly Code: ({ content, color, size, children, }: CodeProps) => _emotion_react_jsx_runtime.JSX.Element;
-    readonly "Code Strong": () => _emotion_react_jsx_runtime.JSX.Element;
-}[T]>) => _emotion_react_jsx_runtime.JSX.Element;
+    readonly "Code Strong": ({ content, color, size, children, }: CodeProps) => _emotion_react_jsx_runtime.JSX.Element;
+}[T]>) => react__default.FunctionComponentElement<DisplayProps>;
 
 export { RenderTypographyArgs, renderTypography, typographyMap };

package/dist/components/typography/renderTypography.js

@@ -1,23 +1,23 @@
 import {
   renderTypography,
   typographyMap
-} from "../../chunk-VXKNN4SF.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-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-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";
@@ -132,12 +132,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 {
   renderTypography,

package/dist/router.cjs

@@ -63,7 +63,6 @@ var neutral = {
   gray30: "#4D4D4D",
   gray40: "#666666",
   gray50: "#808080",
-  gray57: "#8B8E98",
   gray60: "#999999",
   gray70: "#B3B3B3",
   gray80: "#CCCCCC",
@@ -86,10 +85,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",

package/dist/router.js

@@ -8,9 +8,9 @@ import {
   useMatchRoute,
   useMatchRoutes,
   useNavigate
-} from "./chunk-AAFUVYVP.js";
+} from "./chunk-SCIQSZSW.js";
 import "./chunk-EDN2QDCB.js";
-import "./chunk-XUWFUTR4.js";
+import "./chunk-KPAVY3UH.js";
 import "./chunk-LOPKRCGI.js";
 export {
   Link,

package/dist/styles/buttons.d.cts

@@ -1,4 +1,4 @@
-export { A as AllowedButtonTypographyTypes, a as ButtonBorderRadius, B as ButtonTypographyArgs, z as ButtonsThemeKey, v as PaddingY, P as PaddingYKey, x as allowedButtonTypographyTypes, w as buttonBorderRadiuses, y as buttonsThemeBase, C as defaultButtonsTheme } from '../buttons-36cdd0fe.js';
+export { A as AllowedButtonTypographyTypes, a as ButtonBorderRadius, B as ButtonTypographyArgs, g as ButtonsThemeKey, c as PaddingY, P as PaddingYKey, e as allowedButtonTypographyTypes, d as buttonBorderRadiuses, f as buttonsThemeBase, h as defaultButtonsTheme } from '../themes-37e92940.js';
 import './tokens/typography.cjs';
 import '@emotion/react';
 import '@emotion/css';

package/dist/styles/buttons.d.ts

@@ -1,4 +1,4 @@
-export { A as AllowedButtonTypographyTypes, a as ButtonBorderRadius, B as ButtonTypographyArgs, z as ButtonsThemeKey, v as PaddingY, P as PaddingYKey, x as allowedButtonTypographyTypes, w as buttonBorderRadiuses, y as buttonsThemeBase, C as defaultButtonsTheme } from '../buttons-35280bfe.js';
+export { A as AllowedButtonTypographyTypes, a as ButtonBorderRadius, B as ButtonTypographyArgs, g as ButtonsThemeKey, c as PaddingY, P as PaddingYKey, e as allowedButtonTypographyTypes, d as buttonBorderRadiuses, f as buttonsThemeBase, h as defaultButtonsTheme } from '../themes-832e46b2.js';
 import './tokens/typography.js';
 import '@emotion/react';
 import '@emotion/css';

package/dist/styles/colors.cjs

@@ -59,7 +59,6 @@ var neutral = {
   gray30: "#4D4D4D",
   gray40: "#666666",
   gray50: "#808080",
-  gray57: "#8B8E98",
   gray60: "#999999",
   gray70: "#B3B3B3",
   gray80: "#CCCCCC",
@@ -83,10 +82,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",

package/dist/styles/colors.d.cts

@@ -9,10 +9,13 @@ declare const colors: {
     readonly blue39: string;
     readonly blue37: string;
     readonly blue58: string;
+    readonly grayBlue5: string;
     readonly grayBlue9: string;
+    readonly grayBlue18: string;
     readonly grayBlue32: string;
     readonly grayBlue43: string;
     readonly grayBlue45: string;
+    readonly grayBlue57: string;
     readonly grayBlue67: string;
     readonly grayBlue80: string;
     readonly grayBlue88: string;
@@ -34,7 +37,6 @@ declare const colors: {
     readonly gray30: string;
     readonly gray40: string;
     readonly gray50: string;
-    readonly gray57: string;
     readonly gray60: string;
     readonly gray70: string;
     readonly gray80: string;

package/dist/styles/colors.d.ts

@@ -9,10 +9,13 @@ declare const colors: {
     readonly blue39: string;
     readonly blue37: string;
     readonly blue58: string;
+    readonly grayBlue5: string;
     readonly grayBlue9: string;
+    readonly grayBlue18: string;
     readonly grayBlue32: string;
     readonly grayBlue43: string;
     readonly grayBlue45: string;
+    readonly grayBlue57: string;
     readonly grayBlue67: string;
     readonly grayBlue80: string;
     readonly grayBlue88: string;
@@ -34,7 +37,6 @@ declare const colors: {
     readonly gray30: string;
     readonly gray40: string;
     readonly gray50: string;
-    readonly gray57: string;
     readonly gray60: string;
     readonly gray70: string;
     readonly gray80: string;

package/dist/styles/colors.js

@@ -9,7 +9,7 @@ import {
   isColorKey,
   luminance,
   rgbToHex
-} from "../chunk-XUWFUTR4.js";
+} from "../chunk-KPAVY3UH.js";
 import "../chunk-LOPKRCGI.js";
 export {
   colors,

package/dist/styles/common.cjs

@@ -181,7 +181,6 @@ var neutral = {
   gray30: "#4D4D4D",
   gray40: "#666666",
   gray50: "#808080",
-  gray57: "#8B8E98",
   gray60: "#999999",
   gray70: "#B3B3B3",
   gray80: "#CCCCCC",
@@ -205,10 +204,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",
@@ -3526,8 +3528,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),
@@ -3539,6 +3540,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;
@@ -3576,7 +3581,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, {
@@ -3692,7 +3700,10 @@ var bridgeBaseSettings = {
         defaultBorderWidth: 1
       }
     }
-  })
+  }),
+  badge: {
+    bg: "grayBlue94"
+  }
 };
 var bridgeLightTheme = extend(lightTheme, __spreadProps(__spreadValues({}, bridgeBaseSettings), {
   type: "bridgeLight" /* BridgeLight */,

package/dist/styles/common.d.cts

@@ -2,7 +2,7 @@ import * as _emotion_styled from '@emotion/styled';
 import * as react from 'react';
 import * as _emotion_react from '@emotion/react';
 import { Theme } from '@emotion/react';
-import { W as WithTheme, b as ThemeProp } from '../buttons-36cdd0fe.js';
+import { W as WithTheme, b as ThemeProp } from '../themes-37e92940.js';
 import './tokens/typography.cjs';
 import '@emotion/css';
 import './colors.cjs';

package/dist/styles/common.d.ts

@@ -2,7 +2,7 @@ import * as _emotion_styled from '@emotion/styled';
 import * as react from 'react';
 import * as _emotion_react from '@emotion/react';
 import { Theme } from '@emotion/react';
-import { W as WithTheme, b as ThemeProp } from '../buttons-35280bfe.js';
+import { W as WithTheme, b as ThemeProp } from '../themes-832e46b2.js';
 import './tokens/typography.js';
 import '@emotion/css';
 import './colors.js';

package/dist/styles/common.js

@@ -21,12 +21,12 @@ import {
   standardFocusOutline,
   standardLineHeightEms,
   subtext
-} from "../chunk-PG2W2HVB.js";
-import "../chunk-IBZBPQMZ.js";
+} from "../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 {
   Subtext,

package/dist/styles/fields.cjs

@@ -187,7 +187,6 @@ var neutral = {
   gray30: "#4D4D4D",
   gray40: "#666666",
   gray50: "#808080",
-  gray57: "#8B8E98",
   gray60: "#999999",
   gray70: "#B3B3B3",
   gray80: "#CCCCCC",
@@ -211,10 +210,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",
@@ -3587,8 +3589,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),
@@ -3600,6 +3601,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;
@@ -3637,7 +3642,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, {
@@ -3753,7 +3761,10 @@ var bridgeBaseSettings = {
         defaultBorderWidth: 1
       }
     }
-  })
+  }),
+  badge: {
+    bg: "grayBlue94"
+  }
 };
 var bridgeLightTheme = extend(lightTheme, __spreadProps(__spreadValues({}, bridgeBaseSettings), {
   type: "bridgeLight" /* BridgeLight */,

package/dist/styles/fields.d.cts

@@ -2,7 +2,7 @@ import * as _emotion_react_jsx_runtime from '@emotion/react/jsx-runtime';
 import * as _emotion_styled from '@emotion/styled';
 import * as react from 'react';
 import * as _emotion_react from '@emotion/react';
-import { b as ThemeProp, W as WithTheme } from '../buttons-36cdd0fe.js';
+import { b as ThemeProp, W as WithTheme } from '../themes-37e92940.js';
 import { SimpleTypographyProps } from './typography.cjs';
 import './tokens/typography.cjs';
 import '@emotion/css';

package/dist/styles/fields.d.ts

@@ -2,7 +2,7 @@ import * as _emotion_react_jsx_runtime from '@emotion/react/jsx-runtime';
 import * as _emotion_styled from '@emotion/styled';
 import * as react from 'react';
 import * as _emotion_react from '@emotion/react';
-import { b as ThemeProp, W as WithTheme } from '../buttons-35280bfe.js';
+import { b as ThemeProp, W as WithTheme } from '../themes-832e46b2.js';
 import { SimpleTypographyProps } from './typography.js';
 import './tokens/typography.js';
 import '@emotion/css';

package/dist/styles/fields.js

@@ -22,15 +22,15 @@ import {
   textInputPaddingPx,
   textInputPlaceholderColor,
   textInputStyle
-} from "../chunk-6CNJ5ZCC.js";
-import "../chunk-4C2TISN7.js";
+} from "../chunk-Q76C6FJ5.js";
+import "../chunk-OPUCWQMK.js";
 import "../chunk-55OQPFLF.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 {
   FieldError,