@lightsparkdev/ui 1.0.3 → 1.0.5

package/dist/{buttons-35280bfe.d.ts → themes-832e46b2.d.ts}

@@ -1,9 +1,66 @@
 import * as _emotion_react from '@emotion/react';
 import { Theme } from '@emotion/react';
-import { FontFamilies, TypographyGroup, TokenSizeKey } from './styles/tokens/typography.js';
+import { TokenSizeKey, FontFamilies, TypographyGroup } from './styles/tokens/typography.js';
 import { CSSInterpolation } from '@emotion/css';
 import { ColorKey } from './styles/colors.js';
 
+type PaddingYKey = "short" | "regular";
+type PaddingY = number | {
+    [key in PaddingYKey]: number;
+};
+declare const buttonBorderRadiuses: readonly [8, 32];
+type ButtonBorderRadius = (typeof buttonBorderRadiuses)[number];
+declare const allowedButtonTypographyTypes: readonly ["Body", "Body Strong", "Title", "Label", "Label Moderate", "Label Strong"];
+type AllowedButtonTypographyTypes = (typeof allowedButtonTypographyTypes)[number];
+type ButtonTypographyArgs = {
+    type?: AllowedButtonTypographyTypes;
+    color?: ThemeOrColorKey;
+};
+declare const buttonsThemeBase: {
+    defaultSize: TokenSizeKey;
+    defaultTypographyType: "Title" | "Body" | "Body Strong" | "Label" | "Label Moderate" | "Label Strong";
+    defaultColor: ThemeOrColorKey;
+    defaultBorderRadius: 8 | 32;
+    defaultBorderWidth: number;
+    defaultBackgroundColor: BackgroundColorKeyArg;
+    defaultBorderColor: BackgroundColorKeyArg;
+    defaultHoverBackgroundColor: BackgroundColorKeyArg;
+    defaultHoverBorderColor: BackgroundColorKeyArg;
+    defaultOutlineOffset: number;
+    defaultPaddingsY: {
+        ExtraSmall: number;
+        Small: PaddingY;
+        Schmedium: number;
+        Medium: number;
+        Mlarge: number;
+        Large: number;
+    };
+    kinds: {};
+};
+type ButtonsThemeKey = keyof typeof buttonsThemeBase;
+type ButtonKindsProps = Record<string, Partial<typeof buttonsThemeBase>>;
+declare const defaultButtonsTheme: {
+    kinds: ButtonKindsProps;
+    defaultSize: TokenSizeKey;
+    defaultTypographyType: "Title" | "Body" | "Body Strong" | "Label" | "Label Moderate" | "Label Strong";
+    defaultColor: ThemeOrColorKey;
+    defaultBorderRadius: 8 | 32;
+    defaultBorderWidth: number;
+    defaultBackgroundColor: BackgroundColorKeyArg;
+    defaultBorderColor: BackgroundColorKeyArg;
+    defaultHoverBackgroundColor: BackgroundColorKeyArg;
+    defaultHoverBorderColor: BackgroundColorKeyArg;
+    defaultOutlineOffset: number;
+    defaultPaddingsY: {
+        ExtraSmall: number;
+        Small: PaddingY;
+        Schmedium: number;
+        Medium: number;
+        Mlarge: number;
+        Large: number;
+    };
+};
+
 declare enum Themes {
     Light = "light",
     Dark = "dark",
@@ -43,7 +100,6 @@ declare const baseThemeColors: {
     text: string;
     vlcNeutral: string;
     warning: string;
-    inputBackground: string;
 };
 type ThemeColorKey = keyof typeof baseThemeColors;
 declare const themeOrColorKeyValues: readonly string[];
@@ -1751,7 +1807,11 @@ declare const baseTheme: {
             Large: number;
         };
     };
-    loading: "Code" | "LoadingSpinner" | "AI" | "AnchorLink" | "ApiConnection" | "AppIcon" | "ArrowCircle" | "ArrowCircleTier1" | "ArrowCircleTier2" | "ArrowCircleTier3" | "ArrowCornerDownRight" | "ArrowDown" | "ArrowUp" | "ArrowUpRightCircleFill" | "Bank" | "BitcoinB" | "BitcoinBOnRoundedSquare" | "CameraCapture" | "CaretRight" | "CentralArrowShareRight" | "Checkmark" | "CheckmarkCircleGreen" | "CheckmarkCircleTier1" | "CheckmarkCircleTier2" | "CheckmarkCircleTier3" | "Chevron" | "ChevronLeft" | "CircleCheck" | "CircleCheckOutline" | "CirclePlus" | "Clock" | "Close" | "Copy" | "CreditCard" | "DeleteIcon" | "Dollar" | "DollarManrope" | "DollarManropeSmall" | "DotGrid1x3Horizontal" | "Download" | "Envelope" | "ExclamationPoint" | "Explorer" | "Eye" | "EyeDropper" | "Figma" | "FlutterTwoTone" | "FramedLetterI" | "Gear" | "Github" | "GoTwoTone" | "GraphQLTwoTone" | "HeartOutline" | "Home" | "HorizontalArrows" | "Info" | "JavaScriptTwoTone" | "JavaTwoTone" | "KotlinTwoTone" | "LeftArrow" | "LightningOnRoundedSquare" | "LinkIcon" | "Lock" | "Logo" | "LogoBolt" | "LogoOnCircle" | "MagicWand" | "Minus" | "Monitor" | "NodeAdd" | "NotEye" | "PaperPlane" | "Pencil" | "Person" | "PersonCircle" | "PiggyBank" | "Plus" | "PythonTwoTone" | "QRCodeIcon" | "QuestionCircle" | "QuestionCircleStrong" | "ReactTwoTone" | "Recycling" | "Remove" | "Restart" | "RightArrow" | "Roadmap" | "RustTwoTone" | "Satoshi" | "SatoshiRounded" | "Search" | "SecurityKey" | "Selector" | "SemiCircleOverlap" | "Share" | "ShieldCheck" | "Sidebar" | "Sort" | "StackedLines" | "SwiftTwoTone" | "TapSingle" | "Team" | "Terminal" | "Trash" | "TwoArrowsDown" | "TwoArrowsUp" | "Uma" | "UmaBridgeLoading" | "Upload" | "WalletSDKIcon" | "WarningSign";
+    badge: {
+        bg: ThemeOrColorKey;
+    };
+    inputBackground: string;
+    loading: "Code" | "AI" | "AnchorLink" | "ApiConnection" | "AppIcon" | "ArrowCircle" | "ArrowCircleTier1" | "ArrowCircleTier2" | "ArrowCircleTier3" | "ArrowCornerDownRight" | "ArrowDown" | "ArrowUp" | "ArrowUpRightCircleFill" | "Bank" | "BitcoinB" | "BitcoinBOnRoundedSquare" | "CameraCapture" | "CaretRight" | "CentralArrowShareRight" | "Checkmark" | "CheckmarkCircleGreen" | "CheckmarkCircleTier1" | "CheckmarkCircleTier2" | "CheckmarkCircleTier3" | "Chevron" | "ChevronLeft" | "CircleCheck" | "CircleCheckOutline" | "CirclePlus" | "Clock" | "Close" | "Copy" | "CreditCard" | "DeleteIcon" | "Dollar" | "DollarManrope" | "DollarManropeSmall" | "DotGrid1x3Horizontal" | "Download" | "Envelope" | "ExclamationPoint" | "Explorer" | "Eye" | "EyeDropper" | "Figma" | "FlutterTwoTone" | "FramedLetterI" | "Gear" | "Github" | "GoTwoTone" | "GraphQLTwoTone" | "HeartOutline" | "Home" | "HorizontalArrows" | "Info" | "JavaScriptTwoTone" | "JavaTwoTone" | "KotlinTwoTone" | "LeftArrow" | "LightningOnRoundedSquare" | "LinkIcon" | "LoadingSpinner" | "Lock" | "Logo" | "LogoBolt" | "LogoOnCircle" | "MagicWand" | "Minus" | "Monitor" | "NodeAdd" | "NotEye" | "PaperPlane" | "Pencil" | "Person" | "PersonCircle" | "PiggyBank" | "Plus" | "PythonTwoTone" | "QRCodeIcon" | "QuestionCircle" | "QuestionCircleStrong" | "ReactTwoTone" | "Recycling" | "Remove" | "Restart" | "RightArrow" | "Roadmap" | "RustTwoTone" | "Satoshi" | "SatoshiRounded" | "Search" | "SecurityKey" | "Selector" | "SemiCircleOverlap" | "Share" | "ShieldCheck" | "Sidebar" | "Sort" | "StackedLines" | "SwiftTwoTone" | "TapSingle" | "Team" | "Terminal" | "Trash" | "TwoArrowsDown" | "TwoArrowsUp" | "Uma" | "UmaBridgeLoading" | "Upload" | "WalletSDKIcon" | "WarningSign";
     bg: string;
     smBg: string;
     c05Neutral: string;
