@chayns-components/core 5.0.0-beta.997 → 5.0.0

package/lib/esm/components/color-scheme-provider/ColorSchemeProvider.js

@@ -1,171 +1,64 @@
-import { getAvailableColorList, getColorFromPalette, hexToRgb255 } from '@chayns/colors';
-import { ColorMode, useSite } from 'chayns-api';
-import React, { createContext, useContext, useEffect, useMemo, useState } from 'react';
-import { Helmet } from 'react-helmet';
+import { useSite } from 'chayns-api';
+import React, { createContext, useContext, useMemo } from 'react';
 import { createGlobalStyle, ThemeProvider } from 'styled-components';
-import { getDesignSettings, getParagraphFormat } from '../../api/theme/get';
-import { convertIconStyle, getFontSize, getHeadlineColorSelector } from '../../utils/font';
 import { StyledColorSchemeProvider } from './ColorSchemeProvider.styles';
-
-// ToDo remove type after the framer-motion bug is Fixed
-
+import { useChaynsTheme } from './hooks/useChaynsTheme';
 const GlobalStyle = createGlobalStyle`
     .ellipsis {
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
     }
+
+    footer {
+        font-size: 0.85rem;
+        color: #888;
+        margin: 10px 0 0;
+
+        & a {
+            color: #888;
+            letter-spacing: -0.3px;
+        }
+    }
 `;
 export const ColorSchemeContext = /*#__PURE__*/createContext(undefined);
 export const useColorScheme = () => useContext(ColorSchemeContext);
