{"version":3,"file":"applyStyles.mjs","sources":["../../../../../../../../../node_modules/@mui/system/esm/createTheme/applyStyles.js"],"sourcesContent":["/**\n * A universal utility to style components with multiple color modes. Always use it from the theme object.\n * It works with:\n *  - [Basic theme](https://mui.com/material-ui/customization/dark-mode/)\n *  - [CSS theme variables](https://mui.com/material-ui/customization/css-theme-variables/overview/)\n *  - Zero-runtime engine\n *\n * Tips: Use an array over object spread and place `theme.applyStyles()` last.\n *\n * With the styled function:\n * ✅ [{ background: '#e5e5e5' }, theme.applyStyles('dark', { background: '#1c1c1c' })]\n * 🚫 { background: '#e5e5e5', ...theme.applyStyles('dark', { background: '#1c1c1c' })}\n *\n * With the sx prop:\n * ✅ [{ background: '#e5e5e5' }, theme => theme.applyStyles('dark', { background: '#1c1c1c' })]\n * 🚫 { background: '#e5e5e5', ...theme => theme.applyStyles('dark', { background: '#1c1c1c' })}\n *\n * @example\n * 1. using with `styled`:\n * ```jsx\n *   const Component = styled('div')(({ theme }) => [\n *     { background: '#e5e5e5' },\n *     theme.applyStyles('dark', {\n *       background: '#1c1c1c',\n *       color: '#fff',\n *     }),\n *   ]);\n * ```\n *\n * @example\n * 2. using with `sx` prop:\n * ```jsx\n *   <Box sx={[\n *     { background: '#e5e5e5' },\n *     theme => theme.applyStyles('dark', {\n *        background: '#1c1c1c',\n *        color: '#fff',\n *      }),\n *     ]}\n *   />\n * ```\n *\n * @example\n * 3. theming a component:\n * ```jsx\n *   extendTheme({\n *     components: {\n *       MuiButton: {\n *         styleOverrides: {\n *           root: ({ theme }) => [\n *             { background: '#e5e5e5' },\n *             theme.applyStyles('dark', {\n *               background: '#1c1c1c',\n *               color: '#fff',\n *             }),\n *           ],\n *         },\n *       }\n *     }\n *   })\n *```\n */\nexport default function applyStyles(key, styles) {\n  // @ts-expect-error this is 'any' type\n  const theme = this;\n  if (theme.vars) {\n    if (!theme.colorSchemes?.[key] || typeof theme.getColorSchemeSelector !== 'function') {\n      return {};\n    }\n    // If CssVarsProvider is used as a provider, returns '*:where({selector}) &'\n    let selector = theme.getColorSchemeSelector(key);\n    if (selector === '&') {\n      return styles;\n    }\n    if (selector.includes('data-') || selector.includes('.')) {\n      // '*' is required as a workaround for Emotion issue (https://github.com/emotion-js/emotion/issues/2836)\n      selector = `*:where(${selector.replace(/\\s*&$/, '')}) &`;\n    }\n    return {\n      [selector]: styles\n    };\n  }\n  if (theme.palette.mode === key) {\n    return styles;\n  }\n  return {};\n}"],"names":["applyStyles"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACe,SAASA,aAAW,CAAC,GAAG,EAAE,MAAM,EAAE;AACjD;AACA,EAAE,MAAM,KAAK,GAAG,IAAI;AACpB,EAAE,IAAI,KAAK,CAAC,IAAI,EAAE;AAClB,IAAI,IAAI,CAAC,KAAK,CAAC,YAAY,GAAG,GAAG,CAAC,IAAI,OAAO,KAAK,CAAC,sBAAsB,KAAK,UAAU,EAAE;AAC1F,MAAM,OAAO,EAAE;AACf,IAAI;AACJ;AACA,IAAI,IAAI,QAAQ,GAAG,KAAK,CAAC,sBAAsB,CAAC,GAAG,CAAC;AACpD,IAAI,IAAI,QAAQ,KAAK,GAAG,EAAE;AAC1B,MAAM,OAAO,MAAM;AACnB,IAAI;AACJ,IAAI,IAAI,QAAQ,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,QAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE;AAC9D;AACA,MAAM,QAAQ,GAAG,CAAC,QAAQ,EAAE,QAAQ,CAAC,OAAO,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC;AAC9D,IAAI;AACJ,IAAI,OAAO;AACX,MAAM,CAAC,QAAQ,GAAG;AAClB,KAAK;AACL,EAAE;AACF,EAAE,IAAI,KAAK,CAAC,OAAO,CAAC,IAAI,KAAK,GAAG,EAAE;AAClC,IAAI,OAAO,MAAM;AACjB,EAAE;AACF,EAAE,OAAO,EAAE;AACX;;;;","x_google_ignoreList":[0]}