@@ -1780,7 +1840,6 @@ declare const baseTheme: {
     text: string;
     vlcNeutral: string;
     warning: string;
-    inputBackground: string;
 };
 type BaseTheme = typeof baseTheme;
 type LightsparkSurfaces = {
@@ -3506,7 +3565,11 @@ declare function setFonts(theme: Theme, fontFamilies: FontFamilies): {
             Large: number;
         };
     };
-    loading: "Code" | "LoadingSpinner" | "AI" | "AnchorLink" | "ApiConnection" | "AppIcon" | "ArrowCircle" | "ArrowCircleTier1" | "ArrowCircleTier2" | "ArrowCircleTier3" | "ArrowCornerDownRight" | "ArrowDown" | "ArrowUp" | "ArrowUpRightCircleFill" | "Bank" | "BitcoinB" | "BitcoinBOnRoundedSquare" | "CameraCapture" | "CaretRight" | "CentralArrowShareRight" | "Checkmark" | "CheckmarkCircleGreen" | "CheckmarkCircleTier1" | "CheckmarkCircleTier2" | "CheckmarkCircleTier3" | "Chevron" | "ChevronLeft" | "CircleCheck" | "CircleCheckOutline" | "CirclePlus" | "Clock" | "Close" | "Copy" | "CreditCard" | "DeleteIcon" | "Dollar" | "DollarManrope" | "DollarManropeSmall" | "DotGrid1x3Horizontal" | "Download" | "Envelope" | "ExclamationPoint" | "Explorer" | "Eye" | "EyeDropper" | "Figma" | "FlutterTwoTone" | "FramedLetterI" | "Gear" | "Github" | "GoTwoTone" | "GraphQLTwoTone" | "HeartOutline" | "Home" | "HorizontalArrows" | "Info" | "JavaScriptTwoTone" | "JavaTwoTone" | "KotlinTwoTone" | "LeftArrow" | "LightningOnRoundedSquare" | "LinkIcon" | "Lock" | "Logo" | "LogoBolt" | "LogoOnCircle" | "MagicWand" | "Minus" | "Monitor" | "NodeAdd" | "NotEye" | "PaperPlane" | "Pencil" | "Person" | "PersonCircle" | "PiggyBank" | "Plus" | "PythonTwoTone" | "QRCodeIcon" | "QuestionCircle" | "QuestionCircleStrong" | "ReactTwoTone" | "Recycling" | "Remove" | "Restart" | "RightArrow" | "Roadmap" | "RustTwoTone" | "Satoshi" | "SatoshiRounded" | "Search" | "SecurityKey" | "Selector" | "SemiCircleOverlap" | "Share" | "ShieldCheck" | "Sidebar" | "Sort" | "StackedLines" | "SwiftTwoTone" | "TapSingle" | "Team" | "Terminal" | "Trash" | "TwoArrowsDown" | "TwoArrowsUp" | "Uma" | "UmaBridgeLoading" | "Upload" | "WalletSDKIcon" | "WarningSign";
+    badge: {
+        bg: ThemeOrColorKey;
+    };
+    inputBackground: string;
+    loading: "Code" | "AI" | "AnchorLink" | "ApiConnection" | "AppIcon" | "ArrowCircle" | "ArrowCircleTier1" | "ArrowCircleTier2" | "ArrowCircleTier3" | "ArrowCornerDownRight" | "ArrowDown" | "ArrowUp" | "ArrowUpRightCircleFill" | "Bank" | "BitcoinB" | "BitcoinBOnRoundedSquare" | "CameraCapture" | "CaretRight" | "CentralArrowShareRight" | "Checkmark" | "CheckmarkCircleGreen" | "CheckmarkCircleTier1" | "CheckmarkCircleTier2" | "CheckmarkCircleTier3" | "Chevron" | "ChevronLeft" | "CircleCheck" | "CircleCheckOutline" | "CirclePlus" | "Clock" | "Close" | "Copy" | "CreditCard" | "DeleteIcon" | "Dollar" | "DollarManrope" | "DollarManropeSmall" | "DotGrid1x3Horizontal" | "Download" | "Envelope" | "ExclamationPoint" | "Explorer" | "Eye" | "EyeDropper" | "Figma" | "FlutterTwoTone" | "FramedLetterI" | "Gear" | "Github" | "GoTwoTone" | "GraphQLTwoTone" | "HeartOutline" | "Home" | "HorizontalArrows" | "Info" | "JavaScriptTwoTone" | "JavaTwoTone" | "KotlinTwoTone" | "LeftArrow" | "LightningOnRoundedSquare" | "LinkIcon" | "LoadingSpinner" | "Lock" | "Logo" | "LogoBolt" | "LogoOnCircle" | "MagicWand" | "Minus" | "Monitor" | "NodeAdd" | "NotEye" | "PaperPlane" | "Pencil" | "Person" | "PersonCircle" | "PiggyBank" | "Plus" | "PythonTwoTone" | "QRCodeIcon" | "QuestionCircle" | "QuestionCircleStrong" | "ReactTwoTone" | "Recycling" | "Remove" | "Restart" | "RightArrow" | "Roadmap" | "RustTwoTone" | "Satoshi" | "SatoshiRounded" | "Search" | "SecurityKey" | "Selector" | "SemiCircleOverlap" | "Share" | "ShieldCheck" | "Sidebar" | "Sort" | "StackedLines" | "SwiftTwoTone" | "TapSingle" | "Team" | "Terminal" | "Trash" | "TwoArrowsDown" | "TwoArrowsUp" | "Uma" | "UmaBridgeLoading" | "Upload" | "WalletSDKIcon" | "WarningSign";
     bg: string;
     smBg: string;
     c05Neutral: string;
