@react-md/core 6.4.0 → 6.5.1

package/dist/test-utils/vitest/timers.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/test-utils/vitest/timers.ts"],"sourcesContent":["import { type MockInstance, vi } from \"vitest\";\n\n/**\n * @since 6.0.0\n */\nexport type RafSpy = MockInstance<typeof requestAnimationFrame>;\n\n/**\n * @example\n * ```ts\n * import { testImmediateRaf } from \"@react-md/core/test-utils/vitest\";\n *\n * describe(\"some test suite\", () => {\n *   it(\"should test something with requestAnimationFrame\", () => {\n *     const raf = testImmediateRaf();\n *\n *     // do some testing with requestAnimationFrame\n *\n *     // reset to original at the end of the test\n *     raf.mockRestore()\n *   });\n * });\n * ```\n *\n * @example Automatic Cleanup\n * ```ts\n * import { testImmediateRaf } from \"@react-md/core/test-utils/vitest\";\n *\n * afterEach(() => {\n *   vi.restoreAllMocks();\n * });\n *\n * describe(\"some test suite\", () => {\n *   it(\"should test something with requestAnimationFrame\", () => {\n *     const raf = testImmediateRaf();\n *\n *     // do some testing with requestAnimationFrame\n *   });\n * });\n * ```\n *\n * @since 6.0.0\n */\nexport const testImmediateRaf = (): RafSpy =>\n  vi.spyOn(window, \"requestAnimationFrame\").mockImplementation((cb) => {\n    cb(0);\n    return 0;\n  });\n"],"names":["vi","testImmediateRaf","spyOn","window","mockImplementation","cb"],"mappings":"AAAA,SAA4BA,EAAE,QAAQ,SAAS;AAO/C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmCC,GACD,OAAO,MAAMC,mBAAmB,IAC9BD,GAAGE,KAAK,CAACC,QAAQ,yBAAyBC,kBAAkB,CAAC,CAACC;QAC5DA,GAAG;QACH,OAAO;IACT,GAAG"}
+{"version":3,"sources":["../../../src/test-utils/vitest/timers.ts"],"sourcesContent":["import { type MockInstance, vi } from \"vitest\";\n\n/**\n * @since 6.0.0\n */\nexport type RafSpy = MockInstance<typeof requestAnimationFrame>;\n\n/**\n * @example\n * ```ts\n * import { testImmediateRaf } from \"@react-md/core/test-utils/vitest\";\n *\n * describe(\"some test suite\", () => {\n *   it(\"should test something with requestAnimationFrame\", () => {\n *     const raf = testImmediateRaf();\n *\n *     // do some testing with requestAnimationFrame\n *\n *     // reset to original at the end of the test\n *     raf.mockRestore()\n *   });\n * });\n * ```\n *\n * @example Automatic Cleanup\n * ```ts\n * import { testImmediateRaf } from \"@react-md/core/test-utils/vitest\";\n *\n * afterEach(() => {\n *   vi.restoreAllMocks();\n * });\n *\n * describe(\"some test suite\", () => {\n *   it(\"should test something with requestAnimationFrame\", () => {\n *     const raf = testImmediateRaf();\n *\n *     // do some testing with requestAnimationFrame\n *   });\n * });\n * ```\n *\n * @since 6.0.0\n */\nexport const testImmediateRaf = (): RafSpy =>\n  vi.spyOn(globalThis, \"requestAnimationFrame\").mockImplementation((cb) => {\n    cb(0);\n    return 0;\n  });\n"],"names":["vi","testImmediateRaf","spyOn","globalThis","mockImplementation","cb"],"mappings":"AAAA,SAA4BA,EAAE,QAAQ,SAAS;AAO/C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmCC,GACD,OAAO,MAAMC,mBAAmB,IAC9BD,GAAGE,KAAK,CAACC,YAAY,yBAAyBC,kBAAkB,CAAC,CAACC;QAChEA,GAAG;QACH,OAAO;IACT,GAAG"}

package/dist/test-utils/vitest/uploadMenuItemFileInput.js

@@ -29,7 +29,7 @@ import { createFileList } from "../utils/createFileList.js";
     vitest.spyOn(input, "click").mockImplementationOnce(()=>{
         fireEvent.change(input, {
             target: {
-                files: createFileList(window, files)
+                files: createFileList(globalThis.window, files)
             }
         });
     });

package/dist/test-utils/vitest/uploadMenuItemFileInput.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/test-utils/vitest/uploadMenuItemFileInput.ts"],"sourcesContent":["import { fireEvent } from \"@testing-library/dom\";\nimport { type UserEvent } from \"@testing-library/user-event\";\nimport { vitest } from \"vitest\";\n\nimport { createFileList } from \"../utils/createFileList.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface UploadMenuItemFileUploadOptions {\n  user: UserEvent;\n  files: File | readonly File[];\n  menuItem: HTMLElement;\n}\n\n/**\n * @example Main Example\n * ```tsx\n * const user = userEvent.setup()\n * render(<Test />);\n *\n * await user.click(screen.getByRole(\"button\", { name: \"Dropdown Menu\" }));\n *\n * const menuItem = screen.getByRole(\"menuitem\", { name: \"Upload\" });\n * const file = new File([\"pretend-bytes\"], \"README.txt\");\n * await uploadMenuItemFileUpload({\n *   user,\n *   // can be a single file or multiple\n *   files: file,\n *   menuItem,\n * });\n *\n * // expect something with uploaded file\n * ```\n *\n * @since 6.0.0\n */\nexport async function uploadMenuItemFileUpload(\n  options: UploadMenuItemFileUploadOptions\n): Promise<void> {\n  const { user, files, menuItem } = options;\n\n  const input = document.createElement(\"input\");\n  vitest.spyOn(document, \"createElement\").mockReturnValueOnce(input);\n  vitest.spyOn(input, \"click\").mockImplementationOnce(() => {\n    fireEvent.change(input, {\n      target: { files: createFileList(window, files) },\n    });\n  });\n\n  await user.click(menuItem);\n}\n"],"names":["fireEvent","vitest","createFileList","uploadMenuItemFileUpload","options","user","files","menuItem","input","document","createElement","spyOn","mockReturnValueOnce","mockImplementationOnce","change","target","window","click"],"mappings":"AAAA,SAASA,SAAS,QAAQ,uBAAuB;AAEjD,SAASC,MAAM,QAAQ,SAAS;AAEhC,SAASC,cAAc,QAAQ,6BAA6B;AAW5D;;;;;;;;;;;;;;;;;;;;;CAqBC,GACD,OAAO,eAAeC,yBACpBC,OAAwC;IAExC,MAAM,EAAEC,IAAI,EAAEC,KAAK,EAAEC,QAAQ,EAAE,GAAGH;IAElC,MAAMI,QAAQC,SAASC,aAAa,CAAC;IACrCT,OAAOU,KAAK,CAACF,UAAU,iBAAiBG,mBAAmB,CAACJ;IAC5DP,OAAOU,KAAK,CAACH,OAAO,SAASK,sBAAsB,CAAC;QAClDb,UAAUc,MAAM,CAACN,OAAO;YACtBO,QAAQ;gBAAET,OAAOJ,eAAec,QAAQV;YAAO;QACjD;IACF;IAEA,MAAMD,KAAKY,KAAK,CAACV;AACnB"}
+{"version":3,"sources":["../../../src/test-utils/vitest/uploadMenuItemFileInput.ts"],"sourcesContent":["import { fireEvent } from \"@testing-library/dom\";\nimport { type UserEvent } from \"@testing-library/user-event\";\nimport { vitest } from \"vitest\";\n\nimport { createFileList } from \"../utils/createFileList.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface UploadMenuItemFileUploadOptions {\n  user: UserEvent;\n  files: File | readonly File[];\n  menuItem: HTMLElement;\n}\n\n/**\n * @example Main Example\n * ```tsx\n * const user = userEvent.setup()\n * render(<Test />);\n *\n * await user.click(screen.getByRole(\"button\", { name: \"Dropdown Menu\" }));\n *\n * const menuItem = screen.getByRole(\"menuitem\", { name: \"Upload\" });\n * const file = new File([\"pretend-bytes\"], \"README.txt\");\n * await uploadMenuItemFileUpload({\n *   user,\n *   // can be a single file or multiple\n *   files: file,\n *   menuItem,\n * });\n *\n * // expect something with uploaded file\n * ```\n *\n * @since 6.0.0\n */\nexport async function uploadMenuItemFileUpload(\n  options: UploadMenuItemFileUploadOptions\n): Promise<void> {\n  const { user, files, menuItem } = options;\n\n  const input = document.createElement(\"input\");\n  vitest.spyOn(document, \"createElement\").mockReturnValueOnce(input);\n  vitest.spyOn(input, \"click\").mockImplementationOnce(() => {\n    fireEvent.change(input, {\n      target: { files: createFileList(globalThis.window, files) },\n    });\n  });\n\n  await user.click(menuItem);\n}\n"],"names":["fireEvent","vitest","createFileList","uploadMenuItemFileUpload","options","user","files","menuItem","input","document","createElement","spyOn","mockReturnValueOnce","mockImplementationOnce","change","target","globalThis","window","click"],"mappings":"AAAA,SAASA,SAAS,QAAQ,uBAAuB;AAEjD,SAASC,MAAM,QAAQ,SAAS;AAEhC,SAASC,cAAc,QAAQ,6BAA6B;AAW5D;;;;;;;;;;;;;;;;;;;;;CAqBC,GACD,OAAO,eAAeC,yBACpBC,OAAwC;IAExC,MAAM,EAAEC,IAAI,EAAEC,KAAK,EAAEC,QAAQ,EAAE,GAAGH;IAElC,MAAMI,QAAQC,SAASC,aAAa,CAAC;IACrCT,OAAOU,KAAK,CAACF,UAAU,iBAAiBG,mBAAmB,CAACJ;IAC5DP,OAAOU,KAAK,CAACH,OAAO,SAASK,sBAAsB,CAAC;QAClDb,UAAUc,MAAM,CAACN,OAAO;YACtBO,QAAQ;gBAAET,OAAOJ,eAAec,WAAWC,MAAM,EAAEX;YAAO;QAC5D;IACF;IAEA,MAAMD,KAAKa,KAAK,CAACX;AACnB"}

