@ngrok/mantle 0.66.7 → 0.66.8

package/dist/alert-dialog.d.ts

@@ -147,9 +147,9 @@ declare const AlertDialog: {
    * ```
    */
   readonly Action: react.ForwardRefExoticComponent<(Omit<react.ClassAttributes<HTMLButtonElement> & react.ButtonHTMLAttributes<HTMLButtonElement> & Partial<DeepNonNullable<class_variance_authority0.VariantProps<(props?: ({
-    appearance?: "link" | "ghost" | "outlined" | "filled" | null | undefined;
+    appearance?: "link" | "filled" | "ghost" | "outlined" | null | undefined;
     isLoading?: boolean | null | undefined;
-    priority?: "default" | "danger" | "neutral" | null | undefined;
+    priority?: "danger" | "neutral" | "default" | null | undefined;
   } & class_variance_authority_types0.ClassProp) | undefined) => string>>> & {
     icon?: ReactNode;
     iconPlacement?: "start" | "end";
@@ -157,9 +157,9 @@ declare const AlertDialog: {
     asChild: true;
     type?: ComponentProps<"button">["type"];
   }, "ref"> | Omit<react.ClassAttributes<HTMLButtonElement> & react.ButtonHTMLAttributes<HTMLButtonElement> & Partial<DeepNonNullable<class_variance_authority0.VariantProps<(props?: ({
-    appearance?: "link" | "ghost" | "outlined" | "filled" | null | undefined;
+    appearance?: "link" | "filled" | "ghost" | "outlined" | null | undefined;
     isLoading?: boolean | null | undefined;
-    priority?: "default" | "danger" | "neutral" | null | undefined;
+    priority?: "danger" | "neutral" | "default" | null | undefined;
   } & class_variance_authority_types0.ClassProp) | undefined) => string>>> & {
     icon?: ReactNode;
     iconPlacement?: "start" | "end";
@@ -204,9 +204,9 @@ declare const AlertDialog: {
    * ```
    */
   readonly Cancel: react.ForwardRefExoticComponent<(Omit<react.ClassAttributes<HTMLButtonElement> & react.ButtonHTMLAttributes<HTMLButtonElement> & Partial<DeepNonNullable<class_variance_authority0.VariantProps<(props?: ({
-    appearance?: "link" | "ghost" | "outlined" | "filled" | null | undefined;
+    appearance?: "link" | "filled" | "ghost" | "outlined" | null | undefined;
     isLoading?: boolean | null | undefined;
-    priority?: "default" | "danger" | "neutral" | null | undefined;
+    priority?: "danger" | "neutral" | "default" | null | undefined;
   } & class_variance_authority_types0.ClassProp) | undefined) => string>>> & {
     icon?: ReactNode;
     iconPlacement?: "start" | "end";
@@ -214,9 +214,9 @@ declare const AlertDialog: {
     asChild: true;
     type?: ComponentProps<"button">["type"];
   }, "ref"> | Omit<react.ClassAttributes<HTMLButtonElement> & react.ButtonHTMLAttributes<HTMLButtonElement> & Partial<DeepNonNullable<class_variance_authority0.VariantProps<(props?: ({
-    appearance?: "link" | "ghost" | "outlined" | "filled" | null | undefined;
+    appearance?: "link" | "filled" | "ghost" | "outlined" | null | undefined;
     isLoading?: boolean | null | undefined;
-    priority?: "default" | "danger" | "neutral" | null | undefined;
+    priority?: "danger" | "neutral" | "default" | null | undefined;
   } & class_variance_authority_types0.ClassProp) | undefined) => string>>> & {
     icon?: ReactNode;
     iconPlacement?: "start" | "end";

package/dist/{button-CKL-3sIr.d.ts → button-CU5ung6o.d.ts}

@@ -7,9 +7,9 @@ import * as class_variance_authority_types0 from "class-variance-authority/types
 
 //#region src/components/button/button.d.ts
 declare const buttonVariants: (props?: ({
-  appearance?: "link" | "ghost" | "outlined" | "filled" | null | undefined;
+  appearance?: "link" | "filled" | "ghost" | "outlined" | null | undefined;
   isLoading?: boolean | null | undefined;
-  priority?: "default" | "danger" | "neutral" | null | undefined;
+  priority?: "danger" | "neutral" | "default" | null | undefined;
 } & class_variance_authority_types0.ClassProp) | undefined) => string;
 type ButtonVariants = VariantProps$1<typeof buttonVariants>;
 /**
@@ -91,9 +91,9 @@ type ButtonProps = ComponentProps<"button"> & ButtonVariants & {
  * ```
  */
 declare const Button: react.ForwardRefExoticComponent<(Omit<react.ClassAttributes<HTMLButtonElement> & react.ButtonHTMLAttributes<HTMLButtonElement> & Partial<DeepNonNullable<class_variance_authority0.VariantProps<(props?: ({
-  appearance?: "link" | "ghost" | "outlined" | "filled" | null | undefined;
+  appearance?: "link" | "filled" | "ghost" | "outlined" | null | undefined;
   isLoading?: boolean | null | undefined;
-  priority?: "default" | "danger" | "neutral" | null | undefined;
+  priority?: "danger" | "neutral" | "default" | null | undefined;
 } & class_variance_authority_types0.ClassProp) | undefined) => string>>> & {
   /**
    * An icon to render inside the button. If the `state` is `"pending"`, then
@@ -137,9 +137,9 @@ declare const Button: react.ForwardRefExoticComponent<(Omit<react.ClassAttribute
    */
   type?: ComponentProps<"button">["type"];
 }, "ref"> | Omit<react.ClassAttributes<HTMLButtonElement> & react.ButtonHTMLAttributes<HTMLButtonElement> & Partial<DeepNonNullable<class_variance_authority0.VariantProps<(props?: ({
-  appearance?: "link" | "ghost" | "outlined" | "filled" | null | undefined;
+  appearance?: "link" | "filled" | "ghost" | "outlined" | null | undefined;
   isLoading?: boolean | null | undefined;
-  priority?: "default" | "danger" | "neutral" | null | undefined;
+  priority?: "danger" | "neutral" | "default" | null | undefined;
 } & class_variance_authority_types0.ClassProp) | undefined) => string>>> & {
   /**
    * An icon to render inside the button. If the `state` is `"pending"`, then
@@ -172,4 +172,4 @@ declare const Button: react.ForwardRefExoticComponent<(Omit<react.ClassAttribute
 }, "ref">) & react.RefAttributes<HTMLButtonElement>>;
 //#endregion
 export { ButtonProps as n, Button as t };
-//# sourceMappingURL=button-CKL-3sIr.d.ts.map
+//# sourceMappingURL=button-CU5ung6o.d.ts.map

package/dist/button.d.ts

@@ -1,4 +1,4 @@
 import { n as IconButtonProps, t as IconButton } from "./icon-button-2r6S3HVA.js";
-import { n as ButtonProps, t as Button } from "./button-CKL-3sIr.js";
+import { n as ButtonProps, t as Button } from "./button-CU5ung6o.js";
 import { n as ButtonGroupProps, t as ButtonGroup } from "./index-ViSCOUrU.js";
 export { Button, ButtonGroup, ButtonGroupProps, ButtonProps, IconButton, IconButtonProps };

package/dist/checkbox.d.ts

@@ -19,7 +19,7 @@ type CheckedState = boolean | "indeterminate";
  * </form>
  * ```
  */
-declare const Checkbox: react.ForwardRefExoticComponent<Omit<Omit<react.DetailedHTMLProps<react.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "defaultChecked" | "type" | "checked"> & WithValidation & {
+declare const Checkbox: react.ForwardRefExoticComponent<Omit<Omit<react.DetailedHTMLProps<react.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "type" | "checked" | "defaultChecked"> & WithValidation & {
   /**
    * The controlled checked state of the checkbox. Must be used in conjunction with onChange.
    */

package/dist/code-block.d.ts

@@ -27,7 +27,7 @@ declare const isSupportedLanguage: (value: unknown) => value is SupportedLanguag
  * Formats a language name into a class name that Prism.js can understand.
  * @default "language-sh"
  */
-declare function formatLanguageClassName(language?: SupportedLanguage | undefined): "language-html" | "language-ruby" | "language-text" | "language-py" | "language-go" | "language-plaintext" | "language-jsx" | "language-bash" | "language-cs" | "language-csharp" | "language-css" | "language-dotnet" | "language-java" | "language-javascript" | "language-js" | "language-json" | "language-markup" | "language-plain" | "language-python" | "language-rb" | "language-rust" | "language-sh" | "language-shell" | "language-ts" | "language-tsx" | "language-txt" | "language-typescript" | "language-xml" | "language-yaml" | "language-yml";
+declare function formatLanguageClassName(language?: SupportedLanguage | undefined): "language-html" | "language-ruby" | "language-text" | "language-py" | "language-plaintext" | "language-go" | "language-bash" | "language-cs" | "language-csharp" | "language-css" | "language-dotnet" | "language-java" | "language-javascript" | "language-js" | "language-json" | "language-jsx" | "language-markup" | "language-plain" | "language-python" | "language-rb" | "language-rust" | "language-sh" | "language-shell" | "language-ts" | "language-tsx" | "language-txt" | "language-typescript" | "language-xml" | "language-yaml" | "language-yml";
 //#endregion
 //#region src/components/code-block/indentation.d.ts
 declare const indentations: readonly ["tabs", "spaces"];

package/dist/command.d.ts

@@ -85,11 +85,11 @@ declare const Command: {
    */
   readonly Root: react.ForwardRefExoticComponent<Omit<{
     children?: React.ReactNode;
-  } & Pick<Pick<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof react.HTMLAttributes<HTMLDivElement> | "key"> & {
+  } & Pick<Pick<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof react.HTMLAttributes<HTMLDivElement>> & {
     ref?: React.Ref<HTMLDivElement>;
   } & {
     asChild?: boolean;
-  }, keyof react.HTMLAttributes<HTMLDivElement> | "asChild" | "key"> & {
+  }, "key" | keyof react.HTMLAttributes<HTMLDivElement> | "asChild"> & {
     label?: string;
     shouldFilter?: boolean;
     filter?: (value: string, search: string, keywords?: string[]) => number;
@@ -142,7 +142,7 @@ declare const Command: {
     ref?: React.Ref<HTMLInputElement>;
   } & {
     asChild?: boolean;
-  }, "asChild" | "key" | keyof react.InputHTMLAttributes<HTMLInputElement>>, "onChange" | "type" | "value"> & {
+  }, "key" | keyof react.InputHTMLAttributes<HTMLInputElement> | "asChild">, "type" | "onChange" | "value"> & {
     value?: string;
     onValueChange?: (search: string) => void;
   } & react.RefAttributes<HTMLInputElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
@@ -159,11 +159,11 @@ declare const Command: {
    */
   readonly List: react.ForwardRefExoticComponent<Omit<{
     children?: React.ReactNode;
-  } & Pick<Pick<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof react.HTMLAttributes<HTMLDivElement> | "key"> & {
+  } & Pick<Pick<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof react.HTMLAttributes<HTMLDivElement>> & {
     ref?: React.Ref<HTMLDivElement>;
   } & {
     asChild?: boolean;
-  }, keyof react.HTMLAttributes<HTMLDivElement> | "asChild" | "key"> & {
+  }, "key" | keyof react.HTMLAttributes<HTMLDivElement> | "asChild"> & {
     label?: string;
   } & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
   /**
@@ -178,11 +178,11 @@ declare const Command: {
    */
   readonly Empty: react.ForwardRefExoticComponent<Omit<{
     children?: React.ReactNode;
-  } & Pick<Pick<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof react.HTMLAttributes<HTMLDivElement> | "key"> & {
+  } & Pick<Pick<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof react.HTMLAttributes<HTMLDivElement>> & {
     ref?: React.Ref<HTMLDivElement>;
   } & {
     asChild?: boolean;
-  }, keyof react.HTMLAttributes<HTMLDivElement> | "asChild" | "key"> & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+  }, "key" | keyof react.HTMLAttributes<HTMLDivElement> | "asChild"> & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
   /**
    * The group component for the Command component.
    *
@@ -199,11 +199,11 @@ declare const Command: {
    */
   readonly Group: react.ForwardRefExoticComponent<Omit<{
     children?: React.ReactNode;
-  } & Omit<Pick<Pick<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof react.HTMLAttributes<HTMLDivElement> | "key"> & {
+  } & Omit<Pick<Pick<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof react.HTMLAttributes<HTMLDivElement>> & {
     ref?: React.Ref<HTMLDivElement>;
   } & {
     asChild?: boolean;
-  }, keyof react.HTMLAttributes<HTMLDivElement> | "asChild" | "key">, "value" | "heading"> & {
+  }, "key" | keyof react.HTMLAttributes<HTMLDivElement> | "asChild">, "heading" | "value"> & {
     heading?: React.ReactNode;
     value?: string;
     forceMount?: boolean;
@@ -222,11 +222,11 @@ declare const Command: {
    */
   readonly Item: react.ForwardRefExoticComponent<Omit<{
     children?: React.ReactNode;
-  } & Omit<Pick<Pick<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof react.HTMLAttributes<HTMLDivElement> | "key"> & {
+  } & Omit<Pick<Pick<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof react.HTMLAttributes<HTMLDivElement>> & {
     ref?: React.Ref<HTMLDivElement>;
   } & {
     asChild?: boolean;
-  }, keyof react.HTMLAttributes<HTMLDivElement> | "asChild" | "key">, "onSelect" | "disabled" | "value"> & {
+  }, "key" | keyof react.HTMLAttributes<HTMLDivElement> | "asChild">, "onSelect" | "disabled" | "value"> & {
     disabled?: boolean;
     onSelect?: (value: string) => void;
     value?: string;

package/dist/data-table.d.ts

@@ -1,4 +1,4 @@
-import { t as Button } from "./button-CKL-3sIr.js";
+import { t as Button } from "./button-CU5ung6o.js";
 import { s as SortingMode } from "./direction-deXpJFDZ.js";
 import { t as Table$1 } from "./table-Dpt192qt.js";
 import * as react from "react";

package/dist/split-button.d.ts

@@ -1,5 +1,5 @@
 import { t as IconButton } from "./icon-button-2r6S3HVA.js";
-import { t as Button } from "./button-CKL-3sIr.js";
+import { t as Button } from "./button-CU5ung6o.js";
 import { t as DropdownMenu } from "./dropdown-menu-D_ZoY1AH.js";
 import * as react from "react";
 import { ComponentProps, ReactNode } from "react";

package/dist/theme.d.ts

@@ -2,8 +2,60 @@ import { a as isResolvedTheme, c as themes, i as Theme, n as $theme, o as isThem
 import { PropsWithChildren } from "react";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
 
-//#region src/components/theme/mantle-stylesheets.d.ts
-type MantleStylesheetsProps = {
+//#region src/components/theme/mantle-style-sheets.d.ts
+/**
+ * Browser-accessible URLs for mantle's three lazy-loaded theme stylesheets.
+ *
+ * Use {@link mantleStyleSheetUrls} to create this object from Vite `?url` imports.
+ */
+type MantleThemeCssUrls = {
+  /**
+   * Browser-accessible URL for `mantle-dark.css`.
+   * @example
+   * ```tsx
+   * // in vite app
+   * import darkCssUrl from "@ngrok/mantle/mantle-dark.css?url"
+   * ```
+   */
+  darkCssUrl: string;
+  /**
+   * Browser-accessible URL for `mantle-light-high-contrast.css`.
+   * @example
+   * ```tsx
+   * // in vite app
+   * import lightHighContrastCssUrl from "@ngrok/mantle/mantle-light-high-contrast.css?url"
+   * ```
+   */
+  lightHighContrastCssUrl: string;
+  /**
+   * Browser-accessible URL for `mantle-dark-high-contrast.css`.
+   * @example
+   * ```tsx
+   * // in vite app
+   * import darkHighContrastCssUrl from "@ngrok/mantle/mantle-dark-high-contrast.css?url"
+   * ```
+   */
+  darkHighContrastCssUrl: string;
+};
+/**
+ * Collects the three Vite `?url` imports for mantle's theme stylesheets into a typed object
+ * that can be spread directly into `<MantleStyleSheets>`.
+ *
+ * Call this once at the top of your app entry (e.g. `root.tsx`) and spread the result:
+ *
+ * ```ts
+ * import darkCssUrl from "@ngrok/mantle/mantle-dark.css?url";
+ * import darkHighContrastCssUrl from "@ngrok/mantle/mantle-dark-high-contrast.css?url";
+ * import lightHighContrastCssUrl from "@ngrok/mantle/mantle-light-high-contrast.css?url";
+ *
+ * const themeUrls = mantleStyleSheetUrls({ darkCssUrl, lightHighContrastCssUrl, darkHighContrastCssUrl });
+ *
+ * // In JSX:
+ * <MantleStyleSheets {...themeUrls} nonce={nonce} ssrCookie={ssrCookie} />
+ * ```
+ */
+declare function mantleStyleSheetUrls(urls: MantleThemeCssUrls): MantleThemeCssUrls;
+type MantleStyleSheetsProps = MantleThemeCssUrls & {
   /**
    * Force a specific resolved theme's stylesheet to load unconditionally (`media="all"`),
    * regardless of the user's OS preference. Use this when your app is locked to a single
@@ -14,7 +66,7 @@ type MantleStylesheetsProps = {
    *
    * @example
    * // Dark-only app — always load dark CSS eagerly
-   * <MantleStylesheets forceTheme="dark" />
+   * <MantleStyleSheets forceTheme="dark" {...themeUrls} />
    */
   forceTheme?: ResolvedTheme;
   /**
@@ -32,7 +84,7 @@ type MantleStylesheetsProps = {
    * }
    *
    * // root.tsx component
-   * <MantleStylesheets ssrCookie={loaderData.ssrCookie} nonce={nonce} />
+   * <MantleStyleSheets {...themeUrls} ssrCookie={loaderData.ssrCookie} nonce={nonce} />
    * ```
    */
   ssrCookie?: string;
@@ -46,37 +98,55 @@ type MantleStylesheetsProps = {
   nonce?: string;
 };
 /**
- * Renders three `<link rel="stylesheet">` tags for the dark, light-high-contrast, and
+ * Renders `<link rel="stylesheet">` tags for the dark, light-high-contrast, and
  * dark-high-contrast theme CSS files. Each stylesheet is gated behind a `media` attribute
  * matching its OS preference so it is non-render-blocking for users who do not need it.
  *
+ * Use {@link mantleStyleSheetUrls} to collect the required CSS URL props from Vite `?url`
+ * imports and spread them in:
+ *
+ * ```ts
+ * import darkCssUrl from "@ngrok/mantle/mantle-dark.css?url";
+ * import darkHighContrastCssUrl from "@ngrok/mantle/mantle-dark-high-contrast.css?url";
+ * import lightHighContrastCssUrl from "@ngrok/mantle/mantle-light-high-contrast.css?url";
+ *
+ * const themeUrls = mantleStyleSheetUrls({ darkCssUrl, lightHighContrastCssUrl, darkHighContrastCssUrl });
+ * ```
+ *
  * Place this component in `<head>`, after `<PreventWrongThemeFlashScript>`.
  *
  * On the client, a `MutationObserver` watches `html[data-applied-theme]` (kept in sync by
  * `ThemeProvider`) and updates the `media` attributes to `"all"` when the user manually
  * selects a theme that differs from their OS preference, ensuring the correct CSS is applied.
  *
+ * When `forceTheme` is set, only the link tag for that theme is rendered — the others are
+ * omitted entirely to avoid unnecessary network requests.
+ *
  * @example
  * ```tsx
  * // root.tsx
+ * import darkCssUrl from "@ngrok/mantle/mantle-dark.css?url";
+ * import darkHighContrastCssUrl from "@ngrok/mantle/mantle-dark-high-contrast.css?url";
+ * import lightHighContrastCssUrl from "@ngrok/mantle/mantle-light-high-contrast.css?url";
+ * import { mantleStyleSheetUrls, MantleStyleSheets, PreventWrongThemeFlashScript } from "@ngrok/mantle/theme";
+ *
+ * const themeUrls = mantleStyleSheetUrls({ darkCssUrl, lightHighContrastCssUrl, darkHighContrastCssUrl });
+ *
  * <head>
  *   <PreventWrongThemeFlashScript nonce={nonce} />
- *   <MantleStylesheets />
+ *   <MantleStyleSheets {...themeUrls} nonce={nonce} ssrCookie={loaderData?.ssrCookie} />
  * </head>
  * ```
- *
- * @example
- * ```tsx
- * // Dark-only app
- * <MantleStylesheets forceTheme="dark" />
- * ```
  */
-declare function MantleStylesheets({
+declare function MantleStyleSheets({
+  darkCssUrl,
+  lightHighContrastCssUrl,
+  darkHighContrastCssUrl,
   forceTheme,
   nonce,
   ssrCookie
-}: MantleStylesheetsProps): react_jsx_runtime0.JSX.Element;
-declare namespace MantleStylesheets {
+}: MantleStyleSheetsProps): react_jsx_runtime0.JSX.Element;
+declare namespace MantleStyleSheets {
   var displayName: string;
 }
 //#endregion
@@ -115,7 +185,7 @@ declare function useTheme(): ThemeProviderState;
  */
 declare function readThemeFromHtmlElement(): {
   appliedTheme: "dark" | "light" | "light-high-contrast" | "dark-high-contrast" | undefined;
-  theme: "dark" | "light" | "light-high-contrast" | "dark-high-contrast" | "system" | undefined;
+  theme: "dark" | "light" | "system" | "light-high-contrast" | "dark-high-contrast" | undefined;
 };
 /**
  * If the theme is "system", it will resolve the theme based on the user's media query preferences, otherwise it will return the theme as is.
@@ -353,5 +423,5 @@ declare const PreloadFont: {
   displayName: string;
 };
 //#endregion
-export { $resolvedTheme, $theme, type CoreFontName, MantleStylesheets, type MantleStylesheetsProps, PreloadFont, PreventWrongThemeFlashScript, type ResolvedTheme, type Theme, ThemeProvider, assetsCdnOrigin, extractThemeCookie, fontHref, getStoredTheme, isResolvedTheme, isTheme, preloadFontLink, preventWrongThemeFlashScriptContent, readThemeFromHtmlElement, resolvedThemes, themes, useAppliedTheme, useInitialHtmlThemeProps, useTheme };
+export { $resolvedTheme, $theme, type CoreFontName, MantleStyleSheets, type MantleStyleSheetsProps, type MantleThemeCssUrls, PreloadFont, PreventWrongThemeFlashScript, type ResolvedTheme, type Theme, ThemeProvider, assetsCdnOrigin, extractThemeCookie, fontHref, getStoredTheme, isResolvedTheme, isTheme, mantleStyleSheetUrls, preloadFontLink, preventWrongThemeFlashScriptContent, readThemeFromHtmlElement, resolvedThemes, themes, useAppliedTheme, useInitialHtmlThemeProps, useTheme };
 //# sourceMappingURL=theme.d.ts.map

package/dist/theme.js

@@ -1,2 +1,2 @@
-import{a as e,c as t,d as n,f as r,h as i,i as a,l as o,m as s,n as c,o as l,p as u,r as d,s as f,t as p,u as m}from"./theme-provider-8xCwja4v.js";import{useEffect as h}from"react";import{Fragment as g,jsx as _,jsxs as v}from"react/jsx-runtime";import y from"./mantle-dark.css?url";import b from"./mantle-dark-high-contrast.css?url";import x from"./mantle-light-high-contrast.css?url";const S=`mantle-dark-styles`,C=`mantle-light-high-contrast-styles`,w=`mantle-dark-high-contrast-styles`,T=`(prefers-color-scheme: dark)`,E=`(prefers-contrast: more) and (prefers-color-scheme: light)`,D=`(prefers-contrast: more) and (prefers-color-scheme: dark)`;function O(e,t){let n=t??e;return{dark:n===`dark`?`all`:T,lightHighContrast:n===`light-high-contrast`?`all`:E,darkHighContrast:n===`dark-high-contrast`?`all`:D}}function k(e){let{darkLinkId:t,lightHcLinkId:n,darkHcLinkId:r,mediaDark:i,mediaLightHc:a,mediaDarkHc:o,forceTheme:s}=e,c=document.documentElement.dataset.appliedTheme,l=s??c,u=document.getElementById(t),d=document.getElementById(n),f=document.getElementById(r);u&&(u.media=l===`dark`?`all`:i),d&&(d.media=l===`light-high-contrast`?`all`:a),f&&(f.media=l===`dark-high-contrast`?`all`:o)}function A(e){let t={darkLinkId:S,lightHcLinkId:C,darkHcLinkId:w,mediaDark:T,mediaLightHc:E,mediaDarkHc:D,forceTheme:e};return`(${k.toString()})(${JSON.stringify(t)})`}function j({forceTheme:e,nonce:t,ssrCookie:n}){h(()=>{function t(){let e=document.documentElement.dataset.appliedTheme;return r(e)?e:void 0}function n(){let{dark:n,lightHighContrast:r,darkHighContrast:i}=O(t(),e),a=document.getElementById(S),o=document.getElementById(C),s=document.getElementById(w);a&&(a.media=n),o&&(o.media=r),s&&(s.media=i)}n();let i=new MutationObserver(n);return i.observe(document.documentElement,{attributes:!0,attributeFilter:[`data-applied-theme`]}),()=>{i.disconnect()}},[e]);let i=n==null?void 0:a({cookie:n}),o=i===`system`?void 0:i,{dark:s,lightHighContrast:c,darkHighContrast:l}=O(o,e);return v(g,{children:[_(`link`,{rel:`stylesheet`,id:S,href:y,media:s,suppressHydrationWarning:!0}),_(`link`,{rel:`stylesheet`,id:C,href:x,media:c,suppressHydrationWarning:!0}),_(`link`,{rel:`stylesheet`,id:w,href:b,media:l,suppressHydrationWarning:!0}),e==null&&o==null&&_(`script`,{dangerouslySetInnerHTML:{__html:A(e)},nonce:t,suppressHydrationWarning:!0})]})}j.displayName=`MantleStylesheets`;const M=`https://assets.ngrok.com`,N=`${M}/fonts`,P={roobert:`/roobert/roobert-proportional-vf.woff2`,"jetbrains-mono":`/jetbrains/jetbrainsmono-wght.woff2`,"jetbrains-mono-italic":`/jetbrains/jetbrainsmono-italic-wght.woff2`,"family-regular":`/family/family-regular.woff2`,"family-italic":`/family/family-italic.woff2`};function F(e){return`${N}${e.startsWith(`/`)?e:`/${e}`}`}function I(e){return`<${F(P[e])}>; rel=preload; as=font; type="font/woff2"; crossorigin`}const L=({name:e})=>_(`link`,{rel:`preload`,href:F(P[e]),as:`font`,type:`font/woff2`,crossOrigin:`anonymous`});L.displayName=`PreloadFont`;export{m as $resolvedTheme,n as $theme,j as MantleStylesheets,L as PreloadFont,p as PreventWrongThemeFlashScript,c as ThemeProvider,M as assetsCdnOrigin,d as extractThemeCookie,F as fontHref,a as getStoredTheme,r as isResolvedTheme,u as isTheme,I as preloadFontLink,e as preventWrongThemeFlashScriptContent,l as readThemeFromHtmlElement,s as resolvedThemes,i as themes,f as useAppliedTheme,t as useInitialHtmlThemeProps,o as useTheme};
+import{a as e,c as t,d as n,f as r,h as i,i as a,l as o,m as s,n as c,o as l,p as u,r as d,s as f,t as p,u as m}from"./theme-provider-8xCwja4v.js";import{useEffect as h}from"react";import{Fragment as g,jsx as _,jsxs as v}from"react/jsx-runtime";const y=`mantle-dark-styles`,b=`mantle-light-high-contrast-styles`,x=`mantle-dark-high-contrast-styles`,S=`(prefers-color-scheme: dark)`,C=`(prefers-contrast: more) and (prefers-color-scheme: light)`,w=`(prefers-contrast: more) and (prefers-color-scheme: dark)`;function T(e,t){let n=t??e;return{dark:n===`dark`?`all`:S,lightHighContrast:n===`light-high-contrast`?`all`:C,darkHighContrast:n===`dark-high-contrast`?`all`:w}}function E(e){return e}function D(e){let{darkLinkId:t,lightHcLinkId:n,darkHcLinkId:r,mediaDark:i,mediaLightHc:a,mediaDarkHc:o,forceTheme:s}=e,c=document.documentElement.dataset.appliedTheme,l=s??c,u=document.getElementById(t),d=document.getElementById(n),f=document.getElementById(r);u&&(u.media=l===`dark`?`all`:i),d&&(d.media=l===`light-high-contrast`?`all`:a),f&&(f.media=l===`dark-high-contrast`?`all`:o)}function O(e){let t={darkLinkId:y,lightHcLinkId:b,darkHcLinkId:x,mediaDark:S,mediaLightHc:C,mediaDarkHc:w,forceTheme:e};return`(${D.toString()})(${JSON.stringify(t)})`}function k({darkCssUrl:e,lightHighContrastCssUrl:t,darkHighContrastCssUrl:n,forceTheme:i,nonce:o,ssrCookie:s}){h(()=>{function e(){let e=document.documentElement.dataset.appliedTheme;return r(e)?e:void 0}function t(){let{dark:t,lightHighContrast:n,darkHighContrast:r}=T(e(),i),a=document.getElementById(y),o=document.getElementById(b),s=document.getElementById(x);a&&(a.media=t),o&&(o.media=n),s&&(s.media=r)}t();let n=new MutationObserver(t);return n.observe(document.documentElement,{attributes:!0,attributeFilter:[`data-applied-theme`]}),()=>{n.disconnect()}},[i]);let c=s==null?void 0:a({cookie:s}),l=c===`system`?void 0:c,{dark:u,lightHighContrast:d,darkHighContrast:f}=T(l,i);return v(g,{children:[(!i||i===`dark`)&&_(`link`,{rel:`stylesheet`,id:y,href:e,media:u,suppressHydrationWarning:!0}),(!i||i===`light-high-contrast`)&&_(`link`,{rel:`stylesheet`,id:b,href:t,media:d,suppressHydrationWarning:!0}),(!i||i===`dark-high-contrast`)&&_(`link`,{rel:`stylesheet`,id:x,href:n,media:f,suppressHydrationWarning:!0}),!i&&l==null&&_(`script`,{dangerouslySetInnerHTML:{__html:O(i)},nonce:o,suppressHydrationWarning:!0})]})}k.displayName=`MantleStyleSheets`;const A=`https://assets.ngrok.com`,j=`${A}/fonts`,M={roobert:`/roobert/roobert-proportional-vf.woff2`,"jetbrains-mono":`/jetbrains/jetbrainsmono-wght.woff2`,"jetbrains-mono-italic":`/jetbrains/jetbrainsmono-italic-wght.woff2`,"family-regular":`/family/family-regular.woff2`,"family-italic":`/family/family-italic.woff2`};function N(e){return`${j}${e.startsWith(`/`)?e:`/${e}`}`}function P(e){return`<${N(M[e])}>; rel=preload; as=font; type="font/woff2"; crossorigin`}const F=({name:e})=>_(`link`,{rel:`preload`,href:N(M[e]),as:`font`,type:`font/woff2`,crossOrigin:`anonymous`});F.displayName=`PreloadFont`;export{m as $resolvedTheme,n as $theme,k as MantleStyleSheets,F as PreloadFont,p as PreventWrongThemeFlashScript,c as ThemeProvider,A as assetsCdnOrigin,d as extractThemeCookie,N as fontHref,a as getStoredTheme,r as isResolvedTheme,u as isTheme,E as mantleStyleSheetUrls,P as preloadFontLink,e as preventWrongThemeFlashScriptContent,l as readThemeFromHtmlElement,s as resolvedThemes,i as themes,f as useAppliedTheme,t as useInitialHtmlThemeProps,o as useTheme};
 //# sourceMappingURL=theme.js.map

package/dist/theme.js.map

@@ -1 +1 @@
-{"version":3,"file":"theme.js","names":[],"sources":["../src/components/theme/mantle-stylesheets.tsx","../src/components/theme/fonts.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect } from \"react\";\n// ?url imports are resolved by Vite to a browser-accessible URL in both client and SSR\n// builds. The consuming app's Vite bundler handles the transformation; tsdown externalizes\n// these imports so they pass through to the consumer unchanged.\nimport darkCssUrl from \"../../mantle-dark.css?url\";\nimport darkHcCssUrl from \"../../mantle-dark-high-contrast.css?url\";\nimport lightHcCssUrl from \"../../mantle-light-high-contrast.css?url\";\nimport { getStoredTheme } from \"./theme-provider.js\";\nimport type { ResolvedTheme } from \"./themes.js\";\nimport { isResolvedTheme } from \"./themes.js\";\n\n/**\n * Stable IDs for the three lazy-loaded theme `<link>` elements.\n * Used to locate them in the DOM for media attribute updates.\n */\nconst DARK_LINK_ID = \"mantle-dark-styles\";\nconst LIGHT_HIGH_CONTRAST_LINK_ID = \"mantle-light-high-contrast-styles\";\nconst DARK_HIGH_CONTRAST_LINK_ID = \"mantle-dark-high-contrast-styles\";\n\n/**\n * Default `media` attribute values for each lazy-loaded stylesheet.\n * Each one matches only the OS preference for that theme, making them\n * non-render-blocking for users whose OS does not match.\n */\nconst MEDIA_DARK = \"(prefers-color-scheme: dark)\";\nconst MEDIA_LIGHT_HC = \"(prefers-contrast: more) and (prefers-color-scheme: light)\";\nconst MEDIA_DARK_HC = \"(prefers-contrast: more) and (prefers-color-scheme: dark)\";\n\ntype MediaValues = {\n\tdark: string;\n\tlightHighContrast: string;\n\tdarkHighContrast: string;\n};\n\n/**\n * Compute the `media` attribute value for each stylesheet given the active theme.\n * When a theme is active (either from the resolved applied theme or a forced override),\n * its stylesheet's `media` is set to `\"all\"` so the CSS is applied regardless of OS preference.\n */\nfunction computeMediaValues(\n\tappliedTheme: ResolvedTheme | undefined,\n\tforceTheme: ResolvedTheme | undefined,\n): MediaValues {\n\tconst theme = forceTheme ?? appliedTheme;\n\treturn {\n\t\tdark: theme === \"dark\" ? \"all\" : MEDIA_DARK,\n\t\tlightHighContrast: theme === \"light-high-contrast\" ? \"all\" : MEDIA_LIGHT_HC,\n\t\tdarkHighContrast: theme === \"dark-high-contrast\" ? \"all\" : MEDIA_DARK_HC,\n\t};\n}\n\nexport type MantleStylesheetsProps = {\n\t/**\n\t * Force a specific resolved theme's stylesheet to load unconditionally (`media=\"all\"`),\n\t * regardless of the user's OS preference. Use this when your app is locked to a single\n\t * theme (e.g. a dark-only page) so the required CSS is render-blocking as intended.\n\t *\n\t * When omitted, each stylesheet uses its OS media query and becomes non-render-blocking\n\t * for users whose OS preference does not match.\n\t *\n\t * @example\n\t * // Dark-only app — always load dark CSS eagerly\n\t * <MantleStylesheets forceTheme=\"dark\" />\n\t */\n\tforceTheme?: ResolvedTheme;\n\t/**\n\t * The theme cookie string from the incoming HTTP request (e.g. `request.headers.get(\"Cookie\")`\n\t * or the pre-extracted value from {@link extractThemeCookie}). When provided, the server can\n\t * resolve the stored theme and render the correct `media` attribute directly in the SSR HTML,\n\t * eliminating the need for the inline fix script in cases where the user has a non-system\n\t * theme stored in their cookie.\n\t *\n\t * @example\n\t * ```tsx\n\t * // root.tsx loader\n\t * export async function loader({ request }: Route.LoaderArgs) {\n\t *   return { ssrCookie: extractThemeCookie(request.headers.get(\"Cookie\")) };\n\t * }\n\t *\n\t * // root.tsx component\n\t * <MantleStylesheets ssrCookie={loaderData.ssrCookie} nonce={nonce} />\n\t * ```\n\t */\n\tssrCookie?: string;\n\t/**\n\t * An optional CSP nonce to allowlist the inline script that fixes `media` attributes\n\t * synchronously after the `<link>` tags are parsed. Mirror the same nonce you pass\n\t * to {@link PreventWrongThemeFlashScript}.\n\t *\n\t * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/nonce\n\t */\n\tnonce?: string;\n};\n\n/**\n * Inline script that runs synchronously after the `<link>` tags are parsed to fix their\n * `media` attributes based on the applied theme already written to `html[data-applied-theme]`\n * by `PreventWrongThemeFlashScript`. This eliminates FOUC for users who have manually\n * selected a theme that differs from their OS preference.\n */\nfunction fixMediaAttributes(args: {\n\tdarkLinkId: string;\n\tlightHcLinkId: string;\n\tdarkHcLinkId: string;\n\tmediaDark: string;\n\tmediaLightHc: string;\n\tmediaDarkHc: string;\n\tforceTheme: ResolvedTheme | undefined;\n}) {\n\tconst {\n\t\tdarkLinkId,\n\t\tlightHcLinkId,\n\t\tdarkHcLinkId,\n\t\tmediaDark,\n\t\tmediaLightHc,\n\t\tmediaDarkHc,\n\t\tforceTheme,\n\t} = args;\n\tconst appliedTheme = document.documentElement.dataset.appliedTheme;\n\tconst theme = forceTheme ?? appliedTheme;\n\n\tconst darkLink = document.getElementById(darkLinkId) as HTMLLinkElement | null;\n\tconst lightHcLink = document.getElementById(lightHcLinkId) as HTMLLinkElement | null;\n\tconst darkHcLink = document.getElementById(darkHcLinkId) as HTMLLinkElement | null;\n\n\tif (darkLink) {\n\t\tdarkLink.media = theme === \"dark\" ? \"all\" : mediaDark;\n\t}\n\tif (lightHcLink) {\n\t\tlightHcLink.media = theme === \"light-high-contrast\" ? \"all\" : mediaLightHc;\n\t}\n\tif (darkHcLink) {\n\t\tdarkHcLink.media = theme === \"dark-high-contrast\" ? \"all\" : mediaDarkHc;\n\t}\n}\n\nfunction fixMediaScriptContent(forceTheme: ResolvedTheme | undefined): string {\n\tconst args = {\n\t\tdarkLinkId: DARK_LINK_ID,\n\t\tlightHcLinkId: LIGHT_HIGH_CONTRAST_LINK_ID,\n\t\tdarkHcLinkId: DARK_HIGH_CONTRAST_LINK_ID,\n\t\tmediaDark: MEDIA_DARK,\n\t\tmediaLightHc: MEDIA_LIGHT_HC,\n\t\tmediaDarkHc: MEDIA_DARK_HC,\n\t\tforceTheme,\n\t} satisfies Parameters<typeof fixMediaAttributes>[0];\n\treturn `(${fixMediaAttributes.toString()})(${JSON.stringify(args)})`;\n}\n\n/**\n * Renders three `<link rel=\"stylesheet\">` tags for the dark, light-high-contrast, and\n * dark-high-contrast theme CSS files. Each stylesheet is gated behind a `media` attribute\n * matching its OS preference so it is non-render-blocking for users who do not need it.\n *\n * Place this component in `<head>`, after `<PreventWrongThemeFlashScript>`.\n *\n * On the client, a `MutationObserver` watches `html[data-applied-theme]` (kept in sync by\n * `ThemeProvider`) and updates the `media` attributes to `\"all\"` when the user manually\n * selects a theme that differs from their OS preference, ensuring the correct CSS is applied.\n *\n * @example\n * ```tsx\n * // root.tsx\n * <head>\n *   <PreventWrongThemeFlashScript nonce={nonce} />\n *   <MantleStylesheets />\n * </head>\n * ```\n *\n * @example\n * ```tsx\n * // Dark-only app\n * <MantleStylesheets forceTheme=\"dark\" />\n * ```\n */\nfunction MantleStylesheets({ forceTheme, nonce, ssrCookie }: MantleStylesheetsProps) {\n\tuseEffect(() => {\n\t\tfunction getAppliedTheme(): ResolvedTheme | undefined {\n\t\t\tconst value = document.documentElement.dataset.appliedTheme;\n\t\t\treturn isResolvedTheme(value) ? value : undefined;\n\t\t}\n\n\t\tfunction updateMediaAttributes() {\n\t\t\tconst { dark, lightHighContrast, darkHighContrast } = computeMediaValues(\n\t\t\t\tgetAppliedTheme(),\n\t\t\t\tforceTheme,\n\t\t\t);\n\n\t\t\tconst darkLink = document.getElementById(DARK_LINK_ID) as HTMLLinkElement | null;\n\t\t\tconst lightHighContrastLink = document.getElementById(\n\t\t\t\tLIGHT_HIGH_CONTRAST_LINK_ID,\n\t\t\t) as HTMLLinkElement | null;\n\t\t\tconst darkHighContrastLink = document.getElementById(\n\t\t\t\tDARK_HIGH_CONTRAST_LINK_ID,\n\t\t\t) as HTMLLinkElement | null;\n\n\t\t\tif (darkLink) {\n\t\t\t\tdarkLink.media = dark;\n\t\t\t}\n\t\t\tif (lightHighContrastLink) {\n\t\t\t\tlightHighContrastLink.media = lightHighContrast;\n\t\t\t}\n\t\t\tif (darkHighContrastLink) {\n\t\t\t\tdarkHighContrastLink.media = darkHighContrast;\n\t\t\t}\n\t\t}\n\n\t\t// Sync immediately on mount in case the applied theme diverges from the SSR-rendered media values\n\t\tupdateMediaAttributes();\n\n\t\t// Watch for theme changes driven by ThemeProvider\n\t\tconst observer = new MutationObserver(updateMediaAttributes);\n\t\tobserver.observe(document.documentElement, {\n\t\t\tattributes: true,\n\t\t\tattributeFilter: [\"data-applied-theme\"],\n\t\t});\n\n\t\treturn () => {\n\t\t\tobserver.disconnect();\n\t\t};\n\t}, [forceTheme]);\n\n\t// On SSR (and as the initial React render), emit the link tags with media values\n\t// derived from the cookie-stored theme (if available) and forceTheme.\n\t// The useEffect above will correct them on the client before the user can interact.\n\tconst ssrStoredTheme = ssrCookie != null ? getStoredTheme({ cookie: ssrCookie }) : undefined;\n\tconst ssrAppliedTheme = ssrStoredTheme !== \"system\" ? ssrStoredTheme : undefined;\n\tconst { dark, lightHighContrast, darkHighContrast } = computeMediaValues(\n\t\tssrAppliedTheme,\n\t\tforceTheme,\n\t);\n\n\t// The inline fix script corrects media attributes for users whose stored theme differs from\n\t// their OS preference. It is only needed when the SSR HTML may have been rendered with\n\t// incorrect media values — i.e. when neither ssrCookie (with a non-system theme) nor\n\t// forceTheme provide a deterministic answer at render time.\n\tconst needsFixScript = forceTheme == null && ssrAppliedTheme == null;\n\n\treturn (\n\t\t<>\n\t\t\t<link\n\t\t\t\trel=\"stylesheet\"\n\t\t\t\tid={DARK_LINK_ID}\n\t\t\t\thref={darkCssUrl}\n\t\t\t\tmedia={dark}\n\t\t\t\tsuppressHydrationWarning\n\t\t\t/>\n\t\t\t<link\n\t\t\t\trel=\"stylesheet\"\n\t\t\t\tid={LIGHT_HIGH_CONTRAST_LINK_ID}\n\t\t\t\thref={lightHcCssUrl}\n\t\t\t\tmedia={lightHighContrast}\n\t\t\t\tsuppressHydrationWarning\n\t\t\t/>\n\t\t\t<link\n\t\t\t\trel=\"stylesheet\"\n\t\t\t\tid={DARK_HIGH_CONTRAST_LINK_ID}\n\t\t\t\thref={darkHcCssUrl}\n\t\t\t\tmedia={darkHighContrast}\n\t\t\t\tsuppressHydrationWarning\n\t\t\t/>\n\t\t\t{needsFixScript && (\n\t\t\t\t<script\n\t\t\t\t\tdangerouslySetInnerHTML={{ __html: fixMediaScriptContent(forceTheme) }}\n\t\t\t\t\tnonce={nonce}\n\t\t\t\t\tsuppressHydrationWarning\n\t\t\t\t/>\n\t\t\t)}\n\t\t</>\n\t);\n}\nMantleStylesheets.displayName = \"MantleStylesheets\";\n\nexport { MantleStylesheets };\n","/**\n * @fileoverview Helpers for preloading ngrok brand fonts from the CDN.\n * All font URLs resolve to `${assetsCdnOrigin}/fonts`.\n */\n\n/**\n * The origin for the assets CDN where custom ngrok fonts and assets are hosted.\n *\n * Keep this stable across the app so we can preconnect/DNS-prefetch consistently.\n * @public\n */\nconst assetsCdnOrigin = \"https://assets.ngrok.com\";\n\n/**\n * Base path for font assets on the CDN.\n * @internal\n */\nconst cdnBase = `${assetsCdnOrigin}/fonts`;\n\nconst coreFontNames = [\n\t\"roobert\",\n\t\"jetbrains-mono\",\n\t\"jetbrains-mono-italic\",\n\t\"family-regular\",\n\t\"family-italic\",\n] as const;\n/**\n * Named keys identifying each individual core font.\n * @public\n */\ntype CoreFontName = (typeof coreFontNames)[number];\n\n/**\n * Maps each {@link CoreFontName} to its CDN font path (relative to the fonts base).\n * @internal\n */\nconst coreFontPathByName = {\n\troobert: \"/roobert/roobert-proportional-vf.woff2\",\n\t\"jetbrains-mono\": \"/jetbrains/jetbrainsmono-wght.woff2\",\n\t\"jetbrains-mono-italic\": \"/jetbrains/jetbrainsmono-italic-wght.woff2\",\n\t\"family-regular\": \"/family/family-regular.woff2\",\n\t\"family-italic\": \"/family/family-italic.woff2\",\n} as const satisfies Record<CoreFontName, `/${string}`>;\n\ntype FontPath = `/${string}` | (string & {});\n\n/**\n * Builds an absolute CDN URL for a given font.\n *\n * @returns {`https://assets.ngrok.com/fonts${T}`} An absolute, literal-typed CDN URL.\n *\n * @example\n * const href = fontHref(\"/roobert/roobert-proportional-vf.woff2\");\n * // -> \"https://assets.ngrok.com/fonts/roobert/roobert-proportional-vf.woff2\"\n */\nfunction fontHref<T extends FontPath = FontPath>(font: T) {\n\tconst path = font.startsWith(\"/\") ? font : `/${font}`;\n\treturn `${cdnBase}${path}` as const;\n}\n\n/**\n * Props for {@link PreloadFont}.\n * @public\n */\ntype PreloadFontProps = {\n\t/**\n\t * The name of the individual core font to preload.\n\t *\n\t * - `\"roobert\"` — Roobert proportional variable font\n\t * - `\"jetbrains-mono\"` — JetBrains Mono variable weight\n\t * - `\"jetbrains-mono-italic\"` — JetBrains Mono italic variable weight\n\t * - `\"family-regular\"` — Family regular\n\t * - `\"family-italic\"` — Family italic\n\t */\n\tname: CoreFontName;\n};\n\n/**\n * Returns an HTTP `Link` header value that preloads a single core font by name.\n *\n * Identical in intent to {@link PreloadFont}, but for server-side use where\n * you want to send the preload hint as an HTTP header instead of (or in\n * addition to) an HTML `<link>` element. Sending this as a `Link` header lets\n * the browser start the font fetch before it has parsed any HTML.\n *\n * @remarks\n * For best performance, also send a `preconnect` hint to {@link assetsCdnOrigin}\n * in the same `Link` header.\n *\n * @example\n * ```ts\n * // In an HTTP handler / server entry:\n * headers.append(\"Link\", preloadFontLink(\"roobert\"));\n * headers.append(\"Link\", preloadFontLink(\"jetbrains-mono\"));\n *\n * // Or as a single combined header:\n * headers.set(\"Link\", [\n *   `<${assetsCdnOrigin}>; rel=preconnect; crossorigin`,\n *   preloadFontLink(\"roobert\"),\n * ].join(\", \"));\n * ```\n */\nfunction preloadFontLink(name: CoreFontName): string {\n\tconst href = fontHref(coreFontPathByName[name]);\n\treturn `<${href}>; rel=preload; as=font; type=\"font/woff2\"; crossorigin`;\n}\n\n/**\n * Preloads a single core font by name.\n *\n * Use this when you only need one or two specific fonts rather than all core\n * fonts. Include it as early as possible in the document `<head>`.\n *\n * @remarks\n * For best performance, pair this with preconnect/dns-prefetch hints to the CDN.\n *\n * @example\n * ```tsx\n * <head>\n *   <link rel=\"preconnect\" href={assetsCdnOrigin} crossOrigin=\"anonymous\" />\n *   <link rel=\"dns-prefetch\" href={assetsCdnOrigin} />\n *   <PreloadFont name=\"roobert\" />\n *   <PreloadFont name=\"jetbrains-mono\" />\n * </head>\n * ```\n */\nconst PreloadFont = ({ name }: PreloadFontProps) => (\n\t<link\n\t\trel=\"preload\"\n\t\thref={fontHref(coreFontPathByName[name])}\n\t\tas=\"font\"\n\t\ttype=\"font/woff2\"\n\t\tcrossOrigin=\"anonymous\"\n\t/>\n);\nPreloadFont.displayName = \"PreloadFont\";\n\nexport type { CoreFontName };\n\nexport {\n\t//,\n\tassetsCdnOrigin,\n\tfontHref,\n\tpreloadFontLink,\n\tPreloadFont,\n};\n"],"mappings":"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"}
+{"version":3,"file":"theme.js","names":[],"sources":["../src/components/theme/mantle-style-sheets.tsx","../src/components/theme/fonts.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect } from \"react\";\nimport { getStoredTheme } from \"./theme-provider.js\";\nimport type { ResolvedTheme } from \"./themes.js\";\nimport { isResolvedTheme } from \"./themes.js\";\n\n/**\n * Stable IDs for the three lazy-loaded theme `<link>` elements.\n * Used to locate them in the DOM for media attribute updates.\n */\nconst DARK_LINK_ID = \"mantle-dark-styles\";\nconst LIGHT_HIGH_CONTRAST_LINK_ID = \"mantle-light-high-contrast-styles\";\nconst DARK_HIGH_CONTRAST_LINK_ID = \"mantle-dark-high-contrast-styles\";\n\n/**\n * Default `media` attribute values for each lazy-loaded stylesheet.\n * Each one matches only the OS preference for that theme, making them\n * non-render-blocking for users whose OS does not match.\n */\nconst MEDIA_DARK = \"(prefers-color-scheme: dark)\";\nconst MEDIA_LIGHT_HC = \"(prefers-contrast: more) and (prefers-color-scheme: light)\";\nconst MEDIA_DARK_HC = \"(prefers-contrast: more) and (prefers-color-scheme: dark)\";\n\ntype MediaValues = {\n\tdark: string;\n\tlightHighContrast: string;\n\tdarkHighContrast: string;\n};\n\n/**\n * Compute the `media` attribute value for each stylesheet given the active theme.\n * When a theme is active (either from the resolved applied theme or a forced override),\n * its stylesheet's `media` is set to `\"all\"` so the CSS is applied regardless of OS preference.\n */\nfunction computeMediaValues(\n\tappliedTheme: ResolvedTheme | undefined,\n\tforceTheme: ResolvedTheme | undefined,\n): MediaValues {\n\tconst theme = forceTheme ?? appliedTheme;\n\treturn {\n\t\tdark: theme === \"dark\" ? \"all\" : MEDIA_DARK,\n\t\tlightHighContrast: theme === \"light-high-contrast\" ? \"all\" : MEDIA_LIGHT_HC,\n\t\tdarkHighContrast: theme === \"dark-high-contrast\" ? \"all\" : MEDIA_DARK_HC,\n\t};\n}\n\n/**\n * Browser-accessible URLs for mantle's three lazy-loaded theme stylesheets.\n *\n * Use {@link mantleStyleSheetUrls} to create this object from Vite `?url` imports.\n */\nexport type MantleThemeCssUrls = {\n\t/**\n\t * Browser-accessible URL for `mantle-dark.css`.\n\t * @example\n\t * ```tsx\n\t * // in vite app\n\t * import darkCssUrl from \"@ngrok/mantle/mantle-dark.css?url\"\n\t * ```\n\t */\n\tdarkCssUrl: string;\n\t/**\n\t * Browser-accessible URL for `mantle-light-high-contrast.css`.\n\t * @example\n\t * ```tsx\n\t * // in vite app\n\t * import lightHighContrastCssUrl from \"@ngrok/mantle/mantle-light-high-contrast.css?url\"\n\t * ```\n\t */\n\tlightHighContrastCssUrl: string;\n\t/**\n\t * Browser-accessible URL for `mantle-dark-high-contrast.css`.\n\t * @example\n\t * ```tsx\n\t * // in vite app\n\t * import darkHighContrastCssUrl from \"@ngrok/mantle/mantle-dark-high-contrast.css?url\"\n\t * ```\n\t */\n\tdarkHighContrastCssUrl: string;\n};\n\n/**\n * Collects the three Vite `?url` imports for mantle's theme stylesheets into a typed object\n * that can be spread directly into `<MantleStyleSheets>`.\n *\n * Call this once at the top of your app entry (e.g. `root.tsx`) and spread the result:\n *\n * ```ts\n * import darkCssUrl from \"@ngrok/mantle/mantle-dark.css?url\";\n * import darkHighContrastCssUrl from \"@ngrok/mantle/mantle-dark-high-contrast.css?url\";\n * import lightHighContrastCssUrl from \"@ngrok/mantle/mantle-light-high-contrast.css?url\";\n *\n * const themeUrls = mantleStyleSheetUrls({ darkCssUrl, lightHighContrastCssUrl, darkHighContrastCssUrl });\n *\n * // In JSX:\n * <MantleStyleSheets {...themeUrls} nonce={nonce} ssrCookie={ssrCookie} />\n * ```\n */\nfunction mantleStyleSheetUrls(urls: MantleThemeCssUrls): MantleThemeCssUrls {\n\treturn urls;\n}\n\nexport type MantleStyleSheetsProps = MantleThemeCssUrls & {\n\t/**\n\t * Force a specific resolved theme's stylesheet to load unconditionally (`media=\"all\"`),\n\t * regardless of the user's OS preference. Use this when your app is locked to a single\n\t * theme (e.g. a dark-only page) so the required CSS is render-blocking as intended.\n\t *\n\t * When omitted, each stylesheet uses its OS media query and becomes non-render-blocking\n\t * for users whose OS preference does not match.\n\t *\n\t * @example\n\t * // Dark-only app — always load dark CSS eagerly\n\t * <MantleStyleSheets forceTheme=\"dark\" {...themeUrls} />\n\t */\n\tforceTheme?: ResolvedTheme;\n\t/**\n\t * The theme cookie string from the incoming HTTP request (e.g. `request.headers.get(\"Cookie\")`\n\t * or the pre-extracted value from {@link extractThemeCookie}). When provided, the server can\n\t * resolve the stored theme and render the correct `media` attribute directly in the SSR HTML,\n\t * eliminating the need for the inline fix script in cases where the user has a non-system\n\t * theme stored in their cookie.\n\t *\n\t * @example\n\t * ```tsx\n\t * // root.tsx loader\n\t * export async function loader({ request }: Route.LoaderArgs) {\n\t *   return { ssrCookie: extractThemeCookie(request.headers.get(\"Cookie\")) };\n\t * }\n\t *\n\t * // root.tsx component\n\t * <MantleStyleSheets {...themeUrls} ssrCookie={loaderData.ssrCookie} nonce={nonce} />\n\t * ```\n\t */\n\tssrCookie?: string;\n\t/**\n\t * An optional CSP nonce to allowlist the inline script that fixes `media` attributes\n\t * synchronously after the `<link>` tags are parsed. Mirror the same nonce you pass\n\t * to {@link PreventWrongThemeFlashScript}.\n\t *\n\t * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/nonce\n\t */\n\tnonce?: string;\n};\n\n/**\n * Inline script that runs synchronously after the `<link>` tags are parsed to fix their\n * `media` attributes based on the applied theme already written to `html[data-applied-theme]`\n * by `PreventWrongThemeFlashScript`. This eliminates FOUC for users who have manually\n * selected a theme that differs from their OS preference.\n */\nfunction fixMediaAttributes(args: {\n\tdarkLinkId: string;\n\tlightHcLinkId: string;\n\tdarkHcLinkId: string;\n\tmediaDark: string;\n\tmediaLightHc: string;\n\tmediaDarkHc: string;\n\tforceTheme: ResolvedTheme | undefined;\n}) {\n\tconst {\n\t\tdarkLinkId,\n\t\tlightHcLinkId,\n\t\tdarkHcLinkId,\n\t\tmediaDark,\n\t\tmediaLightHc,\n\t\tmediaDarkHc,\n\t\tforceTheme,\n\t} = args;\n\tconst appliedTheme = document.documentElement.dataset.appliedTheme;\n\tconst theme = forceTheme ?? appliedTheme;\n\n\tconst darkLink = document.getElementById(darkLinkId) as HTMLLinkElement | null;\n\tconst lightHcLink = document.getElementById(lightHcLinkId) as HTMLLinkElement | null;\n\tconst darkHcLink = document.getElementById(darkHcLinkId) as HTMLLinkElement | null;\n\n\tif (darkLink) {\n\t\tdarkLink.media = theme === \"dark\" ? \"all\" : mediaDark;\n\t}\n\tif (lightHcLink) {\n\t\tlightHcLink.media = theme === \"light-high-contrast\" ? \"all\" : mediaLightHc;\n\t}\n\tif (darkHcLink) {\n\t\tdarkHcLink.media = theme === \"dark-high-contrast\" ? \"all\" : mediaDarkHc;\n\t}\n}\n\nfunction fixMediaScriptContent(forceTheme: ResolvedTheme | undefined): string {\n\tconst args = {\n\t\tdarkLinkId: DARK_LINK_ID,\n\t\tlightHcLinkId: LIGHT_HIGH_CONTRAST_LINK_ID,\n\t\tdarkHcLinkId: DARK_HIGH_CONTRAST_LINK_ID,\n\t\tmediaDark: MEDIA_DARK,\n\t\tmediaLightHc: MEDIA_LIGHT_HC,\n\t\tmediaDarkHc: MEDIA_DARK_HC,\n\t\tforceTheme,\n\t} satisfies Parameters<typeof fixMediaAttributes>[0];\n\treturn `(${fixMediaAttributes.toString()})(${JSON.stringify(args)})`;\n}\n\n/**\n * Renders `<link rel=\"stylesheet\">` tags for the dark, light-high-contrast, and\n * dark-high-contrast theme CSS files. Each stylesheet is gated behind a `media` attribute\n * matching its OS preference so it is non-render-blocking for users who do not need it.\n *\n * Use {@link mantleStyleSheetUrls} to collect the required CSS URL props from Vite `?url`\n * imports and spread them in:\n *\n * ```ts\n * import darkCssUrl from \"@ngrok/mantle/mantle-dark.css?url\";\n * import darkHighContrastCssUrl from \"@ngrok/mantle/mantle-dark-high-contrast.css?url\";\n * import lightHighContrastCssUrl from \"@ngrok/mantle/mantle-light-high-contrast.css?url\";\n *\n * const themeUrls = mantleStyleSheetUrls({ darkCssUrl, lightHighContrastCssUrl, darkHighContrastCssUrl });\n * ```\n *\n * Place this component in `<head>`, after `<PreventWrongThemeFlashScript>`.\n *\n * On the client, a `MutationObserver` watches `html[data-applied-theme]` (kept in sync by\n * `ThemeProvider`) and updates the `media` attributes to `\"all\"` when the user manually\n * selects a theme that differs from their OS preference, ensuring the correct CSS is applied.\n *\n * When `forceTheme` is set, only the link tag for that theme is rendered — the others are\n * omitted entirely to avoid unnecessary network requests.\n *\n * @example\n * ```tsx\n * // root.tsx\n * import darkCssUrl from \"@ngrok/mantle/mantle-dark.css?url\";\n * import darkHighContrastCssUrl from \"@ngrok/mantle/mantle-dark-high-contrast.css?url\";\n * import lightHighContrastCssUrl from \"@ngrok/mantle/mantle-light-high-contrast.css?url\";\n * import { mantleStyleSheetUrls, MantleStyleSheets, PreventWrongThemeFlashScript } from \"@ngrok/mantle/theme\";\n *\n * const themeUrls = mantleStyleSheetUrls({ darkCssUrl, lightHighContrastCssUrl, darkHighContrastCssUrl });\n *\n * <head>\n *   <PreventWrongThemeFlashScript nonce={nonce} />\n *   <MantleStyleSheets {...themeUrls} nonce={nonce} ssrCookie={loaderData?.ssrCookie} />\n * </head>\n * ```\n */\nfunction MantleStyleSheets({\n\tdarkCssUrl,\n\tlightHighContrastCssUrl,\n\tdarkHighContrastCssUrl,\n\tforceTheme,\n\tnonce,\n\tssrCookie,\n}: MantleStyleSheetsProps) {\n\tuseEffect(() => {\n\t\tfunction getAppliedTheme(): ResolvedTheme | undefined {\n\t\t\tconst value = document.documentElement.dataset.appliedTheme;\n\t\t\treturn isResolvedTheme(value) ? value : undefined;\n\t\t}\n\n\t\tfunction updateMediaAttributes() {\n\t\t\tconst { dark, lightHighContrast, darkHighContrast } = computeMediaValues(\n\t\t\t\tgetAppliedTheme(),\n\t\t\t\tforceTheme,\n\t\t\t);\n\n\t\t\tconst darkLink = document.getElementById(DARK_LINK_ID) as HTMLLinkElement | null;\n\t\t\tconst lightHighContrastLink = document.getElementById(\n\t\t\t\tLIGHT_HIGH_CONTRAST_LINK_ID,\n\t\t\t) as HTMLLinkElement | null;\n\t\t\tconst darkHighContrastLink = document.getElementById(\n\t\t\t\tDARK_HIGH_CONTRAST_LINK_ID,\n\t\t\t) as HTMLLinkElement | null;\n\n\t\t\tif (darkLink) {\n\t\t\t\tdarkLink.media = dark;\n\t\t\t}\n\t\t\tif (lightHighContrastLink) {\n\t\t\t\tlightHighContrastLink.media = lightHighContrast;\n\t\t\t}\n\t\t\tif (darkHighContrastLink) {\n\t\t\t\tdarkHighContrastLink.media = darkHighContrast;\n\t\t\t}\n\t\t}\n\n\t\t// Sync immediately on mount in case the applied theme diverges from the SSR-rendered media values\n\t\tupdateMediaAttributes();\n\n\t\t// Watch for theme changes driven by ThemeProvider\n\t\tconst observer = new MutationObserver(updateMediaAttributes);\n\t\tobserver.observe(document.documentElement, {\n\t\t\tattributes: true,\n\t\t\tattributeFilter: [\"data-applied-theme\"],\n\t\t});\n\n\t\treturn () => {\n\t\t\tobserver.disconnect();\n\t\t};\n\t}, [forceTheme]);\n\n\t// On SSR (and as the initial React render), emit the link tags with media values\n\t// derived from the cookie-stored theme (if available) and forceTheme.\n\t// The useEffect above will correct them on the client before the user can interact.\n\tconst ssrStoredTheme = ssrCookie != null ? getStoredTheme({ cookie: ssrCookie }) : undefined;\n\tconst ssrAppliedTheme = ssrStoredTheme !== \"system\" ? ssrStoredTheme : undefined;\n\tconst { dark, lightHighContrast, darkHighContrast } = computeMediaValues(\n\t\tssrAppliedTheme,\n\t\tforceTheme,\n\t);\n\n\t// The inline fix script corrects media attributes for users whose stored theme differs from\n\t// their OS preference. It is only needed when the SSR HTML may have been rendered with\n\t// incorrect media values — i.e. when neither ssrCookie (with a non-system theme) nor\n\t// forceTheme provide a deterministic answer at render time.\n\tconst needsFixScript = !forceTheme && ssrAppliedTheme == null;\n\n\t// When forceTheme is set, only render the link tag for that specific theme's stylesheet.\n\t// Light is the base theme with no dedicated lazy stylesheet, so forceTheme=\"light\" renders\n\t// no link tags at all. When forceTheme is unset, all three are rendered.\n\tconst renderDark = !forceTheme || forceTheme === \"dark\";\n\tconst renderLightHighContrast = !forceTheme || forceTheme === \"light-high-contrast\";\n\tconst renderDarkHighContrast = !forceTheme || forceTheme === \"dark-high-contrast\";\n\n\treturn (\n\t\t<>\n\t\t\t{renderDark && (\n\t\t\t\t<link\n\t\t\t\t\trel=\"stylesheet\"\n\t\t\t\t\tid={DARK_LINK_ID}\n\t\t\t\t\thref={darkCssUrl}\n\t\t\t\t\tmedia={dark}\n\t\t\t\t\tsuppressHydrationWarning\n\t\t\t\t/>\n\t\t\t)}\n\t\t\t{renderLightHighContrast && (\n\t\t\t\t<link\n\t\t\t\t\trel=\"stylesheet\"\n\t\t\t\t\tid={LIGHT_HIGH_CONTRAST_LINK_ID}\n\t\t\t\t\thref={lightHighContrastCssUrl}\n\t\t\t\t\tmedia={lightHighContrast}\n\t\t\t\t\tsuppressHydrationWarning\n\t\t\t\t/>\n\t\t\t)}\n\t\t\t{renderDarkHighContrast && (\n\t\t\t\t<link\n\t\t\t\t\trel=\"stylesheet\"\n\t\t\t\t\tid={DARK_HIGH_CONTRAST_LINK_ID}\n\t\t\t\t\thref={darkHighContrastCssUrl}\n\t\t\t\t\tmedia={darkHighContrast}\n\t\t\t\t\tsuppressHydrationWarning\n\t\t\t\t/>\n\t\t\t)}\n\t\t\t{needsFixScript && (\n\t\t\t\t<script\n\t\t\t\t\tdangerouslySetInnerHTML={{ __html: fixMediaScriptContent(forceTheme) }}\n\t\t\t\t\tnonce={nonce}\n\t\t\t\t\tsuppressHydrationWarning\n\t\t\t\t/>\n\t\t\t)}\n\t\t</>\n\t);\n}\nMantleStyleSheets.displayName = \"MantleStyleSheets\";\n\nexport {\n\t//,\n\tmantleStyleSheetUrls,\n\tMantleStyleSheets,\n};\n","/**\n * @fileoverview Helpers for preloading ngrok brand fonts from the CDN.\n * All font URLs resolve to `${assetsCdnOrigin}/fonts`.\n */\n\n/**\n * The origin for the assets CDN where custom ngrok fonts and assets are hosted.\n *\n * Keep this stable across the app so we can preconnect/DNS-prefetch consistently.\n * @public\n */\nconst assetsCdnOrigin = \"https://assets.ngrok.com\";\n\n/**\n * Base path for font assets on the CDN.\n * @internal\n */\nconst cdnBase = `${assetsCdnOrigin}/fonts`;\n\nconst coreFontNames = [\n\t\"roobert\",\n\t\"jetbrains-mono\",\n\t\"jetbrains-mono-italic\",\n\t\"family-regular\",\n\t\"family-italic\",\n] as const;\n/**\n * Named keys identifying each individual core font.\n * @public\n */\ntype CoreFontName = (typeof coreFontNames)[number];\n\n/**\n * Maps each {@link CoreFontName} to its CDN font path (relative to the fonts base).\n * @internal\n */\nconst coreFontPathByName = {\n\troobert: \"/roobert/roobert-proportional-vf.woff2\",\n\t\"jetbrains-mono\": \"/jetbrains/jetbrainsmono-wght.woff2\",\n\t\"jetbrains-mono-italic\": \"/jetbrains/jetbrainsmono-italic-wght.woff2\",\n\t\"family-regular\": \"/family/family-regular.woff2\",\n\t\"family-italic\": \"/family/family-italic.woff2\",\n} as const satisfies Record<CoreFontName, `/${string}`>;\n\ntype FontPath = `/${string}` | (string & {});\n\n/**\n * Builds an absolute CDN URL for a given font.\n *\n * @returns {`https://assets.ngrok.com/fonts${T}`} An absolute, literal-typed CDN URL.\n *\n * @example\n * const href = fontHref(\"/roobert/roobert-proportional-vf.woff2\");\n * // -> \"https://assets.ngrok.com/fonts/roobert/roobert-proportional-vf.woff2\"\n */\nfunction fontHref<T extends FontPath = FontPath>(font: T) {\n\tconst path = font.startsWith(\"/\") ? font : `/${font}`;\n\treturn `${cdnBase}${path}` as const;\n}\n\n/**\n * Props for {@link PreloadFont}.\n * @public\n */\ntype PreloadFontProps = {\n\t/**\n\t * The name of the individual core font to preload.\n\t *\n\t * - `\"roobert\"` — Roobert proportional variable font\n\t * - `\"jetbrains-mono\"` — JetBrains Mono variable weight\n\t * - `\"jetbrains-mono-italic\"` — JetBrains Mono italic variable weight\n\t * - `\"family-regular\"` — Family regular\n\t * - `\"family-italic\"` — Family italic\n\t */\n\tname: CoreFontName;\n};\n\n/**\n * Returns an HTTP `Link` header value that preloads a single core font by name.\n *\n * Identical in intent to {@link PreloadFont}, but for server-side use where\n * you want to send the preload hint as an HTTP header instead of (or in\n * addition to) an HTML `<link>` element. Sending this as a `Link` header lets\n * the browser start the font fetch before it has parsed any HTML.\n *\n * @remarks\n * For best performance, also send a `preconnect` hint to {@link assetsCdnOrigin}\n * in the same `Link` header.\n *\n * @example\n * ```ts\n * // In an HTTP handler / server entry:\n * headers.append(\"Link\", preloadFontLink(\"roobert\"));\n * headers.append(\"Link\", preloadFontLink(\"jetbrains-mono\"));\n *\n * // Or as a single combined header:\n * headers.set(\"Link\", [\n *   `<${assetsCdnOrigin}>; rel=preconnect; crossorigin`,\n *   preloadFontLink(\"roobert\"),\n * ].join(\", \"));\n * ```\n */\nfunction preloadFontLink(name: CoreFontName): string {\n\tconst href = fontHref(coreFontPathByName[name]);\n\treturn `<${href}>; rel=preload; as=font; type=\"font/woff2\"; crossorigin`;\n}\n\n/**\n * Preloads a single core font by name.\n *\n * Use this when you only need one or two specific fonts rather than all core\n * fonts. Include it as early as possible in the document `<head>`.\n *\n * @remarks\n * For best performance, pair this with preconnect/dns-prefetch hints to the CDN.\n *\n * @example\n * ```tsx\n * <head>\n *   <link rel=\"preconnect\" href={assetsCdnOrigin} crossOrigin=\"anonymous\" />\n *   <link rel=\"dns-prefetch\" href={assetsCdnOrigin} />\n *   <PreloadFont name=\"roobert\" />\n *   <PreloadFont name=\"jetbrains-mono\" />\n * </head>\n * ```\n */\nconst PreloadFont = ({ name }: PreloadFontProps) => (\n\t<link\n\t\trel=\"preload\"\n\t\thref={fontHref(coreFontPathByName[name])}\n\t\tas=\"font\"\n\t\ttype=\"font/woff2\"\n\t\tcrossOrigin=\"anonymous\"\n\t/>\n);\nPreloadFont.displayName = \"PreloadFont\";\n\nexport type { CoreFontName };\n\nexport {\n\t//,\n\tassetsCdnOrigin,\n\tfontHref,\n\tpreloadFontLink,\n\tPreloadFont,\n};\n"],"mappings":"qPAWA,MAAM,EAAe,qBACf,EAA8B,oCAC9B,EAA6B,mCAO7B,EAAa,+BACb,EAAiB,6DACjB,EAAgB,4DAatB,SAAS,EACR,EACA,EACc,CACd,IAAM,EAAQ,GAAc,EAC5B,MAAO,CACN,KAAM,IAAU,OAAS,MAAQ,EACjC,kBAAmB,IAAU,sBAAwB,MAAQ,EAC7D,iBAAkB,IAAU,qBAAuB,MAAQ,EAC3D,CAuDF,SAAS,EAAqB,EAA8C,CAC3E,OAAO,EAoDR,SAAS,EAAmB,EAQzB,CACF,GAAM,CACL,aACA,gBACA,eACA,YACA,eACA,cACA,cACG,EACE,EAAe,SAAS,gBAAgB,QAAQ,aAChD,EAAQ,GAAc,EAEtB,EAAW,SAAS,eAAe,EAAW,CAC9C,EAAc,SAAS,eAAe,EAAc,CACpD,EAAa,SAAS,eAAe,EAAa,CAEpD,IACH,EAAS,MAAQ,IAAU,OAAS,MAAQ,GAEzC,IACH,EAAY,MAAQ,IAAU,sBAAwB,MAAQ,GAE3D,IACH,EAAW,MAAQ,IAAU,qBAAuB,MAAQ,GAI9D,SAAS,EAAsB,EAA+C,CAC7E,IAAM,EAAO,CACZ,WAAY,EACZ,cAAe,EACf,aAAc,EACd,UAAW,EACX,aAAc,EACd,YAAa,EACb,aACA,CACD,MAAO,IAAI,EAAmB,UAAU,CAAC,IAAI,KAAK,UAAU,EAAK,CAAC,GA4CnE,SAAS,EAAkB,CAC1B,aACA,0BACA,yBACA,aACA,QACA,aAC0B,CAC1B,MAAgB,CACf,SAAS,GAA6C,CACrD,IAAM,EAAQ,SAAS,gBAAgB,QAAQ,aAC/C,OAAO,EAAgB,EAAM,CAAG,EAAQ,IAAA,GAGzC,SAAS,GAAwB,CAChC,GAAM,CAAE,OAAM,oBAAmB,oBAAqB,EACrD,GAAiB,CACjB,EACA,CAEK,EAAW,SAAS,eAAe,EAAa,CAChD,EAAwB,SAAS,eACtC,EACA,CACK,EAAuB,SAAS,eACrC,EACA,CAEG,IACH,EAAS,MAAQ,GAEd,IACH,EAAsB,MAAQ,GAE3B,IACH,EAAqB,MAAQ,GAK/B,GAAuB,CAGvB,IAAM,EAAW,IAAI,iBAAiB,EAAsB,CAM5D,OALA,EAAS,QAAQ,SAAS,gBAAiB,CAC1C,WAAY,GACZ,gBAAiB,CAAC,qBAAqB,CACvC,CAAC,KAEW,CACZ,EAAS,YAAY,GAEpB,CAAC,EAAW,CAAC,CAKhB,IAAM,EAAiB,GAAa,KAA+C,IAAA,GAAxC,EAAe,CAAE,OAAQ,EAAW,CAAC,CAC1E,EAAkB,IAAmB,SAA4B,IAAA,GAAjB,EAChD,CAAE,OAAM,oBAAmB,oBAAqB,EACrD,EACA,EACA,CAeD,OACC,EAAA,EAAA,CAAA,SAAA,EALkB,CAAC,GAAc,IAAe,SAO9C,EAAC,OAAD,CACC,IAAI,aACJ,GAAI,EACJ,KAAM,EACN,MAAO,EACP,yBAAA,GACC,CAAA,EAZ2B,CAAC,GAAc,IAAe,wBAe3D,EAAC,OAAD,CACC,IAAI,aACJ,GAAI,EACJ,KAAM,EACN,MAAO,EACP,yBAAA,GACC,CAAA,EApB0B,CAAC,GAAc,IAAe,uBAuB1D,EAAC,OAAD,CACC,IAAI,aACJ,GAAI,EACJ,KAAM,EACN,MAAO,EACP,yBAAA,GACC,CAAA,CApCkB,CAAC,GAAc,GAAmB,MAuCtD,EAAC,SAAD,CACC,wBAAyB,CAAE,OAAQ,EAAsB,EAAW,CAAE,CAC/D,QACP,yBAAA,GACC,CAAA,CAED,CAAA,CAAA,CAGL,EAAkB,YAAc,oBC3VhC,MAAM,EAAkB,2BAMlB,EAAU,GAAG,EAAgB,QAmB7B,EAAqB,CAC1B,QAAS,yCACT,iBAAkB,sCAClB,wBAAyB,6CACzB,iBAAkB,+BAClB,gBAAiB,8BACjB,CAaD,SAAS,EAAwC,EAAS,CAEzD,MAAO,GAAG,IADG,EAAK,WAAW,IAAI,CAAG,EAAO,IAAI,MA8ChD,SAAS,EAAgB,EAA4B,CAEpD,MAAO,IADM,EAAS,EAAmB,GAAM,CAC/B,yDAsBjB,MAAM,GAAe,CAAE,UACtB,EAAC,OAAD,CACC,IAAI,UACJ,KAAM,EAAS,EAAmB,GAAM,CACxC,GAAG,OACH,KAAK,aACL,YAAY,YACX,CAAA,CAEH,EAAY,YAAc"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ngrok/mantle",
-  "version": "0.66.7",
+  "version": "0.66.8",
   "description": "mantle is ngrok's UI library and design system.",
   "homepage": "https://mantle.ngrok.com",
   "license": "MIT",