@react-md/core 1.0.0-next.20 → 1.0.0-next.21

package/dist/theme/ThemeProvider.d.ts

@@ -59,7 +59,8 @@ export interface ThemeContext extends ConfigurableThemeColors {
     /**
      * @example Simple Example
      * ```tsx
-     * import { getDerivedTheme, useHtmlClassName, useTheme } from "@react-md/core";
+     * import { getDerivedTheme, useTheme } from "@react-md/core/theme/ThemeProvider";
+     * import { useHtmlClassName } from "@react-md/core/useHtmlClassName";
      * import { useEffect } from "react";
      *
      * import styles from "./LightTheme.module.scss";
@@ -97,7 +98,7 @@ export declare const getDerivedTheme: (container?: Element) => Readonly<Configur
  *
  * @example Simple Example
  * ```tsx
- * import { useTheme } from "@react-md/core";
+ * import { useTheme } from "@react-md/core/theme/useTheme";
  * import type { ReactElement } from "react";
  *
  * function Example(): ReactElement {
@@ -144,6 +145,7 @@ export interface ThemeProviderProps {
  *
  * @example
  * ```tsx
+ * import { CoreProviders } from "@react-md/core/CoreProviders";
  * import {
  *   black,
  *   blue500,
@@ -151,10 +153,8 @@ export interface ThemeProviderProps {
  *   orangeAccent200,
  *   orangeAccent400,
  *   red500,
- *   CoreProviders,
- *   ThemeProvider,
- * } from "@react-md/core";
- * import type { ConfigurableThemeColors } from "@react-md/core";
+ * } from "@react-md/core/theme/colors";
+ * import { type ConfigurableThemeColors, ThemeProvider } from "@react-md/core/theme/ThemeProvider";
  * import type { ReactElement } from "react";
  * import { createRoot } from "react-dom/client";
  *
@@ -191,11 +191,9 @@ export interface ThemeProviderProps {
  *
  * @example Automatically Deriving the Theme
  * ```tsx
- * import {
- *   CoreProviders,
- *   LocalStorageColorSchemeProvider,
- *   ThemeProvider,
- * } from "@react-md/core";
+ * import { CoreProviders } from "@react-md/core/CoreProviders";
+ * import { LocalStorageColorSchemeProvider } from "@react-md/core/theme/LocalStorageColorSchemeProvider";
+ * import { ThemeProvider } from "@react-md/core/theme/ThemeProvider";
  * import { type ReactElement } from "react";
  * import { createRoot } from "react-dom/client";
  *
@@ -214,6 +212,7 @@ export interface ThemeProviderProps {
  * );
  * ```
  *
+ * @see {@link https://next.react-md.dev/components/theme-provider | ThemeProvider Demos}
  * @since 6.0.0
  */
 export declare function ThemeProvider(props: ThemeProviderProps): ReactElement;

package/dist/theme/ThemeProvider.js

@@ -90,6 +90,7 @@ const { Provider } = context;
  *
  * @example
  * ```tsx
+ * import { CoreProviders } from "@react-md/core/CoreProviders";
  * import {
  *   black,
  *   blue500,
@@ -97,10 +98,8 @@ const { Provider } = context;
  *   orangeAccent200,
  *   orangeAccent400,
  *   red500,
- *   CoreProviders,
- *   ThemeProvider,
- * } from "@react-md/core";
- * import type { ConfigurableThemeColors } from "@react-md/core";
+ * } from "@react-md/core/theme/colors";
+ * import { type ConfigurableThemeColors, ThemeProvider } from "@react-md/core/theme/ThemeProvider";
  * import type { ReactElement } from "react";
  * import { createRoot } from "react-dom/client";
  *
@@ -137,11 +136,9 @@ const { Provider } = context;
  *
  * @example Automatically Deriving the Theme
  * ```tsx
- * import {
- *   CoreProviders,
- *   LocalStorageColorSchemeProvider,
- *   ThemeProvider,
- * } from "@react-md/core";
+ * import { CoreProviders } from "@react-md/core/CoreProviders";
+ * import { LocalStorageColorSchemeProvider } from "@react-md/core/theme/LocalStorageColorSchemeProvider";
+ * import { ThemeProvider } from "@react-md/core/theme/ThemeProvider";
  * import { type ReactElement } from "react";
  * import { createRoot } from "react-dom/client";
  *
@@ -160,6 +157,7 @@ const { Provider } = context;
  * );
  * ```
  *
+ * @see {@link https://next.react-md.dev/components/theme-provider | ThemeProvider Demos}
  * @since 6.0.0
  */ export function ThemeProvider(props) {
     const { children, theme } = props;

package/dist/theme/ThemeProvider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/theme/ThemeProvider.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  type ReactElement,\n  type ReactNode,\n  createContext,\n  useContext,\n  useEffect,\n  useMemo,\n  useState,\n} from \"react\";\n\nimport { useSsr } from \"../SsrProvider.js\";\nimport { type UseStateSetter } from \"../types.js\";\nimport {\n  black,\n  blue500,\n  greenAccent700,\n  orangeAccent200,\n  orangeAccent400,\n  red500,\n} from \"./colors.js\";\nimport {\n  backgroundColorVar,\n  errorColorVar,\n  onErrorColorVar,\n  onPrimaryColorVar,\n  onSecondaryColorVar,\n  onSuccessColorVar,\n  onWarningColorVar,\n  primaryColorVar,\n  secondaryColorVar,\n  successColorVar,\n  textDisabledColorVar,\n  textHintColorVar,\n  textPrimaryColorVar,\n  textSecondaryColorVar,\n  warningColorVar,\n} from \"./cssVars.js\";\nimport { useColorScheme } from \"./useColorScheme.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-background-color\"?: string;\n    \"--rmd-on-background-color\"?: string;\n    \"--rmd-surface-color\"?: string;\n    \"--rmd-primary-color\"?: string;\n    \"--rmd-on-primary-color\"?: string;\n    \"--rmd-secondary-color\"?: string;\n    \"--rmd-on-secondary-color\"?: string;\n    \"--rmd-warning-color\"?: string;\n    \"--rmd-on-warning-color\"?: string;\n    \"--rmd-error-color\"?: string;\n    \"--rmd-on-error-color\"?: string;\n    \"--rmd-success-color\"?: string;\n    \"--rmd-on-success-color\"?: string;\n    \"--rmd-text-primary-color\"?: string;\n    \"--rmd-text-secondary-color\"?: string;\n    \"--rmd-text-hint-color\"?: string;\n    \"--rmd-text-disabled-color\"?: string;\n\n    \"--rmd-outline-width\"?: string | number;\n    \"--rmd-outline-color\"?: string;\n    \"--rmd-outline-grey-color\"?: string;\n  }\n}\n\n/** @since 6.0.0 */\nexport interface ThemeColors {\n  primaryColor: string;\n  onPrimaryColor: string;\n  secondaryColor: string;\n  onSecondaryColor: string;\n  warningColor: string;\n  onWarningColor: string;\n  errorColor: string;\n  onErrorColor: string;\n  successColor: string;\n  onSuccessColor: string;\n}\n\n/** @since 6.0.0 */\nexport interface ThemeTextColors {\n  textPrimaryColor: string;\n  textSecondaryColor: string;\n  textHintColor: string;\n  textDisabledColor: string;\n}\n\n/** @since 6.0.0 */\nexport interface ConfigurableThemeColors extends ThemeColors, ThemeTextColors {\n  backgroundColor: string;\n}\n\n/** @since 6.0.0 */\nexport type ConfigurableThemeColorsName = keyof ConfigurableThemeColors;\n\n/** @since 6.0.0 */\nexport interface ThemeContext extends ConfigurableThemeColors {\n  /**\n   * This will be `true` if a `theme` was not provided to the {@link ThemeProvider}\n   */\n  derived: boolean;\n\n  /**\n   * @example Simple Example\n   * ```tsx\n   * import { getDerivedTheme, useHtmlClassName, useTheme } from \"@react-md/core\";\n   * import { useEffect } from \"react\";\n   *\n   * import styles from \"./LightTheme.module.scss\";\n   *\n   * let loadedOnce = false;\n   *\n   * export default function LightTheme(): null {\n   *   useHtmlClassName(styles.container);\n   *   const { setDerivedTheme } = useTheme();\n   *   useEffect(() => {\n   *     if (loadedOnce) {\n   *       return;\n   *     }\n   *\n   *     loadedOnce = true;\n   *     setDerivedTheme(getDerivedTheme());\n   *   }, [setDerivedTheme]);\n   *   return null;\n   * }\n   * ```\n   */\n  setDerivedTheme: UseStateSetter<Readonly<ConfigurableThemeColors>>;\n}\n\n/** @since 6.0.0 */\nexport const DEFAULT_THEME_COLORS: Readonly<ThemeColors> = {\n  primaryColor: blue500,\n  onPrimaryColor: black,\n  secondaryColor: orangeAccent400,\n  onSecondaryColor: black,\n  warningColor: orangeAccent200,\n  onWarningColor: black,\n  errorColor: red500,\n  onErrorColor: black,\n  successColor: greenAccent700,\n  onSuccessColor: black,\n};\n\n/** @since 6.0.0 */\nexport const DEFAULT_LIGHT_THEME: Readonly<ConfigurableThemeColors> = {\n  ...DEFAULT_THEME_COLORS,\n  backgroundColor: \"#fafafa\",\n  textPrimaryColor: \"#212121\",\n  textSecondaryColor: \"#757575\",\n  textHintColor: \"#a8a8a8\",\n  textDisabledColor: \"#9e9e9e\",\n};\n\n/** @since 6.0.0 */\nexport const DEFAULT_DARK_THEME: Readonly<ConfigurableThemeColors> = {\n  ...DEFAULT_THEME_COLORS,\n  backgroundColor: \"#121212\",\n  textPrimaryColor: \"#d9d9d9\",\n  textSecondaryColor: \"#b3b3b3\",\n  textHintColor: \"gray\", // #808080\n  textDisabledColor: \"gray\", // #808080\n};\n\nconst context = createContext<Readonly<ThemeContext> | undefined>(undefined);\ncontext.displayName = \"Theme\";\nconst { Provider } = context;\n\n/** @since 6.0.0 */\nexport const getDerivedTheme = (\n  container: Element = document.documentElement\n): Readonly<ConfigurableThemeColors> => {\n  const rootStyles = window.getComputedStyle(container);\n  const backgroundColor = rootStyles.getPropertyValue(backgroundColorVar);\n  const primaryColor = rootStyles.getPropertyValue(primaryColorVar);\n  const onPrimaryColor = rootStyles.getPropertyValue(onPrimaryColorVar);\n  const secondaryColor = rootStyles.getPropertyValue(secondaryColorVar);\n  const onSecondaryColor = rootStyles.getPropertyValue(onSecondaryColorVar);\n  const warningColor = rootStyles.getPropertyValue(warningColorVar);\n  const onWarningColor = rootStyles.getPropertyValue(onWarningColorVar);\n  const errorColor = rootStyles.getPropertyValue(errorColorVar);\n  const onErrorColor = rootStyles.getPropertyValue(onErrorColorVar);\n  const successColor = rootStyles.getPropertyValue(successColorVar);\n  const onSuccessColor = rootStyles.getPropertyValue(onSuccessColorVar);\n  const textPrimaryColor = rootStyles.getPropertyValue(textPrimaryColorVar);\n  const textSecondaryColor = rootStyles.getPropertyValue(textSecondaryColorVar);\n  const textHintColor = rootStyles.getPropertyValue(textHintColorVar);\n  const textDisabledColor = rootStyles.getPropertyValue(textDisabledColorVar);\n\n  return {\n    backgroundColor,\n    primaryColor,\n    onPrimaryColor,\n    secondaryColor,\n    onSecondaryColor,\n    warningColor,\n    onWarningColor,\n    errorColor,\n    onErrorColor,\n    successColor,\n    onSuccessColor,\n    textPrimaryColor,\n    textSecondaryColor,\n    textHintColor,\n    textDisabledColor,\n  };\n};\n\n/**\n * This hook can be used to access the current theme set by the\n * {@link ThemeProvider}.\n *\n * @example Simple Example\n * ```tsx\n * import { useTheme } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const theme = useTheme();\n *\n *   return <pre><code>{JSON.stringify(theme, null, 2)}</code></pre>;\n * }\n * ```\n *\n * @since 6.0.0\n * @throws \"The `ThemeProvider` has not been initialized.\"\n */\nexport function useTheme(): Readonly<ThemeContext>;\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport function useTheme(\n  allowUndefined: true\n): Readonly<ThemeContext> | undefined;\n\n/**\n * @internal\n * @since 6.0.0\n * @throws \"The `ThemeProvider` has not been initialized.\"\n */\nexport function useTheme(\n  allowUndefined?: boolean\n): Readonly<ThemeContext> | undefined {\n  const theme = useContext(context);\n  if (!theme && !allowUndefined) {\n    throw new Error(\"The `ThemeProvider` has not been initialized.\");\n  }\n\n  return theme;\n}\n\n/** @since 6.0.0 */\nexport interface ThemeProviderProps {\n  /**\n   * When this is `undefined`, the theme will be derived by computing the\n   * `document.documentElement`'s styles for all the `react-md` theme custom\n   * properties. The theme will also automatically update whenever the\n   * `currentColor` or `colorScheme` change.\n   *\n   * It is recommended to manually provide your theme if you know it beforehand.\n   * Deriving the theme is really only useful if you allow your user to\n   * customize all these theme values themselves and persist through local\n   * storage/cookies.\n   *\n   * @see {@link DEFAULT_DARK_THEME}\n   * @see {@link DEFAULT_LIGHT_THEME}\n   * @defaultValue `currentColor === \"dark\" ? DEFAULT_DARK_THEME : DEFAULT_LIGHT_THEME`\n   */\n  theme?: Readonly<ConfigurableThemeColors>;\n\n  children: ReactNode;\n}\n\n/**\n * **Client Component**\n *\n * The `ThemeProvider` should be added to the root of your app but as a child of\n * the `CoreProviders`.\n *\n * @example\n * ```tsx\n * import {\n *   black,\n *   blue500,\n *   greenAccent700,\n *   orangeAccent200,\n *   orangeAccent400,\n *   red500,\n *   CoreProviders,\n *   ThemeProvider,\n * } from \"@react-md/core\";\n * import type { ConfigurableThemeColors } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n * import { createRoot } from \"react-dom/client\";\n *\n * import App from \"./App\";\n *\n * const theme: Readonly<ConfigurableThemeColors> = {\n *   primaryColor: blue500,\n *   onPrimaryColor: black,\n *   secondaryColor: orangeAccent400,\n *   onSecondaryColor: black,\n *   warningColor: orangeAccent200,\n *   onWarningColor: black,\n *   errorColor: red500,\n *   onErrorColor: black,\n *   successColor: greenAccent700,\n *   onSuccessColor: black,\n *   backgroundColor: \"#121212\",\n *   textPrimaryColor: \"#d9d9d9\",\n *   textSecondaryColor: \"#b3b3b3\",\n *   textHintColor: \"gray\", // #808080\n *   textDisabledColor: \"gray\", // #808080\n * };\n *\n * const container = document.getElementById(\"app\");\n * const root = createRoot(container);\n * root.render(\n *   <CoreProviders>\n *     <ThemeProvider theme={theme}>\n *       <App />\n *     </ThemeProvider>\n *   </CoreProviders>\n * );\n * ```\n *\n * @example Automatically Deriving the Theme\n * ```tsx\n * import {\n *   CoreProviders,\n *   LocalStorageColorSchemeProvider,\n *   ThemeProvider,\n * } from \"@react-md/core\";\n * import { type ReactElement } from \"react\";\n * import { createRoot } from \"react-dom/client\";\n *\n * import App from \"./App\";\n *\n * const container = document.getElementById(\"app\");\n * const root = createRoot(container);\n * root.render(\n *   <CoreProviders>\n *     <LocalStorageColorSchemeProvider>\n *       <ThemeProvider>\n *         <App />\n *       </ThemeProvider>\n *     </LocalStorageColorSchemeProvider>\n *   </CoreProviders>\n * );\n * ```\n *\n * @since 6.0.0\n */\nexport function ThemeProvider(props: ThemeProviderProps): ReactElement {\n  const { children, theme } = props;\n  const ssr = useSsr();\n  const { currentColor, colorScheme } = useColorScheme();\n  const [derivedTheme, setDerivedTheme] = useState<ConfigurableThemeColors>(\n    () => {\n      if (theme) {\n        return theme;\n      }\n\n      if (!ssr && typeof document !== \"undefined\") {\n        return getDerivedTheme(document.documentElement);\n      }\n\n      return currentColor === \"dark\" ? DEFAULT_DARK_THEME : DEFAULT_LIGHT_THEME;\n    }\n  );\n\n  const derived = !theme;\n  useEffect(() => {\n    if (theme) {\n      return;\n    }\n\n    // This has to be recalculated after an animation to ensure the new theme\n    // styles have been applied. It will use the previous theme styles without\n    // this frame.\n    //\n    // NOTE: This will not be correct the first time a new theme is lazy-loaded\n    // and applied. It might be good to have a way to manually force this flow\n    // again?\n    const frame = window.requestAnimationFrame(() => {\n      setDerivedTheme(getDerivedTheme(document.documentElement));\n    });\n\n    return () => {\n      window.cancelAnimationFrame(frame);\n    };\n  }, [theme, currentColor, colorScheme]);\n\n  const value = useMemo<ThemeContext>(() => {\n    const backgroundColor =\n      theme?.backgroundColor ?? derivedTheme.backgroundColor;\n    const primaryColor = theme?.primaryColor ?? derivedTheme.primaryColor;\n    const onPrimaryColor = theme?.onPrimaryColor ?? derivedTheme.onPrimaryColor;\n    const secondaryColor = theme?.secondaryColor ?? derivedTheme.secondaryColor;\n    const onSecondaryColor =\n      theme?.onSecondaryColor ?? derivedTheme.onSecondaryColor;\n    const warningColor = theme?.warningColor ?? derivedTheme.warningColor;\n    const onWarningColor = theme?.onWarningColor ?? derivedTheme.onWarningColor;\n    const errorColor = theme?.errorColor ?? derivedTheme.errorColor;\n    const onErrorColor = theme?.onErrorColor ?? derivedTheme.onErrorColor;\n    const successColor = theme?.successColor ?? derivedTheme.successColor;\n    const onSuccessColor = theme?.onSuccessColor ?? derivedTheme.onSuccessColor;\n    const textPrimaryColor =\n      theme?.textPrimaryColor ?? derivedTheme.textPrimaryColor;\n    const textSecondaryColor =\n      theme?.textSecondaryColor ?? derivedTheme.textSecondaryColor;\n    const textHintColor = theme?.textHintColor ?? derivedTheme.textHintColor;\n    const textDisabledColor =\n      theme?.textDisabledColor ?? derivedTheme.textDisabledColor;\n\n    return {\n      derived,\n      backgroundColor,\n      primaryColor,\n      onPrimaryColor,\n      secondaryColor,\n      onSecondaryColor,\n      warningColor,\n      onWarningColor,\n      errorColor,\n      onErrorColor,\n      successColor,\n      onSuccessColor,\n      textPrimaryColor,\n      textSecondaryColor,\n      textHintColor,\n      textDisabledColor,\n      setDerivedTheme,\n    };\n  }, [\n    derived,\n    derivedTheme.backgroundColor,\n    derivedTheme.errorColor,\n    derivedTheme.onErrorColor,\n    derivedTheme.onPrimaryColor,\n    derivedTheme.onSecondaryColor,\n    derivedTheme.onSuccessColor,\n    derivedTheme.onWarningColor,\n    derivedTheme.primaryColor,\n    derivedTheme.secondaryColor,\n    derivedTheme.successColor,\n    derivedTheme.textDisabledColor,\n    derivedTheme.textHintColor,\n    derivedTheme.textPrimaryColor,\n    derivedTheme.textSecondaryColor,\n    derivedTheme.warningColor,\n    theme?.backgroundColor,\n    theme?.errorColor,\n    theme?.onErrorColor,\n    theme?.onPrimaryColor,\n    theme?.onSecondaryColor,\n    theme?.onSuccessColor,\n    theme?.onWarningColor,\n    theme?.primaryColor,\n    theme?.secondaryColor,\n    theme?.successColor,\n    theme?.textDisabledColor,\n    theme?.textHintColor,\n    theme?.textPrimaryColor,\n    theme?.textSecondaryColor,\n    theme?.warningColor,\n  ]);\n\n  return <Provider value={value}>{children}</Provider>;\n}\n"],"names":["createContext","useContext","useEffect","useMemo","useState","useSsr","black","blue500","greenAccent700","orangeAccent200","orangeAccent400","red500","backgroundColorVar","errorColorVar","onErrorColorVar","onPrimaryColorVar","onSecondaryColorVar","onSuccessColorVar","onWarningColorVar","primaryColorVar","secondaryColorVar","successColorVar","textDisabledColorVar","textHintColorVar","textPrimaryColorVar","textSecondaryColorVar","warningColorVar","useColorScheme","DEFAULT_THEME_COLORS","primaryColor","onPrimaryColor","secondaryColor","onSecondaryColor","warningColor","onWarningColor","errorColor","onErrorColor","successColor","onSuccessColor","DEFAULT_LIGHT_THEME","backgroundColor","textPrimaryColor","textSecondaryColor","textHintColor","textDisabledColor","DEFAULT_DARK_THEME","context","undefined","displayName","Provider","getDerivedTheme","container","document","documentElement","rootStyles","window","getComputedStyle","getPropertyValue","useTheme","allowUndefined","theme","Error","ThemeProvider","props","children","ssr","currentColor","colorScheme","derivedTheme","setDerivedTheme","derived","frame","requestAnimationFrame","cancelAnimationFrame","value"],"mappings":"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"}
+{"version":3,"sources":["../../src/theme/ThemeProvider.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  type ReactElement,\n  type ReactNode,\n  createContext,\n  useContext,\n  useEffect,\n  useMemo,\n  useState,\n} from \"react\";\n\nimport { useSsr } from \"../SsrProvider.js\";\nimport { type UseStateSetter } from \"../types.js\";\nimport {\n  black,\n  blue500,\n  greenAccent700,\n  orangeAccent200,\n  orangeAccent400,\n  red500,\n} from \"./colors.js\";\nimport {\n  backgroundColorVar,\n  errorColorVar,\n  onErrorColorVar,\n  onPrimaryColorVar,\n  onSecondaryColorVar,\n  onSuccessColorVar,\n  onWarningColorVar,\n  primaryColorVar,\n  secondaryColorVar,\n  successColorVar,\n  textDisabledColorVar,\n  textHintColorVar,\n  textPrimaryColorVar,\n  textSecondaryColorVar,\n  warningColorVar,\n} from \"./cssVars.js\";\nimport { useColorScheme } from \"./useColorScheme.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-background-color\"?: string;\n    \"--rmd-on-background-color\"?: string;\n    \"--rmd-surface-color\"?: string;\n    \"--rmd-primary-color\"?: string;\n    \"--rmd-on-primary-color\"?: string;\n    \"--rmd-secondary-color\"?: string;\n    \"--rmd-on-secondary-color\"?: string;\n    \"--rmd-warning-color\"?: string;\n    \"--rmd-on-warning-color\"?: string;\n    \"--rmd-error-color\"?: string;\n    \"--rmd-on-error-color\"?: string;\n    \"--rmd-success-color\"?: string;\n    \"--rmd-on-success-color\"?: string;\n    \"--rmd-text-primary-color\"?: string;\n    \"--rmd-text-secondary-color\"?: string;\n    \"--rmd-text-hint-color\"?: string;\n    \"--rmd-text-disabled-color\"?: string;\n\n    \"--rmd-outline-width\"?: string | number;\n    \"--rmd-outline-color\"?: string;\n    \"--rmd-outline-grey-color\"?: string;\n  }\n}\n\n/** @since 6.0.0 */\nexport interface ThemeColors {\n  primaryColor: string;\n  onPrimaryColor: string;\n  secondaryColor: string;\n  onSecondaryColor: string;\n  warningColor: string;\n  onWarningColor: string;\n  errorColor: string;\n  onErrorColor: string;\n  successColor: string;\n  onSuccessColor: string;\n}\n\n/** @since 6.0.0 */\nexport interface ThemeTextColors {\n  textPrimaryColor: string;\n  textSecondaryColor: string;\n  textHintColor: string;\n  textDisabledColor: string;\n}\n\n/** @since 6.0.0 */\nexport interface ConfigurableThemeColors extends ThemeColors, ThemeTextColors {\n  backgroundColor: string;\n}\n\n/** @since 6.0.0 */\nexport type ConfigurableThemeColorsName = keyof ConfigurableThemeColors;\n\n/** @since 6.0.0 */\nexport interface ThemeContext extends ConfigurableThemeColors {\n  /**\n   * This will be `true` if a `theme` was not provided to the {@link ThemeProvider}\n   */\n  derived: boolean;\n\n  /**\n   * @example Simple Example\n   * ```tsx\n   * import { getDerivedTheme, useTheme } from \"@react-md/core/theme/ThemeProvider\";\n   * import { useHtmlClassName } from \"@react-md/core/useHtmlClassName\";\n   * import { useEffect } from \"react\";\n   *\n   * import styles from \"./LightTheme.module.scss\";\n   *\n   * let loadedOnce = false;\n   *\n   * export default function LightTheme(): null {\n   *   useHtmlClassName(styles.container);\n   *   const { setDerivedTheme } = useTheme();\n   *   useEffect(() => {\n   *     if (loadedOnce) {\n   *       return;\n   *     }\n   *\n   *     loadedOnce = true;\n   *     setDerivedTheme(getDerivedTheme());\n   *   }, [setDerivedTheme]);\n   *   return null;\n   * }\n   * ```\n   */\n  setDerivedTheme: UseStateSetter<Readonly<ConfigurableThemeColors>>;\n}\n\n/** @since 6.0.0 */\nexport const DEFAULT_THEME_COLORS: Readonly<ThemeColors> = {\n  primaryColor: blue500,\n  onPrimaryColor: black,\n  secondaryColor: orangeAccent400,\n  onSecondaryColor: black,\n  warningColor: orangeAccent200,\n  onWarningColor: black,\n  errorColor: red500,\n  onErrorColor: black,\n  successColor: greenAccent700,\n  onSuccessColor: black,\n};\n\n/** @since 6.0.0 */\nexport const DEFAULT_LIGHT_THEME: Readonly<ConfigurableThemeColors> = {\n  ...DEFAULT_THEME_COLORS,\n  backgroundColor: \"#fafafa\",\n  textPrimaryColor: \"#212121\",\n  textSecondaryColor: \"#757575\",\n  textHintColor: \"#a8a8a8\",\n  textDisabledColor: \"#9e9e9e\",\n};\n\n/** @since 6.0.0 */\nexport const DEFAULT_DARK_THEME: Readonly<ConfigurableThemeColors> = {\n  ...DEFAULT_THEME_COLORS,\n  backgroundColor: \"#121212\",\n  textPrimaryColor: \"#d9d9d9\",\n  textSecondaryColor: \"#b3b3b3\",\n  textHintColor: \"gray\", // #808080\n  textDisabledColor: \"gray\", // #808080\n};\n\nconst context = createContext<Readonly<ThemeContext> | undefined>(undefined);\ncontext.displayName = \"Theme\";\nconst { Provider } = context;\n\n/** @since 6.0.0 */\nexport const getDerivedTheme = (\n  container: Element = document.documentElement\n): Readonly<ConfigurableThemeColors> => {\n  const rootStyles = window.getComputedStyle(container);\n  const backgroundColor = rootStyles.getPropertyValue(backgroundColorVar);\n  const primaryColor = rootStyles.getPropertyValue(primaryColorVar);\n  const onPrimaryColor = rootStyles.getPropertyValue(onPrimaryColorVar);\n  const secondaryColor = rootStyles.getPropertyValue(secondaryColorVar);\n  const onSecondaryColor = rootStyles.getPropertyValue(onSecondaryColorVar);\n  const warningColor = rootStyles.getPropertyValue(warningColorVar);\n  const onWarningColor = rootStyles.getPropertyValue(onWarningColorVar);\n  const errorColor = rootStyles.getPropertyValue(errorColorVar);\n  const onErrorColor = rootStyles.getPropertyValue(onErrorColorVar);\n  const successColor = rootStyles.getPropertyValue(successColorVar);\n  const onSuccessColor = rootStyles.getPropertyValue(onSuccessColorVar);\n  const textPrimaryColor = rootStyles.getPropertyValue(textPrimaryColorVar);\n  const textSecondaryColor = rootStyles.getPropertyValue(textSecondaryColorVar);\n  const textHintColor = rootStyles.getPropertyValue(textHintColorVar);\n  const textDisabledColor = rootStyles.getPropertyValue(textDisabledColorVar);\n\n  return {\n    backgroundColor,\n    primaryColor,\n    onPrimaryColor,\n    secondaryColor,\n    onSecondaryColor,\n    warningColor,\n    onWarningColor,\n    errorColor,\n    onErrorColor,\n    successColor,\n    onSuccessColor,\n    textPrimaryColor,\n    textSecondaryColor,\n    textHintColor,\n    textDisabledColor,\n  };\n};\n\n/**\n * This hook can be used to access the current theme set by the\n * {@link ThemeProvider}.\n *\n * @example Simple Example\n * ```tsx\n * import { useTheme } from \"@react-md/core/theme/useTheme\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const theme = useTheme();\n *\n *   return <pre><code>{JSON.stringify(theme, null, 2)}</code></pre>;\n * }\n * ```\n *\n * @since 6.0.0\n * @throws \"The `ThemeProvider` has not been initialized.\"\n */\nexport function useTheme(): Readonly<ThemeContext>;\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport function useTheme(\n  allowUndefined: true\n): Readonly<ThemeContext> | undefined;\n\n/**\n * @internal\n * @since 6.0.0\n * @throws \"The `ThemeProvider` has not been initialized.\"\n */\nexport function useTheme(\n  allowUndefined?: boolean\n): Readonly<ThemeContext> | undefined {\n  const theme = useContext(context);\n  if (!theme && !allowUndefined) {\n    throw new Error(\"The `ThemeProvider` has not been initialized.\");\n  }\n\n  return theme;\n}\n\n/** @since 6.0.0 */\nexport interface ThemeProviderProps {\n  /**\n   * When this is `undefined`, the theme will be derived by computing the\n   * `document.documentElement`'s styles for all the `react-md` theme custom\n   * properties. The theme will also automatically update whenever the\n   * `currentColor` or `colorScheme` change.\n   *\n   * It is recommended to manually provide your theme if you know it beforehand.\n   * Deriving the theme is really only useful if you allow your user to\n   * customize all these theme values themselves and persist through local\n   * storage/cookies.\n   *\n   * @see {@link DEFAULT_DARK_THEME}\n   * @see {@link DEFAULT_LIGHT_THEME}\n   * @defaultValue `currentColor === \"dark\" ? DEFAULT_DARK_THEME : DEFAULT_LIGHT_THEME`\n   */\n  theme?: Readonly<ConfigurableThemeColors>;\n\n  children: ReactNode;\n}\n\n/**\n * **Client Component**\n *\n * The `ThemeProvider` should be added to the root of your app but as a child of\n * the `CoreProviders`.\n *\n * @example\n * ```tsx\n * import { CoreProviders } from \"@react-md/core/CoreProviders\";\n * import {\n *   black,\n *   blue500,\n *   greenAccent700,\n *   orangeAccent200,\n *   orangeAccent400,\n *   red500,\n * } from \"@react-md/core/theme/colors\";\n * import { type ConfigurableThemeColors, ThemeProvider } from \"@react-md/core/theme/ThemeProvider\";\n * import type { ReactElement } from \"react\";\n * import { createRoot } from \"react-dom/client\";\n *\n * import App from \"./App\";\n *\n * const theme: Readonly<ConfigurableThemeColors> = {\n *   primaryColor: blue500,\n *   onPrimaryColor: black,\n *   secondaryColor: orangeAccent400,\n *   onSecondaryColor: black,\n *   warningColor: orangeAccent200,\n *   onWarningColor: black,\n *   errorColor: red500,\n *   onErrorColor: black,\n *   successColor: greenAccent700,\n *   onSuccessColor: black,\n *   backgroundColor: \"#121212\",\n *   textPrimaryColor: \"#d9d9d9\",\n *   textSecondaryColor: \"#b3b3b3\",\n *   textHintColor: \"gray\", // #808080\n *   textDisabledColor: \"gray\", // #808080\n * };\n *\n * const container = document.getElementById(\"app\");\n * const root = createRoot(container);\n * root.render(\n *   <CoreProviders>\n *     <ThemeProvider theme={theme}>\n *       <App />\n *     </ThemeProvider>\n *   </CoreProviders>\n * );\n * ```\n *\n * @example Automatically Deriving the Theme\n * ```tsx\n * import { CoreProviders } from \"@react-md/core/CoreProviders\";\n * import { LocalStorageColorSchemeProvider } from \"@react-md/core/theme/LocalStorageColorSchemeProvider\";\n * import { ThemeProvider } from \"@react-md/core/theme/ThemeProvider\";\n * import { type ReactElement } from \"react\";\n * import { createRoot } from \"react-dom/client\";\n *\n * import App from \"./App\";\n *\n * const container = document.getElementById(\"app\");\n * const root = createRoot(container);\n * root.render(\n *   <CoreProviders>\n *     <LocalStorageColorSchemeProvider>\n *       <ThemeProvider>\n *         <App />\n *       </ThemeProvider>\n *     </LocalStorageColorSchemeProvider>\n *   </CoreProviders>\n * );\n * ```\n *\n * @see {@link https://next.react-md.dev/components/theme-provider | ThemeProvider Demos}\n * @since 6.0.0\n */\nexport function ThemeProvider(props: ThemeProviderProps): ReactElement {\n  const { children, theme } = props;\n  const ssr = useSsr();\n  const { currentColor, colorScheme } = useColorScheme();\n  const [derivedTheme, setDerivedTheme] = useState<ConfigurableThemeColors>(\n    () => {\n      if (theme) {\n        return theme;\n      }\n\n      if (!ssr && typeof document !== \"undefined\") {\n        return getDerivedTheme(document.documentElement);\n      }\n\n      return currentColor === \"dark\" ? DEFAULT_DARK_THEME : DEFAULT_LIGHT_THEME;\n    }\n  );\n\n  const derived = !theme;\n  useEffect(() => {\n    if (theme) {\n      return;\n    }\n\n    // This has to be recalculated after an animation to ensure the new theme\n    // styles have been applied. It will use the previous theme styles without\n    // this frame.\n    //\n    // NOTE: This will not be correct the first time a new theme is lazy-loaded\n    // and applied. It might be good to have a way to manually force this flow\n    // again?\n    const frame = window.requestAnimationFrame(() => {\n      setDerivedTheme(getDerivedTheme(document.documentElement));\n    });\n\n    return () => {\n      window.cancelAnimationFrame(frame);\n    };\n  }, [theme, currentColor, colorScheme]);\n\n  const value = useMemo<ThemeContext>(() => {\n    const backgroundColor =\n      theme?.backgroundColor ?? derivedTheme.backgroundColor;\n    const primaryColor = theme?.primaryColor ?? derivedTheme.primaryColor;\n    const onPrimaryColor = theme?.onPrimaryColor ?? derivedTheme.onPrimaryColor;\n    const secondaryColor = theme?.secondaryColor ?? derivedTheme.secondaryColor;\n    const onSecondaryColor =\n      theme?.onSecondaryColor ?? derivedTheme.onSecondaryColor;\n    const warningColor = theme?.warningColor ?? derivedTheme.warningColor;\n    const onWarningColor = theme?.onWarningColor ?? derivedTheme.onWarningColor;\n    const errorColor = theme?.errorColor ?? derivedTheme.errorColor;\n    const onErrorColor = theme?.onErrorColor ?? derivedTheme.onErrorColor;\n    const successColor = theme?.successColor ?? derivedTheme.successColor;\n    const onSuccessColor = theme?.onSuccessColor ?? derivedTheme.onSuccessColor;\n    const textPrimaryColor =\n      theme?.textPrimaryColor ?? derivedTheme.textPrimaryColor;\n    const textSecondaryColor =\n      theme?.textSecondaryColor ?? derivedTheme.textSecondaryColor;\n    const textHintColor = theme?.textHintColor ?? derivedTheme.textHintColor;\n    const textDisabledColor =\n      theme?.textDisabledColor ?? derivedTheme.textDisabledColor;\n\n    return {\n      derived,\n      backgroundColor,\n      primaryColor,\n      onPrimaryColor,\n      secondaryColor,\n      onSecondaryColor,\n      warningColor,\n      onWarningColor,\n      errorColor,\n      onErrorColor,\n      successColor,\n      onSuccessColor,\n      textPrimaryColor,\n      textSecondaryColor,\n      textHintColor,\n      textDisabledColor,\n      setDerivedTheme,\n    };\n  }, [\n    derived,\n    derivedTheme.backgroundColor,\n    derivedTheme.errorColor,\n    derivedTheme.onErrorColor,\n    derivedTheme.onPrimaryColor,\n    derivedTheme.onSecondaryColor,\n    derivedTheme.onSuccessColor,\n    derivedTheme.onWarningColor,\n    derivedTheme.primaryColor,\n    derivedTheme.secondaryColor,\n    derivedTheme.successColor,\n    derivedTheme.textDisabledColor,\n    derivedTheme.textHintColor,\n    derivedTheme.textPrimaryColor,\n    derivedTheme.textSecondaryColor,\n    derivedTheme.warningColor,\n    theme?.backgroundColor,\n    theme?.errorColor,\n    theme?.onErrorColor,\n    theme?.onPrimaryColor,\n    theme?.onSecondaryColor,\n    theme?.onSuccessColor,\n    theme?.onWarningColor,\n    theme?.primaryColor,\n    theme?.secondaryColor,\n    theme?.successColor,\n    theme?.textDisabledColor,\n    theme?.textHintColor,\n    theme?.textPrimaryColor,\n    theme?.textSecondaryColor,\n    theme?.warningColor,\n  ]);\n\n  return <Provider value={value}>{children}</Provider>;\n}\n"],"names":["createContext","useContext","useEffect","useMemo","useState","useSsr","black","blue500","greenAccent700","orangeAccent200","orangeAccent400","red500","backgroundColorVar","errorColorVar","onErrorColorVar","onPrimaryColorVar","onSecondaryColorVar","onSuccessColorVar","onWarningColorVar","primaryColorVar","secondaryColorVar","successColorVar","textDisabledColorVar","textHintColorVar","textPrimaryColorVar","textSecondaryColorVar","warningColorVar","useColorScheme","DEFAULT_THEME_COLORS","primaryColor","onPrimaryColor","secondaryColor","onSecondaryColor","warningColor","onWarningColor","errorColor","onErrorColor","successColor","onSuccessColor","DEFAULT_LIGHT_THEME","backgroundColor","textPrimaryColor","textSecondaryColor","textHintColor","textDisabledColor","DEFAULT_DARK_THEME","context","undefined","displayName","Provider","getDerivedTheme","container","document","documentElement","rootStyles","window","getComputedStyle","getPropertyValue","useTheme","allowUndefined","theme","Error","ThemeProvider","props","children","ssr","currentColor","colorScheme","derivedTheme","setDerivedTheme","derived","frame","requestAnimationFrame","cancelAnimationFrame","value"],"mappings":"AAAA;;AAEA,SAGEA,aAAa,EACbC,UAAU,EACVC,SAAS,EACTC,OAAO,EACPC,QAAQ,QACH,QAAQ;AAEf,SAASC,MAAM,QAAQ,oBAAoB;AAE3C,SACEC,KAAK,EACLC,OAAO,EACPC,cAAc,EACdC,eAAe,EACfC,eAAe,EACfC,MAAM,QACD,cAAc;AACrB,SACEC,kBAAkB,EAClBC,aAAa,EACbC,eAAe,EACfC,iBAAiB,EACjBC,mBAAmB,EACnBC,iBAAiB,EACjBC,iBAAiB,EACjBC,eAAe,EACfC,iBAAiB,EACjBC,eAAe,EACfC,oBAAoB,EACpBC,gBAAgB,EAChBC,mBAAmB,EACnBC,qBAAqB,EACrBC,eAAe,QACV,eAAe;AACtB,SAASC,cAAc,QAAQ,sBAAsB;AA8FrD,iBAAiB,GACjB,OAAO,MAAMC,uBAA8C;IACzDC,cAActB;IACduB,gBAAgBxB;IAChByB,gBAAgBrB;IAChBsB,kBAAkB1B;IAClB2B,cAAcxB;IACdyB,gBAAgB5B;IAChB6B,YAAYxB;IACZyB,cAAc9B;IACd+B,cAAc7B;IACd8B,gBAAgBhC;AAClB,EAAE;AAEF,iBAAiB,GACjB,OAAO,MAAMiC,sBAAyD;IACpE,GAAGX,oBAAoB;IACvBY,iBAAiB;IACjBC,kBAAkB;IAClBC,oBAAoB;IACpBC,eAAe;IACfC,mBAAmB;AACrB,EAAE;AAEF,iBAAiB,GACjB,OAAO,MAAMC,qBAAwD;IACnE,GAAGjB,oBAAoB;IACvBY,iBAAiB;IACjBC,kBAAkB;IAClBC,oBAAoB;IACpBC,eAAe;IACfC,mBAAmB;AACrB,EAAE;AAEF,MAAME,wBAAU9C,cAAkD+C;AAClED,QAAQE,WAAW,GAAG;AACtB,MAAM,EAAEC,QAAQ,EAAE,GAAGH;AAErB,iBAAiB,GACjB,OAAO,MAAMI,kBAAkB,CAC7BC,YAAqBC,SAASC,eAAe;IAE7C,MAAMC,aAAaC,OAAOC,gBAAgB,CAACL;IAC3C,MAAMX,kBAAkBc,WAAWG,gBAAgB,CAAC7C;IACpD,MAAMiB,eAAeyB,WAAWG,gBAAgB,CAACtC;IACjD,MAAMW,iBAAiBwB,WAAWG,gBAAgB,CAAC1C;IACnD,MAAMgB,iBAAiBuB,WAAWG,gBAAgB,CAACrC;IACnD,MAAMY,mBAAmBsB,WAAWG,gBAAgB,CAACzC;IACrD,MAAMiB,eAAeqB,WAAWG,gBAAgB,CAAC/B;IACjD,MAAMQ,iBAAiBoB,WAAWG,gBAAgB,CAACvC;IACnD,MAAMiB,aAAamB,WAAWG,gBAAgB,CAAC5C;IAC/C,MAAMuB,eAAekB,WAAWG,gBAAgB,CAAC3C;IACjD,MAAMuB,eAAeiB,WAAWG,gBAAgB,CAACpC;IACjD,MAAMiB,iBAAiBgB,WAAWG,gBAAgB,CAACxC;IACnD,MAAMwB,mBAAmBa,WAAWG,gBAAgB,CAACjC;IACrD,MAAMkB,qBAAqBY,WAAWG,gBAAgB,CAAChC;IACvD,MAAMkB,gBAAgBW,WAAWG,gBAAgB,CAAClC;IAClD,MAAMqB,oBAAoBU,WAAWG,gBAAgB,CAACnC;IAEtD,OAAO;QACLkB;QACAX;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAG;QACAC;QACAC;QACAC;IACF;AACF,EAAE;AA+BF;;;;CAIC,GACD,OAAO,SAASc,SACdC,cAAwB;IAExB,MAAMC,QAAQ3D,WAAW6C;IACzB,IAAI,CAACc,SAAS,CAACD,gBAAgB;QAC7B,MAAM,IAAIE,MAAM;IAClB;IAEA,OAAOD;AACT;AAwBA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6EC,GACD,OAAO,SAASE,cAAcC,KAAyB;IACrD,MAAM,EAAEC,QAAQ,EAAEJ,KAAK,EAAE,GAAGG;IAC5B,MAAME,MAAM5D;IACZ,MAAM,EAAE6D,YAAY,EAAEC,WAAW,EAAE,GAAGxC;IACtC,MAAM,CAACyC,cAAcC,gBAAgB,GAAGjE,SACtC;QACE,IAAIwD,OAAO;YACT,OAAOA;QACT;QAEA,IAAI,CAACK,OAAO,OAAOb,aAAa,aAAa;YAC3C,OAAOF,gBAAgBE,SAASC,eAAe;QACjD;QAEA,OAAOa,iBAAiB,SAASrB,qBAAqBN;IACxD;IAGF,MAAM+B,UAAU,CAACV;IACjB1D,UAAU;QACR,IAAI0D,OAAO;YACT;QACF;QAEA,yEAAyE;QACzE,0EAA0E;QAC1E,cAAc;QACd,EAAE;QACF,2EAA2E;QAC3E,0EAA0E;QAC1E,SAAS;QACT,MAAMW,QAAQhB,OAAOiB,qBAAqB,CAAC;YACzCH,gBAAgBnB,gBAAgBE,SAASC,eAAe;QAC1D;QAEA,OAAO;YACLE,OAAOkB,oBAAoB,CAACF;QAC9B;IACF,GAAG;QAACX;QAAOM;QAAcC;KAAY;IAErC,MAAMO,QAAQvE,QAAsB;QAClC,MAAMqC,kBACJoB,OAAOpB,mBAAmB4B,aAAa5B,eAAe;QACxD,MAAMX,eAAe+B,OAAO/B,gBAAgBuC,aAAavC,YAAY;QACrE,MAAMC,iBAAiB8B,OAAO9B,kBAAkBsC,aAAatC,cAAc;QAC3E,MAAMC,iBAAiB6B,OAAO7B,kBAAkBqC,aAAarC,cAAc;QAC3E,MAAMC,mBACJ4B,OAAO5B,oBAAoBoC,aAAapC,gBAAgB;QAC1D,MAAMC,eAAe2B,OAAO3B,gBAAgBmC,aAAanC,YAAY;QACrE,MAAMC,iBAAiB0B,OAAO1B,kBAAkBkC,aAAalC,cAAc;QAC3E,MAAMC,aAAayB,OAAOzB,cAAciC,aAAajC,UAAU;QAC/D,MAAMC,eAAewB,OAAOxB,gBAAgBgC,aAAahC,YAAY;QACrE,MAAMC,eAAeuB,OAAOvB,gBAAgB+B,aAAa/B,YAAY;QACrE,MAAMC,iBAAiBsB,OAAOtB,kBAAkB8B,aAAa9B,cAAc;QAC3E,MAAMG,mBACJmB,OAAOnB,oBAAoB2B,aAAa3B,gBAAgB;QAC1D,MAAMC,qBACJkB,OAAOlB,sBAAsB0B,aAAa1B,kBAAkB;QAC9D,MAAMC,gBAAgBiB,OAAOjB,iBAAiByB,aAAazB,aAAa;QACxE,MAAMC,oBACJgB,OAAOhB,qBAAqBwB,aAAaxB,iBAAiB;QAE5D,OAAO;YACL0B;YACA9B;YACAX;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAG;YACAC;YACAC;YACAC;YACAyB;QACF;IACF,GAAG;QACDC;QACAF,aAAa5B,eAAe;QAC5B4B,aAAajC,UAAU;QACvBiC,aAAahC,YAAY;QACzBgC,aAAatC,cAAc;QAC3BsC,aAAapC,gBAAgB;QAC7BoC,aAAa9B,cAAc;QAC3B8B,aAAalC,cAAc;QAC3BkC,aAAavC,YAAY;QACzBuC,aAAarC,cAAc;QAC3BqC,aAAa/B,YAAY;QACzB+B,aAAaxB,iBAAiB;QAC9BwB,aAAazB,aAAa;QAC1ByB,aAAa3B,gBAAgB;QAC7B2B,aAAa1B,kBAAkB;QAC/B0B,aAAanC,YAAY;QACzB2B,OAAOpB;QACPoB,OAAOzB;QACPyB,OAAOxB;QACPwB,OAAO9B;QACP8B,OAAO5B;QACP4B,OAAOtB;QACPsB,OAAO1B;QACP0B,OAAO/B;QACP+B,OAAO7B;QACP6B,OAAOvB;QACPuB,OAAOhB;QACPgB,OAAOjB;QACPiB,OAAOnB;QACPmB,OAAOlB;QACPkB,OAAO3B;KACR;IAED,qBAAO,KAACgB;QAASyB,OAAOA;kBAAQV;;AAClC"}

