{"version":3,"file":"useSystemTheme.mjs","sources":["../../../packages/hooks/useSystemTheme.ts"],"sourcesContent":["import { useEffect, useState } from 'react'\nimport { ThemeName } from '../theme/index.js'\n\nexport const useSystemTheme = (): ThemeName | undefined => {\n  const [systemTheme, setSystemTheme] = useState<ThemeName>()\n\n  useEffect(() => {\n    const mql = window.matchMedia('(prefers-color-scheme: dark)')\n\n    const setThemeFromQuery = ({ matches }: { matches: boolean }) => {\n      setSystemTheme(matches ? ThemeName.dark : ThemeName.light)\n    }\n\n    mql.addEventListener('change', setThemeFromQuery)\n    setThemeFromQuery(mql)\n\n    return () => {\n      mql.removeEventListener('change', setThemeFromQuery)\n    }\n  }, [])\n\n  return systemTheme\n}\n"],"names":["useSystemTheme","systemTheme","setSystemTheme","useState","useEffect","mql","window","matchMedia","setThemeFromQuery","_ref","matches","ThemeName","dark","light","addEventListener","removeEventListener"],"mappings":";;;;;;;;;;;AAGaA,MAAAA,cAAc,GAAGA,MAA6B;EACzD,MAAM,CAACC,WAAW,EAAEC,cAAc,CAAC,GAAGC,QAAQ,EAAa,CAAA;AAE3DC,EAAAA,SAAS,CAAC,MAAM;AACd,IAAA,MAAMC,GAAG,GAAGC,MAAM,CAACC,UAAU,CAAC,8BAA8B,CAAC,CAAA;IAE7D,MAAMC,iBAAiB,GAAGC,IAAA,IAAuC;MAAA,IAAtC;AAAEC,QAAAA,OAAAA;AAA8B,OAAC,GAAAD,IAAA,CAAA;MAC1DP,cAAc,CAACQ,OAAO,GAAGC,SAAS,CAACC,IAAI,GAAGD,SAAS,CAACE,KAAK,CAAC,CAAA;KAC3D,CAAA;AAEDR,IAAAA,GAAG,CAACS,gBAAgB,CAAC,QAAQ,EAAEN,iBAAiB,CAAC,CAAA;IACjDA,iBAAiB,CAACH,GAAG,CAAC,CAAA;AAEtB,IAAA,OAAO,MAAM;AACXA,MAAAA,GAAG,CAACU,mBAAmB,CAAC,QAAQ,EAAEP,iBAAiB,CAAC,CAAA;KACrD,CAAA;GACF,EAAE,EAAE,CAAC,CAAA;AAEN,EAAA,OAAOP,WAAW,CAAA;AACpB;;;;"}