@@ -3535,7 +3598,6 @@ declare function setFonts(theme: Theme, fontFamilies: FontFamilies): {
     text: string;
     vlcNeutral: string;
     warning: string;
-    inputBackground: string;
     header: {
         type: Themes;
         typography: {
@@ -5238,7 +5300,11 @@ declare function setFonts(theme: Theme, fontFamilies: FontFamilies): {
                 Large: number;
             };
         };
-        loading: "Code" | "LoadingSpinner" | "AI" | "AnchorLink" | "ApiConnection" | "AppIcon" | "ArrowCircle" | "ArrowCircleTier1" | "ArrowCircleTier2" | "ArrowCircleTier3" | "ArrowCornerDownRight" | "ArrowDown" | "ArrowUp" | "ArrowUpRightCircleFill" | "Bank" | "BitcoinB" | "BitcoinBOnRoundedSquare" | "CameraCapture" | "CaretRight" | "CentralArrowShareRight" | "Checkmark" | "CheckmarkCircleGreen" | "CheckmarkCircleTier1" | "CheckmarkCircleTier2" | "CheckmarkCircleTier3" | "Chevron" | "ChevronLeft" | "CircleCheck" | "CircleCheckOutline" | "CirclePlus" | "Clock" | "Close" | "Copy" | "CreditCard" | "DeleteIcon" | "Dollar" | "DollarManrope" | "DollarManropeSmall" | "DotGrid1x3Horizontal" | "Download" | "Envelope" | "ExclamationPoint" | "Explorer" | "Eye" | "EyeDropper" | "Figma" | "FlutterTwoTone" | "FramedLetterI" | "Gear" | "Github" | "GoTwoTone" | "GraphQLTwoTone" | "HeartOutline" | "Home" | "HorizontalArrows" | "Info" | "JavaScriptTwoTone" | "JavaTwoTone" | "KotlinTwoTone" | "LeftArrow" | "LightningOnRoundedSquare" | "LinkIcon" | "Lock" | "Logo" | "LogoBolt" | "LogoOnCircle" | "MagicWand" | "Minus" | "Monitor" | "NodeAdd" | "NotEye" | "PaperPlane" | "Pencil" | "Person" | "PersonCircle" | "PiggyBank" | "Plus" | "PythonTwoTone" | "QRCodeIcon" | "QuestionCircle" | "QuestionCircleStrong" | "ReactTwoTone" | "Recycling" | "Remove" | "Restart" | "RightArrow" | "Roadmap" | "RustTwoTone" | "Satoshi" | "SatoshiRounded" | "Search" | "SecurityKey" | "Selector" | "SemiCircleOverlap" | "Share" | "ShieldCheck" | "Sidebar" | "Sort" | "StackedLines" | "SwiftTwoTone" | "TapSingle" | "Team" | "Terminal" | "Trash" | "TwoArrowsDown" | "TwoArrowsUp" | "Uma" | "UmaBridgeLoading" | "Upload" | "WalletSDKIcon" | "WarningSign";
+        badge: {
+            bg: ThemeOrColorKey;
+        };
+        inputBackground: string;
+        loading: "Code" | "AI" | "AnchorLink" | "ApiConnection" | "AppIcon" | "ArrowCircle" | "ArrowCircleTier1" | "ArrowCircleTier2" | "ArrowCircleTier3" | "ArrowCornerDownRight" | "ArrowDown" | "ArrowUp" | "ArrowUpRightCircleFill" | "Bank" | "BitcoinB" | "BitcoinBOnRoundedSquare" | "CameraCapture" | "CaretRight" | "CentralArrowShareRight" | "Checkmark" | "CheckmarkCircleGreen" | "CheckmarkCircleTier1" | "CheckmarkCircleTier2" | "CheckmarkCircleTier3" | "Chevron" | "ChevronLeft" | "CircleCheck" | "CircleCheckOutline" | "CirclePlus" | "Clock" | "Close" | "Copy" | "CreditCard" | "DeleteIcon" | "Dollar" | "DollarManrope" | "DollarManropeSmall" | "DotGrid1x3Horizontal" | "Download" | "Envelope" | "ExclamationPoint" | "Explorer" | "Eye" | "EyeDropper" | "Figma" | "FlutterTwoTone" | "FramedLetterI" | "Gear" | "Github" | "GoTwoTone" | "GraphQLTwoTone" | "HeartOutline" | "Home" | "HorizontalArrows" | "Info" | "JavaScriptTwoTone" | "JavaTwoTone" | "KotlinTwoTone" | "LeftArrow" | "LightningOnRoundedSquare" | "LinkIcon" | "LoadingSpinner" | "Lock" | "Logo" | "LogoBolt" | "LogoOnCircle" | "MagicWand" | "Minus" | "Monitor" | "NodeAdd" | "NotEye" | "PaperPlane" | "Pencil" | "Person" | "PersonCircle" | "PiggyBank" | "Plus" | "PythonTwoTone" | "QRCodeIcon" | "QuestionCircle" | "QuestionCircleStrong" | "ReactTwoTone" | "Recycling" | "Remove" | "Restart" | "RightArrow" | "Roadmap" | "RustTwoTone" | "Satoshi" | "SatoshiRounded" | "Search" | "SecurityKey" | "Selector" | "SemiCircleOverlap" | "Share" | "ShieldCheck" | "Sidebar" | "Sort" | "StackedLines" | "SwiftTwoTone" | "TapSingle" | "Team" | "Terminal" | "Trash" | "TwoArrowsDown" | "TwoArrowsUp" | "Uma" | "UmaBridgeLoading" | "Upload" | "WalletSDKIcon" | "WarningSign";
         bg: string;
         smBg: string;
         c05Neutral: string;
@@ -5267,7 +5333,6 @@ declare function setFonts(theme: Theme, fontFamilies: FontFamilies): {
         text: string;
         vlcNeutral: string;
         warning: string;
-        inputBackground: string;
     };
     nav: {
         type: Themes;
@@ -6971,7 +7036,11 @@ declare function setFonts(theme: Theme, fontFamilies: FontFamilies): {
                 Large: number;
             };
         };
-        loading: "Code" | "LoadingSpinner" | "AI" | "AnchorLink" | "ApiConnection" | "AppIcon" | "ArrowCircle" | "ArrowCircleTier1" | "ArrowCircleTier2" | "ArrowCircleTier3" | "ArrowCornerDownRight" | "ArrowDown" | "ArrowUp" | "ArrowUpRightCircleFill" | "Bank" | "BitcoinB" | "BitcoinBOnRoundedSquare" | "CameraCapture" | "CaretRight" | "CentralArrowShareRight" | "Checkmark" | "CheckmarkCircleGreen" | "CheckmarkCircleTier1" | "CheckmarkCircleTier2" | "CheckmarkCircleTier3" | "Chevron" | "ChevronLeft" | "CircleCheck" | "CircleCheckOutline" | "CirclePlus" | "Clock" | "Close" | "Copy" | "CreditCard" | "DeleteIcon" | "Dollar" | "DollarManrope" | "DollarManropeSmall" | "DotGrid1x3Horizontal" | "Download" | "Envelope" | "ExclamationPoint" | "Explorer" | "Eye" | "EyeDropper" | "Figma" | "FlutterTwoTone" | "FramedLetterI" | "Gear" | "Github" | "GoTwoTone" | "GraphQLTwoTone" | "HeartOutline" | "Home" | "HorizontalArrows" | "Info" | "JavaScriptTwoTone" | "JavaTwoTone" | "KotlinTwoTone" | "LeftArrow" | "LightningOnRoundedSquare" | "LinkIcon" | "Lock" | "Logo" | "LogoBolt" | "LogoOnCircle" | "MagicWand" | "Minus" | "Monitor" | "NodeAdd" | "NotEye" | "PaperPlane" | "Pencil" | "Person" | "PersonCircle" | "PiggyBank" | "Plus" | "PythonTwoTone" | "QRCodeIcon" | "QuestionCircle" | "QuestionCircleStrong" | "ReactTwoTone" | "Recycling" | "Remove" | "Restart" | "RightArrow" | "Roadmap" | "RustTwoTone" | "Satoshi" | "SatoshiRounded" | "Search" | "SecurityKey" | "Selector" | "SemiCircleOverlap" | "Share" | "ShieldCheck" | "Sidebar" | "Sort" | "StackedLines" | "SwiftTwoTone" | "TapSingle" | "Team" | "Terminal" | "Trash" | "TwoArrowsDown" | "TwoArrowsUp" | "Uma" | "UmaBridgeLoading" | "Upload" | "WalletSDKIcon" | "WarningSign";
+        badge: {
+            bg: ThemeOrColorKey;
+        };
+        inputBackground: string;
+        loading: "Code" | "AI" | "AnchorLink" | "ApiConnection" | "AppIcon" | "ArrowCircle" | "ArrowCircleTier1" | "ArrowCircleTier2" | "ArrowCircleTier3" | "ArrowCornerDownRight" | "ArrowDown" | "ArrowUp" | "ArrowUpRightCircleFill" | "Bank" | "BitcoinB" | "BitcoinBOnRoundedSquare" | "CameraCapture" | "CaretRight" | "CentralArrowShareRight" | "Checkmark" | "CheckmarkCircleGreen" | "CheckmarkCircleTier1" | "CheckmarkCircleTier2" | "CheckmarkCircleTier3" | "Chevron" | "ChevronLeft" | "CircleCheck" | "CircleCheckOutline" | "CirclePlus" | "Clock" | "Close" | "Copy" | "CreditCard" | "DeleteIcon" | "Dollar" | "DollarManrope" | "DollarManropeSmall" | "DotGrid1x3Horizontal" | "Download" | "Envelope" | "ExclamationPoint" | "Explorer" | "Eye" | "EyeDropper" | "Figma" | "FlutterTwoTone" | "FramedLetterI" | "Gear" | "Github" | "GoTwoTone" | "GraphQLTwoTone" | "HeartOutline" | "Home" | "HorizontalArrows" | "Info" | "JavaScriptTwoTone" | "JavaTwoTone" | "KotlinTwoTone" | "LeftArrow" | "LightningOnRoundedSquare" | "LinkIcon" | "LoadingSpinner" | "Lock" | "Logo" | "LogoBolt" | "LogoOnCircle" | "MagicWand" | "Minus" | "Monitor" | "NodeAdd" | "NotEye" | "PaperPlane" | "Pencil" | "Person" | "PersonCircle" | "PiggyBank" | "Plus" | "PythonTwoTone" | "QRCodeIcon" | "QuestionCircle" | "QuestionCircleStrong" | "ReactTwoTone" | "Recycling" | "Remove" | "Restart" | "RightArrow" | "Roadmap" | "RustTwoTone" | "Satoshi" | "SatoshiRounded" | "Search" | "SecurityKey" | "Selector" | "SemiCircleOverlap" | "Share" | "ShieldCheck" | "Sidebar" | "Sort" | "StackedLines" | "SwiftTwoTone" | "TapSingle" | "Team" | "Terminal" | "Trash" | "TwoArrowsDown" | "TwoArrowsUp" | "Uma" | "UmaBridgeLoading" | "Upload" | "WalletSDKIcon" | "WarningSign";
         bg: string;
         smBg: string;
         c05Neutral: string;
@@ -7000,7 +7069,6 @@ declare function setFonts(theme: Theme, fontFamilies: FontFamilies): {
         text: string;
         vlcNeutral: string;
         warning: string;
-        inputBackground: string;
     };
     content: {
         type: Themes;
@@ -8704,7 +8772,11 @@ declare function setFonts(theme: Theme, fontFamilies: FontFamilies): {
                 Large: number;
             };
         };
-        loading: "Code" | "LoadingSpinner" | "AI" | "AnchorLink" | "ApiConnection" | "AppIcon" | "ArrowCircle" | "ArrowCircleTier1" | "ArrowCircleTier2" | "ArrowCircleTier3" | "ArrowCornerDownRight" | "ArrowDown" | "ArrowUp" | "ArrowUpRightCircleFill" | "Bank" | "BitcoinB" | "BitcoinBOnRoundedSquare" | "CameraCapture" | "CaretRight" | "CentralArrowShareRight" | "Checkmark" | "CheckmarkCircleGreen" | "CheckmarkCircleTier1" | "CheckmarkCircleTier2" | "CheckmarkCircleTier3" | "Chevron" | "ChevronLeft" | "CircleCheck" | "CircleCheckOutline" | "CirclePlus" | "Clock" | "Close" | "Copy" | "CreditCard" | "DeleteIcon" | "Dollar" | "DollarManrope" | "DollarManropeSmall" | "DotGrid1x3Horizontal" | "Download" | "Envelope" | "ExclamationPoint" | "Explorer" | "Eye" | "EyeDropper" | "Figma" | "FlutterTwoTone" | "FramedLetterI" | "Gear" | "Github" | "GoTwoTone" | "GraphQLTwoTone" | "HeartOutline" | "Home" | "HorizontalArrows" | "Info" | "JavaScriptTwoTone" | "JavaTwoTone" | "KotlinTwoTone" | "LeftArrow" | "LightningOnRoundedSquare" | "LinkIcon" | "Lock" | "Logo" | "LogoBolt" | "LogoOnCircle" | "MagicWand" | "Minus" | "Monitor" | "NodeAdd" | "NotEye" | "PaperPlane" | "Pencil" | "Person" | "PersonCircle" | "PiggyBank" | "Plus" | "PythonTwoTone" | "QRCodeIcon" | "QuestionCircle" | "QuestionCircleStrong" | "ReactTwoTone" | "Recycling" | "Remove" | "Restart" | "RightArrow" | "Roadmap" | "RustTwoTone" | "Satoshi" | "SatoshiRounded" | "Search" | "SecurityKey" | "Selector" | "SemiCircleOverlap" | "Share" | "ShieldCheck" | "Sidebar" | "Sort" | "StackedLines" | "SwiftTwoTone" | "TapSingle" | "Team" | "Terminal" | "Trash" | "TwoArrowsDown" | "TwoArrowsUp" | "Uma" | "UmaBridgeLoading" | "Upload" | "WalletSDKIcon" | "WarningSign";
+        badge: {
+            bg: ThemeOrColorKey;
+        };
+        inputBackground: string;
+        loading: "Code" | "AI" | "AnchorLink" | "ApiConnection" | "AppIcon" | "ArrowCircle" | "ArrowCircleTier1" | "ArrowCircleTier2" | "ArrowCircleTier3" | "ArrowCornerDownRight" | "ArrowDown" | "ArrowUp" | "ArrowUpRightCircleFill" | "Bank" | "BitcoinB" | "BitcoinBOnRoundedSquare" | "CameraCapture" | "CaretRight" | "CentralArrowShareRight" | "Checkmark" | "CheckmarkCircleGreen" | "CheckmarkCircleTier1" | "CheckmarkCircleTier2" | "CheckmarkCircleTier3" | "Chevron" | "ChevronLeft" | "CircleCheck" | "CircleCheckOutline" | "CirclePlus" | "Clock" | "Close" | "Copy" | "CreditCard" | "DeleteIcon" | "Dollar" | "DollarManrope" | "DollarManropeSmall" | "DotGrid1x3Horizontal" | "Download" | "Envelope" | "ExclamationPoint" | "Explorer" | "Eye" | "EyeDropper" | "Figma" | "FlutterTwoTone" | "FramedLetterI" | "Gear" | "Github" | "GoTwoTone" | "GraphQLTwoTone" | "HeartOutline" | "Home" | "HorizontalArrows" | "Info" | "JavaScriptTwoTone" | "JavaTwoTone" | "KotlinTwoTone" | "LeftArrow" | "LightningOnRoundedSquare" | "LinkIcon" | "LoadingSpinner" | "Lock" | "Logo" | "LogoBolt" | "LogoOnCircle" | "MagicWand" | "Minus" | "Monitor" | "NodeAdd" | "NotEye" | "PaperPlane" | "Pencil" | "Person" | "PersonCircle" | "PiggyBank" | "Plus" | "PythonTwoTone" | "QRCodeIcon" | "QuestionCircle" | "QuestionCircleStrong" | "ReactTwoTone" | "Recycling" | "Remove" | "Restart" | "RightArrow" | "Roadmap" | "RustTwoTone" | "Satoshi" | "SatoshiRounded" | "Search" | "SecurityKey" | "Selector" | "SemiCircleOverlap" | "Share" | "ShieldCheck" | "Sidebar" | "Sort" | "StackedLines" | "SwiftTwoTone" | "TapSingle" | "Team" | "Terminal" | "Trash" | "TwoArrowsDown" | "TwoArrowsUp" | "Uma" | "UmaBridgeLoading" | "Upload" | "WalletSDKIcon" | "WarningSign";
         bg: string;
         smBg: string;
         c05Neutral: string;
@@ -8733,7 +8805,6 @@ declare function setFonts(theme: Theme, fontFamilies: FontFamilies): {
         text: string;
         vlcNeutral: string;
         warning: string;
-        inputBackground: string;
     };
     controls: {
         type: Themes;
@@ -10437,7 +10508,11 @@ declare function setFonts(theme: Theme, fontFamilies: FontFamilies): {
                 Large: number;
             };
         };
-        loading: "Code" | "LoadingSpinner" | "AI" | "AnchorLink" | "ApiConnection" | "AppIcon" | "ArrowCircle" | "ArrowCircleTier1" | "ArrowCircleTier2" | "ArrowCircleTier3" | "ArrowCornerDownRight" | "ArrowDown" | "ArrowUp" | "ArrowUpRightCircleFill" | "Bank" | "BitcoinB" | "BitcoinBOnRoundedSquare" | "CameraCapture" | "CaretRight" | "CentralArrowShareRight" | "Checkmark" | "CheckmarkCircleGreen" | "CheckmarkCircleTier1" | "CheckmarkCircleTier2" | "CheckmarkCircleTier3" | "Chevron" | "ChevronLeft" | "CircleCheck" | "CircleCheckOutline" | "CirclePlus" | "Clock" | "Close" | "Copy" | "CreditCard" | "DeleteIcon" | "Dollar" | "DollarManrope" | "DollarManropeSmall" | "DotGrid1x3Horizontal" | "Download" | "Envelope" | "ExclamationPoint" | "Explorer" | "Eye" | "EyeDropper" | "Figma" | "FlutterTwoTone" | "FramedLetterI" | "Gear" | "Github" | "GoTwoTone" | "GraphQLTwoTone" | "HeartOutline" | "Home" | "HorizontalArrows" | "Info" | "JavaScriptTwoTone" | "JavaTwoTone" | "KotlinTwoTone" | "LeftArrow" | "LightningOnRoundedSquare" | "LinkIcon" | "Lock" | "Logo" | "LogoBolt" | "LogoOnCircle" | "MagicWand" | "Minus" | "Monitor" | "NodeAdd" | "NotEye" | "PaperPlane" | "Pencil" | "Person" | "PersonCircle" | "PiggyBank" | "Plus" | "PythonTwoTone" | "QRCodeIcon" | "QuestionCircle" | "QuestionCircleStrong" | "ReactTwoTone" | "Recycling" | "Remove" | "Restart" | "RightArrow" | "Roadmap" | "RustTwoTone" | "Satoshi" | "SatoshiRounded" | "Search" | "SecurityKey" | "Selector" | "SemiCircleOverlap" | "Share" | "ShieldCheck" | "Sidebar" | "Sort" | "StackedLines" | "SwiftTwoTone" | "TapSingle" | "Team" | "Terminal" | "Trash" | "TwoArrowsDown" | "TwoArrowsUp" | "Uma" | "UmaBridgeLoading" | "Upload" | "WalletSDKIcon" | "WarningSign";
+        badge: {
+            bg: ThemeOrColorKey;
+        };
+        inputBackground: string;
+        loading: "Code" | "AI" | "AnchorLink" | "ApiConnection" | "AppIcon" | "ArrowCircle" | "ArrowCircleTier1" | "ArrowCircleTier2" | "ArrowCircleTier3" | "ArrowCornerDownRight" | "ArrowDown" | "ArrowUp" | "ArrowUpRightCircleFill" | "Bank" | "BitcoinB" | "BitcoinBOnRoundedSquare" | "CameraCapture" | "CaretRight" | "CentralArrowShareRight" | "Checkmark" | "CheckmarkCircleGreen" | "CheckmarkCircleTier1" | "CheckmarkCircleTier2" | "CheckmarkCircleTier3" | "Chevron" | "ChevronLeft" | "CircleCheck" | "CircleCheckOutline" | "CirclePlus" | "Clock" | "Close" | "Copy" | "CreditCard" | "DeleteIcon" | "Dollar" | "DollarManrope" | "DollarManropeSmall" | "DotGrid1x3Horizontal" | "Download" | "Envelope" | "ExclamationPoint" | "Explorer" | "Eye" | "EyeDropper" | "Figma" | "FlutterTwoTone" | "FramedLetterI" | "Gear" | "Github" | "GoTwoTone" | "GraphQLTwoTone" | "HeartOutline" | "Home" | "HorizontalArrows" | "Info" | "JavaScriptTwoTone" | "JavaTwoTone" | "KotlinTwoTone" | "LeftArrow" | "LightningOnRoundedSquare" | "LinkIcon" | "LoadingSpinner" | "Lock" | "Logo" | "LogoBolt" | "LogoOnCircle" | "MagicWand" | "Minus" | "Monitor" | "NodeAdd" | "NotEye" | "PaperPlane" | "Pencil" | "Person" | "PersonCircle" | "PiggyBank" | "Plus" | "PythonTwoTone" | "QRCodeIcon" | "QuestionCircle" | "QuestionCircleStrong" | "ReactTwoTone" | "Recycling" | "Remove" | "Restart" | "RightArrow" | "Roadmap" | "RustTwoTone" | "Satoshi" | "SatoshiRounded" | "Search" | "SecurityKey" | "Selector" | "SemiCircleOverlap" | "Share" | "ShieldCheck" | "Sidebar" | "Sort" | "StackedLines" | "SwiftTwoTone" | "TapSingle" | "Team" | "Terminal" | "Trash" | "TwoArrowsDown" | "TwoArrowsUp" | "Uma" | "UmaBridgeLoading" | "Upload" | "WalletSDKIcon" | "WarningSign";
         bg: string;
         smBg: string;
         c05Neutral: string;
@@ -10466,7 +10541,6 @@ declare function setFonts(theme: Theme, fontFamilies: FontFamilies): {
         text: string;
         vlcNeutral: string;
         warning: string;
-        inputBackground: string;
     };
 };
 declare function isThemeColorKey(key: unknown): key is ThemeColorKey;
@@ -10486,71 +10560,14 @@ declare const themeOr: (lightValue: string, darkValue: string) => ({ theme }: {
 }) => string;
 declare function ifLight(style: CSSInterpolation): ({ theme }: {
     theme: LightsparkTheme;
-}) => _emotion_react.SerializedStyles | "";
+}) => "" | _emotion_react.SerializedStyles;
 declare function ifDark(style: CSSInterpolation): ({ theme }: {
     theme: LightsparkTheme;
-}) => _emotion_react.SerializedStyles | "";
+}) => "" | _emotion_react.SerializedStyles;
 declare function useThemeBg(): string;
 type ThemeProp = {
     theme: Theme;
 };
 type WithTheme<T extends Record<string, unknown>> = T & ThemeProp;
 