package/dist/theme/ThemeProvider.js

@@ -122,11 +122,11 @@ const { Provider } = context;
         // NOTE: This will not be correct the first time a new theme is lazy-loaded
         // and applied. It might be good to have a way to manually force this flow
         // again?
-        const frame = window.requestAnimationFrame(()=>{
+        const frame = globalThis.requestAnimationFrame(()=>{
             setDerivedTheme(getDerivedTheme(document.documentElement));
         });
         return ()=>{
-            window.cancelAnimationFrame(frame);
+            globalThis.cancelAnimationFrame(frame);
         };
     }, [
         theme,

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 { DEFAULT_DARK_THEME, DEFAULT_LIGHT_THEME } from \"./constants.js\";\nimport { getDerivedTheme } from \"./getDerivedTheme.js\";\nimport { type ConfigurableThemeColors, type ThemeContext } from \"./types.js\";\nimport { useColorScheme } from \"./useColorScheme.js\";\n\nconst context = createContext<Readonly<ThemeContext> | undefined>(undefined);\ncontext.displayName = \"Theme\";\nconst { Provider } = context;\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/ThemeProvider\";\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 { ThemeProvider } from \"@react-md/core/theme/ThemeProvider\";\n * import { type ConfigurableThemeColors } from \"@react-md/core/theme/types\";\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://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","DEFAULT_DARK_THEME","DEFAULT_LIGHT_THEME","getDerivedTheme","useColorScheme","context","undefined","displayName","Provider","useTheme","allowUndefined","theme","Error","ThemeProvider","props","children","ssr","currentColor","colorScheme","derivedTheme","setDerivedTheme","document","documentElement","derived","frame","window","requestAnimationFrame","cancelAnimationFrame","value","backgroundColor","primaryColor","onPrimaryColor","secondaryColor","onSecondaryColor","warningColor","onWarningColor","errorColor","onErrorColor","successColor","onSuccessColor","textPrimaryColor","textSecondaryColor","textHintColor","textDisabledColor"],"mappings":"AAAA;;AAEA,SAGEA,aAAa,EACbC,UAAU,EACVC,SAAS,EACTC,OAAO,EACPC,QAAQ,QACH,QAAQ;AAEf,SAASC,MAAM,QAAQ,oBAAoB;AAC3C,SAASC,kBAAkB,EAAEC,mBAAmB,QAAQ,iBAAiB;AACzE,SAASC,eAAe,QAAQ,uBAAuB;AAEvD,SAASC,cAAc,QAAQ,sBAAsB;AAErD,MAAMC,wBAAUV,cAAkDW;AAClED,QAAQE,WAAW,GAAG;AACtB,MAAM,EAAEC,QAAQ,EAAE,GAAGH;AA+BrB;;;;CAIC,GACD,OAAO,SAASI,SACdC,cAAwB;IAExB,MAAMC,QAAQf,WAAWS;IACzB,IAAI,CAACM,SAAS,CAACD,gBAAgB;QAC7B,MAAM,IAAIE,MAAM;IAClB;IAEA,OAAOD;AACT;AAwBA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8EC,GACD,OAAO,SAASE,cAAcC,KAAyB;IACrD,MAAM,EAAEC,QAAQ,EAAEJ,KAAK,EAAE,GAAGG;IAC5B,MAAME,MAAMhB;IACZ,MAAM,EAAEiB,YAAY,EAAEC,WAAW,EAAE,GAAGd;IACtC,MAAM,CAACe,cAAcC,gBAAgB,GAAGrB,SACtC;QACE,IAAIY,OAAO;YACT,OAAOA;QACT;QAEA,IAAI,CAACK,OAAO,OAAOK,aAAa,aAAa;YAC3C,OAAOlB,gBAAgBkB,SAASC,eAAe;QACjD;QAEA,OAAOL,iBAAiB,SAAShB,qBAAqBC;IACxD;IAGF,MAAMqB,UAAU,CAACZ;IACjBd,UAAU;QACR,IAAIc,OAAO;YACT;QACF;QAEA,yEAAyE;QACzE,0EAA0E;QAC1E,cAAc;QACd,EAAE;QACF,2EAA2E;QAC3E,0EAA0E;QAC1E,SAAS;QACT,MAAMa,QAAQC,OAAOC,qBAAqB,CAAC;YACzCN,gBAAgBjB,gBAAgBkB,SAASC,eAAe;QAC1D;QAEA,OAAO;YACLG,OAAOE,oBAAoB,CAACH;QAC9B;IACF,GAAG;QAACb;QAAOM;QAAcC;KAAY;IAErC,MAAMU,QAAQ9B,QAAsB;QAClC,MAAM+B,kBACJlB,OAAOkB,mBAAmBV,aAAaU,eAAe;QACxD,MAAMC,eAAenB,OAAOmB,gBAAgBX,aAAaW,YAAY;QACrE,MAAMC,iBAAiBpB,OAAOoB,kBAAkBZ,aAAaY,cAAc;QAC3E,MAAMC,iBAAiBrB,OAAOqB,kBAAkBb,aAAaa,cAAc;QAC3E,MAAMC,mBACJtB,OAAOsB,oBAAoBd,aAAac,gBAAgB;QAC1D,MAAMC,eAAevB,OAAOuB,gBAAgBf,aAAae,YAAY;QACrE,MAAMC,iBAAiBxB,OAAOwB,kBAAkBhB,aAAagB,cAAc;QAC3E,MAAMC,aAAazB,OAAOyB,cAAcjB,aAAaiB,UAAU;QAC/D,MAAMC,eAAe1B,OAAO0B,gBAAgBlB,aAAakB,YAAY;QACrE,MAAMC,eAAe3B,OAAO2B,gBAAgBnB,aAAamB,YAAY;QACrE,MAAMC,iBAAiB5B,OAAO4B,kBAAkBpB,aAAaoB,cAAc;QAC3E,MAAMC,mBACJ7B,OAAO6B,oBAAoBrB,aAAaqB,gBAAgB;QAC1D,MAAMC,qBACJ9B,OAAO8B,sBAAsBtB,aAAasB,kBAAkB;QAC9D,MAAMC,gBAAgB/B,OAAO+B,iBAAiBvB,aAAauB,aAAa;QACxE,MAAMC,oBACJhC,OAAOgC,qBAAqBxB,aAAawB,iBAAiB;QAE5D,OAAO;YACLpB;YACAM;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAvB;QACF;IACF,GAAG;QACDG;QACAJ,aAAaU,eAAe;QAC5BV,aAAaiB,UAAU;QACvBjB,aAAakB,YAAY;QACzBlB,aAAaY,cAAc;QAC3BZ,aAAac,gBAAgB;QAC7Bd,aAAaoB,cAAc;QAC3BpB,aAAagB,cAAc;QAC3BhB,aAAaW,YAAY;QACzBX,aAAaa,cAAc;QAC3Bb,aAAamB,YAAY;QACzBnB,aAAawB,iBAAiB;QAC9BxB,aAAauB,aAAa;QAC1BvB,aAAaqB,gBAAgB;QAC7BrB,aAAasB,kBAAkB;QAC/BtB,aAAae,YAAY;QACzBvB,OAAOkB;QACPlB,OAAOyB;QACPzB,OAAO0B;QACP1B,OAAOoB;QACPpB,OAAOsB;QACPtB,OAAO4B;QACP5B,OAAOwB;QACPxB,OAAOmB;QACPnB,OAAOqB;QACPrB,OAAO2B;QACP3B,OAAOgC;QACPhC,OAAO+B;QACP/B,OAAO6B;QACP7B,OAAO8B;QACP9B,OAAOuB;KACR;IAED,qBAAO,KAAC1B;QAASoB,OAAOA;kBAAQb;;AAClC"}
+{"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 { DEFAULT_DARK_THEME, DEFAULT_LIGHT_THEME } from \"./constants.js\";\nimport { getDerivedTheme } from \"./getDerivedTheme.js\";\nimport { type ConfigurableThemeColors, type ThemeContext } from \"./types.js\";\nimport { useColorScheme } from \"./useColorScheme.js\";\n\nconst context = createContext<Readonly<ThemeContext> | undefined>(undefined);\ncontext.displayName = \"Theme\";\nconst { Provider } = context;\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/ThemeProvider\";\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 { ThemeProvider } from \"@react-md/core/theme/ThemeProvider\";\n * import { type ConfigurableThemeColors } from \"@react-md/core/theme/types\";\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://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 = globalThis.requestAnimationFrame(() => {\n      setDerivedTheme(getDerivedTheme(document.documentElement));\n    });\n\n    return () => {\n      globalThis.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","DEFAULT_DARK_THEME","DEFAULT_LIGHT_THEME","getDerivedTheme","useColorScheme","context","undefined","displayName","Provider","useTheme","allowUndefined","theme","Error","ThemeProvider","props","children","ssr","currentColor","colorScheme","derivedTheme","setDerivedTheme","document","documentElement","derived","frame","globalThis","requestAnimationFrame","cancelAnimationFrame","value","backgroundColor","primaryColor","onPrimaryColor","secondaryColor","onSecondaryColor","warningColor","onWarningColor","errorColor","onErrorColor","successColor","onSuccessColor","textPrimaryColor","textSecondaryColor","textHintColor","textDisabledColor"],"mappings":"AAAA;;AAEA,SAGEA,aAAa,EACbC,UAAU,EACVC,SAAS,EACTC,OAAO,EACPC,QAAQ,QACH,QAAQ;AAEf,SAASC,MAAM,QAAQ,oBAAoB;AAC3C,SAASC,kBAAkB,EAAEC,mBAAmB,QAAQ,iBAAiB;AACzE,SAASC,eAAe,QAAQ,uBAAuB;AAEvD,SAASC,cAAc,QAAQ,sBAAsB;AAErD,MAAMC,wBAAUV,cAAkDW;AAClED,QAAQE,WAAW,GAAG;AACtB,MAAM,EAAEC,QAAQ,EAAE,GAAGH;AA+BrB;;;;CAIC,GACD,OAAO,SAASI,SACdC,cAAwB;IAExB,MAAMC,QAAQf,WAAWS;IACzB,IAAI,CAACM,SAAS,CAACD,gBAAgB;QAC7B,MAAM,IAAIE,MAAM;IAClB;IAEA,OAAOD;AACT;AAwBA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8EC,GACD,OAAO,SAASE,cAAcC,KAAyB;IACrD,MAAM,EAAEC,QAAQ,EAAEJ,KAAK,EAAE,GAAGG;IAC5B,MAAME,MAAMhB;IACZ,MAAM,EAAEiB,YAAY,EAAEC,WAAW,EAAE,GAAGd;IACtC,MAAM,CAACe,cAAcC,gBAAgB,GAAGrB,SACtC;QACE,IAAIY,OAAO;YACT,OAAOA;QACT;QAEA,IAAI,CAACK,OAAO,OAAOK,aAAa,aAAa;YAC3C,OAAOlB,gBAAgBkB,SAASC,eAAe;QACjD;QAEA,OAAOL,iBAAiB,SAAShB,qBAAqBC;IACxD;IAGF,MAAMqB,UAAU,CAACZ;IACjBd,UAAU;QACR,IAAIc,OAAO;YACT;QACF;QAEA,yEAAyE;QACzE,0EAA0E;QAC1E,cAAc;QACd,EAAE;QACF,2EAA2E;QAC3E,0EAA0E;QAC1E,SAAS;QACT,MAAMa,QAAQC,WAAWC,qBAAqB,CAAC;YAC7CN,gBAAgBjB,gBAAgBkB,SAASC,eAAe;QAC1D;QAEA,OAAO;YACLG,WAAWE,oBAAoB,CAACH;QAClC;IACF,GAAG;QAACb;QAAOM;QAAcC;KAAY;IAErC,MAAMU,QAAQ9B,QAAsB;QAClC,MAAM+B,kBACJlB,OAAOkB,mBAAmBV,aAAaU,eAAe;QACxD,MAAMC,eAAenB,OAAOmB,gBAAgBX,aAAaW,YAAY;QACrE,MAAMC,iBAAiBpB,OAAOoB,kBAAkBZ,aAAaY,cAAc;QAC3E,MAAMC,iBAAiBrB,OAAOqB,kBAAkBb,aAAaa,cAAc;QAC3E,MAAMC,mBACJtB,OAAOsB,oBAAoBd,aAAac,gBAAgB;QAC1D,MAAMC,eAAevB,OAAOuB,gBAAgBf,aAAae,YAAY;QACrE,MAAMC,iBAAiBxB,OAAOwB,kBAAkBhB,aAAagB,cAAc;QAC3E,MAAMC,aAAazB,OAAOyB,cAAcjB,aAAaiB,UAAU;QAC/D,MAAMC,eAAe1B,OAAO0B,gBAAgBlB,aAAakB,YAAY;QACrE,MAAMC,eAAe3B,OAAO2B,gBAAgBnB,aAAamB,YAAY;QACrE,MAAMC,iBAAiB5B,OAAO4B,kBAAkBpB,aAAaoB,cAAc;QAC3E,MAAMC,mBACJ7B,OAAO6B,oBAAoBrB,aAAaqB,gBAAgB;QAC1D,MAAMC,qBACJ9B,OAAO8B,sBAAsBtB,aAAasB,kBAAkB;QAC9D,MAAMC,gBAAgB/B,OAAO+B,iBAAiBvB,aAAauB,aAAa;QACxE,MAAMC,oBACJhC,OAAOgC,qBAAqBxB,aAAawB,iBAAiB;QAE5D,OAAO;YACLpB;YACAM;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAC;YACAvB;QACF;IACF,GAAG;QACDG;QACAJ,aAAaU,eAAe;QAC5BV,aAAaiB,UAAU;QACvBjB,aAAakB,YAAY;QACzBlB,aAAaY,cAAc;QAC3BZ,aAAac,gBAAgB;QAC7Bd,aAAaoB,cAAc;QAC3BpB,aAAagB,cAAc;QAC3BhB,aAAaW,YAAY;QACzBX,aAAaa,cAAc;QAC3Bb,aAAamB,YAAY;QACzBnB,aAAawB,iBAAiB;QAC9BxB,aAAauB,aAAa;QAC1BvB,aAAaqB,gBAAgB;QAC7BrB,aAAasB,kBAAkB;QAC/BtB,aAAae,YAAY;QACzBvB,OAAOkB;QACPlB,OAAOyB;QACPzB,OAAO0B;QACP1B,OAAOoB;QACPpB,OAAOsB;QACPtB,OAAO4B;QACP5B,OAAOwB;QACPxB,OAAOmB;QACPnB,OAAOqB;QACPrB,OAAO2B;QACP3B,OAAOgC;QACPhC,OAAO+B;QACP/B,OAAO6B;QACP7B,OAAO8B;QACP9B,OAAOuB;KACR;IAED,qBAAO,KAAC1B;QAASoB,OAAOA;kBAAQb;;AAClC"}

