@ngrok/mantle 0.76.3 → 0.76.5

package/dist/theme.js.map

@@ -1 +0,0 @@
-{"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\n/**\n * Returns the raw JavaScript string for the inline `<script>` that runs synchronously\n * after the `<link>` tags are parsed to fix their `media` attributes based on the applied\n * theme already written to `html[data-applied-theme]` by `PreventWrongThemeFlashScript`.\n * This eliminates FOUC for users who have manually selected a theme that differs from\n * their OS preference.\n *\n * Use this when you need to inline the script directly into SSR HTML outside of a React\n * context — for example, in a legacy Go service that renders the initial HTML response.\n *\n * @example\n * ```go\n * // In a Go template, inline script content that was pre-generated by mantle\n * // (e.g., via fixMediaScriptContent(undefined) in a JS/Node build step)\n * fmt.Fprintf(w, `<script nonce=\"%s\">%s</script>`, nonce, scriptContent)\n * ```\n */\nfunction fixMediaScriptContent(forceTheme?: ResolvedTheme): 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\tfixMediaScriptContent,\n\tmantleStyleSheetUrls,\n\tMantleStyleSheets,\n};\n","/**\n * @file 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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"}

package/dist/toast-CR3MVChj.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"toast-CR3MVChj.js","names":["IconComponent"],"sources":["../src/components/toast/toast.tsx"],"sourcesContent":["\"use client\";\n\nimport { CheckCircleIcon } from \"@phosphor-icons/react/CheckCircle\";\nimport { InfoIcon } from \"@phosphor-icons/react/Info\";\nimport { WarningIcon } from \"@phosphor-icons/react/Warning\";\nimport { WarningDiamondIcon } from \"@phosphor-icons/react/WarningDiamond\";\nimport {\n\ttype ComponentProps,\n\ttype ComponentRef,\n\ttype ReactNode,\n\tcreateContext,\n\tforwardRef,\n\tuseContext,\n\tuseMemo,\n} from \"react\";\nimport * as ToastPrimitive from \"sonner\";\nimport type { WithAsChild } from \"../../types/as-child.js\";\nimport type { WithStyleProps } from \"../../types/with-style-props.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { Icon as IconComponent } from \"../icon/icon.js\";\nimport type { SvgOnlyProps } from \"../icon/svg-only.js\";\nimport { Slot } from \"../slot/index.js\";\nimport { useAppliedTheme } from \"../theme/theme-provider.js\";\n\ntype ToasterPrimitiveProps = ComponentProps<typeof ToastPrimitive.Toaster>;\ntype ToasterPrimitiveTheme = ToasterPrimitiveProps[\"theme\"];\n\ntype ToasterProps = WithStyleProps &\n\tPick<ToasterPrimitiveProps, \"containerAriaLabel\" | \"dir\" | \"position\"> & {\n\t\t/**\n\t\t * Time in milliseconds that should elapse before automatically dismissing toasts.\n\t\t * When set here, this will be the default duration for all toasts.\n\t\t * @default 4000\n\t\t */\n\t\tduration_ms?: number;\n\t};\n\n/**\n * A container for displaying all toasts.\n *\n * Only one `<Toaster />` should be rendered in an app a time, preferably at the\n * root level of the app.\n *\n * @see https://mantle.ngrok.com/components/toast#toaster\n *\n * @example\n * ```tsx\n * <Toaster\n *   position=\"top-right\"\n *   duration_ms={5000}\n * />\n * ```\n */\nconst Toaster = ({\n\t//,\n\tclassName,\n\tcontainerAriaLabel,\n\tdir,\n\tduration_ms = 4000,\n\tposition = \"top-center\",\n\tstyle,\n}: ToasterProps) => {\n\tconst theme = useAppliedTheme();\n\n\treturn (\n\t\t<ToastPrimitive.Toaster\n\t\t\tdata-slot=\"toaster\"\n\t\t\tclassName={cx(\"toaster overlay-prompt pointer-events-auto *:duration-200\", className)}\n\t\t\tcontainerAriaLabel={containerAriaLabel}\n\t\t\tdir={dir}\n\t\t\tduration={duration_ms}\n\t\t\tgap={12}\n\t\t\tposition={position ?? \"top-center\"}\n\t\t\tstyle={style}\n\t\t\ttheme={theme as ToasterPrimitiveTheme} // we have additional themes that are not in the sonner types, so we need to cast for now\n\t\t\ttoastOptions={{\n\t\t\t\tunstyled: true,\n\t\t\t}}\n\t\t/>\n\t);\n};\nToaster.displayName = \"Toaster\";\n\nconst ToastIdContext = createContext<string | number>(\"\");\n\ntype MakeToastOptions = {\n\t/**\n\t * Time in milliseconds that should elapse before automatically closing the toast.\n\t * Will default to the `<Toaster />`'s `duration_ms` if not provided.\n\t *\n\t * You can keep the toast open until manually dismissed by passing a value <= 0 or Number.POSITIVE_INFINITY\n\t */\n\tduration_ms?: number;\n\t/**\n\t * An optional custom ID for this toast. If not given, a unique ID is provided for you.\n\t */\n\tid?: string;\n};\n\n/**\n * Create a toast. Provide a `<Toast.Root>` component as the `children` to be rendered\n * inside the `<Toaster />` section.\n *\n * @see https://mantle.ngrok.com/components/toast#maketoast\n *\n * @example\n * ```tsx\n * // Basic toast with auto-dismiss (default 4000ms, inherits from `<Toaster>`)\n * makeToast(\n *   <Toast.Root priority=\"success\">\n *     <Toast.Icon />\n *     <Toast.Message>Operation completed successfully!</Toast.Message>\n *     <Toast.Action>Dismiss</Toast.Action>\n *   </Toast.Root>\n * );\n *\n * // Toast that stays open until manually dismissed\n * makeToast(\n *   <Toast.Root priority=\"warning\">\n *     <Toast.Icon />\n *     <Toast.Message>Action required</Toast.Message>\n *     <Toast.Action>Dismiss</Toast.Action>\n *   </Toast.Root>,\n *   { duration_ms: Number.POSITIVE_INFINITY }\n * );\n * ```\n */\nfunction makeToast(children: ReactNode, options?: MakeToastOptions) {\n\tlet duration = options?.duration_ms;\n\tif (typeof duration === \"number\" && duration <= 0) {\n\t\tduration = Number.POSITIVE_INFINITY;\n\t}\n\n\treturn ToastPrimitive.toast.custom(\n\t\t(toastId) => <ToastIdContext.Provider value={toastId}>{children}</ToastIdContext.Provider>,\n\t\t{\n\t\t\t//\n\t\t\tduration,\n\t\t\t// If a custom ID is provided, use it, else use the toastId provided by the sonner library\n\t\t\t// don't set an ID to `undefined` as it breaks the sonner library\n\t\t\t...(options?.id ? { id: options.id } : {}),\n\t\t\tunstyled: true,\n\t\t},\n\t);\n}\n\nconst priorities = [\n\t//,\n\t\"danger\",\n\t\"info\",\n\t\"success\",\n\t\"warning\",\n] as const;\ntype Priority = (typeof priorities)[number];\n\ntype ToastState = {\n\tpriority: Priority;\n};\n\nconst ToastStateContext = createContext<ToastState>({\n\tpriority: \"info\",\n});\n\ntype ToastProps = ComponentProps<\"div\"> &\n\tWithAsChild & {\n\t\tpriority: Priority;\n\t};\n\n/**\n * A succinct message with a priority that is displayed temporarily.\n * Toasts are used to provide feedback to the user without interrupting their workflow.\n *\n * @see https://mantle.ngrok.com/components/toast#toastroot\n *\n * @example\n * ```tsx\n * <Toast.Root priority=\"success\">\n *   <Toast.Icon />\n *   <Toast.Message>Changes saved successfully!</Toast.Message>\n *   <Toast.Action>Undo</Toast.Action>\n * </Toast.Root>\n * ```\n */\nconst Root = forwardRef<ComponentRef<\"div\">, ToastProps>(\n\t({ asChild, children, className, priority, ...props }, ref) => {\n\t\tconst Component = asChild ? Slot : \"div\";\n\t\tconst contextValue = useMemo(() => ({ priority }), [priority]);\n\n\t\treturn (\n\t\t\t<ToastStateContext.Provider value={contextValue}>\n\t\t\t\t<Component\n\t\t\t\t\tdata-slot=\"toast\"\n\t\t\t\t\tclassName={cx(\n\t\t\t\t\t\t\"relative flex items-start gap-2 text-sm font-sans\",\n\t\t\t\t\t\t\"p-3 pl-3.75\",\n\t\t\t\t\t\t\"bg-popover high-contrast:border-popover rounded rounded-r-[0.3125rem] border border-gray-500/35 shadow-lg\",\n\t\t\t\t\t\t/**\n\t\t\t\t\t\t * Do not apply overflow-hidden because we want the priority bar accent\n\t\t\t\t\t\t * to overlap the toast border, else the border flows over the\n\t\t\t\t\t\t * priority bar.\n\t\t\t\t\t\t */\n\t\t\t\t\t\tclassName,\n\t\t\t\t\t)}\n\t\t\t\t\tref={ref}\n\t\t\t\t\t{...props}\n\t\t\t\t>\n\t\t\t\t\t<PriorityBarAccent priority={priority} />\n\t\t\t\t\t{children}\n\t\t\t\t</Component>\n\t\t\t</ToastStateContext.Provider>\n\t\t);\n\t},\n);\nRoot.displayName = \"Toast\";\n\ntype ToastIconProps = Partial<SvgOnlyProps>;\n\n/**\n * An icon that visually represents the priority of the toast.\n * If you do not provide an icon, the default icon and color for the priority is used.\n *\n * @see https://mantle.ngrok.com/components/toast#toasticon\n *\n * @example\n * ```tsx\n * <Toast.Root priority=\"warning\">\n *   <Toast.Icon />\n *   <Toast.Message>Warning message</Toast.Message>\n * </Toast.Root>\n * ```\n */\nconst Icon = forwardRef<ComponentRef<\"svg\">, ToastIconProps>(\n\t({ className, svg, ...props }, ref) => {\n\t\tconst ctx = useContext(ToastStateContext);\n\n\t\tswitch (ctx.priority) {\n\t\t\tcase \"danger\":\n\t\t\t\treturn (\n\t\t\t\t\t<IconComponent\n\t\t\t\t\t\tdata-slot=\"toast-icon\"\n\t\t\t\t\t\tclassName={cx(\"text-danger-600\", className)}\n\t\t\t\t\t\tref={ref}\n\t\t\t\t\t\tsvg={svg ?? <WarningIcon weight=\"fill\" />}\n\t\t\t\t\t\t{...props}\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\tcase \"warning\":\n\t\t\t\treturn (\n\t\t\t\t\t<IconComponent\n\t\t\t\t\t\tdata-slot=\"toast-icon\"\n\t\t\t\t\t\tclassName={cx(\"text-warning-600\", className)}\n\t\t\t\t\t\tref={ref}\n\t\t\t\t\t\tsvg={svg ?? <WarningDiamondIcon weight=\"fill\" />}\n\t\t\t\t\t\t{...props}\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\tcase \"success\":\n\t\t\t\treturn (\n\t\t\t\t\t<IconComponent\n\t\t\t\t\t\tdata-slot=\"toast-icon\"\n\t\t\t\t\t\tclassName={cx(\"text-success-600\", className)}\n\t\t\t\t\t\tref={ref}\n\t\t\t\t\t\tsvg={svg ?? <CheckCircleIcon weight=\"fill\" />}\n\t\t\t\t\t\t{...props}\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\tcase \"info\":\n\t\t\t\treturn (\n\t\t\t\t\t<IconComponent\n\t\t\t\t\t\t//\n\t\t\t\t\t\tdata-slot=\"toast-icon\"\n\t\t\t\t\t\tclassName={cx(\"text-accent-600\", className)}\n\t\t\t\t\t\tref={ref}\n\t\t\t\t\t\tsvg={<InfoIcon weight=\"fill\" />}\n\t\t\t\t\t\t{...props}\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\tdefault:\n\t\t\t\tthrow new Error(`Unreachable Case: ${ctx.priority}`);\n\t\t}\n\t},\n);\nIcon.displayName = \"ToastIcon\";\n\ntype ToastActionProps = ComponentProps<\"button\"> & WithAsChild;\n\n/**\n * A button that dismisses the toast when clicked.\n * You can prevent the toast from being dismissed `onClick` by calling `event.preventDefault()`\n *\n * @see https://mantle.ngrok.com/components/toast#toastaction\n *\n * @example\n * ```tsx\n * <Toast.Root priority=\"info\">\n *   <Toast.Icon />\n *   <Toast.Message>File uploaded successfully</Toast.Message>\n *   <Toast.Action>View File</Toast.Action>\n * </Toast.Root>\n * ```\n */\nconst Action = forwardRef<ComponentRef<\"button\">, ToastActionProps>(\n\t({ asChild, className, onClick, ...props }, ref) => {\n\t\tconst ctx = useContext(ToastIdContext);\n\n\t\tconst Component = asChild ? Slot : \"button\";\n\n\t\treturn (\n\t\t\t<Component\n\t\t\t\tdata-slot=\"toast-action\"\n\t\t\t\tclassName={cx(\n\t\t\t\t\t//,\n\t\t\t\t\t\"shrink-0\",\n\t\t\t\t\t// 👇 wiggle the bits so that icon buttons toast actions are aligned with the toast icon\n\t\t\t\t\t\"data-icon-button:-mr-0.5 data-icon-button:-mt-0.5 data-icon-button:rounded-xs\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tonClick={(event) => {\n\t\t\t\t\tonClick?.(event);\n\t\t\t\t\tif (event.defaultPrevented) {\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\t\t\t\t\tToastPrimitive.toast.dismiss(ctx);\n\t\t\t\t}}\n\t\t\t\tref={ref}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nAction.displayName = \"ToastAction\";\n\ntype ToastMessageProps = ComponentProps<\"p\"> & WithAsChild;\n\n/**\n * The message content of the toast.\n *\n * @see https://mantle.ngrok.com/components/toast#toastmessage\n *\n * @example\n * ```tsx\n * <Toast.Root priority=\"success\">\n *   <Toast.Icon />\n *   <Toast.Message>Your changes have been saved</Toast.Message>\n * </Toast.Root>\n * ```\n */\nconst Message = forwardRef<ComponentRef<\"p\">, ToastMessageProps>(\n\t({ asChild, className, ...props }, ref) => {\n\t\tconst Component = asChild ? Slot : \"p\";\n\n\t\treturn (\n\t\t\t<Component\n\t\t\t\t//\n\t\t\t\tdata-slot=\"toast-message\"\n\t\t\t\tclassName={cx(\"text-strong flex-1 text-sm font-body\", className)}\n\t\t\t\tref={ref}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nMessage.displayName = \"ToastMessage\";\n\n/**\n * A succinct message that is displayed temporarily. Toasts are used to provide\n * feedback to the user without interrupting their workflow.\n *\n * @see https://mantle.ngrok.com/components/toast\n *\n * @example\n * Composition:\n * ```\n * Toast.Root\n * ├── Toast.Icon\n * ├── Toast.Message\n * └── Toast.Action\n * ```\n *\n * @example\n * ```tsx\n * makeToast(\n *   <Toast.Root priority=\"success\">\n *     <Toast.Icon />\n *     <Toast.Message>Operation completed successfully!</Toast.Message>\n *     <Toast.Action>Dismiss</Toast.Action>\n *   </Toast.Root>\n * );\n * ```\n */\nconst Toast = {\n\t/**\n\t * A succinct message with a priority that is displayed temporarily.\n\t *\n\t * @see https://mantle.ngrok.com/components/toast#toastroot\n\t *\n\t * @example\n\t * ```tsx\n\t * <Toast.Root priority=\"success\">\n\t *   <Toast.Icon />\n\t *   <Toast.Message>Changes saved successfully!</Toast.Message>\n\t *   <Toast.Action>Undo</Toast.Action>\n\t * </Toast.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * A button that dismisses the toast when clicked.\n\t *\n\t * @see https://mantle.ngrok.com/components/toast#toastaction\n\t *\n\t * @example\n\t * ```tsx\n\t * <Toast.Root priority=\"info\">\n\t *   <Toast.Icon />\n\t *   <Toast.Message>File uploaded successfully</Toast.Message>\n\t *   <Toast.Action>View File</Toast.Action>\n\t * </Toast.Root>\n\t * ```\n\t */\n\tAction,\n\t/**\n\t * An icon that visually represents the priority of the toast.\n\t *\n\t * @see https://mantle.ngrok.com/components/toast#toasticon\n\t *\n\t * @example\n\t * ```tsx\n\t * <Toast.Root priority=\"warning\">\n\t *   <Toast.Icon />\n\t *   <Toast.Message>Warning message</Toast.Message>\n\t * </Toast.Root>\n\t * ```\n\t */\n\tIcon,\n\t/**\n\t * The message content of the toast.\n\t *\n\t * @see https://mantle.ngrok.com/components/toast#toastmessage\n\t *\n\t * @example\n\t * ```tsx\n\t * <Toast.Root priority=\"success\">\n\t *   <Toast.Icon />\n\t *   <Toast.Message>Your changes have been saved</Toast.Message>\n\t * </Toast.Root>\n\t * ```\n\t */\n\tMessage,\n} as const;\n\nexport {\n\t//,\n\tmakeToast,\n\tToast,\n\tToaster,\n};\n\nexport type {\n\t//,\n\tPriority,\n};\n\n/**\n * @private\n *\n * Allows any mantle floating prompt (e.g. toasts and notifications) to be interacted with\n * even when a modaled view (e.g. dialog, sheet, etc) is open and a focus trap is active.\n *\n * Without this, interacting with the prompt would close the modaled view.\n *\n * @example\n * ```tsx\n * <Dialog.Root onInteractOutside={preventCloseOnPromptInteraction}>\n *   <Dialog.Content>\n *     <p>Dialog content</p>\n *   </Dialog.Content>\n * </Dialog.Root>\n * ```\n */\nexport function preventCloseOnPromptInteraction(\n\tevent: CustomEvent | PointerEvent | MouseEvent | TouchEvent | FocusEvent,\n) {\n\tif (!(event.target instanceof Element)) {\n\t\treturn;\n\t}\n\n\tif (event.target.closest(\".overlay-prompt\")) {\n\t\tevent.preventDefault();\n\t}\n}\n\nconst priorityBackgroundColor = {\n\tinfo: \"bg-accent-600\",\n\twarning: \"bg-warning-600\",\n\tsuccess: \"bg-success-600\",\n\tdanger: \"bg-danger-600\",\n} as const satisfies Record<Priority, string>;\n\ntype PriorityBarAccentProps = Omit<ComponentProps<\"div\">, \"children\"> & {\n\tpriority: Priority;\n};\n\n/**\n * @private\n *\n * A colored bar that visually represents the priority of the toast.\n */\nfunction PriorityBarAccent({ className, priority, ...props }: PriorityBarAccentProps) {\n\treturn (\n\t\t<div\n\t\t\taria-hidden\n\t\t\tclassName={cx(\n\t\t\t\t//\n\t\t\t\t\"z-1 absolute -inset-px right-auto w-1.5 rounded-l\",\n\t\t\t\tpriorityBackgroundColor[priority],\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n"],"mappings":"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"}