package/dist/theme/_a11y.scss

@@ -1,27 +1,31 @@
+////
+/// @group core.a11y
+////
+
 @use "sass:color";
 @use "sass:list";
 @use "sass:math";
 
-// Precomputed linear color channel values, for use in contrast calculations.
-// See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
-//
-// Algorithm:
-//
-// ```
-// for c in 0 to 255:
-// f(c) {
-//   c = c / 255;
-//   return c < 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
-// }
-// ```
-//
-// This lookup table is needed since there is no `pow` in SCSS/Sass. You _can_
-// make your own, but it is recommended to pass the computed values from a
-// 'more complete' layer (like node) as a lookup table to speed up compilation
-// time.
-//
-// @internal
-// @type List
+/// Precomputed linear color channel values, for use in contrast calculations.
+/// See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
+///
+/// Algorithm:
+///
+/// ```markup
+/// for c in 0 to 255:
+/// f(c) {
+///   c = c / 255;
+///   return c < 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
+/// }
+/// ```
+///
+/// This lookup table is needed since there is no `pow` in SCSS/Sass. You _can_
+/// make your own, but it is recommended to pass the computed values from a
+/// 'more complete' layer (like node) as a lookup table to speed up compilation
+/// time.
+///
+/// @access private
+/// @type List
 $_linear-channel-values: (
   0 0.0003035269835488375 0.000607053967097675 0.0009105809506465125
     0.00121410793419535 0.0015176349177441874 0.001821161901293025
@@ -102,12 +106,12 @@ $_linear-channel-values: (
     1
 );
 
-// Calculate the luminance for a color.
-//
-// @internal
-// @link https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
-// @param {Color} color - The color to check
-// @returns {number} A number representing the luminance for the color.
+/// Calculate the luminance for a color.
+///
+/// @access private
+/// @link https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
+/// @param {Color} color - The color to check
+/// @returns {Number} A number representing the luminance for the color.
 @function _luminance($color) {
   $red: list.nth(
     $_linear-channel-values,
@@ -129,14 +133,14 @@ $_linear-channel-values: (
     ($blue * $blue-multiplier);
 }
 
-// Gets the contrast between two colors.
-//
-// @access private
-// @param {Color} back - The background color
-// @param {Color} front - The foreground color that should be compared to the
-// background color for contrast ratio.
-// @returns {number} The contrast ratio between the background and foreground
-// colors
+/// Gets the contrast between two colors.
+///
+/// @access private
+/// @param {Color} back - The background color
+/// @param {Color} front - The foreground color that should be compared to the
+/// background color for contrast ratio.
+/// @returns {Number} The contrast ratio between the background and foreground
+/// colors
 @function _contrast($back, $front) {
   $back-luminance: _luminance($back) + 0.05;
   $front-luminance: _luminance($front) + 0.05;
@@ -147,34 +151,30 @@ $_linear-channel-values: (
   );
 }
 
-// Gets the contrast between two colors. The contrast ratios between background
-// and foreground colors should be:
-// - 3 for large text (18pt normal or 14pt bold)
-// - 4.5 for normal text
-// - 7.1 for Level AAA requirements.
-//
-// NOTE: This does not account for font size or font weight but should be good
-// enough for most cases.
-//
-// @example
-// ```scss
-// @use "@react-md/core";
-//
-// $background-color: #fafafa;
-//
-// .container {
-//   background-color: $background-color;
-//   color: core.contrast-color($background-color);
-// }
-// ```
-//
-// @link https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast
-// @param {Color} background-color - The background color to check
-// @param {Color} light-color - The light text color to use if it has a better
-// contrast ratio.
-// @param {Color} dark-color - The dark text color to use if it has a better
-// contrast ratio.
-// @returns {Color} The color with the highest contrast ratio
+/// Gets the contrast between two colors. The contrast ratios between background
+/// and foreground colors should be:
+/// - 3 for large text (18pt normal or 14pt bold)
+/// - 4.5 for normal text
+/// - 7.1 for Level AAA requirements.
+///
+/// NOTE: This does not account for font size or font weight but should be good
+/// enough for most cases.
+///
+/// @example scss
+///   $background-color: #fafafa;
+///
+///   .container {
+///     background-color: $background-color;
+///     color: contrast-color($background-color);
+///   }
+///
+/// @link https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast
+/// @param {Color} background-color - The background color to check
+/// @param {Color} light-color - The light text color to use if it has a better
+/// contrast ratio.
+/// @param {Color} dark-color - The dark text color to use if it has a better
+/// contrast ratio.
+/// @returns {Color} The color with the highest contrast ratio
 @function contrast-color(
   $background-color,
   $light-color: #fff,