package/dist/theme/_a11y.scss

@@ -183,5 +183,7 @@ $_linear-channel-values: (
   $light-contrast: _contrast($background-color, $light-color);
   $dark-contrast: _contrast($background-color, $dark-color);
 
-  @return if($light-contrast > $dark-contrast, $light-color, $dark-color);
+  @return if(
+    sass($light-contrast > $dark-contrast): $light-color; else: $dark-color
+  );
 }

package/dist/theme/_theme.scss

@@ -222,10 +222,10 @@ $dark-theme-background-color: #121212 !default;
 /// color depending on its elevation.
 ///
 /// @type Color
+// prettier-ignore
 $dark-theme-surface-color: if(
-  $disable-dark-elevation,
-  colors.$grey-800,
-  null
+  sass($disable-dark-elevation): colors.$grey-800;
+  else: null
 ) !default;
 
 /// The primary text color when using the dark theme.
@@ -250,7 +250,7 @@ $dark-theme-text-disabled-color: rgba($dark-theme-inverse-color, 0.38) !default;
 /// @param {Color} dark-color - The dark theme color
 /// @returns {Color} The correct color depending on the `$color-scheme`
 @function get-default-color($light-color, $dark-color) {
-  @return if($color-scheme == dark, $dark-color, $light-color);
+  @return if(sass($color-scheme == dark): $dark-color; else: $light-color);
 }
 
 /// The default background color