package/dist/tooltip.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"tooltip.js","names":[],"sources":["../src/components/tooltip/tooltip.tsx"],"sourcesContent":["import * as TooltipPrimitive from \"@radix-ui/react-tooltip\";\nimport { forwardRef } from \"react\";\nimport type { ComponentProps, ComponentPropsWithoutRef, ComponentRef } from \"react\";\nimport { cx } from \"../../utils/cx/cx.js\";\n\n/**\n * Wraps your app to provide shared global behavior for your tooltips, such\n * as consistent delay and hover settings. Mount one instance at the root of\n * your app when you want app-wide tooltip defaults. Children render\n * `Tooltip.Root` / `Tooltip.Trigger` / `Tooltip.Content` trees as usual.\n *\n * @see https://mantle.ngrok.com/components/tooltip#tooltipprovider\n *\n * @example\n * ```tsx\n * <TooltipProvider>\n *   <Tooltip.Root>\n *     <Tooltip.Trigger asChild>\n *       <Button type=\"button\" appearance=\"outlined\">\n *         Hover me\n *       </Button>\n *     </Tooltip.Trigger>\n *     <Tooltip.Content>\n *       This is a tooltip\n *     </Tooltip.Content>\n *   </Tooltip.Root>\n * </TooltipProvider>\n * ```\n */\nconst TooltipProvider = ({\n\tdelayDuration = 0,\n\t...props\n}: ComponentPropsWithoutRef<typeof TooltipPrimitive.Provider>) => (\n\t<TooltipPrimitive.Provider\n\t\tdata-slot=\"tooltip-provider\"\n\t\tdelayDuration={delayDuration ?? 0}\n\t\t{...props}\n\t/>\n);\nTooltipProvider.displayName = \"Tooltip.Provider\";\n\n/**\n * A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.\n * This is the root, stateful component that manages the open/closed state of\n * the tooltip. Wrap your app in `TooltipProvider` when you want shared\n * app-wide delay and hover settings.\n *\n * @see https://mantle.ngrok.com/components/tooltip#tooltiproot\n *\n * @example\n * ```tsx\n * <Tooltip.Root>\n *   <Tooltip.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Hover me\n *     </Button>\n *   </Tooltip.Trigger>\n *   <Tooltip.Content>\n *     This is a tooltip\n *   </Tooltip.Content>\n * </Tooltip.Root>\n * ```\n */\nfunction Root(props: ComponentProps<typeof TooltipPrimitive.Root>) {\n\treturn <TooltipPrimitive.Root data-slot=\"tooltip\" {...props} />;\n}\nRoot.displayName = \"Tooltip.Root\";\n\n/**\n * The trigger button that opens the tooltip.\n *\n * @see https://mantle.ngrok.com/components/tooltip#tooltiptrigger\n *\n * @example\n * ```tsx\n * <Tooltip.Root>\n *   <Tooltip.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Hover me\n *     </Button>\n *   </Tooltip.Trigger>\n *   <Tooltip.Content>\n *     This is a tooltip\n *   </Tooltip.Content>\n * </Tooltip.Root>\n * ```\n */\nfunction Trigger(props: ComponentProps<typeof TooltipPrimitive.Trigger>) {\n\treturn <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" {...props} />;\n}\nTrigger.displayName = \"Tooltip.Trigger\";\n\n/**\n * The content to render inside the tooltip.\n *\n * @see https://mantle.ngrok.com/components/tooltip#tooltipcontent\n *\n * @example\n * ```tsx\n * <Tooltip.Root>\n *   <Tooltip.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Hover me\n *     </Button>\n *   </Tooltip.Trigger>\n *   <Tooltip.Content>\n *     This is a tooltip\n *   </Tooltip.Content>\n * </Tooltip.Root>\n * ```\n */\nconst Content = forwardRef<\n\tComponentRef<typeof TooltipPrimitive.Content>,\n\tComponentPropsWithoutRef<typeof TooltipPrimitive.Content>\n>(({ children, className, sideOffset = 4, ...props }, ref) => (\n\t<TooltipPrimitive.Portal>\n\t\t<TooltipPrimitive.Content\n\t\t\tclassName={cx(\n\t\t\t\t\"bg-tooltip text-tooltip animate-in fade-in-0 zoom-in-95 data-side-bottom:slide-in-from-top-2 data-side-left:slide-in-from-right-2 data-side-right:slide-in-from-left-2 data-side-top:slide-in-from-bottom-2 data-state-closed:animate-out data-state-closed:fade-out-0 data-state-closed:zoom-out-95 z-50 max-w-72 overflow-visible wrap-break-word rounded-md px-3 py-1.5 text-sm font-sans shadow\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tdata-slot=\"tooltip-content\"\n\t\t\tref={ref}\n\t\t\tsideOffset={sideOffset}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t\t<TooltipPrimitive.Arrow asChild>\n\t\t\t\t<div className=\"bg-tooltip z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-xs\" />\n\t\t\t</TooltipPrimitive.Arrow>\n\t\t</TooltipPrimitive.Content>\n\t</TooltipPrimitive.Portal>\n));\nContent.displayName = \"Tooltip.Content\";\n\n/**\n * A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.\n *\n * Use `Tooltip` to show a short, non-essential label or hint when the user\n * hovers or focuses an element — e.g., the meaning of an icon button, a\n * keyboard shortcut, or a brief explanation. Tooltips are NON-INTERACTIVE:\n * do not put buttons, links, or form controls inside one. Per the WAI-ARIA\n * tooltip pattern, tooltips never receive focus, so interactive content\n * inside them is unreachable for keyboard users. For interactive overlay\n * content (forms, settings, color pickers), use `Popover`. For non-essential\n * preview cards (user/repo previews, link previews), use `HoverCard`.\n *\n * Mount a `<TooltipProvider>` once at the app root when you want shared\n * tooltip behavior such as consistent delay and hover settings.\n *\n * @see https://mantle.ngrok.com/components/tooltip\n * @see https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/\n *\n * @example\n * Composition:\n * ```\n * Tooltip.Root\n * ├── Tooltip.Trigger\n * └── Tooltip.Content\n * ```\n *\n * @example\n * ```tsx\n * <Tooltip.Root>\n *   <Tooltip.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Hover me\n *     </Button>\n *   </Tooltip.Trigger>\n *   <Tooltip.Content>\n *     This is a tooltip\n *   </Tooltip.Content>\n * </Tooltip.Root>\n * ```\n */\nconst Tooltip = {\n\t/**\n\t * A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.\n\t * This is the root, stateful component that manages the open/closed state of\n\t * the tooltip. Wrap your app in `TooltipProvider` when you want shared\n\t * app-wide delay and hover settings.\n\t *\n\t * @see https://mantle.ngrok.com/components/tooltip#tooltiproot\n\t *\n\t * @example\n\t * ```tsx\n\t * <Tooltip.Root>\n\t *   <Tooltip.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"outlined\">\n\t *       Hover me\n\t *     </Button>\n\t *   </Tooltip.Trigger>\n\t *   <Tooltip.Content>\n\t *     This is a tooltip\n\t *   </Tooltip.Content>\n\t * </Tooltip.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * The content to render inside the tooltip.\n\t *\n\t * @see https://mantle.ngrok.com/components/tooltip#tooltipcontent\n\t *\n\t * @example\n\t * ```tsx\n\t * <Tooltip.Root>\n\t *   <Tooltip.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"outlined\">\n\t *       Hover me\n\t *     </Button>\n\t *   </Tooltip.Trigger>\n\t *   <Tooltip.Content>\n\t *     This is a tooltip\n\t *   </Tooltip.Content>\n\t * </Tooltip.Root>\n\t * ```\n\t */\n\tContent,\n\t/**\n\t * The trigger button that opens the tooltip.\n\t *\n\t * @see https://mantle.ngrok.com/components/tooltip#tooltiptrigger\n\t *\n\t * @example\n\t * ```tsx\n\t * <Tooltip.Root>\n\t *   <Tooltip.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"outlined\">\n\t *       Hover me\n\t *     </Button>\n\t *   </Tooltip.Trigger>\n\t *   <Tooltip.Content>\n\t *     This is a tooltip\n\t *   </Tooltip.Content>\n\t * </Tooltip.Root>\n\t * ```\n\t */\n\tTrigger,\n} as const;\n\nexport {\n\t//,\n\tTooltip,\n\tTooltipProvider,\n};\n"],"mappings":"oKA6BA,MAAM,GAAmB,CACxB,gBAAgB,EAChB,GAAG,KAEH,EAAC,EAAiB,SAAlB,CACC,YAAU,mBACV,cAAe,GAAiB,EAChC,GAAI,CACJ,CAAA,EAEF,EAAgB,YAAc,mBAwB9B,SAAS,EAAK,EAAqD,CAClE,OAAO,EAAC,EAAiB,KAAlB,CAAuB,YAAU,UAAU,GAAI,CAAQ,CAAA,CAC/D,CACA,EAAK,YAAc,eAqBnB,SAAS,EAAQ,EAAwD,CACxE,OAAO,EAAC,EAAiB,QAAlB,CAA0B,YAAU,kBAAkB,GAAI,CAAQ,CAAA,CAC1E,CACA,EAAQ,YAAc,kBAqBtB,MAAM,EAAU,GAGb,CAAE,WAAU,YAAW,aAAa,EAAG,GAAG,GAAS,IACrD,EAAC,EAAiB,OAAlB,CAAA,SACC,EAAC,EAAiB,QAAlB,CACC,UAAW,EACV,sYACA,CACD,EACA,YAAU,kBACL,MACO,aACZ,GAAI,WARL,CAUE,EACD,EAAC,EAAiB,MAAlB,CAAwB,QAAA,YACvB,EAAC,MAAD,CAAK,UAAU,4EAA8E,CAAA,CACtE,CAAA,CACC,GACF,CAAA,CACzB,EACD,EAAQ,YAAc,kBA0CtB,MAAM,EAAU,CAuBf,OAoBA,UAoBA,SACD"}

