From badff4668d6c40f44b9e6d50b75bb01ecc8c1fa2 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Fri, 2 Feb 2024 16:27:43 +0700 Subject: [PATCH 01/15] update README --- packages/zero-runtime/README.md | 424 +++++++++++++++++++++++--------- 1 file changed, 304 insertions(+), 120 deletions(-) diff --git a/packages/zero-runtime/README.md b/packages/zero-runtime/README.md index 680f6510386cfd..8c842f6375ad4a 100644 --- a/packages/zero-runtime/README.md +++ b/packages/zero-runtime/README.md @@ -2,93 +2,121 @@ A zero-runtime CSS-in-JS library that extracts the colocated css to it's own css files at build-time. +- [Mental model](#mental-model) +- [Getting started](#getting-started) + - [Next.js](#nextjs) + - [Vite](#vite) +- [Usage](#usage) + - [Creating styles](#creating-styles) + - [Creating components](#creating-components) + - [Styling based on props](#styling-based-on-props) + - [Styling based on runtime values](#styling-based-on-runtime-values) + - [Styled component as a CSS selector](#styled-component-as-a-css-selector) +- [Theme](#theme) + - [Accesing theme values](#accesing-theme-values) + - [CSS variables support](#css-variables-support) + - [Color schemes](#color-schemes) + - [Mutliple themes](#mutliple-themes) + +## Mental model + +// TODO: Add a mental model + ## Getting started Zero-runtime supports Next.js and Vite with future support for more bundlersβ€”you must install the corresponding plugin, as shown below. -The package currently has a dependency on `@mui/material` to initialize the theme object, but this is only at build time. There won't be any Material UI code at runtime if you're not using it otherwiseβ€”in that case, you can move it to dev dependencies instead (as shown with the plugin packages). - ### Next.js -#### Installation - ```bash -npm install @mui/zero-runtime @mui/material +npm install @mui/zero-runtime npm install --save-dev @mui/zero-next-plugin ``` -#### Configuration - -In your `next.config.js` file, - -1. Import the plugin +Then, in your `next.config.js` file, import the plugin and wrap the exported config object: ```js const { withZeroPlugin } = require('@mui/zero-next-plugin'); -``` - -2. Create a theme object -```js -const { experimental_extendTheme: extendTheme } = require('@mui/material/styles'); -const theme = extendTheme(); -``` +/** + * @type {ZeroPluginConfig} + */ +const zeroPluginOptions = { + theme: {}, // To learn more, check the "Theme" section. +}; -3. Wrap the exported config object - -```js -module.exports = withZeroPlugin(nextConfig, { - theme, -}); +module.exports = withZeroPlugin( + { + // ...other nextConfig + }, + zeroPluginOptions, +); ``` ### Vite -#### Installation - ```bash -npm install @mui/zero-runtime @mui/material +npm install @mui/zero-runtime npm install --save-dev @mui/zero-vite-plugin ``` -#### Configuration - -In your vite config file, - -1. Import the plugin +Then, in your vite config file file, import the plugin and wrap the exported config object: ```js import { zeroVitePlugin } from '@mui/zero-vite-plugin'; -``` -2. Create a theme object - -```js -import { experimental_extendTheme as extendTheme } from '@mui/material/styles'; -const theme = extendTheme(); -``` - -3. Add the plugin to the `plugins` array. The position does not matter. - -```js export default defineConfig({ plugins: [ zeroVitePlugin({ - theme, + theme: {}, // To learn more, check the "Theme" section. }), // ... Your other plugins. ], }); ``` -### Usage +## Usage + +> You must configure zero-runtime with [Next.js](#nextjs) or [Vite](#vite) first. + +### Creating styles + +Use the `css` API to create reusable styles: + +```js +import { css } from '@mui/zero-runtime'; + +const visuallyHidden = css({ + border: 0, + clip: 'rect(0 0 0 0)', + height: '1px', + margin: -1, + overflow: 'hidden', + padding: 0, + position: 'absolute', + whiteSpace: 'nowrap', + width: '1px', +}); + +function App() { + return
I am invisible
; +} +``` + +The `css` function will be replaced with a unique string that represents the CSS class name for the generated styles. -In your source files, you can import the `styled` function from `@mui/zero-runtime`. The usage should be familiar if you've worked with Emotion or styled-components: +You can reuse the styles across your application by applying the class name to any element. + +To Learn more about using theme, check out [Theme](#theme) section. + +### Creating components + +Use the `styled` API to create a component by passing styles at the end. The usage should be familiar if you've worked with Emotion or styled-components: ```js import { styled } from '@mui/zero-runtime'; -const Heading = styled.h1({ +const Heading = styled('div')({ fontSize: '4rem', fontWeight: 'bold', padding: '10px 0px', @@ -105,109 +133,93 @@ The zero-runtime package differs from "standard" runtime CSS-in-JS libraries in 2. Your styles must be declarative, and must account for all combinations of props that you want to style. 3. The theme lets you declare CSS tokens that become part of the CSS bundle after the build. Any other values and methods that it might have are only available during build timeβ€”not at runtime. This leads to smaller bundle sizes. -You can access the same `theme` object that you provided in the bundler config by declaring styles as callbacksβ€”for example: +#### Styling based on props -```js -const Heading = styled.h1(({ theme }) => ({ - ...theme.typography.h1, -})); -``` +> πŸ’‘ This approach is recommended when the value of the prop is known at build time (finite values). -Visit the [Default theme viewer](https://mui.com/material-ui/customization/default-theme/) to learn more about the structure of the theme object. +Use the `variants` to define styles for a combination of the component's props. -#### Styling variants +Each variant is an object with `props` and `style` keys. The styles are applied when the component's props match the `props` object. -The `styled` function must account for all combinations of props. If you're creating a button component that supports a `size` prop and a `color` prop, for example, you can use the `variants` API to define styles for each possible combination of the two: +**Example 1**: A button component with `small` and `large` sizes: ```jsx -const Button = styled.button(() => ({ +const Button = styled('button')({ border: 'none', - // ... other base css styles to be applied across all prop values. + padding: '0.75rem', + // ...other base styles variants: [ { - // prop combinations - props: { - color: 'primary', - }, - // styles to be applied when color="primary" is passed on the component - style: { - color: 'blue', - outline: '1px transparent lightblue', - }, - }, - { - props: { - color: 'secondary', - }, - // styles to be applied when color="secondary" is passed on the component - style: { - color: 'green', - outline: '1px transparent lightgreen', - }, - }, - { - props: { - size: 'large', - }, - style: { - padding: '0.5rem', - }, - }, - { - props: { - size: 'medium', - }, - style: { - padding: '0.25rem', - }, + props: { size: 'large' }, + style: { padding: '1rem' }, }, { - props: { - size: 'small', - }, - style: { - padding: '0.1rem', - }, + props: { size: 'small' }, + style: { padding: '0.5rem' }, }, + ], +}); + +; // padding: 0.75rem +; // padding: 1rem +; // padding: 0.5rem +``` + +**Example 2**: A button component with variants and colors: + +```jsx +const Button = styled('button')({ + border: 'none', + padding: '0.75rem', + // ...other base styles + variants: [ { - props: { - size: 'small', - color: 'primary', - }, - style: { - // Styles to be applied when ; +``` + +**Example 3**: Apply styles based on a condition: + +The value of the `props` can be a function that returns a boolean. If the function returns `true`, the styles are applied. + +```jsx +const Button = styled('button')({ + border: 'none', + padding: '0.75rem', + // ...other base styles + variants: [ { - // If key value pair doesn't suffice, you can use the callback syntax - // to return `true` if you want the styles to be applied - props({ children }) { - return !!children; - }, - style: { - // CSS - }, + props: (props) => props.variant !== 'contained', + style: { backgroundColor: 'transparent' }, }, ], -})); +}); ``` #### Styling based on runtime values -To style a component based on the runtime values of the props, you can declare a CSS property as a callbackβ€”for example: +> πŸ’‘ This approach is recommended when the value of a prop is **unknown** ahead of time or possibly unlimited values, e.g. styling based on the user's input. + +Use a callback function as a value to create a dynamic style for the specific CSS property: ```tsx -const Heading = styled.h1<{ isError?: boolean }>(({ theme }) => ({ - ...theme.typography.h1, +const Heading = styled.h1<{ isError?: boolean }>({ color: ({ isError }) => (isError ? 'red' : 'black'), -})); +}); ``` -This works through the use of CSS variables and inline styles. The CSS and JSX output will look something like this: +Zero-runtime will replace the callback with a CSS variable and inject the value through inline style. This makes it possible to create a static CSS file while still allowing dynamic styles. ```css .Heading_class_akjsdfb { - /* Other styles from `theme.typography` */ color: var(--Heading_class_akjsdfb-0); } ``` @@ -249,3 +261,175 @@ const ExtraHeading = styled(Heading)({ // ... overridden styled }); ``` + +### Theme + +Theme lets you reuse the same values, such as colors, spacing, and typography, across your application. It is a plain object of any structure that you can define in your config file. + +For example, in Next.js, you can define the theme in the `next.config.js` file: + +```js +const { withZeroPlugin } = require('@mui/zero-next-plugin'); + +/** + * @type {ZeroPluginConfig} + */ +const zeroPluginOptions = { + theme: { + colors: { + primary: 'tomato', + secondary: 'cyan', + }, + spacing: { + unit: 8, + }, + typography: { + fontFamily: 'Inter, sans-serif', + }, + // ...more keys and values, it's free style! + }, +}; + +module.exports = withZeroPlugin( + { + // ...other nextConfig + }, + zeroPluginOptions, +); +``` + +#### Accesing theme values + +A callback can be used with **styled** and **css** APIs to access the theme values: + +```js +const Heading = styled('h1')(({ theme }) => ({ + color: theme.colors.primary, + fontSize: theme.spacing.unit * 4, + fontFamily: theme.typography.fontFamily, +})); +``` + +#### CSS variables support + +Zero-runtime can generate CSS variables from the theme values when you wrap your theme with `extendTheme` utility. For example, in a `next.config.js` file: + +```js +const { withZeroPlugin, extendTheme } = require('@mui/zero-next-plugin'); + +/** + * @type {ZeroPluginConfig} + */ +const zeroPluginOptions = { + theme: extendTheme({ + colors: { + primary: 'tomato', + secondary: 'cyan', + }, + spacing: { + unit: 8, + }, + typography: { + fontFamily: 'Inter, sans-serif', + }, + }), +}; + +module.exports = withZeroPlugin( + { + // ...other nextConfig + }, + zeroPluginOptions, +); +``` + +The `extendTheme` utility will go through the theme object and create a `vars` object which represents the theme tokens that are available as CSS variables. + +```jsx +const theme = extendTheme({ + colors: { + primary: 'tomato', + secondary: 'cyan', + }, +}); + +console.log(theme.colors.primary); // 'tomato' +console.log(theme.vars.colors.primary); // 'var(--colors-primary)' +``` + +When `extendTheme` is used, zero-runtime will extract and generate CSS variables to a separate CSS file. + +#### Color schemes + +Some tokens, especially color-related tokens, can have different values for different scenarios. For example in a daylight condition, the background color might be white, but in a dark condition, it might be black. + +The `extendTheme` utility lets you define unlimited color schemes: + +```jsx +extendTheme({ + colorSchemes: { + light: { + colors: { + background: '#f9f9f9', + foreground: '#121212', + }, + }, + dark: { + colors: { + background: '#212121', + foreground: '#fff', + }, + }, + }, + defaultColorScheme: 'light', +}); +``` + +In the above example, `light` (default) and `dark` color schemes are defined. Next, choose one or both methods to switch between color schemes: + +- **CSS media query**: It uses the [`prefers-color-scheme`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme) media query, no extra JavaScript is required at runtime. + + ```diff + extendTheme({ + colorSchemes: { + light: { ... }, + dark: { ... }, + }, + defaultColorScheme: 'light', + + prefersColorScheme: { + + light: 'light', + + dark: 'dark', + + } + }); + ``` + +- **class, data-\* attribute** : provide a `getColorSchemeSelector` function to tell zero-runtime what selector to apply for each color scheme. This method is more flexible but you need to write a JavaScript to control when and where to attach the attribute. + + ```diff + extendTheme({ + colorSchemes: { + light: { ... }, + dark: { ... }, + }, + defaultColorScheme: 'light', + + getColorSchemeSelector: (colorScheme) => `.${colorScheme}`, + }); + ``` + + The result CSS will be: + + ```css + :root, + .light { + --colors-background: #f9f9f9; + --colors-foreground: #121212; + } + .dark { + --colors-background: #212121; + --colors-foreground: #fff; + } + ``` + +#### Mutliple themes + +> ⏳ Currently, zero-runtime only supports a single theme. From bd59f2878b643839b4f8200a9f94d23d61ef6492 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Fri, 2 Feb 2024 22:08:34 +0700 Subject: [PATCH 02/15] add extendTheme to zero-runtime --- .../mui-system/src/cssVars/prepareCssVars.ts | 11 +-- packages/zero-runtime/src/extendTheme.ts | 72 +++++++++++++++++++ packages/zero-runtime/src/index.ts | 2 + .../zero-runtime/src/utils/generateCss.ts | 51 ++++++++----- 4 files changed, 115 insertions(+), 21 deletions(-) create mode 100644 packages/zero-runtime/src/extendTheme.ts diff --git a/packages/mui-system/src/cssVars/prepareCssVars.ts b/packages/mui-system/src/cssVars/prepareCssVars.ts index c73dc7240ecdb7..44774fbda318b0 100644 --- a/packages/mui-system/src/cssVars/prepareCssVars.ts +++ b/packages/mui-system/src/cssVars/prepareCssVars.ts @@ -2,7 +2,8 @@ import { deepmerge } from '@mui/utils'; import cssVarsParser from './cssVarsParser'; export interface DefaultCssVarsTheme { - colorSchemes: Record; + colorSchemes?: Record; + defaultColorScheme?: string; } function prepareCssVars>( @@ -13,7 +14,7 @@ function prepareCssVars; vars: ThemeVars }> = {}; - const { light, ...otherColorSchemes } = colorSchemes; + const { [defaultColorScheme]: light, ...otherColorSchemes } = colorSchemes; Object.entries(otherColorSchemes || {}).forEach(([key, scheme]) => { const { vars, css, varsWithDefaults } = cssVarsParser(scheme, parserConfig); themeVars = deepmerge(themeVars, varsWithDefaults); colorSchemesMap[key] = { css, vars }; }); if (light) { - // light color scheme vars should be merged last to set as default + // default color scheme vars should be merged last to set as default const { css, vars, varsWithDefaults } = cssVarsParser(light, parserConfig); themeVars = deepmerge(themeVars, varsWithDefaults); - colorSchemesMap.light = { css, vars }; + colorSchemesMap[defaultColorScheme] = { css, vars }; } const generateCssVars = (colorScheme?: string) => { diff --git a/packages/zero-runtime/src/extendTheme.ts b/packages/zero-runtime/src/extendTheme.ts new file mode 100644 index 00000000000000..e1140977761687 --- /dev/null +++ b/packages/zero-runtime/src/extendTheme.ts @@ -0,0 +1,72 @@ +import { prepareCssVars } from '@mui/system/cssVars'; +import type { SxConfig } from '@mui/system/styleFunctionSx'; + +export interface ThemeInput { + /** + * The prefix to be used for the CSS variables. + */ + cssVarPrefix?: string; + /** + * The color schemes to be used for the theme. + */ + colorSchemes?: Record; + /** + * The default color scheme to be used for the theme. + * Required when `colorSchemes` is provided. + */ + defaultColorScheme?: string; + /** + * If provided, the `prefers-color-scheme` media query will be used to apply the CSS variables based on the `light` and `dark` color schemes. + */ + prefersColorScheme?: { + light: string; + dark: string; + }; + /** + * If provided, it will be used to create a selector for the color scheme. + * This is useful if you want to use class or data-* attributes to apply the color scheme. + */ + getColorSchemeSelector?: (colorScheme: string) => string; + /** + * A function to skip generating a CSS variable for a specific path or value. + */ + shouldSkipGeneratingVar?: (objectPathKeys: Array, value: string | number) => boolean; + components?: Partial< + Record< + string, + { + styleOverrides?: Record; + defaultProps: Record; + } + > + >; +} + +export interface Theme extends ThemeInput { + vars: Record; + generateCssVars: (colorScheme?: string) => { css: Record }; + unstable_sxConfig?: SxConfig; +} + +/** + * A utility to tell zero-runtime to generate CSS variables for the theme. + */ +export default function extendTheme(theme: T) { + const { cssVarPrefix, shouldSkipGeneratingVar, prefersColorScheme, ...otherTheme } = theme; + + if (theme.colorSchemes && !theme.defaultColorScheme) { + throw new Error('Zero: `defaultColorScheme` is required when `colorSchemes` is provided.'); + } + + const parserConfig = { + prefix: cssVarPrefix, + shouldSkipGeneratingVar, + }; + const { vars, generateCssVars } = prepareCssVars(otherTheme, parserConfig); + + return { + ...theme, + vars, + generateCssVars, + }; +} diff --git a/packages/zero-runtime/src/index.ts b/packages/zero-runtime/src/index.ts index 52c2a5e4bc993f..43336fac6e9f34 100644 --- a/packages/zero-runtime/src/index.ts +++ b/packages/zero-runtime/src/index.ts @@ -4,3 +4,5 @@ export { default as keyframes } from './keyframes'; export { generateAtomics, atomics } from './generateAtomics'; export { default as css } from './css'; export { default as createUseThemeProps } from './createUseThemeProps'; +export { default as extendTheme } from './extendTheme'; +export type { Theme, ThemeInput } from './extendTheme'; diff --git a/packages/zero-runtime/src/utils/generateCss.ts b/packages/zero-runtime/src/utils/generateCss.ts index d585e7443ecd1f..1e0dbdf2e3953e 100644 --- a/packages/zero-runtime/src/utils/generateCss.ts +++ b/packages/zero-runtime/src/utils/generateCss.ts @@ -1,29 +1,48 @@ import { serializeStyles } from '@emotion/serialize'; +import { Theme } from '../extendTheme'; -type BaseTheme = { - vars?: Record; - cssVarPrefix: string; - colorSchemes: Record; - generateCssVars: (colorScheme?: string) => { css: Record }; -}; - -export function generateTokenCss(theme: BaseTheme) { +export function generateTokenCss(theme: Theme) { // create stylesheet as object - const stylesheetObj: Record> = { - ':root': theme.generateCssVars().css, - }; - Object.entries(theme.colorSchemes).forEach(([key]) => { - stylesheetObj[ - `${key === 'light' ? ':root, ' : ''}[data-${theme.cssVarPrefix}-color-scheme="${key}"]` - ] = theme.generateCssVars(key).css; + const rootCss = theme.generateCssVars().css; + const stylesheetObj: Record> = {}; + if (Object.keys(rootCss).length) { + stylesheetObj[':root'] = rootCss; + } + Object.entries(theme.colorSchemes || {}).forEach(([key]) => { + const css = theme.generateCssVars(key).css; + if (Object.keys(css).length) { + if (theme.prefersColorScheme) { + if (theme.defaultColorScheme === key) { + stylesheetObj[':root'] = css; + } + if (theme.prefersColorScheme.light === key) { + stylesheetObj['@media (prefers-color-scheme: light)'] = { + ':root': css, + }; + } + if (theme.prefersColorScheme.dark === key) { + stylesheetObj['@media (prefers-color-scheme: dark)'] = { + ':root': css, + }; + } + } + if (theme.getColorSchemeSelector) { + if (theme.defaultColorScheme === key) { + stylesheetObj[`:root, ${theme.getColorSchemeSelector(key)}`] = css; + } else { + stylesheetObj[theme.getColorSchemeSelector(key)] = css; + } + } + } }); // use emotion to serialize the object to css string const { styles } = serializeStyles([stylesheetObj]); + console.log('styles', styles); return styles; } -export function generateThemeTokens(theme: BaseTheme) { +export function generateThemeTokens(theme: Theme) { if (!theme || typeof theme !== 'object') { return {}; } From dbd337676fc601882978c51481f8be4112be651e Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Fri, 2 Feb 2024 22:09:05 +0700 Subject: [PATCH 03/15] fix types --- .../zero-runtime/src/processors/styled.ts | 2 +- .../src/utils/cssFnValueToVariable.ts | 7 ++---- .../src/utils/cssFunctionTransformerPlugin.ts | 19 ++++++---------- packages/zero-runtime/tsconfig.json | 8 ++++++- packages/zero-unplugin/src/index.ts | 22 +++++++++---------- packages/zero-unplugin/tsconfig.build.json | 5 ++++- packages/zero-unplugin/tsconfig.json | 8 ++++++- packages/zero-vite-plugin/src/index.ts | 14 ++---------- packages/zero-vite-plugin/tsconfig.build.json | 5 ++++- packages/zero-vite-plugin/tsconfig.json | 13 ++++++++--- 10 files changed, 54 insertions(+), 49 deletions(-) diff --git a/packages/zero-runtime/src/processors/styled.ts b/packages/zero-runtime/src/processors/styled.ts index b59df0c9c8a6d4..41b2f982bfc6d3 100644 --- a/packages/zero-runtime/src/processors/styled.ts +++ b/packages/zero-runtime/src/processors/styled.ts @@ -382,7 +382,7 @@ export class StyledProcessor extends BaseProcessor { if (!value.name || !theme) { return; } - const componentData = (theme as Theme).components?.[value.name]; + const componentData = theme.components?.[value.name]; if (!componentData) { return; } diff --git a/packages/zero-runtime/src/utils/cssFnValueToVariable.ts b/packages/zero-runtime/src/utils/cssFnValueToVariable.ts index cee4a9d1263d55..f59793ba9ff649 100644 --- a/packages/zero-runtime/src/utils/cssFnValueToVariable.ts +++ b/packages/zero-runtime/src/utils/cssFnValueToVariable.ts @@ -5,20 +5,17 @@ import type { Expression } from '@linaria/tags'; import * as t from '@babel/types'; import { isUnitLess } from './isUnitLess'; import { cssFunctionTransformerPlugin } from './cssFunctionTransformerPlugin'; +import type { Theme } from '../extendTheme'; interface StyleObj { [key: string]: string | number | (() => void) | StyleObj; } export type PluginCustomOptions = { - /** - * To generate css variables like this `--{cssVariablesPrefix}-palette-primary-main` - */ - cssVariablesPrefix?: string; /** * Object to pass as parameter to the styled css callback functions. */ - themeArgs?: Record; + themeArgs?: { theme?: Theme }; }; type CssFnValueToVariableParams = { diff --git a/packages/zero-runtime/src/utils/cssFunctionTransformerPlugin.ts b/packages/zero-runtime/src/utils/cssFunctionTransformerPlugin.ts index 30ef433de1813f..b5d5d4b8db2d2a 100644 --- a/packages/zero-runtime/src/utils/cssFunctionTransformerPlugin.ts +++ b/packages/zero-runtime/src/utils/cssFunctionTransformerPlugin.ts @@ -1,10 +1,8 @@ import { declare } from '@babel/helper-plugin-utils'; -import defaultSxConfig from '@mui/system/styleFunctionSx/defaultSxConfig'; +import { unstable_defaultSxConfig as defaultSxConfig } from '@mui/system/styleFunctionSx'; import get from 'lodash/get'; import type { PluginCustomOptions } from './cssFnValueToVariable'; -type Theme = { [key: 'unstable_sxConfig' | string]: string | number | Theme }; - type BabelPluginOptions = { styleKey: string; options: PluginCustomOptions; @@ -24,16 +22,13 @@ type BabelPluginOptions = { const cssFunctionTransformerPlugin = declare((api, pluginOptions) => { const { types: t } = api; const { - options: { cssVariablesPrefix = 'mui', themeArgs: { theme } = {} }, + options: { themeArgs: { theme } = {} }, styleKey, } = pluginOptions; - const typedTheme = theme as Theme & { - vars?: Theme; - }; - const config = (typedTheme?.unstable_sxConfig ?? defaultSxConfig) as Theme; - const cssPropOptions = config[styleKey] as Theme; + const config = theme?.unstable_sxConfig ?? defaultSxConfig; + const cssPropOptions = config[styleKey]; const themeKey = cssPropOptions?.themeKey; - const finalPrefix = cssVariablesPrefix ? `${cssVariablesPrefix}-` : ''; + const finalPrefix = theme?.cssVarPrefix || ''; return { name: '@mui/zero-internal/cssFunctionTransformerPlugin', @@ -50,8 +45,8 @@ const cssFunctionTransformerPlugin = declare((api, pluginOpt } const propertyThemeKey = themeKey ?? val.split('.')[0]; const themeValue = - get(typedTheme, `${propertyThemeKey}.${val}`) ?? - (typedTheme.vars ? get(typedTheme.vars, `${propertyThemeKey}.${val}`) : undefined); + get(theme, `${propertyThemeKey}.${val}`) ?? + (theme?.vars ? get(theme.vars, `${propertyThemeKey}.${val}`) : undefined); if (!themeValue) { console.warn( `MUI: Value for key: ${val} does not exist in "theme.${propertyThemeKey}" or "theme.vars.${propertyThemeKey}"`, diff --git a/packages/zero-runtime/tsconfig.json b/packages/zero-runtime/tsconfig.json index 863e932e7ce5cc..1e4e9fefe33535 100644 --- a/packages/zero-runtime/tsconfig.json +++ b/packages/zero-runtime/tsconfig.json @@ -6,7 +6,13 @@ "lib": ["ES2017", "ES2021.String", "DOM"], "composite": true, "noEmit": false, - "resolveJsonModule": true + "resolveJsonModule": true, + "paths": { + "@mui/system": ["./packages/mui-system/src"], + "@mui/system/*": ["./packages/mui-system/src/*"], + "@mui/utils": ["./packages/mui-utils/src"], + "@mui/utils/*": ["./packages/mui-utils/src/*"] + } }, "include": ["src/**/*.ts"], "exclude": ["./tsup.config.ts"] diff --git a/packages/zero-unplugin/src/index.ts b/packages/zero-unplugin/src/index.ts index fe99d24e29e0c1..63da5ddfbefb02 100644 --- a/packages/zero-unplugin/src/index.ts +++ b/packages/zero-unplugin/src/index.ts @@ -13,6 +13,7 @@ import { generateTokenCss, generateThemeTokens, } from '@mui/zero-runtime/utils'; +import type { Theme as BaseTheme } from '@mui/zero-runtime'; type NextMeta = { type: 'next'; @@ -32,14 +33,8 @@ type WebpackMeta = { type Meta = NextMeta | ViteMeta | WebpackMeta; -type BaseTheme = { - cssVarPrefix: string; - colorSchemes: Record; - generateCssVars: (colorScheme?: string) => { css: Record }; -}; - export type PluginOptions = { - theme: Theme; + theme?: Theme; transformLibraries?: string[]; preprocessor?: Preprocessor; debug?: boolean; @@ -159,7 +154,6 @@ export const plugin = createUnplugin((options) => { themeArgs: { theme, }, - cssVariablesPrefix: theme.cssVarPrefix, overrideContext(context: Record, filename: string) { if (overrideContext) { return overrideContext(context, filename); @@ -274,10 +268,12 @@ export const plugin = createUnplugin((options) => { }, transform(_code, id) { if (id.endsWith('styles.css')) { - return generateTokenCss(theme); + return theme ? generateTokenCss(theme) : ''; } if (id.includes('zero-runtime/theme')) { - return `export default ${JSON.stringify(generateThemeTokens(theme))};`; + return `export default ${ + theme ? JSON.stringify(generateThemeTokens(theme)) : '{}' + };`; } return null; }, @@ -297,10 +293,12 @@ export const plugin = createUnplugin((options) => { }, load(id) { if (id === VIRTUAL_CSS_FILE) { - return generateTokenCss(theme); + return theme ? generateTokenCss(theme) : ''; } if (id === VIRTUAL_THEME_FILE) { - return `export default ${JSON.stringify(generateThemeTokens(theme))};`; + return `export default ${ + theme ? JSON.stringify(generateThemeTokens(theme)) : '{}' + };`; } return null; }, diff --git a/packages/zero-unplugin/tsconfig.build.json b/packages/zero-unplugin/tsconfig.build.json index 80b6a0a8461245..9bb90e12c7f860 100644 --- a/packages/zero-unplugin/tsconfig.build.json +++ b/packages/zero-unplugin/tsconfig.build.json @@ -1,6 +1,9 @@ { "extends": "./tsconfig.json", "compilerOptions": { - "composite": false + "composite": false, + "paths": { + "@babel/core": ["./node_modules/@babel/core"] + } } } diff --git a/packages/zero-unplugin/tsconfig.json b/packages/zero-unplugin/tsconfig.json index 16edb79b6bbcfc..b0083e731e2538 100644 --- a/packages/zero-unplugin/tsconfig.json +++ b/packages/zero-unplugin/tsconfig.json @@ -4,7 +4,13 @@ "resolveJsonModule": true, "target": "ES2022", "paths": { - "@babel/core": ["./node_modules/@babel/core"] + "@babel/core": ["./node_modules/@babel/core"], + "@mui/system": ["./packages/mui-system/src"], + "@mui/system/*": ["./packages/mui-system/src/*"], + "@mui/utils": ["./packages/mui-utils/src"], + "@mui/utils/*": ["./packages/mui-utils/src/*"], + "@mui/zero-runtime": ["./packages/zero-runtime/src"], + "@mui/zero-runtime/*": ["./packages/zero-runtime/src/*"] } }, "include": ["src/**/*.ts"], diff --git a/packages/zero-vite-plugin/src/index.ts b/packages/zero-vite-plugin/src/index.ts index 03abb3f5c6f549..f494274b65a4d4 100644 --- a/packages/zero-vite-plugin/src/index.ts +++ b/packages/zero-vite-plugin/src/index.ts @@ -4,24 +4,15 @@ import { generateTokenCss, generateThemeTokens, } from '@mui/zero-runtime/utils'; +import type { Theme } from '@mui/zero-runtime'; import { transformAsync } from '@babel/core'; import baseZeroVitePlugin, { type VitePluginOptions } from './zero-vite-plugin'; -type BaseTheme = { - cssVarPrefix: string; - colorSchemes: Record; - generateCssVars: (colorScheme?: string) => { css: Record }; -}; - export interface ZeroVitePluginOptions extends VitePluginOptions { /** * The theme object that you want to be passed to the `styled` function */ - theme: BaseTheme; - /** - * Prefix string to use in the generated css variables. - */ - cssVariablesPrefix?: string; + theme: Theme; /** * Whether the css variables for the default theme should target the :root selector or not. * @default true @@ -112,7 +103,6 @@ export function zeroVitePlugin(options: ZeroVitePluginOptions) { } const zeroPlugin = baseZeroVitePlugin({ - cssVariablesPrefix: theme.cssVarPrefix, themeArgs: { theme, }, diff --git a/packages/zero-vite-plugin/tsconfig.build.json b/packages/zero-vite-plugin/tsconfig.build.json index 80b6a0a8461245..9bb90e12c7f860 100644 --- a/packages/zero-vite-plugin/tsconfig.build.json +++ b/packages/zero-vite-plugin/tsconfig.build.json @@ -1,6 +1,9 @@ { "extends": "./tsconfig.json", "compilerOptions": { - "composite": false + "composite": false, + "paths": { + "@babel/core": ["./node_modules/@babel/core"] + } } } diff --git a/packages/zero-vite-plugin/tsconfig.json b/packages/zero-vite-plugin/tsconfig.json index 819ce7d6a1f66a..72c0ce02c10646 100644 --- a/packages/zero-vite-plugin/tsconfig.json +++ b/packages/zero-vite-plugin/tsconfig.json @@ -1,10 +1,17 @@ { "extends": "../../tsconfig.json", - "include": ["src/**/*"], "compilerOptions": { "target": "ES2022", "paths": { - "@babel/core": ["./node_modules/@babel/core"] + "@babel/core": ["./node_modules/@babel/core"], + "@mui/system": ["./packages/mui-system/src"], + "@mui/system/*": ["./packages/mui-system/src/*"], + "@mui/utils": ["./packages/mui-utils/src"], + "@mui/utils/*": ["./packages/mui-utils/src/*"], + "@mui/zero-runtime": ["./packages/zero-runtime/src"], + "@mui/zero-runtime/*": ["./packages/zero-runtime/src/*"] } - } + }, + "include": ["src/**/*"], + "exclude": ["./tsup.config.ts"] } From 28c6c01ece004505023a266c6717106c95bf6d05 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Fri, 2 Feb 2024 22:09:11 +0700 Subject: [PATCH 04/15] add readme --- packages/zero-runtime/README.md | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/packages/zero-runtime/README.md b/packages/zero-runtime/README.md index 8c842f6375ad4a..91ae9bfc3e9f6f 100644 --- a/packages/zero-runtime/README.md +++ b/packages/zero-runtime/README.md @@ -430,6 +430,25 @@ In the above example, `light` (default) and `dark` color schemes are defined. Ne } ``` +#### CSS variables prefix + +You can add a prefix to the generated CSS variables by providing a `cssVarPrefix` option to the `extendTheme` utility: + +```jsx +extendTheme({ + cssVarPrefix: 'zero', +}); +``` + +The generated CSS variables will have the `zero` prefix: + +```css +:root { + --zero-colors-background: #f9f9f9; + --zero-colors-foreground: #121212; +} +``` + #### Mutliple themes > ⏳ Currently, zero-runtime only supports a single theme. From 2dff8fe36c88c32fbfdd53883e1223b5a0c06f22 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Mon, 5 Feb 2024 15:26:22 +0700 Subject: [PATCH 05/15] fix all edge cases --- apps/zero-runtime-next-app/build-log/Badge.js | 417 ++++++++++++++++++ apps/zero-runtime-next-app/build-log/page.tsx | 227 ++++++++++ apps/zero-runtime-next-app/next.config.js | 87 +++- .../zero-runtime-next-app/src/app/globals.css | 72 --- apps/zero-runtime-next-app/src/app/page.tsx | 28 +- apps/zero-runtime-next-app/src/augment.d.ts | 38 +- .../mui-system/src/cssVars/prepareCssVars.ts | 18 +- packages/zero-runtime/src/extendTheme.ts | 145 +++++- packages/zero-runtime/src/index.ts | 2 +- .../zero-runtime/src/utils/generateCss.ts | 51 +-- 10 files changed, 928 insertions(+), 157 deletions(-) create mode 100644 apps/zero-runtime-next-app/build-log/Badge.js create mode 100644 apps/zero-runtime-next-app/build-log/page.tsx diff --git a/apps/zero-runtime-next-app/build-log/Badge.js b/apps/zero-runtime-next-app/build-log/Badge.js new file mode 100644 index 00000000000000..39b4f39f455c4b --- /dev/null +++ b/apps/zero-runtime-next-app/build-log/Badge.js @@ -0,0 +1,417 @@ +import "/Users/siriwatknp/Personal-Repos/material-ui/packages/zero-next-plugin/zero-virtual.css?%7B%22filename%22%3A%2250f7n.zero.css%22%2C%22source%22%3A%22.BadgeRoot_bdxyzxj%7Bposition%3Arelative%3Bdisplay%3Ainline-flex%3Bvertical-align%3Amiddle%3Bflex-shrink%3A0%3B%7D%5Cn.BadgeBadge_b14y6z35%7Bdisplay%3Aflex%3Bflex-direction%3Arow%3Bflex-wrap%3Awrap%3Bjustify-content%3Acenter%3Balign-content%3Acenter%3Balign-items%3Acenter%3Bposition%3Aabsolute%3Bbox-sizing%3Aborder-box%3Bfont-family%3A%5C%22Roboto%5C%22%2C%5C%22Helvetica%5C%22%2C%5C%22Arial%5C%22%2Csans-serif%3Bfont-weight%3A500%3Bfont-size%3A0.75rem%3Bmin-width%3A20px%3Bline-height%3A1%3Bpadding%3A0%206px%3Bheight%3A20px%3Bborder-radius%3A10px%3Bz-index%3A1%3Btransition%3Atransform%20225ms%20cubic-bezier(0.4%2C%200%2C%200.2%2C%201)%200ms%3B%7D%5Cn.BadgeBadge_b14y6z35-variant%7Bbackground-color%3Avar(--app-palette-primary-main%2C%20%231976d2)%3Bcolor%3Avar(--app-palette-primary-contrastText%2C%20%23fff)%3B%7D%5Cn.BadgeBadge_b14y6z35-variant-1%7Bbackground-color%3Avar(--app-palette-secondary-main%2C%20%239c27b0)%3Bcolor%3Avar(--app-palette-secondary-contrastText%2C%20%23fff)%3B%7D%5Cn.BadgeBadge_b14y6z35-variant-2%7Bbackground-color%3Avar(--app-palette-error-main%2C%20%23d32f2f)%3Bcolor%3Avar(--app-palette-error-contrastText%2C%20%23fff)%3B%7D%5Cn.BadgeBadge_b14y6z35-variant-3%7Bbackground-color%3Avar(--app-palette-warning-main%2C%20%23ed6c02)%3Bcolor%3Avar(--app-palette-warning-contrastText%2C%20%23fff)%3B%7D%5Cn.BadgeBadge_b14y6z35-variant-4%7Bbackground-color%3Avar(--app-palette-info-main%2C%20%230288d1)%3Bcolor%3Avar(--app-palette-info-contrastText%2C%20%23fff)%3B%7D%5Cn.BadgeBadge_b14y6z35-variant-5%7Bbackground-color%3Avar(--app-palette-success-main%2C%20%232e7d32)%3Bcolor%3Avar(--app-palette-success-contrastText%2C%20%23fff)%3B%7D%5Cn.BadgeBadge_b14y6z35-variant-6%7Bborder-radius%3A4px%3Bheight%3A8px%3Bmin-width%3A8px%3Bpadding%3A0%3B%7D%5Cn.BadgeBadge_b14y6z35-variant-7%7Btop%3A0%3Bright%3A0%3Btransform%3Ascale(1)%20translate(50%25%2C%20-50%25)%3Btransform-origin%3A100%25%200%25%3B%7D.BadgeBadge_b14y6z35-variant-7.MuiBadge-invisible%7Btransform%3Ascale(0)%20translate(50%25%2C%20-50%25)%3B%7D%5Cn.BadgeBadge_b14y6z35-variant-8%7Bbottom%3A0%3Bright%3A0%3Btransform%3Ascale(1)%20translate(50%25%2C%2050%25)%3Btransform-origin%3A100%25%20100%25%3B%7D.BadgeBadge_b14y6z35-variant-8.MuiBadge-invisible%7Btransform%3Ascale(0)%20translate(50%25%2C%2050%25)%3B%7D%5Cn.BadgeBadge_b14y6z35-variant-9%7Btop%3A0%3Bleft%3A0%3Btransform%3Ascale(1)%20translate(-50%25%2C%20-50%25)%3Btransform-origin%3A0%25%200%25%3B%7D.BadgeBadge_b14y6z35-variant-9.MuiBadge-invisible%7Btransform%3Ascale(0)%20translate(-50%25%2C%20-50%25)%3B%7D%5Cn.BadgeBadge_b14y6z35-variant-10%7Bbottom%3A0%3Bleft%3A0%3Btransform%3Ascale(1)%20translate(-50%25%2C%2050%25)%3Btransform-origin%3A0%25%20100%25%3B%7D.BadgeBadge_b14y6z35-variant-10.MuiBadge-invisible%7Btransform%3Ascale(0)%20translate(-50%25%2C%2050%25)%3B%7D%5Cn.BadgeBadge_b14y6z35-variant-11%7Btop%3A14%25%3Bright%3A14%25%3Btransform%3Ascale(1)%20translate(50%25%2C%20-50%25)%3Btransform-origin%3A100%25%200%25%3B%7D.BadgeBadge_b14y6z35-variant-11.MuiBadge-invisible%7Btransform%3Ascale(0)%20translate(50%25%2C%20-50%25)%3B%7D%5Cn.BadgeBadge_b14y6z35-variant-12%7Bbottom%3A14%25%3Bright%3A14%25%3Btransform%3Ascale(1)%20translate(50%25%2C%2050%25)%3Btransform-origin%3A100%25%20100%25%3B%7D.BadgeBadge_b14y6z35-variant-12.MuiBadge-invisible%7Btransform%3Ascale(0)%20translate(50%25%2C%2050%25)%3B%7D%5Cn.BadgeBadge_b14y6z35-variant-13%7Btop%3A14%25%3Bleft%3A14%25%3Btransform%3Ascale(1)%20translate(-50%25%2C%20-50%25)%3Btransform-origin%3A0%25%200%25%3B%7D.BadgeBadge_b14y6z35-variant-13.MuiBadge-invisible%7Btransform%3Ascale(0)%20translate(-50%25%2C%20-50%25)%3B%7D%5Cn.BadgeBadge_b14y6z35-variant-14%7Bbottom%3A14%25%3Bleft%3A14%25%3Btransform%3Ascale(1)%20translate(-50%25%2C%2050%25)%3Btransform-origin%3A0%25%20100%25%3B%7D.BadgeBadge_b14y6z35-variant-14.MuiBadge-invisible%7Btransform%3Ascale(0)%20translate(-50%25%2C%2050%25)%3B%7D%5Cn.BadgeBadge_b14y6z35-variant-15%7Btransition%3Atransform%20195ms%20cubic-bezier(0.4%2C%200%2C%200.2%2C%201)%200ms%3B%7D%5Cn%2F*%23%20sourceMappingURL%3Ddata%3Aapplication%2Fjson%3Bbase64%2CeyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9Vc2Vycy9zaXJpd2F0a25wL1BlcnNvbmFsLVJlcG9zL21hdGVyaWFsLXVpL3BhY2thZ2VzL211aS1tYXRlcmlhbC9idWlsZC9CYWRnZS9CYWRnZS5qcyJdLCJuYW1lcyI6WyIuQmFkZ2VSb290X2JkeHl6eGoiLCIuQmFkZ2VCYWRnZV9iMTR5NnozNSIsIi5CYWRnZUJhZGdlX2IxNHk2ejM1LXZhcmlhbnQiLCIuQmFkZ2VCYWRnZV9iMTR5NnozNS12YXJpYW50LTEiLCIuQmFkZ2VCYWRnZV9iMTR5NnozNS12YXJpYW50LTIiLCIuQmFkZ2VCYWRnZV9iMTR5NnozNS12YXJpYW50LTMiLCIuQmFkZ2VCYWRnZV9iMTR5NnozNS12YXJpYW50LTQiLCIuQmFkZ2VCYWRnZV9iMTR5NnozNS12YXJpYW50LTUiLCIuQmFkZ2VCYWRnZV9iMTR5NnozNS12YXJpYW50LTYiLCIuQmFkZ2VCYWRnZV9iMTR5NnozNS12YXJpYW50LTciLCIuQmFkZ2VCYWRnZV9iMTR5NnozNS12YXJpYW50LTgiLCIuQmFkZ2VCYWRnZV9iMTR5NnozNS12YXJpYW50LTkiLCIuQmFkZ2VCYWRnZV9iMTR5NnozNS12YXJpYW50LTEwIiwiLkJhZGdlQmFkZ2VfYjE0eTZ6MzUtdmFyaWFudC0xMSIsIi5CYWRnZUJhZGdlX2IxNHk2ejM1LXZhcmlhbnQtMTIiLCIuQmFkZ2VCYWRnZV9iMTR5NnozNS12YXJpYW50LTEzIiwiLkJhZGdlQmFkZ2VfYjE0eTZ6MzUtdmFyaWFudC0xNCIsIi5CYWRnZUJhZGdlX2IxNHk2ejM1LXZhcmlhbnQtMTUiXSwibWFwcGluZ3MiOiJBQWtDa0JBO0FBV0NDO0FBQUFDO0FBQUFDO0FBQUFDO0FBQUFDO0FBQUFDO0FBQUFDO0FBQUFDO0FBQUFDO0FBQUFDO0FBQUFDO0FBQUFDO0FBQUFDO0FBQUFDO0FBQUFDO0FBQUFDO0FBQUFDIiwiZmlsZSI6Ii9Vc2Vycy9zaXJpd2F0a25wL1BlcnNvbmFsLVJlcG9zL21hdGVyaWFsLXVpL3BhY2thZ2VzL211aS1tYXRlcmlhbC9idWlsZC9CYWRnZS9CYWRnZS5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyIvKiBfX25leHRfaW50ZXJuYWxfY2xpZW50X2VudHJ5X2RvX25vdF91c2VfXyBkZWZhdWx0IGF1dG8gKi92YXIgX3MgPSAkUmVmcmVzaFNpZyQoKTtcbmltcG9ydCBfZXh0ZW5kcyBmcm9tIFwiQGJhYmVsL3J1bnRpbWUvaGVscGVycy9lc20vZXh0ZW5kc1wiO1xuaW1wb3J0IF9vYmplY3RXaXRob3V0UHJvcGVydGllc0xvb3NlIGZyb20gXCJAYmFiZWwvcnVudGltZS9oZWxwZXJzL2VzbS9vYmplY3RXaXRob3V0UHJvcGVydGllc0xvb3NlXCI7XG5jb25zdCBfZXhjbHVkZWQgPSBbXCJhbmNob3JPcmlnaW5cIiwgXCJjbGFzc05hbWVcIiwgXCJjbGFzc2VzXCIsIFwiY29tcG9uZW50XCIsIFwiY29tcG9uZW50c1wiLCBcImNvbXBvbmVudHNQcm9wc1wiLCBcImNoaWxkcmVuXCIsIFwib3ZlcmxhcFwiLCBcImNvbG9yXCIsIFwiaW52aXNpYmxlXCIsIFwibWF4XCIsIFwiYmFkZ2VDb250ZW50XCIsIFwic2xvdHNcIiwgXCJzbG90UHJvcHNcIiwgXCJzaG93WmVyb1wiLCBcInZhcmlhbnRcIl07XG5pbXBvcnQgKiBhcyBSZWFjdCBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCBQcm9wVHlwZXMgZnJvbSBcInByb3AtdHlwZXNcIjtcbmltcG9ydCBjbHN4IGZyb20gXCJjbHN4XCI7XG5pbXBvcnQgeyB1c2VQcmV2aW91c1Byb3BzIH0gZnJvbSBcIkBtdWkvdXRpbHNcIjtcbmltcG9ydCB7IHVuc3RhYmxlX2NvbXBvc2VDbGFzc2VzIGFzIGNvbXBvc2VDbGFzc2VzIH0gZnJvbSBcIkBtdWkvYmFzZS9jb21wb3NlQ2xhc3Nlc1wiO1xuaW1wb3J0IHsgdXNlQmFkZ2UgfSBmcm9tIFwiQG11aS9iYXNlL3VzZUJhZGdlXCI7XG5pbXBvcnQgeyB1c2VTbG90UHJvcHMgfSBmcm9tIFwiQG11aS9iYXNlXCI7XG5pbXBvcnQgeyBzdHlsZWQsIGNyZWF0ZVVzZVRoZW1lUHJvcHMgfSBmcm9tIFwiLi4vemVyby1zdHlsZWRcIjtcbmltcG9ydCBjYXBpdGFsaXplIGZyb20gXCIuLi91dGlscy9jYXBpdGFsaXplXCI7XG5pbXBvcnQgYmFkZ2VDbGFzc2VzLCB7IGdldEJhZGdlVXRpbGl0eUNsYXNzIH0gZnJvbSBcIi4vYmFkZ2VDbGFzc2VzXCI7XG5pbXBvcnQgeyBqc3ggYXMgX2pzeCB9IGZyb20gXCJyZWFjdC9qc3gtcnVudGltZVwiO1xuaW1wb3J0IHsganN4cyBhcyBfanN4cyB9IGZyb20gXCJyZWFjdC9qc3gtcnVudGltZVwiO1xuY29uc3QgUkFESVVTX1NUQU5EQVJEID0gMTA7XG5jb25zdCBSQURJVVNfRE9UID0gNDtcbmNvbnN0IHVzZVRoZW1lUHJvcHMgPSBjcmVhdGVVc2VUaGVtZVByb3BzKFwiTXVpQmFkZ2VcIik7XG5jb25zdCB1c2VVdGlsaXR5Q2xhc3NlcyA9IG93bmVyU3RhdGUgPT4ge1xuICBjb25zdCB7XG4gICAgY29sb3IsXG4gICAgYW5jaG9yT3JpZ2luLFxuICAgIGludmlzaWJsZSxcbiAgICBvdmVybGFwLFxuICAgIHZhcmlhbnQsXG4gICAgY2xhc3NlcyA9IHt9XG4gIH0gPSBvd25lclN0YXRlO1xuICBjb25zdCBzbG90cyA9IHtcbiAgICByb290OiBbXCJyb290XCJdLFxuICAgIGJhZGdlOiBbXCJiYWRnZVwiLCB2YXJpYW50LCBpbnZpc2libGUgJiYgXCJpbnZpc2libGVcIiwgYGFuY2hvck9yaWdpbiR7Y2FwaXRhbGl6ZShhbmNob3JPcmlnaW4udmVydGljYWwpfSR7Y2FwaXRhbGl6ZShhbmNob3JPcmlnaW4uaG9yaXpvbnRhbCl9YCwgYGFuY2hvck9yaWdpbiR7Y2FwaXRhbGl6ZShhbmNob3JPcmlnaW4udmVydGljYWwpfSR7Y2FwaXRhbGl6ZShhbmNob3JPcmlnaW4uaG9yaXpvbnRhbCl9JHtjYXBpdGFsaXplKG92ZXJsYXApfWAsIGBvdmVybGFwJHtjYXBpdGFsaXplKG92ZXJsYXApfWAsIGNvbG9yICE9PSBcImRlZmF1bHRcIiAmJiBgY29sb3Ike2NhcGl0YWxpemUoY29sb3IpfWBdXG4gIH07XG4gIHJldHVybiBjb21wb3NlQ2xhc3NlcyhzbG90cywgZ2V0QmFkZ2VVdGlsaXR5Q2xhc3MsIGNsYXNzZXMpO1xufTtcbmNvbnN0IEJhZGdlUm9vdCA9IHN0eWxlZChcInNwYW5cIiwge1xuICBuYW1lOiBcIk11aUJhZGdlXCIsXG4gIHNsb3Q6IFwiUm9vdFwiLFxuICBvdmVycmlkZXNSZXNvbHZlcjogKHByb3BzLCBzdHlsZXMpID0%2BIHN0eWxlcy5yb290XG59KSh7XG4gIHBvc2l0aW9uOiBcInJlbGF0aXZlXCIsXG4gIGRpc3BsYXk6IFwiaW5saW5lLWZsZXhcIixcbiAgLy8gRm9yIGNvcnJlY3QgYWxpZ25tZW50IHdpdGggdGhlIHRleHQuXG4gIHZlcnRpY2FsQWxpZ246IFwibWlkZGxlXCIsXG4gIGZsZXhTaHJpbms6IDBcbn0pO1xuY29uc3QgQmFkZ2VCYWRnZSA9IHN0eWxlZChcInNwYW5cIiwge1xuICBuYW1lOiBcIk11aUJhZGdlXCIsXG4gIHNsb3Q6IFwiQmFkZ2VcIixcbiAgb3ZlcnJpZGVzUmVzb2x2ZXI6IChwcm9wcywgc3R5bGVzKSA9PiB7XG4gICAgY29uc3Qge1xuICAgICAgb3duZXJTdGF0ZVxuICAgIH0gPSBwcm9wcztcbiAgICByZXR1cm4gW3N0eWxlcy5iYWRnZSwgc3R5bGVzW293bmVyU3RhdGUudmFyaWFudF0sIHN0eWxlc1tgYW5jaG9yT3JpZ2luJHtjYXBpdGFsaXplKG93bmVyU3RhdGUuYW5jaG9yT3JpZ2luLnZlcnRpY2FsKX0ke2NhcGl0YWxpemUob3duZXJTdGF0ZS5hbmNob3JPcmlnaW4uaG9yaXpvbnRhbCl9JHtjYXBpdGFsaXplKG93bmVyU3RhdGUub3ZlcmxhcCl9YF0sIG93bmVyU3RhdGUuY29sb3IgIT09IFwiZGVmYXVsdFwiICYmIHN0eWxlc1tgY29sb3Ike2NhcGl0YWxpemUob3duZXJTdGF0ZS5jb2xvcil9YF0sIG93bmVyU3RhdGUuaW52aXNpYmxlICYmIHN0eWxlcy5pbnZpc2libGVdO1xuICB9XG59KSgoe1xuICB0aGVtZVxufSkgPT4ge1xuICB2YXIgX3RoZW1lJHZhcnM7XG4gIHJldHVybiB7XG4gICAgZGlzcGxheTogXCJmbGV4XCIsXG4gICAgZmxleERpcmVjdGlvbjogXCJyb3dcIixcbiAgICBmbGV4V3JhcDogXCJ3cmFwXCIsXG4gICAganVzdGlmeUNvbnRlbnQ6IFwiY2VudGVyXCIsXG4gICAgYWxpZ25Db250ZW50OiBcImNlbnRlclwiLFxuICAgIGFsaWduSXRlbXM6IFwiY2VudGVyXCIsXG4gICAgcG9zaXRpb246IFwiYWJzb2x1dGVcIixcbiAgICBib3hTaXppbmc6IFwiYm9yZGVyLWJveFwiLFxuICAgIGZvbnRGYW1pbHk6IHRoZW1lLnR5cG9ncmFwaHkuZm9udEZhbWlseSxcbiAgICBmb250V2VpZ2h0OiB0aGVtZS50eXBvZ3JhcGh5LmZvbnRXZWlnaHRNZWRpdW0sXG4gICAgZm9udFNpemU6IHRoZW1lLnR5cG9ncmFwaHkucHhUb1JlbSgxMiksXG4gICAgbWluV2lkdGg6IFJBRElVU19TVEFOREFSRCAqIDIsXG4gICAgbGluZUhlaWdodDogMSxcbiAgICBwYWRkaW5nOiBcIjAgNnB4XCIsXG4gICAgaGVpZ2h0OiBSQURJVVNfU1RBTkRBUkQgKiAyLFxuICAgIGJvcmRlclJhZGl1czogUkFESVVTX1NUQU5EQVJELFxuICAgIHpJbmRleDogMSxcbiAgICAvLyBSZW5kZXIgdGhlIGJhZGdlIG9uIHRvcCBvZiBwb3RlbnRpYWwgcmlwcGxlcy5cbiAgICB0cmFuc2l0aW9uOiB0aGVtZS50cmFuc2l0aW9ucy5jcmVhdGUoXCJ0cmFuc2Zvcm1cIiwge1xuICAgICAgZWFzaW5nOiB0aGVtZS50cmFuc2l0aW9ucy5lYXNpbmcuZWFzZUluT3V0LFxuICAgICAgZHVyYXRpb246IHRoZW1lLnRyYW5zaXRpb25zLmR1cmF0aW9uLmVudGVyaW5nU2NyZWVuXG4gICAgfSksXG4gICAgdmFyaWFudHM6IFsuLi5PYmplY3Qua2V5cygoKF90aGVtZSR2YXJzID0gdGhlbWUudmFycykgIT0gbnVsbCA%2FIF90aGVtZSR2YXJzIDogdGhlbWUpLnBhbGV0dGUpLmZpbHRlcihrZXkgPT4ge1xuICAgICAgdmFyIF90aGVtZSR2YXJzMiwgX3RoZW1lJHZhcnMzO1xuICAgICAgcmV0dXJuICgoX3RoZW1lJHZhcnMyID0gdGhlbWUudmFycykgIT0gbnVsbCA%2FIF90aGVtZSR2YXJzMiA6IHRoZW1lKS5wYWxldHRlW2tleV0ubWFpbiAmJiAoKF90aGVtZSR2YXJzMyA9IHRoZW1lLnZhcnMpICE9IG51bGwgPyBfdGhlbWUkdmFyczMgOiB0aGVtZSkucGFsZXR0ZVtrZXldLmNvbnRyYXN0VGV4dDtcbiAgICB9KS5tYXAoY29sb3IgPT4gKHtcbiAgICAgIHByb3BzOiB7XG4gICAgICAgIGNvbG9yXG4gICAgICB9LFxuICAgICAgc3R5bGU6IHtcbiAgICAgICAgYmFja2dyb3VuZENvbG9yOiAodGhlbWUudmFycyB8fCB0aGVtZSkucGFsZXR0ZVtjb2xvcl0ubWFpbixcbiAgICAgICAgY29sb3I6ICh0aGVtZS52YXJzIHx8IHRoZW1lKS5wYWxldHRlW2NvbG9yXS5jb250cmFzdFRleHRcbiAgICAgIH1cbiAgICB9KSksIHtcbiAgICAgIHByb3BzOiB7XG4gICAgICAgIHZhcmlhbnQ6IFwiZG90XCJcbiAgICAgIH0sXG4gICAgICBzdHlsZToge1xuICAgICAgICBib3JkZXJSYWRpdXM6IFJBRElVU19ET1QsXG4gICAgICAgIGhlaWdodDogUkFESVVTX0RPVCAqIDIsXG4gICAgICAgIG1pbldpZHRoOiBSQURJVVNfRE9UICogMixcbiAgICAgICAgcGFkZGluZzogMFxuICAgICAgfVxuICAgIH0sIHtcbiAgICAgIHByb3BzOiAoe1xuICAgICAgICBvd25lclN0YXRlXG4gICAgICB9KSA9PiBvd25lclN0YXRlLmFuY2hvck9yaWdpbi52ZXJ0aWNhbCA9PT0gXCJ0b3BcIiAmJiBvd25lclN0YXRlLmFuY2hvck9yaWdpbi5ob3Jpem9udGFsID09PSBcInJpZ2h0XCIgJiYgb3duZXJTdGF0ZS5vdmVybGFwID09PSBcInJlY3Rhbmd1bGFyXCIsXG4gICAgICBzdHlsZToge1xuICAgICAgICB0b3A6IDAsXG4gICAgICAgIHJpZ2h0OiAwLFxuICAgICAgICB0cmFuc2Zvcm06IFwic2NhbGUoMSkgdHJhbnNsYXRlKDUwJSwgLTUwJSlcIixcbiAgICAgICAgdHJhbnNmb3JtT3JpZ2luOiBcIjEwMCUgMCVcIixcbiAgICAgICAgW2AmLiR7YmFkZ2VDbGFzc2VzLmludmlzaWJsZX1gXToge1xuICAgICAgICAgIHRyYW5zZm9ybTogXCJzY2FsZSgwKSB0cmFuc2xhdGUoNTAlLCAtNTAlKVwiXG4gICAgICAgIH1cbiAgICAgIH1cbiAgICB9LCB7XG4gICAgICBwcm9wczogKHtcbiAgICAgICAgb3duZXJTdGF0ZVxuICAgICAgfSkgPT4gb3duZXJTdGF0ZS5hbmNob3JPcmlnaW4udmVydGljYWwgPT09IFwiYm90dG9tXCIgJiYgb3duZXJTdGF0ZS5hbmNob3JPcmlnaW4uaG9yaXpvbnRhbCA9PT0gXCJyaWdodFwiICYmIG93bmVyU3RhdGUub3ZlcmxhcCA9PT0gXCJyZWN0YW5ndWxhclwiLFxuICAgICAgc3R5bGU6IHtcbiAgICAgICAgYm90dG9tOiAwLFxuICAgICAgICByaWdodDogMCxcbiAgICAgICAgdHJhbnNmb3JtOiBcInNjYWxlKDEpIHRyYW5zbGF0ZSg1MCUsIDUwJSlcIixcbiAgICAgICAgdHJhbnNmb3JtT3JpZ2luOiBcIjEwMCUgMTAwJVwiLFxuICAgICAgICBbYCYuJHtiYWRnZUNsYXNzZXMuaW52aXNpYmxlfWBdOiB7XG4gICAgICAgICAgdHJhbnNmb3JtOiBcInNjYWxlKDApIHRyYW5zbGF0ZSg1MCUsIDUwJSlcIlxuICAgICAgICB9XG4gICAgICB9XG4gICAgfSwge1xuICAgICAgcHJvcHM6ICh7XG4gICAgICAgIG93bmVyU3RhdGVcbiAgICAgIH0pID0%2BIG93bmVyU3RhdGUuYW5jaG9yT3JpZ2luLnZlcnRpY2FsID09PSBcInRvcFwiICYmIG93bmVyU3RhdGUuYW5jaG9yT3JpZ2luLmhvcml6b250YWwgPT09IFwibGVmdFwiICYmIG93bmVyU3RhdGUub3ZlcmxhcCA9PT0gXCJyZWN0YW5ndWxhclwiLFxuICAgICAgc3R5bGU6IHtcbiAgICAgICAgdG9wOiAwLFxuICAgICAgICBsZWZ0OiAwLFxuICAgICAgICB0cmFuc2Zvcm06IFwic2NhbGUoMSkgdHJhbnNsYXRlKC01MCUsIC01MCUpXCIsXG4gICAgICAgIHRyYW5zZm9ybU9yaWdpbjogXCIwJSAwJVwiLFxuICAgICAgICBbYCYuJHtiYWRnZUNsYXNzZXMuaW52aXNpYmxlfWBdOiB7XG4gICAgICAgICAgdHJhbnNmb3JtOiBcInNjYWxlKDApIHRyYW5zbGF0ZSgtNTAlLCAtNTAlKVwiXG4gICAgICAgIH1cbiAgICAgIH1cbiAgICB9LCB7XG4gICAgICBwcm9wczogKHtcbiAgICAgICAgb3duZXJTdGF0ZVxuICAgICAgfSkgPT4gb3duZXJTdGF0ZS5hbmNob3JPcmlnaW4udmVydGljYWwgPT09IFwiYm90dG9tXCIgJiYgb3duZXJTdGF0ZS5hbmNob3JPcmlnaW4uaG9yaXpvbnRhbCA9PT0gXCJsZWZ0XCIgJiYgb3duZXJTdGF0ZS5vdmVybGFwID09PSBcInJlY3Rhbmd1bGFyXCIsXG4gICAgICBzdHlsZToge1xuICAgICAgICBib3R0b206IDAsXG4gICAgICAgIGxlZnQ6IDAsXG4gICAgICAgIHRyYW5zZm9ybTogXCJzY2FsZSgxKSB0cmFuc2xhdGUoLTUwJSwgNTAlKVwiLFxuICAgICAgICB0cmFuc2Zvcm1PcmlnaW46IFwiMCUgMTAwJVwiLFxuICAgICAgICBbYCYuJHtiYWRnZUNsYXNzZXMuaW52aXNpYmxlfWBdOiB7XG4gICAgICAgICAgdHJhbnNmb3JtOiBcInNjYWxlKDApIHRyYW5zbGF0ZSgtNTAlLCA1MCUpXCJcbiAgICAgICAgfVxuICAgICAgfVxuICAgIH0sIHtcbiAgICAgIHByb3BzOiAoe1xuICAgICAgICBvd25lclN0YXRlXG4gICAgICB9KSA9PiBvd25lclN0YXRlLmFuY2hvck9yaWdpbi52ZXJ0aWNhbCA9PT0gXCJ0b3BcIiAmJiBvd25lclN0YXRlLmFuY2hvck9yaWdpbi5ob3Jpem9udGFsID09PSBcInJpZ2h0XCIgJiYgb3duZXJTdGF0ZS5vdmVybGFwID09PSBcImNpcmN1bGFyXCIsXG4gICAgICBzdHlsZToge1xuICAgICAgICB0b3A6IFwiMTQlXCIsXG4gICAgICAgIHJpZ2h0OiBcIjE0JVwiLFxuICAgICAgICB0cmFuc2Zvcm06IFwic2NhbGUoMSkgdHJhbnNsYXRlKDUwJSwgLTUwJSlcIixcbiAgICAgICAgdHJhbnNmb3JtT3JpZ2luOiBcIjEwMCUgMCVcIixcbiAgICAgICAgW2AmLiR7YmFkZ2VDbGFzc2VzLmludmlzaWJsZX1gXToge1xuICAgICAgICAgIHRyYW5zZm9ybTogXCJzY2FsZSgwKSB0cmFuc2xhdGUoNTAlLCAtNTAlKVwiXG4gICAgICAgIH1cbiAgICAgIH1cbiAgICB9LCB7XG4gICAgICBwcm9wczogKHtcbiAgICAgICAgb3duZXJTdGF0ZVxuICAgICAgfSkgPT4gb3duZXJTdGF0ZS5hbmNob3JPcmlnaW4udmVydGljYWwgPT09IFwiYm90dG9tXCIgJiYgb3duZXJTdGF0ZS5hbmNob3JPcmlnaW4uaG9yaXpvbnRhbCA9PT0gXCJyaWdodFwiICYmIG93bmVyU3RhdGUub3ZlcmxhcCA9PT0gXCJjaXJjdWxhclwiLFxuICAgICAgc3R5bGU6IHtcbiAgICAgICAgYm90dG9tOiBcIjE0JVwiLFxuICAgICAgICByaWdodDogXCIxNCVcIixcbiAgICAgICAgdHJhbnNmb3JtOiBcInNjYWxlKDEpIHRyYW5zbGF0ZSg1MCUsIDUwJSlcIixcbiAgICAgICAgdHJhbnNmb3JtT3JpZ2luOiBcIjEwMCUgMTAwJVwiLFxuICAgICAgICBbYCYuJHtiYWRnZUNsYXNzZXMuaW52aXNpYmxlfWBdOiB7XG4gICAgICAgICAgdHJhbnNmb3JtOiBcInNjYWxlKDApIHRyYW5zbGF0ZSg1MCUsIDUwJSlcIlxuICAgICAgICB9XG4gICAgICB9XG4gICAgfSwge1xuICAgICAgcHJvcHM6ICh7XG4gICAgICAgIG93bmVyU3RhdGVcbiAgICAgIH0pID0%2BIG93bmVyU3RhdGUuYW5jaG9yT3JpZ2luLnZlcnRpY2FsID09PSBcInRvcFwiICYmIG93bmVyU3RhdGUuYW5jaG9yT3JpZ2luLmhvcml6b250YWwgPT09IFwibGVmdFwiICYmIG93bmVyU3RhdGUub3ZlcmxhcCA9PT0gXCJjaXJjdWxhclwiLFxuICAgICAgc3R5bGU6IHtcbiAgICAgICAgdG9wOiBcIjE0JVwiLFxuICAgICAgICBsZWZ0OiBcIjE0JVwiLFxuICAgICAgICB0cmFuc2Zvcm06IFwic2NhbGUoMSkgdHJhbnNsYXRlKC01MCUsIC01MCUpXCIsXG4gICAgICAgIHRyYW5zZm9ybU9yaWdpbjogXCIwJSAwJVwiLFxuICAgICAgICBbYCYuJHtiYWRnZUNsYXNzZXMuaW52aXNpYmxlfWBdOiB7XG4gICAgICAgICAgdHJhbnNmb3JtOiBcInNjYWxlKDApIHRyYW5zbGF0ZSgtNTAlLCAtNTAlKVwiXG4gICAgICAgIH1cbiAgICAgIH1cbiAgICB9LCB7XG4gICAgICBwcm9wczogKHtcbiAgICAgICAgb3duZXJTdGF0ZVxuICAgICAgfSkgPT4gb3duZXJTdGF0ZS5hbmNob3JPcmlnaW4udmVydGljYWwgPT09IFwiYm90dG9tXCIgJiYgb3duZXJTdGF0ZS5hbmNob3JPcmlnaW4uaG9yaXpvbnRhbCA9PT0gXCJsZWZ0XCIgJiYgb3duZXJTdGF0ZS5vdmVybGFwID09PSBcImNpcmN1bGFyXCIsXG4gICAgICBzdHlsZToge1xuICAgICAgICBib3R0b206IFwiMTQlXCIsXG4gICAgICAgIGxlZnQ6IFwiMTQlXCIsXG4gICAgICAgIHRyYW5zZm9ybTogXCJzY2FsZSgxKSB0cmFuc2xhdGUoLTUwJSwgNTAlKVwiLFxuICAgICAgICB0cmFuc2Zvcm1PcmlnaW46IFwiMCUgMTAwJVwiLFxuICAgICAgICBbYCYuJHtiYWRnZUNsYXNzZXMuaW52aXNpYmxlfWBdOiB7XG4gICAgICAgICAgdHJhbnNmb3JtOiBcInNjYWxlKDApIHRyYW5zbGF0ZSgtNTAlLCA1MCUpXCJcbiAgICAgICAgfVxuICAgICAgfVxuICAgIH0sIHtcbiAgICAgIHByb3BzOiB7XG4gICAgICAgIGludmlzaWJsZTogdHJ1ZVxuICAgICAgfSxcbiAgICAgIHN0eWxlOiB7XG4gICAgICAgIHRyYW5zaXRpb246IHRoZW1lLnRyYW5zaXRpb25zLmNyZWF0ZShcInRyYW5zZm9ybVwiLCB7XG4gICAgICAgICAgZWFzaW5nOiB0aGVtZS50cmFuc2l0aW9ucy5lYXNpbmcuZWFzZUluT3V0LFxuICAgICAgICAgIGR1cmF0aW9uOiB0aGVtZS50cmFuc2l0aW9ucy5kdXJhdGlvbi5sZWF2aW5nU2NyZWVuXG4gICAgICAgIH0pXG4gICAgICB9XG4gICAgfV1cbiAgfTtcbn0pO1xuY29uc3QgQmFkZ2UgPSAvKiNfX1BVUkVfXyovX3MoUmVhY3QuZm9yd2FyZFJlZihfYyA9IF9zKGZ1bmN0aW9uIEJhZGdlKGluUHJvcHMsIHJlZikge1xuICBfcygpO1xuICB2YXIgX3JlZiwgX3Nsb3RzJHJvb3QsIF9yZWYyLCBfc2xvdHMkYmFkZ2UsIF9zbG90UHJvcHMkcm9vdCwgX3Nsb3RQcm9wcyRiYWRnZTtcbiAgY29uc3QgcHJvcHMgPSB1c2VUaGVtZVByb3BzKHtcbiAgICBwcm9wczogaW5Qcm9wcyxcbiAgICBuYW1lOiBcIk11aUJhZGdlXCJcbiAgfSk7XG4gIGNvbnN0IHtcbiAgICAgIGFuY2hvck9yaWdpbjogYW5jaG9yT3JpZ2luUHJvcCA9IHtcbiAgICAgICAgdmVydGljYWw6IFwidG9wXCIsXG4gICAgICAgIGhvcml6b250YWw6IFwicmlnaHRcIlxuICAgICAgfSxcbiAgICAgIGNsYXNzTmFtZSxcbiAgICAgIGNvbXBvbmVudCxcbiAgICAgIGNvbXBvbmVudHMgPSB7fSxcbiAgICAgIGNvbXBvbmVudHNQcm9wcyA9IHt9LFxuICAgICAgY2hpbGRyZW4sXG4gICAgICBvdmVybGFwOiBvdmVybGFwUHJvcCA9IFwicmVjdGFuZ3VsYXJcIixcbiAgICAgIGNvbG9yOiBjb2xvclByb3AgPSBcImRlZmF1bHRcIixcbiAgICAgIGludmlzaWJsZTogaW52aXNpYmxlUHJvcCA9IGZhbHNlLFxuICAgICAgbWF4OiBtYXhQcm9wID0gOTksXG4gICAgICBiYWRnZUNvbnRlbnQ6IGJhZGdlQ29udGVudFByb3AsXG4gICAgICBzbG90cyxcbiAgICAgIHNsb3RQcm9wcyxcbiAgICAgIHNob3daZXJvID0gZmFsc2UsXG4gICAgICB2YXJpYW50OiB2YXJpYW50UHJvcCA9IFwic3RhbmRhcmRcIlxuICAgIH0gPSBwcm9wcyxcbiAgICBvdGhlciA9IF9vYmplY3RXaXRob3V0UHJvcGVydGllc0xvb3NlKHByb3BzLCBfZXhjbHVkZWQpO1xuICBjb25zdCB7XG4gICAgYmFkZ2VDb250ZW50LFxuICAgIGludmlzaWJsZTogaW52aXNpYmxlRnJvbUhvb2ssXG4gICAgbWF4LFxuICAgIGRpc3BsYXlWYWx1ZTogZGlzcGxheVZhbHVlRnJvbUhvb2tcbiAgfSA9IHVzZUJhZGdlKHtcbiAgICBtYXg6IG1heFByb3AsXG4gICAgaW52aXNpYmxlOiBpbnZpc2libGVQcm9wLFxuICAgIGJhZGdlQ29udGVudDogYmFkZ2VDb250ZW50UHJvcCxcbiAgICBzaG93WmVyb1xuICB9KTtcbiAgY29uc3QgcHJldlByb3BzID0gdXNlUHJldmlvdXNQcm9wcyh7XG4gICAgYW5jaG9yT3JpZ2luOiBhbmNob3JPcmlnaW5Qcm9wLFxuICAgIGNvbG9yOiBjb2xvclByb3AsXG4gICAgb3ZlcmxhcDogb3ZlcmxhcFByb3AsXG4gICAgdmFyaWFudDogdmFyaWFudFByb3AsXG4gICAgYmFkZ2VDb250ZW50OiBiYWRnZUNvbnRlbnRQcm9wXG4gIH0pO1xuICBjb25zdCBpbnZpc2libGUgPSBpbnZpc2libGVGcm9tSG9vayB8fCBiYWRnZUNvbnRlbnQgPT0gbnVsbCAmJiB2YXJpYW50UHJvcCAhPT0gXCJkb3RcIjtcbiAgY29uc3Qge1xuICAgIGNvbG9yID0gY29sb3JQcm9wLFxuICAgIG92ZXJsYXAgPSBvdmVybGFwUHJvcCxcbiAgICBhbmNob3JPcmlnaW4gPSBhbmNob3JPcmlnaW5Qcm9wLFxuICAgIHZhcmlhbnQgPSB2YXJpYW50UHJvcFxuICB9ID0gaW52aXNpYmxlID8gcHJldlByb3BzIDogcHJvcHM7XG4gIGNvbnN0IGRpc3BsYXlWYWx1ZSA9IHZhcmlhbnQgIT09IFwiZG90XCIgPyBkaXNwbGF5VmFsdWVGcm9tSG9vayA6IHVuZGVmaW5lZDtcbiAgY29uc3Qgb3duZXJTdGF0ZSA9IF9leHRlbmRzKHt9LCBwcm9wcywge1xuICAgIGJhZGdlQ29udGVudCxcbiAgICBpbnZpc2libGUsXG4gICAgbWF4LFxuICAgIGRpc3BsYXlWYWx1ZSxcbiAgICBzaG93WmVybyxcbiAgICBhbmNob3JPcmlnaW4sXG4gICAgY29sb3IsXG4gICAgb3ZlcmxhcCxcbiAgICB2YXJpYW50XG4gIH0pO1xuICBjb25zdCBjbGFzc2VzID0gdXNlVXRpbGl0eUNsYXNzZXMob3duZXJTdGF0ZSk7XG4gIC8vIHN1cHBvcnQgYm90aCBgc2xvdHNgIGFuZCBgY29tcG9uZW50c2AgZm9yIGJhY2t3YXJkIGNvbXBhdGliaWxpdHlcbiAgY29uc3QgUm9vdFNsb3QgPSAoX3JlZiA9IChfc2xvdHMkcm9vdCA9IHNsb3RzID09IG51bGwgPyB2b2lkIDAgOiBzbG90cy5yb290KSAhPSBudWxsID8gX3Nsb3RzJHJvb3QgOiBjb21wb25lbnRzLlJvb3QpICE9IG51bGwgPyBfcmVmIDogQmFkZ2VSb290O1xuICBjb25zdCBCYWRnZVNsb3QgPSAoX3JlZjIgPSAoX3Nsb3RzJGJhZGdlID0gc2xvdHMgPT0gbnVsbCA%2FIHZvaWQgMCA6IHNsb3RzLmJhZGdlKSAhPSBudWxsID8gX3Nsb3RzJGJhZGdlIDogY29tcG9uZW50cy5CYWRnZSkgIT0gbnVsbCA%2FIF9yZWYyIDogQmFkZ2VCYWRnZTtcbiAgY29uc3Qgcm9vdFNsb3RQcm9wcyA9IChfc2xvdFByb3BzJHJvb3QgPSBzbG90UHJvcHMgPT0gbnVsbCA%2FIHZvaWQgMCA6IHNsb3RQcm9wcy5yb290KSAhPSBudWxsID8gX3Nsb3RQcm9wcyRyb290IDogY29tcG9uZW50c1Byb3BzLnJvb3Q7XG4gIGNvbnN0IGJhZGdlU2xvdFByb3BzID0gKF9zbG90UHJvcHMkYmFkZ2UgPSBzbG90UHJvcHMgPT0gbnVsbCA%2FIHZvaWQgMCA6IHNsb3RQcm9wcy5iYWRnZSkgIT0gbnVsbCA%2FIF9zbG90UHJvcHMkYmFkZ2UgOiBjb21wb25lbnRzUHJvcHMuYmFkZ2U7XG4gIGNvbnN0IHJvb3RQcm9wcyA9IHVzZVNsb3RQcm9wcyh7XG4gICAgZWxlbWVudFR5cGU6IFJvb3RTbG90LFxuICAgIGV4dGVybmFsU2xvdFByb3BzOiByb290U2xvdFByb3BzLFxuICAgIGV4dGVybmFsRm9yd2FyZGVkUHJvcHM6IG90aGVyLFxuICAgIGFkZGl0aW9uYWxQcm9wczoge1xuICAgICAgcmVmLFxuICAgICAgYXM6IGNvbXBvbmVudFxuICAgIH0sXG4gICAgb3duZXJTdGF0ZSxcbiAgICBjbGFzc05hbWU6IGNsc3gocm9vdFNsb3RQcm9wcyA9PSBudWxsID8gdm9pZCAwIDogcm9vdFNsb3RQcm9wcy5jbGFzc05hbWUsIGNsYXNzZXMucm9vdCwgY2xhc3NOYW1lKVxuICB9KTtcbiAgY29uc3QgYmFkZ2VQcm9wcyA9IHVzZVNsb3RQcm9wcyh7XG4gICAgZWxlbWVudFR5cGU6IEJhZGdlU2xvdCxcbiAgICBleHRlcm5hbFNsb3RQcm9wczogYmFkZ2VTbG90UHJvcHMsXG4gICAgb3duZXJTdGF0ZSxcbiAgICBjbGFzc05hbWU6IGNsc3goY2xhc3Nlcy5iYWRnZSwgYmFkZ2VTbG90UHJvcHMgPT0gbnVsbCA%2FIHZvaWQgMCA6IGJhZGdlU2xvdFByb3BzLmNsYXNzTmFtZSlcbiAgfSk7XG4gIHJldHVybiAvKiNfX1BVUkVfXyovX2pzeHMoUm9vdFNsb3QsIF9leHRlbmRzKHt9LCByb290UHJvcHMsIHtcbiAgICBjaGlsZHJlbjogW2NoaWxkcmVuLCAvKiNfX1BVUkVfXyovX2pzeChCYWRnZVNsb3QsIF9leHRlbmRzKHt9LCBiYWRnZVByb3BzLCB7XG4gICAgICBjaGlsZHJlbjogZGlzcGxheVZhbHVlXG4gICAgfSkpXVxuICB9KSk7XG59LCBcImJ1YnBJZ0xaWnRqUjM2OWZRWEhxZDZIekhBUT1cIiwgZmFsc2UsIGZ1bmN0aW9uICgpIHtcbiAgcmV0dXJuIFt1c2VUaGVtZVByb3BzLCB1c2VCYWRnZSwgdXNlUHJldmlvdXNQcm9wcywgdXNlVXRpbGl0eUNsYXNzZXMsIHVzZVNsb3RQcm9wcywgdXNlU2xvdFByb3BzXTtcbn0pKSwgXCJidWJwSWdMWlp0alIzNjlmUVhIcWQ2SHpIQVE9XCIsIGZhbHNlLCBmdW5jdGlvbiAoKSB7XG4gIHJldHVybiBbdXNlVGhlbWVQcm9wcywgdXNlQmFkZ2UsIHVzZVByZXZpb3VzUHJvcHMsIHVzZVV0aWxpdHlDbGFzc2VzLCB1c2VTbG90UHJvcHMsIHVzZVNsb3RQcm9wc107XG59KTtcbl9jMSA9IEJhZGdlO1xuXCJkZXZlbG9wbWVudFwiICE9PSBcInByb2R1Y3Rpb25cIiA%2FIEJhZGdlLnByb3BUeXBlcyAvKiByZW1vdmUtcHJvcHR5cGVzICovID0ge1xuICAvLyDilIzilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIAgV2FybmluZyDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilJBcbiAgLy8g4pSCIFRoZXNlIFByb3BUeXBlcyBhcmUgZ2VuZXJhdGVkIGZyb20gdGhlIFR5cGVTY3JpcHQgdHlwZSBkZWZpbml0aW9ucy4g4pSCXG4gIC8vIOKUgiAgICBUbyB1cGRhdGUgdGhlbSwgZWRpdCB0aGUgZC50cyBmaWxlIGFuZCBydW4gYHBucG0gcHJvcHR5cGVzYC4gICAgIOKUglxuICAvLyDilJTilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilJhcbiAgLyoqXG4gICogVGhlIGFuY2hvciBvZiB0aGUgYmFkZ2UuXG4gICogQGRlZmF1bHQge1xuICAqICAgdmVydGljYWw6ICd0b3AnLFxuICAqICAgaG9yaXpvbnRhbDogJ3JpZ2h0JyxcbiAgKiB9XG4gICovXG4gIGFuY2hvck9yaWdpbjogUHJvcFR5cGVzLnNoYXBlKHtcbiAgICBob3Jpem9udGFsOiBQcm9wVHlwZXMub25lT2YoW1wibGVmdFwiLCBcInJpZ2h0XCJdKS5pc1JlcXVpcmVkLFxuICAgIHZlcnRpY2FsOiBQcm9wVHlwZXMub25lT2YoW1wiYm90dG9tXCIsIFwidG9wXCJdKS5pc1JlcXVpcmVkXG4gIH0pLFxuICAvKipcbiAgKiBUaGUgY29udGVudCByZW5kZXJlZCB3aXRoaW4gdGhlIGJhZGdlLlxuICAqL1xuICBiYWRnZUNvbnRlbnQ6IFByb3BUeXBlcy5ub2RlLFxuICAvKipcbiAgKiBUaGUgYmFkZ2Ugd2lsbCBiZSBhZGRlZCByZWxhdGl2ZSB0byB0aGlzIG5vZGUuXG4gICovXG4gIGNoaWxkcmVuOiBQcm9wVHlwZXMubm9kZSxcbiAgLyoqXG4gICogT3ZlcnJpZGUgb3IgZXh0ZW5kIHRoZSBzdHlsZXMgYXBwbGllZCB0byB0aGUgY29tcG9uZW50LlxuICAqL1xuICBjbGFzc2VzOiBQcm9wVHlwZXMub2JqZWN0LFxuICAvKipcbiAgKiBAaWdub3JlXG4gICovXG4gIGNsYXNzTmFtZTogUHJvcFR5cGVzLnN0cmluZyxcbiAgLyoqXG4gICogVGhlIGNvbG9yIG9mIHRoZSBjb21wb25lbnQuXG4gICogSXQgc3VwcG9ydHMgYm90aCBkZWZhdWx0IGFuZCBjdXN0b20gdGhlbWUgY29sb3JzLCB3aGljaCBjYW4gYmUgYWRkZWQgYXMgc2hvd24gaW4gdGhlXG4gICogW3BhbGV0dGUgY3VzdG9taXphdGlvbiBndWlkZV0oaHR0cHM6Ly9tdWkuY29tL21hdGVyaWFsLXVpL2N1c3RvbWl6YXRpb24vcGFsZXR0ZS8jY3VzdG9tLWNvbG9ycykuXG4gICogQGRlZmF1bHQgJ2RlZmF1bHQnXG4gICovXG4gIGNvbG9yOiBQcm9wVHlwZXMgLyogQHR5cGVzY3JpcHQtdG8tcHJvcHR5cGVzLWlnbm9yZSAqLy5vbmVPZlR5cGUoW1Byb3BUeXBlcy5vbmVPZihbXCJkZWZhdWx0XCIsIFwicHJpbWFyeVwiLCBcInNlY29uZGFyeVwiLCBcImVycm9yXCIsIFwiaW5mb1wiLCBcInN1Y2Nlc3NcIiwgXCJ3YXJuaW5nXCJdKSwgUHJvcFR5cGVzLnN0cmluZ10pLFxuICAvKipcbiAgKiBUaGUgY29tcG9uZW50IHVzZWQgZm9yIHRoZSByb290IG5vZGUuXG4gICogRWl0aGVyIGEgc3RyaW5nIHRvIHVzZSBhIEhUTUwgZWxlbWVudCBvciBhIGNvbXBvbmVudC5cbiAgKi9cbiAgY29tcG9uZW50OiBQcm9wVHlwZXMuZWxlbWVudFR5cGUsXG4gIC8qKlxuICAqIFRoZSBjb21wb25lbnRzIHVzZWQgZm9yIGVhY2ggc2xvdCBpbnNpZGUuXG4gICpcbiAgKiBUaGlzIHByb3AgaXMgYW4gYWxpYXMgZm9yIHRoZSBgc2xvdHNgIHByb3AuXG4gICogSXQncyByZWNvbW1lbmRlZCB0byB1c2UgdGhlIGBzbG90c2AgcHJvcCBpbnN0ZWFkLlxuICAqXG4gICogQGRlZmF1bHQge31cbiAgKi9cbiAgY29tcG9uZW50czogUHJvcFR5cGVzLnNoYXBlKHtcbiAgICBCYWRnZTogUHJvcFR5cGVzLmVsZW1lbnRUeXBlLFxuICAgIFJvb3Q6IFByb3BUeXBlcy5lbGVtZW50VHlwZVxuICB9KSxcbiAgLyoqXG4gICogVGhlIGV4dHJhIHByb3BzIGZvciB0aGUgc2xvdCBjb21wb25lbnRzLlxuICAqIFlvdSBjYW4gb3ZlcnJpZGUgdGhlIGV4aXN0aW5nIHByb3BzIG9yIGFkZCBuZXcgb25lcy5cbiAgKlxuICAqIFRoaXMgcHJvcCBpcyBhbiBhbGlhcyBmb3IgdGhlIGBzbG90UHJvcHNgIHByb3AuXG4gICogSXQncyByZWNvbW1lbmRlZCB0byB1c2UgdGhlIGBzbG90UHJvcHNgIHByb3AgaW5zdGVhZCwgYXMgYGNvbXBvbmVudHNQcm9wc2Agd2lsbCBiZSBkZXByZWNhdGVkIGluIHRoZSBmdXR1cmUuXG4gICpcbiAgKiBAZGVmYXVsdCB7fVxuICAqL1xuICBjb21wb25lbnRzUHJvcHM6IFByb3BUeXBlcy5zaGFwZSh7XG4gICAgYmFkZ2U6IFByb3BUeXBlcy5vbmVPZlR5cGUoW1Byb3BUeXBlcy5mdW5jLCBQcm9wVHlwZXMub2JqZWN0XSksXG4gICAgcm9vdDogUHJvcFR5cGVzLm9uZU9mVHlwZShbUHJvcFR5cGVzLmZ1bmMsIFByb3BUeXBlcy5vYmplY3RdKVxuICB9KSxcbiAgLyoqXG4gICogSWYgYHRydWVgLCB0aGUgYmFkZ2UgaXMgaW52aXNpYmxlLlxuICAqIEBkZWZhdWx0IGZhbHNlXG4gICovXG4gIGludmlzaWJsZTogUHJvcFR5cGVzLmJvb2wsXG4gIC8qKlxuICAqIE1heCBjb3VudCB0byBzaG93LlxuICAqIEBkZWZhdWx0IDk5XG4gICovXG4gIG1heDogUHJvcFR5cGVzLm51bWJlcixcbiAgLyoqXG4gICogV3JhcHBlZCBzaGFwZSB0aGUgYmFkZ2Ugc2hvdWxkIG92ZXJsYXAuXG4gICogQGRlZmF1bHQgJ3JlY3Rhbmd1bGFyJ1xuICAqL1xuICBvdmVybGFwOiBQcm9wVHlwZXMub25lT2YoW1wiY2lyY3VsYXJcIiwgXCJyZWN0YW5ndWxhclwiXSksXG4gIC8qKlxuICAqIENvbnRyb2xzIHdoZXRoZXIgdGhlIGJhZGdlIGlzIGhpZGRlbiB3aGVuIGBiYWRnZUNvbnRlbnRgIGlzIHplcm8uXG4gICogQGRlZmF1bHQgZmFsc2VcbiAgKi9cbiAgc2hvd1plcm86IFByb3BUeXBlcy5ib29sLFxuICAvKipcbiAgKiBUaGUgcHJvcHMgdXNlZCBmb3IgZWFjaCBzbG90IGluc2lkZSB0aGUgQmFkZ2UuXG4gICogQGRlZmF1bHQge31cbiAgKi9cbiAgc2xvdFByb3BzOiBQcm9wVHlwZXMuc2hhcGUoe1xuICAgIGJhZGdlOiBQcm9wVHlwZXMub25lT2ZUeXBlKFtQcm9wVHlwZXMuZnVuYywgUHJvcFR5cGVzLm9iamVjdF0pLFxuICAgIHJvb3Q6IFByb3BUeXBlcy5vbmVPZlR5cGUoW1Byb3BUeXBlcy5mdW5jLCBQcm9wVHlwZXMub2JqZWN0XSlcbiAgfSksXG4gIC8qKlxuICAqIFRoZSBjb21wb25lbnRzIHVzZWQgZm9yIGVhY2ggc2xvdCBpbnNpZGUgdGhlIEJhZGdlLlxuICAqIEVpdGhlciBhIHN0cmluZyB0byB1c2UgYSBIVE1MIGVsZW1lbnQgb3IgYSBjb21wb25lbnQuXG4gICogQGRlZmF1bHQge31cbiAgKi9cbiAgc2xvdHM6IFByb3BUeXBlcy5zaGFwZSh7XG4gICAgYmFkZ2U6IFByb3BUeXBlcy5lbGVtZW50VHlwZSxcbiAgICByb290OiBQcm9wVHlwZXMuZWxlbWVudFR5cGVcbiAgfSksXG4gIC8qKlxuICAqIFRoZSBzeXN0ZW0gcHJvcCB0aGF0IGFsbG93cyBkZWZpbmluZyBzeXN0ZW0gb3ZlcnJpZGVzIGFzIHdlbGwgYXMgYWRkaXRpb25hbCBDU1Mgc3R5bGVzLlxuICAqL1xuICBzeDogUHJvcFR5cGVzLm9uZU9mVHlwZShbUHJvcFR5cGVzLmFycmF5T2YoUHJvcFR5cGVzLm9uZU9mVHlwZShbUHJvcFR5cGVzLmZ1bmMsIFByb3BUeXBlcy5vYmplY3QsIFByb3BUeXBlcy5ib29sXSkpLCBQcm9wVHlwZXMuZnVuYywgUHJvcFR5cGVzLm9iamVjdF0pLFxuICAvKipcbiAgKiBUaGUgdmFyaWFudCB0byB1c2UuXG4gICogQGRlZmF1bHQgJ3N0YW5kYXJkJ1xuICAqL1xuICB2YXJpYW50OiBQcm9wVHlwZXMgLyogQHR5cGVzY3JpcHQtdG8tcHJvcHR5cGVzLWlnbm9yZSAqLy5vbmVPZlR5cGUoW1Byb3BUeXBlcy5vbmVPZihbXCJkb3RcIiwgXCJzdGFuZGFyZFwiXSksIFByb3BUeXBlcy5zdHJpbmddKVxufSA6IHZvaWQgMDtcbmV4cG9ydCBkZWZhdWx0IEJhZGdlO1xudmFyIF9jLCBfYzE7XG4kUmVmcmVzaFJlZyQoX2MsIFwiQmFkZ2UkUmVhY3QuZm9yd2FyZFJlZlwiKTtcbiRSZWZyZXNoUmVnJChfYzEsIFwiQmFkZ2VcIik7XG47XG4vLyBXcmFwcGVkIGluIGFuIElJRkUgdG8gYXZvaWQgcG9sbHV0aW5nIHRoZSBnbG9iYWwgc2NvcGVcbjtcbihmdW5jdGlvbiAoKSB7XG4gIHZhciBfYSwgX2I7XG4gIC8vIExlZ2FjeSBDU1MgaW1wbGVtZW50YXRpb25zIHdpbGwgYGV2YWxgIGJyb3dzZXIgY29kZSBpbiBhIE5vZGUuanMgY29udGV4dFxuICAvLyB0byBleHRyYWN0IENTUy4gRm9yIGJhY2t3YXJkcyBjb21wYXRpYmlsaXR5LCB3ZSBuZWVkIHRvIGNoZWNrIHdlJ3JlIGluIGFcbiAgLy8gYnJvd3NlciBjb250ZXh0IGJlZm9yZSBjb250aW51aW5nLlxuICBpZiAodHlwZW9mIHNlbGYgIT09ICd1bmRlZmluZWQnICYmXG4gIC8vIEFNUCAvIE5vLUpTIG1vZGUgZG9lcyBub3QgaW5qZWN0IHRoZXNlIGhlbHBlcnM6XG4gICckUmVmcmVzaEhlbHBlcnMkJyBpbiBzZWxmKSB7XG4gICAgLy8gQHRzLWlnbm9yZSBfX3dlYnBhY2tfbW9kdWxlX18gaXMgZ2xvYmFsXG4gICAgdmFyIGN1cnJlbnRFeHBvcnRzID0gX193ZWJwYWNrX21vZHVsZV9fLmV4cG9ydHM7XG4gICAgLy8gQHRzLWlnbm9yZSBfX3dlYnBhY2tfbW9kdWxlX18gaXMgZ2xvYmFsXG4gICAgdmFyIHByZXZTaWduYXR1cmUgPSAoX2IgPSAoX2EgPSBfX3dlYnBhY2tfbW9kdWxlX18uaG90LmRhdGEpID09PSBudWxsIHx8IF9hID09PSB2b2lkIDAgPyB2b2lkIDAgOiBfYS5wcmV2U2lnbmF0dXJlKSAhPT0gbnVsbCAmJiBfYiAhPT0gdm9pZCAwID8gX2IgOiBudWxsO1xuICAgIC8vIFRoaXMgY2Fubm90IGhhcHBlbiBpbiBNYWluVGVtcGxhdGUgYmVjYXVzZSB0aGUgZXhwb3J0cyBtaXNtYXRjaCBiZXR3ZWVuXG4gICAgLy8gdGVtcGxhdGluZyBhbmQgZXhlY3V0aW9uLlxuICAgIHNlbGYuJFJlZnJlc2hIZWxwZXJzJC5yZWdpc3RlckV4cG9ydHNGb3JSZWFjdFJlZnJlc2goY3VycmVudEV4cG9ydHMsIF9fd2VicGFja19tb2R1bGVfXy5pZCk7XG4gICAgLy8gQSBtb2R1bGUgY2FuIGJlIGFjY2VwdGVkIGF1dG9tYXRpY2FsbHkgYmFzZWQgb24gaXRzIGV4cG9ydHMsIGUuZy4gd2hlblxuICAgIC8vIGl0IGlzIGEgUmVmcmVzaCBCb3VuZGFyeS5cbiAgICBpZiAoc2VsZi4kUmVmcmVzaEhlbHBlcnMkLmlzUmVhY3RSZWZyZXNoQm91bmRhcnkoY3VycmVudEV4cG9ydHMpKSB7XG4gICAgICAvLyBTYXZlIHRoZSBwcmV2aW91cyBleHBvcnRzIHNpZ25hdHVyZSBvbiB1cGRhdGUgc28gd2UgY2FuIGNvbXBhcmUgdGhlIGJvdW5kYXJ5XG4gICAgICAvLyBzaWduYXR1cmVzLiBXZSBhdm9pZCBzYXZpbmcgZXhwb3J0cyB0aGVtc2VsdmVzIHNpbmNlIGl0IGNhdXNlcyBtZW1vcnkgbGVha3MgKGh0dHBzOi8vZ2l0aHViLmNvbS92ZXJjZWwvbmV4dC5qcy9wdWxsLzUzNzk3KVxuICAgICAgX193ZWJwYWNrX21vZHVsZV9fLmhvdC5kaXNwb3NlKGZ1bmN0aW9uIChkYXRhKSB7XG4gICAgICAgIGRhdGEucHJldlNpZ25hdHVyZSA9IHNlbGYuJFJlZnJlc2hIZWxwZXJzJC5nZXRSZWZyZXNoQm91bmRhcnlTaWduYXR1cmUoY3VycmVudEV4cG9ydHMpO1xuICAgICAgfSk7XG4gICAgICAvLyBVbmNvbmRpdGlvbmFsbHkgYWNjZXB0IGFuIHVwZGF0ZSB0byB0aGlzIG1vZHVsZSwgd2UnbGwgY2hlY2sgaWYgaXQnc1xuICAgICAgLy8gc3RpbGwgYSBSZWZyZXNoIEJvdW5kYXJ5IGxhdGVyLlxuICAgICAgLy8gQHRzLWlnbm9yZSBpbXBvcnRNZXRhIGlzIHJlcGxhY2VkIGluIHRoZSBsb2FkZXJcbiAgICAgIGltcG9ydC5tZXRhLndlYnBhY2tIb3QuYWNjZXB0KCk7XG4gICAgICAvLyBUaGlzIGZpZWxkIGlzIHNldCB3aGVuIHRoZSBwcmV2aW91cyB2ZXJzaW9uIG9mIHRoaXMgbW9kdWxlIHdhcyBhXG4gICAgICAvLyBSZWZyZXNoIEJvdW5kYXJ5LCBsZXR0aW5nIHVzIGtub3cgd2UgbmVlZCB0byBjaGVjayBmb3IgaW52YWxpZGF0aW9uIG9yXG4gICAgICAvLyBlbnF1ZXVlIGFuIHVwZGF0ZS5cbiAgICAgIGlmIChwcmV2U2lnbmF0dXJlICE9PSBudWxsKSB7XG4gICAgICAgIC8vIEEgYm91bmRhcnkgY2FuIGJlY29tZSBpbmVsaWdpYmxlIGlmIGl0cyBleHBvcnRzIGFyZSBpbmNvbXBhdGlibGVcbiAgICAgICAgLy8gd2l0aCB0aGUgcHJldmlvdXMgZXhwb3J0cy5cbiAgICAgICAgLy9cbiAgICAgICAgLy8gRm9yIGV4YW1wbGUsIGlmIHlvdSBhZGQvcmVtb3ZlL2NoYW5nZSBleHBvcnRzLCB3ZSdsbCB3YW50IHRvXG4gICAgICAgIC8vIHJlLWV4ZWN1dGUgdGhlIGltcG9ydGluZyBtb2R1bGVzLCBhbmQgZm9yY2UgdGhvc2UgY29tcG9uZW50cyB0b1xuICAgICAgICAvLyByZS1yZW5kZXIuIFNpbWlsYXJseSwgaWYgeW91IGNvbnZlcnQgYSBjbGFzcyBjb21wb25lbnQgdG8gYVxuICAgICAgICAvLyBmdW5jdGlvbiwgd2Ugd2FudCB0byBpbnZhbGlkYXRlIHRoZSBib3VuZGFyeS5cbiAgICAgICAgaWYgKHNlbGYuJFJlZnJlc2hIZWxwZXJzJC5zaG91bGRJbnZhbGlkYXRlUmVhY3RSZWZyZXNoQm91bmRhcnkocHJldlNpZ25hdHVyZSwgc2VsZi4kUmVmcmVzaEhlbHBlcnMkLmdldFJlZnJlc2hCb3VuZGFyeVNpZ25hdHVyZShjdXJyZW50RXhwb3J0cykpKSB7XG4gICAgICAgICAgX193ZWJwYWNrX21vZHVsZV9fLmhvdC5pbnZhbGlkYXRlKCk7XG4gICAgICAgIH0gZWxzZSB7XG4gICAgICAgICAgc2VsZi4kUmVmcmVzaEhlbHBlcnMkLnNjaGVkdWxlVXBkYXRlKCk7XG4gICAgICAgIH1cbiAgICAgIH1cbiAgICB9IGVsc2Uge1xuICAgICAgLy8gU2luY2Ugd2UganVzdCBleGVjdXRlZCB0aGUgY29kZSBmb3IgdGhlIG1vZHVsZSwgaXQncyBwb3NzaWJsZSB0aGF0IHRoZVxuICAgICAgLy8gbmV3IGV4cG9ydHMgbWFkZSBpdCBpbmVsaWdpYmxlIGZvciBiZWluZyBhIGJvdW5kYXJ5LlxuICAgICAgLy8gV2Ugb25seSBjYXJlIGFib3V0IHRoZSBjYXNlIHdoZW4gd2Ugd2VyZSBfcHJldmlvdXNseV8gYSBib3VuZGFyeSxcbiAgICAgIC8vIGJlY2F1c2Ugd2UgYWxyZWFkeSBhY2NlcHRlZCB0aGlzIHVwZGF0ZSAoYWNjaWRlbnRhbCBzaWRlIGVmZmVjdCkuXG4gICAgICB2YXIgaXNOb0xvbmdlckFCb3VuZGFyeSA9IHByZXZTaWduYXR1cmUgIT09IG51bGw7XG4gICAgICBpZiAoaXNOb0xvbmdlckFCb3VuZGFyeSkge1xuICAgICAgICBfX3dlYnBhY2tfbW9kdWxlX18uaG90LmludmFsaWRhdGUoKTtcbiAgICAgIH1cbiAgICB9XG4gIH1cbn0pKCk7Il19*%2F%22%7D"; +import { styled as _styled2 } from "@mui/zero-runtime"; +import _theme2 from "@mui/zero-runtime/theme"; +import { styled as _styled } from "@mui/zero-runtime"; +import _theme from "@mui/zero-runtime/theme"; +import { createUseThemeProps as _createUseThemeProps } from "@mui/zero-runtime"; +/* __next_internal_client_entry_do_not_use__ default auto */var _s = $RefreshSig$(); +import _extends from "@babel/runtime/helpers/esm/extends"; +import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose"; +const _excluded = ["anchorOrigin", "className", "classes", "component", "components", "componentsProps", "children", "overlap", "color", "invisible", "max", "badgeContent", "slots", "slotProps", "showZero", "variant"]; +import * as React from "react"; +import PropTypes from "prop-types"; +import clsx from "clsx"; +import { usePreviousProps } from "@mui/utils"; +import { unstable_composeClasses as composeClasses } from "@mui/base/composeClasses"; +import { useBadge } from "@mui/base/useBadge"; +import { useSlotProps } from "@mui/base"; +import capitalize from "../utils/capitalize"; +import { getBadgeUtilityClass } from "./badgeClasses"; +import { jsx as _jsx } from "react/jsx-runtime"; +import { jsxs as _jsxs } from "react/jsx-runtime"; +const useThemeProps = /*#__PURE__*/_createUseThemeProps({ + color: "error" +}); +const useUtilityClasses = ownerState => { + const { + color, + anchorOrigin, + invisible, + overlap, + variant, + classes = {} + } = ownerState; + const slots = { + root: ["root"], + badge: ["badge", variant, invisible && "invisible", `anchorOrigin${capitalize(anchorOrigin.vertical)}${capitalize(anchorOrigin.horizontal)}`, `anchorOrigin${capitalize(anchorOrigin.vertical)}${capitalize(anchorOrigin.horizontal)}${capitalize(overlap)}`, `overlap${capitalize(overlap)}`, color !== "default" && `color${capitalize(color)}`] + }; + return composeClasses(slots, getBadgeUtilityClass, classes); +}; +const BadgeRoot = /*#__PURE__*/_styled("span", { + name: "MuiBadge", + slot: "Root", + overridesResolver: (props, styles) => styles.root +})({ + classes: ["BadgeRoot_bdxyzxj"] +}); +const BadgeBadge = /*#__PURE__*/_styled2("span", { + name: "MuiBadge", + slot: "Badge", + overridesResolver: (props, styles) => { + const { + ownerState + } = props; + return [styles.badge, styles[ownerState.variant], styles[`anchorOrigin${capitalize(ownerState.anchorOrigin.vertical)}${capitalize(ownerState.anchorOrigin.horizontal)}${capitalize(ownerState.overlap)}`], ownerState.color !== "default" && styles[`color${capitalize(ownerState.color)}`], ownerState.invisible && styles.invisible]; + } +})({ + classes: ["BadgeBadge_b14y6z35"], + variants: [{ + props: { + color: "primary" + }, + className: "BadgeBadge_b14y6z35-variant" + }, { + props: { + color: "secondary" + }, + className: "BadgeBadge_b14y6z35-variant-1" + }, { + props: { + color: "error" + }, + className: "BadgeBadge_b14y6z35-variant-2" + }, { + props: { + color: "warning" + }, + className: "BadgeBadge_b14y6z35-variant-3" + }, { + props: { + color: "info" + }, + className: "BadgeBadge_b14y6z35-variant-4" + }, { + props: { + color: "success" + }, + className: "BadgeBadge_b14y6z35-variant-5" + }, { + props: { + variant: "dot" + }, + className: "BadgeBadge_b14y6z35-variant-6" + }, { + props: ({ + ownerState + }) => ownerState.anchorOrigin.vertical === "top" && ownerState.anchorOrigin.horizontal === "right" && ownerState.overlap === "rectangular", + className: "BadgeBadge_b14y6z35-variant-7" + }, { + props: ({ + ownerState + }) => ownerState.anchorOrigin.vertical === "bottom" && ownerState.anchorOrigin.horizontal === "right" && ownerState.overlap === "rectangular", + className: "BadgeBadge_b14y6z35-variant-8" + }, { + props: ({ + ownerState + }) => ownerState.anchorOrigin.vertical === "top" && ownerState.anchorOrigin.horizontal === "left" && ownerState.overlap === "rectangular", + className: "BadgeBadge_b14y6z35-variant-9" + }, { + props: ({ + ownerState + }) => ownerState.anchorOrigin.vertical === "bottom" && ownerState.anchorOrigin.horizontal === "left" && ownerState.overlap === "rectangular", + className: "BadgeBadge_b14y6z35-variant-10" + }, { + props: ({ + ownerState + }) => ownerState.anchorOrigin.vertical === "top" && ownerState.anchorOrigin.horizontal === "right" && ownerState.overlap === "circular", + className: "BadgeBadge_b14y6z35-variant-11" + }, { + props: ({ + ownerState + }) => ownerState.anchorOrigin.vertical === "bottom" && ownerState.anchorOrigin.horizontal === "right" && ownerState.overlap === "circular", + className: "BadgeBadge_b14y6z35-variant-12" + }, { + props: ({ + ownerState + }) => ownerState.anchorOrigin.vertical === "top" && ownerState.anchorOrigin.horizontal === "left" && ownerState.overlap === "circular", + className: "BadgeBadge_b14y6z35-variant-13" + }, { + props: ({ + ownerState + }) => ownerState.anchorOrigin.vertical === "bottom" && ownerState.anchorOrigin.horizontal === "left" && ownerState.overlap === "circular", + className: "BadgeBadge_b14y6z35-variant-14" + }, { + props: { + invisible: true + }, + className: "BadgeBadge_b14y6z35-variant-15" + }] +}); +const Badge = /*#__PURE__*/_s(React.forwardRef(_c = _s(function Badge(inProps, ref) { + _s(); + var _ref, _slots$root, _ref2, _slots$badge, _slotProps$root, _slotProps$badge; + const props = useThemeProps({ + props: inProps, + name: "MuiBadge" + }); + const { + anchorOrigin: anchorOriginProp = { + vertical: "top", + horizontal: "right" + }, + className, + component, + components = {}, + componentsProps = {}, + children, + overlap: overlapProp = "rectangular", + color: colorProp = "default", + invisible: invisibleProp = false, + max: maxProp = 99, + badgeContent: badgeContentProp, + slots, + slotProps, + showZero = false, + variant: variantProp = "standard" + } = props, + other = _objectWithoutPropertiesLoose(props, _excluded); + const { + badgeContent, + invisible: invisibleFromHook, + max, + displayValue: displayValueFromHook + } = useBadge({ + max: maxProp, + invisible: invisibleProp, + badgeContent: badgeContentProp, + showZero + }); + const prevProps = usePreviousProps({ + anchorOrigin: anchorOriginProp, + color: colorProp, + overlap: overlapProp, + variant: variantProp, + badgeContent: badgeContentProp + }); + const invisible = invisibleFromHook || badgeContent == null && variantProp !== "dot"; + const { + color = colorProp, + overlap = overlapProp, + anchorOrigin = anchorOriginProp, + variant = variantProp + } = invisible ? prevProps : props; + const displayValue = variant !== "dot" ? displayValueFromHook : undefined; + const ownerState = _extends({}, props, { + badgeContent, + invisible, + max, + displayValue, + showZero, + anchorOrigin, + color, + overlap, + variant + }); + const classes = useUtilityClasses(ownerState); + // support both `slots` and `components` for backward compatibility + const RootSlot = (_ref = (_slots$root = slots == null ? void 0 : slots.root) != null ? _slots$root : components.Root) != null ? _ref : BadgeRoot; + const BadgeSlot = (_ref2 = (_slots$badge = slots == null ? void 0 : slots.badge) != null ? _slots$badge : components.Badge) != null ? _ref2 : BadgeBadge; + const rootSlotProps = (_slotProps$root = slotProps == null ? void 0 : slotProps.root) != null ? _slotProps$root : componentsProps.root; + const badgeSlotProps = (_slotProps$badge = slotProps == null ? void 0 : slotProps.badge) != null ? _slotProps$badge : componentsProps.badge; + const rootProps = useSlotProps({ + elementType: RootSlot, + externalSlotProps: rootSlotProps, + externalForwardedProps: other, + additionalProps: { + ref, + as: component + }, + ownerState, + className: clsx(rootSlotProps == null ? void 0 : rootSlotProps.className, classes.root, className) + }); + const badgeProps = useSlotProps({ + elementType: BadgeSlot, + externalSlotProps: badgeSlotProps, + ownerState, + className: clsx(classes.badge, badgeSlotProps == null ? void 0 : badgeSlotProps.className) + }); + return /*#__PURE__*/_jsxs(RootSlot, _extends({}, rootProps, { + children: [children, /*#__PURE__*/_jsx(BadgeSlot, _extends({}, badgeProps, { + children: displayValue + }))] + })); +}, "bubpIgLZZtjR369fQXHqd6HzHAQ=", false, function () { + return [useThemeProps, useBadge, usePreviousProps, useUtilityClasses, useSlotProps, useSlotProps]; +})), "bubpIgLZZtjR369fQXHqd6HzHAQ=", false, function () { + return [useThemeProps, useBadge, usePreviousProps, useUtilityClasses, useSlotProps, useSlotProps]; +}); +_c1 = Badge; +"development" !== "production" ? Badge.propTypes /* remove-proptypes */ = { + // β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€ Warning ──────────────────────────────┐ + // β”‚ These PropTypes are generated from the TypeScript type definitions. β”‚ + // β”‚ To update them, edit the d.ts file and run `pnpm proptypes`. β”‚ + // β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜ + /** + * The anchor of the badge. + * @default { + * vertical: 'top', + * horizontal: 'right', + * } + */ + anchorOrigin: PropTypes.shape({ + horizontal: PropTypes.oneOf(["left", "right"]).isRequired, + vertical: PropTypes.oneOf(["bottom", "top"]).isRequired + }), + /** + * The content rendered within the badge. + */ + badgeContent: PropTypes.node, + /** + * The badge will be added relative to this node. + */ + children: PropTypes.node, + /** + * Override or extend the styles applied to the component. + */ + classes: PropTypes.object, + /** + * @ignore + */ + className: PropTypes.string, + /** + * The color of the component. + * It supports both default and custom theme colors, which can be added as shown in the + * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors). + * @default 'default' + */ + color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(["default", "primary", "secondary", "error", "info", "success", "warning"]), PropTypes.string]), + /** + * The component used for the root node. + * Either a string to use a HTML element or a component. + */ + component: PropTypes.elementType, + /** + * The components used for each slot inside. + * + * This prop is an alias for the `slots` prop. + * It's recommended to use the `slots` prop instead. + * + * @default {} + */ + components: PropTypes.shape({ + Badge: PropTypes.elementType, + Root: PropTypes.elementType + }), + /** + * The extra props for the slot components. + * You can override the existing props or add new ones. + * + * This prop is an alias for the `slotProps` prop. + * It's recommended to use the `slotProps` prop instead, as `componentsProps` will be deprecated in the future. + * + * @default {} + */ + componentsProps: PropTypes.shape({ + badge: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), + root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]) + }), + /** + * If `true`, the badge is invisible. + * @default false + */ + invisible: PropTypes.bool, + /** + * Max count to show. + * @default 99 + */ + max: PropTypes.number, + /** + * Wrapped shape the badge should overlap. + * @default 'rectangular' + */ + overlap: PropTypes.oneOf(["circular", "rectangular"]), + /** + * Controls whether the badge is hidden when `badgeContent` is zero. + * @default false + */ + showZero: PropTypes.bool, + /** + * The props used for each slot inside the Badge. + * @default {} + */ + slotProps: PropTypes.shape({ + badge: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), + root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]) + }), + /** + * The components used for each slot inside the Badge. + * Either a string to use a HTML element or a component. + * @default {} + */ + slots: PropTypes.shape({ + badge: PropTypes.elementType, + root: PropTypes.elementType + }), + /** + * The system prop that allows defining system overrides as well as additional CSS styles. + */ + sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]), + /** + * The variant to use. + * @default 'standard' + */ + variant: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(["dot", "standard"]), PropTypes.string]) +} : void 0; +export default Badge; +var _c, _c1; +$RefreshReg$(_c, "Badge$React.forwardRef"); +$RefreshReg$(_c1, "Badge"); +; +// Wrapped in an IIFE to avoid polluting the global scope +; +(function () { + var _a, _b; + // Legacy CSS implementations will `eval` browser code in a Node.js context + // to extract CSS. For backwards compatibility, we need to check we're in a + // browser context before continuing. + if (typeof self !== 'undefined' && + // AMP / No-JS mode does not inject these helpers: + '$RefreshHelpers$' in self) { + // @ts-ignore __webpack_module__ is global + var currentExports = __webpack_module__.exports; + // @ts-ignore __webpack_module__ is global + var prevSignature = (_b = (_a = __webpack_module__.hot.data) === null || _a === void 0 ? void 0 : _a.prevSignature) !== null && _b !== void 0 ? _b : null; + // This cannot happen in MainTemplate because the exports mismatch between + // templating and execution. + self.$RefreshHelpers$.registerExportsForReactRefresh(currentExports, __webpack_module__.id); + // A module can be accepted automatically based on its exports, e.g. when + // it is a Refresh Boundary. + if (self.$RefreshHelpers$.isReactRefreshBoundary(currentExports)) { + // Save the previous exports signature on update so we can compare the boundary + // signatures. We avoid saving exports themselves since it causes memory leaks (https://github.com/vercel/next.js/pull/53797) + __webpack_module__.hot.dispose(function (data) { + data.prevSignature = self.$RefreshHelpers$.getRefreshBoundarySignature(currentExports); + }); + // Unconditionally accept an update to this module, we'll check if it's + // still a Refresh Boundary later. + // @ts-ignore importMeta is replaced in the loader + import.meta.webpackHot.accept(); + // This field is set when the previous version of this module was a + // Refresh Boundary, letting us know we need to check for invalidation or + // enqueue an update. + if (prevSignature !== null) { + // A boundary can become ineligible if its exports are incompatible + // with the previous exports. + // + // For example, if you add/remove/change exports, we'll want to + // re-execute the importing modules, and force those components to + // re-render. Similarly, if you convert a class component to a + // function, we want to invalidate the boundary. + if (self.$RefreshHelpers$.shouldInvalidateReactRefreshBoundary(prevSignature, self.$RefreshHelpers$.getRefreshBoundarySignature(currentExports))) { + __webpack_module__.hot.invalidate(); + } else { + self.$RefreshHelpers$.scheduleUpdate(); + } + } + } else { + // Since we just executed the code for the module, it's possible that the + // new exports made it ineligible for being a boundary. + // We only care about the case when we were _previously_ a boundary, + // because we already accepted this update (accidental side effect). + var isNoLongerABoundary = prevSignature !== null; + if (isNoLongerABoundary) { + __webpack_module__.hot.invalidate(); + } + } + } +})(); \ No newline at end of file diff --git a/apps/zero-runtime-next-app/build-log/page.tsx b/apps/zero-runtime-next-app/build-log/page.tsx new file mode 100644 index 00000000000000..ea43c1791283e2 --- /dev/null +++ b/apps/zero-runtime-next-app/build-log/page.tsx @@ -0,0 +1,227 @@ +import "/Users/siriwatknp/Personal-Repos/material-ui/packages/zero-next-plugin/zero-virtual.css?%7B%22filename%22%3A%2213zo735.zero.css%22%2C%22source%22%3A%22.visuallyHidden_v1bdmy7h%7Bborder%3A0%3Bclip%3Arect(0%200%200%200)%3Bheight%3A1px%3Bmargin%3A-1px%3Boverflow%3Ahidden%3Bpadding%3A0%3Bposition%3Aabsolute%3Bwhite-space%3Anowrap%3Bwidth%3A1px%3B%7D%5Cn.Main_m1o6sjk5%7Bcolor%3Argb(var(--foreground-rgb))%3Bbackground%3Alinear-gradient(to%20bottom%2C%20transparent%2C%20rgb(var(--background-end-rgb)))%20rgb(var(--background-start-rgb))%3Bdisplay%3Aflex%3Bflex-direction%3Acolumn%3Bjustify-content%3Aspace-between%3Balign-items%3Acenter%3Bpadding%3A6rem%3Bmin-height%3A100vh%3B%7D%5Cn.Description_d1wnawl7%7Bdisplay%3Ainherit%3Bjustify-content%3Ainherit%3Balign-items%3Ainherit%3Bfont-size%3A0.85rem%3Bmax-width%3Avar(--max-width)%3Bwidth%3A100%25%3Bz-index%3A2%3Bfont-family%3Avar(--font-mono)%3B%7D.Description_d1wnawl7%20a%7Bdisplay%3Aflex%3Bjustify-content%3Acenter%3Balign-items%3Acenter%3Bgap%3A0.5rem%3B%7D.Description_d1wnawl7%20p%7Bposition%3Arelative%3Bmargin%3A0%3Bpadding%3A1rem%3Bbackground-color%3Argba(var(--callout-rgb)%2C%200.5)%3Bborder%3A1px%20solid%20rgba(var(--callout-border-rgb)%2C%200.3)%3Bborder-radius%3Avar(--border-radius)%3B%7D%40media%20(max-width%3A%20700px)%7B.Description_d1wnawl7%7Bfont-size%3A0.8rem%3B%7D.Description_d1wnawl7%20a%7Bpadding%3A1rem%3B%7D.Description_d1wnawl7%20p%2C.Description_d1wnawl7%20div%7Bdisplay%3Aflex%3Bjustify-content%3Acenter%3Bposition%3Afixed%3Bwidth%3A100%25%3B%7D.Description_d1wnawl7%20p%7Balign-items%3Acenter%3Binset%3A0%200%20auto%3Bpadding%3A2rem%201rem%201.4rem%3Bborder-radius%3A0%3Bborder%3Anone%3Bborder-bottom%3A1px%20solid%20rgba(var(--callout-border-rgb)%2C%200.25)%3Bbackground%3Alinear-gradient(%5Cn%20%20to%20bottom%2C%5Cn%20%20rgba(var(--background-start-rgb)%2C%201)%2C%5Cn%20%20rgba(var(--callout-rgb)%2C%200.5)%5Cn)%3Bbackground-clip%3Apadding-box%3Bbackdrop-filter%3Ablur(24px)%3B%7D.Description_d1wnawl7%20div%7Balign-items%3Aflex-end%3Bpointer-events%3Anone%3Binset%3Aauto%200%200%3Bpadding%3A2rem%3Bheight%3A200px%3Bbackground%3Alinear-gradient(to%20bottom%2C%20transparent%200%25%2C%20rgb(var(--background-end-rgb))%2040%25)%3Bz-index%3A1%3B%7D%7D%5Cn%2F*%23%20sourceMappingURL%3Ddata%3Aapplication%2Fjson%3Bbase64%2CeyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9Vc2Vycy9zaXJpd2F0a25wL1BlcnNvbmFsLVJlcG9zL21hdGVyaWFsLXVpL2FwcHMvemVyby1ydW50aW1lLW5leHQtYXBwL3NyYy9hcHAvcGFnZS50c3giXSwibmFtZXMiOlsiLnZpc3VhbGx5SGlkZGVuX3YxYmRteTdoIiwiLk1haW5fbTFvNnNqazUiLCIuRGVzY3JpcHRpb25fZDF3bmF3bDciXSwibWFwcGluZ3MiOiJBQUt1QkE7QUFXVkM7QUFVT0MiLCJmaWxlIjoiL1VzZXJzL3Npcml3YXRrbnAvUGVyc29uYWwtUmVwb3MvbWF0ZXJpYWwtdWkvYXBwcy96ZXJvLXJ1bnRpbWUtbmV4dC1hcHAvc3JjL2FwcC9wYWdlLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGpzeERFViBhcyBfanN4REVWIH0gZnJvbSBcInJlYWN0L2pzeC1kZXYtcnVudGltZVwiO1xuaW1wb3J0IEltYWdlIGZyb20gXCJuZXh0L2ltYWdlXCI7XG5pbXBvcnQgeyBzdHlsZWQsIGNzcyB9IGZyb20gXCJAbXVpL3plcm8tcnVudGltZVwiO1xuaW1wb3J0IEJhZGdlIGZyb20gXCJAbXVpL21hdGVyaWFsL0JhZGdlXCI7XG5pbXBvcnQgc3R5bGVzIGZyb20gXCIuL3BhZ2UubW9kdWxlLmNzc1wiO1xuY29uc3QgdmlzdWFsbHlIaWRkZW4gPSBjc3Moe1xuICBib3JkZXI6IDAsXG4gIGNsaXA6IFwicmVjdCgwIDAgMCAwKVwiLFxuICBoZWlnaHQ6IFwiMXB4XCIsXG4gIG1hcmdpbjogLTEsXG4gIG92ZXJmbG93OiBcImhpZGRlblwiLFxuICBwYWRkaW5nOiAwLFxuICBwb3NpdGlvbjogXCJhYnNvbHV0ZVwiLFxuICB3aGl0ZVNwYWNlOiBcIm5vd3JhcFwiLFxuICB3aWR0aDogXCIxcHhcIlxufSk7XG5jb25zdCBNYWluID0gc3R5bGVkLm1haW4oe1xuICBjb2xvcjogXCJyZ2IodmFyKC0tZm9yZWdyb3VuZC1yZ2IpKVwiLFxuICBiYWNrZ3JvdW5kOiBgbGluZWFyLWdyYWRpZW50KHRvIGJvdHRvbSwgdHJhbnNwYXJlbnQsIHJnYih2YXIoLS1iYWNrZ3JvdW5kLWVuZC1yZ2IpKSkgcmdiKHZhcigtLWJhY2tncm91bmQtc3RhcnQtcmdiKSlgLFxuICBkaXNwbGF5OiBcImZsZXhcIixcbiAgZmxleERpcmVjdGlvbjogXCJjb2x1bW5cIixcbiAganVzdGlmeUNvbnRlbnQ6IFwic3BhY2UtYmV0d2VlblwiLFxuICBhbGlnbkl0ZW1zOiBcImNlbnRlclwiLFxuICBwYWRkaW5nOiBcIjZyZW1cIixcbiAgbWluSGVpZ2h0OiBcIjEwMHZoXCJcbn0pO1xuY29uc3QgRGVzY3JpcHRpb24gPSBzdHlsZWQuZGl2KHtcbiAgZGlzcGxheTogXCJpbmhlcml0XCIsXG4gIGp1c3RpZnlDb250ZW50OiBcImluaGVyaXRcIixcbiAgYWxpZ25JdGVtczogXCJpbmhlcml0XCIsXG4gIGZvbnRTaXplOiBcIjAuODVyZW1cIixcbiAgbWF4V2lkdGg6IFwidmFyKC0tbWF4LXdpZHRoKVwiLFxuICB3aWR0aDogXCIxMDAlXCIsXG4gIHpJbmRleDogMixcbiAgZm9udEZhbWlseTogXCJ2YXIoLS1mb250LW1vbm8pXCIsXG4gIFwiJiBhXCI6IHtcbiAgICBkaXNwbGF5OiBcImZsZXhcIixcbiAgICBqdXN0aWZ5Q29udGVudDogXCJjZW50ZXJcIixcbiAgICBhbGlnbkl0ZW1zOiBcImNlbnRlclwiLFxuICAgIGdhcDogXCIwLjVyZW1cIlxuICB9LFxuICBcIiYgcFwiOiB7XG4gICAgcG9zaXRpb246IFwicmVsYXRpdmVcIixcbiAgICBtYXJnaW46IDAsXG4gICAgcGFkZGluZzogXCIxcmVtXCIsXG4gICAgYmFja2dyb3VuZENvbG9yOiBcInJnYmEodmFyKC0tY2FsbG91dC1yZ2IpLCAwLjUpXCIsXG4gICAgYm9yZGVyOiBcIjFweCBzb2xpZCByZ2JhKHZhcigtLWNhbGxvdXQtYm9yZGVyLXJnYiksIDAuMylcIixcbiAgICBib3JkZXJSYWRpdXM6IFwidmFyKC0tYm9yZGVyLXJhZGl1cylcIlxuICB9LFxuICBcIkBtZWRpYSAobWF4LXdpZHRoOiA3MDBweClcIjoge1xuICAgIGZvbnRTaXplOiBcIjAuOHJlbVwiLFxuICAgIFwiJiBhXCI6IHtcbiAgICAgIHBhZGRpbmc6IFwiMXJlbVwiXG4gICAgfSxcbiAgICBcIiYgcCwgJiBkaXZcIjoge1xuICAgICAgZGlzcGxheTogXCJmbGV4XCIsXG4gICAgICBqdXN0aWZ5Q29udGVudDogXCJjZW50ZXJcIixcbiAgICAgIHBvc2l0aW9uOiBcImZpeGVkXCIsXG4gICAgICB3aWR0aDogXCIxMDAlXCJcbiAgICB9LFxuICAgIFwiJiBwXCI6IHtcbiAgICAgIGFsaWduSXRlbXM6IFwiY2VudGVyXCIsXG4gICAgICBpbnNldDogXCIwIDAgYXV0b1wiLFxuICAgICAgcGFkZGluZzogXCIycmVtIDFyZW0gMS40cmVtXCIsXG4gICAgICBib3JkZXJSYWRpdXM6IFwiMFwiLFxuICAgICAgYm9yZGVyOiBcIm5vbmVcIixcbiAgICAgIGJvcmRlckJvdHRvbTogXCIxcHggc29saWQgcmdiYSh2YXIoLS1jYWxsb3V0LWJvcmRlci1yZ2IpLCAwLjI1KVwiLFxuICAgICAgYmFja2dyb3VuZDogYGxpbmVhci1ncmFkaWVudChcbiAgdG8gYm90dG9tLFxuICByZ2JhKHZhcigtLWJhY2tncm91bmQtc3RhcnQtcmdiKSwgMSksXG4gIHJnYmEodmFyKC0tY2FsbG91dC1yZ2IpLCAwLjUpXG4pYCxcbiAgICAgIGJhY2tncm91bmRDbGlwOiBcInBhZGRpbmctYm94XCIsXG4gICAgICBiYWNrZHJvcEZpbHRlcjogXCJibHVyKDI0cHgpXCJcbiAgICB9LFxuICAgIFwiJiBkaXZcIjoge1xuICAgICAgYWxpZ25JdGVtczogXCJmbGV4LWVuZFwiLFxuICAgICAgcG9pbnRlckV2ZW50czogXCJub25lXCIsXG4gICAgICBpbnNldDogXCJhdXRvIDAgMFwiLFxuICAgICAgcGFkZGluZzogXCIycmVtXCIsXG4gICAgICBoZWlnaHQ6IFwiMjAwcHhcIixcbiAgICAgIGJhY2tncm91bmQ6IGBsaW5lYXItZ3JhZGllbnQodG8gYm90dG9tLCB0cmFuc3BhcmVudCAwJSwgcmdiKHZhcigtLWJhY2tncm91bmQtZW5kLXJnYikpIDQwJSlgLFxuICAgICAgekluZGV4OiAxXG4gICAgfVxuICB9XG59KTtcbmV4cG9ydCBkZWZhdWx0IGZ1bmN0aW9uIEhvbWUoKSB7XG4gIHJldHVybiAvKiNfX1BVUkVfXyovX2pzeERFVihNYWluLCB7XG4gICAgY2hpbGRyZW46IFsvKiNfX1BVUkVfXyovX2pzeERFVihcImRpdlwiLCB7XG4gICAgICBjbGFzc05hbWU6IHZpc3VhbGx5SGlkZGVuLFxuICAgICAgY2hpbGRyZW46IFwiSSBhbSBpbnZpc2libGVcIlxuICAgIH0sIHZvaWQgMCwgZmFsc2UsIHtcbiAgICAgIGZpbGVOYW1lOiBcIi9Vc2Vycy9zaXJpd2F0a25wL1BlcnNvbmFsLVJlcG9zL21hdGVyaWFsLXVpL2FwcHMvemVyby1ydW50aW1lLW5leHQtYXBwL3NyYy9hcHAvcGFnZS50c3hcIixcbiAgICAgIGxpbmVOdW1iZXI6IDkzLFxuICAgICAgY29sdW1uTnVtYmVyOiA3XG4gICAgfSwgdGhpcyksIC8qI19fUFVSRV9fKi9fanN4REVWKEJhZGdlLCB7XG4gICAgICB2YXJpYW50OiBcImRvdFwiLFxuICAgICAgY2hpbGRyZW46IC8qI19fUFVSRV9fKi9fanN4REVWKFwiZGl2XCIsIHtcbiAgICAgICAgY2hpbGRyZW46IFwiSGV5XCJcbiAgICAgIH0sIHZvaWQgMCwgZmFsc2UsIHtcbiAgICAgICAgZmlsZU5hbWU6IFwiL1VzZXJzL3Npcml3YXRrbnAvUGVyc29uYWwtUmVwb3MvbWF0ZXJpYWwtdWkvYXBwcy96ZXJvLXJ1bnRpbWUtbmV4dC1hcHAvc3JjL2FwcC9wYWdlLnRzeFwiLFxuICAgICAgICBsaW5lTnVtYmVyOiA5NSxcbiAgICAgICAgY29sdW1uTnVtYmVyOiA5XG4gICAgICB9LCB0aGlzKVxuICAgIH0sIHZvaWQgMCwgZmFsc2UsIHtcbiAgICAgIGZpbGVOYW1lOiBcIi9Vc2Vycy9zaXJpd2F0a25wL1BlcnNvbmFsLVJlcG9zL21hdGVyaWFsLXVpL2FwcHMvemVyby1ydW50aW1lLW5leHQtYXBwL3NyYy9hcHAvcGFnZS50c3hcIixcbiAgICAgIGxpbmVOdW1iZXI6IDk0LFxuICAgICAgY29sdW1uTnVtYmVyOiA3XG4gICAgfSwgdGhpcyksIC8qI19fUFVSRV9fKi9fanN4REVWKERlc2NyaXB0aW9uLCB7XG4gICAgICBjaGlsZHJlbjogWy8qI19fUFVSRV9fKi9fanN4REVWKFwicFwiLCB7XG4gICAgICAgIGNoaWxkcmVuOiBbXCJHZXQgc3RhcnRlZCBieSBlZGl0aW5nXFx4YTBcIiwgLyojX19QVVJFX18qL19qc3hERVYoXCJjb2RlXCIsIHtcbiAgICAgICAgICBjbGFzc05hbWU6IHN0eWxlcy5jb2RlLFxuICAgICAgICAgIGNoaWxkcmVuOiBcInNyYy9hcHAvcGFnZS50c3hcIlxuICAgICAgICB9LCB2b2lkIDAsIGZhbHNlLCB7XG4gICAgICAgICAgZmlsZU5hbWU6IFwiL1VzZXJzL3Npcml3YXRrbnAvUGVyc29uYWwtUmVwb3MvbWF0ZXJpYWwtdWkvYXBwcy96ZXJvLXJ1bnRpbWUtbmV4dC1hcHAvc3JjL2FwcC9wYWdlLnRzeFwiLFxuICAgICAgICAgIGxpbmVOdW1iZXI6IDEwMCxcbiAgICAgICAgICBjb2x1bW5OdW1iZXI6IDExXG4gICAgICAgIH0sIHRoaXMpXVxuICAgICAgfSwgdm9pZCAwLCB0cnVlLCB7XG4gICAgICAgIGZpbGVOYW1lOiBcIi9Vc2Vycy9zaXJpd2F0a25wL1BlcnNvbmFsLVJlcG9zL21hdGVyaWFsLXVpL2FwcHMvemVyby1ydW50aW1lLW5leHQtYXBwL3NyYy9hcHAvcGFnZS50c3hcIixcbiAgICAgICAgbGluZU51bWJlcjogOTgsXG4gICAgICAgIGNvbHVtbk51bWJlcjogOVxuICAgICAgfSwgdGhpcyksIC8qI19fUFVSRV9fKi9fanN4REVWKFwiZGl2XCIsIHtcbiAgICAgICAgY2hpbGRyZW46IC8qI19fUFVSRV9fKi9fanN4REVWKFwiYVwiLCB7XG4gICAgICAgICAgaHJlZjogXCJodHRwczovL3ZlcmNlbC5jb20%2FdXRtX3NvdXJjZT1jcmVhdGUtbmV4dC1hcHAmdXRtX21lZGl1bT1hcHBkaXItdGVtcGxhdGUmdXRtX2NhbXBhaWduPWNyZWF0ZS1uZXh0LWFwcFwiLFxuICAgICAgICAgIHRhcmdldDogXCJfYmxhbmtcIixcbiAgICAgICAgICByZWw6IFwibm9vcGVuZXJcIixcbiAgICAgICAgICBjaGlsZHJlbjogW1wiQnlcIiwgXCIgXCIsIC8qI19fUFVSRV9fKi9fanN4REVWKEltYWdlLCB7XG4gICAgICAgICAgICBzcmM6IFwiL3ZlcmNlbC5zdmdcIixcbiAgICAgICAgICAgIGFsdDogXCJWZXJjZWwgTG9nb1wiLFxuICAgICAgICAgICAgY2xhc3NOYW1lOiBzdHlsZXMudmVyY2VsTG9nbyxcbiAgICAgICAgICAgIHdpZHRoOiAxMDAsXG4gICAgICAgICAgICBoZWlnaHQ6IDI0LFxuICAgICAgICAgICAgcHJpb3JpdHk6IHRydWVcbiAgICAgICAgICB9LCB2b2lkIDAsIGZhbHNlLCB7XG4gICAgICAgICAgICBmaWxlTmFtZTogXCIvVXNlcnMvc2lyaXdhdGtucC9QZXJzb25hbC1SZXBvcy9tYXRlcmlhbC11aS9hcHBzL3plcm8tcnVudGltZS1uZXh0LWFwcC9zcmMvYXBwL3BhZ2UudHN4XCIsXG4gICAgICAgICAgICBsaW5lTnVtYmVyOiAxMDksXG4gICAgICAgICAgICBjb2x1bW5OdW1iZXI6IDEzXG4gICAgICAgICAgfSwgdGhpcyldXG4gICAgICAgIH0sIHZvaWQgMCwgdHJ1ZSwge1xuICAgICAgICAgIGZpbGVOYW1lOiBcIi9Vc2Vycy9zaXJpd2F0a25wL1BlcnNvbmFsLVJlcG9zL21hdGVyaWFsLXVpL2FwcHMvemVyby1ydW50aW1lLW5leHQtYXBwL3NyYy9hcHAvcGFnZS50c3hcIixcbiAgICAgICAgICBsaW5lTnVtYmVyOiAxMDMsXG4gICAgICAgICAgY29sdW1uTnVtYmVyOiAxMVxuICAgICAgICB9LCB0aGlzKVxuICAgICAgfSwgdm9pZCAwLCBmYWxzZSwge1xuICAgICAgICBmaWxlTmFtZTogXCIvVXNlcnMvc2lyaXdhdGtucC9QZXJzb25hbC1SZXBvcy9tYXRlcmlhbC11aS9hcHBzL3plcm8tcnVudGltZS1uZXh0LWFwcC9zcmMvYXBwL3BhZ2UudHN4XCIsXG4gICAgICAgIGxpbmVOdW1iZXI6IDEwMixcbiAgICAgICAgY29sdW1uTnVtYmVyOiA5XG4gICAgICB9LCB0aGlzKV1cbiAgICB9LCB2b2lkIDAsIHRydWUsIHtcbiAgICAgIGZpbGVOYW1lOiBcIi9Vc2Vycy9zaXJpd2F0a25wL1BlcnNvbmFsLVJlcG9zL21hdGVyaWFsLXVpL2FwcHMvemVyby1ydW50aW1lLW5leHQtYXBwL3NyYy9hcHAvcGFnZS50c3hcIixcbiAgICAgIGxpbmVOdW1iZXI6IDk3LFxuICAgICAgY29sdW1uTnVtYmVyOiA3XG4gICAgfSwgdGhpcyksIC8qI19fUFVSRV9fKi9fanN4REVWKFwiZGl2XCIsIHtcbiAgICAgIGNsYXNzTmFtZTogc3R5bGVzLmNlbnRlcixcbiAgICAgIGNoaWxkcmVuOiAvKiNfX1BVUkVfXyovX2pzeERFVihJbWFnZSwge1xuICAgICAgICBjbGFzc05hbWU6IHN0eWxlcy5sb2dvLFxuICAgICAgICBzcmM6IFwiL25leHQuc3ZnXCIsXG4gICAgICAgIGFsdDogXCJOZXh0LmpzIExvZ29cIixcbiAgICAgICAgd2lkdGg6IDE4MCxcbiAgICAgICAgaGVpZ2h0OiAzNyxcbiAgICAgICAgcHJpb3JpdHk6IHRydWVcbiAgICAgIH0sIHZvaWQgMCwgZmFsc2UsIHtcbiAgICAgICAgZmlsZU5hbWU6IFwiL1VzZXJzL3Npcml3YXRrbnAvUGVyc29uYWwtUmVwb3MvbWF0ZXJpYWwtdWkvYXBwcy96ZXJvLXJ1bnRpbWUtbmV4dC1hcHAvc3JjL2FwcC9wYWdlLnRzeFwiLFxuICAgICAgICBsaW5lTnVtYmVyOiAxMjIsXG4gICAgICAgIGNvbHVtbk51bWJlcjogOVxuICAgICAgfSwgdGhpcylcbiAgICB9LCB2b2lkIDAsIGZhbHNlLCB7XG4gICAgICBmaWxlTmFtZTogXCIvVXNlcnMvc2lyaXdhdGtucC9QZXJzb25hbC1SZXBvcy9tYXRlcmlhbC11aS9hcHBzL3plcm8tcnVudGltZS1uZXh0LWFwcC9zcmMvYXBwL3BhZ2UudHN4XCIsXG4gICAgICBsaW5lTnVtYmVyOiAxMjEsXG4gICAgICBjb2x1bW5OdW1iZXI6IDdcbiAgICB9LCB0aGlzKSwgLyojX19QVVJFX18qL19qc3hERVYoXCJkaXZcIiwge1xuICAgICAgY2xhc3NOYW1lOiBzdHlsZXMuZ3JpZCxcbiAgICAgIGNoaWxkcmVuOiBbLyojX19QVVJFX18qL19qc3hERVYoXCJhXCIsIHtcbiAgICAgICAgaHJlZjogXCJodHRwczovL25leHRqcy5vcmcvZG9jcz91dG1fc291cmNlPWNyZWF0ZS1uZXh0LWFwcCZ1dG1fbWVkaXVtPWFwcGRpci10ZW1wbGF0ZSZ1dG1fY2FtcGFpZ249Y3JlYXRlLW5leHQtYXBwXCIsXG4gICAgICAgIGNsYXNzTmFtZTogc3R5bGVzLmNhcmQsXG4gICAgICAgIHRhcmdldDogXCJfYmxhbmtcIixcbiAgICAgICAgcmVsOiBcIm5vb3BlbmVyXCIsXG4gICAgICAgIGNoaWxkcmVuOiBbLyojX19QVVJFX18qL19qc3hERVYoXCJoMlwiLCB7XG4gICAgICAgICAgY2hpbGRyZW46IFtcIkRvY3MgXCIsIC8qI19fUFVSRV9fKi9fanN4REVWKFwic3BhblwiLCB7XG4gICAgICAgICAgICBjaGlsZHJlbjogXCItPlwiXG4gICAgICAgICAgfSwgdm9pZCAwLCBmYWxzZSwge1xuICAgICAgICAgICAgZmlsZU5hbWU6IFwiL1VzZXJzL3Npcml3YXRrbnAvUGVyc29uYWwtUmVwb3MvbWF0ZXJpYWwtdWkvYXBwcy96ZXJvLXJ1bnRpbWUtbmV4dC1hcHAvc3JjL2FwcC9wYWdlLnRzeFwiLFxuICAgICAgICAgICAgbGluZU51bWJlcjogMTQwLFxuICAgICAgICAgICAgY29sdW1uTnVtYmVyOiAxOFxuICAgICAgICAgIH0sIHRoaXMpXVxuICAgICAgICB9LCB2b2lkIDAsIHRydWUsIHtcbiAgICAgICAgICBmaWxlTmFtZTogXCIvVXNlcnMvc2lyaXdhdGtucC9QZXJzb25hbC1SZXBvcy9tYXRlcmlhbC11aS9hcHBzL3plcm8tcnVudGltZS1uZXh0LWFwcC9zcmMvYXBwL3BhZ2UudHN4XCIsXG4gICAgICAgICAgbGluZU51bWJlcjogMTM5LFxuICAgICAgICAgIGNvbHVtbk51bWJlcjogMTFcbiAgICAgICAgfSwgdGhpcyksIC8qI19fUFVSRV9fKi9fanN4REVWKFwicFwiLCB7XG4gICAgICAgICAgY2hpbGRyZW46IFwiRmluZCBpbi1kZXB0aCBpbmZvcm1hdGlvbiBhYm91dCBOZXh0LmpzIGZlYXR1cmVzIGFuZCBBUEkuXCJcbiAgICAgICAgfSwgdm9pZCAwLCBmYWxzZSwge1xuICAgICAgICAgIGZpbGVOYW1lOiBcIi9Vc2Vycy9zaXJpd2F0a25wL1BlcnNvbmFsLVJlcG9zL21hdGVyaWFsLXVpL2FwcHMvemVyby1ydW50aW1lLW5leHQtYXBwL3NyYy9hcHAvcGFnZS50c3hcIixcbiAgICAgICAgICBsaW5lTnVtYmVyOiAxNDIsXG4gICAgICAgICAgY29sdW1uTnVtYmVyOiAxMVxuICAgICAgICB9LCB0aGlzKV1cbiAgICAgIH0sIHZvaWQgMCwgdHJ1ZSwge1xuICAgICAgICBmaWxlTmFtZTogXCIvVXNlcnMvc2lyaXdhdGtucC9QZXJzb25hbC1SZXBvcy9tYXRlcmlhbC11aS9hcHBzL3plcm8tcnVudGltZS1uZXh0LWFwcC9zcmMvYXBwL3BhZ2UudHN4XCIsXG4gICAgICAgIGxpbmVOdW1iZXI6IDEzMyxcbiAgICAgICAgY29sdW1uTnVtYmVyOiA5XG4gICAgICB9LCB0aGlzKSwgLyojX19QVVJFX18qL19qc3hERVYoXCJhXCIsIHtcbiAgICAgICAgaHJlZjogXCJodHRwczovL25leHRqcy5vcmcvbGVhcm4%2FdXRtX3NvdXJjZT1jcmVhdGUtbmV4dC1hcHAmdXRtX21lZGl1bT1hcHBkaXItdGVtcGxhdGUmdXRtX2NhbXBhaWduPWNyZWF0ZS1uZXh0LWFwcFwiLFxuICAgICAgICBjbGFzc05hbWU6IHN0eWxlcy5jYXJkLFxuICAgICAgICB0YXJnZXQ6IFwiX2JsYW5rXCIsXG4gICAgICAgIHJlbDogXCJub29wZW5lclwiLFxuICAgICAgICBjaGlsZHJlbjogWy8qI19fUFVSRV9fKi9fanN4REVWKFwiaDJcIiwge1xuICAgICAgICAgIGNoaWxkcmVuOiBbXCJMZWFybiBcIiwgLyojX19QVVJFX18qL19qc3hERVYoXCJzcGFuXCIsIHtcbiAgICAgICAgICAgIGNoaWxkcmVuOiBcIi0%2BXCJcbiAgICAgICAgICB9LCB2b2lkIDAsIGZhbHNlLCB7XG4gICAgICAgICAgICBmaWxlTmFtZTogXCIvVXNlcnMvc2lyaXdhdGtucC9QZXJzb25hbC1SZXBvcy9tYXRlcmlhbC11aS9hcHBzL3plcm8tcnVudGltZS1uZXh0LWFwcC9zcmMvYXBwL3BhZ2UudHN4XCIsXG4gICAgICAgICAgICBsaW5lTnVtYmVyOiAxNTIsXG4gICAgICAgICAgICBjb2x1bW5OdW1iZXI6IDE5XG4gICAgICAgICAgfSwgdGhpcyldXG4gICAgICAgIH0sIHZvaWQgMCwgdHJ1ZSwge1xuICAgICAgICAgIGZpbGVOYW1lOiBcIi9Vc2Vycy9zaXJpd2F0a25wL1BlcnNvbmFsLVJlcG9zL21hdGVyaWFsLXVpL2FwcHMvemVyby1ydW50aW1lLW5leHQtYXBwL3NyYy9hcHAvcGFnZS50c3hcIixcbiAgICAgICAgICBsaW5lTnVtYmVyOiAxNTEsXG4gICAgICAgICAgY29sdW1uTnVtYmVyOiAxMVxuICAgICAgICB9LCB0aGlzKSwgLyojX19QVVJFX18qL19qc3hERVYoXCJwXCIsIHtcbiAgICAgICAgICBjaGlsZHJlbjogXCJMZWFybiBhYm91dCBOZXh0LmpzIGluIGFuIGludGVyYWN0aXZlIGNvdXJzZSB3aXRoXFx4YTBxdWl6emVzIVwiXG4gICAgICAgIH0sIHZvaWQgMCwgZmFsc2UsIHtcbiAgICAgICAgICBmaWxlTmFtZTogXCIvVXNlcnMvc2lyaXdhdGtucC9QZXJzb25hbC1SZXBvcy9tYXRlcmlhbC11aS9hcHBzL3plcm8tcnVudGltZS1uZXh0LWFwcC9zcmMvYXBwL3BhZ2UudHN4XCIsXG4gICAgICAgICAgbGluZU51bWJlcjogMTU0LFxuICAgICAgICAgIGNvbHVtbk51bWJlcjogMTFcbiAgICAgICAgfSwgdGhpcyldXG4gICAgICB9LCB2b2lkIDAsIHRydWUsIHtcbiAgICAgICAgZmlsZU5hbWU6IFwiL1VzZXJzL3Npcml3YXRrbnAvUGVyc29uYWwtUmVwb3MvbWF0ZXJpYWwtdWkvYXBwcy96ZXJvLXJ1bnRpbWUtbmV4dC1hcHAvc3JjL2FwcC9wYWdlLnRzeFwiLFxuICAgICAgICBsaW5lTnVtYmVyOiAxNDUsXG4gICAgICAgIGNvbHVtbk51bWJlcjogOVxuICAgICAgfSwgdGhpcyksIC8qI19fUFVSRV9fKi9fanN4REVWKFwiYVwiLCB7XG4gICAgICAgIGhyZWY6IFwiaHR0cHM6Ly92ZXJjZWwuY29tL3RlbXBsYXRlcz9mcmFtZXdvcms9bmV4dC5qcyZ1dG1fc291cmNlPWNyZWF0ZS1uZXh0LWFwcCZ1dG1fbWVkaXVtPWFwcGRpci10ZW1wbGF0ZSZ1dG1fY2FtcGFpZ249Y3JlYXRlLW5leHQtYXBwXCIsXG4gICAgICAgIGNsYXNzTmFtZTogc3R5bGVzLmNhcmQsXG4gICAgICAgIHRhcmdldDogXCJfYmxhbmtcIixcbiAgICAgICAgcmVsOiBcIm5vb3BlbmVyXCIsXG4gICAgICAgIGNoaWxkcmVuOiBbLyojX19QVVJFX18qL19qc3hERVYoXCJoMlwiLCB7XG4gICAgICAgICAgY2hpbGRyZW46IFtcIlRlbXBsYXRlcyBcIiwgLyojX19QVVJFX18qL19qc3hERVYoXCJzcGFuXCIsIHtcbiAgICAgICAgICAgIGNoaWxkcmVuOiBcIi0%2BXCJcbiAgICAgICAgICB9LCB2b2lkIDAsIGZhbHNlLCB7XG4gICAgICAgICAgICBmaWxlTmFtZTogXCIvVXNlcnMvc2lyaXdhdGtucC9QZXJzb25hbC1SZXBvcy9tYXRlcmlhbC11aS9hcHBzL3plcm8tcnVudGltZS1uZXh0LWFwcC9zcmMvYXBwL3BhZ2UudHN4XCIsXG4gICAgICAgICAgICBsaW5lTnVtYmVyOiAxNjQsXG4gICAgICAgICAgICBjb2x1bW5OdW1iZXI6IDIzXG4gICAgICAgICAgfSwgdGhpcyldXG4gICAgICAgIH0sIHZvaWQgMCwgdHJ1ZSwge1xuICAgICAgICAgIGZpbGVOYW1lOiBcIi9Vc2Vycy9zaXJpd2F0a25wL1BlcnNvbmFsLVJlcG9zL21hdGVyaWFsLXVpL2FwcHMvemVyby1ydW50aW1lLW5leHQtYXBwL3NyYy9hcHAvcGFnZS50c3hcIixcbiAgICAgICAgICBsaW5lTnVtYmVyOiAxNjMsXG4gICAgICAgICAgY29sdW1uTnVtYmVyOiAxMVxuICAgICAgICB9LCB0aGlzKSwgLyojX19QVVJFX18qL19qc3hERVYoXCJwXCIsIHtcbiAgICAgICAgICBjaGlsZHJlbjogXCJFeHBsb3JlIHRoZSBOZXh0LmpzIDEzIHBsYXlncm91bmQuXCJcbiAgICAgICAgfSwgdm9pZCAwLCBmYWxzZSwge1xuICAgICAgICAgIGZpbGVOYW1lOiBcIi9Vc2Vycy9zaXJpd2F0a25wL1BlcnNvbmFsLVJlcG9zL21hdGVyaWFsLXVpL2FwcHMvemVyby1ydW50aW1lLW5leHQtYXBwL3NyYy9hcHAvcGFnZS50c3hcIixcbiAgICAgICAgICBsaW5lTnVtYmVyOiAxNjYsXG4gICAgICAgICAgY29sdW1uTnVtYmVyOiAxMVxuICAgICAgICB9LCB0aGlzKV1cbiAgICAgIH0sIHZvaWQgMCwgdHJ1ZSwge1xuICAgICAgICBmaWxlTmFtZTogXCIvVXNlcnMvc2lyaXdhdGtucC9QZXJzb25hbC1SZXBvcy9tYXRlcmlhbC11aS9hcHBzL3plcm8tcnVudGltZS1uZXh0LWFwcC9zcmMvYXBwL3BhZ2UudHN4XCIsXG4gICAgICAgIGxpbmVOdW1iZXI6IDE1NyxcbiAgICAgICAgY29sdW1uTnVtYmVyOiA5XG4gICAgICB9LCB0aGlzKSwgLyojX19QVVJFX18qL19qc3hERVYoXCJhXCIsIHtcbiAgICAgICAgaHJlZjogXCJodHRwczovL3ZlcmNlbC5jb20vbmV3P3V0bV9zb3VyY2U9Y3JlYXRlLW5leHQtYXBwJnV0bV9tZWRpdW09YXBwZGlyLXRlbXBsYXRlJnV0bV9jYW1wYWlnbj1jcmVhdGUtbmV4dC1hcHBcIixcbiAgICAgICAgY2xhc3NOYW1lOiBzdHlsZXMuY2FyZCxcbiAgICAgICAgdGFyZ2V0OiBcIl9ibGFua1wiLFxuICAgICAgICByZWw6IFwibm9vcGVuZXIgbm9yZWZlcnJlclwiLFxuICAgICAgICBjaGlsZHJlbjogWy8qI19fUFVSRV9fKi9fanN4REVWKFwiaDJcIiwge1xuICAgICAgICAgIGNoaWxkcmVuOiBbXCJEZXBsb3kgXCIsIC8qI19fUFVSRV9fKi9fanN4REVWKFwic3BhblwiLCB7XG4gICAgICAgICAgICBjaGlsZHJlbjogXCItPlwiXG4gICAgICAgICAgfSwgdm9pZCAwLCBmYWxzZSwge1xuICAgICAgICAgICAgZmlsZU5hbWU6IFwiL1VzZXJzL3Npcml3YXRrbnAvUGVyc29uYWwtUmVwb3MvbWF0ZXJpYWwtdWkvYXBwcy96ZXJvLXJ1bnRpbWUtbmV4dC1hcHAvc3JjL2FwcC9wYWdlLnRzeFwiLFxuICAgICAgICAgICAgbGluZU51bWJlcjogMTc2LFxuICAgICAgICAgICAgY29sdW1uTnVtYmVyOiAyMFxuICAgICAgICAgIH0sIHRoaXMpXVxuICAgICAgICB9LCB2b2lkIDAsIHRydWUsIHtcbiAgICAgICAgICBmaWxlTmFtZTogXCIvVXNlcnMvc2lyaXdhdGtucC9QZXJzb25hbC1SZXBvcy9tYXRlcmlhbC11aS9hcHBzL3plcm8tcnVudGltZS1uZXh0LWFwcC9zcmMvYXBwL3BhZ2UudHN4XCIsXG4gICAgICAgICAgbGluZU51bWJlcjogMTc1LFxuICAgICAgICAgIGNvbHVtbk51bWJlcjogMTFcbiAgICAgICAgfSwgdGhpcyksIC8qI19fUFVSRV9fKi9fanN4REVWKFwicFwiLCB7XG4gICAgICAgICAgY2hpbGRyZW46IFwiSW5zdGFudGx5IGRlcGxveSB5b3VyIE5leHQuanMgc2l0ZSB0byBhIHNoYXJlYWJsZSBVUkwgd2l0aCBWZXJjZWwuXCJcbiAgICAgICAgfSwgdm9pZCAwLCBmYWxzZSwge1xuICAgICAgICAgIGZpbGVOYW1lOiBcIi9Vc2Vycy9zaXJpd2F0a25wL1BlcnNvbmFsLVJlcG9zL21hdGVyaWFsLXVpL2FwcHMvemVyby1ydW50aW1lLW5leHQtYXBwL3NyYy9hcHAvcGFnZS50c3hcIixcbiAgICAgICAgICBsaW5lTnVtYmVyOiAxNzgsXG4gICAgICAgICAgY29sdW1uTnVtYmVyOiAxMVxuICAgICAgICB9LCB0aGlzKV1cbiAgICAgIH0sIHZvaWQgMCwgdHJ1ZSwge1xuICAgICAgICBmaWxlTmFtZTogXCIvVXNlcnMvc2lyaXdhdGtucC9QZXJzb25hbC1SZXBvcy9tYXRlcmlhbC11aS9hcHBzL3plcm8tcnVudGltZS1uZXh0LWFwcC9zcmMvYXBwL3BhZ2UudHN4XCIsXG4gICAgICAgIGxpbmVOdW1iZXI6IDE2OSxcbiAgICAgICAgY29sdW1uTnVtYmVyOiA5XG4gICAgICB9LCB0aGlzKV1cbiAgICB9LCB2b2lkIDAsIHRydWUsIHtcbiAgICAgIGZpbGVOYW1lOiBcIi9Vc2Vycy9zaXJpd2F0a25wL1BlcnNvbmFsLVJlcG9zL21hdGVyaWFsLXVpL2FwcHMvemVyby1ydW50aW1lLW5leHQtYXBwL3NyYy9hcHAvcGFnZS50c3hcIixcbiAgICAgIGxpbmVOdW1iZXI6IDEzMixcbiAgICAgIGNvbHVtbk51bWJlcjogN1xuICAgIH0sIHRoaXMpXVxuICB9LCB2b2lkIDAsIHRydWUsIHtcbiAgICBmaWxlTmFtZTogXCIvVXNlcnMvc2lyaXdhdGtucC9QZXJzb25hbC1SZXBvcy9tYXRlcmlhbC11aS9hcHBzL3plcm8tcnVudGltZS1uZXh0LWFwcC9zcmMvYXBwL3BhZ2UudHN4XCIsXG4gICAgbGluZU51bWJlcjogOTIsXG4gICAgY29sdW1uTnVtYmVyOiA1XG4gIH0sIHRoaXMpO1xufSJdfQ%3D%3D*%2F%22%7D"; +import { styled as _styled2 } from "@mui/zero-runtime"; +import _theme2 from "@mui/zero-runtime/theme"; +import { styled as _styled } from "@mui/zero-runtime"; +import _theme from "@mui/zero-runtime/theme"; +import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime"; +import Image from "next/image"; +import Badge from "@mui/material/Badge"; +import styles from "./page.module.css"; +const visuallyHidden = "visuallyHidden_v1bdmy7h"; +const Main = /*#__PURE__*/_styled("main")({ + classes: ["Main_m1o6sjk5"] +}); +const Description = /*#__PURE__*/_styled2("div")({ + classes: ["Description_d1wnawl7"] +}); +export default function Home() { + return /*#__PURE__*/_jsxDEV(Main, { + children: [/*#__PURE__*/_jsxDEV("div", { + className: visuallyHidden, + children: "I am invisible" + }, void 0, false, { + fileName: "/Users/siriwatknp/Personal-Repos/material-ui/apps/zero-runtime-next-app/src/app/page.tsx", + lineNumber: 93, + columnNumber: 7 + }, this), /*#__PURE__*/_jsxDEV(Badge, { + variant: "dot", + children: /*#__PURE__*/_jsxDEV("div", { + children: "Hey" + }, void 0, false, { + fileName: "/Users/siriwatknp/Personal-Repos/material-ui/apps/zero-runtime-next-app/src/app/page.tsx", + lineNumber: 95, + columnNumber: 9 + }, this) + }, void 0, false, { + fileName: "/Users/siriwatknp/Personal-Repos/material-ui/apps/zero-runtime-next-app/src/app/page.tsx", + lineNumber: 94, + columnNumber: 7 + }, this), /*#__PURE__*/_jsxDEV(Description, { + children: [/*#__PURE__*/_jsxDEV("p", { + children: ["Get started by editing\xa0", /*#__PURE__*/_jsxDEV("code", { + className: styles.code, + children: "src/app/page.tsx" + }, void 0, false, { + fileName: "/Users/siriwatknp/Personal-Repos/material-ui/apps/zero-runtime-next-app/src/app/page.tsx", + lineNumber: 100, + columnNumber: 11 + }, this)] + }, void 0, true, { + fileName: "/Users/siriwatknp/Personal-Repos/material-ui/apps/zero-runtime-next-app/src/app/page.tsx", + lineNumber: 98, + columnNumber: 9 + }, this), /*#__PURE__*/_jsxDEV("div", { + children: /*#__PURE__*/_jsxDEV("a", { + href: "https://vercel.com?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app", + target: "_blank", + rel: "noopener", + children: ["By", " ", /*#__PURE__*/_jsxDEV(Image, { + src: "/vercel.svg", + alt: "Vercel Logo", + className: styles.vercelLogo, + width: 100, + height: 24, + priority: true + }, void 0, false, { + fileName: "/Users/siriwatknp/Personal-Repos/material-ui/apps/zero-runtime-next-app/src/app/page.tsx", + lineNumber: 109, + columnNumber: 13 + }, this)] + }, void 0, true, { + fileName: "/Users/siriwatknp/Personal-Repos/material-ui/apps/zero-runtime-next-app/src/app/page.tsx", + lineNumber: 103, + columnNumber: 11 + }, this) + }, void 0, false, { + fileName: "/Users/siriwatknp/Personal-Repos/material-ui/apps/zero-runtime-next-app/src/app/page.tsx", + lineNumber: 102, + columnNumber: 9 + }, this)] + }, void 0, true, { + fileName: "/Users/siriwatknp/Personal-Repos/material-ui/apps/zero-runtime-next-app/src/app/page.tsx", + lineNumber: 97, + columnNumber: 7 + }, this), /*#__PURE__*/_jsxDEV("div", { + className: styles.center, + children: /*#__PURE__*/_jsxDEV(Image, { + className: styles.logo, + src: "/next.svg", + alt: "Next.js Logo", + width: 180, + height: 37, + priority: true + }, void 0, false, { + fileName: "/Users/siriwatknp/Personal-Repos/material-ui/apps/zero-runtime-next-app/src/app/page.tsx", + lineNumber: 122, + columnNumber: 9 + }, this) + }, void 0, false, { + fileName: "/Users/siriwatknp/Personal-Repos/material-ui/apps/zero-runtime-next-app/src/app/page.tsx", + lineNumber: 121, + columnNumber: 7 + }, this), /*#__PURE__*/_jsxDEV("div", { + className: styles.grid, + children: [/*#__PURE__*/_jsxDEV("a", { + href: "https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app", + className: styles.card, + target: "_blank", + rel: "noopener", + children: [/*#__PURE__*/_jsxDEV("h2", { + children: ["Docs ", /*#__PURE__*/_jsxDEV("span", { + children: "->" + }, void 0, false, { + fileName: "/Users/siriwatknp/Personal-Repos/material-ui/apps/zero-runtime-next-app/src/app/page.tsx", + lineNumber: 140, + columnNumber: 18 + }, this)] + }, void 0, true, { + fileName: "/Users/siriwatknp/Personal-Repos/material-ui/apps/zero-runtime-next-app/src/app/page.tsx", + lineNumber: 139, + columnNumber: 11 + }, this), /*#__PURE__*/_jsxDEV("p", { + children: "Find in-depth information about Next.js features and API." + }, void 0, false, { + fileName: "/Users/siriwatknp/Personal-Repos/material-ui/apps/zero-runtime-next-app/src/app/page.tsx", + lineNumber: 142, + columnNumber: 11 + }, this)] + }, void 0, true, { + fileName: "/Users/siriwatknp/Personal-Repos/material-ui/apps/zero-runtime-next-app/src/app/page.tsx", + lineNumber: 133, + columnNumber: 9 + }, this), /*#__PURE__*/_jsxDEV("a", { + href: "https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app", + className: styles.card, + target: "_blank", + rel: "noopener", + children: [/*#__PURE__*/_jsxDEV("h2", { + children: ["Learn ", /*#__PURE__*/_jsxDEV("span", { + children: "->" + }, void 0, false, { + fileName: "/Users/siriwatknp/Personal-Repos/material-ui/apps/zero-runtime-next-app/src/app/page.tsx", + lineNumber: 152, + columnNumber: 19 + }, this)] + }, void 0, true, { + fileName: "/Users/siriwatknp/Personal-Repos/material-ui/apps/zero-runtime-next-app/src/app/page.tsx", + lineNumber: 151, + columnNumber: 11 + }, this), /*#__PURE__*/_jsxDEV("p", { + children: "Learn about Next.js in an interactive course with\xa0quizzes!" + }, void 0, false, { + fileName: "/Users/siriwatknp/Personal-Repos/material-ui/apps/zero-runtime-next-app/src/app/page.tsx", + lineNumber: 154, + columnNumber: 11 + }, this)] + }, void 0, true, { + fileName: "/Users/siriwatknp/Personal-Repos/material-ui/apps/zero-runtime-next-app/src/app/page.tsx", + lineNumber: 145, + columnNumber: 9 + }, this), /*#__PURE__*/_jsxDEV("a", { + href: "https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app", + className: styles.card, + target: "_blank", + rel: "noopener", + children: [/*#__PURE__*/_jsxDEV("h2", { + children: ["Templates ", /*#__PURE__*/_jsxDEV("span", { + children: "->" + }, void 0, false, { + fileName: "/Users/siriwatknp/Personal-Repos/material-ui/apps/zero-runtime-next-app/src/app/page.tsx", + lineNumber: 164, + columnNumber: 23 + }, this)] + }, void 0, true, { + fileName: "/Users/siriwatknp/Personal-Repos/material-ui/apps/zero-runtime-next-app/src/app/page.tsx", + lineNumber: 163, + columnNumber: 11 + }, this), /*#__PURE__*/_jsxDEV("p", { + children: "Explore the Next.js 13 playground." + }, void 0, false, { + fileName: "/Users/siriwatknp/Personal-Repos/material-ui/apps/zero-runtime-next-app/src/app/page.tsx", + lineNumber: 166, + columnNumber: 11 + }, this)] + }, void 0, true, { + fileName: "/Users/siriwatknp/Personal-Repos/material-ui/apps/zero-runtime-next-app/src/app/page.tsx", + lineNumber: 157, + columnNumber: 9 + }, this), /*#__PURE__*/_jsxDEV("a", { + href: "https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app", + className: styles.card, + target: "_blank", + rel: "noopener noreferrer", + children: [/*#__PURE__*/_jsxDEV("h2", { + children: ["Deploy ", /*#__PURE__*/_jsxDEV("span", { + children: "->" + }, void 0, false, { + fileName: "/Users/siriwatknp/Personal-Repos/material-ui/apps/zero-runtime-next-app/src/app/page.tsx", + lineNumber: 176, + columnNumber: 20 + }, this)] + }, void 0, true, { + fileName: "/Users/siriwatknp/Personal-Repos/material-ui/apps/zero-runtime-next-app/src/app/page.tsx", + lineNumber: 175, + columnNumber: 11 + }, this), /*#__PURE__*/_jsxDEV("p", { + children: "Instantly deploy your Next.js site to a shareable URL with Vercel." + }, void 0, false, { + fileName: "/Users/siriwatknp/Personal-Repos/material-ui/apps/zero-runtime-next-app/src/app/page.tsx", + lineNumber: 178, + columnNumber: 11 + }, this)] + }, void 0, true, { + fileName: "/Users/siriwatknp/Personal-Repos/material-ui/apps/zero-runtime-next-app/src/app/page.tsx", + lineNumber: 169, + columnNumber: 9 + }, this)] + }, void 0, true, { + fileName: "/Users/siriwatknp/Personal-Repos/material-ui/apps/zero-runtime-next-app/src/app/page.tsx", + lineNumber: 132, + columnNumber: 7 + }, this)] + }, void 0, true, { + fileName: "/Users/siriwatknp/Personal-Repos/material-ui/apps/zero-runtime-next-app/src/app/page.tsx", + lineNumber: 92, + columnNumber: 5 + }, this); +} \ No newline at end of file diff --git a/apps/zero-runtime-next-app/next.config.js b/apps/zero-runtime-next-app/next.config.js index 57a52d81b50b8d..1b2a7f58906be7 100644 --- a/apps/zero-runtime-next-app/next.config.js +++ b/apps/zero-runtime-next-app/next.config.js @@ -1,24 +1,89 @@ /* eslint-env node */ // eslint-ignore-next-line import/no-unresolved const { withZeroPlugin } = require('@mui/zero-next-plugin'); -const { experimental_extendTheme: extendTheme } = require('@mui/material/styles'); +const { extendTheme } = require('@mui/zero-runtime'); + +/** + * @typedef {import('@mui/zero-next-plugin').ZeroPluginConfig} ZeroPluginConfig + */ const theme = extendTheme({ - cssVarPrefix: 'app', - components: { - MuiBadge: { - defaultProps: { - color: 'error', + 'max-width': '1100px', + 'border-radius': '12px', + 'font-mono': `ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI Mono', 'Roboto Mono', 'Oxygen Mono', 'Ubuntu Monospace', 'Source Code Pro', 'Fira Mono', 'Droid Sans Mono', 'Courier New', monospace`, + colorSchemes: { + light: { + 'foreground-rgb': '0, 0, 0', + 'background-start-rgb': '214, 219, 220', + 'background-end-rgb': '255, 255, 255', + 'primary-glow': `conic-gradient( + from 180deg at 50% 50%, + #16abff33 0deg, + #0885ff33 55deg, + #54d6ff33 120deg, + #0071ff33 160deg, + transparent 360deg + )`, + 'secondary-glow': `radial-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 0))`, + title: { + 'start-rbg': '239, 245, 249', + 'end-rgb': '228, 232, 233', + border: `conic-gradient( + #00000080, + #00000040, + #00000030, + #00000020, + #00000010, + #00000010, + #00000080 + )`, + }, + callout: { + rgb: '238, 240, 241', + 'border-rgb': '172, 175, 176', + }, + card: { + rgb: '180, 185, 188', + 'border-rgb': '131, 134, 135', + }, + }, + dark: { + 'foreground-rgb': '255, 255, 255', + 'background-start-rgb': '0, 0, 0', + 'background-end-rgb': '0, 0, 0', + 'primary-glow': `radial-gradient(rgba(1, 65, 255, 0.4), rgba(1, 65, 255, 0))`, + 'secondary-glow': `linear-gradient( + to bottom right, + rgba(1, 65, 255, 0), + rgba(1, 65, 255, 0), + rgba(1, 65, 255, 0.3) + )`, + title: { + 'start-rbg': '2, 13, 46', + 'end-rgb': '2, 5, 19', + border: `conic-gradient( + #ffffff80, + #ffffff40, + #ffffff30, + #ffffff20, + #ffffff10, + #ffffff10, + #ffffff80 + )`, + }, + callout: { + rgb: '20, 20, 20', + 'border-rgb': '108, 108, 108', + }, + card: { + rgb: '100, 100, 100', + 'border-rgb': '200, 200, 200', }, }, }, }); -theme.getColorSchemeSelector = (targetColorScheme) => - `[data-mui-color-scheme="${targetColorScheme}"] &`; -/** - * @typedef {import('@mui/zero-next-plugin').ZeroPluginConfig} ZeroPluginConfig - */ +// { [theme.getColorSchemeSelector('dark')]: { color: 'black' } } /** * @type {ZeroPluginConfig} diff --git a/apps/zero-runtime-next-app/src/app/globals.css b/apps/zero-runtime-next-app/src/app/globals.css index 1a51ef7fd13c01..f986282c43ac47 100644 --- a/apps/zero-runtime-next-app/src/app/globals.css +++ b/apps/zero-runtime-next-app/src/app/globals.css @@ -1,75 +1,3 @@ -:root { - --max-width: 1100px; - --border-radius: 12px; - --font-mono: ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI Mono', 'Roboto Mono', - 'Oxygen Mono', 'Ubuntu Monospace', 'Source Code Pro', 'Fira Mono', 'Droid Sans Mono', - 'Courier New', monospace; - - --foreground-rgb: 0, 0, 0; - --background-start-rgb: 214, 219, 220; - --background-end-rgb: 255, 255, 255; - - --primary-glow: conic-gradient( - from 180deg at 50% 50%, - #16abff33 0deg, - #0885ff33 55deg, - #54d6ff33 120deg, - #0071ff33 160deg, - transparent 360deg - ); - --secondary-glow: radial-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)); - - --tile-start-rgb: 239, 245, 249; - --tile-end-rgb: 228, 232, 233; - --tile-border: conic-gradient( - #00000080, - #00000040, - #00000030, - #00000020, - #00000010, - #00000010, - #00000080 - ); - - --callout-rgb: 238, 240, 241; - --callout-border-rgb: 172, 175, 176; - --card-rgb: 180, 185, 188; - --card-border-rgb: 131, 134, 135; -} - -@media (prefers-color-scheme: dark) { - :root { - --foreground-rgb: 255, 255, 255; - --background-start-rgb: 0, 0, 0; - --background-end-rgb: 0, 0, 0; - - --primary-glow: radial-gradient(rgba(1, 65, 255, 0.4), rgba(1, 65, 255, 0)); - --secondary-glow: linear-gradient( - to bottom right, - rgba(1, 65, 255, 0), - rgba(1, 65, 255, 0), - rgba(1, 65, 255, 0.3) - ); - - --tile-start-rgb: 2, 13, 46; - --tile-end-rgb: 2, 5, 19; - --tile-border: conic-gradient( - #ffffff80, - #ffffff40, - #ffffff30, - #ffffff20, - #ffffff10, - #ffffff10, - #ffffff80 - ); - - --callout-rgb: 20, 20, 20; - --callout-border-rgb: 108, 108, 108; - --card-rgb: 100, 100, 100; - --card-border-rgb: 200, 200, 200; - } -} - * { box-sizing: border-box; padding: 0; diff --git a/apps/zero-runtime-next-app/src/app/page.tsx b/apps/zero-runtime-next-app/src/app/page.tsx index 377dca936779c3..e0fcee40f2b8d0 100644 --- a/apps/zero-runtime-next-app/src/app/page.tsx +++ b/apps/zero-runtime-next-app/src/app/page.tsx @@ -1,10 +1,21 @@ import Image from 'next/image'; -import { styled } from '@mui/zero-runtime'; -import Badge from '@mui/material/Badge'; +import { styled, css } from '@mui/zero-runtime'; import styles from './page.module.css'; -const Main = styled.main({ - color: 'rgb(var(--foreground-rgb))', +const visuallyHidden = css({ + border: 0, + clip: 'rect(0 0 0 0)', + height: '1px', + margin: -1, + overflow: 'hidden', + padding: 0, + position: 'absolute', + whiteSpace: 'nowrap', + width: '1px', +}); + +const Main = styled.main(({ theme }) => ({ + color: theme.vars['foreground-rgb'], background: `linear-gradient(to bottom, transparent, rgb(var(--background-end-rgb))) rgb(var(--background-start-rgb))`, display: 'flex', flexDirection: 'column', @@ -12,7 +23,10 @@ const Main = styled.main({ alignItems: 'center', padding: '6rem', minHeight: '100vh', -}); + ...theme.applyStyles('dark', { + color: 'yellow', + }), +})); const Description = styled.div({ display: 'inherit', @@ -78,9 +92,7 @@ const Description = styled.div({ export default function Home() { return (
- -
Hey
- +
I am invisible

Get started by editing  diff --git a/apps/zero-runtime-next-app/src/augment.d.ts b/apps/zero-runtime-next-app/src/augment.d.ts index c229ef09da32c6..6470ed02ca7e82 100644 --- a/apps/zero-runtime-next-app/src/augment.d.ts +++ b/apps/zero-runtime-next-app/src/augment.d.ts @@ -1,14 +1,34 @@ -import type { Theme } from '@mui/material/styles'; -import type {} from '@mui/material/themeCssVarsAugmentation'; -import '@mui/zero-runtime/theme'; +import type { ExtendTheme } from '@mui/zero-runtime'; declare module '@mui/zero-runtime/theme' { - export interface ThemeArgs { - theme: Omit & { - applyStyles: ( - colorScheme: 'light' | 'dark', - styles: Record, - ) => Record; + interface ThemeTokens { + 'max-width': string; + 'border-radius': string; + 'font-mono': string; + 'foreground-rgb': string; + 'background-start-rgb': string; + 'background-end-rgb': string; + 'primary-glow': string; + 'secondary-glow': string; + title: { + 'start-rgb': string; + 'end-rgb': string; + border: string; + }; + callout: { + rgb: string; + 'border-rgb': string; + }; + card: { + rgb: string; + 'border-rgb': string; }; } + + export interface ThemeArgs { + theme: ExtendTheme<{ + colorScheme: 'light' | 'dark'; + tokens: ThemeTokens; + }>; + } } diff --git a/packages/mui-system/src/cssVars/prepareCssVars.ts b/packages/mui-system/src/cssVars/prepareCssVars.ts index 44774fbda318b0..1723fc9cd7679d 100644 --- a/packages/mui-system/src/cssVars/prepareCssVars.ts +++ b/packages/mui-system/src/cssVars/prepareCssVars.ts @@ -6,11 +6,16 @@ export interface DefaultCssVarsTheme { defaultColorScheme?: string; } -function prepareCssVars>( +function prepareCssVars< + T extends DefaultCssVarsTheme, + ThemeVars extends Record, + Selector = any, +>( theme: T, parserConfig?: { prefix?: string; shouldSkipGeneratingVar?: (objectPathKeys: Array, value: string | number) => boolean; + getSelector?: (colorScheme: string | undefined, css: Record) => Selector; }, ) { // @ts-ignore - ignore components do not exist @@ -39,11 +44,18 @@ function prepareCssVars { if (!colorScheme) { - return { css: { ...rootCss }, vars: rootVars }; + const css = { ...rootCss }; + return { + css, + vars: rootVars, + selector: parserConfig?.getSelector?.(colorScheme, css) || ':root', + }; } + const css = { ...colorSchemesMap[colorScheme].css }; return { - css: { ...colorSchemesMap[colorScheme].css }, + css, vars: colorSchemesMap[colorScheme].vars, + selector: parserConfig?.getSelector?.(colorScheme, css) || ':root', }; }; diff --git a/packages/zero-runtime/src/extendTheme.ts b/packages/zero-runtime/src/extendTheme.ts index e1140977761687..abfee8b62139ab 100644 --- a/packages/zero-runtime/src/extendTheme.ts +++ b/packages/zero-runtime/src/extendTheme.ts @@ -1,7 +1,9 @@ +import deepMerge from 'lodash/merge'; import { prepareCssVars } from '@mui/system/cssVars'; import type { SxConfig } from '@mui/system/styleFunctionSx'; +import type { CSSObject } from './base'; -export interface ThemeInput { +export interface ThemeInput { /** * The prefix to be used for the CSS variables. */ @@ -9,26 +11,40 @@ export interface ThemeInput { /** * The color schemes to be used for the theme. */ - colorSchemes?: Record; + colorSchemes?: Record; /** - * The default color scheme to be used for the theme. + * The default color scheme to be used for the theme. It must be one of the keys from `theme.colorSchemes`. * Required when `colorSchemes` is provided. + * @default 'light' */ - defaultColorScheme?: string; - /** - * If provided, the `prefers-color-scheme` media query will be used to apply the CSS variables based on the `light` and `dark` color schemes. - */ - prefersColorScheme?: { - light: string; - dark: string; - }; + defaultColorScheme?: ColorScheme; /** * If provided, it will be used to create a selector for the color scheme. * This is useful if you want to use class or data-* attributes to apply the color scheme. + * + * The default selector is `:root`. + * + * @example + * // class selector + * (colorScheme) => colorScheme ? `.theme-${colorScheme}` : ":root" + * + * @example + * // data-* attribute selector + * (colorScheme) => colorScheme ? `[data-theme="${colorScheme}"`] : ":root" */ - getColorSchemeSelector?: (colorScheme: string) => string; + getSelector?: ( + colorScheme: ColorScheme | undefined, + css: Record, + ) => string | Record; /** * A function to skip generating a CSS variable for a specific path or value. + * + * Note: properties with function as a value are always skipped. + * + * @example + * // skip the `meta.*` fields from generating CSS variables and `theme.vars` + * (keys, value) => keys[0] === 'meta' + * */ shouldSkipGeneratingVar?: (objectPathKeys: Array, value: string | number) => boolean; components?: Partial< @@ -42,31 +58,114 @@ export interface ThemeInput { >; } -export interface Theme extends ThemeInput { - vars: Record; - generateCssVars: (colorScheme?: string) => { css: Record }; - unstable_sxConfig?: SxConfig; -} +export type ExtendTheme< + Options extends { + colorScheme: string; + tokens: Record; + } = { + colorScheme: string; + tokens: Record; + }, +> = ThemeInput & + Options['tokens'] & { + vars: Options['tokens']; + applyStyles: ( + colorScheme: Options['colorScheme'], + styles: CSSObject, + ) => Record>; + getColorSchemeSelector: (colorScheme: Options['colorScheme']) => string; + generateCssVars: (colorScheme?: Options['colorScheme']) => { + css: Record; + selector: string | Record; + }; + unstable_sxConfig?: SxConfig; + }; + +export type Theme = ExtendTheme; /** * A utility to tell zero-runtime to generate CSS variables for the theme. */ -export default function extendTheme(theme: T) { - const { cssVarPrefix, shouldSkipGeneratingVar, prefersColorScheme, ...otherTheme } = theme; +export default function extendTheme< + Options extends { + colorScheme: string; + tokens: Record; + } = { + colorScheme: string; + tokens: Record; + }, +>(theme: ThemeInput) { + const { + cssVarPrefix, + shouldSkipGeneratingVar, + getSelector = defaultGetSelector, + defaultColorScheme = 'light', + ...otherTheme + } = theme; - if (theme.colorSchemes && !theme.defaultColorScheme) { - throw new Error('Zero: `defaultColorScheme` is required when `colorSchemes` is provided.'); + function defaultGetSelector( + colorScheme: string | undefined, + css: Record, + ): string | Record { + if (colorScheme === 'light' && defaultColorScheme !== 'light') { + return { + '@media (prefers-color-scheme: light)': { + ':root': css, + }, + }; + } + if (colorScheme === 'dark' && defaultColorScheme !== 'dark') { + return { + '@media (prefers-color-scheme: dark)': { + ':root': css, + }, + }; + } + return ':root'; + } + + if ( + theme.colorSchemes && + (!defaultColorScheme || !Object.keys(theme.colorSchemes).includes(defaultColorScheme)) + ) { + throw new Error( + `Zero: \`defaultColorScheme\` must be one of ${JSON.stringify( + theme.colorSchemes, + )}, but got "\`${theme.defaultColorScheme}\`".`, + ); } const parserConfig = { prefix: cssVarPrefix, shouldSkipGeneratingVar, + getSelector, }; - const { vars, generateCssVars } = prepareCssVars(otherTheme, parserConfig); + const { generateCssVars } = prepareCssVars(otherTheme, parserConfig); - return { + let { vars } = generateCssVars(); + Object.entries(theme.colorSchemes || {}).forEach(([key]) => { + vars = deepMerge(vars, generateCssVars(key).vars); + }); + + const finalTheme = { ...theme, + defaultColorScheme, vars, generateCssVars, + } as unknown as ExtendTheme<{ colorScheme: Options['colorScheme']; tokens: Options['tokens'] }>; + + finalTheme.getColorSchemeSelector = (colorScheme: string) => { + if (!theme.getSelector) { + return `@media (prefers-color-scheme: ${colorScheme})`; + } + return `:where(${theme.getSelector(colorScheme, {})}) &`; }; + + finalTheme.applyStyles = function applyStyles(colorScheme, styles) { + return { + [this.getColorSchemeSelector(colorScheme)]: styles, + }; + }; + + return finalTheme; } diff --git a/packages/zero-runtime/src/index.ts b/packages/zero-runtime/src/index.ts index 43336fac6e9f34..f2d8fe3bc0894c 100644 --- a/packages/zero-runtime/src/index.ts +++ b/packages/zero-runtime/src/index.ts @@ -5,4 +5,4 @@ export { generateAtomics, atomics } from './generateAtomics'; export { default as css } from './css'; export { default as createUseThemeProps } from './createUseThemeProps'; export { default as extendTheme } from './extendTheme'; -export type { Theme, ThemeInput } from './extendTheme'; +export type { Theme, ExtendTheme, ThemeInput } from './extendTheme'; diff --git a/packages/zero-runtime/src/utils/generateCss.ts b/packages/zero-runtime/src/utils/generateCss.ts index 1e0dbdf2e3953e..08803856953dee 100644 --- a/packages/zero-runtime/src/utils/generateCss.ts +++ b/packages/zero-runtime/src/utils/generateCss.ts @@ -3,42 +3,33 @@ import { Theme } from '../extendTheme'; export function generateTokenCss(theme: Theme) { // create stylesheet as object - const rootCss = theme.generateCssVars().css; - const stylesheetObj: Record> = {}; + const { css: rootCss, selector: rootSelector } = theme.generateCssVars(); + const stylesheets: Array> = []; if (Object.keys(rootCss).length) { - stylesheetObj[':root'] = rootCss; + stylesheets.push(typeof rootSelector === 'string' ? { [rootSelector]: rootCss } : rootSelector); } - Object.entries(theme.colorSchemes || {}).forEach(([key]) => { - const css = theme.generateCssVars(key).css; - if (Object.keys(css).length) { - if (theme.prefersColorScheme) { - if (theme.defaultColorScheme === key) { - stylesheetObj[':root'] = css; - } - if (theme.prefersColorScheme.light === key) { - stylesheetObj['@media (prefers-color-scheme: light)'] = { - ':root': css, - }; - } - if (theme.prefersColorScheme.dark === key) { - stylesheetObj['@media (prefers-color-scheme: dark)'] = { - ':root': css, - }; - } - } - if (theme.getColorSchemeSelector) { - if (theme.defaultColorScheme === key) { - stylesheetObj[`:root, ${theme.getColorSchemeSelector(key)}`] = css; - } else { - stylesheetObj[theme.getColorSchemeSelector(key)] = css; - } + if (theme.colorSchemes) { + const { [theme.defaultColorScheme!]: defaultScheme, ...otherColorSchemes } = theme.colorSchemes; + + if (defaultScheme) { + // need to generate default color scheme first for the prefers-color-scheme media query to work + // because media-queries does not increase specificity + const { css, selector } = theme.generateCssVars(theme.defaultColorScheme); + if (Object.keys(css).length) { + stylesheets.push(typeof selector === 'string' ? { [selector]: css } : selector); } } - }); + + Object.entries(otherColorSchemes).forEach(([key]) => { + const { css, selector } = theme.generateCssVars(key); + if (Object.keys(css).length) { + stylesheets.push(typeof selector === 'string' ? { [selector]: css } : selector); + } + }); + } // use emotion to serialize the object to css string - const { styles } = serializeStyles([stylesheetObj]); - console.log('styles', styles); + const { styles } = serializeStyles(stylesheets); return styles; } From 1760d6ca81f3f0bc585f32db4502dab03767e7c2 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Mon, 5 Feb 2024 16:03:25 +0700 Subject: [PATCH 06/15] update README --- apps/zero-runtime-next-app/src/augment.d.ts | 2 +- packages/zero-runtime/README.md | 213 ++++++++++---------- 2 files changed, 103 insertions(+), 112 deletions(-) diff --git a/apps/zero-runtime-next-app/src/augment.d.ts b/apps/zero-runtime-next-app/src/augment.d.ts index 6470ed02ca7e82..21e002967fcc36 100644 --- a/apps/zero-runtime-next-app/src/augment.d.ts +++ b/apps/zero-runtime-next-app/src/augment.d.ts @@ -25,7 +25,7 @@ declare module '@mui/zero-runtime/theme' { }; } - export interface ThemeArgs { + interface ThemeArgs { theme: ExtendTheme<{ colorScheme: 'light' | 'dark'; tokens: ThemeTokens; diff --git a/packages/zero-runtime/README.md b/packages/zero-runtime/README.md index 91ae9bfc3e9f6f..73b71c1b6d83ce 100644 --- a/packages/zero-runtime/README.md +++ b/packages/zero-runtime/README.md @@ -2,7 +2,6 @@ A zero-runtime CSS-in-JS library that extracts the colocated css to it's own css files at build-time. -- [Mental model](#mental-model) - [Getting started](#getting-started) - [Next.js](#nextjs) - [Vite](#vite) @@ -18,10 +17,6 @@ A zero-runtime CSS-in-JS library that extracts the colocated css to it's own css - [Color schemes](#color-schemes) - [Mutliple themes](#mutliple-themes) -## Mental model - -// TODO: Add a mental model - ## Getting started Zero-runtime supports Next.js and Vite with future support for more bundlersβ€”you must install the corresponding plugin, as shown below. @@ -38,19 +33,9 @@ Then, in your `next.config.js` file, import the plugin and wrap the exported con ```js const { withZeroPlugin } = require('@mui/zero-next-plugin'); -/** - * @type {ZeroPluginConfig} - */ -const zeroPluginOptions = { - theme: {}, // To learn more, check the "Theme" section. -}; - -module.exports = withZeroPlugin( - { - // ...other nextConfig - }, - zeroPluginOptions, -); +module.exports = withZeroPlugin({ + // ... Your nextjs config. +}); ``` ### Vite @@ -67,9 +52,7 @@ import { zeroVitePlugin } from '@mui/zero-vite-plugin'; export default defineConfig({ plugins: [ - zeroVitePlugin({ - theme: {}, // To learn more, check the "Theme" section. - }), + zeroVitePlugin(), // ... Your other plugins. ], }); @@ -210,8 +193,8 @@ const Button = styled('button')({ Use a callback function as a value to create a dynamic style for the specific CSS property: -```tsx -const Heading = styled.h1<{ isError?: boolean }>({ +```jsx +const Heading = styled('h1')({ color: ({ isError }) => (isError ? 'red' : 'black'), }); ``` @@ -262,6 +245,16 @@ const ExtraHeading = styled(Heading)({ }); ``` +#### TypeScript + +Add the type of the props before the styles to get the type checking: + +```tsx +const Heading = styled('h1')<{ isError?: boolean }>({ + color: ({ isError }) => (isError ? 'red' : 'black'), +}); +``` + ### Theme Theme lets you reuse the same values, such as colors, spacing, and typography, across your application. It is a plain object of any structure that you can define in your config file. @@ -271,30 +264,25 @@ For example, in Next.js, you can define the theme in the `next.config.js` file: ```js const { withZeroPlugin } = require('@mui/zero-next-plugin'); -/** - * @type {ZeroPluginConfig} - */ -const zeroPluginOptions = { - theme: { - colors: { - primary: 'tomato', - secondary: 'cyan', - }, - spacing: { - unit: 8, - }, - typography: { - fontFamily: 'Inter, sans-serif', - }, - // ...more keys and values, it's free style! - }, -}; - module.exports = withZeroPlugin( { // ...other nextConfig }, - zeroPluginOptions, + { + theme: { + colors: { + primary: 'tomato', + secondary: 'cyan', + }, + spacing: { + unit: 8, + }, + typography: { + fontFamily: 'Inter, sans-serif', + }, + // ...more keys and values, it's free style! + }, + }, ); ``` @@ -317,33 +305,28 @@ Zero-runtime can generate CSS variables from the theme values when you wrap your ```js const { withZeroPlugin, extendTheme } = require('@mui/zero-next-plugin'); -/** - * @type {ZeroPluginConfig} - */ -const zeroPluginOptions = { - theme: extendTheme({ - colors: { - primary: 'tomato', - secondary: 'cyan', - }, - spacing: { - unit: 8, - }, - typography: { - fontFamily: 'Inter, sans-serif', - }, - }), -}; - module.exports = withZeroPlugin( { // ...other nextConfig }, - zeroPluginOptions, + { + theme: extendTheme({ + colors: { + primary: 'tomato', + secondary: 'cyan', + }, + spacing: { + unit: 8, + }, + typography: { + fontFamily: 'Inter, sans-serif', + }, + }), + }, ); ``` -The `extendTheme` utility will go through the theme object and create a `vars` object which represents the theme tokens that are available as CSS variables. +The `extendTheme` utility will go through the theme and create a `vars` object which represents the tokens that refer to CSS variables. ```jsx const theme = extendTheme({ @@ -357,13 +340,11 @@ console.log(theme.colors.primary); // 'tomato' console.log(theme.vars.colors.primary); // 'var(--colors-primary)' ``` -When `extendTheme` is used, zero-runtime will extract and generate CSS variables to a separate CSS file. - #### Color schemes Some tokens, especially color-related tokens, can have different values for different scenarios. For example in a daylight condition, the background color might be white, but in a dark condition, it might be black. -The `extendTheme` utility lets you define unlimited color schemes: +The `extendTheme` utility lets you define theme with a special `colorSchemes` key: ```jsx extendTheme({ @@ -381,54 +362,42 @@ extendTheme({ }, }, }, - defaultColorScheme: 'light', }); ``` -In the above example, `light` (default) and `dark` color schemes are defined. Next, choose one or both methods to switch between color schemes: - -- **CSS media query**: It uses the [`prefers-color-scheme`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme) media query, no extra JavaScript is required at runtime. - - ```diff - extendTheme({ - colorSchemes: { - light: { ... }, - dark: { ... }, - }, - defaultColorScheme: 'light', - + prefersColorScheme: { - + light: 'light', - + dark: 'dark', - + } - }); - ``` - -- **class, data-\* attribute** : provide a `getColorSchemeSelector` function to tell zero-runtime what selector to apply for each color scheme. This method is more flexible but you need to write a JavaScript to control when and where to attach the attribute. - - ```diff - extendTheme({ - colorSchemes: { - light: { ... }, - dark: { ... }, - }, - defaultColorScheme: 'light', - + getColorSchemeSelector: (colorScheme) => `.${colorScheme}`, - }); - ``` - - The result CSS will be: - - ```css - :root, - .light { - --colors-background: #f9f9f9; - --colors-foreground: #121212; - } - .dark { - --colors-background: #212121; - --colors-foreground: #fff; - } - ``` +In the above example, `light` (default) and `dark` color schemes are defined. The structure of each color scheme must be a plain object with keys and values. + +#### Switching color schemes + +By default, when `colorSchemes` is defined, zero-runtime uses the [`prefers-color-scheme`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme) media query to switch between color schemes based on user's system settings. + +However, if you want to control the color scheme based on application logic, for example, using a button to switch between light and dark mode, you can customize the behavior by providing a `getSelector` function: + +```diff + extendTheme({ + colorSchemes: { + light: { ... }, + dark: { ... }, + }, ++ getSelector: (colorScheme) => colorScheme ? `.theme-${colorScheme}` : ':root', + }); +``` + +Note that you need to add a logic to a button by yourself. Here is an example of how to do it: + +```jsx +function App() { + return ( + + ); +} +``` #### CSS variables prefix @@ -449,6 +418,28 @@ The generated CSS variables will have the `zero` prefix: } ``` +#### TypeScript + +To get the type checking for the theme, you need to augment the theme type: + +```ts +// any file that is included in your tsconfig.json +import type { ExtendTheme } from '@mui/zero-runtime'; + +declare module '@mui/zero-runtime/theme' { + interface ThemeTokens { + // the structure of your theme + } + + interface ThemeArgs { + theme: ExtendTheme<{ + colorScheme: 'light' | 'dark'; + tokens: ThemeTokens; + }>; + } +} +``` + #### Mutliple themes > ⏳ Currently, zero-runtime only supports a single theme. From de4d768faa1b03756b98ae99d5c6c6fe832cede1 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Tue, 6 Feb 2024 10:00:51 +0700 Subject: [PATCH 07/15] remove log files --- apps/zero-runtime-next-app/build-log/Badge.js | 417 ------------------ apps/zero-runtime-next-app/build-log/page.tsx | 227 ---------- 2 files changed, 644 deletions(-) delete mode 100644 apps/zero-runtime-next-app/build-log/Badge.js delete mode 100644 apps/zero-runtime-next-app/build-log/page.tsx diff --git a/apps/zero-runtime-next-app/build-log/Badge.js b/apps/zero-runtime-next-app/build-log/Badge.js deleted file mode 100644 index 39b4f39f455c4b..00000000000000 --- a/apps/zero-runtime-next-app/build-log/Badge.js +++ /dev/null @@ -1,417 +0,0 @@ -import "/Users/siriwatknp/Personal-Repos/material-ui/packages/zero-next-plugin/zero-virtual.css?%7B%22filename%22%3A%2250f7n.zero.css%22%2C%22source%22%3A%22.BadgeRoot_bdxyzxj%7Bposition%3Arelative%3Bdisplay%3Ainline-flex%3Bvertical-align%3Amiddle%3Bflex-shrink%3A0%3B%7D%5Cn.BadgeBadge_b14y6z35%7Bdisplay%3Aflex%3Bflex-direction%3Arow%3Bflex-wrap%3Awrap%3Bjustify-content%3Acenter%3Balign-content%3Acenter%3Balign-items%3Acenter%3Bposition%3Aabsolute%3Bbox-sizing%3Aborder-box%3Bfont-family%3A%5C%22Roboto%5C%22%2C%5C%22Helvetica%5C%22%2C%5C%22Arial%5C%22%2Csans-serif%3Bfont-weight%3A500%3Bfont-size%3A0.75rem%3Bmin-width%3A20px%3Bline-height%3A1%3Bpadding%3A0%206px%3Bheight%3A20px%3Bborder-radius%3A10px%3Bz-index%3A1%3Btransition%3Atransform%20225ms%20cubic-bezier(0.4%2C%200%2C%200.2%2C%201)%200ms%3B%7D%5Cn.BadgeBadge_b14y6z35-variant%7Bbackground-color%3Avar(--app-palette-primary-main%2C%20%231976d2)%3Bcolor%3Avar(--app-palette-primary-contrastText%2C%20%23fff)%3B%7D%5Cn.BadgeBadge_b14y6z35-variant-1%7Bbackground-color%3Avar(--app-palette-secondary-main%2C%20%239c27b0)%3Bcolor%3Avar(--app-palette-secondary-contrastText%2C%20%23fff)%3B%7D%5Cn.BadgeBadge_b14y6z35-variant-2%7Bbackground-color%3Avar(--app-palette-error-main%2C%20%23d32f2f)%3Bcolor%3Avar(--app-palette-error-contrastText%2C%20%23fff)%3B%7D%5Cn.BadgeBadge_b14y6z35-variant-3%7Bbackground-color%3Avar(--app-palette-warning-main%2C%20%23ed6c02)%3Bcolor%3Avar(--app-palette-warning-contrastText%2C%20%23fff)%3B%7D%5Cn.BadgeBadge_b14y6z35-variant-4%7Bbackground-color%3Avar(--app-palette-info-main%2C%20%230288d1)%3Bcolor%3Avar(--app-palette-info-contrastText%2C%20%23fff)%3B%7D%5Cn.BadgeBadge_b14y6z35-variant-5%7Bbackground-color%3Avar(--app-palette-success-main%2C%20%232e7d32)%3Bcolor%3Avar(--app-palette-success-contrastText%2C%20%23fff)%3B%7D%5Cn.BadgeBadge_b14y6z35-variant-6%7Bborder-radius%3A4px%3Bheight%3A8px%3Bmin-width%3A8px%3Bpadding%3A0%3B%7D%5Cn.BadgeBadge_b14y6z35-variant-7%7Btop%3A0%3Bright%3A0%3Btransform%3Ascale(1)%20translate(50%25%2C%20-50%25)%3Btransform-origin%3A100%25%200%25%3B%7D.BadgeBadge_b14y6z35-variant-7.MuiBadge-invisible%7Btransform%3Ascale(0)%20translate(50%25%2C%20-50%25)%3B%7D%5Cn.BadgeBadge_b14y6z35-variant-8%7Bbottom%3A0%3Bright%3A0%3Btransform%3Ascale(1)%20translate(50%25%2C%2050%25)%3Btransform-origin%3A100%25%20100%25%3B%7D.BadgeBadge_b14y6z35-variant-8.MuiBadge-invisible%7Btransform%3Ascale(0)%20translate(50%25%2C%2050%25)%3B%7D%5Cn.BadgeBadge_b14y6z35-variant-9%7Btop%3A0%3Bleft%3A0%3Btransform%3Ascale(1)%20translate(-50%25%2C%20-50%25)%3Btransform-origin%3A0%25%200%25%3B%7D.BadgeBadge_b14y6z35-variant-9.MuiBadge-invisible%7Btransform%3Ascale(0)%20translate(-50%25%2C%20-50%25)%3B%7D%5Cn.BadgeBadge_b14y6z35-variant-10%7Bbottom%3A0%3Bleft%3A0%3Btransform%3Ascale(1)%20translate(-50%25%2C%2050%25)%3Btransform-origin%3A0%25%20100%25%3B%7D.BadgeBadge_b14y6z35-variant-10.MuiBadge-invisible%7Btransform%3Ascale(0)%20translate(-50%25%2C%2050%25)%3B%7D%5Cn.BadgeBadge_b14y6z35-variant-11%7Btop%3A14%25%3Bright%3A14%25%3Btransform%3Ascale(1)%20translate(50%25%2C%20-50%25)%3Btransform-origin%3A100%25%200%25%3B%7D.BadgeBadge_b14y6z35-variant-11.MuiBadge-invisible%7Btransform%3Ascale(0)%20translate(50%25%2C%20-50%25)%3B%7D%5Cn.BadgeBadge_b14y6z35-variant-12%7Bbottom%3A14%25%3Bright%3A14%25%3Btransform%3Ascale(1)%20translate(50%25%2C%2050%25)%3Btransform-origin%3A100%25%20100%25%3B%7D.BadgeBadge_b14y6z35-variant-12.MuiBadge-invisible%7Btransform%3Ascale(0)%20translate(50%25%2C%2050%25)%3B%7D%5Cn.BadgeBadge_b14y6z35-variant-13%7Btop%3A14%25%3Bleft%3A14%25%3Btransform%3Ascale(1)%20translate(-50%25%2C%20-50%25)%3Btransform-origin%3A0%25%200%25%3B%7D.BadgeBadge_b14y6z35-variant-13.MuiBadge-invisible%7Btransform%3Ascale(0)%20translate(-50%25%2C%20-50%25)%3B%7D%5Cn.BadgeBadge_b14y6z35-variant-14%7Bbottom%3A14%25%3Bleft%3A14%25%3Btransform%3Ascale(1)%20translate(-50%25%2C%2050%25)%3Btransform-origin%3A0%25%20100%25%3B%7D.BadgeBadge_b14y6z35-variant-14.MuiBadge-invisible%7Btransform%3Ascale(0)%20translate(-50%25%2C%2050%25)%3B%7D%5Cn.BadgeBadge_b14y6z35-variant-15%7Btransition%3Atransform%20195ms%20cubic-bezier(0.4%2C%200%2C%200.2%2C%201)%200ms%3B%7D%5Cn%2F*%23%20sourceMappingURL%3Ddata%3Aapplication%2Fjson%3Bbase64%2CeyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9Vc2Vycy9zaXJpd2F0a25wL1BlcnNvbmFsLVJlcG9zL21hdGVyaWFsLXVpL3BhY2thZ2VzL211aS1tYXRlcmlhbC9idWlsZC9CYWRnZS9CYWRnZS5qcyJdLCJuYW1lcyI6WyIuQmFkZ2VSb290X2JkeHl6eGoiLCIuQmFkZ2VCYWRnZV9iMTR5NnozNSIsIi5CYWRnZUJhZGdlX2IxNHk2ejM1LXZhcmlhbnQiLCIuQmFkZ2VCYWRnZV9iMTR5NnozNS12YXJpYW50LTEiLCIuQmFkZ2VCYWRnZV9iMTR5NnozNS12YXJpYW50LTIiLCIuQmFkZ2VCYWRnZV9iMTR5NnozNS12YXJpYW50LTMiLCIuQmFkZ2VCYWRnZV9iMTR5NnozNS12YXJpYW50LTQiLCIuQmFkZ2VCYWRnZV9iMTR5NnozNS12YXJpYW50LTUiLCIuQmFkZ2VCYWRnZV9iMTR5NnozNS12YXJpYW50LTYiLCIuQmFkZ2VCYWRnZV9iMTR5NnozNS12YXJpYW50LTciLCIuQmFkZ2VCYWRnZV9iMTR5NnozNS12YXJpYW50LTgiLCIuQmFkZ2VCYWRnZV9iMTR5NnozNS12YXJpYW50LTkiLCIuQmFkZ2VCYWRnZV9iMTR5NnozNS12YXJpYW50LTEwIiwiLkJhZGdlQmFkZ2VfYjE0eTZ6MzUtdmFyaWFudC0xMSIsIi5CYWRnZUJhZGdlX2IxNHk2ejM1LXZhcmlhbnQtMTIiLCIuQmFkZ2VCYWRnZV9iMTR5NnozNS12YXJpYW50LTEzIiwiLkJhZGdlQmFkZ2VfYjE0eTZ6MzUtdmFyaWFudC0xNCIsIi5CYWRnZUJhZGdlX2IxNHk2ejM1LXZhcmlhbnQtMTUiXSwibWFwcGluZ3MiOiJBQWtDa0JBO0FBV0NDO0FBQUFDO0FBQUFDO0FBQUFDO0FBQUFDO0FBQUFDO0FBQUFDO0FBQUFDO0FBQUFDO0FBQUFDO0FBQUFDO0FBQUFDO0FBQUFDO0FBQUFDO0FBQUFDO0FBQUFDO0FBQUFDIiwiZmlsZSI6Ii9Vc2Vycy9zaXJpd2F0a25wL1BlcnNvbmFsLVJlcG9zL21hdGVyaWFsLXVpL3BhY2thZ2VzL211aS1tYXRlcmlhbC9idWlsZC9CYWRnZS9CYWRnZS5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyIvKiBfX25leHRfaW50ZXJuYWxfY2xpZW50X2VudHJ5X2RvX25vdF91c2VfXyBkZWZhdWx0IGF1dG8gKi92YXIgX3MgPSAkUmVmcmVzaFNpZyQoKTtcbmltcG9ydCBfZXh0ZW5kcyBmcm9tIFwiQGJhYmVsL3J1bnRpbWUvaGVscGVycy9lc20vZXh0ZW5kc1wiO1xuaW1wb3J0IF9vYmplY3RXaXRob3V0UHJvcGVydGllc0xvb3NlIGZyb20gXCJAYmFiZWwvcnVudGltZS9oZWxwZXJzL2VzbS9vYmplY3RXaXRob3V0UHJvcGVydGllc0xvb3NlXCI7XG5jb25zdCBfZXhjbHVkZWQgPSBbXCJhbmNob3JPcmlnaW5cIiwgXCJjbGFzc05hbWVcIiwgXCJjbGFzc2VzXCIsIFwiY29tcG9uZW50XCIsIFwiY29tcG9uZW50c1wiLCBcImNvbXBvbmVudHNQcm9wc1wiLCBcImNoaWxkcmVuXCIsIFwib3ZlcmxhcFwiLCBcImNvbG9yXCIsIFwiaW52aXNpYmxlXCIsIFwibWF4XCIsIFwiYmFkZ2VDb250ZW50XCIsIFwic2xvdHNcIiwgXCJzbG90UHJvcHNcIiwgXCJzaG93WmVyb1wiLCBcInZhcmlhbnRcIl07XG5pbXBvcnQgKiBhcyBSZWFjdCBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCBQcm9wVHlwZXMgZnJvbSBcInByb3AtdHlwZXNcIjtcbmltcG9ydCBjbHN4IGZyb20gXCJjbHN4XCI7XG5pbXBvcnQgeyB1c2VQcmV2aW91c1Byb3BzIH0gZnJvbSBcIkBtdWkvdXRpbHNcIjtcbmltcG9ydCB7IHVuc3RhYmxlX2NvbXBvc2VDbGFzc2VzIGFzIGNvbXBvc2VDbGFzc2VzIH0gZnJvbSBcIkBtdWkvYmFzZS9jb21wb3NlQ2xhc3Nlc1wiO1xuaW1wb3J0IHsgdXNlQmFkZ2UgfSBmcm9tIFwiQG11aS9iYXNlL3VzZUJhZGdlXCI7XG5pbXBvcnQgeyB1c2VTbG90UHJvcHMgfSBmcm9tIFwiQG11aS9iYXNlXCI7XG5pbXBvcnQgeyBzdHlsZWQsIGNyZWF0ZVVzZVRoZW1lUHJvcHMgfSBmcm9tIFwiLi4vemVyby1zdHlsZWRcIjtcbmltcG9ydCBjYXBpdGFsaXplIGZyb20gXCIuLi91dGlscy9jYXBpdGFsaXplXCI7XG5pbXBvcnQgYmFkZ2VDbGFzc2VzLCB7IGdldEJhZGdlVXRpbGl0eUNsYXNzIH0gZnJvbSBcIi4vYmFkZ2VDbGFzc2VzXCI7XG5pbXBvcnQgeyBqc3ggYXMgX2pzeCB9IGZyb20gXCJyZWFjdC9qc3gtcnVudGltZVwiO1xuaW1wb3J0IHsganN4cyBhcyBfanN4cyB9IGZyb20gXCJyZWFjdC9qc3gtcnVudGltZVwiO1xuY29uc3QgUkFESVVTX1NUQU5EQVJEID0gMTA7XG5jb25zdCBSQURJVVNfRE9UID0gNDtcbmNvbnN0IHVzZVRoZW1lUHJvcHMgPSBjcmVhdGVVc2VUaGVtZVByb3BzKFwiTXVpQmFkZ2VcIik7XG5jb25zdCB1c2VVdGlsaXR5Q2xhc3NlcyA9IG93bmVyU3RhdGUgPT4ge1xuICBjb25zdCB7XG4gICAgY29sb3IsXG4gICAgYW5jaG9yT3JpZ2luLFxuICAgIGludmlzaWJsZSxcbiAgICBvdmVybGFwLFxuICAgIHZhcmlhbnQsXG4gICAgY2xhc3NlcyA9IHt9XG4gIH0gPSBvd25lclN0YXRlO1xuICBjb25zdCBzbG90cyA9IHtcbiAgICByb290OiBbXCJyb290XCJdLFxuICAgIGJhZGdlOiBbXCJiYWRnZVwiLCB2YXJpYW50LCBpbnZpc2libGUgJiYgXCJpbnZpc2libGVcIiwgYGFuY2hvck9yaWdpbiR7Y2FwaXRhbGl6ZShhbmNob3JPcmlnaW4udmVydGljYWwpfSR7Y2FwaXRhbGl6ZShhbmNob3JPcmlnaW4uaG9yaXpvbnRhbCl9YCwgYGFuY2hvck9yaWdpbiR7Y2FwaXRhbGl6ZShhbmNob3JPcmlnaW4udmVydGljYWwpfSR7Y2FwaXRhbGl6ZShhbmNob3JPcmlnaW4uaG9yaXpvbnRhbCl9JHtjYXBpdGFsaXplKG92ZXJsYXApfWAsIGBvdmVybGFwJHtjYXBpdGFsaXplKG92ZXJsYXApfWAsIGNvbG9yICE9PSBcImRlZmF1bHRcIiAmJiBgY29sb3Ike2NhcGl0YWxpemUoY29sb3IpfWBdXG4gIH07XG4gIHJldHVybiBjb21wb3NlQ2xhc3NlcyhzbG90cywgZ2V0QmFkZ2VVdGlsaXR5Q2xhc3MsIGNsYXNzZXMpO1xufTtcbmNvbnN0IEJhZGdlUm9vdCA9IHN0eWxlZChcInNwYW5cIiwge1xuICBuYW1lOiBcIk11aUJhZGdlXCIsXG4gIHNsb3Q6IFwiUm9vdFwiLFxuICBvdmVycmlkZXNSZXNvbHZlcjogKHByb3BzLCBzdHlsZXMpID0%2BIHN0eWxlcy5yb290XG59KSh7XG4gIHBvc2l0aW9uOiBcInJlbGF0aXZlXCIsXG4gIGRpc3BsYXk6IFwiaW5saW5lLWZsZXhcIixcbiAgLy8gRm9yIGNvcnJlY3QgYWxpZ25tZW50IHdpdGggdGhlIHRleHQuXG4gIHZlcnRpY2FsQWxpZ246IFwibWlkZGxlXCIsXG4gIGZsZXhTaHJpbms6IDBcbn0pO1xuY29uc3QgQmFkZ2VCYWRnZSA9IHN0eWxlZChcInNwYW5cIiwge1xuICBuYW1lOiBcIk11aUJhZGdlXCIsXG4gIHNsb3Q6IFwiQmFkZ2VcIixcbiAgb3ZlcnJpZGVzUmVzb2x2ZXI6IChwcm9wcywgc3R5bGVzKSA9PiB7XG4gICAgY29uc3Qge1xuICAgICAgb3duZXJTdGF0ZVxuICAgIH0gPSBwcm9wcztcbiAgICByZXR1cm4gW3N0eWxlcy5iYWRnZSwgc3R5bGVzW293bmVyU3RhdGUudmFyaWFudF0sIHN0eWxlc1tgYW5jaG9yT3JpZ2luJHtjYXBpdGFsaXplKG93bmVyU3RhdGUuYW5jaG9yT3JpZ2luLnZlcnRpY2FsKX0ke2NhcGl0YWxpemUob3duZXJTdGF0ZS5hbmNob3JPcmlnaW4uaG9yaXpvbnRhbCl9JHtjYXBpdGFsaXplKG93bmVyU3RhdGUub3ZlcmxhcCl9YF0sIG93bmVyU3RhdGUuY29sb3IgIT09IFwiZGVmYXVsdFwiICYmIHN0eWxlc1tgY29sb3Ike2NhcGl0YWxpemUob3duZXJTdGF0ZS5jb2xvcil9YF0sIG93bmVyU3RhdGUuaW52aXNpYmxlICYmIHN0eWxlcy5pbnZpc2libGVdO1xuICB9XG59KSgoe1xuICB0aGVtZVxufSkgPT4ge1xuICB2YXIgX3RoZW1lJHZhcnM7XG4gIHJldHVybiB7XG4gICAgZGlzcGxheTogXCJmbGV4XCIsXG4gICAgZmxleERpcmVjdGlvbjogXCJyb3dcIixcbiAgICBmbGV4V3JhcDogXCJ3cmFwXCIsXG4gICAganVzdGlmeUNvbnRlbnQ6IFwiY2VudGVyXCIsXG4gICAgYWxpZ25Db250ZW50OiBcImNlbnRlclwiLFxuICAgIGFsaWduSXRlbXM6IFwiY2VudGVyXCIsXG4gICAgcG9zaXRpb246IFwiYWJzb2x1dGVcIixcbiAgICBib3hTaXppbmc6IFwiYm9yZGVyLWJveFwiLFxuICAgIGZvbnRGYW1pbHk6IHRoZW1lLnR5cG9ncmFwaHkuZm9udEZhbWlseSxcbiAgICBmb250V2VpZ2h0OiB0aGVtZS50eXBvZ3JhcGh5LmZvbnRXZWlnaHRNZWRpdW0sXG4gICAgZm9udFNpemU6IHRoZW1lLnR5cG9ncmFwaHkucHhUb1JlbSgxMiksXG4gICAgbWluV2lkdGg6IFJBRElVU19TVEFOREFSRCAqIDIsXG4gICAgbGluZUhlaWdodDogMSxcbiAgICBwYWRkaW5nOiBcIjAgNnB4XCIsXG4gICAgaGVpZ2h0OiBSQURJVVNfU1RBTkRBUkQgKiAyLFxuICAgIGJvcmRlclJhZGl1czogUkFESVVTX1NUQU5EQVJELFxuICAgIHpJbmRleDogMSxcbiAgICAvLyBSZW5kZXIgdGhlIGJhZGdlIG9uIHRvcCBvZiBwb3RlbnRpYWwgcmlwcGxlcy5cbiAgICB0cmFuc2l0aW9uOiB0aGVtZS50cmFuc2l0aW9ucy5jcmVhdGUoXCJ0cmFuc2Zvcm1cIiwge1xuICAgICAgZWFzaW5nOiB0aGVtZS50cmFuc2l0aW9ucy5lYXNpbmcuZWFzZUluT3V0LFxuICAgICAgZHVyYXRpb246IHRoZW1lLnRyYW5zaXRpb25zLmR1cmF0aW9uLmVudGVyaW5nU2NyZWVuXG4gICAgfSksXG4gICAgdmFyaWFudHM6IFsuLi5PYmplY3Qua2V5cygoKF90aGVtZSR2YXJzID0gdGhlbWUudmFycykgIT0gbnVsbCA%2FIF90aGVtZSR2YXJzIDogdGhlbWUpLnBhbGV0dGUpLmZpbHRlcihrZXkgPT4ge1xuICAgICAgdmFyIF90aGVtZSR2YXJzMiwgX3RoZW1lJHZhcnMzO1xuICAgICAgcmV0dXJuICgoX3RoZW1lJHZhcnMyID0gdGhlbWUudmFycykgIT0gbnVsbCA%2FIF90aGVtZSR2YXJzMiA6IHRoZW1lKS5wYWxldHRlW2tleV0ubWFpbiAmJiAoKF90aGVtZSR2YXJzMyA9IHRoZW1lLnZhcnMpICE9IG51bGwgPyBfdGhlbWUkdmFyczMgOiB0aGVtZSkucGFsZXR0ZVtrZXldLmNvbnRyYXN0VGV4dDtcbiAgICB9KS5tYXAoY29sb3IgPT4gKHtcbiAgICAgIHByb3BzOiB7XG4gICAgICAgIGNvbG9yXG4gICAgICB9LFxuICAgICAgc3R5bGU6IHtcbiAgICAgICAgYmFja2dyb3VuZENvbG9yOiAodGhlbWUudmFycyB8fCB0aGVtZSkucGFsZXR0ZVtjb2xvcl0ubWFpbixcbiAgICAgICAgY29sb3I6ICh0aGVtZS52YXJzIHx8IHRoZW1lKS5wYWxldHRlW2NvbG9yXS5jb250cmFzdFRleHRcbiAgICAgIH1cbiAgICB9KSksIHtcbiAgICAgIHByb3BzOiB7XG4gICAgICAgIHZhcmlhbnQ6IFwiZG90XCJcbiAgICAgIH0sXG4gICAgICBzdHlsZToge1xuICAgICAgICBib3JkZXJSYWRpdXM6IFJBRElVU19ET1QsXG4gICAgICAgIGhlaWdodDogUkFESVVTX0RPVCAqIDIsXG4gICAgICAgIG1pbldpZHRoOiBSQURJVVNfRE9UICogMixcbiAgICAgICAgcGFkZGluZzogMFxuICAgICAgfVxuICAgIH0sIHtcbiAgICAgIHByb3BzOiAoe1xuICAgICAgICBvd25lclN0YXRlXG4gICAgICB9KSA9PiBvd25lclN0YXRlLmFuY2hvck9yaWdpbi52ZXJ0aWNhbCA9PT0gXCJ0b3BcIiAmJiBvd25lclN0YXRlLmFuY2hvck9yaWdpbi5ob3Jpem9udGFsID09PSBcInJpZ2h0XCIgJiYgb3duZXJTdGF0ZS5vdmVybGFwID09PSBcInJlY3Rhbmd1bGFyXCIsXG4gICAgICBzdHlsZToge1xuICAgICAgICB0b3A6IDAsXG4gICAgICAgIHJpZ2h0OiAwLFxuICAgICAgICB0cmFuc2Zvcm06IFwic2NhbGUoMSkgdHJhbnNsYXRlKDUwJSwgLTUwJSlcIixcbiAgICAgICAgdHJhbnNmb3JtT3JpZ2luOiBcIjEwMCUgMCVcIixcbiAgICAgICAgW2AmLiR7YmFkZ2VDbGFzc2VzLmludmlzaWJsZX1gXToge1xuICAgICAgICAgIHRyYW5zZm9ybTogXCJzY2FsZSgwKSB0cmFuc2xhdGUoNTAlLCAtNTAlKVwiXG4gICAgICAgIH1cbiAgICAgIH1cbiAgICB9LCB7XG4gICAgICBwcm9wczogKHtcbiAgICAgICAgb3duZXJTdGF0ZVxuICAgICAgfSkgPT4gb3duZXJTdGF0ZS5hbmNob3JPcmlnaW4udmVydGljYWwgPT09IFwiYm90dG9tXCIgJiYgb3duZXJTdGF0ZS5hbmNob3JPcmlnaW4uaG9yaXpvbnRhbCA9PT0gXCJyaWdodFwiICYmIG93bmVyU3RhdGUub3ZlcmxhcCA9PT0gXCJyZWN0YW5ndWxhclwiLFxuICAgICAgc3R5bGU6IHtcbiAgICAgICAgYm90dG9tOiAwLFxuICAgICAgICByaWdodDogMCxcbiAgICAgICAgdHJhbnNmb3JtOiBcInNjYWxlKDEpIHRyYW5zbGF0ZSg1MCUsIDUwJSlcIixcbiAgICAgICAgdHJhbnNmb3JtT3JpZ2luOiBcIjEwMCUgMTAwJVwiLFxuICAgICAgICBbYCYuJHtiYWRnZUNsYXNzZXMuaW52aXNpYmxlfWBdOiB7XG4gICAgICAgICAgdHJhbnNmb3JtOiBcInNjYWxlKDApIHRyYW5zbGF0ZSg1MCUsIDUwJSlcIlxuICAgICAgICB9XG4gICAgICB9XG4gICAgfSwge1xuICAgICAgcHJvcHM6ICh7XG4gICAgICAgIG93bmVyU3RhdGVcbiAgICAgIH0pID0%2BIG93bmVyU3RhdGUuYW5jaG9yT3JpZ2luLnZlcnRpY2FsID09PSBcInRvcFwiICYmIG93bmVyU3RhdGUuYW5jaG9yT3JpZ2luLmhvcml6b250YWwgPT09IFwibGVmdFwiICYmIG93bmVyU3RhdGUub3ZlcmxhcCA9PT0gXCJyZWN0YW5ndWxhclwiLFxuICAgICAgc3R5bGU6IHtcbiAgICAgICAgdG9wOiAwLFxuICAgICAgICBsZWZ0OiAwLFxuICAgICAgICB0cmFuc2Zvcm06IFwic2NhbGUoMSkgdHJhbnNsYXRlKC01MCUsIC01MCUpXCIsXG4gICAgICAgIHRyYW5zZm9ybU9yaWdpbjogXCIwJSAwJVwiLFxuICAgICAgICBbYCYuJHtiYWRnZUNsYXNzZXMuaW52aXNpYmxlfWBdOiB7XG4gICAgICAgICAgdHJhbnNmb3JtOiBcInNjYWxlKDApIHRyYW5zbGF0ZSgtNTAlLCAtNTAlKVwiXG4gICAgICAgIH1cbiAgICAgIH1cbiAgICB9LCB7XG4gICAgICBwcm9wczogKHtcbiAgICAgICAgb3duZXJTdGF0ZVxuICAgICAgfSkgPT4gb3duZXJTdGF0ZS5hbmNob3JPcmlnaW4udmVydGljYWwgPT09IFwiYm90dG9tXCIgJiYgb3duZXJTdGF0ZS5hbmNob3JPcmlnaW4uaG9yaXpvbnRhbCA9PT0gXCJsZWZ0XCIgJiYgb3duZXJTdGF0ZS5vdmVybGFwID09PSBcInJlY3Rhbmd1bGFyXCIsXG4gICAgICBzdHlsZToge1xuICAgICAgICBib3R0b206IDAsXG4gICAgICAgIGxlZnQ6IDAsXG4gICAgICAgIHRyYW5zZm9ybTogXCJzY2FsZSgxKSB0cmFuc2xhdGUoLTUwJSwgNTAlKVwiLFxuICAgICAgICB0cmFuc2Zvcm1PcmlnaW46IFwiMCUgMTAwJVwiLFxuICAgICAgICBbYCYuJHtiYWRnZUNsYXNzZXMuaW52aXNpYmxlfWBdOiB7XG4gICAgICAgICAgdHJhbnNmb3JtOiBcInNjYWxlKDApIHRyYW5zbGF0ZSgtNTAlLCA1MCUpXCJcbiAgICAgICAgfVxuICAgICAgfVxuICAgIH0sIHtcbiAgICAgIHByb3BzOiAoe1xuICAgICAgICBvd25lclN0YXRlXG4gICAgICB9KSA9PiBvd25lclN0YXRlLmFuY2hvck9yaWdpbi52ZXJ0aWNhbCA9PT0gXCJ0b3BcIiAmJiBvd25lclN0YXRlLmFuY2hvck9yaWdpbi5ob3Jpem9udGFsID09PSBcInJpZ2h0XCIgJiYgb3duZXJTdGF0ZS5vdmVybGFwID09PSBcImNpcmN1bGFyXCIsXG4gICAgICBzdHlsZToge1xuICAgICAgICB0b3A6IFwiMTQlXCIsXG4gICAgICAgIHJpZ2h0OiBcIjE0JVwiLFxuICAgICAgICB0cmFuc2Zvcm06IFwic2NhbGUoMSkgdHJhbnNsYXRlKDUwJSwgLTUwJSlcIixcbiAgICAgICAgdHJhbnNmb3JtT3JpZ2luOiBcIjEwMCUgMCVcIixcbiAgICAgICAgW2AmLiR7YmFkZ2VDbGFzc2VzLmludmlzaWJsZX1gXToge1xuICAgICAgICAgIHRyYW5zZm9ybTogXCJzY2FsZSgwKSB0cmFuc2xhdGUoNTAlLCAtNTAlKVwiXG4gICAgICAgIH1cbiAgICAgIH1cbiAgICB9LCB7XG4gICAgICBwcm9wczogKHtcbiAgICAgICAgb3duZXJTdGF0ZVxuICAgICAgfSkgPT4gb3duZXJTdGF0ZS5hbmNob3JPcmlnaW4udmVydGljYWwgPT09IFwiYm90dG9tXCIgJiYgb3duZXJTdGF0ZS5hbmNob3JPcmlnaW4uaG9yaXpvbnRhbCA9PT0gXCJyaWdodFwiICYmIG93bmVyU3RhdGUub3ZlcmxhcCA9PT0gXCJjaXJjdWxhclwiLFxuICAgICAgc3R5bGU6IHtcbiAgICAgICAgYm90dG9tOiBcIjE0JVwiLFxuICAgICAgICByaWdodDogXCIxNCVcIixcbiAgICAgICAgdHJhbnNmb3JtOiBcInNjYWxlKDEpIHRyYW5zbGF0ZSg1MCUsIDUwJSlcIixcbiAgICAgICAgdHJhbnNmb3JtT3JpZ2luOiBcIjEwMCUgMTAwJVwiLFxuICAgICAgICBbYCYuJHtiYWRnZUNsYXNzZXMuaW52aXNpYmxlfWBdOiB7XG4gICAgICAgICAgdHJhbnNmb3JtOiBcInNjYWxlKDApIHRyYW5zbGF0ZSg1MCUsIDUwJSlcIlxuICAgICAgICB9XG4gICAgICB9XG4gICAgfSwge1xuICAgICAgcHJvcHM6ICh7XG4gICAgICAgIG93bmVyU3RhdGVcbiAgICAgIH0pID0%2BIG93bmVyU3RhdGUuYW5jaG9yT3JpZ2luLnZlcnRpY2FsID09PSBcInRvcFwiICYmIG93bmVyU3RhdGUuYW5jaG9yT3JpZ2luLmhvcml6b250YWwgPT09IFwibGVmdFwiICYmIG93bmVyU3RhdGUub3ZlcmxhcCA9PT0gXCJjaXJjdWxhclwiLFxuICAgICAgc3R5bGU6IHtcbiAgICAgICAgdG9wOiBcIjE0JVwiLFxuICAgICAgICBsZWZ0OiBcIjE0JVwiLFxuICAgICAgICB0cmFuc2Zvcm06IFwic2NhbGUoMSkgdHJhbnNsYXRlKC01MCUsIC01MCUpXCIsXG4gICAgICAgIHRyYW5zZm9ybU9yaWdpbjogXCIwJSAwJVwiLFxuICAgICAgICBbYCYuJHtiYWRnZUNsYXNzZXMuaW52aXNpYmxlfWBdOiB7XG4gICAgICAgICAgdHJhbnNmb3JtOiBcInNjYWxlKDApIHRyYW5zbGF0ZSgtNTAlLCAtNTAlKVwiXG4gICAgICAgIH1cbiAgICAgIH1cbiAgICB9LCB7XG4gICAgICBwcm9wczogKHtcbiAgICAgICAgb3duZXJTdGF0ZVxuICAgICAgfSkgPT4gb3duZXJTdGF0ZS5hbmNob3JPcmlnaW4udmVydGljYWwgPT09IFwiYm90dG9tXCIgJiYgb3duZXJTdGF0ZS5hbmNob3JPcmlnaW4uaG9yaXpvbnRhbCA9PT0gXCJsZWZ0XCIgJiYgb3duZXJTdGF0ZS5vdmVybGFwID09PSBcImNpcmN1bGFyXCIsXG4gICAgICBzdHlsZToge1xuICAgICAgICBib3R0b206IFwiMTQlXCIsXG4gICAgICAgIGxlZnQ6IFwiMTQlXCIsXG4gICAgICAgIHRyYW5zZm9ybTogXCJzY2FsZSgxKSB0cmFuc2xhdGUoLTUwJSwgNTAlKVwiLFxuICAgICAgICB0cmFuc2Zvcm1PcmlnaW46IFwiMCUgMTAwJVwiLFxuICAgICAgICBbYCYuJHtiYWRnZUNsYXNzZXMuaW52aXNpYmxlfWBdOiB7XG4gICAgICAgICAgdHJhbnNmb3JtOiBcInNjYWxlKDApIHRyYW5zbGF0ZSgtNTAlLCA1MCUpXCJcbiAgICAgICAgfVxuICAgICAgfVxuICAgIH0sIHtcbiAgICAgIHByb3BzOiB7XG4gICAgICAgIGludmlzaWJsZTogdHJ1ZVxuICAgICAgfSxcbiAgICAgIHN0eWxlOiB7XG4gICAgICAgIHRyYW5zaXRpb246IHRoZW1lLnRyYW5zaXRpb25zLmNyZWF0ZShcInRyYW5zZm9ybVwiLCB7XG4gICAgICAgICAgZWFzaW5nOiB0aGVtZS50cmFuc2l0aW9ucy5lYXNpbmcuZWFzZUluT3V0LFxuICAgICAgICAgIGR1cmF0aW9uOiB0aGVtZS50cmFuc2l0aW9ucy5kdXJhdGlvbi5sZWF2aW5nU2NyZWVuXG4gICAgICAgIH0pXG4gICAgICB9XG4gICAgfV1cbiAgfTtcbn0pO1xuY29uc3QgQmFkZ2UgPSAvKiNfX1BVUkVfXyovX3MoUmVhY3QuZm9yd2FyZFJlZihfYyA9IF9zKGZ1bmN0aW9uIEJhZGdlKGluUHJvcHMsIHJlZikge1xuICBfcygpO1xuICB2YXIgX3JlZiwgX3Nsb3RzJHJvb3QsIF9yZWYyLCBfc2xvdHMkYmFkZ2UsIF9zbG90UHJvcHMkcm9vdCwgX3Nsb3RQcm9wcyRiYWRnZTtcbiAgY29uc3QgcHJvcHMgPSB1c2VUaGVtZVByb3BzKHtcbiAgICBwcm9wczogaW5Qcm9wcyxcbiAgICBuYW1lOiBcIk11aUJhZGdlXCJcbiAgfSk7XG4gIGNvbnN0IHtcbiAgICAgIGFuY2hvck9yaWdpbjogYW5jaG9yT3JpZ2luUHJvcCA9IHtcbiAgICAgICAgdmVydGljYWw6IFwidG9wXCIsXG4gICAgICAgIGhvcml6b250YWw6IFwicmlnaHRcIlxuICAgICAgfSxcbiAgICAgIGNsYXNzTmFtZSxcbiAgICAgIGNvbXBvbmVudCxcbiAgICAgIGNvbXBvbmVudHMgPSB7fSxcbiAgICAgIGNvbXBvbmVudHNQcm9wcyA9IHt9LFxuICAgICAgY2hpbGRyZW4sXG4gICAgICBvdmVybGFwOiBvdmVybGFwUHJvcCA9IFwicmVjdGFuZ3VsYXJcIixcbiAgICAgIGNvbG9yOiBjb2xvclByb3AgPSBcImRlZmF1bHRcIixcbiAgICAgIGludmlzaWJsZTogaW52aXNpYmxlUHJvcCA9IGZhbHNlLFxuICAgICAgbWF4OiBtYXhQcm9wID0gOTksXG4gICAgICBiYWRnZUNvbnRlbnQ6IGJhZGdlQ29udGVudFByb3AsXG4gICAgICBzbG90cyxcbiAgICAgIHNsb3RQcm9wcyxcbiAgICAgIHNob3daZXJvID0gZmFsc2UsXG4gICAgICB2YXJpYW50OiB2YXJpYW50UHJvcCA9IFwic3RhbmRhcmRcIlxuICAgIH0gPSBwcm9wcyxcbiAgICBvdGhlciA9IF9vYmplY3RXaXRob3V0UHJvcGVydGllc0xvb3NlKHByb3BzLCBfZXhjbHVkZWQpO1xuICBjb25zdCB7XG4gICAgYmFkZ2VDb250ZW50LFxuICAgIGludmlzaWJsZTogaW52aXNpYmxlRnJvbUhvb2ssXG4gICAgbWF4LFxuICAgIGRpc3BsYXlWYWx1ZTogZGlzcGxheVZhbHVlRnJvbUhvb2tcbiAgfSA9IHVzZUJhZGdlKHtcbiAgICBtYXg6IG1heFByb3AsXG4gICAgaW52aXNpYmxlOiBpbnZpc2libGVQcm9wLFxuICAgIGJhZGdlQ29udGVudDogYmFkZ2VDb250ZW50UHJvcCxcbiAgICBzaG93WmVyb1xuICB9KTtcbiAgY29uc3QgcHJldlByb3BzID0gdXNlUHJldmlvdXNQcm9wcyh7XG4gICAgYW5jaG9yT3JpZ2luOiBhbmNob3JPcmlnaW5Qcm9wLFxuICAgIGNvbG9yOiBjb2xvclByb3AsXG4gICAgb3ZlcmxhcDogb3ZlcmxhcFByb3AsXG4gICAgdmFyaWFudDogdmFyaWFudFByb3AsXG4gICAgYmFkZ2VDb250ZW50OiBiYWRnZUNvbnRlbnRQcm9wXG4gIH0pO1xuICBjb25zdCBpbnZpc2libGUgPSBpbnZpc2libGVGcm9tSG9vayB8fCBiYWRnZUNvbnRlbnQgPT0gbnVsbCAmJiB2YXJpYW50UHJvcCAhPT0gXCJkb3RcIjtcbiAgY29uc3Qge1xuICAgIGNvbG9yID0gY29sb3JQcm9wLFxuICAgIG92ZXJsYXAgPSBvdmVybGFwUHJvcCxcbiAgICBhbmNob3JPcmlnaW4gPSBhbmNob3JPcmlnaW5Qcm9wLFxuICAgIHZhcmlhbnQgPSB2YXJpYW50UHJvcFxuICB9ID0gaW52aXNpYmxlID8gcHJldlByb3BzIDogcHJvcHM7XG4gIGNvbnN0IGRpc3BsYXlWYWx1ZSA9IHZhcmlhbnQgIT09IFwiZG90XCIgPyBkaXNwbGF5VmFsdWVGcm9tSG9vayA6IHVuZGVmaW5lZDtcbiAgY29uc3Qgb3duZXJTdGF0ZSA9IF9leHRlbmRzKHt9LCBwcm9wcywge1xuICAgIGJhZGdlQ29udGVudCxcbiAgICBpbnZpc2libGUsXG4gICAgbWF4LFxuICAgIGRpc3BsYXlWYWx1ZSxcbiAgICBzaG93WmVybyxcbiAgICBhbmNob3JPcmlnaW4sXG4gICAgY29sb3IsXG4gICAgb3ZlcmxhcCxcbiAgICB2YXJpYW50XG4gIH0pO1xuICBjb25zdCBjbGFzc2VzID0gdXNlVXRpbGl0eUNsYXNzZXMob3duZXJTdGF0ZSk7XG4gIC8vIHN1cHBvcnQgYm90aCBgc2xvdHNgIGFuZCBgY29tcG9uZW50c2AgZm9yIGJhY2t3YXJkIGNvbXBhdGliaWxpdHlcbiAgY29uc3QgUm9vdFNsb3QgPSAoX3JlZiA9IChfc2xvdHMkcm9vdCA9IHNsb3RzID09IG51bGwgPyB2b2lkIDAgOiBzbG90cy5yb290KSAhPSBudWxsID8gX3Nsb3RzJHJvb3QgOiBjb21wb25lbnRzLlJvb3QpICE9IG51bGwgPyBfcmVmIDogQmFkZ2VSb290O1xuICBjb25zdCBCYWRnZVNsb3QgPSAoX3JlZjIgPSAoX3Nsb3RzJGJhZGdlID0gc2xvdHMgPT0gbnVsbCA%2FIHZvaWQgMCA6IHNsb3RzLmJhZGdlKSAhPSBudWxsID8gX3Nsb3RzJGJhZGdlIDogY29tcG9uZW50cy5CYWRnZSkgIT0gbnVsbCA%2FIF9yZWYyIDogQmFkZ2VCYWRnZTtcbiAgY29uc3Qgcm9vdFNsb3RQcm9wcyA9IChfc2xvdFByb3BzJHJvb3QgPSBzbG90UHJvcHMgPT0gbnVsbCA%2FIHZvaWQgMCA6IHNsb3RQcm9wcy5yb290KSAhPSBudWxsID8gX3Nsb3RQcm9wcyRyb290IDogY29tcG9uZW50c1Byb3BzLnJvb3Q7XG4gIGNvbnN0IGJhZGdlU2xvdFByb3BzID0gKF9zbG90UHJvcHMkYmFkZ2UgPSBzbG90UHJvcHMgPT0gbnVsbCA%2FIHZvaWQgMCA6IHNsb3RQcm9wcy5iYWRnZSkgIT0gbnVsbCA%2FIF9zbG90UHJvcHMkYmFkZ2UgOiBjb21wb25lbnRzUHJvcHMuYmFkZ2U7XG4gIGNvbnN0IHJvb3RQcm9wcyA9IHVzZVNsb3RQcm9wcyh7XG4gICAgZWxlbWVudFR5cGU6IFJvb3RTbG90LFxuICAgIGV4dGVybmFsU2xvdFByb3BzOiByb290U2xvdFByb3BzLFxuICAgIGV4dGVybmFsRm9yd2FyZGVkUHJvcHM6IG90aGVyLFxuICAgIGFkZGl0aW9uYWxQcm9wczoge1xuICAgICAgcmVmLFxuICAgICAgYXM6IGNvbXBvbmVudFxuICAgIH0sXG4gICAgb3duZXJTdGF0ZSxcbiAgICBjbGFzc05hbWU6IGNsc3gocm9vdFNsb3RQcm9wcyA9PSBudWxsID8gdm9pZCAwIDogcm9vdFNsb3RQcm9wcy5jbGFzc05hbWUsIGNsYXNzZXMucm9vdCwgY2xhc3NOYW1lKVxuICB9KTtcbiAgY29uc3QgYmFkZ2VQcm9wcyA9IHVzZVNsb3RQcm9wcyh7XG4gICAgZWxlbWVudFR5cGU6IEJhZGdlU2xvdCxcbiAgICBleHRlcm5hbFNsb3RQcm9wczogYmFkZ2VTbG90UHJvcHMsXG4gICAgb3duZXJTdGF0ZSxcbiAgICBjbGFzc05hbWU6IGNsc3goY2xhc3Nlcy5iYWRnZSwgYmFkZ2VTbG90UHJvcHMgPT0gbnVsbCA%2FIHZvaWQgMCA6IGJhZGdlU2xvdFByb3BzLmNsYXNzTmFtZSlcbiAgfSk7XG4gIHJldHVybiAvKiNfX1BVUkVfXyovX2pzeHMoUm9vdFNsb3QsIF9leHRlbmRzKHt9LCByb290UHJvcHMsIHtcbiAgICBjaGlsZHJlbjogW2NoaWxkcmVuLCAvKiNfX1BVUkVfXyovX2pzeChCYWRnZVNsb3QsIF9leHRlbmRzKHt9LCBiYWRnZVByb3BzLCB7XG4gICAgICBjaGlsZHJlbjogZGlzcGxheVZhbHVlXG4gICAgfSkpXVxuICB9KSk7XG59LCBcImJ1YnBJZ0xaWnRqUjM2OWZRWEhxZDZIekhBUT1cIiwgZmFsc2UsIGZ1bmN0aW9uICgpIHtcbiAgcmV0dXJuIFt1c2VUaGVtZVByb3BzLCB1c2VCYWRnZSwgdXNlUHJldmlvdXNQcm9wcywgdXNlVXRpbGl0eUNsYXNzZXMsIHVzZVNsb3RQcm9wcywgdXNlU2xvdFByb3BzXTtcbn0pKSwgXCJidWJwSWdMWlp0alIzNjlmUVhIcWQ2SHpIQVE9XCIsIGZhbHNlLCBmdW5jdGlvbiAoKSB7XG4gIHJldHVybiBbdXNlVGhlbWVQcm9wcywgdXNlQmFkZ2UsIHVzZVByZXZpb3VzUHJvcHMsIHVzZVV0aWxpdHlDbGFzc2VzLCB1c2VTbG90UHJvcHMsIHVzZVNsb3RQcm9wc107XG59KTtcbl9jMSA9IEJhZGdlO1xuXCJkZXZlbG9wbWVudFwiICE9PSBcInByb2R1Y3Rpb25cIiA%2FIEJhZGdlLnByb3BUeXBlcyAvKiByZW1vdmUtcHJvcHR5cGVzICovID0ge1xuICAvLyDilIzilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIAgV2FybmluZyDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilJBcbiAgLy8g4pSCIFRoZXNlIFByb3BUeXBlcyBhcmUgZ2VuZXJhdGVkIGZyb20gdGhlIFR5cGVTY3JpcHQgdHlwZSBkZWZpbml0aW9ucy4g4pSCXG4gIC8vIOKUgiAgICBUbyB1cGRhdGUgdGhlbSwgZWRpdCB0aGUgZC50cyBmaWxlIGFuZCBydW4gYHBucG0gcHJvcHR5cGVzYC4gICAgIOKUglxuICAvLyDilJTilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilIDilJhcbiAgLyoqXG4gICogVGhlIGFuY2hvciBvZiB0aGUgYmFkZ2UuXG4gICogQGRlZmF1bHQge1xuICAqICAgdmVydGljYWw6ICd0b3AnLFxuICAqICAgaG9yaXpvbnRhbDogJ3JpZ2h0JyxcbiAgKiB9XG4gICovXG4gIGFuY2hvck9yaWdpbjogUHJvcFR5cGVzLnNoYXBlKHtcbiAgICBob3Jpem9udGFsOiBQcm9wVHlwZXMub25lT2YoW1wibGVmdFwiLCBcInJpZ2h0XCJdKS5pc1JlcXVpcmVkLFxuICAgIHZlcnRpY2FsOiBQcm9wVHlwZXMub25lT2YoW1wiYm90dG9tXCIsIFwidG9wXCJdKS5pc1JlcXVpcmVkXG4gIH0pLFxuICAvKipcbiAgKiBUaGUgY29udGVudCByZW5kZXJlZCB3aXRoaW4gdGhlIGJhZGdlLlxuICAqL1xuICBiYWRnZUNvbnRlbnQ6IFByb3BUeXBlcy5ub2RlLFxuICAvKipcbiAgKiBUaGUgYmFkZ2Ugd2lsbCBiZSBhZGRlZCByZWxhdGl2ZSB0byB0aGlzIG5vZGUuXG4gICovXG4gIGNoaWxkcmVuOiBQcm9wVHlwZXMubm9kZSxcbiAgLyoqXG4gICogT3ZlcnJpZGUgb3IgZXh0ZW5kIHRoZSBzdHlsZXMgYXBwbGllZCB0byB0aGUgY29tcG9uZW50LlxuICAqL1xuICBjbGFzc2VzOiBQcm9wVHlwZXMub2JqZWN0LFxuICAvKipcbiAgKiBAaWdub3JlXG4gICovXG4gIGNsYXNzTmFtZTogUHJvcFR5cGVzLnN0cmluZyxcbiAgLyoqXG4gICogVGhlIGNvbG9yIG9mIHRoZSBjb21wb25lbnQuXG4gICogSXQgc3VwcG9ydHMgYm90aCBkZWZhdWx0IGFuZCBjdXN0b20gdGhlbWUgY29sb3JzLCB3aGljaCBjYW4gYmUgYWRkZWQgYXMgc2hvd24gaW4gdGhlXG4gICogW3BhbGV0dGUgY3VzdG9taXphdGlvbiBndWlkZV0oaHR0cHM6Ly9tdWkuY29tL21hdGVyaWFsLXVpL2N1c3RvbWl6YXRpb24vcGFsZXR0ZS8jY3VzdG9tLWNvbG9ycykuXG4gICogQGRlZmF1bHQgJ2RlZmF1bHQnXG4gICovXG4gIGNvbG9yOiBQcm9wVHlwZXMgLyogQHR5cGVzY3JpcHQtdG8tcHJvcHR5cGVzLWlnbm9yZSAqLy5vbmVPZlR5cGUoW1Byb3BUeXBlcy5vbmVPZihbXCJkZWZhdWx0XCIsIFwicHJpbWFyeVwiLCBcInNlY29uZGFyeVwiLCBcImVycm9yXCIsIFwiaW5mb1wiLCBcInN1Y2Nlc3NcIiwgXCJ3YXJuaW5nXCJdKSwgUHJvcFR5cGVzLnN0cmluZ10pLFxuICAvKipcbiAgKiBUaGUgY29tcG9uZW50IHVzZWQgZm9yIHRoZSByb290IG5vZGUuXG4gICogRWl0aGVyIGEgc3RyaW5nIHRvIHVzZSBhIEhUTUwgZWxlbWVudCBvciBhIGNvbXBvbmVudC5cbiAgKi9cbiAgY29tcG9uZW50OiBQcm9wVHlwZXMuZWxlbWVudFR5cGUsXG4gIC8qKlxuICAqIFRoZSBjb21wb25lbnRzIHVzZWQgZm9yIGVhY2ggc2xvdCBpbnNpZGUuXG4gICpcbiAgKiBUaGlzIHByb3AgaXMgYW4gYWxpYXMgZm9yIHRoZSBgc2xvdHNgIHByb3AuXG4gICogSXQncyByZWNvbW1lbmRlZCB0byB1c2UgdGhlIGBzbG90c2AgcHJvcCBpbnN0ZWFkLlxuICAqXG4gICogQGRlZmF1bHQge31cbiAgKi9cbiAgY29tcG9uZW50czogUHJvcFR5cGVzLnNoYXBlKHtcbiAgICBCYWRnZTogUHJvcFR5cGVzLmVsZW1lbnRUeXBlLFxuICAgIFJvb3Q6IFByb3BUeXBlcy5lbGVtZW50VHlwZVxuICB9KSxcbiAgLyoqXG4gICogVGhlIGV4dHJhIHByb3BzIGZvciB0aGUgc2xvdCBjb21wb25lbnRzLlxuICAqIFlvdSBjYW4gb3ZlcnJpZGUgdGhlIGV4aXN0aW5nIHByb3BzIG9yIGFkZCBuZXcgb25lcy5cbiAgKlxuICAqIFRoaXMgcHJvcCBpcyBhbiBhbGlhcyBmb3IgdGhlIGBzbG90UHJvcHNgIHByb3AuXG4gICogSXQncyByZWNvbW1lbmRlZCB0byB1c2UgdGhlIGBzbG90UHJvcHNgIHByb3AgaW5zdGVhZCwgYXMgYGNvbXBvbmVudHNQcm9wc2Agd2lsbCBiZSBkZXByZWNhdGVkIGluIHRoZSBmdXR1cmUuXG4gICpcbiAgKiBAZGVmYXVsdCB7fVxuICAqL1xuICBjb21wb25lbnRzUHJvcHM6IFByb3BUeXBlcy5zaGFwZSh7XG4gICAgYmFkZ2U6IFByb3BUeXBlcy5vbmVPZlR5cGUoW1Byb3BUeXBlcy5mdW5jLCBQcm9wVHlwZXMub2JqZWN0XSksXG4gICAgcm9vdDogUHJvcFR5cGVzLm9uZU9mVHlwZShbUHJvcFR5cGVzLmZ1bmMsIFByb3BUeXBlcy5vYmplY3RdKVxuICB9KSxcbiAgLyoqXG4gICogSWYgYHRydWVgLCB0aGUgYmFkZ2UgaXMgaW52aXNpYmxlLlxuICAqIEBkZWZhdWx0IGZhbHNlXG4gICovXG4gIGludmlzaWJsZTogUHJvcFR5cGVzLmJvb2wsXG4gIC8qKlxuICAqIE1heCBjb3VudCB0byBzaG93LlxuICAqIEBkZWZhdWx0IDk5XG4gICovXG4gIG1heDogUHJvcFR5cGVzLm51bWJlcixcbiAgLyoqXG4gICogV3JhcHBlZCBzaGFwZSB0aGUgYmFkZ2Ugc2hvdWxkIG92ZXJsYXAuXG4gICogQGRlZmF1bHQgJ3JlY3Rhbmd1bGFyJ1xuICAqL1xuICBvdmVybGFwOiBQcm9wVHlwZXMub25lT2YoW1wiY2lyY3VsYXJcIiwgXCJyZWN0YW5ndWxhclwiXSksXG4gIC8qKlxuICAqIENvbnRyb2xzIHdoZXRoZXIgdGhlIGJhZGdlIGlzIGhpZGRlbiB3aGVuIGBiYWRnZUNvbnRlbnRgIGlzIHplcm8uXG4gICogQGRlZmF1bHQgZmFsc2VcbiAgKi9cbiAgc2hvd1plcm86IFByb3BUeXBlcy5ib29sLFxuICAvKipcbiAgKiBUaGUgcHJvcHMgdXNlZCBmb3IgZWFjaCBzbG90IGluc2lkZSB0aGUgQmFkZ2UuXG4gICogQGRlZmF1bHQge31cbiAgKi9cbiAgc2xvdFByb3BzOiBQcm9wVHlwZXMuc2hhcGUoe1xuICAgIGJhZGdlOiBQcm9wVHlwZXMub25lT2ZUeXBlKFtQcm9wVHlwZXMuZnVuYywgUHJvcFR5cGVzLm9iamVjdF0pLFxuICAgIHJvb3Q6IFByb3BUeXBlcy5vbmVPZlR5cGUoW1Byb3BUeXBlcy5mdW5jLCBQcm9wVHlwZXMub2JqZWN0XSlcbiAgfSksXG4gIC8qKlxuICAqIFRoZSBjb21wb25lbnRzIHVzZWQgZm9yIGVhY2ggc2xvdCBpbnNpZGUgdGhlIEJhZGdlLlxuICAqIEVpdGhlciBhIHN0cmluZyB0byB1c2UgYSBIVE1MIGVsZW1lbnQgb3IgYSBjb21wb25lbnQuXG4gICogQGRlZmF1bHQge31cbiAgKi9cbiAgc2xvdHM6IFByb3BUeXBlcy5zaGFwZSh7XG4gICAgYmFkZ2U6IFByb3BUeXBlcy5lbGVtZW50VHlwZSxcbiAgICByb290OiBQcm9wVHlwZXMuZWxlbWVudFR5cGVcbiAgfSksXG4gIC8qKlxuICAqIFRoZSBzeXN0ZW0gcHJvcCB0aGF0IGFsbG93cyBkZWZpbmluZyBzeXN0ZW0gb3ZlcnJpZGVzIGFzIHdlbGwgYXMgYWRkaXRpb25hbCBDU1Mgc3R5bGVzLlxuICAqL1xuICBzeDogUHJvcFR5cGVzLm9uZU9mVHlwZShbUHJvcFR5cGVzLmFycmF5T2YoUHJvcFR5cGVzLm9uZU9mVHlwZShbUHJvcFR5cGVzLmZ1bmMsIFByb3BUeXBlcy5vYmplY3QsIFByb3BUeXBlcy5ib29sXSkpLCBQcm9wVHlwZXMuZnVuYywgUHJvcFR5cGVzLm9iamVjdF0pLFxuICAvKipcbiAgKiBUaGUgdmFyaWFudCB0byB1c2UuXG4gICogQGRlZmF1bHQgJ3N0YW5kYXJkJ1xuICAqL1xuICB2YXJpYW50OiBQcm9wVHlwZXMgLyogQHR5cGVzY3JpcHQtdG8tcHJvcHR5cGVzLWlnbm9yZSAqLy5vbmVPZlR5cGUoW1Byb3BUeXBlcy5vbmVPZihbXCJkb3RcIiwgXCJzdGFuZGFyZFwiXSksIFByb3BUeXBlcy5zdHJpbmddKVxufSA6IHZvaWQgMDtcbmV4cG9ydCBkZWZhdWx0IEJhZGdlO1xudmFyIF9jLCBfYzE7XG4kUmVmcmVzaFJlZyQoX2MsIFwiQmFkZ2UkUmVhY3QuZm9yd2FyZFJlZlwiKTtcbiRSZWZyZXNoUmVnJChfYzEsIFwiQmFkZ2VcIik7XG47XG4vLyBXcmFwcGVkIGluIGFuIElJRkUgdG8gYXZvaWQgcG9sbHV0aW5nIHRoZSBnbG9iYWwgc2NvcGVcbjtcbihmdW5jdGlvbiAoKSB7XG4gIHZhciBfYSwgX2I7XG4gIC8vIExlZ2FjeSBDU1MgaW1wbGVtZW50YXRpb25zIHdpbGwgYGV2YWxgIGJyb3dzZXIgY29kZSBpbiBhIE5vZGUuanMgY29udGV4dFxuICAvLyB0byBleHRyYWN0IENTUy4gRm9yIGJhY2t3YXJkcyBjb21wYXRpYmlsaXR5LCB3ZSBuZWVkIHRvIGNoZWNrIHdlJ3JlIGluIGFcbiAgLy8gYnJvd3NlciBjb250ZXh0IGJlZm9yZSBjb250aW51aW5nLlxuICBpZiAodHlwZW9mIHNlbGYgIT09ICd1bmRlZmluZWQnICYmXG4gIC8vIEFNUCAvIE5vLUpTIG1vZGUgZG9lcyBub3QgaW5qZWN0IHRoZXNlIGhlbHBlcnM6XG4gICckUmVmcmVzaEhlbHBlcnMkJyBpbiBzZWxmKSB7XG4gICAgLy8gQHRzLWlnbm9yZSBfX3dlYnBhY2tfbW9kdWxlX18gaXMgZ2xvYmFsXG4gICAgdmFyIGN1cnJlbnRFeHBvcnRzID0gX193ZWJwYWNrX21vZHVsZV9fLmV4cG9ydHM7XG4gICAgLy8gQHRzLWlnbm9yZSBfX3dlYnBhY2tfbW9kdWxlX18gaXMgZ2xvYmFsXG4gICAgdmFyIHByZXZTaWduYXR1cmUgPSAoX2IgPSAoX2EgPSBfX3dlYnBhY2tfbW9kdWxlX18uaG90LmRhdGEpID09PSBudWxsIHx8IF9hID09PSB2b2lkIDAgPyB2b2lkIDAgOiBfYS5wcmV2U2lnbmF0dXJlKSAhPT0gbnVsbCAmJiBfYiAhPT0gdm9pZCAwID8gX2IgOiBudWxsO1xuICAgIC8vIFRoaXMgY2Fubm90IGhhcHBlbiBpbiBNYWluVGVtcGxhdGUgYmVjYXVzZSB0aGUgZXhwb3J0cyBtaXNtYXRjaCBiZXR3ZWVuXG4gICAgLy8gdGVtcGxhdGluZyBhbmQgZXhlY3V0aW9uLlxuICAgIHNlbGYuJFJlZnJlc2hIZWxwZXJzJC5yZWdpc3RlckV4cG9ydHNGb3JSZWFjdFJlZnJlc2goY3VycmVudEV4cG9ydHMsIF9fd2VicGFja19tb2R1bGVfXy5pZCk7XG4gICAgLy8gQSBtb2R1bGUgY2FuIGJlIGFjY2VwdGVkIGF1dG9tYXRpY2FsbHkgYmFzZWQgb24gaXRzIGV4cG9ydHMsIGUuZy4gd2hlblxuICAgIC8vIGl0IGlzIGEgUmVmcmVzaCBCb3VuZGFyeS5cbiAgICBpZiAoc2VsZi4kUmVmcmVzaEhlbHBlcnMkLmlzUmVhY3RSZWZyZXNoQm91bmRhcnkoY3VycmVudEV4cG9ydHMpKSB7XG4gICAgICAvLyBTYXZlIHRoZSBwcmV2aW91cyBleHBvcnRzIHNpZ25hdHVyZSBvbiB1cGRhdGUgc28gd2UgY2FuIGNvbXBhcmUgdGhlIGJvdW5kYXJ5XG4gICAgICAvLyBzaWduYXR1cmVzLiBXZSBhdm9pZCBzYXZpbmcgZXhwb3J0cyB0aGVtc2VsdmVzIHNpbmNlIGl0IGNhdXNlcyBtZW1vcnkgbGVha3MgKGh0dHBzOi8vZ2l0aHViLmNvbS92ZXJjZWwvbmV4dC5qcy9wdWxsLzUzNzk3KVxuICAgICAgX193ZWJwYWNrX21vZHVsZV9fLmhvdC5kaXNwb3NlKGZ1bmN0aW9uIChkYXRhKSB7XG4gICAgICAgIGRhdGEucHJldlNpZ25hdHVyZSA9IHNlbGYuJFJlZnJlc2hIZWxwZXJzJC5nZXRSZWZyZXNoQm91bmRhcnlTaWduYXR1cmUoY3VycmVudEV4cG9ydHMpO1xuICAgICAgfSk7XG4gICAgICAvLyBVbmNvbmRpdGlvbmFsbHkgYWNjZXB0IGFuIHVwZGF0ZSB0byB0aGlzIG1vZHVsZSwgd2UnbGwgY2hlY2sgaWYgaXQnc1xuICAgICAgLy8gc3RpbGwgYSBSZWZyZXNoIEJvdW5kYXJ5IGxhdGVyLlxuICAgICAgLy8gQHRzLWlnbm9yZSBpbXBvcnRNZXRhIGlzIHJlcGxhY2VkIGluIHRoZSBsb2FkZXJcbiAgICAgIGltcG9ydC5tZXRhLndlYnBhY2tIb3QuYWNjZXB0KCk7XG4gICAgICAvLyBUaGlzIGZpZWxkIGlzIHNldCB3aGVuIHRoZSBwcmV2aW91cyB2ZXJzaW9uIG9mIHRoaXMgbW9kdWxlIHdhcyBhXG4gICAgICAvLyBSZWZyZXNoIEJvdW5kYXJ5LCBsZXR0aW5nIHVzIGtub3cgd2UgbmVlZCB0byBjaGVjayBmb3IgaW52YWxpZGF0aW9uIG9yXG4gICAgICAvLyBlbnF1ZXVlIGFuIHVwZGF0ZS5cbiAgICAgIGlmIChwcmV2U2lnbmF0dXJlICE9PSBudWxsKSB7XG4gICAgICAgIC8vIEEgYm91bmRhcnkgY2FuIGJlY29tZSBpbmVsaWdpYmxlIGlmIGl0cyBleHBvcnRzIGFyZSBpbmNvbXBhdGlibGVcbiAgICAgICAgLy8gd2l0aCB0aGUgcHJldmlvdXMgZXhwb3J0cy5cbiAgICAgICAgLy9cbiAgICAgICAgLy8gRm9yIGV4YW1wbGUsIGlmIHlvdSBhZGQvcmVtb3ZlL2NoYW5nZSBleHBvcnRzLCB3ZSdsbCB3YW50IHRvXG4gICAgICAgIC8vIHJlLWV4ZWN1dGUgdGhlIGltcG9ydGluZyBtb2R1bGVzLCBhbmQgZm9yY2UgdGhvc2UgY29tcG9uZW50cyB0b1xuICAgICAgICAvLyByZS1yZW5kZXIuIFNpbWlsYXJseSwgaWYgeW91IGNvbnZlcnQgYSBjbGFzcyBjb21wb25lbnQgdG8gYVxuICAgICAgICAvLyBmdW5jdGlvbiwgd2Ugd2FudCB0byBpbnZhbGlkYXRlIHRoZSBib3VuZGFyeS5cbiAgICAgICAgaWYgKHNlbGYuJFJlZnJlc2hIZWxwZXJzJC5zaG91bGRJbnZhbGlkYXRlUmVhY3RSZWZyZXNoQm91bmRhcnkocHJldlNpZ25hdHVyZSwgc2VsZi4kUmVmcmVzaEhlbHBlcnMkLmdldFJlZnJlc2hCb3VuZGFyeVNpZ25hdHVyZShjdXJyZW50RXhwb3J0cykpKSB7XG4gICAgICAgICAgX193ZWJwYWNrX21vZHVsZV9fLmhvdC5pbnZhbGlkYXRlKCk7XG4gICAgICAgIH0gZWxzZSB7XG4gICAgICAgICAgc2VsZi4kUmVmcmVzaEhlbHBlcnMkLnNjaGVkdWxlVXBkYXRlKCk7XG4gICAgICAgIH1cbiAgICAgIH1cbiAgICB9IGVsc2Uge1xuICAgICAgLy8gU2luY2Ugd2UganVzdCBleGVjdXRlZCB0aGUgY29kZSBmb3IgdGhlIG1vZHVsZSwgaXQncyBwb3NzaWJsZSB0aGF0IHRoZVxuICAgICAgLy8gbmV3IGV4cG9ydHMgbWFkZSBpdCBpbmVsaWdpYmxlIGZvciBiZWluZyBhIGJvdW5kYXJ5LlxuICAgICAgLy8gV2Ugb25seSBjYXJlIGFib3V0IHRoZSBjYXNlIHdoZW4gd2Ugd2VyZSBfcHJldmlvdXNseV8gYSBib3VuZGFyeSxcbiAgICAgIC8vIGJlY2F1c2Ugd2UgYWxyZWFkeSBhY2NlcHRlZCB0aGlzIHVwZGF0ZSAoYWNjaWRlbnRhbCBzaWRlIGVmZmVjdCkuXG4gICAgICB2YXIgaXNOb0xvbmdlckFCb3VuZGFyeSA9IHByZXZTaWduYXR1cmUgIT09IG51bGw7XG4gICAgICBpZiAoaXNOb0xvbmdlckFCb3VuZGFyeSkge1xuICAgICAgICBfX3dlYnBhY2tfbW9kdWxlX18uaG90LmludmFsaWRhdGUoKTtcbiAgICAgIH1cbiAgICB9XG4gIH1cbn0pKCk7Il19*%2F%22%7D"; -import { styled as _styled2 } from "@mui/zero-runtime"; -import _theme2 from "@mui/zero-runtime/theme"; -import { styled as _styled } from "@mui/zero-runtime"; -import _theme from "@mui/zero-runtime/theme"; -import { createUseThemeProps as _createUseThemeProps } from "@mui/zero-runtime"; -/* __next_internal_client_entry_do_not_use__ default auto */var _s = $RefreshSig$(); -import _extends from "@babel/runtime/helpers/esm/extends"; -import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose"; -const _excluded = ["anchorOrigin", "className", "classes", "component", "components", "componentsProps", "children", "overlap", "color", "invisible", "max", "badgeContent", "slots", "slotProps", "showZero", "variant"]; -import * as React from "react"; -import PropTypes from "prop-types"; -import clsx from "clsx"; -import { usePreviousProps } from "@mui/utils"; -import { unstable_composeClasses as composeClasses } from "@mui/base/composeClasses"; -import { useBadge } from "@mui/base/useBadge"; -import { useSlotProps } from "@mui/base"; -import capitalize from "../utils/capitalize"; -import { getBadgeUtilityClass } from "./badgeClasses"; -import { jsx as _jsx } from "react/jsx-runtime"; -import { jsxs as _jsxs } from "react/jsx-runtime"; -const useThemeProps = /*#__PURE__*/_createUseThemeProps({ - color: "error" -}); -const useUtilityClasses = ownerState => { - const { - color, - anchorOrigin, - invisible, - overlap, - variant, - classes = {} - } = ownerState; - const slots = { - root: ["root"], - badge: ["badge", variant, invisible && "invisible", `anchorOrigin${capitalize(anchorOrigin.vertical)}${capitalize(anchorOrigin.horizontal)}`, `anchorOrigin${capitalize(anchorOrigin.vertical)}${capitalize(anchorOrigin.horizontal)}${capitalize(overlap)}`, `overlap${capitalize(overlap)}`, color !== "default" && `color${capitalize(color)}`] - }; - return composeClasses(slots, getBadgeUtilityClass, classes); -}; -const BadgeRoot = /*#__PURE__*/_styled("span", { - name: "MuiBadge", - slot: "Root", - overridesResolver: (props, styles) => styles.root -})({ - classes: ["BadgeRoot_bdxyzxj"] -}); -const BadgeBadge = /*#__PURE__*/_styled2("span", { - name: "MuiBadge", - slot: "Badge", - overridesResolver: (props, styles) => { - const { - ownerState - } = props; - return [styles.badge, styles[ownerState.variant], styles[`anchorOrigin${capitalize(ownerState.anchorOrigin.vertical)}${capitalize(ownerState.anchorOrigin.horizontal)}${capitalize(ownerState.overlap)}`], ownerState.color !== "default" && styles[`color${capitalize(ownerState.color)}`], ownerState.invisible && styles.invisible]; - } -})({ - classes: ["BadgeBadge_b14y6z35"], - variants: [{ - props: { - color: "primary" - }, - className: "BadgeBadge_b14y6z35-variant" - }, { - props: { - color: "secondary" - }, - className: "BadgeBadge_b14y6z35-variant-1" - }, { - props: { - color: "error" - }, - className: "BadgeBadge_b14y6z35-variant-2" - }, { - props: { - color: "warning" - }, - className: "BadgeBadge_b14y6z35-variant-3" - }, { - props: { - color: "info" - }, - className: "BadgeBadge_b14y6z35-variant-4" - }, { - props: { - color: "success" - }, - className: "BadgeBadge_b14y6z35-variant-5" - }, { - props: { - variant: "dot" - }, - className: "BadgeBadge_b14y6z35-variant-6" - }, { - props: ({ - ownerState - }) => ownerState.anchorOrigin.vertical === "top" && ownerState.anchorOrigin.horizontal === "right" && ownerState.overlap === "rectangular", - className: "BadgeBadge_b14y6z35-variant-7" - }, { - props: ({ - ownerState - }) => ownerState.anchorOrigin.vertical === "bottom" && ownerState.anchorOrigin.horizontal === "right" && ownerState.overlap === "rectangular", - className: "BadgeBadge_b14y6z35-variant-8" - }, { - props: ({ - ownerState - }) => ownerState.anchorOrigin.vertical === "top" && ownerState.anchorOrigin.horizontal === "left" && ownerState.overlap === "rectangular", - className: "BadgeBadge_b14y6z35-variant-9" - }, { - props: ({ - ownerState - }) => ownerState.anchorOrigin.vertical === "bottom" && ownerState.anchorOrigin.horizontal === "left" && ownerState.overlap === "rectangular", - className: "BadgeBadge_b14y6z35-variant-10" - }, { - props: ({ - ownerState - }) => ownerState.anchorOrigin.vertical === "top" && ownerState.anchorOrigin.horizontal === "right" && ownerState.overlap === "circular", - className: "BadgeBadge_b14y6z35-variant-11" - }, { - props: ({ - ownerState - }) => ownerState.anchorOrigin.vertical === "bottom" && ownerState.anchorOrigin.horizontal === "right" && ownerState.overlap === "circular", - className: "BadgeBadge_b14y6z35-variant-12" - }, { - props: ({ - ownerState - }) => ownerState.anchorOrigin.vertical === "top" && ownerState.anchorOrigin.horizontal === "left" && ownerState.overlap === "circular", - className: "BadgeBadge_b14y6z35-variant-13" - }, { - props: ({ - ownerState - }) => ownerState.anchorOrigin.vertical === "bottom" && ownerState.anchorOrigin.horizontal === "left" && ownerState.overlap === "circular", - className: "BadgeBadge_b14y6z35-variant-14" - }, { - props: { - invisible: true - }, - className: "BadgeBadge_b14y6z35-variant-15" - }] -}); -const Badge = /*#__PURE__*/_s(React.forwardRef(_c = _s(function Badge(inProps, ref) { - _s(); - var _ref, _slots$root, _ref2, _slots$badge, _slotProps$root, _slotProps$badge; - const props = useThemeProps({ - props: inProps, - name: "MuiBadge" - }); - const { - anchorOrigin: anchorOriginProp = { - vertical: "top", - horizontal: "right" - }, - className, - component, - components = {}, - componentsProps = {}, - children, - overlap: overlapProp = "rectangular", - color: colorProp = "default", - invisible: invisibleProp = false, - max: maxProp = 99, - badgeContent: badgeContentProp, - slots, - slotProps, - showZero = false, - variant: variantProp = "standard" - } = props, - other = _objectWithoutPropertiesLoose(props, _excluded); - const { - badgeContent, - invisible: invisibleFromHook, - max, - displayValue: displayValueFromHook - } = useBadge({ - max: maxProp, - invisible: invisibleProp, - badgeContent: badgeContentProp, - showZero - }); - const prevProps = usePreviousProps({ - anchorOrigin: anchorOriginProp, - color: colorProp, - overlap: overlapProp, - variant: variantProp, - badgeContent: badgeContentProp - }); - const invisible = invisibleFromHook || badgeContent == null && variantProp !== "dot"; - const { - color = colorProp, - overlap = overlapProp, - anchorOrigin = anchorOriginProp, - variant = variantProp - } = invisible ? prevProps : props; - const displayValue = variant !== "dot" ? displayValueFromHook : undefined; - const ownerState = _extends({}, props, { - badgeContent, - invisible, - max, - displayValue, - showZero, - anchorOrigin, - color, - overlap, - variant - }); - const classes = useUtilityClasses(ownerState); - // support both `slots` and `components` for backward compatibility - const RootSlot = (_ref = (_slots$root = slots == null ? void 0 : slots.root) != null ? _slots$root : components.Root) != null ? _ref : BadgeRoot; - const BadgeSlot = (_ref2 = (_slots$badge = slots == null ? void 0 : slots.badge) != null ? _slots$badge : components.Badge) != null ? _ref2 : BadgeBadge; - const rootSlotProps = (_slotProps$root = slotProps == null ? void 0 : slotProps.root) != null ? _slotProps$root : componentsProps.root; - const badgeSlotProps = (_slotProps$badge = slotProps == null ? void 0 : slotProps.badge) != null ? _slotProps$badge : componentsProps.badge; - const rootProps = useSlotProps({ - elementType: RootSlot, - externalSlotProps: rootSlotProps, - externalForwardedProps: other, - additionalProps: { - ref, - as: component - }, - ownerState, - className: clsx(rootSlotProps == null ? void 0 : rootSlotProps.className, classes.root, className) - }); - const badgeProps = useSlotProps({ - elementType: BadgeSlot, - externalSlotProps: badgeSlotProps, - ownerState, - className: clsx(classes.badge, badgeSlotProps == null ? void 0 : badgeSlotProps.className) - }); - return /*#__PURE__*/_jsxs(RootSlot, _extends({}, rootProps, { - children: [children, /*#__PURE__*/_jsx(BadgeSlot, _extends({}, badgeProps, { - children: displayValue - }))] - })); -}, "bubpIgLZZtjR369fQXHqd6HzHAQ=", false, function () { - return [useThemeProps, useBadge, usePreviousProps, useUtilityClasses, useSlotProps, useSlotProps]; -})), "bubpIgLZZtjR369fQXHqd6HzHAQ=", false, function () { - return [useThemeProps, useBadge, usePreviousProps, useUtilityClasses, useSlotProps, useSlotProps]; -}); -_c1 = Badge; -"development" !== "production" ? Badge.propTypes /* remove-proptypes */ = { - // β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€ Warning ──────────────────────────────┐ - // β”‚ These PropTypes are generated from the TypeScript type definitions. β”‚ - // β”‚ To update them, edit the d.ts file and run `pnpm proptypes`. β”‚ - // β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜ - /** - * The anchor of the badge. - * @default { - * vertical: 'top', - * horizontal: 'right', - * } - */ - anchorOrigin: PropTypes.shape({ - horizontal: PropTypes.oneOf(["left", "right"]).isRequired, - vertical: PropTypes.oneOf(["bottom", "top"]).isRequired - }), - /** - * The content rendered within the badge. - */ - badgeContent: PropTypes.node, - /** - * The badge will be added relative to this node. - */ - children: PropTypes.node, - /** - * Override or extend the styles applied to the component. - */ - classes: PropTypes.object, - /** - * @ignore - */ - className: PropTypes.string, - /** - * The color of the component. - * It supports both default and custom theme colors, which can be added as shown in the - * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors). - * @default 'default' - */ - color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(["default", "primary", "secondary", "error", "info", "success", "warning"]), PropTypes.string]), - /** - * The component used for the root node. - * Either a string to use a HTML element or a component. - */ - component: PropTypes.elementType, - /** - * The components used for each slot inside. - * - * This prop is an alias for the `slots` prop. - * It's recommended to use the `slots` prop instead. - * - * @default {} - */ - components: PropTypes.shape({ - Badge: PropTypes.elementType, - Root: PropTypes.elementType - }), - /** - * The extra props for the slot components. - * You can override the existing props or add new ones. - * - * This prop is an alias for the `slotProps` prop. - * It's recommended to use the `slotProps` prop instead, as `componentsProps` will be deprecated in the future. - * - * @default {} - */ - componentsProps: PropTypes.shape({ - badge: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), - root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]) - }), - /** - * If `true`, the badge is invisible. - * @default false - */ - invisible: PropTypes.bool, - /** - * Max count to show. - * @default 99 - */ - max: PropTypes.number, - /** - * Wrapped shape the badge should overlap. - * @default 'rectangular' - */ - overlap: PropTypes.oneOf(["circular", "rectangular"]), - /** - * Controls whether the badge is hidden when `badgeContent` is zero. - * @default false - */ - showZero: PropTypes.bool, - /** - * The props used for each slot inside the Badge. - * @default {} - */ - slotProps: PropTypes.shape({ - badge: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), - root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]) - }), - /** - * The components used for each slot inside the Badge. - * Either a string to use a HTML element or a component. - * @default {} - */ - slots: PropTypes.shape({ - badge: PropTypes.elementType, - root: PropTypes.elementType - }), - /** - * The system prop that allows defining system overrides as well as additional CSS styles. - */ - sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]), - /** - * The variant to use. - * @default 'standard' - */ - variant: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(["dot", "standard"]), PropTypes.string]) -} : void 0; -export default Badge; -var _c, _c1; -$RefreshReg$(_c, "Badge$React.forwardRef"); -$RefreshReg$(_c1, "Badge"); -; -// Wrapped in an IIFE to avoid polluting the global scope -; -(function () { - var _a, _b; - // Legacy CSS implementations will `eval` browser code in a Node.js context - // to extract CSS. For backwards compatibility, we need to check we're in a - // browser context before continuing. - if (typeof self !== 'undefined' && - // AMP / No-JS mode does not inject these helpers: - '$RefreshHelpers$' in self) { - // @ts-ignore __webpack_module__ is global - var currentExports = __webpack_module__.exports; - // @ts-ignore __webpack_module__ is global - var prevSignature = (_b = (_a = __webpack_module__.hot.data) === null || _a === void 0 ? void 0 : _a.prevSignature) !== null && _b !== void 0 ? _b : null; - // This cannot happen in MainTemplate because the exports mismatch between - // templating and execution. - self.$RefreshHelpers$.registerExportsForReactRefresh(currentExports, __webpack_module__.id); - // A module can be accepted automatically based on its exports, e.g. when - // it is a Refresh Boundary. - if (self.$RefreshHelpers$.isReactRefreshBoundary(currentExports)) { - // Save the previous exports signature on update so we can compare the boundary - // signatures. We avoid saving exports themselves since it causes memory leaks (https://github.com/vercel/next.js/pull/53797) - __webpack_module__.hot.dispose(function (data) { - data.prevSignature = self.$RefreshHelpers$.getRefreshBoundarySignature(currentExports); - }); - // Unconditionally accept an update to this module, we'll check if it's - // still a Refresh Boundary later. - // @ts-ignore importMeta is replaced in the loader - import.meta.webpackHot.accept(); - // This field is set when the previous version of this module was a - // Refresh Boundary, letting us know we need to check for invalidation or - // enqueue an update. - if (prevSignature !== null) { - // A boundary can become ineligible if its exports are incompatible - // with the previous exports. - // - // For example, if you add/remove/change exports, we'll want to - // re-execute the importing modules, and force those components to - // re-render. Similarly, if you convert a class component to a - // function, we want to invalidate the boundary. - if (self.$RefreshHelpers$.shouldInvalidateReactRefreshBoundary(prevSignature, self.$RefreshHelpers$.getRefreshBoundarySignature(currentExports))) { - __webpack_module__.hot.invalidate(); - } else { - self.$RefreshHelpers$.scheduleUpdate(); - } - } - } else { - // Since we just executed the code for the module, it's possible that the - // new exports made it ineligible for being a boundary. - // We only care about the case when we were _previously_ a boundary, - // because we already accepted this update (accidental side effect). - var isNoLongerABoundary = prevSignature !== null; - if (isNoLongerABoundary) { - __webpack_module__.hot.invalidate(); - } - } - } -})(); \ No newline at end of file diff --git a/apps/zero-runtime-next-app/build-log/page.tsx b/apps/zero-runtime-next-app/build-log/page.tsx deleted file mode 100644 index ea43c1791283e2..00000000000000 --- a/apps/zero-runtime-next-app/build-log/page.tsx +++ /dev/null @@ -1,227 +0,0 @@ -import "/Users/siriwatknp/Personal-Repos/material-ui/packages/zero-next-plugin/zero-virtual.css?%7B%22filename%22%3A%2213zo735.zero.css%22%2C%22source%22%3A%22.visuallyHidden_v1bdmy7h%7Bborder%3A0%3Bclip%3Arect(0%200%200%200)%3Bheight%3A1px%3Bmargin%3A-1px%3Boverflow%3Ahidden%3Bpadding%3A0%3Bposition%3Aabsolute%3Bwhite-space%3Anowrap%3Bwidth%3A1px%3B%7D%5Cn.Main_m1o6sjk5%7Bcolor%3Argb(var(--foreground-rgb))%3Bbackground%3Alinear-gradient(to%20bottom%2C%20transparent%2C%20rgb(var(--background-end-rgb)))%20rgb(var(--background-start-rgb))%3Bdisplay%3Aflex%3Bflex-direction%3Acolumn%3Bjustify-content%3Aspace-between%3Balign-items%3Acenter%3Bpadding%3A6rem%3Bmin-height%3A100vh%3B%7D%5Cn.Description_d1wnawl7%7Bdisplay%3Ainherit%3Bjustify-content%3Ainherit%3Balign-items%3Ainherit%3Bfont-size%3A0.85rem%3Bmax-width%3Avar(--max-width)%3Bwidth%3A100%25%3Bz-index%3A2%3Bfont-family%3Avar(--font-mono)%3B%7D.Description_d1wnawl7%20a%7Bdisplay%3Aflex%3Bjustify-content%3Acenter%3Balign-items%3Acenter%3Bgap%3A0.5rem%3B%7D.Description_d1wnawl7%20p%7Bposition%3Arelative%3Bmargin%3A0%3Bpadding%3A1rem%3Bbackground-color%3Argba(var(--callout-rgb)%2C%200.5)%3Bborder%3A1px%20solid%20rgba(var(--callout-border-rgb)%2C%200.3)%3Bborder-radius%3Avar(--border-radius)%3B%7D%40media%20(max-width%3A%20700px)%7B.Description_d1wnawl7%7Bfont-size%3A0.8rem%3B%7D.Description_d1wnawl7%20a%7Bpadding%3A1rem%3B%7D.Description_d1wnawl7%20p%2C.Description_d1wnawl7%20div%7Bdisplay%3Aflex%3Bjustify-content%3Acenter%3Bposition%3Afixed%3Bwidth%3A100%25%3B%7D.Description_d1wnawl7%20p%7Balign-items%3Acenter%3Binset%3A0%200%20auto%3Bpadding%3A2rem%201rem%201.4rem%3Bborder-radius%3A0%3Bborder%3Anone%3Bborder-bottom%3A1px%20solid%20rgba(var(--callout-border-rgb)%2C%200.25)%3Bbackground%3Alinear-gradient(%5Cn%20%20to%20bottom%2C%5Cn%20%20rgba(var(--background-start-rgb)%2C%201)%2C%5Cn%20%20rgba(var(--callout-rgb)%2C%200.5)%5Cn)%3Bbackground-clip%3Apadding-box%3Bbackdrop-filter%3Ablur(24px)%3B%7D.Description_d1wnawl7%20div%7Balign-items%3Aflex-end%3Bpointer-events%3Anone%3Binset%3Aauto%200%200%3Bpadding%3A2rem%3Bheight%3A200px%3Bbackground%3Alinear-gradient(to%20bottom%2C%20transparent%200%25%2C%20rgb(var(--background-end-rgb))%2040%25)%3Bz-index%3A1%3B%7D%7D%5Cn%2F*%23%20sourceMappingURL%3Ddata%3Aapplication%2Fjson%3Bbase64%2CeyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9Vc2Vycy9zaXJpd2F0a25wL1BlcnNvbmFsLVJlcG9zL21hdGVyaWFsLXVpL2FwcHMvemVyby1ydW50aW1lLW5leHQtYXBwL3NyYy9hcHAvcGFnZS50c3giXSwibmFtZXMiOlsiLnZpc3VhbGx5SGlkZGVuX3YxYmRteTdoIiwiLk1haW5fbTFvNnNqazUiLCIuRGVzY3JpcHRpb25fZDF3bmF3bDciXSwibWFwcGluZ3MiOiJBQUt1QkE7QUFXVkM7QUFVT0MiLCJmaWxlIjoiL1VzZXJzL3Npcml3YXRrbnAvUGVyc29uYWwtUmVwb3MvbWF0ZXJpYWwtdWkvYXBwcy96ZXJvLXJ1bnRpbWUtbmV4dC1hcHAvc3JjL2FwcC9wYWdlLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGpzeERFViBhcyBfanN4REVWIH0gZnJvbSBcInJlYWN0L2pzeC1kZXYtcnVudGltZVwiO1xuaW1wb3J0IEltYWdlIGZyb20gXCJuZXh0L2ltYWdlXCI7XG5pbXBvcnQgeyBzdHlsZWQsIGNzcyB9IGZyb20gXCJAbXVpL3plcm8tcnVudGltZVwiO1xuaW1wb3J0IEJhZGdlIGZyb20gXCJAbXVpL21hdGVyaWFsL0JhZGdlXCI7XG5pbXBvcnQgc3R5bGVzIGZyb20gXCIuL3BhZ2UubW9kdWxlLmNzc1wiO1xuY29uc3QgdmlzdWFsbHlIaWRkZW4gPSBjc3Moe1xuICBib3JkZXI6IDAsXG4gIGNsaXA6IFwicmVjdCgwIDAgMCAwKVwiLFxuICBoZWlnaHQ6IFwiMXB4XCIsXG4gIG1hcmdpbjogLTEsXG4gIG92ZXJmbG93OiBcImhpZGRlblwiLFxuICBwYWRkaW5nOiAwLFxuICBwb3NpdGlvbjogXCJhYnNvbHV0ZVwiLFxuICB3aGl0ZVNwYWNlOiBcIm5vd3JhcFwiLFxuICB3aWR0aDogXCIxcHhcIlxufSk7XG5jb25zdCBNYWluID0gc3R5bGVkLm1haW4oe1xuICBjb2xvcjogXCJyZ2IodmFyKC0tZm9yZWdyb3VuZC1yZ2IpKVwiLFxuICBiYWNrZ3JvdW5kOiBgbGluZWFyLWdyYWRpZW50KHRvIGJvdHRvbSwgdHJhbnNwYXJlbnQsIHJnYih2YXIoLS1iYWNrZ3JvdW5kLWVuZC1yZ2IpKSkgcmdiKHZhcigtLWJhY2tncm91bmQtc3RhcnQtcmdiKSlgLFxuICBkaXNwbGF5OiBcImZsZXhcIixcbiAgZmxleERpcmVjdGlvbjogXCJjb2x1bW5cIixcbiAganVzdGlmeUNvbnRlbnQ6IFwic3BhY2UtYmV0d2VlblwiLFxuICBhbGlnbkl0ZW1zOiBcImNlbnRlclwiLFxuICBwYWRkaW5nOiBcIjZyZW1cIixcbiAgbWluSGVpZ2h0OiBcIjEwMHZoXCJcbn0pO1xuY29uc3QgRGVzY3JpcHRpb24gPSBzdHlsZWQuZGl2KHtcbiAgZGlzcGxheTogXCJpbmhlcml0XCIsXG4gIGp1c3RpZnlDb250ZW50OiBcImluaGVyaXRcIixcbiAgYWxpZ25JdGVtczogXCJpbmhlcml0XCIsXG4gIGZvbnRTaXplOiBcIjAuODVyZW1cIixcbiAgbWF4V2lkdGg6IFwidmFyKC0tbWF4LXdpZHRoKVwiLFxuICB3aWR0aDogXCIxMDAlXCIsXG4gIHpJbmRleDogMixcbiAgZm9udEZhbWlseTogXCJ2YXIoLS1mb250LW1vbm8pXCIsXG4gIFwiJiBhXCI6IHtcbiAgICBkaXNwbGF5OiBcImZsZXhcIixcbiAgICBqdXN0aWZ5Q29udGVudDogXCJjZW50ZXJcIixcbiAgICBhbGlnbkl0ZW1zOiBcImNlbnRlclwiLFxuICAgIGdhcDogXCIwLjVyZW1cIlxuICB9LFxuICBcIiYgcFwiOiB7XG4gICAgcG9zaXRpb246IFwicmVsYXRpdmVcIixcbiAgICBtYXJnaW46IDAsXG4gICAgcGFkZGluZzogXCIxcmVtXCIsXG4gICAgYmFja2dyb3VuZENvbG9yOiBcInJnYmEodmFyKC0tY2FsbG91dC1yZ2IpLCAwLjUpXCIsXG4gICAgYm9yZGVyOiBcIjFweCBzb2xpZCByZ2JhKHZhcigtLWNhbGxvdXQtYm9yZGVyLXJnYiksIDAuMylcIixcbiAgICBib3JkZXJSYWRpdXM6IFwidmFyKC0tYm9yZGVyLXJhZGl1cylcIlxuICB9LFxuICBcIkBtZWRpYSAobWF4LXdpZHRoOiA3MDBweClcIjoge1xuICAgIGZvbnRTaXplOiBcIjAuOHJlbVwiLFxuICAgIFwiJiBhXCI6IHtcbiAgICAgIHBhZGRpbmc6IFwiMXJlbVwiXG4gICAgfSxcbiAgICBcIiYgcCwgJiBkaXZcIjoge1xuICAgICAgZGlzcGxheTogXCJmbGV4XCIsXG4gICAgICBqdXN0aWZ5Q29udGVudDogXCJjZW50ZXJcIixcbiAgICAgIHBvc2l0aW9uOiBcImZpeGVkXCIsXG4gICAgICB3aWR0aDogXCIxMDAlXCJcbiAgICB9LFxuICAgIFwiJiBwXCI6IHtcbiAgICAgIGFsaWduSXRlbXM6IFwiY2VudGVyXCIsXG4gICAgICBpbnNldDogXCIwIDAgYXV0b1wiLFxuICAgICAgcGFkZGluZzogXCIycmVtIDFyZW0gMS40cmVtXCIsXG4gICAgICBib3JkZXJSYWRpdXM6IFwiMFwiLFxuICAgICAgYm9yZGVyOiBcIm5vbmVcIixcbiAgICAgIGJvcmRlckJvdHRvbTogXCIxcHggc29saWQgcmdiYSh2YXIoLS1jYWxsb3V0LWJvcmRlci1yZ2IpLCAwLjI1KVwiLFxuICAgICAgYmFja2dyb3VuZDogYGxpbmVhci1ncmFkaWVudChcbiAgdG8gYm90dG9tLFxuICByZ2JhKHZhcigtLWJhY2tncm91bmQtc3RhcnQtcmdiKSwgMSksXG4gIHJnYmEodmFyKC0tY2FsbG91dC1yZ2IpLCAwLjUpXG4pYCxcbiAgICAgIGJhY2tncm91bmRDbGlwOiBcInBhZGRpbmctYm94XCIsXG4gICAgICBiYWNrZHJvcEZpbHRlcjogXCJibHVyKDI0cHgpXCJcbiAgICB9LFxuICAgIFwiJiBkaXZcIjoge1xuICAgICAgYWxpZ25JdGVtczogXCJmbGV4LWVuZFwiLFxuICAgICAgcG9pbnRlckV2ZW50czogXCJub25lXCIsXG4gICAgICBpbnNldDogXCJhdXRvIDAgMFwiLFxuICAgICAgcGFkZGluZzogXCIycmVtXCIsXG4gICAgICBoZWlnaHQ6IFwiMjAwcHhcIixcbiAgICAgIGJhY2tncm91bmQ6IGBsaW5lYXItZ3JhZGllbnQodG8gYm90dG9tLCB0cmFuc3BhcmVudCAwJSwgcmdiKHZhcigtLWJhY2tncm91bmQtZW5kLXJnYikpIDQwJSlgLFxuICAgICAgekluZGV4OiAxXG4gICAgfVxuICB9XG59KTtcbmV4cG9ydCBkZWZhdWx0IGZ1bmN0aW9uIEhvbWUoKSB7XG4gIHJldHVybiAvKiNfX1BVUkVfXyovX2pzeERFVihNYWluLCB7XG4gICAgY2hpbGRyZW46IFsvKiNfX1BVUkVfXyovX2pzeERFVihcImRpdlwiLCB7XG4gICAgICBjbGFzc05hbWU6IHZpc3VhbGx5SGlkZGVuLFxuICAgICAgY2hpbGRyZW46IFwiSSBhbSBpbnZpc2libGVcIlxuICAgIH0sIHZvaWQgMCwgZmFsc2UsIHtcbiAgICAgIGZpbGVOYW1lOiBcIi9Vc2Vycy9zaXJpd2F0a25wL1BlcnNvbmFsLVJlcG9zL21hdGVyaWFsLXVpL2FwcHMvemVyby1ydW50aW1lLW5leHQtYXBwL3NyYy9hcHAvcGFnZS50c3hcIixcbiAgICAgIGxpbmVOdW1iZXI6IDkzLFxuICAgICAgY29sdW1uTnVtYmVyOiA3XG4gICAgfSwgdGhpcyksIC8qI19fUFVSRV9fKi9fanN4REVWKEJhZGdlLCB7XG4gICAgICB2YXJpYW50OiBcImRvdFwiLFxuICAgICAgY2hpbGRyZW46IC8qI19fUFVSRV9fKi9fanN4REVWKFwiZGl2XCIsIHtcbiAgICAgICAgY2hpbGRyZW46IFwiSGV5XCJcbiAgICAgIH0sIHZvaWQgMCwgZmFsc2UsIHtcbiAgICAgICAgZmlsZU5hbWU6IFwiL1VzZXJzL3Npcml3YXRrbnAvUGVyc29uYWwtUmVwb3MvbWF0ZXJpYWwtdWkvYXBwcy96ZXJvLXJ1bnRpbWUtbmV4dC1hcHAvc3JjL2FwcC9wYWdlLnRzeFwiLFxuICAgICAgICBsaW5lTnVtYmVyOiA5NSxcbiAgICAgICAgY29sdW1uTnVtYmVyOiA5XG4gICAgICB9LCB0aGlzKVxuICAgIH0sIHZvaWQgMCwgZmFsc2UsIHtcbiAgICAgIGZpbGVOYW1lOiBcIi9Vc2Vycy9zaXJpd2F0a25wL1BlcnNvbmFsLVJlcG9zL21hdGVyaWFsLXVpL2FwcHMvemVyby1ydW50aW1lLW5leHQtYXBwL3NyYy9hcHAvcGFnZS50c3hcIixcbiAgICAgIGxpbmVOdW1iZXI6IDk0LFxuICAgICAgY29sdW1uTnVtYmVyOiA3XG4gICAgfSwgdGhpcyksIC8qI19fUFVSRV9fKi9fanN4REVWKERlc2NyaXB0aW9uLCB7XG4gICAgICBjaGlsZHJlbjogWy8qI19fUFVSRV9fKi9fanN4REVWKFwicFwiLCB7XG4gICAgICAgIGNoaWxkcmVuOiBbXCJHZXQgc3RhcnRlZCBieSBlZGl0aW5nXFx4YTBcIiwgLyojX19QVVJFX18qL19qc3hERVYoXCJjb2RlXCIsIHtcbiAgICAgICAgICBjbGFzc05hbWU6IHN0eWxlcy5jb2RlLFxuICAgICAgICAgIGNoaWxkcmVuOiBcInNyYy9hcHAvcGFnZS50c3hcIlxuICAgICAgICB9LCB2b2lkIDAsIGZhbHNlLCB7XG4gICAgICAgICAgZmlsZU5hbWU6IFwiL1VzZXJzL3Npcml3YXRrbnAvUGVyc29uYWwtUmVwb3MvbWF0ZXJpYWwtdWkvYXBwcy96ZXJvLXJ1bnRpbWUtbmV4dC1hcHAvc3JjL2FwcC9wYWdlLnRzeFwiLFxuICAgICAgICAgIGxpbmVOdW1iZXI6IDEwMCxcbiAgICAgICAgICBjb2x1bW5OdW1iZXI6IDExXG4gICAgICAgIH0sIHRoaXMpXVxuICAgICAgfSwgdm9pZCAwLCB0cnVlLCB7XG4gICAgICAgIGZpbGVOYW1lOiBcIi9Vc2Vycy9zaXJpd2F0a25wL1BlcnNvbmFsLVJlcG9zL21hdGVyaWFsLXVpL2FwcHMvemVyby1ydW50aW1lLW5leHQtYXBwL3NyYy9hcHAvcGFnZS50c3hcIixcbiAgICAgICAgbGluZU51bWJlcjogOTgsXG4gICAgICAgIGNvbHVtbk51bWJlcjogOVxuICAgICAgfSwgdGhpcyksIC8qI19fUFVSRV9fKi9fanN4REVWKFwiZGl2XCIsIHtcbiAgICAgICAgY2hpbGRyZW46IC8qI19fUFVSRV9fKi9fanN4REVWKFwiYVwiLCB7XG4gICAgICAgICAgaHJlZjogXCJodHRwczovL3ZlcmNlbC5jb20%2FdXRtX3NvdXJjZT1jcmVhdGUtbmV4dC1hcHAmdXRtX21lZGl1bT1hcHBkaXItdGVtcGxhdGUmdXRtX2NhbXBhaWduPWNyZWF0ZS1uZXh0LWFwcFwiLFxuICAgICAgICAgIHRhcmdldDogXCJfYmxhbmtcIixcbiAgICAgICAgICByZWw6IFwibm9vcGVuZXJcIixcbiAgICAgICAgICBjaGlsZHJlbjogW1wiQnlcIiwgXCIgXCIsIC8qI19fUFVSRV9fKi9fanN4REVWKEltYWdlLCB7XG4gICAgICAgICAgICBzcmM6IFwiL3ZlcmNlbC5zdmdcIixcbiAgICAgICAgICAgIGFsdDogXCJWZXJjZWwgTG9nb1wiLFxuICAgICAgICAgICAgY2xhc3NOYW1lOiBzdHlsZXMudmVyY2VsTG9nbyxcbiAgICAgICAgICAgIHdpZHRoOiAxMDAsXG4gICAgICAgICAgICBoZWlnaHQ6IDI0LFxuICAgICAgICAgICAgcHJpb3JpdHk6IHRydWVcbiAgICAgICAgICB9LCB2b2lkIDAsIGZhbHNlLCB7XG4gICAgICAgICAgICBmaWxlTmFtZTogXCIvVXNlcnMvc2lyaXdhdGtucC9QZXJzb25hbC1SZXBvcy9tYXRlcmlhbC11aS9hcHBzL3plcm8tcnVudGltZS1uZXh0LWFwcC9zcmMvYXBwL3BhZ2UudHN4XCIsXG4gICAgICAgICAgICBsaW5lTnVtYmVyOiAxMDksXG4gICAgICAgICAgICBjb2x1bW5OdW1iZXI6IDEzXG4gICAgICAgICAgfSwgdGhpcyldXG4gICAgICAgIH0sIHZvaWQgMCwgdHJ1ZSwge1xuICAgICAgICAgIGZpbGVOYW1lOiBcIi9Vc2Vycy9zaXJpd2F0a25wL1BlcnNvbmFsLVJlcG9zL21hdGVyaWFsLXVpL2FwcHMvemVyby1ydW50aW1lLW5leHQtYXBwL3NyYy9hcHAvcGFnZS50c3hcIixcbiAgICAgICAgICBsaW5lTnVtYmVyOiAxMDMsXG4gICAgICAgICAgY29sdW1uTnVtYmVyOiAxMVxuICAgICAgICB9LCB0aGlzKVxuICAgICAgfSwgdm9pZCAwLCBmYWxzZSwge1xuICAgICAgICBmaWxlTmFtZTogXCIvVXNlcnMvc2lyaXdhdGtucC9QZXJzb25hbC1SZXBvcy9tYXRlcmlhbC11aS9hcHBzL3plcm8tcnVudGltZS1uZXh0LWFwcC9zcmMvYXBwL3BhZ2UudHN4XCIsXG4gICAgICAgIGxpbmVOdW1iZXI6IDEwMixcbiAgICAgICAgY29sdW1uTnVtYmVyOiA5XG4gICAgICB9LCB0aGlzKV1cbiAgICB9LCB2b2lkIDAsIHRydWUsIHtcbiAgICAgIGZpbGVOYW1lOiBcIi9Vc2Vycy9zaXJpd2F0a25wL1BlcnNvbmFsLVJlcG9zL21hdGVyaWFsLXVpL2FwcHMvemVyby1ydW50aW1lLW5leHQtYXBwL3NyYy9hcHAvcGFnZS50c3hcIixcbiAgICAgIGxpbmVOdW1iZXI6IDk3LFxuICAgICAgY29sdW1uTnVtYmVyOiA3XG4gICAgfSwgdGhpcyksIC8qI19fUFVSRV9fKi9fanN4REVWKFwiZGl2XCIsIHtcbiAgICAgIGNsYXNzTmFtZTogc3R5bGVzLmNlbnRlcixcbiAgICAgIGNoaWxkcmVuOiAvKiNfX1BVUkVfXyovX2pzeERFVihJbWFnZSwge1xuICAgICAgICBjbGFzc05hbWU6IHN0eWxlcy5sb2dvLFxuICAgICAgICBzcmM6IFwiL25leHQuc3ZnXCIsXG4gICAgICAgIGFsdDogXCJOZXh0LmpzIExvZ29cIixcbiAgICAgICAgd2lkdGg6IDE4MCxcbiAgICAgICAgaGVpZ2h0OiAzNyxcbiAgICAgICAgcHJpb3JpdHk6IHRydWVcbiAgICAgIH0sIHZvaWQgMCwgZmFsc2UsIHtcbiAgICAgICAgZmlsZU5hbWU6IFwiL1VzZXJzL3Npcml3YXRrbnAvUGVyc29uYWwtUmVwb3MvbWF0ZXJpYWwtdWkvYXBwcy96ZXJvLXJ1bnRpbWUtbmV4dC1hcHAvc3JjL2FwcC9wYWdlLnRzeFwiLFxuICAgICAgICBsaW5lTnVtYmVyOiAxMjIsXG4gICAgICAgIGNvbHVtbk51bWJlcjogOVxuICAgICAgfSwgdGhpcylcbiAgICB9LCB2b2lkIDAsIGZhbHNlLCB7XG4gICAgICBmaWxlTmFtZTogXCIvVXNlcnMvc2lyaXdhdGtucC9QZXJzb25hbC1SZXBvcy9tYXRlcmlhbC11aS9hcHBzL3plcm8tcnVudGltZS1uZXh0LWFwcC9zcmMvYXBwL3BhZ2UudHN4XCIsXG4gICAgICBsaW5lTnVtYmVyOiAxMjEsXG4gICAgICBjb2x1bW5OdW1iZXI6IDdcbiAgICB9LCB0aGlzKSwgLyojX19QVVJFX18qL19qc3hERVYoXCJkaXZcIiwge1xuICAgICAgY2xhc3NOYW1lOiBzdHlsZXMuZ3JpZCxcbiAgICAgIGNoaWxkcmVuOiBbLyojX19QVVJFX18qL19qc3hERVYoXCJhXCIsIHtcbiAgICAgICAgaHJlZjogXCJodHRwczovL25leHRqcy5vcmcvZG9jcz91dG1fc291cmNlPWNyZWF0ZS1uZXh0LWFwcCZ1dG1fbWVkaXVtPWFwcGRpci10ZW1wbGF0ZSZ1dG1fY2FtcGFpZ249Y3JlYXRlLW5leHQtYXBwXCIsXG4gICAgICAgIGNsYXNzTmFtZTogc3R5bGVzLmNhcmQsXG4gICAgICAgIHRhcmdldDogXCJfYmxhbmtcIixcbiAgICAgICAgcmVsOiBcIm5vb3BlbmVyXCIsXG4gICAgICAgIGNoaWxkcmVuOiBbLyojX19QVVJFX18qL19qc3hERVYoXCJoMlwiLCB7XG4gICAgICAgICAgY2hpbGRyZW46IFtcIkRvY3MgXCIsIC8qI19fUFVSRV9fKi9fanN4REVWKFwic3BhblwiLCB7XG4gICAgICAgICAgICBjaGlsZHJlbjogXCItPlwiXG4gICAgICAgICAgfSwgdm9pZCAwLCBmYWxzZSwge1xuICAgICAgICAgICAgZmlsZU5hbWU6IFwiL1VzZXJzL3Npcml3YXRrbnAvUGVyc29uYWwtUmVwb3MvbWF0ZXJpYWwtdWkvYXBwcy96ZXJvLXJ1bnRpbWUtbmV4dC1hcHAvc3JjL2FwcC9wYWdlLnRzeFwiLFxuICAgICAgICAgICAgbGluZU51bWJlcjogMTQwLFxuICAgICAgICAgICAgY29sdW1uTnVtYmVyOiAxOFxuICAgICAgICAgIH0sIHRoaXMpXVxuICAgICAgICB9LCB2b2lkIDAsIHRydWUsIHtcbiAgICAgICAgICBmaWxlTmFtZTogXCIvVXNlcnMvc2lyaXdhdGtucC9QZXJzb25hbC1SZXBvcy9tYXRlcmlhbC11aS9hcHBzL3plcm8tcnVudGltZS1uZXh0LWFwcC9zcmMvYXBwL3BhZ2UudHN4XCIsXG4gICAgICAgICAgbGluZU51bWJlcjogMTM5LFxuICAgICAgICAgIGNvbHVtbk51bWJlcjogMTFcbiAgICAgICAgfSwgdGhpcyksIC8qI19fUFVSRV9fKi9fanN4REVWKFwicFwiLCB7XG4gICAgICAgICAgY2hpbGRyZW46IFwiRmluZCBpbi1kZXB0aCBpbmZvcm1hdGlvbiBhYm91dCBOZXh0LmpzIGZlYXR1cmVzIGFuZCBBUEkuXCJcbiAgICAgICAgfSwgdm9pZCAwLCBmYWxzZSwge1xuICAgICAgICAgIGZpbGVOYW1lOiBcIi9Vc2Vycy9zaXJpd2F0a25wL1BlcnNvbmFsLVJlcG9zL21hdGVyaWFsLXVpL2FwcHMvemVyby1ydW50aW1lLW5leHQtYXBwL3NyYy9hcHAvcGFnZS50c3hcIixcbiAgICAgICAgICBsaW5lTnVtYmVyOiAxNDIsXG4gICAgICAgICAgY29sdW1uTnVtYmVyOiAxMVxuICAgICAgICB9LCB0aGlzKV1cbiAgICAgIH0sIHZvaWQgMCwgdHJ1ZSwge1xuICAgICAgICBmaWxlTmFtZTogXCIvVXNlcnMvc2lyaXdhdGtucC9QZXJzb25hbC1SZXBvcy9tYXRlcmlhbC11aS9hcHBzL3plcm8tcnVudGltZS1uZXh0LWFwcC9zcmMvYXBwL3BhZ2UudHN4XCIsXG4gICAgICAgIGxpbmVOdW1iZXI6IDEzMyxcbiAgICAgICAgY29sdW1uTnVtYmVyOiA5XG4gICAgICB9LCB0aGlzKSwgLyojX19QVVJFX18qL19qc3hERVYoXCJhXCIsIHtcbiAgICAgICAgaHJlZjogXCJodHRwczovL25leHRqcy5vcmcvbGVhcm4%2FdXRtX3NvdXJjZT1jcmVhdGUtbmV4dC1hcHAmdXRtX21lZGl1bT1hcHBkaXItdGVtcGxhdGUmdXRtX2NhbXBhaWduPWNyZWF0ZS1uZXh0LWFwcFwiLFxuICAgICAgICBjbGFzc05hbWU6IHN0eWxlcy5jYXJkLFxuICAgICAgICB0YXJnZXQ6IFwiX2JsYW5rXCIsXG4gICAgICAgIHJlbDogXCJub29wZW5lclwiLFxuICAgICAgICBjaGlsZHJlbjogWy8qI19fUFVSRV9fKi9fanN4REVWKFwiaDJcIiwge1xuICAgICAgICAgIGNoaWxkcmVuOiBbXCJMZWFybiBcIiwgLyojX19QVVJFX18qL19qc3hERVYoXCJzcGFuXCIsIHtcbiAgICAgICAgICAgIGNoaWxkcmVuOiBcIi0%2BXCJcbiAgICAgICAgICB9LCB2b2lkIDAsIGZhbHNlLCB7XG4gICAgICAgICAgICBmaWxlTmFtZTogXCIvVXNlcnMvc2lyaXdhdGtucC9QZXJzb25hbC1SZXBvcy9tYXRlcmlhbC11aS9hcHBzL3plcm8tcnVudGltZS1uZXh0LWFwcC9zcmMvYXBwL3BhZ2UudHN4XCIsXG4gICAgICAgICAgICBsaW5lTnVtYmVyOiAxNTIsXG4gICAgICAgICAgICBjb2x1bW5OdW1iZXI6IDE5XG4gICAgICAgICAgfSwgdGhpcyldXG4gICAgICAgIH0sIHZvaWQgMCwgdHJ1ZSwge1xuICAgICAgICAgIGZpbGVOYW1lOiBcIi9Vc2Vycy9zaXJpd2F0a25wL1BlcnNvbmFsLVJlcG9zL21hdGVyaWFsLXVpL2FwcHMvemVyby1ydW50aW1lLW5leHQtYXBwL3NyYy9hcHAvcGFnZS50c3hcIixcbiAgICAgICAgICBsaW5lTnVtYmVyOiAxNTEsXG4gICAgICAgICAgY29sdW1uTnVtYmVyOiAxMVxuICAgICAgICB9LCB0aGlzKSwgLyojX19QVVJFX18qL19qc3hERVYoXCJwXCIsIHtcbiAgICAgICAgICBjaGlsZHJlbjogXCJMZWFybiBhYm91dCBOZXh0LmpzIGluIGFuIGludGVyYWN0aXZlIGNvdXJzZSB3aXRoXFx4YTBxdWl6emVzIVwiXG4gICAgICAgIH0sIHZvaWQgMCwgZmFsc2UsIHtcbiAgICAgICAgICBmaWxlTmFtZTogXCIvVXNlcnMvc2lyaXdhdGtucC9QZXJzb25hbC1SZXBvcy9tYXRlcmlhbC11aS9hcHBzL3plcm8tcnVudGltZS1uZXh0LWFwcC9zcmMvYXBwL3BhZ2UudHN4XCIsXG4gICAgICAgICAgbGluZU51bWJlcjogMTU0LFxuICAgICAgICAgIGNvbHVtbk51bWJlcjogMTFcbiAgICAgICAgfSwgdGhpcyldXG4gICAgICB9LCB2b2lkIDAsIHRydWUsIHtcbiAgICAgICAgZmlsZU5hbWU6IFwiL1VzZXJzL3Npcml3YXRrbnAvUGVyc29uYWwtUmVwb3MvbWF0ZXJpYWwtdWkvYXBwcy96ZXJvLXJ1bnRpbWUtbmV4dC1hcHAvc3JjL2FwcC9wYWdlLnRzeFwiLFxuICAgICAgICBsaW5lTnVtYmVyOiAxNDUsXG4gICAgICAgIGNvbHVtbk51bWJlcjogOVxuICAgICAgfSwgdGhpcyksIC8qI19fUFVSRV9fKi9fanN4REVWKFwiYVwiLCB7XG4gICAgICAgIGhyZWY6IFwiaHR0cHM6Ly92ZXJjZWwuY29tL3RlbXBsYXRlcz9mcmFtZXdvcms9bmV4dC5qcyZ1dG1fc291cmNlPWNyZWF0ZS1uZXh0LWFwcCZ1dG1fbWVkaXVtPWFwcGRpci10ZW1wbGF0ZSZ1dG1fY2FtcGFpZ249Y3JlYXRlLW5leHQtYXBwXCIsXG4gICAgICAgIGNsYXNzTmFtZTogc3R5bGVzLmNhcmQsXG4gICAgICAgIHRhcmdldDogXCJfYmxhbmtcIixcbiAgICAgICAgcmVsOiBcIm5vb3BlbmVyXCIsXG4gICAgICAgIGNoaWxkcmVuOiBbLyojX19QVVJFX18qL19qc3hERVYoXCJoMlwiLCB7XG4gICAgICAgICAgY2hpbGRyZW46IFtcIlRlbXBsYXRlcyBcIiwgLyojX19QVVJFX18qL19qc3hERVYoXCJzcGFuXCIsIHtcbiAgICAgICAgICAgIGNoaWxkcmVuOiBcIi0%2BXCJcbiAgICAgICAgICB9LCB2b2lkIDAsIGZhbHNlLCB7XG4gICAgICAgICAgICBmaWxlTmFtZTogXCIvVXNlcnMvc2lyaXdhdGtucC9QZXJzb25hbC1SZXBvcy9tYXRlcmlhbC11aS9hcHBzL3plcm8tcnVudGltZS1uZXh0LWFwcC9zcmMvYXBwL3BhZ2UudHN4XCIsXG4gICAgICAgICAgICBsaW5lTnVtYmVyOiAxNjQsXG4gICAgICAgICAgICBjb2x1bW5OdW1iZXI6IDIzXG4gICAgICAgICAgfSwgdGhpcyldXG4gICAgICAgIH0sIHZvaWQgMCwgdHJ1ZSwge1xuICAgICAgICAgIGZpbGVOYW1lOiBcIi9Vc2Vycy9zaXJpd2F0a25wL1BlcnNvbmFsLVJlcG9zL21hdGVyaWFsLXVpL2FwcHMvemVyby1ydW50aW1lLW5leHQtYXBwL3NyYy9hcHAvcGFnZS50c3hcIixcbiAgICAgICAgICBsaW5lTnVtYmVyOiAxNjMsXG4gICAgICAgICAgY29sdW1uTnVtYmVyOiAxMVxuICAgICAgICB9LCB0aGlzKSwgLyojX19QVVJFX18qL19qc3hERVYoXCJwXCIsIHtcbiAgICAgICAgICBjaGlsZHJlbjogXCJFeHBsb3JlIHRoZSBOZXh0LmpzIDEzIHBsYXlncm91bmQuXCJcbiAgICAgICAgfSwgdm9pZCAwLCBmYWxzZSwge1xuICAgICAgICAgIGZpbGVOYW1lOiBcIi9Vc2Vycy9zaXJpd2F0a25wL1BlcnNvbmFsLVJlcG9zL21hdGVyaWFsLXVpL2FwcHMvemVyby1ydW50aW1lLW5leHQtYXBwL3NyYy9hcHAvcGFnZS50c3hcIixcbiAgICAgICAgICBsaW5lTnVtYmVyOiAxNjYsXG4gICAgICAgICAgY29sdW1uTnVtYmVyOiAxMVxuICAgICAgICB9LCB0aGlzKV1cbiAgICAgIH0sIHZvaWQgMCwgdHJ1ZSwge1xuICAgICAgICBmaWxlTmFtZTogXCIvVXNlcnMvc2lyaXdhdGtucC9QZXJzb25hbC1SZXBvcy9tYXRlcmlhbC11aS9hcHBzL3plcm8tcnVudGltZS1uZXh0LWFwcC9zcmMvYXBwL3BhZ2UudHN4XCIsXG4gICAgICAgIGxpbmVOdW1iZXI6IDE1NyxcbiAgICAgICAgY29sdW1uTnVtYmVyOiA5XG4gICAgICB9LCB0aGlzKSwgLyojX19QVVJFX18qL19qc3hERVYoXCJhXCIsIHtcbiAgICAgICAgaHJlZjogXCJodHRwczovL3ZlcmNlbC5jb20vbmV3P3V0bV9zb3VyY2U9Y3JlYXRlLW5leHQtYXBwJnV0bV9tZWRpdW09YXBwZGlyLXRlbXBsYXRlJnV0bV9jYW1wYWlnbj1jcmVhdGUtbmV4dC1hcHBcIixcbiAgICAgICAgY2xhc3NOYW1lOiBzdHlsZXMuY2FyZCxcbiAgICAgICAgdGFyZ2V0OiBcIl9ibGFua1wiLFxuICAgICAgICByZWw6IFwibm9vcGVuZXIgbm9yZWZlcnJlclwiLFxuICAgICAgICBjaGlsZHJlbjogWy8qI19fUFVSRV9fKi9fanN4REVWKFwiaDJcIiwge1xuICAgICAgICAgIGNoaWxkcmVuOiBbXCJEZXBsb3kgXCIsIC8qI19fUFVSRV9fKi9fanN4REVWKFwic3BhblwiLCB7XG4gICAgICAgICAgICBjaGlsZHJlbjogXCItPlwiXG4gICAgICAgICAgfSwgdm9pZCAwLCBmYWxzZSwge1xuICAgICAgICAgICAgZmlsZU5hbWU6IFwiL1VzZXJzL3Npcml3YXRrbnAvUGVyc29uYWwtUmVwb3MvbWF0ZXJpYWwtdWkvYXBwcy96ZXJvLXJ1bnRpbWUtbmV4dC1hcHAvc3JjL2FwcC9wYWdlLnRzeFwiLFxuICAgICAgICAgICAgbGluZU51bWJlcjogMTc2LFxuICAgICAgICAgICAgY29sdW1uTnVtYmVyOiAyMFxuICAgICAgICAgIH0sIHRoaXMpXVxuICAgICAgICB9LCB2b2lkIDAsIHRydWUsIHtcbiAgICAgICAgICBmaWxlTmFtZTogXCIvVXNlcnMvc2lyaXdhdGtucC9QZXJzb25hbC1SZXBvcy9tYXRlcmlhbC11aS9hcHBzL3plcm8tcnVudGltZS1uZXh0LWFwcC9zcmMvYXBwL3BhZ2UudHN4XCIsXG4gICAgICAgICAgbGluZU51bWJlcjogMTc1LFxuICAgICAgICAgIGNvbHVtbk51bWJlcjogMTFcbiAgICAgICAgfSwgdGhpcyksIC8qI19fUFVSRV9fKi9fanN4REVWKFwicFwiLCB7XG4gICAgICAgICAgY2hpbGRyZW46IFwiSW5zdGFudGx5IGRlcGxveSB5b3VyIE5leHQuanMgc2l0ZSB0byBhIHNoYXJlYWJsZSBVUkwgd2l0aCBWZXJjZWwuXCJcbiAgICAgICAgfSwgdm9pZCAwLCBmYWxzZSwge1xuICAgICAgICAgIGZpbGVOYW1lOiBcIi9Vc2Vycy9zaXJpd2F0a25wL1BlcnNvbmFsLVJlcG9zL21hdGVyaWFsLXVpL2FwcHMvemVyby1ydW50aW1lLW5leHQtYXBwL3NyYy9hcHAvcGFnZS50c3hcIixcbiAgICAgICAgICBsaW5lTnVtYmVyOiAxNzgsXG4gICAgICAgICAgY29sdW1uTnVtYmVyOiAxMVxuICAgICAgICB9LCB0aGlzKV1cbiAgICAgIH0sIHZvaWQgMCwgdHJ1ZSwge1xuICAgICAgICBmaWxlTmFtZTogXCIvVXNlcnMvc2lyaXdhdGtucC9QZXJzb25hbC1SZXBvcy9tYXRlcmlhbC11aS9hcHBzL3plcm8tcnVudGltZS1uZXh0LWFwcC9zcmMvYXBwL3BhZ2UudHN4XCIsXG4gICAgICAgIGxpbmVOdW1iZXI6IDE2OSxcbiAgICAgICAgY29sdW1uTnVtYmVyOiA5XG4gICAgICB9LCB0aGlzKV1cbiAgICB9LCB2b2lkIDAsIHRydWUsIHtcbiAgICAgIGZpbGVOYW1lOiBcIi9Vc2Vycy9zaXJpd2F0a25wL1BlcnNvbmFsLVJlcG9zL21hdGVyaWFsLXVpL2FwcHMvemVyby1ydW50aW1lLW5leHQtYXBwL3NyYy9hcHAvcGFnZS50c3hcIixcbiAgICAgIGxpbmVOdW1iZXI6IDEzMixcbiAgICAgIGNvbHVtbk51bWJlcjogN1xuICAgIH0sIHRoaXMpXVxuICB9LCB2b2lkIDAsIHRydWUsIHtcbiAgICBmaWxlTmFtZTogXCIvVXNlcnMvc2lyaXdhdGtucC9QZXJzb25hbC1SZXBvcy9tYXRlcmlhbC11aS9hcHBzL3plcm8tcnVudGltZS1uZXh0LWFwcC9zcmMvYXBwL3BhZ2UudHN4XCIsXG4gICAgbGluZU51bWJlcjogOTIsXG4gICAgY29sdW1uTnVtYmVyOiA1XG4gIH0sIHRoaXMpO1xufSJdfQ%3D%3D*%2F%22%7D"; -import { styled as _styled2 } from "@mui/zero-runtime"; -import _theme2 from "@mui/zero-runtime/theme"; -import { styled as _styled } from "@mui/zero-runtime"; -import _theme from "@mui/zero-runtime/theme"; -import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime"; -import Image from "next/image"; -import Badge from "@mui/material/Badge"; -import styles from "./page.module.css"; -const visuallyHidden = "visuallyHidden_v1bdmy7h"; -const Main = /*#__PURE__*/_styled("main")({ - classes: ["Main_m1o6sjk5"] -}); -const Description = /*#__PURE__*/_styled2("div")({ - classes: ["Description_d1wnawl7"] -}); -export default function Home() { - return /*#__PURE__*/_jsxDEV(Main, { - children: [/*#__PURE__*/_jsxDEV("div", { - className: visuallyHidden, - children: "I am invisible" - }, void 0, false, { - fileName: "/Users/siriwatknp/Personal-Repos/material-ui/apps/zero-runtime-next-app/src/app/page.tsx", - lineNumber: 93, - columnNumber: 7 - }, this), /*#__PURE__*/_jsxDEV(Badge, { - variant: "dot", - children: /*#__PURE__*/_jsxDEV("div", { - children: "Hey" - }, void 0, false, { - fileName: "/Users/siriwatknp/Personal-Repos/material-ui/apps/zero-runtime-next-app/src/app/page.tsx", - lineNumber: 95, - columnNumber: 9 - }, this) - }, void 0, false, { - fileName: "/Users/siriwatknp/Personal-Repos/material-ui/apps/zero-runtime-next-app/src/app/page.tsx", - lineNumber: 94, - columnNumber: 7 - }, this), /*#__PURE__*/_jsxDEV(Description, { - children: [/*#__PURE__*/_jsxDEV("p", { - children: ["Get started by editing\xa0", /*#__PURE__*/_jsxDEV("code", { - className: styles.code, - children: "src/app/page.tsx" - }, void 0, false, { - fileName: "/Users/siriwatknp/Personal-Repos/material-ui/apps/zero-runtime-next-app/src/app/page.tsx", - lineNumber: 100, - columnNumber: 11 - }, this)] - }, void 0, true, { - fileName: "/Users/siriwatknp/Personal-Repos/material-ui/apps/zero-runtime-next-app/src/app/page.tsx", - lineNumber: 98, - columnNumber: 9 - }, this), /*#__PURE__*/_jsxDEV("div", { - children: /*#__PURE__*/_jsxDEV("a", { - href: "https://vercel.com?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app", - target: "_blank", - rel: "noopener", - children: ["By", " ", /*#__PURE__*/_jsxDEV(Image, { - src: "/vercel.svg", - alt: "Vercel Logo", - className: styles.vercelLogo, - width: 100, - height: 24, - priority: true - }, void 0, false, { - fileName: "/Users/siriwatknp/Personal-Repos/material-ui/apps/zero-runtime-next-app/src/app/page.tsx", - lineNumber: 109, - columnNumber: 13 - }, this)] - }, void 0, true, { - fileName: "/Users/siriwatknp/Personal-Repos/material-ui/apps/zero-runtime-next-app/src/app/page.tsx", - lineNumber: 103, - columnNumber: 11 - }, this) - }, void 0, false, { - fileName: "/Users/siriwatknp/Personal-Repos/material-ui/apps/zero-runtime-next-app/src/app/page.tsx", - lineNumber: 102, - columnNumber: 9 - }, this)] - }, void 0, true, { - fileName: "/Users/siriwatknp/Personal-Repos/material-ui/apps/zero-runtime-next-app/src/app/page.tsx", - lineNumber: 97, - columnNumber: 7 - }, this), /*#__PURE__*/_jsxDEV("div", { - className: styles.center, - children: /*#__PURE__*/_jsxDEV(Image, { - className: styles.logo, - src: "/next.svg", - alt: "Next.js Logo", - width: 180, - height: 37, - priority: true - }, void 0, false, { - fileName: "/Users/siriwatknp/Personal-Repos/material-ui/apps/zero-runtime-next-app/src/app/page.tsx", - lineNumber: 122, - columnNumber: 9 - }, this) - }, void 0, false, { - fileName: "/Users/siriwatknp/Personal-Repos/material-ui/apps/zero-runtime-next-app/src/app/page.tsx", - lineNumber: 121, - columnNumber: 7 - }, this), /*#__PURE__*/_jsxDEV("div", { - className: styles.grid, - children: [/*#__PURE__*/_jsxDEV("a", { - href: "https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app", - className: styles.card, - target: "_blank", - rel: "noopener", - children: [/*#__PURE__*/_jsxDEV("h2", { - children: ["Docs ", /*#__PURE__*/_jsxDEV("span", { - children: "->" - }, void 0, false, { - fileName: "/Users/siriwatknp/Personal-Repos/material-ui/apps/zero-runtime-next-app/src/app/page.tsx", - lineNumber: 140, - columnNumber: 18 - }, this)] - }, void 0, true, { - fileName: "/Users/siriwatknp/Personal-Repos/material-ui/apps/zero-runtime-next-app/src/app/page.tsx", - lineNumber: 139, - columnNumber: 11 - }, this), /*#__PURE__*/_jsxDEV("p", { - children: "Find in-depth information about Next.js features and API." - }, void 0, false, { - fileName: "/Users/siriwatknp/Personal-Repos/material-ui/apps/zero-runtime-next-app/src/app/page.tsx", - lineNumber: 142, - columnNumber: 11 - }, this)] - }, void 0, true, { - fileName: "/Users/siriwatknp/Personal-Repos/material-ui/apps/zero-runtime-next-app/src/app/page.tsx", - lineNumber: 133, - columnNumber: 9 - }, this), /*#__PURE__*/_jsxDEV("a", { - href: "https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app", - className: styles.card, - target: "_blank", - rel: "noopener", - children: [/*#__PURE__*/_jsxDEV("h2", { - children: ["Learn ", /*#__PURE__*/_jsxDEV("span", { - children: "->" - }, void 0, false, { - fileName: "/Users/siriwatknp/Personal-Repos/material-ui/apps/zero-runtime-next-app/src/app/page.tsx", - lineNumber: 152, - columnNumber: 19 - }, this)] - }, void 0, true, { - fileName: "/Users/siriwatknp/Personal-Repos/material-ui/apps/zero-runtime-next-app/src/app/page.tsx", - lineNumber: 151, - columnNumber: 11 - }, this), /*#__PURE__*/_jsxDEV("p", { - children: "Learn about Next.js in an interactive course with\xa0quizzes!" - }, void 0, false, { - fileName: "/Users/siriwatknp/Personal-Repos/material-ui/apps/zero-runtime-next-app/src/app/page.tsx", - lineNumber: 154, - columnNumber: 11 - }, this)] - }, void 0, true, { - fileName: "/Users/siriwatknp/Personal-Repos/material-ui/apps/zero-runtime-next-app/src/app/page.tsx", - lineNumber: 145, - columnNumber: 9 - }, this), /*#__PURE__*/_jsxDEV("a", { - href: "https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app", - className: styles.card, - target: "_blank", - rel: "noopener", - children: [/*#__PURE__*/_jsxDEV("h2", { - children: ["Templates ", /*#__PURE__*/_jsxDEV("span", { - children: "->" - }, void 0, false, { - fileName: "/Users/siriwatknp/Personal-Repos/material-ui/apps/zero-runtime-next-app/src/app/page.tsx", - lineNumber: 164, - columnNumber: 23 - }, this)] - }, void 0, true, { - fileName: "/Users/siriwatknp/Personal-Repos/material-ui/apps/zero-runtime-next-app/src/app/page.tsx", - lineNumber: 163, - columnNumber: 11 - }, this), /*#__PURE__*/_jsxDEV("p", { - children: "Explore the Next.js 13 playground." - }, void 0, false, { - fileName: "/Users/siriwatknp/Personal-Repos/material-ui/apps/zero-runtime-next-app/src/app/page.tsx", - lineNumber: 166, - columnNumber: 11 - }, this)] - }, void 0, true, { - fileName: "/Users/siriwatknp/Personal-Repos/material-ui/apps/zero-runtime-next-app/src/app/page.tsx", - lineNumber: 157, - columnNumber: 9 - }, this), /*#__PURE__*/_jsxDEV("a", { - href: "https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app", - className: styles.card, - target: "_blank", - rel: "noopener noreferrer", - children: [/*#__PURE__*/_jsxDEV("h2", { - children: ["Deploy ", /*#__PURE__*/_jsxDEV("span", { - children: "->" - }, void 0, false, { - fileName: "/Users/siriwatknp/Personal-Repos/material-ui/apps/zero-runtime-next-app/src/app/page.tsx", - lineNumber: 176, - columnNumber: 20 - }, this)] - }, void 0, true, { - fileName: "/Users/siriwatknp/Personal-Repos/material-ui/apps/zero-runtime-next-app/src/app/page.tsx", - lineNumber: 175, - columnNumber: 11 - }, this), /*#__PURE__*/_jsxDEV("p", { - children: "Instantly deploy your Next.js site to a shareable URL with Vercel." - }, void 0, false, { - fileName: "/Users/siriwatknp/Personal-Repos/material-ui/apps/zero-runtime-next-app/src/app/page.tsx", - lineNumber: 178, - columnNumber: 11 - }, this)] - }, void 0, true, { - fileName: "/Users/siriwatknp/Personal-Repos/material-ui/apps/zero-runtime-next-app/src/app/page.tsx", - lineNumber: 169, - columnNumber: 9 - }, this)] - }, void 0, true, { - fileName: "/Users/siriwatknp/Personal-Repos/material-ui/apps/zero-runtime-next-app/src/app/page.tsx", - lineNumber: 132, - columnNumber: 7 - }, this)] - }, void 0, true, { - fileName: "/Users/siriwatknp/Personal-Repos/material-ui/apps/zero-runtime-next-app/src/app/page.tsx", - lineNumber: 92, - columnNumber: 5 - }, this); -} \ No newline at end of file From fe211f406055f587dc3e14fb19b93daa7d8172cf Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Tue, 6 Feb 2024 10:03:38 +0700 Subject: [PATCH 08/15] don't export ThemeInput --- packages/zero-runtime/src/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/zero-runtime/src/index.ts b/packages/zero-runtime/src/index.ts index f2d8fe3bc0894c..fb1923bf0e3803 100644 --- a/packages/zero-runtime/src/index.ts +++ b/packages/zero-runtime/src/index.ts @@ -5,4 +5,4 @@ export { generateAtomics, atomics } from './generateAtomics'; export { default as css } from './css'; export { default as createUseThemeProps } from './createUseThemeProps'; export { default as extendTheme } from './extendTheme'; -export type { Theme, ExtendTheme, ThemeInput } from './extendTheme'; +export type { Theme, ExtendTheme } from './extendTheme'; From 42106945fbf249602f130851b4226dbcb074fd4d Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Tue, 6 Feb 2024 10:06:53 +0700 Subject: [PATCH 09/15] update readme --- packages/zero-runtime/README.md | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/zero-runtime/README.md b/packages/zero-runtime/README.md index 73b71c1b6d83ce..d7f7fbb2924d4d 100644 --- a/packages/zero-runtime/README.md +++ b/packages/zero-runtime/README.md @@ -11,10 +11,13 @@ A zero-runtime CSS-in-JS library that extracts the colocated css to it's own css - [Styling based on props](#styling-based-on-props) - [Styling based on runtime values](#styling-based-on-runtime-values) - [Styled component as a CSS selector](#styled-component-as-a-css-selector) + - [Typing props](#typing-props) - [Theme](#theme) - [Accesing theme values](#accesing-theme-values) - [CSS variables support](#css-variables-support) - [Color schemes](#color-schemes) + - [Switching color schemes](#switching-color-schemes) + - [TypeScript](#typescript) - [Mutliple themes](#mutliple-themes) ## Getting started @@ -245,9 +248,9 @@ const ExtraHeading = styled(Heading)({ }); ``` -#### TypeScript +#### Typing props -Add the type of the props before the styles to get the type checking: +If you use TypeScript, add the props typing before the styles to get the type checking: ```tsx const Heading = styled('h1')<{ isError?: boolean }>({ From d37a0378ed2a5b3e74eda997eb88759881cd7913 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Tue, 6 Feb 2024 10:16:20 +0700 Subject: [PATCH 10/15] update README --- packages/zero-runtime/README.md | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/packages/zero-runtime/README.md b/packages/zero-runtime/README.md index d7f7fbb2924d4d..e437475c5bd922 100644 --- a/packages/zero-runtime/README.md +++ b/packages/zero-runtime/README.md @@ -91,7 +91,15 @@ function App() { The `css` function will be replaced with a unique string that represents the CSS class name for the generated styles. -You can reuse the styles across your application by applying the class name to any element. +Use a callback function to get access to the theme values: + +```js +const title = css(({ theme }) => ({ + color: theme.colors.primary, + fontSize: theme.spacing.unit * 4, + fontFamily: theme.typography.fontFamily, +})); +``` To Learn more about using theme, check out [Theme](#theme) section. From e7ea47046ea8282f2b04378856cc097cc9534632 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Wed, 7 Feb 2024 16:07:45 +0700 Subject: [PATCH 11/15] add plugin if theme is provided --- packages/zero-unplugin/src/index.ts | 22 ++++++++++------------ 1 file changed, 10 insertions(+), 12 deletions(-) diff --git a/packages/zero-unplugin/src/index.ts b/packages/zero-unplugin/src/index.ts index 63da5ddfbefb02..11041a84a1be26 100644 --- a/packages/zero-unplugin/src/index.ts +++ b/packages/zero-unplugin/src/index.ts @@ -238,8 +238,10 @@ export const plugin = createUnplugin((options) => { }, }; - const plugins: Array = [ - { + const plugins: Array = []; + + if (theme) { + plugins.push({ name: 'zero-plugin-theme-tokens', enforce: 'pre', webpack(compiler) { @@ -268,12 +270,10 @@ export const plugin = createUnplugin((options) => { }, transform(_code, id) { if (id.endsWith('styles.css')) { - return theme ? generateTokenCss(theme) : ''; + return generateTokenCss(theme); } if (id.includes('zero-runtime/theme')) { - return `export default ${ - theme ? JSON.stringify(generateThemeTokens(theme)) : '{}' - };`; + return `export default ${JSON.stringify(generateThemeTokens(theme))};`; } return null; }, @@ -293,18 +293,16 @@ export const plugin = createUnplugin((options) => { }, load(id) { if (id === VIRTUAL_CSS_FILE) { - return theme ? generateTokenCss(theme) : ''; + return generateTokenCss(theme); } if (id === VIRTUAL_THEME_FILE) { - return `export default ${ - theme ? JSON.stringify(generateThemeTokens(theme)) : '{}' - };`; + return `export default ${JSON.stringify(generateThemeTokens(theme))};`; } return null; }, }), - }, - ]; + }); + } if (transformSx) { plugins.push(babelTransformPlugin); From c4e8450d13dd1a9950eb6d88845b72bc93f16892 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Wed, 7 Feb 2024 16:12:43 +0700 Subject: [PATCH 12/15] update README as suggested --- packages/zero-runtime/README.md | 11 ++--------- 1 file changed, 2 insertions(+), 9 deletions(-) diff --git a/packages/zero-runtime/README.md b/packages/zero-runtime/README.md index e437475c5bd922..8ce6115e1feb3b 100644 --- a/packages/zero-runtime/README.md +++ b/packages/zero-runtime/README.md @@ -18,7 +18,6 @@ A zero-runtime CSS-in-JS library that extracts the colocated css to it's own css - [Color schemes](#color-schemes) - [Switching color schemes](#switching-color-schemes) - [TypeScript](#typescript) - - [Mutliple themes](#mutliple-themes) ## Getting started @@ -89,9 +88,9 @@ function App() { } ``` -The `css` function will be replaced with a unique string that represents the CSS class name for the generated styles. +The call to `css` function will be replaced with a unique string that represents the CSS class name for the generated styles. -Use a callback function to get access to the theme values: +Use a callback function to get access to the [theme](#theme) values: ```js const title = css(({ theme }) => ({ @@ -101,8 +100,6 @@ const title = css(({ theme }) => ({ })); ``` -To Learn more about using theme, check out [Theme](#theme) section. - ### Creating components Use the `styled` API to create a component by passing styles at the end. The usage should be familiar if you've worked with Emotion or styled-components: @@ -450,7 +447,3 @@ declare module '@mui/zero-runtime/theme' { } } ``` - -#### Mutliple themes - -> ⏳ Currently, zero-runtime only supports a single theme. From ad407bedb69d6574cb695599a6863752801b6083 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Thu, 8 Feb 2024 13:31:57 +0700 Subject: [PATCH 13/15] return null if no theme --- packages/zero-unplugin/src/index.ts | 22 ++++++++++++---------- 1 file changed, 12 insertions(+), 10 deletions(-) diff --git a/packages/zero-unplugin/src/index.ts b/packages/zero-unplugin/src/index.ts index b332b510118071..8fbecbab554766 100644 --- a/packages/zero-unplugin/src/index.ts +++ b/packages/zero-unplugin/src/index.ts @@ -244,10 +244,8 @@ export const plugin = createUnplugin((options) => { }, }; - const plugins: Array = []; - - if (theme) { - plugins.push({ + const plugins: Array = [ + { name: 'zero-plugin-theme-tokens', enforce: 'pre', webpack(compiler) { @@ -276,10 +274,12 @@ export const plugin = createUnplugin((options) => { }, transform(_code, id) { if (id.endsWith('styles.css')) { - return generateTokenCss(theme); + return theme ? generateTokenCss(theme) : _code; } if (id.includes('zero-runtime/theme')) { - return `export default ${JSON.stringify(generateThemeTokens(theme))};`; + return `export default ${ + theme ? JSON.stringify(generateThemeTokens(theme)) : '{}' + };`; } return null; }, @@ -298,17 +298,19 @@ export const plugin = createUnplugin((options) => { return isZeroRuntimeThemeFile(id); }, load(id) { - if (id === VIRTUAL_CSS_FILE) { + if (id === VIRTUAL_CSS_FILE && theme) { return generateTokenCss(theme); } if (id === VIRTUAL_THEME_FILE) { - return `export default ${JSON.stringify(generateThemeTokens(theme))};`; + return `export default ${ + theme ? JSON.stringify(generateThemeTokens(theme)) : '{}' + };`; } return null; }, }), - }); - } + }, + ]; if (transformSx) { plugins.push(babelTransformPlugin); From 590a0529294f019bf09c44e558a989b3b0e22993 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Thu, 8 Feb 2024 14:05:15 +0700 Subject: [PATCH 14/15] update README --- packages/zero-runtime/README.md | 18 +++++++++++------- 1 file changed, 11 insertions(+), 7 deletions(-) diff --git a/packages/zero-runtime/README.md b/packages/zero-runtime/README.md index 8ce6115e1feb3b..34bde092973e8c 100644 --- a/packages/zero-runtime/README.md +++ b/packages/zero-runtime/README.md @@ -5,14 +5,14 @@ A zero-runtime CSS-in-JS library that extracts the colocated css to it's own css - [Getting started](#getting-started) - [Next.js](#nextjs) - [Vite](#vite) -- [Usage](#usage) +- [Basic usage](#basic-usage) - [Creating styles](#creating-styles) - [Creating components](#creating-components) - [Styling based on props](#styling-based-on-props) - [Styling based on runtime values](#styling-based-on-runtime-values) - [Styled component as a CSS selector](#styled-component-as-a-css-selector) - [Typing props](#typing-props) -- [Theme](#theme) +- [Theming](#theming) - [Accesing theme values](#accesing-theme-values) - [CSS variables support](#css-variables-support) - [Color schemes](#color-schemes) @@ -60,7 +60,7 @@ export default defineConfig({ }); ``` -## Usage +## Basic usage > You must configure zero-runtime with [Next.js](#nextjs) or [Vite](#vite) first. @@ -90,7 +90,7 @@ function App() { The call to `css` function will be replaced with a unique string that represents the CSS class name for the generated styles. -Use a callback function to get access to the [theme](#theme) values: +Use a callback function to get access to the [theme](#theming) values: ```js const title = css(({ theme }) => ({ @@ -263,11 +263,15 @@ const Heading = styled('h1')<{ isError?: boolean }>({ }); ``` -### Theme +### Theming -Theme lets you reuse the same values, such as colors, spacing, and typography, across your application. It is a plain object of any structure that you can define in your config file. +Theming is an **optional** feature that lets you reuse the same values, such as colors, spacing, and typography, across your application. It is a plain object of any structure that you can define in your config file. -For example, in Next.js, you can define the theme in the `next.config.js` file: +> **πŸ’‘ Good to know**: +> +> The **theme** object are used at build time without relying on React context like common CSS-in-JS libraries. This means that components created by zero-runtime `styled` will be React Server Component by default and still get benefits from theming. + +For example, in Next.js, you can define a theme in the `next.config.js` file like this: ```js const { withZeroPlugin } = require('@mui/zero-next-plugin'); From c4571555029fd9d6d30ee4090382d9b567878f77 Mon Sep 17 00:00:00 2001 From: Siriwat K Date: Fri, 9 Feb 2024 10:11:07 +0700 Subject: [PATCH 15/15] Apply suggestions from code review Co-authored-by: Matt Signed-off-by: Siriwat K --- packages/zero-runtime/README.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/zero-runtime/README.md b/packages/zero-runtime/README.md index 34bde092973e8c..f32aab05d20d91 100644 --- a/packages/zero-runtime/README.md +++ b/packages/zero-runtime/README.md @@ -1,6 +1,6 @@ # zero-runtime -A zero-runtime CSS-in-JS library that extracts the colocated css to it's own css files at build-time. +A zero-runtime CSS-in-JS library that extracts the colocated styles to their own CSS files at build-time. - [Getting started](#getting-started) - [Next.js](#nextjs) @@ -21,7 +21,7 @@ A zero-runtime CSS-in-JS library that extracts the colocated css to it's own css ## Getting started -Zero-runtime supports Next.js and Vite with future support for more bundlersβ€”you must install the corresponding plugin, as shown below. +Zero-runtime supports Next.js and Vite with future support for more bundlers. You must install the corresponding plugin, as shown below. ### Next.js @@ -88,7 +88,7 @@ function App() { } ``` -The call to `css` function will be replaced with a unique string that represents the CSS class name for the generated styles. +The call to the `css` function will be replaced with a unique string that represents the CSS class name for the generated styles. Use a callback function to get access to the [theme](#theming) values: @@ -128,7 +128,7 @@ The zero-runtime package differs from "standard" runtime CSS-in-JS libraries in > πŸ’‘ This approach is recommended when the value of the prop is known at build time (finite values). -Use the `variants` to define styles for a combination of the component's props. +Use the `variants` key to define styles for a combination of the component's props. Each variant is an object with `props` and `style` keys. The styles are applied when the component's props match the `props` object. @@ -298,7 +298,7 @@ module.exports = withZeroPlugin( ); ``` -#### Accesing theme values +#### Accessing theme values A callback can be used with **styled** and **css** APIs to access the theme values: