@lightsparkdev/ui 1.0.1 → 1.0.3

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @lightsparkdev/ui
 
+## 1.0.3
+
+### Patch Changes
+
+- e647962: Updates to Button, CodeInput, Drawer, Icon, Modal, Video
+
+## 1.0.2
+
+### Patch Changes
+
+- 5b0016e: - Make default typography themeable for Button
+- 5b0016e: - Add useDocumentTitle effect
+
 ## 1.0.1
 
 ### Patch Changes

package/dist/{buttons-38b5823f.d.ts → buttons-35280bfe.d.ts}

@@ -43,6 +43,7 @@ declare const baseThemeColors: {
     text: string;
     vlcNeutral: string;
     warning: string;
+    inputBackground: string;
 };
 type ThemeColorKey = keyof typeof baseThemeColors;
 declare const themeOrColorKeyValues: readonly string[];
@@ -1711,7 +1712,8 @@ declare const baseTheme: {
         kinds: {
             [x: string]: Partial<{
                 defaultSize: TokenSizeKey;
-                defaultTypography: "Title" | "Body" | "Body Strong" | "Label" | "Label Moderate" | "Label Strong";
+                defaultTypographyType: "Title" | "Body" | "Body Strong" | "Label" | "Label Moderate" | "Label Strong";
+                defaultColor: ThemeOrColorKey;
                 defaultBorderRadius: 8 | 32;
                 defaultBorderWidth: number;
                 defaultBackgroundColor: BackgroundColorKeyArg;
@@ -1731,7 +1733,8 @@ declare const baseTheme: {
             }>;
         };
         defaultSize: TokenSizeKey;
-        defaultTypography: "Title" | "Body" | "Body Strong" | "Label" | "Label Moderate" | "Label Strong";
+        defaultTypographyType: "Title" | "Body" | "Body Strong" | "Label" | "Label Moderate" | "Label Strong";
+        defaultColor: ThemeOrColorKey;
         defaultBorderRadius: 8 | 32;
         defaultBorderWidth: number;
         defaultBackgroundColor: BackgroundColorKeyArg;
@@ -1777,6 +1780,7 @@ declare const baseTheme: {
     text: string;
     vlcNeutral: string;
     warning: string;
+    inputBackground: string;
 };
 type BaseTheme = typeof baseTheme;
 type LightsparkSurfaces = {
@@ -3463,7 +3467,8 @@ declare function setFonts(theme: Theme, fontFamilies: FontFamilies): {
         kinds: {
             [x: string]: Partial<{
                 defaultSize: TokenSizeKey;
-                defaultTypography: "Title" | "Body" | "Body Strong" | "Label" | "Label Moderate" | "Label Strong";
+                defaultTypographyType: "Title" | "Body" | "Body Strong" | "Label" | "Label Moderate" | "Label Strong";
+                defaultColor: ThemeOrColorKey;
                 defaultBorderRadius: 8 | 32;
                 defaultBorderWidth: number;
                 defaultBackgroundColor: BackgroundColorKeyArg;
@@ -3483,7 +3488,8 @@ declare function setFonts(theme: Theme, fontFamilies: FontFamilies): {
             }>;
         };
         defaultSize: TokenSizeKey;
-        defaultTypography: "Title" | "Body" | "Body Strong" | "Label" | "Label Moderate" | "Label Strong";
+        defaultTypographyType: "Title" | "Body" | "Body Strong" | "Label" | "Label Moderate" | "Label Strong";
+        defaultColor: ThemeOrColorKey;
         defaultBorderRadius: 8 | 32;
         defaultBorderWidth: number;
         defaultBackgroundColor: BackgroundColorKeyArg;
@@ -3529,6 +3535,7 @@ declare function setFonts(theme: Theme, fontFamilies: FontFamilies): {
     text: string;
     vlcNeutral: string;
     warning: string;
+    inputBackground: string;
     header: {
         type: Themes;
         typography: {
@@ -5192,7 +5199,8 @@ declare function setFonts(theme: Theme, fontFamilies: FontFamilies): {
             kinds: {
                 [x: string]: Partial<{
                     defaultSize: TokenSizeKey;
-                    defaultTypography: "Title" | "Body" | "Body Strong" | "Label" | "Label Moderate" | "Label Strong";
+                    defaultTypographyType: "Title" | "Body" | "Body Strong" | "Label" | "Label Moderate" | "Label Strong";
+                    defaultColor: ThemeOrColorKey;
                     defaultBorderRadius: 8 | 32;
                     defaultBorderWidth: number;
                     defaultBackgroundColor: BackgroundColorKeyArg;
@@ -5212,7 +5220,8 @@ declare function setFonts(theme: Theme, fontFamilies: FontFamilies): {
                 }>;
             };
             defaultSize: TokenSizeKey;
-            defaultTypography: "Title" | "Body" | "Body Strong" | "Label" | "Label Moderate" | "Label Strong";
+            defaultTypographyType: "Title" | "Body" | "Body Strong" | "Label" | "Label Moderate" | "Label Strong";
+            defaultColor: ThemeOrColorKey;
             defaultBorderRadius: 8 | 32;
             defaultBorderWidth: number;
             defaultBackgroundColor: BackgroundColorKeyArg;
@@ -5258,6 +5267,7 @@ declare function setFonts(theme: Theme, fontFamilies: FontFamilies): {
         text: string;
         vlcNeutral: string;
         warning: string;
+        inputBackground: string;
     };
     nav: {
         type: Themes;
@@ -6922,7 +6932,8 @@ declare function setFonts(theme: Theme, fontFamilies: FontFamilies): {
             kinds: {
                 [x: string]: Partial<{
                     defaultSize: TokenSizeKey;
-                    defaultTypography: "Title" | "Body" | "Body Strong" | "Label" | "Label Moderate" | "Label Strong";
+                    defaultTypographyType: "Title" | "Body" | "Body Strong" | "Label" | "Label Moderate" | "Label Strong";
+                    defaultColor: ThemeOrColorKey;
                     defaultBorderRadius: 8 | 32;
                     defaultBorderWidth: number;
                     defaultBackgroundColor: BackgroundColorKeyArg;
@@ -6942,7 +6953,8 @@ declare function setFonts(theme: Theme, fontFamilies: FontFamilies): {
                 }>;
             };
             defaultSize: TokenSizeKey;
-            defaultTypography: "Title" | "Body" | "Body Strong" | "Label" | "Label Moderate" | "Label Strong";
+            defaultTypographyType: "Title" | "Body" | "Body Strong" | "Label" | "Label Moderate" | "Label Strong";
+            defaultColor: ThemeOrColorKey;
             defaultBorderRadius: 8 | 32;
             defaultBorderWidth: number;
             defaultBackgroundColor: BackgroundColorKeyArg;
@@ -6988,6 +7000,7 @@ declare function setFonts(theme: Theme, fontFamilies: FontFamilies): {
         text: string;
         vlcNeutral: string;
         warning: string;
+        inputBackground: string;
     };
     content: {
         type: Themes;
@@ -8652,7 +8665,8 @@ declare function setFonts(theme: Theme, fontFamilies: FontFamilies): {
             kinds: {
                 [x: string]: Partial<{
                     defaultSize: TokenSizeKey;
-                    defaultTypography: "Title" | "Body" | "Body Strong" | "Label" | "Label Moderate" | "Label Strong";
+                    defaultTypographyType: "Title" | "Body" | "Body Strong" | "Label" | "Label Moderate" | "Label Strong";
+                    defaultColor: ThemeOrColorKey;
                     defaultBorderRadius: 8 | 32;
                     defaultBorderWidth: number;
                     defaultBackgroundColor: BackgroundColorKeyArg;
@@ -8672,7 +8686,8 @@ declare function setFonts(theme: Theme, fontFamilies: FontFamilies): {
                 }>;
             };
             defaultSize: TokenSizeKey;
-            defaultTypography: "Title" | "Body" | "Body Strong" | "Label" | "Label Moderate" | "Label Strong";
+            defaultTypographyType: "Title" | "Body" | "Body Strong" | "Label" | "Label Moderate" | "Label Strong";
+            defaultColor: ThemeOrColorKey;
             defaultBorderRadius: 8 | 32;
             defaultBorderWidth: number;
             defaultBackgroundColor: BackgroundColorKeyArg;
@@ -8718,6 +8733,7 @@ declare function setFonts(theme: Theme, fontFamilies: FontFamilies): {
         text: string;
         vlcNeutral: string;
         warning: string;
+        inputBackground: string;
     };
     controls: {
         type: Themes;
@@ -10382,7 +10398,8 @@ declare function setFonts(theme: Theme, fontFamilies: FontFamilies): {
             kinds: {
                 [x: string]: Partial<{
                     defaultSize: TokenSizeKey;
-                    defaultTypography: "Title" | "Body" | "Body Strong" | "Label" | "Label Moderate" | "Label Strong";
+                    defaultTypographyType: "Title" | "Body" | "Body Strong" | "Label" | "Label Moderate" | "Label Strong";
+                    defaultColor: ThemeOrColorKey;
                     defaultBorderRadius: 8 | 32;
                     defaultBorderWidth: number;
                     defaultBackgroundColor: BackgroundColorKeyArg;
@@ -10402,7 +10419,8 @@ declare function setFonts(theme: Theme, fontFamilies: FontFamilies): {
                 }>;
             };
             defaultSize: TokenSizeKey;
-            defaultTypography: "Title" | "Body" | "Body Strong" | "Label" | "Label Moderate" | "Label Strong";
+            defaultTypographyType: "Title" | "Body" | "Body Strong" | "Label" | "Label Moderate" | "Label Strong";
+            defaultColor: ThemeOrColorKey;
             defaultBorderRadius: 8 | 32;
             defaultBorderWidth: number;
             defaultBackgroundColor: BackgroundColorKeyArg;
@@ -10448,6 +10466,7 @@ declare function setFonts(theme: Theme, fontFamilies: FontFamilies): {
         text: string;
         vlcNeutral: string;
         warning: string;
+        inputBackground: string;
     };
 };
 declare function isThemeColorKey(key: unknown): key is ThemeColorKey;
@@ -10485,9 +10504,14 @@ 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;
-    defaultTypography: "Title" | "Body" | "Body Strong" | "Label" | "Label Moderate" | "Label Strong";
+    defaultTypographyType: "Title" | "Body" | "Body Strong" | "Label" | "Label Moderate" | "Label Strong";
+    defaultColor: ThemeOrColorKey;
     defaultBorderRadius: 8 | 32;
     defaultBorderWidth: number;
     defaultBackgroundColor: BackgroundColorKeyArg;
@@ -10510,7 +10534,8 @@ type ButtonKindsProps = Record<string, Partial<typeof buttonsThemeBase>>;
 declare const defaultButtonsTheme: {
     kinds: ButtonKindsProps;
     defaultSize: TokenSizeKey;
-    defaultTypography: "Title" | "Body" | "Body Strong" | "Label" | "Label Moderate" | "Label Strong";
+    defaultTypographyType: "Title" | "Body" | "Body Strong" | "Label" | "Label Moderate" | "Label Strong";
+    defaultColor: ThemeOrColorKey;
     defaultBorderRadius: 8 | 32;
     defaultBorderWidth: number;
     defaultBackgroundColor: BackgroundColorKeyArg;
@@ -10528,4 +10553,4 @@ declare const defaultButtonsTheme: {
     };
 };
 
-export { AllowedButtonTypographyTypes as A, ButtonBorderRadius as B, FontColorKey as F, LightsparkTheme as L, PaddingYKey as P, SurfaceThemeColorKey as S, ThemeOrColorKey as T, WithTheme as W, ThemeProp as a, Themes as b, themes as c, isThemeOrColorKey as d, getFontColor as e, BackgroundColorKey as f, getColor as g, BackgroundColorKeyArg as h, isThemeColorKey as i, isBackgroundColorKey as j, isBackgroundColorKeyTuple as k, getBackgroundColor as l, isDark as m, isLight as n, themeOr as o, ifLight as p, ifDark as q, PaddingY as r, setFonts as s, themeOrColorKeyValues as t, useThemeBg as u, buttonBorderRadiuses as v, allowedButtonTypographyTypes as w, buttonsThemeBase as x, ButtonsThemeKey as y, defaultButtonsTheme as z };
+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 };

package/dist/{buttons-a63671c2.d.ts → buttons-36cdd0fe.d.ts}

@@ -43,6 +43,7 @@ declare const baseThemeColors: {
     text: string;
     vlcNeutral: string;
     warning: string;
+    inputBackground: string;
 };
 type ThemeColorKey = keyof typeof baseThemeColors;
 declare const themeOrColorKeyValues: readonly string[];
@@ -1711,7 +1712,8 @@ declare const baseTheme: {
         kinds: {
             [x: string]: Partial<{
                 defaultSize: TokenSizeKey;
-                defaultTypography: "Title" | "Body" | "Body Strong" | "Label" | "Label Moderate" | "Label Strong";
+                defaultTypographyType: "Title" | "Body" | "Body Strong" | "Label" | "Label Moderate" | "Label Strong";
+                defaultColor: ThemeOrColorKey;
                 defaultBorderRadius: 8 | 32;
                 defaultBorderWidth: number;
                 defaultBackgroundColor: BackgroundColorKeyArg;
@@ -1731,7 +1733,8 @@ declare const baseTheme: {
             }>;
         };
         defaultSize: TokenSizeKey;
-        defaultTypography: "Title" | "Body" | "Body Strong" | "Label" | "Label Moderate" | "Label Strong";
+        defaultTypographyType: "Title" | "Body" | "Body Strong" | "Label" | "Label Moderate" | "Label Strong";
+        defaultColor: ThemeOrColorKey;
         defaultBorderRadius: 8 | 32;
         defaultBorderWidth: number;
         defaultBackgroundColor: BackgroundColorKeyArg;
@@ -1777,6 +1780,7 @@ declare const baseTheme: {
     text: string;
     vlcNeutral: string;
     warning: string;
+    inputBackground: string;
 };
 type BaseTheme = typeof baseTheme;
 type LightsparkSurfaces = {
@@ -3463,7 +3467,8 @@ declare function setFonts(theme: Theme, fontFamilies: FontFamilies): {
         kinds: {
             [x: string]: Partial<{
                 defaultSize: TokenSizeKey;
-                defaultTypography: "Title" | "Body" | "Body Strong" | "Label" | "Label Moderate" | "Label Strong";
+                defaultTypographyType: "Title" | "Body" | "Body Strong" | "Label" | "Label Moderate" | "Label Strong";
+                defaultColor: ThemeOrColorKey;
                 defaultBorderRadius: 8 | 32;
                 defaultBorderWidth: number;
                 defaultBackgroundColor: BackgroundColorKeyArg;
@@ -3483,7 +3488,8 @@ declare function setFonts(theme: Theme, fontFamilies: FontFamilies): {
             }>;
         };
         defaultSize: TokenSizeKey;
-        defaultTypography: "Title" | "Body" | "Body Strong" | "Label" | "Label Moderate" | "Label Strong";
+        defaultTypographyType: "Title" | "Body" | "Body Strong" | "Label" | "Label Moderate" | "Label Strong";
+        defaultColor: ThemeOrColorKey;
         defaultBorderRadius: 8 | 32;
         defaultBorderWidth: number;
         defaultBackgroundColor: BackgroundColorKeyArg;
@@ -3529,6 +3535,7 @@ declare function setFonts(theme: Theme, fontFamilies: FontFamilies): {
     text: string;
     vlcNeutral: string;
     warning: string;
+    inputBackground: string;
     header: {
         type: Themes;
         typography: {
@@ -5192,7 +5199,8 @@ declare function setFonts(theme: Theme, fontFamilies: FontFamilies): {
             kinds: {
                 [x: string]: Partial<{
                     defaultSize: TokenSizeKey;
-                    defaultTypography: "Title" | "Body" | "Body Strong" | "Label" | "Label Moderate" | "Label Strong";
+                    defaultTypographyType: "Title" | "Body" | "Body Strong" | "Label" | "Label Moderate" | "Label Strong";
+                    defaultColor: ThemeOrColorKey;
                     defaultBorderRadius: 8 | 32;
                     defaultBorderWidth: number;
                     defaultBackgroundColor: BackgroundColorKeyArg;
@@ -5212,7 +5220,8 @@ declare function setFonts(theme: Theme, fontFamilies: FontFamilies): {
                 }>;
             };
             defaultSize: TokenSizeKey;
-            defaultTypography: "Title" | "Body" | "Body Strong" | "Label" | "Label Moderate" | "Label Strong";
+            defaultTypographyType: "Title" | "Body" | "Body Strong" | "Label" | "Label Moderate" | "Label Strong";
+            defaultColor: ThemeOrColorKey;
             defaultBorderRadius: 8 | 32;
             defaultBorderWidth: number;
             defaultBackgroundColor: BackgroundColorKeyArg;
@@ -5258,6 +5267,7 @@ declare function setFonts(theme: Theme, fontFamilies: FontFamilies): {
         text: string;
         vlcNeutral: string;
         warning: string;
+        inputBackground: string;
     };
     nav: {
         type: Themes;
@@ -6922,7 +6932,8 @@ declare function setFonts(theme: Theme, fontFamilies: FontFamilies): {
             kinds: {
                 [x: string]: Partial<{
                     defaultSize: TokenSizeKey;
-                    defaultTypography: "Title" | "Body" | "Body Strong" | "Label" | "Label Moderate" | "Label Strong";
+                    defaultTypographyType: "Title" | "Body" | "Body Strong" | "Label" | "Label Moderate" | "Label Strong";
+                    defaultColor: ThemeOrColorKey;
                     defaultBorderRadius: 8 | 32;
                     defaultBorderWidth: number;
                     defaultBackgroundColor: BackgroundColorKeyArg;
@@ -6942,7 +6953,8 @@ declare function setFonts(theme: Theme, fontFamilies: FontFamilies): {
                 }>;
             };
             defaultSize: TokenSizeKey;
-            defaultTypography: "Title" | "Body" | "Body Strong" | "Label" | "Label Moderate" | "Label Strong";
+            defaultTypographyType: "Title" | "Body" | "Body Strong" | "Label" | "Label Moderate" | "Label Strong";
+            defaultColor: ThemeOrColorKey;
             defaultBorderRadius: 8 | 32;
             defaultBorderWidth: number;
             defaultBackgroundColor: BackgroundColorKeyArg;
@@ -6988,6 +7000,7 @@ declare function setFonts(theme: Theme, fontFamilies: FontFamilies): {
         text: string;
         vlcNeutral: string;
         warning: string;
+        inputBackground: string;
     };
     content: {
         type: Themes;
@@ -8652,7 +8665,8 @@ declare function setFonts(theme: Theme, fontFamilies: FontFamilies): {
             kinds: {
                 [x: string]: Partial<{
                     defaultSize: TokenSizeKey;
-                    defaultTypography: "Title" | "Body" | "Body Strong" | "Label" | "Label Moderate" | "Label Strong";
+                    defaultTypographyType: "Title" | "Body" | "Body Strong" | "Label" | "Label Moderate" | "Label Strong";
+                    defaultColor: ThemeOrColorKey;
                     defaultBorderRadius: 8 | 32;
                     defaultBorderWidth: number;
                     defaultBackgroundColor: BackgroundColorKeyArg;
@@ -8672,7 +8686,8 @@ declare function setFonts(theme: Theme, fontFamilies: FontFamilies): {
                 }>;
             };
             defaultSize: TokenSizeKey;
-            defaultTypography: "Title" | "Body" | "Body Strong" | "Label" | "Label Moderate" | "Label Strong";
+            defaultTypographyType: "Title" | "Body" | "Body Strong" | "Label" | "Label Moderate" | "Label Strong";
+            defaultColor: ThemeOrColorKey;
             defaultBorderRadius: 8 | 32;
             defaultBorderWidth: number;
             defaultBackgroundColor: BackgroundColorKeyArg;
@@ -8718,6 +8733,7 @@ declare function setFonts(theme: Theme, fontFamilies: FontFamilies): {
         text: string;
         vlcNeutral: string;
         warning: string;
+        inputBackground: string;
     };
     controls: {
         type: Themes;
@@ -10382,7 +10398,8 @@ declare function setFonts(theme: Theme, fontFamilies: FontFamilies): {
             kinds: {
                 [x: string]: Partial<{
                     defaultSize: TokenSizeKey;
-                    defaultTypography: "Title" | "Body" | "Body Strong" | "Label" | "Label Moderate" | "Label Strong";
+                    defaultTypographyType: "Title" | "Body" | "Body Strong" | "Label" | "Label Moderate" | "Label Strong";
+                    defaultColor: ThemeOrColorKey;
                     defaultBorderRadius: 8 | 32;
                     defaultBorderWidth: number;
                     defaultBackgroundColor: BackgroundColorKeyArg;
@@ -10402,7 +10419,8 @@ declare function setFonts(theme: Theme, fontFamilies: FontFamilies): {
                 }>;
             };
             defaultSize: TokenSizeKey;
-            defaultTypography: "Title" | "Body" | "Body Strong" | "Label" | "Label Moderate" | "Label Strong";
+            defaultTypographyType: "Title" | "Body" | "Body Strong" | "Label" | "Label Moderate" | "Label Strong";
+            defaultColor: ThemeOrColorKey;
             defaultBorderRadius: 8 | 32;
             defaultBorderWidth: number;
             defaultBackgroundColor: BackgroundColorKeyArg;
@@ -10448,6 +10466,7 @@ declare function setFonts(theme: Theme, fontFamilies: FontFamilies): {
         text: string;
         vlcNeutral: string;
         warning: string;
+        inputBackground: string;
     };
 };
 declare function isThemeColorKey(key: unknown): key is ThemeColorKey;
@@ -10485,9 +10504,14 @@ 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;
-    defaultTypography: "Title" | "Body" | "Body Strong" | "Label" | "Label Moderate" | "Label Strong";
+    defaultTypographyType: "Title" | "Body" | "Body Strong" | "Label" | "Label Moderate" | "Label Strong";
+    defaultColor: ThemeOrColorKey;
     defaultBorderRadius: 8 | 32;
     defaultBorderWidth: number;
     defaultBackgroundColor: BackgroundColorKeyArg;
@@ -10510,7 +10534,8 @@ type ButtonKindsProps = Record<string, Partial<typeof buttonsThemeBase>>;
 declare const defaultButtonsTheme: {
     kinds: ButtonKindsProps;
     defaultSize: TokenSizeKey;
-    defaultTypography: "Title" | "Body" | "Body Strong" | "Label" | "Label Moderate" | "Label Strong";
+    defaultTypographyType: "Title" | "Body" | "Body Strong" | "Label" | "Label Moderate" | "Label Strong";
+    defaultColor: ThemeOrColorKey;
     defaultBorderRadius: 8 | 32;
     defaultBorderWidth: number;
     defaultBackgroundColor: BackgroundColorKeyArg;
@@ -10528,4 +10553,4 @@ declare const defaultButtonsTheme: {
     };
 };
 
-export { AllowedButtonTypographyTypes as A, ButtonBorderRadius as B, FontColorKey as F, LightsparkTheme as L, PaddingYKey as P, SurfaceThemeColorKey as S, ThemeOrColorKey as T, WithTheme as W, ThemeProp as a, Themes as b, themes as c, isThemeOrColorKey as d, getFontColor as e, BackgroundColorKey as f, getColor as g, BackgroundColorKeyArg as h, isThemeColorKey as i, isBackgroundColorKey as j, isBackgroundColorKeyTuple as k, getBackgroundColor as l, isDark as m, isLight as n, themeOr as o, ifLight as p, ifDark as q, PaddingY as r, setFonts as s, themeOrColorKeyValues as t, useThemeBg as u, buttonBorderRadiuses as v, allowedButtonTypographyTypes as w, buttonsThemeBase as x, ButtonsThemeKey as y, defaultButtonsTheme as z };
+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 };

package/dist/{chunk-IOWK2GBE.js → chunk-2AGBCGOW.js}

@@ -1,9 +1,9 @@
 import {
   toNonTypographicReactNodes
-} from "./chunk-QBJ57KNQ.js";
+} from "./chunk-XDP7GCYE.js";
 import {
   applyTypography
-} from "./chunk-WIFHFWAN.js";
+} from "./chunk-4C2TISN7.js";
 
 // src/components/typography/Code.tsx
 import styled from "@emotion/styled";

package/dist/{chunk-BAQMHUBZ.js → chunk-2IXAUIKR.js}

@@ -12,8 +12,8 @@ function ArrowUpRightCircleFill() {
       children: /* @__PURE__ */ jsx(
         "path",
         {
-          "fill-rule": "evenodd",
-          "clip-rule": "evenodd",
+          fillRule: "evenodd",
+          clipRule: "evenodd",
           d: "M20 1.25C30.3553 1.25 38.75 9.64468 38.75 20C38.75 30.3553 30.3553 38.75 20 38.75C9.64468 38.75 1.25 30.3553 1.25 20C1.25 9.64468 9.64468 1.25 20 1.25ZM15.4392 12.4122C14.8869 12.4122 14.4392 12.8599 14.4392 13.4122C14.4392 13.9644 14.8869 14.4122 15.4392 14.4122H24.1736L12.7051 25.8807C12.3146 26.2713 12.3146 26.9044 12.7051 27.2949C13.0956 27.6855 13.7288 27.6855 14.1193 27.2949L25.5879 15.8263V24.5608C25.5879 25.1131 26.0356 25.5608 26.5879 25.5608C27.1402 25.5608 27.5879 25.1131 27.5879 24.5608V13.4122C27.5879 12.8599 27.1402 12.4122 26.5879 12.4122H15.4392Z",
           fill: "black"
         }

package/dist/{chunk-YYPRW5VJ.js → chunk-2XUHQWCJ.js}

@@ -1,18 +1,18 @@
 import {
   TextIconAligner
-} from "./chunk-CZH4OCQY.js";
+} from "./chunk-7YY6BH5O.js";
 import {
   Link
-} from "./chunk-4QVTXKRX.js";
+} from "./chunk-AAFUVYVP.js";
 import {
   UnstyledButton
-} from "./chunk-HGYVPOA7.js";
+} from "./chunk-LTCJ6LNO.js";
 import {
   elide
 } from "./chunk-EDN2QDCB.js";
 import {
   getFocusOutline
-} from "./chunk-52POF2W4.js";
+} from "./chunk-PG2W2HVB.js";
 import {
   __spreadProps,
   __spreadValues

package/dist/{chunk-HV6SRK57.js → chunk-35PJW7RT.js}

@@ -1,9 +1,9 @@
 import {
   toNonTypographicReactNodes
-} from "./chunk-QBJ57KNQ.js";
+} from "./chunk-XDP7GCYE.js";
 import {
   applyTypography
-} from "./chunk-WIFHFWAN.js";
+} from "./chunk-4C2TISN7.js";
 
 // src/components/typography/Title.tsx
 import styled from "@emotion/styled";

package/dist/{chunk-NHZO42IA.js → chunk-435FPPZK.js}

@@ -1,12 +1,12 @@
 import {
   DocsHeadline
-} from "./chunk-E6XGSPA6.js";
+} from "./chunk-BENSR2YW.js";
 import {
   select
 } from "./chunk-YMNSXZ5D.js";
 import {
   Icon
-} from "./chunk-UAFWDZRG.js";
+} from "./chunk-I3FI3FNP.js";
 import {
   __spreadProps,
   __spreadValues

package/dist/{chunk-ACYYMZQZ.js → chunk-4BFBANKF.js}

@@ -1,37 +1,37 @@
 import {
   StyledContentTable
-} from "./chunk-ZKJS5M5E.js";
-import {
-  StyledTitle
-} from "./chunk-HV6SRK57.js";
+} from "./chunk-K7FYXGOI.js";
 import {
   StyledCode
-} from "./chunk-IOWK2GBE.js";
+} from "./chunk-2AGBCGOW.js";
 import {
   displaySelector
-} from "./chunk-YQP6EWZY.js";
+} from "./chunk-MRGHRTKA.js";
+import {
+  StyledTitle
+} from "./chunk-35PJW7RT.js";
+import {
+  StyledBody
+} from "./chunk-GWHKALYQ.js";
 import {
   ALL_HEADLINE_SELECTORS,
   headlineSelector
-} from "./chunk-4YN25H5H.js";
+} from "./chunk-CRTTTIAD.js";
 import {
   select
 } from "./chunk-YMNSXZ5D.js";
-import {
-  StyledBody
-} from "./chunk-POTDIFIX.js";
 import {
   overflowAutoWithoutScrollbars
-} from "./chunk-JXXIU52B.js";
+} from "./chunk-7WDAN3OC.js";
 import {
   standardBorderRadius
-} from "./chunk-52POF2W4.js";
+} from "./chunk-PG2W2HVB.js";
 import {
   getTypographyString
 } from "./chunk-ENBUKLVT.js";
 import {
   colors
-} from "./chunk-KYTOF4WO.js";
+} from "./chunk-XUWFUTR4.js";
 
 // src/components/typography/Article.tsx
 import styled from "@emotion/styled";

package/dist/{chunk-WIFHFWAN.js → chunk-4C2TISN7.js}

@@ -1,6 +1,6 @@
 import {
   getFontColor
-} from "./chunk-ZFDYANKZ.js";
+} from "./chunk-IBZBPQMZ.js";
 import {
   getTypographyString
 } from "./chunk-ENBUKLVT.js";

package/dist/{chunk-KBL7GU4S.js → chunk-4JHXRPRB.js}

@@ -1,12 +1,12 @@
 import {
   overflowAutoWithoutScrollbars
-} from "./chunk-JXXIU52B.js";
+} from "./chunk-7WDAN3OC.js";
 import {
   Icon
-} from "./chunk-UAFWDZRG.js";
+} from "./chunk-I3FI3FNP.js";
 import {
   standardBorderRadius
-} from "./chunk-52POF2W4.js";
+} from "./chunk-PG2W2HVB.js";
 
 // src/components/Collapsible.tsx
 import styled from "@emotion/styled";

package/dist/{chunk-RVT4NV6Z.js → chunk-54EOEIEN.js}

@@ -1,9 +1,9 @@
 import {
   standardBorderRadius
-} from "./chunk-52POF2W4.js";
+} from "./chunk-PG2W2HVB.js";
 import {
   themeOr
-} from "./chunk-ZFDYANKZ.js";
+} from "./chunk-IBZBPQMZ.js";
 
 // src/components/ProgressBar.tsx
 import styled from "@emotion/styled";

package/dist/{chunk-54WKLEUU.js → chunk-5TTLUOJ5.js}

@@ -1,6 +1,6 @@
 import {
   Icon
-} from "./chunk-UAFWDZRG.js";
+} from "./chunk-I3FI3FNP.js";
 
 // src/components/Loading.tsx
 import { useTheme } from "@emotion/react";

package/dist/{chunk-FEJU2K4L.js → chunk-6CNJ5ZCC.js}

@@ -1,16 +1,16 @@
 import {
   applyTypography
-} from "./chunk-WIFHFWAN.js";
+} from "./chunk-4C2TISN7.js";
 import {
   z
 } from "./chunk-55OQPFLF.js";
 import {
   standardBorderRadius,
   subtext
-} from "./chunk-52POF2W4.js";
+} from "./chunk-PG2W2HVB.js";
 import {
   themeOr
-} from "./chunk-ZFDYANKZ.js";
+} from "./chunk-IBZBPQMZ.js";
 
 // src/styles/fields.tsx
 import { css } from "@emotion/react";
@@ -81,7 +81,7 @@ var textInputStyle = ({
   var _a;
   return css`
   border-radius: ${textInputBorderRadiusPx}px;
-  background-color: ${disabled ? theme.vlcNeutral : theme.bg};
+  background-color: ${disabled ? theme.vlcNeutral : theme.inputBackground};
   cursor: ${disabled ? "not-allowed" : "auto"};
   box-sizing: border-box;
   font-weight: ${textInputFontWeight};