package/dist/traffic-policy-file-0g5RXFqu.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"traffic-policy-file-0g5RXFqu.js","names":[],"sources":["../src/components/icons/traffic-policy-file.tsx"],"sourcesContent":["import type { SvgAttributes } from \"../icon/types.js\";\n\n/**\n * An icon representing a traffic policy file.\n */\nfunction TrafficPolicyFileIcon(props: SvgAttributes) {\n\treturn (\n\t\t<svg fill=\"currentColor\" height=\"1em\" viewBox=\"0 0 256 256\" width=\"1em\" {...props}>\n\t\t\t<path fill=\"none\" d=\"M0 0h256v256H0z\" />\n\t\t\t<path d=\"m213.7 82.3-56-56c-1.5-1.5-3.5-2.3-5.7-2.3H56c-8.8 0-16 7.2-16 16v88c0 4.4 3.6 8 8 8s8-3.6 8-8V40h88v48c0 4.4 3.6 8 8 8h48v120h-40c-4.4 0-8 3.6-8 8s3.6 8 8 8h40c8.8 0 16-7.2 16-16V88c0-2.1-.8-4.2-2.3-5.7zm-53.7-31L188.7 80H160V51.3z\" />\n\t\t\t<path d=\"M124.6 194.5h-6.8v-27.3h6.8c1.9 0 3.4-1.5 3.4-3.4s-1.5-3.4-3.4-3.4h-6.8v-10.2c0-3.8-3.1-6.8-6.8-6.8H63.3c-3.8 0-6.8 3.1-6.8 6.8v10.2h-6.8c-1.9 0-3.4 1.5-3.4 3.4s1.5 3.4 3.4 3.4h6.8v27.3h-6.8c-1.9 0-3.4 1.5-3.4 3.4s1.5 3.4 3.4 3.4h6.8v23.9c0 3.8 3.1 6.8 6.8 6.8H111c3.8 0 6.8-3.1 6.8-6.8v-23.9h6.8c1.9 0 3.4-1.5 3.4-3.4s-1.5-3.4-3.4-3.4zm-37.5-11.9c-6.6 0-11.9-5.3-11.9-11.9s5.3-11.9 11.9-11.9S99 164.1 99 170.7s-5.3 11.9-11.9 11.9zm0 10.2c6.6 0 11.9 5.3 11.9 11.9s-5.3 11.9-11.9 11.9-11.9-5.3-11.9-11.9 5.3-11.9 11.9-11.9z\" />\n\t\t</svg>\n\t);\n}\nTrafficPolicyFileIcon.displayName = \"TrafficPolicyFileIcon\";\n\nexport {\n\t//,\n\tTrafficPolicyFileIcon,\n};\n"],"mappings":"kDAKA,SAAS,EAAsB,EAAsB,CACpD,OACC,EAAC,MAAD,CAAK,KAAK,eAAe,OAAO,MAAM,QAAQ,cAAc,MAAM,MAAM,GAAI,WAA5E,CACC,EAAC,OAAD,CAAM,KAAK,OAAO,EAAE,iBAAmB,CAAA,EACvC,EAAC,OAAD,CAAM,EAAE,0OAA4O,CAAA,EACpP,EAAC,OAAD,CAAM,EAAE,4gBAA8gB,CAAA,CAClhB,GAEP,CACA,EAAsB,YAAc"}

