@lightsparkdev/ui 1.0.2 → 1.0.3

package/dist/components/Toggle.js

@@ -1,10 +1,10 @@
 import {
   Toggle,
   ToggleContainer
-} from "../chunk-L6S22JUU.js";
-import "../chunk-6JFJDBV2.js";
-import "../chunk-7NPHOJXD.js";
-import "../chunk-A4JZESAS.js";
+} from "../chunk-SNFRMD6Z.js";
+import "../chunk-LTCJ6LNO.js";
+import "../chunk-PG2W2HVB.js";
+import "../chunk-IBZBPQMZ.js";
 import "../chunk-ENBUKLVT.js";
 import "../chunk-JSGRNWSB.js";
 import "../chunk-FO7I4E45.js";

package/dist/components/Tooltip.cjs

@@ -3512,7 +3512,8 @@ var baseThemeColors = {
   success: colors.success,
   text: colors.black,
   vlcNeutral: colors.gray95,
-  warning: colors.warning
+  warning: colors.warning,
+  inputBackground: colors.white
 };
 var themeOrColorKeyValues = [
   ...Object.keys(baseThemeColors),
@@ -3560,7 +3561,8 @@ var darkBaseTheme = {
   vlcNeutral: colors.gray20,
   warning: colors.warning,
   buttons: defaultButtonsTheme,
-  loading: "LoadingSpinner"
+  loading: "LoadingSpinner",
+  inputBackground: colors.black
 };
 var lightTheme = extend(lightBaseTheme, {
   header: extendBase(lightBaseTheme, {
@@ -3599,6 +3601,7 @@ var umameDocsLightTheme = extend(lightTheme, {
   secondary: colors.grayBlue43,
   text: colors.grayBlue9,
   link: colors.blue39,
+  inputBackground: colors.white,
   typography: getTypography("UmameDocs" /* UmameDocs */, {
     main: "Manrope",
     code: "Monaco"
@@ -3683,7 +3686,8 @@ var bridgeLightTheme = extend(lightTheme, __spreadProps(__spreadValues({}, bridg
   bg: colors.gray98,
   smBg: colors.gray98,
   text: colors.grayBlue9,
-  secondary: colors.grayBlue43
+  secondary: colors.grayBlue43,
+  inputBackground: colors.white
 }));
 var bridgeDarkTheme = extend(darkTheme, __spreadProps(__spreadValues({}, bridgeBaseSettings), {
   type: "bridgeDark" /* BridgeDark */
@@ -3782,11 +3786,12 @@ var overlaySurfaceBorderColor = ({
 `;
 var overlaySurface = ({
   theme,
-  important = false
+  important = false,
+  border = true
 }) => import_react4.css`
-  background-color: ${themeOr(colors.white, theme.c1Neutral)({ theme })}
+  background-color: ${themeOr(theme.bg, theme.c1Neutral)({ theme })}
     ${important ? "!important" : ""};
-  border: 0.5px solid ${important ? "!important" : ""};
+  ${border ? `border: 0.5px solid ${important ? "!important" : ""};` : ""}
   ${overlaySurfaceBorderColor({ theme, important })};
   ${themeOr(
   `box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.08), 0px 1px 4px rgba(0, 0, 0, 0.1) ${important ? "!important" : ""};`,

package/dist/components/Tooltip.js

@@ -1,9 +1,9 @@
 import {
   Tooltip
-} from "../chunk-27SFWLPS.js";
+} from "../chunk-RPNTFEXE.js";
 import "../chunk-55OQPFLF.js";
-import "../chunk-7NPHOJXD.js";
-import "../chunk-A4JZESAS.js";
+import "../chunk-PG2W2HVB.js";
+import "../chunk-IBZBPQMZ.js";
 import "../chunk-ENBUKLVT.js";
 import "../chunk-JSGRNWSB.js";
 import "../chunk-FO7I4E45.js";

package/dist/components/UnstyledButton.js

@@ -1,8 +1,8 @@
 import {
   UnstyledButton
-} from "../chunk-6JFJDBV2.js";
-import "../chunk-7NPHOJXD.js";
-import "../chunk-A4JZESAS.js";
+} from "../chunk-LTCJ6LNO.js";
+import "../chunk-PG2W2HVB.js";
+import "../chunk-IBZBPQMZ.js";
 import "../chunk-ENBUKLVT.js";
 import "../chunk-JSGRNWSB.js";
 import "../chunk-FO7I4E45.js";

package/dist/components/documentation/AnchorLinkHeader.cjs

@@ -7407,7 +7407,8 @@ var baseThemeColors = {
   success: colors.success,
   text: colors.black,
   vlcNeutral: colors.gray95,
-  warning: colors.warning
+  warning: colors.warning,
+  inputBackground: colors.white
 };
 var themeOrColorKeyValues = [
   ...Object.keys(baseThemeColors),
@@ -7455,7 +7456,8 @@ var darkBaseTheme = {
   vlcNeutral: colors.gray20,
   warning: colors.warning,
   buttons: defaultButtonsTheme,
-  loading: "LoadingSpinner"
+  loading: "LoadingSpinner",
+  inputBackground: colors.black
 };
 var lightTheme = extend(lightBaseTheme, {
   header: extendBase(lightBaseTheme, {
@@ -7494,6 +7496,7 @@ var umameDocsLightTheme = extend(lightTheme, {
   secondary: colors.grayBlue43,
   text: colors.grayBlue9,
   link: colors.blue39,
+  inputBackground: colors.white,
   typography: getTypography("UmameDocs" /* UmameDocs */, {
     main: "Manrope",
     code: "Monaco"
@@ -7578,7 +7581,8 @@ var bridgeLightTheme = extend(lightTheme, __spreadProps(__spreadValues({}, bridg
   bg: colors.gray98,
   smBg: colors.gray98,
   text: colors.grayBlue9,
-  secondary: colors.grayBlue43
+  secondary: colors.grayBlue43,
+  inputBackground: colors.white
 }));
 var bridgeDarkTheme = extend(darkTheme, __spreadProps(__spreadValues({}, bridgeBaseSettings), {
   type: "bridgeDark" /* BridgeDark */
@@ -7734,7 +7738,7 @@ var IconContainer = import_styled2.default.span`
   ${({ theme, fontColor }) => {
   const color = getFontColor(theme, fontColor, "inherit");
   return `
-    & svg {
+    svg, path {
       color: ${getFontColor(theme, fontColor, "inherit")};
 
       /* 

package/dist/components/documentation/AnchorLinkHeader.d.cts

@@ -1,7 +1,7 @@
 import * as _emotion_react_jsx_runtime from '@emotion/react/jsx-runtime';
 import { ComponentProps } from 'react';
 import { DocsHeadline } from './DocsHeadline.cjs';
-import '../../buttons-b7f56076.js';
+import '../../buttons-36cdd0fe.js';
 import '@emotion/react';
 import '../../styles/tokens/typography.cjs';
 import '@emotion/css';

package/dist/components/documentation/AnchorLinkHeader.d.ts

@@ -1,7 +1,7 @@
 import * as _emotion_react_jsx_runtime from '@emotion/react/jsx-runtime';
 import { ComponentProps } from 'react';
 import { DocsHeadline } from './DocsHeadline.js';
-import '../../buttons-e4eb84a2.js';
+import '../../buttons-35280bfe.js';
 import '@emotion/react';
 import '../../styles/tokens/typography.js';
 import '@emotion/css';

package/dist/components/documentation/AnchorLinkHeader.js

@@ -1,16 +1,16 @@
 "use client";
 import {
   AnchorLinkHeader
-} from "../../chunk-37RRWSDE.js";
-import "../../chunk-EMXTALIX.js";
+} from "../../chunk-435FPPZK.js";
+import "../../chunk-BENSR2YW.js";
 import "../../chunk-2NT4RAQ3.js";
-import "../../chunk-PNSZAJL7.js";
+import "../../chunk-CRTTTIAD.js";
 import "../../chunk-YMNSXZ5D.js";
-import "../../chunk-6H7PZJ2A.js";
+import "../../chunk-XDP7GCYE.js";
 import "../../chunk-OPV246QW.js";
 import "../../chunk-AAFUVYVP.js";
-import "../../chunk-VUXU77SU.js";
-import "../../chunk-KBYU4ZQ3.js";
+import "../../chunk-4C2TISN7.js";
+import "../../chunk-I3FI3FNP.js";
 import "../../chunk-EDN2QDCB.js";
 import "../../chunk-FT62PIPN.js";
 import "../../chunk-5ZDDVLS6.js";
@@ -125,8 +125,8 @@ import "../../chunk-VI6WTKMV.js";
 import "../../chunk-QW2INB5A.js";
 import "../../chunk-JLD7MGLC.js";
 import "../../chunk-DW6LFUI2.js";
-import "../../chunk-7NPHOJXD.js";
-import "../../chunk-A4JZESAS.js";
+import "../../chunk-PG2W2HVB.js";
+import "../../chunk-IBZBPQMZ.js";
 import "../../chunk-ENBUKLVT.js";
 import "../../chunk-JSGRNWSB.js";
 import "../../chunk-FO7I4E45.js";

package/dist/components/documentation/DocsBodyParagraph.cjs

@@ -3573,7 +3573,8 @@ var baseThemeColors = {
   success: colors.success,
   text: colors.black,
   vlcNeutral: colors.gray95,
-  warning: colors.warning
+  warning: colors.warning,
+  inputBackground: colors.white
 };
 var themeOrColorKeyValues = [
   ...Object.keys(baseThemeColors),
@@ -3621,7 +3622,8 @@ var darkBaseTheme = {
   vlcNeutral: colors.gray20,
   warning: colors.warning,
   buttons: defaultButtonsTheme,
-  loading: "LoadingSpinner"
+  loading: "LoadingSpinner",
+  inputBackground: colors.black
 };
 var lightTheme = extend(lightBaseTheme, {
   header: extendBase(lightBaseTheme, {
@@ -3660,6 +3662,7 @@ var umameDocsLightTheme = extend(lightTheme, {
   secondary: colors.grayBlue43,
   text: colors.grayBlue9,
   link: colors.blue39,
+  inputBackground: colors.white,
   typography: getTypography("UmameDocs" /* UmameDocs */, {
     main: "Manrope",
     code: "Monaco"
@@ -3744,7 +3747,8 @@ var bridgeLightTheme = extend(lightTheme, __spreadProps(__spreadValues({}, bridg
   bg: colors.gray98,
   smBg: colors.gray98,
   text: colors.grayBlue9,
-  secondary: colors.grayBlue43
+  secondary: colors.grayBlue43,
+  inputBackground: colors.white
 }));
 var bridgeDarkTheme = extend(darkTheme, __spreadProps(__spreadValues({}, bridgeBaseSettings), {
   type: "bridgeDark" /* BridgeDark */

package/dist/components/documentation/DocsBodyParagraph.d.cts

@@ -4,7 +4,7 @@ import { ComponentProps } from 'react';
 import { StyledBody } from '../typography/Body.cjs';
 import '@emotion/styled';
 import '@emotion/react';
-import '../../buttons-b7f56076.js';
+import '../../buttons-36cdd0fe.js';
 import '../../styles/tokens/typography.cjs';
 import '@emotion/css';
 import '../../styles/colors.cjs';

package/dist/components/documentation/DocsBodyParagraph.d.ts

@@ -4,7 +4,7 @@ import { ComponentProps } from 'react';
 import { StyledBody } from '../typography/Body.js';
 import '@emotion/styled';
 import '@emotion/react';
-import '../../buttons-e4eb84a2.js';
+import '../../buttons-35280bfe.js';
 import '../../styles/tokens/typography.js';
 import '@emotion/css';
 import '../../styles/colors.js';

package/dist/components/documentation/DocsBodyParagraph.js

@@ -1,12 +1,12 @@
 "use client";
 import {
   StyledBody
-} from "../../chunk-TM3C4LEG.js";
-import "../../chunk-6H7PZJ2A.js";
+} from "../../chunk-GWHKALYQ.js";
+import "../../chunk-XDP7GCYE.js";
 import "../../chunk-OPV246QW.js";
 import "../../chunk-AAFUVYVP.js";
-import "../../chunk-VUXU77SU.js";
-import "../../chunk-KBYU4ZQ3.js";
+import "../../chunk-4C2TISN7.js";
+import "../../chunk-I3FI3FNP.js";
 import "../../chunk-EDN2QDCB.js";
 import "../../chunk-FT62PIPN.js";
 import "../../chunk-5ZDDVLS6.js";
@@ -121,8 +121,8 @@ import "../../chunk-VI6WTKMV.js";
 import "../../chunk-QW2INB5A.js";
 import "../../chunk-JLD7MGLC.js";
 import "../../chunk-DW6LFUI2.js";
-import "../../chunk-7NPHOJXD.js";
-import "../../chunk-A4JZESAS.js";
+import "../../chunk-PG2W2HVB.js";
+import "../../chunk-IBZBPQMZ.js";
 import "../../chunk-ENBUKLVT.js";
 import "../../chunk-JSGRNWSB.js";
 import "../../chunk-FO7I4E45.js";

package/dist/components/documentation/DocsBodyStrongParagraph.cjs

@@ -3574,7 +3574,8 @@ var baseThemeColors = {
   success: colors.success,
   text: colors.black,
   vlcNeutral: colors.gray95,
-  warning: colors.warning
+  warning: colors.warning,
+  inputBackground: colors.white
 };
 var themeOrColorKeyValues = [
   ...Object.keys(baseThemeColors),
@@ -3622,7 +3623,8 @@ var darkBaseTheme = {
   vlcNeutral: colors.gray20,
   warning: colors.warning,
   buttons: defaultButtonsTheme,
-  loading: "LoadingSpinner"
+  loading: "LoadingSpinner",
+  inputBackground: colors.black
 };
 var lightTheme = extend(lightBaseTheme, {
   header: extendBase(lightBaseTheme, {
@@ -3661,6 +3663,7 @@ var umameDocsLightTheme = extend(lightTheme, {
   secondary: colors.grayBlue43,
   text: colors.grayBlue9,
   link: colors.blue39,
+  inputBackground: colors.white,
   typography: getTypography("UmameDocs" /* UmameDocs */, {
     main: "Manrope",
     code: "Monaco"
@@ -3745,7 +3748,8 @@ var bridgeLightTheme = extend(lightTheme, __spreadProps(__spreadValues({}, bridg
   bg: colors.gray98,
   smBg: colors.gray98,
   text: colors.grayBlue9,
-  secondary: colors.grayBlue43
+  secondary: colors.grayBlue43,
+  inputBackground: colors.white
 }));
 var bridgeDarkTheme = extend(darkTheme, __spreadProps(__spreadValues({}, bridgeBaseSettings), {
   type: "bridgeDark" /* BridgeDark */

package/dist/components/documentation/DocsBodyStrongParagraph.d.cts

@@ -4,7 +4,7 @@ import { ComponentProps } from 'react';
 import { StyledBodyStrong } from '../typography/BodyStrong.cjs';
 import '@emotion/styled';
 import '@emotion/react';
-import '../../buttons-b7f56076.js';
+import '../../buttons-36cdd0fe.js';
 import '../../styles/tokens/typography.cjs';
 import '@emotion/css';
 import '../../styles/colors.cjs';

package/dist/components/documentation/DocsBodyStrongParagraph.d.ts

@@ -4,7 +4,7 @@ import { ComponentProps } from 'react';
 import { StyledBodyStrong } from '../typography/BodyStrong.js';
 import '@emotion/styled';
 import '@emotion/react';
-import '../../buttons-e4eb84a2.js';
+import '../../buttons-35280bfe.js';
 import '../../styles/tokens/typography.js';
 import '@emotion/css';
 import '../../styles/colors.js';

package/dist/components/documentation/DocsBodyStrongParagraph.js

@@ -1,12 +1,12 @@
 "use client";
 import {
   StyledBodyStrong
-} from "../../chunk-HP4VPMN7.js";
-import "../../chunk-6H7PZJ2A.js";
+} from "../../chunk-WTMJTGW4.js";
+import "../../chunk-XDP7GCYE.js";
 import "../../chunk-OPV246QW.js";
 import "../../chunk-AAFUVYVP.js";
-import "../../chunk-VUXU77SU.js";
-import "../../chunk-KBYU4ZQ3.js";
+import "../../chunk-4C2TISN7.js";
+import "../../chunk-I3FI3FNP.js";
 import "../../chunk-EDN2QDCB.js";
 import "../../chunk-FT62PIPN.js";
 import "../../chunk-5ZDDVLS6.js";
@@ -121,8 +121,8 @@ import "../../chunk-VI6WTKMV.js";
 import "../../chunk-QW2INB5A.js";
 import "../../chunk-JLD7MGLC.js";
 import "../../chunk-DW6LFUI2.js";
-import "../../chunk-7NPHOJXD.js";
-import "../../chunk-A4JZESAS.js";
+import "../../chunk-PG2W2HVB.js";
+import "../../chunk-IBZBPQMZ.js";
 import "../../chunk-ENBUKLVT.js";
 import "../../chunk-JSGRNWSB.js";
 import "../../chunk-FO7I4E45.js";

package/dist/components/documentation/DocsHeadline.cjs

@@ -3571,7 +3571,8 @@ var baseThemeColors = {
   success: colors.success,
   text: colors.black,
   vlcNeutral: colors.gray95,
-  warning: colors.warning
+  warning: colors.warning,
+  inputBackground: colors.white
 };
 var themeOrColorKeyValues = [
   ...Object.keys(baseThemeColors),
@@ -3619,7 +3620,8 @@ var darkBaseTheme = {
   vlcNeutral: colors.gray20,
   warning: colors.warning,
   buttons: defaultButtonsTheme,
-  loading: "LoadingSpinner"
+  loading: "LoadingSpinner",
+  inputBackground: colors.black
 };
 var lightTheme = extend(lightBaseTheme, {
   header: extendBase(lightBaseTheme, {
@@ -3658,6 +3660,7 @@ var umameDocsLightTheme = extend(lightTheme, {
   secondary: colors.grayBlue43,
   text: colors.grayBlue9,
   link: colors.blue39,
+  inputBackground: colors.white,
   typography: getTypography("UmameDocs" /* UmameDocs */, {
     main: "Manrope",
     code: "Monaco"
@@ -3742,7 +3745,8 @@ var bridgeLightTheme = extend(lightTheme, __spreadProps(__spreadValues({}, bridg
   bg: colors.gray98,
   smBg: colors.gray98,
   text: colors.grayBlue9,
-  secondary: colors.grayBlue43
+  secondary: colors.grayBlue43,
+  inputBackground: colors.white
 }));
 var bridgeDarkTheme = extend(darkTheme, __spreadProps(__spreadValues({}, bridgeBaseSettings), {
   type: "bridgeDark" /* BridgeDark */

package/dist/components/documentation/DocsHeadline.d.cts

@@ -1,6 +1,6 @@
 import * as _emotion_react_jsx_runtime from '@emotion/react/jsx-runtime';
 import react__default from 'react';
-import { F as FontColorKey } from '../../buttons-b7f56076.js';
+import { F as FontColorKey } from '../../buttons-36cdd0fe.js';
 import { TokenSizeKey } from '../../styles/tokens/typography.cjs';
 import { Heading } from '../typography/Headline.cjs';
 import '@emotion/react';

package/dist/components/documentation/DocsHeadline.d.ts

@@ -1,6 +1,6 @@
 import * as _emotion_react_jsx_runtime from '@emotion/react/jsx-runtime';
 import react__default from 'react';
-import { F as FontColorKey } from '../../buttons-e4eb84a2.js';
+import { F as FontColorKey } from '../../buttons-35280bfe.js';
 import { TokenSizeKey } from '../../styles/tokens/typography.js';
 import { Heading } from '../typography/Headline.js';
 import '@emotion/react';

package/dist/components/documentation/DocsHeadline.js

@@ -2,15 +2,15 @@
 import {
   DocsHeadline,
   getHeadlineText
-} from "../../chunk-EMXTALIX.js";
+} from "../../chunk-BENSR2YW.js";
 import "../../chunk-2NT4RAQ3.js";
-import "../../chunk-PNSZAJL7.js";
+import "../../chunk-CRTTTIAD.js";
 import "../../chunk-YMNSXZ5D.js";
-import "../../chunk-6H7PZJ2A.js";
+import "../../chunk-XDP7GCYE.js";
 import "../../chunk-OPV246QW.js";
 import "../../chunk-AAFUVYVP.js";
-import "../../chunk-VUXU77SU.js";
-import "../../chunk-KBYU4ZQ3.js";
+import "../../chunk-4C2TISN7.js";
+import "../../chunk-I3FI3FNP.js";
 import "../../chunk-EDN2QDCB.js";
 import "../../chunk-FT62PIPN.js";
 import "../../chunk-5ZDDVLS6.js";
@@ -125,8 +125,8 @@ import "../../chunk-VI6WTKMV.js";
 import "../../chunk-QW2INB5A.js";
 import "../../chunk-JLD7MGLC.js";
 import "../../chunk-DW6LFUI2.js";
-import "../../chunk-7NPHOJXD.js";
-import "../../chunk-A4JZESAS.js";
+import "../../chunk-PG2W2HVB.js";
+import "../../chunk-IBZBPQMZ.js";
 import "../../chunk-ENBUKLVT.js";
 import "../../chunk-JSGRNWSB.js";
 import "../../chunk-FO7I4E45.js";

package/dist/components/documentation/Video.cjs

@@ -290,6 +290,18 @@ var darkGradientBg = import_react3.css`
 // src/components/documentation/Video.tsx
 var import_jsx_runtime2 = require("@emotion/react/jsx-runtime");
 var Video = (props) => {
+  if (props.youtubeEmbed) {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      StyledYoutubeEmbed,
+      {
+        src: props.youtubeEmbed.src,
+        height: props.youtubeEmbed.height,
+        frameBorder: "0",
+        allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share",
+        allowFullScreen: true
+      }
+    );
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(StyledVideo, __spreadValues({ controls: true }, props));
 };
 var StyledVideo = import_styled2.default.video`
@@ -297,6 +309,10 @@ var StyledVideo = import_styled2.default.video`
   height: auto;
   ${standardBorderRadius(16)};
 `;
+var StyledYoutubeEmbed = import_styled2.default.iframe`
+  width: 100%;
+  ${standardBorderRadius(16)};
+`;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Video

package/dist/components/documentation/Video.d.cts

@@ -1,9 +1,15 @@
 import * as _emotion_react_jsx_runtime from '@emotion/react/jsx-runtime';
 
 interface VideoProps {
-    children: React.ReactNode;
+    children?: React.ReactNode;
     controls?: boolean;
     preload?: string;
+    youtubeEmbed?: {
+        /** Must include a youtube.com/embed link. */
+        src: string;
+        /** Height needs to be manually specified. */
+        height: number;
+    };
 }
 declare const Video: (props: VideoProps) => _emotion_react_jsx_runtime.JSX.Element;
 

package/dist/components/documentation/Video.d.ts

@@ -1,9 +1,15 @@
 import * as _emotion_react_jsx_runtime from '@emotion/react/jsx-runtime';
 
 interface VideoProps {
-    children: React.ReactNode;
+    children?: React.ReactNode;
     controls?: boolean;
     preload?: string;
+    youtubeEmbed?: {
+        /** Must include a youtube.com/embed link. */
+        src: string;
+        /** Height needs to be manually specified. */
+        height: number;
+    };
 }
 declare const Video: (props: VideoProps) => _emotion_react_jsx_runtime.JSX.Element;
 

package/dist/components/documentation/Video.js

@@ -1,8 +1,8 @@
 "use client";
 import {
   standardBorderRadius
-} from "../../chunk-7NPHOJXD.js";
-import "../../chunk-A4JZESAS.js";
+} from "../../chunk-PG2W2HVB.js";
+import "../../chunk-IBZBPQMZ.js";
 import "../../chunk-ENBUKLVT.js";
 import "../../chunk-JSGRNWSB.js";
 import "../../chunk-FO7I4E45.js";
@@ -15,6 +15,18 @@ import {
 import styled from "@emotion/styled";
 import { jsx } from "@emotion/react/jsx-runtime";
 var Video = (props) => {
+  if (props.youtubeEmbed) {
+    return /* @__PURE__ */ jsx(
+      StyledYoutubeEmbed,
+      {
+        src: props.youtubeEmbed.src,
+        height: props.youtubeEmbed.height,
+        frameBorder: "0",
+        allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share",
+        allowFullScreen: true
+      }
+    );
+  }
   return /* @__PURE__ */ jsx(StyledVideo, __spreadValues({ controls: true }, props));
 };
 var StyledVideo = styled.video`
@@ -22,6 +34,10 @@ var StyledVideo = styled.video`
   height: auto;
   ${standardBorderRadius(16)};
 `;
+var StyledYoutubeEmbed = styled.iframe`
+  width: 100%;
+  ${standardBorderRadius(16)};
+`;
 export {
   Video
 };

package/dist/components/documentation/index.cjs

@@ -7408,7 +7408,8 @@ var baseThemeColors = {
   success: colors.success,
   text: colors.black,
   vlcNeutral: colors.gray95,
-  warning: colors.warning
+  warning: colors.warning,
+  inputBackground: colors.white
 };
 var themeOrColorKeyValues = [
   ...Object.keys(baseThemeColors),
@@ -7456,7 +7457,8 @@ var darkBaseTheme = {
   vlcNeutral: colors.gray20,
   warning: colors.warning,
   buttons: defaultButtonsTheme,
-  loading: "LoadingSpinner"
+  loading: "LoadingSpinner",
+  inputBackground: colors.black
 };
 var lightTheme = extend(lightBaseTheme, {
   header: extendBase(lightBaseTheme, {
@@ -7495,6 +7497,7 @@ var umameDocsLightTheme = extend(lightTheme, {
   secondary: colors.grayBlue43,
   text: colors.grayBlue9,
   link: colors.blue39,
+  inputBackground: colors.white,
   typography: getTypography("UmameDocs" /* UmameDocs */, {
     main: "Manrope",
     code: "Monaco"
@@ -7579,7 +7582,8 @@ var bridgeLightTheme = extend(lightTheme, __spreadProps(__spreadValues({}, bridg
   bg: colors.gray98,
   smBg: colors.gray98,
   text: colors.grayBlue9,
-  secondary: colors.grayBlue43
+  secondary: colors.grayBlue43,
+  inputBackground: colors.white
 }));
 var bridgeDarkTheme = extend(darkTheme, __spreadProps(__spreadValues({}, bridgeBaseSettings), {
   type: "bridgeDark" /* BridgeDark */
@@ -7735,7 +7739,7 @@ var IconContainer = import_styled2.default.span`
   ${({ theme, fontColor }) => {
   const color = getFontColor(theme, fontColor, "inherit");
   return `
-    & svg {
+    svg, path {
       color: ${getFontColor(theme, fontColor, "inherit")};
 
       /* 

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

@@ -2,7 +2,7 @@ export { AnchorLinkHeader } from './AnchorLinkHeader.cjs';
 import '@emotion/react/jsx-runtime';
 import 'react';
 import './DocsHeadline.cjs';
-import '../../buttons-b7f56076.js';
+import '../../buttons-36cdd0fe.js';
 import '@emotion/react';
 import '../../styles/tokens/typography.cjs';
 import '@emotion/css';

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

@@ -2,7 +2,7 @@ export { AnchorLinkHeader } from './AnchorLinkHeader.js';
 import '@emotion/react/jsx-runtime';
 import 'react';
 import './DocsHeadline.js';
-import '../../buttons-e4eb84a2.js';
+import '../../buttons-35280bfe.js';
 import '@emotion/react';
 import '../../styles/tokens/typography.js';
 import '@emotion/css';