-let useStyleSettings = () => undefined;
-try {
-  useStyleSettings =
-  // eslint-disable-next-line global-require,@typescript-eslint/no-unsafe-member-access,@typescript-eslint/no-var-requires
-  require('chayns-api').useStyleSettings ?? useStyleSettings;
-} catch {
-  // Do nothing
-}
-const ColorSchemeProvider = _ref => {
-  let {
-    children,
+const ColorSchemeProvider = ({
+  children,
+  color: colorProp,
+  colorMode: colorModeProp,
+  secondaryColor,
+  siteId,
+  style = {},
+  iconColor,
+  customVariables
+}) => {
+  const context = useContext(ColorSchemeContext);
+  const {
+    color: internalColor,
+    colorMode: internalColorMode
+  } = useSite();
+  const color = colorProp ?? context?.designSettings?.color ?? internalColor;
+  const colorMode = colorModeProp ?? context?.designSettings?.colorMode ?? internalColorMode;
+  const overrideParagraphFormat = color && color !== internalColor || colorMode !== internalColorMode;
+  const paragraphFormat = useMemo(() => overrideParagraphFormat ? [] : undefined, [overrideParagraphFormat]);
+  const contextValue = useChaynsTheme({
     color,
+    iconColor,
     colorMode,
-    cssVariables = {},
     secondaryColor,
     siteId,
-    style = {},
-    paragraphFormat,
-    designSettings,
-    theme,
-    colors
-  } = _ref;
-  const [internalTheme, setInternalTheme] = useState(theme ?? {});
-  const [internalDesignSettings, setInternalDesignSettings] = useState();
-  const [internalParagraphFormat, setInternalParagraphFormat] = useState();
-
-  // Empty object is used to prevent error if ColorSchemeProvider is rendered on server
-  const {
-    color: internalColor,
-    colorMode: internalColorMode
-  } = useSite() ?? {};
-
-  // ToDo remove if this hook is no beta anymore
-  const styleSettings = useStyleSettings();
-  useEffect(() => {
-    if (designSettings) {
-      setInternalDesignSettings(designSettings);
-    } else if (styleSettings?.designSettings) {
-      setInternalDesignSettings(styleSettings.designSettings);
-    } else if (!internalDesignSettings) {
-      void getDesignSettings(siteId).then(result => {
-        setInternalDesignSettings(result);
-      });
-    }
-  }, [designSettings, internalDesignSettings, siteId, styleSettings?.designSettings]);
-  useEffect(() => {
-    if (paragraphFormat) {
-      setInternalParagraphFormat(paragraphFormat);
-    } else if (styleSettings?.paragraphFormats) {
-      setInternalParagraphFormat(styleSettings.paragraphFormats);
-    } else if (!internalParagraphFormat) {
-      void getParagraphFormat(siteId).then(result => {
-        setInternalParagraphFormat(result);
-      });
-    }
-  }, [internalParagraphFormat, paragraphFormat, siteId, styleSettings?.paragraphFormats]);
-  useEffect(() => {
-    let newTheme = {};
-    const availableColors = getAvailableColorList();
-    if (!colors || !theme) {
-      availableColors.forEach(colorName => {
-        const hexColor = getColorFromPalette(colorName, {
-          color: color ?? internalColor,
-          colorMode: colorMode ?? internalColorMode,
-          secondaryColor
-        });
-        if (hexColor) {
-          const rgbColor = hexToRgb255(hexColor);
-          if (!theme) {
-            newTheme[colorName] = hexColor;
-          }
-          if (rgbColor) {
-            if (!theme) {
-              newTheme[`${colorName}-rgb`] = `${rgbColor.r}, ${rgbColor.g}, ${rgbColor.b}`;
-            }
-          }
-        }
-      });
-    }
-    if (!theme) {
-      switch (colorMode ?? internalColorMode) {
-        case ColorMode.Light:
-          newTheme.colorMode = 'light';
-          break;
-        case ColorMode.Dark:
-          newTheme.colorMode = 'dark';
-          break;
-        default:
-          newTheme.colorMode = 'classic';
-          break;
-      }
-      if (internalDesignSettings) {
-        Object.keys(internalDesignSettings).forEach(key => {
-          if (key === 'iconStyle') {
-            newTheme[key] = convertIconStyle(internalDesignSettings.iconStyle);
-            return;
-          }
-
-          // ToDo: Find better solution
-          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-          // @ts-ignore
-          // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-          newTheme[key] = internalDesignSettings[key];
-        });
-      }
-      if (internalParagraphFormat) {
-        const {
-          themeResult
-        } = getHeadlineColorSelector(internalParagraphFormat);
-
-        // Update Theme
-        Object.keys(themeResult).forEach(key => {
-          // ToDo: Find better solution
-          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-          // @ts-ignore
-          // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-          newTheme[key] = themeResult[key];
-        });
-      }
-      newTheme.fontSize = getFontSize();
-    } else {
-      newTheme = theme;
-    }
-    setInternalTheme(newTheme);
-  }, [color, colorMode, colors, internalColor, internalColorMode, internalDesignSettings, internalParagraphFormat, secondaryColor, theme]);
-  const contextValue = useMemo(() => {
-    if (internalDesignSettings && internalParagraphFormat) {
-      return {
-        paragraphFormat: internalParagraphFormat,
-        designSettings: internalDesignSettings,
-        theme: internalTheme
-      };
-    }
-    return undefined;
-  }, [internalDesignSettings, internalParagraphFormat, internalTheme]);
+    customVariables,
+    // Overrides the paragraphFormat on changed color or colorMode
+    paragraphFormat
+  });
   return /*#__PURE__*/React.createElement(ThemeProvider, {
-    theme: internalTheme
+    theme: contextValue.theme
   }, /*#__PURE__*/React.createElement(ColorSchemeContext.Provider, {
     value: contextValue
-  }, /*#__PURE__*/React.createElement(Helmet, null, /*#__PURE__*/React.createElement("link", {
-    rel: "stylesheet",
-    href: "https://api.chayns-static.space/font/NotoColorEmoji/v1/font.css"
-  })), /*#__PURE__*/React.createElement(StyledColorSchemeProvider, {
+  }, /*#__PURE__*/React.createElement(StyledColorSchemeProvider, {
     className: "color-scheme-provider",
-    style: {
-      ...cssVariables,
-      ...style
-    }
+    style: style
   }, children), /*#__PURE__*/React.createElement(GlobalStyle, null)));
 };
 ColorSchemeProvider.displayName = 'ColorSchemeProvider';

package/lib/esm/components/color-scheme-provider/ColorSchemeProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorSchemeProvider.js","names":["getAvailableColorList","getColorFromPalette","hexToRgb255","ColorMode","useSite","React","createContext","useContext","useEffect","useMemo","useState","Helmet","createGlobalStyle","ThemeProvider","getDesignSettings","getParagraphFormat","convertIconStyle","getFontSize","getHeadlineColorSelector","StyledColorSchemeProvider","GlobalStyle","ColorSchemeContext","undefined","useColorScheme","useStyleSettings","require","ColorSchemeProvider","_ref","children","color","colorMode","cssVariables","secondaryColor","siteId","style","paragraphFormat","designSettings","theme","colors","internalTheme","setInternalTheme","internalDesignSettings","setInternalDesignSettings","internalParagraphFormat","setInternalParagraphFormat","internalColor","internalColorMode","styleSettings","then","result","paragraphFormats","newTheme","availableColors","forEach","colorName","hexColor","rgbColor","r","g","b","Light","Dark","Object","keys","key","iconStyle","themeResult","fontSize","contextValue","createElement","Provider","value","rel","href","className","displayName"],"sources":["../../../../src/components/color-scheme-provider/ColorSchemeProvider.tsx"],"sourcesContent":["import { getAvailableColorList, getColorFromPalette, hexToRgb255 } from '@chayns/colors';\nimport { ColorMode, useSite } from 'chayns-api';\nimport React, {\n    createContext,\n    FC,\n    ReactNode,\n    useContext,\n    useEffect,\n    useMemo,\n    useState,\n} from 'react';\nimport { Helmet } from 'react-helmet';\nimport { createGlobalStyle, ThemeProvider } from 'styled-components';\nimport { getDesignSettings, getParagraphFormat } from '../../api/theme/get';\nimport type { DesignSettings, ParagraphFormat } from '../../types/colorSchemeProvider';\nimport { convertIconStyle, getFontSize, getHeadlineColorSelector } from '../../utils/font';\nimport { StyledColorSchemeProvider } from './ColorSchemeProvider.styles';\n\nexport type ColorSchemeProviderProps = {\n    /**\n     * The content of the application or the components for which the styles should be set\n     */\n    children: ReactNode;\n    /**\n     * The hex color to be used for the children\n     */\n    color?: string;\n    /**\n     * The colors of the components\n     */\n    colors?: Theme;\n    /**\n     * The color mode to be used for the children\n     */\n    colorMode?: ColorMode;\n    /**\n     * Css variables to be added in addition to the chayns variables\n     */\n    cssVariables?: { [key: string]: string | number };\n    /**\n     * The design settings of a page.\n     */\n    designSettings?: DesignSettings;\n    /**\n     * The general format settings.\n     */\n    paragraphFormat?: ParagraphFormat[];\n    /**\n     * The secondary hex color to be used for the children\n     */\n    secondaryColor?: string;\n    /**\n     * The site id of the page for which the design settings should be fetched\n     */\n    siteId?: string;\n    /**\n     * Additional styles set on the root element\n     */\n    style?: { [key: string]: string | number };\n    /**\n     * The theme for the components\n     */\n    theme?: Theme;\n};\n\nexport interface Theme {\n    [key: string]: string;\n}\n\nexport type WithTheme<T> = T & {\n    theme: Theme;\n};\n\n// ToDo remove type after the framer-motion bug is Fixed\nexport type FramerMotionBugFix = WithTheme<unknown>;\n\nconst GlobalStyle = createGlobalStyle`\n    .ellipsis {\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n    }\n`;\n\nexport interface ColorSchemeContextProps {\n    designSettings: DesignSettings;\n    paragraphFormat: ParagraphFormat[];\n    theme: Theme;\n}\n\nexport const ColorSchemeContext = createContext<ColorSchemeContextProps | undefined>(undefined);\n\nexport const useColorScheme = () => useContext(ColorSchemeContext);\n\nlet useStyleSettings: () =>\n    | {\n          paragraphFormats: ParagraphFormat[];\n          designSettings: DesignSettings;\n      }\n    | undefined = () => undefined;\n\ntry {\n    useStyleSettings =\n        // eslint-disable-next-line global-require,@typescript-eslint/no-unsafe-member-access,@typescript-eslint/no-var-requires\n        (require('chayns-api').useStyleSettings as () => {\n            paragraphFormats: ParagraphFormat[];\n            designSettings: DesignSettings;\n        }) ?? useStyleSettings;\n} catch {\n    // Do nothing\n}\n\nconst ColorSchemeProvider: FC<ColorSchemeProviderProps> = ({\n    children,\n    color,\n    colorMode,\n    cssVariables = {},\n    secondaryColor,\n    siteId,\n    style = {},\n    paragraphFormat,\n    designSettings,\n    theme,\n    colors,\n}) => {\n    const [internalTheme, setInternalTheme] = useState<Theme>(theme ?? {});\n    const [internalDesignSettings, setInternalDesignSettings] = useState<DesignSettings>();\n    const [internalParagraphFormat, setInternalParagraphFormat] = useState<ParagraphFormat[]>();\n\n    // Empty object is used to prevent error if ColorSchemeProvider is rendered on server\n    const { color: internalColor, colorMode: internalColorMode } = useSite() ?? {};\n\n    // ToDo remove if this hook is no beta anymore\n    const styleSettings = useStyleSettings();\n\n    useEffect(() => {\n        if (designSettings) {\n            setInternalDesignSettings(designSettings);\n        } else if (styleSettings?.designSettings) {\n            setInternalDesignSettings(styleSettings.designSettings);\n        } else if (!internalDesignSettings) {\n            void getDesignSettings(siteId).then((result) => {\n                setInternalDesignSettings(result);\n            });\n        }\n    }, [designSettings, internalDesignSettings, siteId, styleSettings?.designSettings]);\n\n    useEffect(() => {\n        if (paragraphFormat) {\n            setInternalParagraphFormat(paragraphFormat);\n        } else if (styleSettings?.paragraphFormats) {\n            setInternalParagraphFormat(styleSettings.paragraphFormats);\n        } else if (!internalParagraphFormat) {\n            void getParagraphFormat(siteId).then((result) => {\n                setInternalParagraphFormat(result);\n            });\n        }\n    }, [internalParagraphFormat, paragraphFormat, siteId, styleSettings?.paragraphFormats]);\n\n    useEffect(() => {\n        let newTheme: Theme = {};\n\n        const availableColors = getAvailableColorList();\n\n        if (!colors || !theme) {\n            availableColors.forEach((colorName: string) => {\n                const hexColor = getColorFromPalette(colorName, {\n                    color: color ?? internalColor,\n                    colorMode: colorMode ?? internalColorMode,\n                    secondaryColor,\n                });\n\n                if (hexColor) {\n                    const rgbColor = hexToRgb255(hexColor);\n\n                    if (!theme) {\n                        newTheme[colorName] = hexColor;\n                    }\n\n                    if (rgbColor) {\n                        if (!theme) {\n                            newTheme[`${colorName}-rgb`] =\n                                `${rgbColor.r}, ${rgbColor.g}, ${rgbColor.b}`;\n                        }\n                    }\n                }\n            });\n        }\n\n        if (!theme) {\n            switch (colorMode ?? internalColorMode) {\n                case ColorMode.Light:\n                    newTheme.colorMode = 'light';\n                    break;\n                case ColorMode.Dark:\n                    newTheme.colorMode = 'dark';\n                    break;\n                default:\n                    newTheme.colorMode = 'classic';\n                    break;\n            }\n\n            if (internalDesignSettings) {\n                Object.keys(internalDesignSettings).forEach((key) => {\n                    if (key === 'iconStyle') {\n                        newTheme[key] = convertIconStyle(internalDesignSettings.iconStyle);\n\n                        return;\n                    }\n\n                    // ToDo: Find better solution\n                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n                    // @ts-ignore\n                    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n                    newTheme[key] = internalDesignSettings[key];\n                });\n            }\n\n            if (internalParagraphFormat) {\n                const { themeResult } = getHeadlineColorSelector(internalParagraphFormat);\n\n                // Update Theme\n                Object.keys(themeResult).forEach((key) => {\n                    // ToDo: Find better solution\n                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n                    // @ts-ignore\n                    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n                    newTheme[key] = themeResult[key];\n                });\n            }\n\n            newTheme.fontSize = getFontSize();\n        } else {\n            newTheme = theme;\n        }\n\n        setInternalTheme(newTheme);\n    }, [\n        color,\n        colorMode,\n        colors,\n        internalColor,\n        internalColorMode,\n        internalDesignSettings,\n        internalParagraphFormat,\n        secondaryColor,\n        theme,\n    ]);\n\n    const contextValue: ColorSchemeContextProps | undefined = useMemo(() => {\n        if (internalDesignSettings && internalParagraphFormat) {\n            return {\n                paragraphFormat: internalParagraphFormat,\n                designSettings: internalDesignSettings,\n                theme: internalTheme,\n            };\n        }\n\n        return undefined;\n    }, [internalDesignSettings, internalParagraphFormat, internalTheme]);\n\n    return (\n        <ThemeProvider theme={internalTheme}>\n            <ColorSchemeContext.Provider value={contextValue}>\n                <Helmet>\n                    <link\n                        rel=\"stylesheet\"\n                        href=\"https://api.chayns-static.space/font/NotoColorEmoji/v1/font.css\"\n                    />\n                </Helmet>\n                <StyledColorSchemeProvider\n                    className=\"color-scheme-provider\"\n                    style={{\n                        ...cssVariables,\n                        ...style,\n                    }}\n                >\n                    {children}\n                </StyledColorSchemeProvider>\n                <GlobalStyle />\n            </ColorSchemeContext.Provider>\n        </ThemeProvider>\n    );\n};\n\nColorSchemeProvider.displayName = 'ColorSchemeProvider';\n\nexport default ColorSchemeProvider;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"ColorSchemeProvider.js","names":["useSite","React","createContext","useContext","useMemo","createGlobalStyle","ThemeProvider","StyledColorSchemeProvider","useChaynsTheme","GlobalStyle","ColorSchemeContext","undefined","useColorScheme","ColorSchemeProvider","children","color","colorProp","colorMode","colorModeProp","secondaryColor","siteId","style","iconColor","customVariables","context","internalColor","internalColorMode","designSettings","overrideParagraphFormat","paragraphFormat","contextValue","createElement","theme","Provider","value","className","displayName"],"sources":["../../../../src/components/color-scheme-provider/ColorSchemeProvider.tsx"],"sourcesContent":["import { ChaynsDesignSettings, ChaynsParagraphFormat, ColorMode, useSite } from 'chayns-api';\nimport React, { createContext, FC, ReactNode, useContext, useMemo } from 'react';\nimport { createGlobalStyle, ThemeProvider } from 'styled-components';\nimport { StyledColorSchemeProvider } from './ColorSchemeProvider.styles';\nimport { useChaynsTheme } from './hooks/useChaynsTheme';\n\nexport type ColorSchemeProviderProps = {\n    /**\n     * The content of the application or the components for which the styles should be set\n     */\n    children: ReactNode;\n    /**\n     * The hex color to be used for the children\n     */\n    color?: string;\n    /**\n     * The color mode to be used for the children\n     */\n    colorMode?: ColorMode;\n    /**\n     * The secondary hex color to be used for the children\n     */\n    secondaryColor?: string;\n    /**\n     * The site id of the page for which the design settings should be fetched\n     */\n    siteId?: string;\n    /**\n     * Additional styles set on the root element\n     */\n    style?: { [key: string]: string | number };\n    /**\n     * Additional variables to extend the theme\n     */\n    customVariables?: Record<string, string>;\n    /**\n     * An optional color for all icons\n     */\n    iconColor?: string;\n};\n\nexport interface Theme {\n    [key: string]: string;\n}\n\nexport type WithTheme<T> = T & {\n    theme: Theme;\n};\n\nconst GlobalStyle = createGlobalStyle`\n    .ellipsis {\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n    }\n\n    footer {\n        font-size: 0.85rem;\n        color: #888;\n        margin: 10px 0 0;\n\n        & a {\n            color: #888;\n            letter-spacing: -0.3px;\n        }\n    }\n`;\n\nexport interface ColorSchemeContextProps {\n    designSettings?: ChaynsDesignSettings;\n    paragraphFormat: ChaynsParagraphFormat[];\n    theme: Theme;\n}\n\nexport const ColorSchemeContext = createContext<ColorSchemeContextProps | undefined>(undefined);\n\nexport const useColorScheme = () => useContext(ColorSchemeContext);\n\nconst ColorSchemeProvider: FC<ColorSchemeProviderProps> = ({\n    children,\n    color: colorProp,\n    colorMode: colorModeProp,\n    secondaryColor,\n    siteId,\n    style = {},\n    iconColor,\n    customVariables,\n}) => {\n    const context = useContext(ColorSchemeContext);\n\n    const { color: internalColor, colorMode: internalColorMode } = useSite();\n\n    const color = colorProp ?? context?.designSettings?.color ?? internalColor;\n    const colorMode = colorModeProp ?? context?.designSettings?.colorMode ?? internalColorMode;\n\n    const overrideParagraphFormat =\n        (color && color !== internalColor) || colorMode !== internalColorMode;\n\n    const paragraphFormat = useMemo(\n        () => (overrideParagraphFormat ? [] : undefined),\n        [overrideParagraphFormat],\n    );\n\n    const contextValue = useChaynsTheme({\n        color,\n        iconColor,\n        colorMode,\n        secondaryColor,\n        siteId,\n        customVariables,\n        // Overrides the paragraphFormat on changed color or colorMode\n        paragraphFormat,\n    });\n\n    return (\n        <ThemeProvider theme={contextValue.theme}>\n            <ColorSchemeContext.Provider value={contextValue}>\n                <StyledColorSchemeProvider className=\"color-scheme-provider\" style={style}>\n                    {children}\n                </StyledColorSchemeProvider>\n                <GlobalStyle />\n            </ColorSchemeContext.Provider>\n        </ThemeProvider>\n    );\n};\n\nColorSchemeProvider.displayName = 'ColorSchemeProvider';\n\nexport default ColorSchemeProvider;\n"],"mappings":"AAAA,SAAiEA,OAAO,QAAQ,YAAY;AAC5F,OAAOC,KAAK,IAAIC,aAAa,EAAiBC,UAAU,EAAEC,OAAO,QAAQ,OAAO;AAChF,SAASC,iBAAiB,EAAEC,aAAa,QAAQ,mBAAmB;AACpE,SAASC,yBAAyB,QAAQ,8BAA8B;AACxE,SAASC,cAAc,QAAQ,wBAAwB;AA6CvD,MAAMC,WAAW,GAAGJ,iBAAiB;AACrC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAQD,OAAO,MAAMK,kBAAkB,gBAAGR,aAAa,CAAsCS,SAAS,CAAC;AAE/F,OAAO,MAAMC,cAAc,GAAGA,CAAA,KAAMT,UAAU,CAACO,kBAAkB,CAAC;AAElE,MAAMG,mBAAiD,GAAGA,CAAC;EACvDC,QAAQ;EACRC,KAAK,EAAEC,SAAS;EAChBC,SAAS,EAAEC,aAAa;EACxBC,cAAc;EACdC,MAAM;EACNC,KAAK,GAAG,CAAC,CAAC;EACVC,SAAS;EACTC;AACJ,CAAC,KAAK;EACF,MAAMC,OAAO,GAAGrB,UAAU,CAACO,kBAAkB,CAAC;EAE9C,MAAM;IAAEK,KAAK,EAAEU,aAAa;IAAER,SAAS,EAAES;EAAkB,CAAC,GAAG1B,OAAO,CAAC,CAAC;EAExE,MAAMe,KAAK,GAAGC,SAAS,IAAIQ,OAAO,EAAEG,cAAc,EAAEZ,KAAK,IAAIU,aAAa;EAC1E,MAAMR,SAAS,GAAGC,aAAa,IAAIM,OAAO,EAAEG,cAAc,EAAEV,SAAS,IAAIS,iBAAiB;EAE1F,MAAME,uBAAuB,GACxBb,KAAK,IAAIA,KAAK,KAAKU,aAAa,IAAKR,SAAS,KAAKS,iBAAiB;EAEzE,MAAMG,eAAe,GAAGzB,OAAO,CAC3B,MAAOwB,uBAAuB,GAAG,EAAE,GAAGjB,SAAU,EAChD,CAACiB,uBAAuB,CAC5B,CAAC;EAED,MAAME,YAAY,GAAGtB,cAAc,CAAC;IAChCO,KAAK;IACLO,SAAS;IACTL,SAAS;IACTE,cAAc;IACdC,MAAM;IACNG,eAAe;IACf;IACAM;EACJ,CAAC,CAAC;EAEF,oBACI5B,KAAA,CAAA8B,aAAA,CAACzB,aAAa;IAAC0B,KAAK,EAAEF,YAAY,CAACE;EAAM,gBACrC/B,KAAA,CAAA8B,aAAA,CAACrB,kBAAkB,CAACuB,QAAQ;IAACC,KAAK,EAAEJ;EAAa,gBAC7C7B,KAAA,CAAA8B,aAAA,CAACxB,yBAAyB;IAAC4B,SAAS,EAAC,uBAAuB;IAACd,KAAK,EAAEA;EAAM,GACrEP,QACsB,CAAC,eAC5Bb,KAAA,CAAA8B,aAAA,CAACtB,WAAW,MAAE,CACW,CAClB,CAAC;AAExB,CAAC;AAEDI,mBAAmB,CAACuB,WAAW,GAAG,qBAAqB;AAEvD,eAAevB,mBAAmB","ignoreList":[]}

package/lib/esm/components/color-scheme-provider/ColorSchemeProvider.styles.js

@@ -1,16 +1,19 @@
 import { getAvailableColorList } from '@chayns/colors';
 import { styled } from 'styled-components';
+// noinspection CssUnresolvedCustomProperty
 export const StyledColorSchemeProvider = styled.div`
     color: var(--chayns-color--text);
 
-    ${_ref => {
-  let {
-    theme
-  } = _ref;
-  return getAvailableColorList().map(colorName => {
-    const colorNameRgb = `${colorName}-rgb`;
-    return [`--chayns-color--${colorName}: ${theme[colorName]};`, `--chayns-color-rgb--${colorName}: ${theme[colorNameRgb]};`];
-  });
-}}
+    ${({
+  theme
+}) => getAvailableColorList().map(colorName => {
+  const colorNameRgb = `${colorName}-rgb`;
+  return [`--chayns-color--${colorName}: ${theme[colorName]};`, `--chayns-color-rgb--${colorName}: ${theme[colorNameRgb]};`];
+})}
+
+    // ToDo: Remove .h1...
+    .color-scheme-provider :is(h1,.h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6):first-child {
+        margin-top: 0;
+    }
 `;
 //# sourceMappingURL=ColorSchemeProvider.styles.js.map

package/lib/esm/components/color-scheme-provider/ColorSchemeProvider.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorSchemeProvider.styles.js","names":["getAvailableColorList","styled","StyledColorSchemeProvider","div","_ref","theme","map","colorName","colorNameRgb"],"sources":["../../../../src/components/color-scheme-provider/ColorSchemeProvider.styles.ts"],"sourcesContent":["import { getAvailableColorList } from '@chayns/colors';\nimport { styled } from 'styled-components';\nimport { WithTheme } from './ColorSchemeProvider';\n\ntype ColorSchemeProviderProps = WithTheme<unknown>;\n\nexport const StyledColorSchemeProvider = styled.div<ColorSchemeProviderProps>`\n    color: var(--chayns-color--text);\n\n    ${({ theme }: ColorSchemeProviderProps) =>\n        getAvailableColorList().map((colorName: string) => {\n            const colorNameRgb = `${colorName}-rgb`;\n            return [\n                `--chayns-color--${colorName}: ${theme[colorName]};`,\n                `--chayns-color-rgb--${colorName}: ${theme[colorNameRgb]};`,\n            ];\n        })}\n`;\n"],"mappings":"AAAA,SAASA,qBAAqB,QAAQ,gBAAgB;AACtD,SAASC,MAAM,QAAQ,mBAAmB;AAK1C,OAAO,MAAMC,yBAAyB,GAAGD,MAAM,CAACE,GAA6B;AAC7E;AACA;AACA,MAAMC,IAAA;EAAA,IAAC;IAAEC;EAAgC,CAAC,GAAAD,IAAA;EAAA,OAClCJ,qBAAqB,CAAC,CAAC,CAACM,GAAG,CAAEC,SAAiB,IAAK;IAC/C,MAAMC,YAAY,GAAG,GAAGD,SAAS,MAAM;IACvC,OAAO,CACH,mBAAmBA,SAAS,KAAKF,KAAK,CAACE,SAAS,CAAC,GAAG,EACpD,uBAAuBA,SAAS,KAAKF,KAAK,CAACG,YAAY,CAAC,GAAG,CAC9D;EACL,CAAC,CAAC;AAAA;AACV,CAAC","ignoreList":[]}
+{"version":3,"file":"ColorSchemeProvider.styles.js","names":["getAvailableColorList","styled","StyledColorSchemeProvider","div","theme","map","colorName","colorNameRgb"],"sources":["../../../../src/components/color-scheme-provider/ColorSchemeProvider.styles.ts"],"sourcesContent":["import { getAvailableColorList } from '@chayns/colors';\nimport { styled } from 'styled-components';\nimport type { WithTheme } from './ColorSchemeProvider';\n\ntype ColorSchemeProviderProps = WithTheme<unknown>;\n\n// noinspection CssUnresolvedCustomProperty\nexport const StyledColorSchemeProvider = styled.div<ColorSchemeProviderProps>`\n    color: var(--chayns-color--text);\n\n    ${({ theme }: ColorSchemeProviderProps) =>\n        getAvailableColorList().map((colorName: string) => {\n            const colorNameRgb = `${colorName}-rgb`;\n            return [\n                `--chayns-color--${colorName}: ${theme[colorName]};`,\n                `--chayns-color-rgb--${colorName}: ${theme[colorNameRgb]};`,\n            ];\n        })}\n\n    // ToDo: Remove .h1...\n    .color-scheme-provider :is(h1,.h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6):first-child {\n        margin-top: 0;\n    }\n`;\n"],"mappings":"AAAA,SAASA,qBAAqB,QAAQ,gBAAgB;AACtD,SAASC,MAAM,QAAQ,mBAAmB;AAK1C;AACA,OAAO,MAAMC,yBAAyB,GAAGD,MAAM,CAACE,GAA6B;AAC7E;AACA;AACA,MAAM,CAAC;EAAEC;AAAgC,CAAC,KAClCJ,qBAAqB,CAAC,CAAC,CAACK,GAAG,CAAEC,SAAiB,IAAK;EAC/C,MAAMC,YAAY,GAAG,GAAGD,SAAS,MAAM;EACvC,OAAO,CACH,mBAAmBA,SAAS,KAAKF,KAAK,CAACE,SAAS,CAAC,GAAG,EACpD,uBAAuBA,SAAS,KAAKF,KAAK,CAACG,YAAY,CAAC,GAAG,CAC9D;AACL,CAAC,CAAC;AACV;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}

package/lib/esm/components/color-scheme-provider/hooks/useChaynsTheme.js

@@ -0,0 +1,134 @@
+import { getAvailableColorList, getColorFromPalette, hexToRgb255 } from '@chayns/colors';
+import { ColorMode } from 'chayns-api';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { convertIconStyle, getHeadlineColorSelector } from '../../../utils/font';
+import { useDesignSettings } from './useDesignSettings';
+import { useParagraphFormat } from './useParagraphFormat';
+const createTheme = ({
+  colors,
+  colorMode,
+  color,
+  secondaryColor,
+  designSettings,
+  paragraphFormat,
+  theme,
+  iconColor,
+  customVariables
+}) => {
+  if (theme) {
+    return theme;
+  }
+  const result = {};
+  if (customVariables) {
+    Object.keys(customVariables).forEach(key => {
+      result[key] = customVariables[key];
+    });
+  }
+  const availableColors = getAvailableColorList();
+  if (!colors) {
+    availableColors.forEach(colorName => {
+      const hexColor = getColorFromPalette(colorName, {
+        color,
+        colorMode,
+        secondaryColor
+      });
+      if (hexColor) {
+        const rgbColor = hexToRgb255(hexColor);
+        result[colorName] = hexColor;
+        if (rgbColor) {
+          result[`${colorName}-rgb`] = `${rgbColor.r}, ${rgbColor.g}, ${rgbColor.b}`;
+        }
+      }
+    });
+  }
+  if (designSettings) {
+    Object.keys(designSettings).forEach(key => {
+      if (key === 'iconStyle') {
+        result[key] = convertIconStyle(designSettings.iconStyle);
+        return;
+      }
+      result[key] = designSettings[key];
+    });
+  }
+  if (paragraphFormat) {
+    const {
+      themeResult
+    } = getHeadlineColorSelector(paragraphFormat);
+
+    // Update Theme
+    Object.keys(themeResult).forEach(key => {
+      result[key] = themeResult[key];
+    });
+  }
+  switch (colorMode) {
+    case ColorMode.Light:
+      result.colorMode = 'light';
+      break;
+    case ColorMode.Dark:
+      result.colorMode = 'dark';
+      break;
+    default:
+      result.colorMode = 'classic';
+      break;
+  }
+  if (iconColor) {
+    result.iconColor = iconColor;
+  }
+  result.fontSize = designSettings?.fontSizePx || 15;
+  return result;
+};
+export const useChaynsTheme = ({
+  colors,
+  colorMode,
+  color,
+  secondaryColor,
+  designSettings: designSettingsProp,
+  paragraphFormat: paragraphFormatProp,
+  siteId,
+  iconColor,
+  theme,
+  customVariables
+}) => {
+  const designSettings = useDesignSettings({
+    color,
+    colorMode,
+    designSettings: designSettingsProp,
+    siteId
+  });
+  const paragraphFormat = useParagraphFormat(siteId, paragraphFormatProp);
+  const isMountedRef = useRef(false);
+  const [internalTheme, setInternalTheme] = useState(() => createTheme({
+    colors,
+    colorMode,
+    color,
+    secondaryColor,
+    designSettings,
+    paragraphFormat,
+    theme,
+    iconColor,
+    customVariables
+  }));
+  useEffect(() => {
+    if (!isMountedRef.current) {
+      isMountedRef.current = true;
+      return;
+    }
+    setInternalTheme(createTheme({
+      colors,
+      colorMode,
+      color,
+      secondaryColor,
+      designSettings,
+      paragraphFormat,
+      theme,
+      iconColor,
+      customVariables
+    }));
+  }, [color, colorMode, colors, designSettings, paragraphFormat, secondaryColor, theme, customVariables, iconColor]);
+  return useMemo(() => ({
+    theme: internalTheme,
+    designSettings,
+    paragraphFormat
+  }), [internalTheme, designSettings, paragraphFormat]);
+};
+//# sourceMappingURL=useChaynsTheme.js.map

package/lib/esm/components/color-scheme-provider/hooks/useChaynsTheme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useChaynsTheme.js","names":["getAvailableColorList","getColorFromPalette","hexToRgb255","ColorMode","useEffect","useMemo","useRef","useState","convertIconStyle","getHeadlineColorSelector","useDesignSettings","useParagraphFormat","createTheme","colors","colorMode","color","secondaryColor","designSettings","paragraphFormat","theme","iconColor","customVariables","result","Object","keys","forEach","key","availableColors","colorName","hexColor","rgbColor","r","g","b","iconStyle","themeResult","Light","Dark","fontSize","fontSizePx","useChaynsTheme","designSettingsProp","paragraphFormatProp","siteId","isMountedRef","internalTheme","setInternalTheme","current"],"sources":["../../../../../src/components/color-scheme-provider/hooks/useChaynsTheme.ts"],"sourcesContent":["import { getAvailableColorList, getColorFromPalette, hexToRgb255 } from '@chayns/colors';\nimport { ChaynsDesignSettings, ChaynsParagraphFormat, ColorMode } from 'chayns-api';\nimport { useEffect, useMemo, useRef, useState } from 'react';\nimport { convertIconStyle, getHeadlineColorSelector } from '../../../utils/font';\nimport type { Theme } from '../ColorSchemeProvider';\nimport { useDesignSettings } from './useDesignSettings';\nimport { useParagraphFormat } from './useParagraphFormat';\n\nexport type ThemeOptions = {\n    colors?: Theme;\n    colorMode: ColorMode;\n    iconColor?: string;\n    color: string;\n    secondaryColor?: string;\n    designSettings?: ChaynsDesignSettings & { fontSizePx?: number };\n    paragraphFormat?: ChaynsParagraphFormat[];\n    siteId?: string;\n    theme?: Theme;\n    customVariables?: Record<string, string>;\n};\n\nconst createTheme = ({\n    colors,\n    colorMode,\n    color,\n    secondaryColor,\n    designSettings,\n    paragraphFormat,\n    theme,\n    iconColor,\n    customVariables,\n}: Omit<ThemeOptions, 'siteId'>) => {\n    if (theme) {\n        return theme;\n    }\n\n    const result: Theme = {};\n\n    if (customVariables) {\n        Object.keys(customVariables).forEach((key) => {\n            result[key] = customVariables[key] as string;\n        });\n    }\n\n    const availableColors = getAvailableColorList();\n\n    if (!colors) {\n        availableColors.forEach((colorName: string) => {\n            const hexColor = getColorFromPalette(colorName, {\n                color,\n                colorMode,\n                secondaryColor,\n            });\n\n            if (hexColor) {\n                const rgbColor = hexToRgb255(hexColor);\n\n                result[colorName] = hexColor;\n\n                if (rgbColor) {\n                    result[`${colorName}-rgb`] = `${rgbColor.r}, ${rgbColor.g}, ${rgbColor.b}`;\n                }\n            }\n        });\n    }\n\n    if (designSettings) {\n        Object.keys(designSettings).forEach((key) => {\n            if (key === 'iconStyle') {\n                result[key] = convertIconStyle(designSettings.iconStyle);\n\n                return;\n            }\n            result[key] = designSettings[key as keyof ChaynsDesignSettings] as string;\n        });\n    }\n\n    if (paragraphFormat) {\n        const { themeResult } = getHeadlineColorSelector(paragraphFormat);\n\n        // Update Theme\n        Object.keys(themeResult).forEach((key) => {\n            result[key] = themeResult[key] as string;\n        });\n    }\n\n    switch (colorMode) {\n        case ColorMode.Light:\n            result.colorMode = 'light';\n            break;\n        case ColorMode.Dark:\n            result.colorMode = 'dark';\n            break;\n        default:\n            result.colorMode = 'classic';\n            break;\n    }\n\n    if (iconColor) {\n        result.iconColor = iconColor;\n    }\n\n    result.fontSize = (designSettings?.fontSizePx || 15) as unknown as string;\n\n    return result;\n};\n\nexport const useChaynsTheme = ({\n    colors,\n    colorMode,\n    color,\n    secondaryColor,\n    designSettings: designSettingsProp,\n    paragraphFormat: paragraphFormatProp,\n    siteId,\n    iconColor,\n    theme,\n    customVariables,\n}: ThemeOptions) => {\n    const designSettings = useDesignSettings({\n        color,\n        colorMode,\n        designSettings: designSettingsProp,\n        siteId,\n    });\n\n    const paragraphFormat = useParagraphFormat(siteId, paragraphFormatProp);\n    const isMountedRef = useRef<boolean>(false);\n\n    const [internalTheme, setInternalTheme] = useState<Theme>(() =>\n        createTheme({\n            colors,\n            colorMode,\n            color,\n            secondaryColor,\n            designSettings,\n            paragraphFormat,\n            theme,\n            iconColor,\n            customVariables,\n        }),\n    );\n\n    useEffect(() => {\n        if (!isMountedRef.current) {\n            isMountedRef.current = true;\n            return;\n        }\n        setInternalTheme(\n            createTheme({\n                colors,\n                colorMode,\n                color,\n                secondaryColor,\n                designSettings,\n                paragraphFormat,\n                theme,\n                iconColor,\n                customVariables,\n            }),\n        );\n    }, [\n        color,\n        colorMode,\n        colors,\n        designSettings,\n        paragraphFormat,\n        secondaryColor,\n        theme,\n        customVariables,\n        iconColor,\n    ]);\n\n    return useMemo(\n        () => ({\n            theme: internalTheme,\n            designSettings,\n            paragraphFormat,\n        }),\n        [internalTheme, designSettings, paragraphFormat],\n    );\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/color-scheme-provider/hooks/useDesignSettings.js

@@ -0,0 +1,29 @@
+import { useStyleSettings } from 'chayns-api';
+import { useEffect, useMemo, useState } from 'react';
+import { getDesignSettings } from '../../../api/theme/get';
+export const useDesignSettings = ({
+  color,
+  colorMode,
+  designSettings,
+  siteId
+}) => {
+  const styleSettings = useStyleSettings();
+  const [value, setValue] = useState(designSettings ?? styleSettings?.designSettings);
+  const shouldLoad = !designSettings && !styleSettings?.designSettings;
+  useEffect(() => {
+    setValue(designSettings ?? styleSettings?.designSettings);
+  }, [designSettings, styleSettings?.designSettings]);
+  useEffect(() => {
+    if (shouldLoad) {
+      void getDesignSettings(siteId).then(result => {
+        setValue(result);
+      });
+    }
+  }, [shouldLoad, siteId]);
+  return useMemo(() => ({
+    ...value,
+    color,
+    colorMode
+  }), [color, colorMode, value]);
+};
+//# sourceMappingURL=useDesignSettings.js.map

package/lib/esm/components/color-scheme-provider/hooks/useDesignSettings.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDesignSettings.js","names":["useStyleSettings","useEffect","useMemo","useState","getDesignSettings","useDesignSettings","color","colorMode","designSettings","siteId","styleSettings","value","setValue","shouldLoad","then","result"],"sources":["../../../../../src/components/color-scheme-provider/hooks/useDesignSettings.ts"],"sourcesContent":["import { ChaynsDesignSettings, ColorMode, useStyleSettings } from 'chayns-api';\nimport { useEffect, useMemo, useState } from 'react';\nimport { getDesignSettings } from '../../../api/theme/get';\n\ninterface UseDesignSettingsOptions {\n    color?: string;\n    colorMode?: ColorMode;\n    designSettings?: ChaynsDesignSettings;\n    siteId?: string;\n}\n\nexport const useDesignSettings = ({\n    color,\n    colorMode,\n    designSettings,\n    siteId,\n}: UseDesignSettingsOptions) => {\n    const styleSettings = useStyleSettings();\n\n    const [value, setValue] = useState<ChaynsDesignSettings | undefined>(\n        designSettings ?? styleSettings?.designSettings,\n    );\n\n    const shouldLoad = !designSettings && !styleSettings?.designSettings;\n\n    useEffect(() => {\n        setValue(designSettings ?? styleSettings?.designSettings);\n    }, [designSettings, styleSettings?.designSettings]);\n\n    useEffect(() => {\n        if (shouldLoad) {\n            void getDesignSettings(siteId).then((result) => {\n                setValue(result);\n            });\n        }\n    }, [shouldLoad, siteId]);\n\n    return useMemo(\n        () => ({ ...value, color, colorMode }) as ChaynsDesignSettings | undefined,\n        [color, colorMode, value],\n    );\n};\n"],"mappings":"AAAA,SAA0CA,gBAAgB,QAAQ,YAAY;AAC9E,SAASC,SAAS,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,OAAO;AACpD,SAASC,iBAAiB,QAAQ,wBAAwB;AAS1D,OAAO,MAAMC,iBAAiB,GAAGA,CAAC;EAC9BC,KAAK;EACLC,SAAS;EACTC,cAAc;EACdC;AACsB,CAAC,KAAK;EAC5B,MAAMC,aAAa,GAAGV,gBAAgB,CAAC,CAAC;EAExC,MAAM,CAACW,KAAK,EAAEC,QAAQ,CAAC,GAAGT,QAAQ,CAC9BK,cAAc,IAAIE,aAAa,EAAEF,cACrC,CAAC;EAED,MAAMK,UAAU,GAAG,CAACL,cAAc,IAAI,CAACE,aAAa,EAAEF,cAAc;EAEpEP,SAAS,CAAC,MAAM;IACZW,QAAQ,CAACJ,cAAc,IAAIE,aAAa,EAAEF,cAAc,CAAC;EAC7D,CAAC,EAAE,CAACA,cAAc,EAAEE,aAAa,EAAEF,cAAc,CAAC,CAAC;EAEnDP,SAAS,CAAC,MAAM;IACZ,IAAIY,UAAU,EAAE;MACZ,KAAKT,iBAAiB,CAACK,MAAM,CAAC,CAACK,IAAI,CAAEC,MAAM,IAAK;QAC5CH,QAAQ,CAACG,MAAM,CAAC;MACpB,CAAC,CAAC;IACN;EACJ,CAAC,EAAE,CAACF,UAAU,EAAEJ,MAAM,CAAC,CAAC;EAExB,OAAOP,OAAO,CACV,OAAO;IAAE,GAAGS,KAAK;IAAEL,KAAK;IAAEC;EAAU,CAAC,CAAqC,EAC1E,CAACD,KAAK,EAAEC,SAAS,EAAEI,KAAK,CAC5B,CAAC;AACL,CAAC","ignoreList":[]}

package/lib/esm/components/color-scheme-provider/hooks/useParagraphFormat.js

@@ -0,0 +1,17 @@
+import { useStyleSettings } from 'chayns-api';
+import { useEffect, useState } from 'react';
+import { getParagraphFormat } from '../../../api/theme/get';
+export const useParagraphFormat = (siteId, paragraphFormat) => {
+  const styleSettings = useStyleSettings();
+  const [value, setValue] = useState([]);
+  const shouldLoad = !paragraphFormat && !styleSettings?.paragraphFormats;
+  useEffect(() => {
+    if (shouldLoad) {
+      void getParagraphFormat(siteId).then(result => {
+        setValue(result ?? []);
+      });
+    }
+  }, [shouldLoad, siteId]);
+  return paragraphFormat ?? styleSettings?.paragraphFormats ?? value;
+};
+//# sourceMappingURL=useParagraphFormat.js.map

package/lib/esm/components/color-scheme-provider/hooks/useParagraphFormat.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useParagraphFormat.js","names":["useStyleSettings","useEffect","useState","getParagraphFormat","useParagraphFormat","siteId","paragraphFormat","styleSettings","value","setValue","shouldLoad","paragraphFormats","then","result"],"sources":["../../../../../src/components/color-scheme-provider/hooks/useParagraphFormat.ts"],"sourcesContent":["import { ChaynsParagraphFormat, useStyleSettings } from 'chayns-api';\nimport { useEffect, useState } from 'react';\nimport { getParagraphFormat } from '../../../api/theme/get';\n\nexport const useParagraphFormat = (siteId?: string, paragraphFormat?: ChaynsParagraphFormat[]) => {\n    const styleSettings = useStyleSettings();\n    const [value, setValue] = useState<ChaynsParagraphFormat[]>([]);\n    const shouldLoad = !paragraphFormat && !styleSettings?.paragraphFormats;\n\n    useEffect(() => {\n        if (shouldLoad) {\n            void getParagraphFormat(siteId).then((result) => {\n                setValue(result ?? []);\n            });\n        }\n    }, [shouldLoad, siteId]);\n\n    return paragraphFormat ?? styleSettings?.paragraphFormats ?? value;\n};\n"],"mappings":"AAAA,SAAgCA,gBAAgB,QAAQ,YAAY;AACpE,SAASC,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAC3C,SAASC,kBAAkB,QAAQ,wBAAwB;AAE3D,OAAO,MAAMC,kBAAkB,GAAGA,CAACC,MAAe,EAAEC,eAAyC,KAAK;EAC9F,MAAMC,aAAa,GAAGP,gBAAgB,CAAC,CAAC;EACxC,MAAM,CAACQ,KAAK,EAAEC,QAAQ,CAAC,GAAGP,QAAQ,CAA0B,EAAE,CAAC;EAC/D,MAAMQ,UAAU,GAAG,CAACJ,eAAe,IAAI,CAACC,aAAa,EAAEI,gBAAgB;EAEvEV,SAAS,CAAC,MAAM;IACZ,IAAIS,UAAU,EAAE;MACZ,KAAKP,kBAAkB,CAACE,MAAM,CAAC,CAACO,IAAI,CAAEC,MAAM,IAAK;QAC7CJ,QAAQ,CAACI,MAAM,IAAI,EAAE,CAAC;MAC1B,CAAC,CAAC;IACN;EACJ,CAAC,EAAE,CAACH,UAAU,EAAEL,MAAM,CAAC,CAAC;EAExB,OAAOC,eAAe,IAAIC,aAAa,EAAEI,gBAAgB,IAAIH,KAAK;AACtE,CAAC","ignoreList":[]}