package/dist/types-D85fCNV3.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"types-D85fCNV3.js","names":[],"sources":["../src/types/css-properties.ts"],"sourcesContent":["import type { CSSProperties as ReactCSSProperties } from \"react\";\n\n/**\n * A CSS custom property (CSS variable) name.\n *\n * CSS variables must start with `--`, e.g. `--brand-color` or `--spacing-2`.\n * This template-literal type lets TypeScript recognize those keys as valid\n * style keys when building objects for `style={...}`.\n */\ntype CssVariableName = `--${string}`;\n\n/**\n * React-compatible CSS properties plus support for CSS custom properties.\n *\n * React's `CSSProperties` type does not allow arbitrary property names by\n * default, so keys like `--foo` would normally be rejected by TypeScript.\n *\n * This type extends React's `CSSProperties` and additionally permits any\n * CSS variable name (keys starting with `--`) with values that match what\n * CSS variables accept in React style objects: `string | number`.\n */\ntype CssProperties = ReactCSSProperties & Record<CssVariableName, string | number>;\n\n/**\n * Helper to type-check a style object while preserving its exact inferred type.\n *\n * Why not just annotate with `CssProperties`?\n * - Annotating forces the value to be treated as the *wider* `CssProperties` type,\n *   which can lose useful inference (literal values, narrow unions, etc.).\n *\n * This function validates that `input` conforms to `CssProperties` (including\n * CSS variables like `--foo`) and returns it unchanged, keeping inference intact.\n *\n * @example\n * style={$cssProperties({ display: \"block\", \"--gap\": 8 })}\n */\nconst $cssProperties = <T extends CssProperties = CssProperties>(input: T): ReactCSSProperties =>\n\tinput;\n\nexport { type CssProperties, $cssProperties };\n"],"mappings":"AAoCA,MAAM,EAA2D,GAChE"}