@@ -519,7 +519,7 @@ $theme-variables: (
 /// @param {any} value - The value to maybe return
 /// @return {any} the `$value` if it was theme var, otherwise null
 @function theme-color-var-fallback($value) {
-  @return if(is-theme-color-var($value), $value, null);
+  @return if(sass(is-theme-color-var($value)): $value; else: null);
 }
 
 /// @param {Number} z-value - The dark elevation value
@@ -777,11 +777,10 @@ $theme-variables: (
 
   @if not $current-color-index {
     @if not $fallback-color {
-      $fallback: if(
-        $fallback-name,
-        "the '$#{$fallback-name}' variable",
-        "a fallback color"
-      );
+      $fallback: "a fallback color";
+      @if $fallback-name {
+        $fallback: "the '$#{$fallback-name}' variable";
+      }
 
       $error-msg: "Invalid material design color: '#{$color}'. If this was intentional because your app does " +
         "not use material design colors, set #{$fallback} instead to get a correct color for the provided swatch: " +
@@ -794,8 +793,13 @@ $theme-variables: (
     }
   }
 
+  // prettier-ignore
+  $current-suffixes: if(
+    sass(not $accent): colors.$primary-suffixes;
+    else: colors.$accent-suffixes
+  );
   $suffixes: utils.validate(
-    if($accent, colors.$accent-suffixes, colors.$primary-suffixes),
+    $current-suffixes,
     $swatch,
     "material design color swatch"
   );
@@ -829,7 +833,7 @@ $theme-variables: (
     }
   }
 
-  $color-name: "#{$current-color-name}#{if($accent, "-a", "")}-#{$swatch}";
+  $color-name: "#{$current-color-name}#{if(sass(not $accent): ""; else: "-a")}-#{$swatch}";
 
   @return map.get(colors.$color-map, $color-name);
 }

package/dist/theme/getDerivedTheme.js

@@ -1,6 +1,6 @@
 import { backgroundColorVar, errorColorVar, onErrorColorVar, onPrimaryColorVar, onSecondaryColorVar, onSuccessColorVar, onWarningColorVar, primaryColorVar, secondaryColorVar, successColorVar, textDisabledColorVar, textHintColorVar, textPrimaryColorVar, textSecondaryColorVar, warningColorVar } from "./cssVars.js";
 /** @since 6.0.0 */ export const getDerivedTheme = (container = document.documentElement)=>{
-    const rootStyles = window.getComputedStyle(container);
+    const rootStyles = globalThis.getComputedStyle(container);
     const backgroundColor = rootStyles.getPropertyValue(backgroundColorVar);
     const primaryColor = rootStyles.getPropertyValue(primaryColorVar);
     const onPrimaryColor = rootStyles.getPropertyValue(onPrimaryColorVar);

package/dist/theme/getDerivedTheme.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/theme/getDerivedTheme.ts"],"sourcesContent":["import {\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 { type ConfigurableThemeColors } from \"./types.js\";\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"],"names":["backgroundColorVar","errorColorVar","onErrorColorVar","onPrimaryColorVar","onSecondaryColorVar","onSuccessColorVar","onWarningColorVar","primaryColorVar","secondaryColorVar","successColorVar","textDisabledColorVar","textHintColorVar","textPrimaryColorVar","textSecondaryColorVar","warningColorVar","getDerivedTheme","container","document","documentElement","rootStyles","window","getComputedStyle","backgroundColor","getPropertyValue","primaryColor","onPrimaryColor","secondaryColor","onSecondaryColor","warningColor","onWarningColor","errorColor","onErrorColor","successColor","onSuccessColor","textPrimaryColor","textSecondaryColor","textHintColor","textDisabledColor"],"mappings":"AAAA,SACEA,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;AAGtB,iBAAiB,GACjB,OAAO,MAAMC,kBAAkB,CAC7BC,YAAqBC,SAASC,eAAe;IAE7C,MAAMC,aAAaC,OAAOC,gBAAgB,CAACL;IAC3C,MAAMM,kBAAkBH,WAAWI,gBAAgB,CAACvB;IACpD,MAAMwB,eAAeL,WAAWI,gBAAgB,CAAChB;IACjD,MAAMkB,iBAAiBN,WAAWI,gBAAgB,CAACpB;IACnD,MAAMuB,iBAAiBP,WAAWI,gBAAgB,CAACf;IACnD,MAAMmB,mBAAmBR,WAAWI,gBAAgB,CAACnB;IACrD,MAAMwB,eAAeT,WAAWI,gBAAgB,CAACT;IACjD,MAAMe,iBAAiBV,WAAWI,gBAAgB,CAACjB;IACnD,MAAMwB,aAAaX,WAAWI,gBAAgB,CAACtB;IAC/C,MAAM8B,eAAeZ,WAAWI,gBAAgB,CAACrB;IACjD,MAAM8B,eAAeb,WAAWI,gBAAgB,CAACd;IACjD,MAAMwB,iBAAiBd,WAAWI,gBAAgB,CAAClB;IACnD,MAAM6B,mBAAmBf,WAAWI,gBAAgB,CAACX;IACrD,MAAMuB,qBAAqBhB,WAAWI,gBAAgB,CAACV;IACvD,MAAMuB,gBAAgBjB,WAAWI,gBAAgB,CAACZ;IAClD,MAAM0B,oBAAoBlB,WAAWI,gBAAgB,CAACb;IAEtD,OAAO;QACLY;QACAE;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;IACF;AACF,EAAE"}
+{"version":3,"sources":["../../src/theme/getDerivedTheme.ts"],"sourcesContent":["import {\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 { type ConfigurableThemeColors } from \"./types.js\";\n\n/** @since 6.0.0 */\nexport const getDerivedTheme = (\n  container: Element = document.documentElement\n): Readonly<ConfigurableThemeColors> => {\n  const rootStyles = globalThis.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"],"names":["backgroundColorVar","errorColorVar","onErrorColorVar","onPrimaryColorVar","onSecondaryColorVar","onSuccessColorVar","onWarningColorVar","primaryColorVar","secondaryColorVar","successColorVar","textDisabledColorVar","textHintColorVar","textPrimaryColorVar","textSecondaryColorVar","warningColorVar","getDerivedTheme","container","document","documentElement","rootStyles","globalThis","getComputedStyle","backgroundColor","getPropertyValue","primaryColor","onPrimaryColor","secondaryColor","onSecondaryColor","warningColor","onWarningColor","errorColor","onErrorColor","successColor","onSuccessColor","textPrimaryColor","textSecondaryColor","textHintColor","textDisabledColor"],"mappings":"AAAA,SACEA,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;AAGtB,iBAAiB,GACjB,OAAO,MAAMC,kBAAkB,CAC7BC,YAAqBC,SAASC,eAAe;IAE7C,MAAMC,aAAaC,WAAWC,gBAAgB,CAACL;IAC/C,MAAMM,kBAAkBH,WAAWI,gBAAgB,CAACvB;IACpD,MAAMwB,eAAeL,WAAWI,gBAAgB,CAAChB;IACjD,MAAMkB,iBAAiBN,WAAWI,gBAAgB,CAACpB;IACnD,MAAMuB,iBAAiBP,WAAWI,gBAAgB,CAACf;IACnD,MAAMmB,mBAAmBR,WAAWI,gBAAgB,CAACnB;IACrD,MAAMwB,eAAeT,WAAWI,gBAAgB,CAACT;IACjD,MAAMe,iBAAiBV,WAAWI,gBAAgB,CAACjB;IACnD,MAAMwB,aAAaX,WAAWI,gBAAgB,CAACtB;IAC/C,MAAM8B,eAAeZ,WAAWI,gBAAgB,CAACrB;IACjD,MAAM8B,eAAeb,WAAWI,gBAAgB,CAACd;IACjD,MAAMwB,iBAAiBd,WAAWI,gBAAgB,CAAClB;IACnD,MAAM6B,mBAAmBf,WAAWI,gBAAgB,CAACX;IACrD,MAAMuB,qBAAqBhB,WAAWI,gBAAgB,CAACV;IACvD,MAAMuB,gBAAgBjB,WAAWI,gBAAgB,CAACZ;IAClD,MAAM0B,oBAAoBlB,WAAWI,gBAAgB,CAACb;IAEtD,OAAO;QACLY;QACAE;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;IACF;AACF,EAAE"}

package/dist/theme/useCSSVariables.js

@@ -31,7 +31,7 @@ import { useEffect } from "react";
  * @since 6.0.0
  */ export function useCSSVariables(variables, rootNode) {
     useEffect(()=>{
-        if (!variables.length) {
+        if (variables.length === 0) {
             return;
         }
         // use an iife so that hoisting doesn't cause a possible "null" issue for
@@ -49,7 +49,7 @@ import { useEffect } from "react";
             return;
         }
         // const root = document.documentElement;
-        variables.forEach(({ name, value })=>{
+        for (const { name, value } of variables){
             if (process.env.NODE_ENV !== "production" && root.style.getPropertyValue(name)) {
                 const currentValue = root.style.getPropertyValue(name);
                 const overwritten = currentValue !== value ? ` and will be overwritten to "${value}"` : "";
@@ -57,11 +57,11 @@ import { useEffect } from "react";
                 console.warn(`The "${name}" css variable has already been set to "${currentValue}" ` + `on the root element${overwritten}. There might be conflicting overrides.`);
             }
             root.style.setProperty(name, `${value}`);
-        });
+        }
         return ()=>{
-            variables.forEach(({ name })=>{
+            for (const { name } of variables){
                 root.style.removeProperty(name);
-            });
+            }
         };
     }, [
         variables,

package/dist/theme/useCSSVariables.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/theme/useCSSVariables.ts"],"sourcesContent":["\"use client\";\n\nimport { type RefObject, useEffect } from \"react\";\n\nimport { type CSSVariableName, type ReadonlyCSSVariableList } from \"./types.js\";\n\n/**\n * @example Applying Variables the root html element\n * ```ts\n * import { purple500 } from \"@react-md/core/theme/colors\";\n * import { useCSSVariables } from \"@react-md/core/theme/useCSSVariables\";\n * import { contrastColor } from \"@react-md/core/theme/utils\";\n * import { useMemo } from \"react\";\n *\n * function Example(): null {\n *   // Note: You should use `useMemo` so that the custom variables are not\n *   // added and removed during each render.\n *   useCSSVariables(useMemo(() => {\n *     return [\n *       {\n *         name: \"--rmd-primary-color\",\n *         value: purple500,\n *       },\n *       {\n *         name: \"--rmd-on-primary-color\",\n *         value: contrastColor(purple500),\n *       },\n *     ];\n *   }, []));\n *\n *   return null;\n * }\n * ```\n *\n * @since 6.0.0\n */\nexport function useCSSVariables<Name extends CSSVariableName>(\n  variables: ReadonlyCSSVariableList<Name>,\n  rootNode?: RefObject<HTMLElement> | HTMLElement\n): void {\n  useEffect(() => {\n    if (!variables.length) {\n      return;\n    }\n\n    // use an iife so that hoisting doesn't cause a possible \"null\" issue for\n    // the root\n    const root = (() => {\n      if (!rootNode) {\n        return document.documentElement;\n      }\n\n      if (\"current\" in rootNode) {\n        return rootNode.current;\n      }\n\n      return rootNode;\n    })();\n\n    if (!root) {\n      return;\n    }\n\n    // const root = document.documentElement;\n    variables.forEach(({ name, value }) => {\n      if (\n        process.env.NODE_ENV !== \"production\" &&\n        root.style.getPropertyValue(name)\n      ) {\n        const currentValue = root.style.getPropertyValue(name);\n        const overwritten =\n          currentValue !== value\n            ? ` and will be overwritten to \"${value}\"`\n            : \"\";\n        // eslint-disable-next-line no-console\n        console.warn(\n          `The \"${name}\" css variable has already been set to \"${currentValue}\" ` +\n            `on the root element${overwritten}. There might be conflicting overrides.`\n        );\n      }\n\n      root.style.setProperty(name, `${value}`);\n    });\n    return () => {\n      variables.forEach(({ name }) => {\n        root.style.removeProperty(name);\n      });\n    };\n  }, [variables, rootNode]);\n}\n"],"names":["useEffect","useCSSVariables","variables","rootNode","length","root","document","documentElement","current","forEach","name","value","process","env","NODE_ENV","style","getPropertyValue","currentValue","overwritten","console","warn","setProperty","removeProperty"],"mappings":"AAAA;AAEA,SAAyBA,SAAS,QAAQ,QAAQ;AAIlD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6BC,GACD,OAAO,SAASC,gBACdC,SAAwC,EACxCC,QAA+C;IAE/CH,UAAU;QACR,IAAI,CAACE,UAAUE,MAAM,EAAE;YACrB;QACF;QAEA,yEAAyE;QACzE,WAAW;QACX,MAAMC,OAAO,AAAC,CAAA;YACZ,IAAI,CAACF,UAAU;gBACb,OAAOG,SAASC,eAAe;YACjC;YAEA,IAAI,aAAaJ,UAAU;gBACzB,OAAOA,SAASK,OAAO;YACzB;YAEA,OAAOL;QACT,CAAA;QAEA,IAAI,CAACE,MAAM;YACT;QACF;QAEA,yCAAyC;QACzCH,UAAUO,OAAO,CAAC,CAAC,EAAEC,IAAI,EAAEC,KAAK,EAAE;YAChC,IACEC,QAAQC,GAAG,CAACC,QAAQ,KAAK,gBACzBT,KAAKU,KAAK,CAACC,gBAAgB,CAACN,OAC5B;gBACA,MAAMO,eAAeZ,KAAKU,KAAK,CAACC,gBAAgB,CAACN;gBACjD,MAAMQ,cACJD,iBAAiBN,QACb,CAAC,6BAA6B,EAAEA,MAAM,CAAC,CAAC,GACxC;gBACN,sCAAsC;gBACtCQ,QAAQC,IAAI,CACV,CAAC,KAAK,EAAEV,KAAK,wCAAwC,EAAEO,aAAa,EAAE,CAAC,GACrE,CAAC,mBAAmB,EAAEC,YAAY,uCAAuC,CAAC;YAEhF;YAEAb,KAAKU,KAAK,CAACM,WAAW,CAACX,MAAM,GAAGC,OAAO;QACzC;QACA,OAAO;YACLT,UAAUO,OAAO,CAAC,CAAC,EAAEC,IAAI,EAAE;gBACzBL,KAAKU,KAAK,CAACO,cAAc,CAACZ;YAC5B;QACF;IACF,GAAG;QAACR;QAAWC;KAAS;AAC1B"}
+{"version":3,"sources":["../../src/theme/useCSSVariables.ts"],"sourcesContent":["\"use client\";\n\nimport { type RefObject, useEffect } from \"react\";\n\nimport { type CSSVariableName, type ReadonlyCSSVariableList } from \"./types.js\";\n\n/**\n * @example Applying Variables the root html element\n * ```ts\n * import { purple500 } from \"@react-md/core/theme/colors\";\n * import { useCSSVariables } from \"@react-md/core/theme/useCSSVariables\";\n * import { contrastColor } from \"@react-md/core/theme/utils\";\n * import { useMemo } from \"react\";\n *\n * function Example(): null {\n *   // Note: You should use `useMemo` so that the custom variables are not\n *   // added and removed during each render.\n *   useCSSVariables(useMemo(() => {\n *     return [\n *       {\n *         name: \"--rmd-primary-color\",\n *         value: purple500,\n *       },\n *       {\n *         name: \"--rmd-on-primary-color\",\n *         value: contrastColor(purple500),\n *       },\n *     ];\n *   }, []));\n *\n *   return null;\n * }\n * ```\n *\n * @since 6.0.0\n */\nexport function useCSSVariables<Name extends CSSVariableName>(\n  variables: ReadonlyCSSVariableList<Name>,\n  rootNode?: RefObject<HTMLElement> | HTMLElement\n): void {\n  useEffect(() => {\n    if (variables.length === 0) {\n      return;\n    }\n\n    // use an iife so that hoisting doesn't cause a possible \"null\" issue for\n    // the root\n    const root = (() => {\n      if (!rootNode) {\n        return document.documentElement;\n      }\n\n      if (\"current\" in rootNode) {\n        return rootNode.current;\n      }\n\n      return rootNode;\n    })();\n\n    if (!root) {\n      return;\n    }\n\n    // const root = document.documentElement;\n    for (const { name, value } of variables) {\n      if (\n        process.env.NODE_ENV !== \"production\" &&\n        root.style.getPropertyValue(name)\n      ) {\n        const currentValue = root.style.getPropertyValue(name);\n        const overwritten =\n          currentValue !== value\n            ? ` and will be overwritten to \"${value}\"`\n            : \"\";\n        // eslint-disable-next-line no-console\n        console.warn(\n          `The \"${name}\" css variable has already been set to \"${currentValue}\" ` +\n            `on the root element${overwritten}. There might be conflicting overrides.`\n        );\n      }\n\n      root.style.setProperty(name, `${value}`);\n    }\n    return () => {\n      for (const { name } of variables) {\n        root.style.removeProperty(name);\n      }\n    };\n  }, [variables, rootNode]);\n}\n"],"names":["useEffect","useCSSVariables","variables","rootNode","length","root","document","documentElement","current","name","value","process","env","NODE_ENV","style","getPropertyValue","currentValue","overwritten","console","warn","setProperty","removeProperty"],"mappings":"AAAA;AAEA,SAAyBA,SAAS,QAAQ,QAAQ;AAIlD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6BC,GACD,OAAO,SAASC,gBACdC,SAAwC,EACxCC,QAA+C;IAE/CH,UAAU;QACR,IAAIE,UAAUE,MAAM,KAAK,GAAG;YAC1B;QACF;QAEA,yEAAyE;QACzE,WAAW;QACX,MAAMC,OAAO,AAAC,CAAA;YACZ,IAAI,CAACF,UAAU;gBACb,OAAOG,SAASC,eAAe;YACjC;YAEA,IAAI,aAAaJ,UAAU;gBACzB,OAAOA,SAASK,OAAO;YACzB;YAEA,OAAOL;QACT,CAAA;QAEA,IAAI,CAACE,MAAM;YACT;QACF;QAEA,yCAAyC;QACzC,KAAK,MAAM,EAAEI,IAAI,EAAEC,KAAK,EAAE,IAAIR,UAAW;YACvC,IACES,QAAQC,GAAG,CAACC,QAAQ,KAAK,gBACzBR,KAAKS,KAAK,CAACC,gBAAgB,CAACN,OAC5B;gBACA,MAAMO,eAAeX,KAAKS,KAAK,CAACC,gBAAgB,CAACN;gBACjD,MAAMQ,cACJD,iBAAiBN,QACb,CAAC,6BAA6B,EAAEA,MAAM,CAAC,CAAC,GACxC;gBACN,sCAAsC;gBACtCQ,QAAQC,IAAI,CACV,CAAC,KAAK,EAAEV,KAAK,wCAAwC,EAAEO,aAAa,EAAE,CAAC,GACrE,CAAC,mBAAmB,EAAEC,YAAY,uCAAuC,CAAC;YAEhF;YAEAZ,KAAKS,KAAK,CAACM,WAAW,CAACX,MAAM,GAAGC,OAAO;QACzC;QACA,OAAO;YACL,KAAK,MAAM,EAAED,IAAI,EAAE,IAAIP,UAAW;gBAChCG,KAAKS,KAAK,CAACO,cAAc,CAACZ;YAC5B;QACF;IACF,GAAG;QAACP;QAAWC;KAAS;AAC1B"}

package/dist/theme/useColorSchemeMetaTag.js

@@ -39,9 +39,9 @@ import { useEffect } from "react";
         const meta = document.createElement("meta");
         meta.name = "color-scheme";
         meta.content = colorScheme;
-        document.head.appendChild(meta);
+        document.head.append(meta);
         return ()=>{
-            document.head.removeChild(meta);
+            meta.remove();
         };
     }, [
         disabled,

package/dist/theme/useColorSchemeMetaTag.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/theme/useColorSchemeMetaTag.ts"],"sourcesContent":["\"use client\";\n\nimport { useEffect } from \"react\";\n\nimport { type LightDarkColorScheme } from \"./types.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface ColorSchemeMetaTagOptions {\n  /**\n   * @defaultValue `\"false\"`\n   */\n  disabled?: boolean;\n  colorScheme: LightDarkColorScheme;\n}\n\n/**\n * Adds a `<meta name=\"color-scheme\" content=\"light\">` or\n * `<meta name=\"color-scheme\" content=\"dark\">` into the head element. This\n * should not be used if you are using the `useColorSchemeProvider` since it is\n * already built in.\n *\n * @example\n * ```tsx\n * import { useColorScheme } from \"@react-md/core/theme/useColorScheme\";\n * import { useColorSchemeMetaTag } from \"@react-md/core/theme/useColorSchemeMetaTag\";\n *\n * function Example() {\n *   const { currentColor } = useColorScheme();\n *   useColorSchemeMetaTag({ colorScheme: currentColor });\n *\n *   return null;\n * }\n * ```\n *\n * @since 6.0.0\n */\nexport function useColorSchemeMetaTag(\n  options: ColorSchemeMetaTagOptions\n): void {\n  const { disabled, colorScheme } = options;\n\n  useEffect(() => {\n    if (disabled || document.querySelector('meta[name=\"color-scheme\"]')) {\n      return;\n    }\n\n    // Adding the meta tag allows the default browser styles for form inputs to\n    // be updated as well.\n    //\n    // Chrome and Firefox:\n    // - the input type=\"number\"'s spinner color will update from grey to white\n    // - native `<select>` background color updates from grey/white to a dark color\n    //\n    // Chrome:\n    // - the date/time/datetime icons will change from black to white\n    // - the date/time/datetime pickers will use a darker theme instead of white\n    const meta = document.createElement(\"meta\");\n    meta.name = \"color-scheme\";\n    meta.content = colorScheme;\n    document.head.appendChild(meta);\n\n    return () => {\n      document.head.removeChild(meta);\n    };\n  }, [disabled, colorScheme]);\n}\n"],"names":["useEffect","useColorSchemeMetaTag","options","disabled","colorScheme","document","querySelector","meta","createElement","name","content","head","appendChild","removeChild"],"mappings":"AAAA;AAEA,SAASA,SAAS,QAAQ,QAAQ;AAelC;;;;;;;;;;;;;;;;;;;;CAoBC,GACD,OAAO,SAASC,sBACdC,OAAkC;IAElC,MAAM,EAAEC,QAAQ,EAAEC,WAAW,EAAE,GAAGF;IAElCF,UAAU;QACR,IAAIG,YAAYE,SAASC,aAAa,CAAC,8BAA8B;YACnE;QACF;QAEA,2EAA2E;QAC3E,sBAAsB;QACtB,EAAE;QACF,sBAAsB;QACtB,2EAA2E;QAC3E,+EAA+E;QAC/E,EAAE;QACF,UAAU;QACV,iEAAiE;QACjE,4EAA4E;QAC5E,MAAMC,OAAOF,SAASG,aAAa,CAAC;QACpCD,KAAKE,IAAI,GAAG;QACZF,KAAKG,OAAO,GAAGN;QACfC,SAASM,IAAI,CAACC,WAAW,CAACL;QAE1B,OAAO;YACLF,SAASM,IAAI,CAACE,WAAW,CAACN;QAC5B;IACF,GAAG;QAACJ;QAAUC;KAAY;AAC5B"}
+{"version":3,"sources":["../../src/theme/useColorSchemeMetaTag.ts"],"sourcesContent":["\"use client\";\n\nimport { useEffect } from \"react\";\n\nimport { type LightDarkColorScheme } from \"./types.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface ColorSchemeMetaTagOptions {\n  /**\n   * @defaultValue `\"false\"`\n   */\n  disabled?: boolean;\n  colorScheme: LightDarkColorScheme;\n}\n\n/**\n * Adds a `<meta name=\"color-scheme\" content=\"light\">` or\n * `<meta name=\"color-scheme\" content=\"dark\">` into the head element. This\n * should not be used if you are using the `useColorSchemeProvider` since it is\n * already built in.\n *\n * @example\n * ```tsx\n * import { useColorScheme } from \"@react-md/core/theme/useColorScheme\";\n * import { useColorSchemeMetaTag } from \"@react-md/core/theme/useColorSchemeMetaTag\";\n *\n * function Example() {\n *   const { currentColor } = useColorScheme();\n *   useColorSchemeMetaTag({ colorScheme: currentColor });\n *\n *   return null;\n * }\n * ```\n *\n * @since 6.0.0\n */\nexport function useColorSchemeMetaTag(\n  options: ColorSchemeMetaTagOptions\n): void {\n  const { disabled, colorScheme } = options;\n\n  useEffect(() => {\n    if (disabled || document.querySelector('meta[name=\"color-scheme\"]')) {\n      return;\n    }\n\n    // Adding the meta tag allows the default browser styles for form inputs to\n    // be updated as well.\n    //\n    // Chrome and Firefox:\n    // - the input type=\"number\"'s spinner color will update from grey to white\n    // - native `<select>` background color updates from grey/white to a dark color\n    //\n    // Chrome:\n    // - the date/time/datetime icons will change from black to white\n    // - the date/time/datetime pickers will use a darker theme instead of white\n    const meta = document.createElement(\"meta\");\n    meta.name = \"color-scheme\";\n    meta.content = colorScheme;\n    document.head.append(meta);\n\n    return () => {\n      meta.remove();\n    };\n  }, [disabled, colorScheme]);\n}\n"],"names":["useEffect","useColorSchemeMetaTag","options","disabled","colorScheme","document","querySelector","meta","createElement","name","content","head","append","remove"],"mappings":"AAAA;AAEA,SAASA,SAAS,QAAQ,QAAQ;AAelC;;;;;;;;;;;;;;;;;;;;CAoBC,GACD,OAAO,SAASC,sBACdC,OAAkC;IAElC,MAAM,EAAEC,QAAQ,EAAEC,WAAW,EAAE,GAAGF;IAElCF,UAAU;QACR,IAAIG,YAAYE,SAASC,aAAa,CAAC,8BAA8B;YACnE;QACF;QAEA,2EAA2E;QAC3E,sBAAsB;QACtB,EAAE;QACF,sBAAsB;QACtB,2EAA2E;QAC3E,+EAA+E;QAC/E,EAAE;QACF,UAAU;QACV,iEAAiE;QACjE,4EAA4E;QAC5E,MAAMC,OAAOF,SAASG,aAAa,CAAC;QACpCD,KAAKE,IAAI,GAAG;QACZF,KAAKG,OAAO,GAAGN;QACfC,SAASM,IAAI,CAACC,MAAM,CAACL;QAErB,OAAO;YACLA,KAAKM,MAAM;QACb;IACF,GAAG;QAACV;QAAUC;KAAY;AAC5B"}

package/dist/theme/useInlineCSSVariables.js

@@ -30,10 +30,11 @@ import { useMemo } from "react";
  * @since 6.0.0
  */ export function useInlineCSSVariables(variables) {
     return useMemo(()=>{
-        return variables.reduce((style, { name, value })=>{
+        const style = {};
+        for (const { name, value } of variables){
             style[name] = value;
-            return style;
-        }, {});
+        }
+        return style;
     }, [
         variables
     ]);

package/dist/theme/useInlineCSSVariables.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/theme/useInlineCSSVariables.ts"],"sourcesContent":["import { type CSSProperties, useMemo } from \"react\";\n\nimport {\n  type CSSVariableName,\n  type CSSVariablesProperties,\n  type ReadonlyCSSVariableList,\n} from \"./types.js\";\n\n/**\n * @example Applying variables through inline styles\n * ```tsx\n * import { purple500 } from \"@react-md/core/theme/colors\";\n * import { type ReadonlyCSSVariableList } from \"@react-md/core/theme/types\";\n * import { useInlineCSSVariables } from \"@react-md/core/theme/useInlineCSSVariables\";\n * import { contrastColor } from \"@react-md/core/theme/utils\";\n * import { type ReactElement, type ReactNode, useMemo } from \"react\";\n *\n * function Example({ children }: { children: ReactNode }): ReactElement {\n *   const customVariables = useMemo<ReadonlyCSSVariableList>(() => {\n *     return [\n *       {\n *         name: \"--rmd-primary-color\",\n *         value: purple500,\n *       },\n *       {\n *         name: \"--rmd-on-primary-color\",\n *         value: contrastColor(purple500),\n *       },\n *     ];\n *   }, []);\n *   const style = useInlineCSSVariables(customVariables);\n *\n *   return <div style={style}>{children}</div>;\n * }\n * ```\n *\n * @since 6.0.0\n */\nexport function useInlineCSSVariables<Name extends CSSVariableName>(\n  variables: ReadonlyCSSVariableList<Name>\n): CSSProperties {\n  return useMemo(() => {\n    return variables.reduce<CSSVariablesProperties<Name>>(\n      (style, { name, value }) => {\n        style[name] = value;\n        return style;\n      },\n      {}\n    );\n  }, [variables]);\n}\n"],"names":["useMemo","useInlineCSSVariables","variables","reduce","style","name","value"],"mappings":"AAAA,SAA6BA,OAAO,QAAQ,QAAQ;AAQpD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6BC,GACD,OAAO,SAASC,sBACdC,SAAwC;IAExC,OAAOF,QAAQ;QACb,OAAOE,UAAUC,MAAM,CACrB,CAACC,OAAO,EAAEC,IAAI,EAAEC,KAAK,EAAE;YACrBF,KAAK,CAACC,KAAK,GAAGC;YACd,OAAOF;QACT,GACA,CAAC;IAEL,GAAG;QAACF;KAAU;AAChB"}
+{"version":3,"sources":["../../src/theme/useInlineCSSVariables.ts"],"sourcesContent":["import { type CSSProperties, useMemo } from \"react\";\n\nimport {\n  type CSSVariableName,\n  type CSSVariablesProperties,\n  type ReadonlyCSSVariableList,\n} from \"./types.js\";\n\n/**\n * @example Applying variables through inline styles\n * ```tsx\n * import { purple500 } from \"@react-md/core/theme/colors\";\n * import { type ReadonlyCSSVariableList } from \"@react-md/core/theme/types\";\n * import { useInlineCSSVariables } from \"@react-md/core/theme/useInlineCSSVariables\";\n * import { contrastColor } from \"@react-md/core/theme/utils\";\n * import { type ReactElement, type ReactNode, useMemo } from \"react\";\n *\n * function Example({ children }: { children: ReactNode }): ReactElement {\n *   const customVariables = useMemo<ReadonlyCSSVariableList>(() => {\n *     return [\n *       {\n *         name: \"--rmd-primary-color\",\n *         value: purple500,\n *       },\n *       {\n *         name: \"--rmd-on-primary-color\",\n *         value: contrastColor(purple500),\n *       },\n *     ];\n *   }, []);\n *   const style = useInlineCSSVariables(customVariables);\n *\n *   return <div style={style}>{children}</div>;\n * }\n * ```\n *\n * @since 6.0.0\n */\nexport function useInlineCSSVariables<Name extends CSSVariableName>(\n  variables: ReadonlyCSSVariableList<Name>\n): CSSProperties {\n  return useMemo(() => {\n    const style: CSSVariablesProperties<Name> = {};\n    for (const { name, value } of variables) {\n      style[name] = value;\n    }\n\n    return style;\n  }, [variables]);\n}\n"],"names":["useMemo","useInlineCSSVariables","variables","style","name","value"],"mappings":"AAAA,SAA6BA,OAAO,QAAQ,QAAQ;AAQpD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6BC,GACD,OAAO,SAASC,sBACdC,SAAwC;IAExC,OAAOF,QAAQ;QACb,MAAMG,QAAsC,CAAC;QAC7C,KAAK,MAAM,EAAEC,IAAI,EAAEC,KAAK,EAAE,IAAIH,UAAW;YACvCC,KAAK,CAACC,KAAK,GAAGC;QAChB;QAEA,OAAOF;IACT,GAAG;QAACD;KAAU;AAChB"}