-type PaddingYKey = "short" | "regular";
-type PaddingY = number | {
-    [key in PaddingYKey]: number;
-};
-declare const buttonBorderRadiuses: readonly [8, 32];
-type ButtonBorderRadius = (typeof buttonBorderRadiuses)[number];
-declare const allowedButtonTypographyTypes: readonly ["Body", "Body Strong", "Title", "Label", "Label Moderate", "Label Strong"];
-type AllowedButtonTypographyTypes = (typeof allowedButtonTypographyTypes)[number];
-type ButtonTypographyArgs = {
-    type?: AllowedButtonTypographyTypes;
-    color?: ThemeOrColorKey;
-};
-declare const buttonsThemeBase: {
-    defaultSize: TokenSizeKey;
-    defaultTypographyType: "Title" | "Body" | "Body Strong" | "Label" | "Label Moderate" | "Label Strong";
-    defaultColor: ThemeOrColorKey;
-    defaultBorderRadius: 8 | 32;
-    defaultBorderWidth: number;
-    defaultBackgroundColor: BackgroundColorKeyArg;
-    defaultBorderColor: BackgroundColorKeyArg;
-    defaultHoverBackgroundColor: BackgroundColorKeyArg;
-    defaultHoverBorderColor: BackgroundColorKeyArg;
-    defaultOutlineOffset: number;
-    defaultPaddingsY: {
-        ExtraSmall: number;
-        Small: PaddingY;
-        Schmedium: number;
-        Medium: number;
-        Mlarge: number;
-        Large: number;
-    };
-    kinds: {};
-};
-type ButtonsThemeKey = keyof typeof buttonsThemeBase;
-type ButtonKindsProps = Record<string, Partial<typeof buttonsThemeBase>>;
-declare const defaultButtonsTheme: {
-    kinds: ButtonKindsProps;
-    defaultSize: TokenSizeKey;
-    defaultTypographyType: "Title" | "Body" | "Body Strong" | "Label" | "Label Moderate" | "Label Strong";
-    defaultColor: ThemeOrColorKey;
-    defaultBorderRadius: 8 | 32;
-    defaultBorderWidth: number;
-    defaultBackgroundColor: BackgroundColorKeyArg;
-    defaultBorderColor: BackgroundColorKeyArg;
-    defaultHoverBackgroundColor: BackgroundColorKeyArg;
-    defaultHoverBorderColor: BackgroundColorKeyArg;
-    defaultOutlineOffset: number;
-    defaultPaddingsY: {
-        ExtraSmall: number;
-        Small: PaddingY;
-        Schmedium: number;
-        Medium: number;
-        Mlarge: number;
-        Large: number;
-    };
-};
-
-export { AllowedButtonTypographyTypes as A, ButtonTypographyArgs as B, defaultButtonsTheme as C, FontColorKey as F, LightsparkTheme as L, PaddingYKey as P, SurfaceThemeColorKey as S, ThemeOrColorKey as T, WithTheme as W, ButtonBorderRadius as a, ThemeProp as b, Themes as c, themes as d, isThemeOrColorKey as e, getFontColor as f, getColor as g, BackgroundColorKey as h, isThemeColorKey as i, BackgroundColorKeyArg as j, isBackgroundColorKey as k, isBackgroundColorKeyTuple as l, getBackgroundColor as m, isDark as n, isLight as o, themeOr as p, ifLight as q, ifDark as r, setFonts as s, themeOrColorKeyValues as t, useThemeBg as u, PaddingY as v, buttonBorderRadiuses as w, allowedButtonTypographyTypes as x, buttonsThemeBase as y, ButtonsThemeKey as z };
+export { AllowedButtonTypographyTypes as A, ButtonTypographyArgs as B, useThemeBg as C, FontColorKey as F, LightsparkTheme as L, PaddingYKey as P, SurfaceThemeColorKey as S, ThemeOrColorKey as T, WithTheme as W, ButtonBorderRadius as a, ThemeProp as b, PaddingY as c, buttonBorderRadiuses as d, allowedButtonTypographyTypes as e, buttonsThemeBase as f, ButtonsThemeKey as g, defaultButtonsTheme as h, Themes as i, themes as j, isThemeColorKey as k, isThemeOrColorKey as l, getColor as m, getFontColor as n, BackgroundColorKey as o, BackgroundColorKeyArg as p, isBackgroundColorKey as q, isBackgroundColorKeyTuple as r, setFonts as s, themeOrColorKeyValues as t, getBackgroundColor as u, isDark as v, isLight as w, themeOr as x, ifLight as y, ifDark as z };