package/dist/use-copy-to-clipboard-BLpquU9d.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"use-copy-to-clipboard-BLpquU9d.js","names":[],"sources":["../src/hooks/use-copy-to-clipboard.tsx"],"sourcesContent":["import { copyToClipboard } from \"../utils/copy-to-clipboard.js\";\n\n/**\n * React hook that returns a stable async function for copying a string to\n * the system clipboard.\n *\n * The returned function uses the Clipboard API when available and falls back\n * to a `document.execCommand(\"copy\")` polyfill for older browsers. `await`\n * the call (or attach a `.then()` / `.catch()`) to observe whether the copy\n * succeeded — the function throws when both the Clipboard API and the\n * polyfill fail, or when called outside of a DOM environment.\n *\n * Inspired by: https://usehooks.com/usecopytoclipboard\n *\n * @returns An async function `(value: string) => Promise<void>` that writes\n *   `value` to the clipboard and rejects on failure.\n *\n * @example\n * // Copy a token on click and surface a toast on success/failure\n * const copy = useCopyToClipboard();\n *\n * async function handleCopy() {\n *   try {\n *     await copy(token);\n *     toast.success(\"Copied!\");\n *   } catch {\n *     toast.error(\"Could not copy to clipboard\");\n *   }\n * }\n *\n * return <button onClick={handleCopy}>Copy token</button>;\n */\nfunction useCopyToClipboard() {\n\treturn copyToClipboard;\n}\n\nexport { useCopyToClipboard };\n"],"mappings":"oDAgCA,SAAS,GAAqB,CAC7B,OAAO,CACR"}