package/dist/theme/utils.js

@@ -14,9 +14,9 @@ const VERBOSE_REGEX = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i;
     }
     hex = hex.replace(SHORTHAND_REGEX, (_m, r, g, b)=>`${r}${r}${g}${g}${b}${b}`);
     const result = hex.match(VERBOSE_REGEX) || [];
-    const r = parseInt(result[1] || "", 16) || 0;
-    const g = parseInt(result[2] || "", 16) || 0;
-    const b = parseInt(result[3] || "", 16) || 0;
+    const r = Number.parseInt(result[1] || "", 16) || 0;
+    const g = Number.parseInt(result[2] || "", 16) || 0;
+    const b = Number.parseInt(result[3] || "", 16) || 0;
     return [
         r,
         g,
@@ -26,12 +26,12 @@ const VERBOSE_REGEX = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i;
 export function getRGB(color) {
     // chrome 102.0.50005.63 apparently has whitespace when calling `window.getComputedStyle(element)`
     // remove whitespace to make it easy for supporting rgb or hex
-    color = color.replace(/\s/g, "");
+    color = color.replaceAll(/\s/g, "");
     const rgbMatches = color.match(RGB_REGEX);
     if (rgbMatches) {
-        const r = parseInt(rgbMatches[1] || "", 16) || 0;
-        const g = parseInt(rgbMatches[2] || "", 16) || 0;
-        const b = parseInt(rgbMatches[3] || "", 16) || 0;
+        const r = Number.parseInt(rgbMatches[1] || "", 16) || 0;
+        const g = Number.parseInt(rgbMatches[2] || "", 16) || 0;
+        const b = Number.parseInt(rgbMatches[3] || "", 16) || 0;
         return [
             r,
             g,
@@ -51,7 +51,7 @@ const BLUE_MULTIPLIER = 0.0722;
  * @internal
  */ function get8BitColor(color) {
     color /= 255;
-    if (color <= 0.03928) {
+    if (color <= 0.039_28) {
         return color / 12.92;
     }
     return ((color + 0.055) / 1.055) ** 2.4;

package/dist/theme/utils.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/theme/utils.ts"],"sourcesContent":["/* eslint-disable no-param-reassign */\nimport { black, white } from \"./colors.js\";\n\nconst RGB_REGEX = /^rgb\\(((\\b([01]?\\d\\d?|2[0-4]\\d|25[0-5])\\b),?){3}\\)$/;\nconst SHORTHAND_REGEX = /^#?([a-f\\d])([a-f\\d])([a-f\\d])$/i;\nconst VERBOSE_REGEX = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i;\n\nexport type RGB = readonly [red: number, green: number, blue: number];\n\n/**\n * Converts a hex string into an rgb value. This is useful for detecting color\n * contrast ratios and other stuff.\n *\n * @param hex - The hex string to convert\n * @returns an object containing the r, g, b values for the color.\n */\nexport function hexToRGB(hex: string): RGB {\n  if (\n    process.env.NODE_ENV !== \"production\" &&\n    !SHORTHAND_REGEX.test(hex) &&\n    !VERBOSE_REGEX.test(hex)\n  ) {\n    throw new TypeError(\"Invalid color string.\");\n  }\n\n  hex = hex.replace(\n    SHORTHAND_REGEX,\n    (_m, r, g, b) => `${r}${r}${g}${g}${b}${b}`\n  );\n\n  const result = hex.match(VERBOSE_REGEX) || [];\n  const r = parseInt(result[1] || \"\", 16) || 0;\n  const g = parseInt(result[2] || \"\", 16) || 0;\n  const b = parseInt(result[3] || \"\", 16) || 0;\n\n  return [r, g, b];\n}\n\nexport function getRGB(color: string): RGB {\n  // chrome 102.0.50005.63 apparently has whitespace when calling `window.getComputedStyle(element)`\n  // remove whitespace to make it easy for supporting rgb or hex\n  color = color.replace(/\\s/g, \"\");\n  const rgbMatches = color.match(RGB_REGEX);\n  if (rgbMatches) {\n    const r = parseInt(rgbMatches[1] || \"\", 16) || 0;\n    const g = parseInt(rgbMatches[2] || \"\", 16) || 0;\n    const b = parseInt(rgbMatches[3] || \"\", 16) || 0;\n\n    return [r, g, b];\n  }\n\n  return hexToRGB(color);\n}\n\nconst RED_MULTIPLIER = 0.2126;\nconst GREEN_MULTIPLIER = 0.7152;\nconst BLUE_MULTIPLIER = 0.0722;\n\n/**\n * I really couldn't figure out how to name these \"magic\" numbers since the\n * formula doesn't really describe it much:\n *\n * @see https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests\n * @internal\n */\nfunction get8BitColor(color: number): number {\n  color /= 255;\n\n  if (color <= 0.03928) {\n    return color / 12.92;\n  }\n\n  return ((color + 0.055) / 1.055) ** 2.4;\n}\n\n/**\n * A number closest to 0 should be closest to black while a number closest to 1\n * should be closest to white.\n *\n * @see https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests\n * @internal\n */\nexport function getLuminance(color: string): number {\n  const [r, g, b] = getRGB(color);\n\n  const red = get8BitColor(r) * RED_MULTIPLIER;\n  const green = get8BitColor(g) * GREEN_MULTIPLIER;\n  const blue = get8BitColor(b) * BLUE_MULTIPLIER;\n\n  return red + green + blue;\n}\n\n/**\n * Gets the contrast ratio between a background color and a foreground color.\n *\n * @see https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests\n *\n * @param background - The background color\n * @param foreground - The foreground color. This is normally the `color` css\n * value.\n * @returns the contrast ratio between the background and foreground colors.\n */\nexport function getContrastRatio(\n  background: string,\n  foreground: string\n): number {\n  const backgroundLuminance = getLuminance(background) + 0.05;\n  const foregroundLuminance = getLuminance(foreground) + 0.05;\n\n  return (\n    Math.max(backgroundLuminance, foregroundLuminance) /\n    Math.min(backgroundLuminance, foregroundLuminance)\n  );\n}\n\n/**\n * The type of contrast ratio compliance to confirm to. The ratios in order are:\n * - 3:1 for large text (18pt normal or 14pt bold)\n * - 4.5:1 for normal text\n * - 7:1 for Level AAA requirements.\n *\n * @see https://www.w3.org/TR/WCAG20/#visual-audio-contrast\n * @see https://www.w3.org/TR/WCAG20/#larger-scaledef\n */\nexport type ContrastRatioCompliance = \"large\" | \"normal\" | \"AAA\";\n\n/**\n * The contrast ratio that can be used for large text where large text is\n * considered 18pt or 14pt bold.\n */\nexport const LARGE_TEXT_CONTRAST_RATIO = 3;\n\n/**\n * The contrast ratio that can be used for normal text.\n */\nexport const NORMAL_TEXT_CONTRAST_RATIO = 4.5;\n\n/**\n * The AAA contrast ratio for passing WGAC 2.0 color contrast ratios.\n */\nexport const AAA_CONTRAST_RATIO = 7;\n\n/**\n * Checks if there is an acceptable contrast ratio between the background and\n * foreground colors based on the provided compliance level.\n *\n * @param background - The background color to check against\n * @param foreground - The foreground color to check against\n * @param compliance - The compliance level to use or a custom number as a\n * ratio.\n * @returns true if there is enough contrast between the foreground and\n * background colors for the provided compliance level.\n */\nexport function isContrastCompliant(\n  background: string,\n  foreground: string,\n  compliance: ContrastRatioCompliance | number = \"normal\"\n): boolean {\n  let ratio: number;\n  switch (compliance) {\n    case \"large\":\n      ratio = LARGE_TEXT_CONTRAST_RATIO;\n      break;\n    case \"normal\":\n      ratio = NORMAL_TEXT_CONTRAST_RATIO;\n      break;\n    case \"AAA\":\n      ratio = AAA_CONTRAST_RATIO;\n      break;\n    default:\n      ratio = compliance;\n  }\n\n  return getContrastRatio(background, foreground) >= ratio;\n}\n\n/**\n * Returns the highest contrast color to the provided `backgroundColor`. This is\n * normally used to ensure that a new background color can use an accessible text\n * color of either `#000` or `#fff`.\n *\n * This is pretty much a javascript implementation as the `contrast-color` Sass\n * function.\n *\n * @since 6.0.0\n */\nexport function contrastColor(\n  backgroundColor: string,\n  lightColor = white,\n  darkColor = black\n): string {\n  const lightContrast = getContrastRatio(backgroundColor, lightColor);\n  const darkContrast = getContrastRatio(backgroundColor, darkColor);\n\n  return lightContrast > darkContrast ? lightColor : darkColor;\n}\n"],"names":["black","white","RGB_REGEX","SHORTHAND_REGEX","VERBOSE_REGEX","hexToRGB","hex","process","env","NODE_ENV","test","TypeError","replace","_m","r","g","b","result","match","parseInt","getRGB","color","rgbMatches","RED_MULTIPLIER","GREEN_MULTIPLIER","BLUE_MULTIPLIER","get8BitColor","getLuminance","red","green","blue","getContrastRatio","background","foreground","backgroundLuminance","foregroundLuminance","Math","max","min","LARGE_TEXT_CONTRAST_RATIO","NORMAL_TEXT_CONTRAST_RATIO","AAA_CONTRAST_RATIO","isContrastCompliant","compliance","ratio","contrastColor","backgroundColor","lightColor","darkColor","lightContrast","darkContrast"],"mappings":"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"}
+{"version":3,"sources":["../../src/theme/utils.ts"],"sourcesContent":["/* eslint-disable no-param-reassign */\nimport { black, white } from \"./colors.js\";\n\nconst RGB_REGEX = /^rgb\\(((\\b([01]?\\d\\d?|2[0-4]\\d|25[0-5])\\b),?){3}\\)$/;\nconst SHORTHAND_REGEX = /^#?([a-f\\d])([a-f\\d])([a-f\\d])$/i;\nconst VERBOSE_REGEX = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i;\n\nexport type RGB = readonly [red: number, green: number, blue: number];\n\n/**\n * Converts a hex string into an rgb value. This is useful for detecting color\n * contrast ratios and other stuff.\n *\n * @param hex - The hex string to convert\n * @returns an object containing the r, g, b values for the color.\n */\nexport function hexToRGB(hex: string): RGB {\n  if (\n    process.env.NODE_ENV !== \"production\" &&\n    !SHORTHAND_REGEX.test(hex) &&\n    !VERBOSE_REGEX.test(hex)\n  ) {\n    throw new TypeError(\"Invalid color string.\");\n  }\n\n  hex = hex.replace(\n    SHORTHAND_REGEX,\n    (_m, r, g, b) => `${r}${r}${g}${g}${b}${b}`\n  );\n\n  const result = hex.match(VERBOSE_REGEX) || [];\n  const r = Number.parseInt(result[1] || \"\", 16) || 0;\n  const g = Number.parseInt(result[2] || \"\", 16) || 0;\n  const b = Number.parseInt(result[3] || \"\", 16) || 0;\n\n  return [r, g, b];\n}\n\nexport function getRGB(color: string): RGB {\n  // chrome 102.0.50005.63 apparently has whitespace when calling `window.getComputedStyle(element)`\n  // remove whitespace to make it easy for supporting rgb or hex\n  color = color.replaceAll(/\\s/g, \"\");\n  const rgbMatches = color.match(RGB_REGEX);\n  if (rgbMatches) {\n    const r = Number.parseInt(rgbMatches[1] || \"\", 16) || 0;\n    const g = Number.parseInt(rgbMatches[2] || \"\", 16) || 0;\n    const b = Number.parseInt(rgbMatches[3] || \"\", 16) || 0;\n\n    return [r, g, b];\n  }\n\n  return hexToRGB(color);\n}\n\nconst RED_MULTIPLIER = 0.2126;\nconst GREEN_MULTIPLIER = 0.7152;\nconst BLUE_MULTIPLIER = 0.0722;\n\n/**\n * I really couldn't figure out how to name these \"magic\" numbers since the\n * formula doesn't really describe it much:\n *\n * @see https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests\n * @internal\n */\nfunction get8BitColor(color: number): number {\n  color /= 255;\n\n  if (color <= 0.039_28) {\n    return color / 12.92;\n  }\n\n  return ((color + 0.055) / 1.055) ** 2.4;\n}\n\n/**\n * A number closest to 0 should be closest to black while a number closest to 1\n * should be closest to white.\n *\n * @see https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests\n * @internal\n */\nexport function getLuminance(color: string): number {\n  const [r, g, b] = getRGB(color);\n\n  const red = get8BitColor(r) * RED_MULTIPLIER;\n  const green = get8BitColor(g) * GREEN_MULTIPLIER;\n  const blue = get8BitColor(b) * BLUE_MULTIPLIER;\n\n  return red + green + blue;\n}\n\n/**\n * Gets the contrast ratio between a background color and a foreground color.\n *\n * @see https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests\n *\n * @param background - The background color\n * @param foreground - The foreground color. This is normally the `color` css\n * value.\n * @returns the contrast ratio between the background and foreground colors.\n */\nexport function getContrastRatio(\n  background: string,\n  foreground: string\n): number {\n  const backgroundLuminance = getLuminance(background) + 0.05;\n  const foregroundLuminance = getLuminance(foreground) + 0.05;\n\n  return (\n    Math.max(backgroundLuminance, foregroundLuminance) /\n    Math.min(backgroundLuminance, foregroundLuminance)\n  );\n}\n\n/**\n * The type of contrast ratio compliance to confirm to. The ratios in order are:\n * - 3:1 for large text (18pt normal or 14pt bold)\n * - 4.5:1 for normal text\n * - 7:1 for Level AAA requirements.\n *\n * @see https://www.w3.org/TR/WCAG20/#visual-audio-contrast\n * @see https://www.w3.org/TR/WCAG20/#larger-scaledef\n */\nexport type ContrastRatioCompliance = \"large\" | \"normal\" | \"AAA\";\n\n/**\n * The contrast ratio that can be used for large text where large text is\n * considered 18pt or 14pt bold.\n */\nexport const LARGE_TEXT_CONTRAST_RATIO = 3;\n\n/**\n * The contrast ratio that can be used for normal text.\n */\nexport const NORMAL_TEXT_CONTRAST_RATIO = 4.5;\n\n/**\n * The AAA contrast ratio for passing WGAC 2.0 color contrast ratios.\n */\nexport const AAA_CONTRAST_RATIO = 7;\n\n/**\n * Checks if there is an acceptable contrast ratio between the background and\n * foreground colors based on the provided compliance level.\n *\n * @param background - The background color to check against\n * @param foreground - The foreground color to check against\n * @param compliance - The compliance level to use or a custom number as a\n * ratio.\n * @returns true if there is enough contrast between the foreground and\n * background colors for the provided compliance level.\n */\nexport function isContrastCompliant(\n  background: string,\n  foreground: string,\n  compliance: ContrastRatioCompliance | number = \"normal\"\n): boolean {\n  let ratio: number;\n  switch (compliance) {\n    case \"large\":\n      ratio = LARGE_TEXT_CONTRAST_RATIO;\n      break;\n    case \"normal\":\n      ratio = NORMAL_TEXT_CONTRAST_RATIO;\n      break;\n    case \"AAA\":\n      ratio = AAA_CONTRAST_RATIO;\n      break;\n    default:\n      ratio = compliance;\n  }\n\n  return getContrastRatio(background, foreground) >= ratio;\n}\n\n/**\n * Returns the highest contrast color to the provided `backgroundColor`. This is\n * normally used to ensure that a new background color can use an accessible text\n * color of either `#000` or `#fff`.\n *\n * This is pretty much a javascript implementation as the `contrast-color` Sass\n * function.\n *\n * @since 6.0.0\n */\nexport function contrastColor(\n  backgroundColor: string,\n  lightColor = white,\n  darkColor = black\n): string {\n  const lightContrast = getContrastRatio(backgroundColor, lightColor);\n  const darkContrast = getContrastRatio(backgroundColor, darkColor);\n\n  return lightContrast > darkContrast ? lightColor : darkColor;\n}\n"],"names":["black","white","RGB_REGEX","SHORTHAND_REGEX","VERBOSE_REGEX","hexToRGB","hex","process","env","NODE_ENV","test","TypeError","replace","_m","r","g","b","result","match","Number","parseInt","getRGB","color","replaceAll","rgbMatches","RED_MULTIPLIER","GREEN_MULTIPLIER","BLUE_MULTIPLIER","get8BitColor","getLuminance","red","green","blue","getContrastRatio","background","foreground","backgroundLuminance","foregroundLuminance","Math","max","min","LARGE_TEXT_CONTRAST_RATIO","NORMAL_TEXT_CONTRAST_RATIO","AAA_CONTRAST_RATIO","isContrastCompliant","compliance","ratio","contrastColor","backgroundColor","lightColor","darkColor","lightContrast","darkContrast"],"mappings":"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"}

package/dist/tooltip/useTooltip.js

@@ -136,7 +136,7 @@ const noop = ()=>{
             let tooltipSpacing = dense ? denseSpacing : spacing;
             const tooltip = tooltipRef.current;
             if (!disableAutoSpacing && tooltip) {
-                tooltipSpacing = window.getComputedStyle(tooltip).getPropertyValue(TOOLTIP_SPACING_VAR) || spacing;
+                tooltipSpacing = globalThis.getComputedStyle(tooltip).getPropertyValue(TOOLTIP_SPACING_VAR) || spacing;
             }
             const currentSpacing = parseCssLengthUnit({
                 value: tooltipSpacing
@@ -184,13 +184,13 @@ const noop = ()=>{
                 hideTooltip();
             }
         };
-        window.addEventListener("keydown", handleKeyDown);
+        globalThis.addEventListener("keydown", handleKeyDown);
         window.addEventListener("scroll", hideTooltip, true);
-        window.addEventListener("touchend", hideTooltip, true);
+        globalThis.addEventListener("touchend", hideTooltip, true);
         return ()=>{
-            window.removeEventListener("keydown", handleKeyDown);
+            globalThis.removeEventListener("keydown", handleKeyDown);
             window.removeEventListener("scroll", hideTooltip, true);
-            window.removeEventListener("touchend", hideTooltip, true);
+            globalThis.removeEventListener("touchend", hideTooltip, true);
         };
     }, [
         hideTooltip,
@@ -203,7 +203,7 @@ const noop = ()=>{
         onDisabledCleanup: hideTooltip,
         onChange (active) {
             if (active) {
-                refocusFrame.current = window.requestAnimationFrame(()=>{
+                refocusFrame.current = globalThis.requestAnimationFrame(()=>{
                     pageInactive.current = false;
                 });
                 return;
@@ -304,7 +304,7 @@ const noop = ()=>{
                     return;
                 }
                 event.preventDefault();
-                const selection = window.getSelection();
+                const selection = globalThis.getSelection();
                 const node = selection?.anchorNode?.parentElement;
                 if (node && event.currentTarget.contains(node)) {
                     selection.empty();