package/dist/utils/toNonTypographicReactNodes.cjs

@@ -4028,7 +4028,6 @@ var neutral = {
   gray30: "#4D4D4D",
   gray40: "#666666",
   gray50: "#808080",
-  gray57: "#8B8E98",
   gray60: "#999999",
   gray70: "#B3B3B3",
   gray80: "#CCCCCC",
@@ -4052,10 +4051,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",
@@ -7376,8 +7378,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),
@@ -7389,6 +7390,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;
@@ -7426,7 +7431,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, {
@@ -7542,7 +7550,10 @@ var bridgeBaseSettings = {
         defaultBorderWidth: 1
       }
     }
-  })
+  }),
+  badge: {
+    bg: "grayBlue94"
+  }
 };
 var bridgeLightTheme = extend(lightTheme, __spreadProps(__spreadValues({}, bridgeBaseSettings), {
   type: "bridgeLight" /* BridgeLight */,

package/dist/utils/toNonTypographicReactNodes.d.cts

@@ -1,6 +1,6 @@
 import * as _emotion_react_jsx_runtime from '@emotion/react/jsx-runtime';
 import { IconName } from '../components/Icon/types.cjs';
-import { F as FontColorKey } from '../buttons-36cdd0fe.js';
+import { F as FontColorKey } from '../themes-37e92940.js';
 import { NewRoutesType } from '../types/index.cjs';
 import '../index-dcf19aa7.js';
 import '../icons/AI.cjs';

package/dist/utils/toNonTypographicReactNodes.d.ts

@@ -1,6 +1,6 @@
 import * as _emotion_react_jsx_runtime from '@emotion/react/jsx-runtime';
 import { IconName } from '../components/Icon/types.js';
-import { F as FontColorKey } from '../buttons-35280bfe.js';
+import { F as FontColorKey } from '../themes-832e46b2.js';
 import { NewRoutesType } from '../types/index.js';
 import '../index-71766330.js';
 import '../icons/AI.js';

package/dist/utils/toNonTypographicReactNodes.js

@@ -5,10 +5,10 @@ import {
   isNextLinkNode,
   isTextNode,
   toNonTypographicReactNodes
-} from "../chunk-XDP7GCYE.js";
+} from "../chunk-HNK2KIC7.js";
 import "../chunk-OPV246QW.js";
-import "../chunk-AAFUVYVP.js";
-import "../chunk-I3FI3FNP.js";
+import "../chunk-SCIQSZSW.js";
+import "../chunk-LAGOF7IU.js";
 import "../chunk-EDN2QDCB.js";
 import "../chunk-FT62PIPN.js";
 import "../chunk-5ZDDVLS6.js";
@@ -123,12 +123,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 {
   isExternalLinkNode,

package/dist/utils/toReactNodes.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 });
@@ -67,12 +79,17 @@ var __async = (__this, __arguments, generator) => {
 // src/utils/toReactNodes.tsx
 var toReactNodes_exports = {};
 __export(toReactNodes_exports, {
+  setDefaultReactNodesTypography: () => setDefaultReactNodesTypography,
   setReactNodesTypography: () => setReactNodesTypography,
   toReactNodes: () => toReactNodes,
   toReactNodesWithTypographyMap: () => toReactNodesWithTypographyMap
 });
 module.exports = __toCommonJS(toReactNodes_exports);
-var import_react21 = require("react");
+var import_lodash_es4 = require("lodash-es");
+var import_react22 = require("react");
+
+// src/components/typography/renderTypography.tsx
+var import_react21 = __toESM(require("react"), 1);
 
 // src/components/typography/Body.tsx
 var import_styled3 = __toESM(require("@emotion/styled"), 1);
@@ -262,7 +279,6 @@ var neutral = {
   gray30: "#4D4D4D",
   gray40: "#666666",
   gray50: "#808080",
-  gray57: "#8B8E98",
   gray60: "#999999",
   gray70: "#B3B3B3",
   gray80: "#CCCCCC",
@@ -286,10 +302,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",
@@ -3584,8 +3603,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),
@@ -3597,6 +3615,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;
@@ -3634,7 +3656,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, {
@@ -3750,7 +3775,10 @@ var bridgeBaseSettings = {
         defaultBorderWidth: 1
       }
     }
-  })
+  }),
+  badge: {
+    bg: "grayBlue94"
+  }
 };
 var bridgeLightTheme = extend(lightTheme, __spreadProps(__spreadValues({}, bridgeBaseSettings), {
   type: "bridgeLight" /* BridgeLight */,
@@ -8210,7 +8238,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,
@@ -8222,36 +8249,36 @@ 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);
 };
 
 // src/utils/toReactNodes.tsx
-var import_jsx_runtime129 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime128 = require("@emotion/react/jsx-runtime");
 function toReactNodes(toReactNodesArg) {
   const toReactNodesArray = Array.isArray(toReactNodesArg) ? toReactNodesArg : [toReactNodesArg];
   const reactNodes = toReactNodesArray.map((node, i) => {
     let content;
     if (!node) {
       return null;
-    } else if (typeof node !== "string" && "typography" in node && node.typography.type && node.typography.props) {
-      content = /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(import_react21.Fragment, { children: renderTypography(
+    } else if (typeof node !== "string" && "typography" in node && node.typography.type) {
+      const props = node.typography.props || {};
+      content = /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(import_react22.Fragment, { children: renderTypography(
         node.typography.type,
-        Object.assign(node.typography.props, {
-          content: node
-        })
+        Object.assign(props, { content: node })
       ) }, `typography-${i}-${node.text.substr(0, 10)}`);
     } else {
       content = toNonTypographicReactNodes(node);
     }
     return content || null;
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(import_react21.Fragment, { children: reactNodes });
+  return /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(import_react22.Fragment, { children: reactNodes });
 }
-function setReactNodesTypography(nodesArg, nodesTypographyMap) {
+function setReactNodesTypography(nodesArg, nodesTypographyMap, replaceExistingTypography = true) {
   const nodes = Array.isArray(nodesArg) ? nodesArg : [nodesArg];
   const nodesWithTypography = nodes.map((node, i) => {
     if (isIconNode(node)) {
@@ -8263,28 +8290,32 @@ function setReactNodesTypography(nodesArg, nodesTypographyMap) {
           typography: nodesTypographyMap.text
         };
       }
-    } else if (isLinkNode(node)) {
+    } else if (!node) {
+      return node;
+    }
+    const useExistingTypography = !replaceExistingTypography && (0, import_lodash_es4.isObject)(node) && "typography" in node ? node.typography : void 0;
+    if (isLinkNode(node)) {
       if (nodesTypographyMap.link) {
         return __spreadProps(__spreadValues({}, node), {
-          typography: nodesTypographyMap.link
+          typography: useExistingTypography || nodesTypographyMap.link
         });
       }
     } else if (isExternalLinkNode(node)) {
       if (nodesTypographyMap.externalLink) {
         return __spreadProps(__spreadValues({}, node), {
-          typography: nodesTypographyMap.externalLink
+          typography: useExistingTypography || nodesTypographyMap.externalLink
         });
       }
     } else if (isNextLinkNode(node)) {
       if (nodesTypographyMap.nextLink) {
         return __spreadProps(__spreadValues({}, node), {
-          typography: nodesTypographyMap.nextLink
+          typography: useExistingTypography || nodesTypographyMap.nextLink
         });
       }
     } else if (isTextNode(node)) {
       if (nodesTypographyMap.text) {
         return __spreadProps(__spreadValues({}, node), {
-          typography: nodesTypographyMap.text
+          typography: useExistingTypography || nodesTypographyMap.text
         });
       }
     }
@@ -8303,8 +8334,12 @@ function toReactNodesWithTypographyMap(nodesArg, nodesTypographyMap) {
   const nodes = toReactNodes(nodesWithTypography);
   return nodes;
 }
+function setDefaultReactNodesTypography(nodesArg, nodesTypographyMap) {
+  return setReactNodesTypography(nodesArg, nodesTypographyMap, false);
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  setDefaultReactNodesTypography,
   setReactNodesTypography,
   toReactNodes,
   toReactNodesWithTypographyMap