package/dist/use-isomorphic-layout-effect-DdTRtMY-.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"use-isomorphic-layout-effect-DdTRtMY-.js","names":[],"sources":["../src/hooks/use-isomorphic-layout-effect.tsx"],"sourcesContent":["import { useEffect, useLayoutEffect } from \"react\";\n\n/**\n * A drop-in replacement for `useLayoutEffect` that does not warn during\n * server-side rendering.\n *\n * Resolves to `useLayoutEffect` in the browser (where it can read layout and\n * synchronously re-render before paint) and to `useEffect` on the server\n * (where layout effects are a no-op and React would otherwise log a\n * \"useLayoutEffect does nothing on the server\" warning).\n *\n * Use this whenever you need the timing semantics of `useLayoutEffect` in\n * code that may also execute during SSR. It is most often used internally\n * by other Mantle hooks and components.\n *\n * @param effect - The imperative function that may return a cleanup\n *   function — same signature as React's `useLayoutEffect` / `useEffect`.\n * @param deps - Optional dependency list, same semantics as\n *   `useLayoutEffect`.\n * @returns Nothing.\n *\n * @example\n * // Measure an element synchronously after layout\n * const ref = useRef<HTMLDivElement>(null);\n * const [width, setWidth] = useState(0);\n *\n * useIsomorphicLayoutEffect(() => {\n *   if (ref.current) {\n *     setWidth(ref.current.getBoundingClientRect().width);\n *   }\n * }, []);\n *\n * return <div ref={ref}>Width: {width}</div>;\n */\nexport const useIsomorphicLayoutEffect =\n\ttypeof window !== \"undefined\" ? useLayoutEffect : useEffect;\n"],"mappings":"uDAkCA,MAAa,EACZ,OAAO,OAAW,IAAc,EAAkB"}

package/dist/use-matches-media-query-CMSxHR9n.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"use-matches-media-query-CMSxHR9n.js","names":[],"sources":["../src/hooks/use-matches-media-query.tsx"],"sourcesContent":["import { useCallback, useSyncExternalStore } from \"react\";\n\n/**\n * React hook that subscribes to a CSS media query and returns whether it\n * currently matches, re-rendering whenever the result changes.\n *\n * Uses `window.matchMedia` under the hood and `useSyncExternalStore` for\n * compatibility with React's concurrent rendering model. Returns `false`\n * on the server; during hydration React uses that server snapshot before\n * updating to the client media-query value.\n *\n * For common viewport breakpoint checks, prefer the more specific\n * {@link useBreakpoint} or {@link useIsBelowBreakpoint} hooks.\n *\n * @param query - A valid CSS media query string\n *   (e.g. `\"(max-width: 768px)\"`, `\"(prefers-color-scheme: dark)\"`).\n * @returns `true` if the media query currently matches, otherwise `false`.\n *\n * @example\n * // Detect if the user prefers a dark color scheme\n * const prefersDark = useMatchesMediaQuery(\"(prefers-color-scheme: dark)\");\n *\n * return <div className={prefersDark ? \"dark\" : \"light\"}>Hello</div>;\n *\n * @example\n * // Show a different layout on portrait orientation\n * const isPortrait = useMatchesMediaQuery(\"(orientation: portrait)\");\n *\n * return isPortrait ? <PortraitLayout /> : <LandscapeLayout />;\n */\nexport function useMatchesMediaQuery(query: string) {\n\tconst subscribe = useCallback(\n\t\t(callback: () => void) => {\n\t\t\tconst matchMedia = window.matchMedia(query);\n\n\t\t\tmatchMedia.addEventListener(\"change\", callback);\n\t\t\treturn () => {\n\t\t\t\tmatchMedia.removeEventListener(\"change\", callback);\n\t\t\t};\n\t\t},\n\t\t[query],\n\t);\n\n\treturn useSyncExternalStore(\n\t\tsubscribe,\n\t\t() => {\n\t\t\treturn window.matchMedia(query).matches;\n\t\t},\n\t\t() => false,\n\t);\n}\n"],"mappings":"8DA8BA,SAAgB,EAAqB,EAAe,CAanD,OAAO,EAZW,EAChB,GAAyB,CACzB,IAAM,EAAa,OAAO,WAAW,CAAK,EAG1C,OADA,EAAW,iBAAiB,SAAU,CAAQ,MACjC,CACZ,EAAW,oBAAoB,SAAU,CAAQ,CAClD,CACD,EACA,CAAC,CAAK,CAIE,MAEA,OAAO,WAAW,CAAK,CAAC,CAAC,YAE3B,EACP,CACD"}

package/dist/use-prefers-reduced-motion-CWIoFA6W.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"use-prefers-reduced-motion-CWIoFA6W.js","names":[],"sources":["../src/hooks/use-prefers-reduced-motion.tsx"],"sourcesContent":["import { useEffect, useState } from \"react\";\nimport { canUseDOM } from \"../components/browser-only/browser-only.js\";\n\n/**\n * no-preference is the default value for the prefers-reduced-motion media query.\n * Users who have never fiddled with their a11y settings will still see animations\n * (no explicit opt-in required from a user's perspective)\n */\nconst query = \"(prefers-reduced-motion: no-preference)\";\n\n/**\n * Imperatively reads the current `prefers-reduced-motion` preference once at\n * the time of the call.\n *\n * Useful in event handlers, animation entrypoints, or plain functions where\n * a React hook cannot be called. Prefer {@link usePrefersReducedMotion}\n * inside components — it subscribes to live changes.\n *\n * @returns `true` when the user has opted out of animations or when called\n *   outside a browser environment (SSR), `false` when motion is allowed.\n *\n * @remarks\n * The conservative SSR default of `true` matches\n * {@link usePrefersReducedMotion}: animations stay off until we can verify\n * the user's preference on the client.\n *\n * @example\n * // Skip a one-off entrance animation in a click handler\n * function onOpen() {\n *   if (getPrefersReducedMotion()) {\n *     element.style.opacity = \"1\";\n *     return;\n *   }\n *   element.animate([{ opacity: 0 }, { opacity: 1 }], { duration: 200 });\n * }\n */\nexport function getPrefersReducedMotion(): boolean {\n\tif (!canUseDOM()) {\n\t\treturn true;\n\t}\n\treturn !window.matchMedia(query).matches;\n}\n\n/**\n * React hook that subscribes to the user's `prefers-reduced-motion` media\n * query and re-renders when it changes.\n *\n * Defaults to `true` (reduce motion) on the server and during the first\n * client render to avoid animating before hydration. The initial client\n * effect reads the *real* preference and updates state. The underlying\n * media query used is `(prefers-reduced-motion: no-preference)` inverted —\n * \"if the system hasn't opted out, animations are allowed.\"\n *\n * @returns `true` when the user prefers reduced motion (animations should be\n *   shortened or skipped), `false` when full motion is acceptable.\n *\n * @remarks\n * If you need to support very old browsers that lack\n * `MediaQueryList.addEventListener`, consider falling back to\n * `addListener` / `removeListener`.\n *\n * @example\n * // Conditionally shorten or skip transitions\n * const prefersReducedMotion = usePrefersReducedMotion();\n * const duration = prefersReducedMotion ? 0 : 200;\n *\n * return <Modal transitionDuration={duration} />;\n *\n * @example\n * // Disable an autoplaying carousel when motion is reduced\n * const prefersReducedMotion = usePrefersReducedMotion();\n *\n * return <Carousel autoplay={!prefersReducedMotion} />;\n */\nexport function usePrefersReducedMotion(): boolean {\n\t// Default to no animations on SSR/first paint; update on mount with the real value.\n\tconst [prefersReducedMotion, setPrefersReducedMotion] = useState(true);\n\n\tuseEffect(() => {\n\t\tconst mediaQueryList = window.matchMedia(query);\n\n\t\t// set the _real_ initial value now that we're on the client\n\t\tsetPrefersReducedMotion(getPrefersReducedMotion());\n\n\t\t// register for updates\n\t\tfunction listener(event: MediaQueryListEvent) {\n\t\t\tsetPrefersReducedMotion(!event.matches);\n\t\t}\n\n\t\tmediaQueryList.addEventListener(\"change\", listener);\n\n\t\treturn () => {\n\t\t\tmediaQueryList.removeEventListener(\"change\", listener);\n\t\t};\n\t}, []);\n\n\treturn prefersReducedMotion;\n}\n"],"mappings":"+FAQA,MAAM,EAAQ,0CA4Bd,SAAgB,GAAmC,CAIlD,OAHK,EAAU,EAGR,CAAC,OAAO,WAAW,CAAK,CAAC,CAAC,QAFzB,EAGT,CAiCA,SAAgB,GAAmC,CAElD,GAAM,CAAC,EAAsB,GAA2B,EAAS,EAAI,EAoBrE,OAlBA,MAAgB,CACf,IAAM,EAAiB,OAAO,WAAW,CAAK,EAG9C,EAAwB,EAAwB,CAAC,EAGjD,SAAS,EAAS,EAA4B,CAC7C,EAAwB,CAAC,EAAM,OAAO,CACvC,CAIA,OAFA,EAAe,iBAAiB,SAAU,CAAQ,MAErC,CACZ,EAAe,oBAAoB,SAAU,CAAQ,CACtD,CACD,EAAG,CAAC,CAAC,EAEE,CACR"}

package/dist/utils.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"utils.js","names":[],"sources":["../src/utils/sorting/compare.ts"],"sourcesContent":["/**\n * Compare dates in newest-to-oldest (descending) order.\n * Used for chronological sorting use cases.\n *\n * @returns A negative number if `b` comes earlier in time than `a`; positive if `b` comes later in time than `a`; 0 if they are equivalent.\n */\nfunction compareDatesNewestToOldest(a: Date, b: Date): number {\n\treturn Math.sign(b.getTime() - a.getTime());\n}\n\n/**\n * Compare dates in oldest-to-newest (ascending) order.\n * Used for chronological sorting use cases.\n *\n * @returns A negative number if `a` comes earlier in time than `b`; positive if `a` comes later in time than `b`; 0 if they are equivalent.\n */\nfunction compareDatesOldestToNewest(a: Date, b: Date): number {\n\treturn Math.sign(a.getTime() - b.getTime());\n}\n\nexport {\n\t//,\n\tcompareDatesNewestToOldest,\n\tcompareDatesOldestToNewest,\n};\n"],"mappings":"wQAMA,SAAS,EAA2B,EAAS,EAAiB,CAC7D,OAAO,KAAK,KAAK,EAAE,QAAQ,EAAI,EAAE,QAAQ,CAAC,CAC3C,CAQA,SAAS,EAA2B,EAAS,EAAiB,CAC7D,OAAO,KAAK,KAAK,EAAE,QAAQ,EAAI,EAAE,QAAQ,CAAC,CAC3C"}

package/dist/validation-DCyx-ceH.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"validation-DCyx-ceH.js","names":[],"sources":["../src/components/field/validation.ts"],"sourcesContent":["import {\n\tcreateContext,\n\tcreateElement,\n\tuseContext,\n\ttype AriaAttributes,\n\ttype ReactNode,\n} from \"react\";\n\n/**\n * The shared validation state vocabulary for Mantle form controls.\n *\n * `false` is useful with short-circuiting logic, e.g.\n *\n * ```tsx\n * validation={errors.length > 0 && \"error\"}\n * ```\n */\ntype Validation = \"error\" | \"success\" | \"warning\" | false;\n\n/**\n * A resolved visual validation state. Unlike `Validation`, this excludes\n * `false` because parsed validation normalizes the absence value to\n * `undefined`.\n */\ntype ValidationState = Exclude<Validation, false>;\n\n/**\n * A validation prop value accepted by Mantle controls. The function form is\n * useful when validation state is expensive or should be read lazily from\n * nearby state.\n */\ntype ValidationProp = Validation | (() => Validation);\n\n/**\n * Props for Mantle controls that accept a validation state.\n */\ntype WithValidation = {\n\t/**\n\t * Visual validation state for the control. `validation=\"error\"` also maps\n\t * to `aria-invalid=true` unless an explicit `aria-invalid` prop is present.\n\t */\n\tvalidation?: ValidationProp;\n};\n\n/**\n * The React-supported value type for the `aria-invalid` attribute.\n */\ntype AriaInvalid = AriaAttributes[\"aria-invalid\"];\n\n/**\n * Options used to resolve a control's visual validation state and matching\n * `aria-invalid` value.\n */\ntype ParseValidationOptions = {\n\t/**\n\t * The explicit ARIA invalid state supplied by the consumer or inherited\n\t * from a parent control context.\n\t */\n\t\"aria-invalid\"?: AriaInvalid;\n\t/**\n\t * The control's visual validation state.\n\t */\n\tvalidation?: ValidationProp;\n\t/**\n\t * When true, neutral controls resolve `ariaInvalid` to `false` instead of\n\t * leaving it unset. This preserves the historical behavior of most Mantle\n\t * inputs while still allowing components like `OtpInput` to omit it.\n\t */\n\tdefaultAriaInvalid?: boolean;\n};\n\n/**\n * The normalized validation state Mantle controls use for DOM attributes and\n * validation styling.\n */\ntype ParsedValidation = {\n\t/**\n\t * `true` when the resolved ARIA invalid state represents any invalid value.\n\t */\n\tisInvalid: boolean;\n\t/**\n\t * The resolved value to pass to `aria-invalid`.\n\t */\n\tariaInvalid: AriaInvalid | undefined;\n\t/**\n\t * The resolved visual validation state. `false` is normalized away.\n\t */\n\tvalidation: ValidationState | undefined;\n};\n\nconst FieldValidationContext = createContext<ValidationState | undefined>(undefined);\n\n/**\n * Provides a resolved field validation state to Mantle controls rendered\n * inside a `Field.Item` or `Field.Control`.\n */\nconst FieldValidationProvider = ({\n\tchildren,\n\tvalidation,\n}: {\n\tchildren?: ReactNode;\n\tvalidation?: ValidationState;\n}) => createElement(FieldValidationContext.Provider, { value: validation }, children);\n\n/**\n * Reads the nearest resolved field validation state, when a Mantle control is\n * composed inside `Field.Item` / `Field.Control`.\n */\nconst useFieldValidation = () => useContext(FieldValidationContext);\n\n/**\n * Returns `true` when an `aria-invalid` value represents an invalid control.\n * ARIA treats any value except `false` as an invalid state, including\n * `\"grammar\"` and `\"spelling\"`.\n */\nconst isAriaInvalid = (ariaInvalid: AriaInvalid | undefined) =>\n\tariaInvalid != null && ariaInvalid !== false && ariaInvalid !== \"false\";\n\n/**\n * Resolves a `validation` prop to a concrete validation state and normalizes\n * `false` to `undefined` so it can be used directly with `data-validation`.\n */\nconst resolveValidation = (validation: ValidationProp | undefined) =>\n\t(typeof validation === \"function\" ? validation() : validation) || undefined;\n\n/**\n * Resolves the shared Mantle validation contract for form controls.\n *\n * Explicit invalid ARIA state wins and forces visual `\"error\"` styling.\n * Otherwise, `validation=\"error\"` maps to `aria-invalid=true`, and neutral\n * controls receive `aria-invalid=false` unless `defaultAriaInvalid` is false.\n */\nconst parseValidation = ({\n\t\"aria-invalid\": ariaInvalid,\n\tdefaultAriaInvalid = true,\n\tvalidation: validationProp,\n}: ParseValidationOptions): ParsedValidation => {\n\tconst explicitInvalid = isAriaInvalid(ariaInvalid);\n\tconst validation = explicitInvalid ? \"error\" : resolveValidation(validationProp);\n\tconst resolvedAriaInvalid =\n\t\tariaInvalid ?? (validation === \"error\" ? true : defaultAriaInvalid ? false : undefined);\n\n\treturn {\n\t\tisInvalid: isAriaInvalid(resolvedAriaInvalid),\n\t\tariaInvalid: resolvedAriaInvalid,\n\t\tvalidation,\n\t};\n};\n\nexport {\n\t//,\n\tFieldValidationProvider,\n\tisAriaInvalid,\n\tparseValidation,\n\tresolveValidation,\n\tuseFieldValidation,\n};\nexport type {\n\t//,\n\tAriaInvalid,\n\tParsedValidation,\n\tValidation,\n\tValidationProp,\n\tValidationState,\n\tWithValidation,\n};\n"],"mappings":"yEA0FA,MAAM,EAAyB,EAA2C,IAAA,EAAS,EAM7E,GAA2B,CAChC,WACA,gBAIK,EAAc,EAAuB,SAAU,CAAE,MAAO,CAAW,EAAG,CAAQ,EAM9E,MAA2B,EAAW,CAAsB,EAO5D,EAAiB,GACtB,GAAe,MAAQ,IAAgB,IAAS,IAAgB,QAM3D,EAAqB,IACzB,OAAO,GAAe,WAAa,EAAW,EAAI,IAAe,IAAA,GAS7D,GAAmB,CACxB,eAAgB,EAChB,qBAAqB,GACrB,WAAY,KACmC,CAE/C,IAAM,EADkB,EAAc,CACL,EAAI,QAAU,EAAkB,CAAc,EACzE,EACL,IAAgB,IAAe,QAAU,GAAO,EAAqB,GAAQ,IAAA,IAE9E,MAAO,CACN,UAAW,EAAc,CAAmB,EAC5C,YAAa,EACb,YACD,CACD"}

package/dist/variant-props-CVymuSfa.d.ts

@@ -1,13 +0,0 @@
-import { t as DeepNonNullable } from "./deep-non-nullable-BxRoySYR.js";
-import { VariantProps } from "class-variance-authority";
-
-//#region src/types/variant-props.d.ts
-/**
- * Variant props that are optional and cannot be `null`.
- *
- * Using VariantProps directly from CVA produces that can be `null`, which is not what we want.
- */
-type VariantProps$1<Variants extends (props: Record<PropertyKey, unknown> | undefined) => string> = Partial<DeepNonNullable<VariantProps<Variants>>>;
-//#endregion
-export { VariantProps$1 as t };
-//# sourceMappingURL=variant-props-CVymuSfa.d.ts.map

package/dist/well.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"well.js","names":[],"sources":["../src/components/well/well.tsx"],"sourcesContent":["import type { ComponentProps, ComponentRef } from \"react\";\nimport { forwardRef } from \"react\";\nimport type { WithAsChild } from \"../../types/index.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { Slot } from \"../slot/index.js\";\n\ntype WellProps = ComponentProps<\"div\"> & WithAsChild;\n\n/**\n * A recessed, inset container used to visually group and de-emphasize content\n * relative to the surrounding surface, such as code samples, supplementary\n * notes, or read-only summaries.\n *\n * Renders a `<div>` by default. Pass `asChild` to render as a different element\n * or your own component, forwarding all class names, `data-*` attributes, and\n * the ref onto that child.\n *\n * @see https://mantle.ngrok.com/components/well\n *\n * @example\n * ```tsx\n * <Well>\n *   <p>Eu ad sint laborum nostrud ullamco esse.</p>\n * </Well>\n * ```\n *\n * @example\n * ```tsx\n * <Well asChild>\n *   <section aria-label=\"Summary\">…</section>\n * </Well>\n * ```\n */\nconst Well = forwardRef<ComponentRef<\"div\">, WellProps>(\n\t({ asChild = false, className, ...props }, ref) => {\n\t\tconst Comp = asChild ? Slot : \"div\";\n\n\t\treturn (\n\t\t\t<Comp\n\t\t\t\tref={ref}\n\t\t\t\tdata-slot=\"well\"\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"border-card-muted bg-base relative rounded-md border shadow-inner\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nWell.displayName = \"Well\";\n\nexport {\n\t//,\n\tWell,\n};\n"],"mappings":"kJAiCA,MAAM,EAAO,GACX,CAAE,UAAU,GAAO,YAAW,GAAG,GAAS,IAIzC,EAHY,EAAU,EAAO,MAG7B,CACM,MACL,YAAU,OACV,UAAW,EACV,oEACA,CACD,EACA,GAAI,CACJ,CAAA,CAGJ,EACA,EAAK,YAAc"}