@chayns-components/core 5.0.0-beta.1321 → 5.0.0-beta.1322
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/cjs/components/color-scheme-provider/ColorSchemeProvider.js +4 -2
- package/lib/cjs/components/color-scheme-provider/ColorSchemeProvider.js.map +1 -1
- package/lib/esm/components/color-scheme-provider/ColorSchemeProvider.js +3 -2
- package/lib/esm/components/color-scheme-provider/ColorSchemeProvider.js.map +1 -1
- package/package.json +4 -4
|
@@ -41,12 +41,14 @@ const ColorSchemeProvider = ({
|
|
|
41
41
|
iconColor,
|
|
42
42
|
customVariables
|
|
43
43
|
}) => {
|
|
44
|
+
var _context$designSettin, _context$designSettin2;
|
|
45
|
+
const context = (0, _react.useContext)(ColorSchemeContext);
|
|
44
46
|
const {
|
|
45
47
|
color: internalColor,
|
|
46
48
|
colorMode: internalColorMode
|
|
47
49
|
} = (0, _chaynsApi.useSite)();
|
|
48
|
-
const color = colorProp ?? internalColor;
|
|
49
|
-
const colorMode = colorModeProp ?? internalColorMode;
|
|
50
|
+
const color = colorProp ?? (context === null || context === void 0 || (_context$designSettin = context.designSettings) === null || _context$designSettin === void 0 ? void 0 : _context$designSettin.color) ?? internalColor;
|
|
51
|
+
const colorMode = colorModeProp ?? (context === null || context === void 0 || (_context$designSettin2 = context.designSettings) === null || _context$designSettin2 === void 0 ? void 0 : _context$designSettin2.colorMode) ?? internalColorMode;
|
|
50
52
|
const overrideParagraphFormat = color && color !== internalColor || colorMode !== internalColorMode;
|
|
51
53
|
const paragraphFormat = (0, _react.useMemo)(() => overrideParagraphFormat ? [] : undefined, [overrideParagraphFormat]);
|
|
52
54
|
const contextValue = (0, _useChaynsTheme.useChaynsTheme)({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ColorSchemeProvider.js","names":["_chaynsApi","require","_react","_interopRequireWildcard","_styledComponents","_ColorSchemeProvider","_useChaynsTheme","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","GlobalStyle","createGlobalStyle","ColorSchemeContext","exports","createContext","undefined","useColorScheme","useContext","ColorSchemeProvider","children","color","colorProp","colorMode","colorModeProp","secondaryColor","siteId","style","iconColor","customVariables","internalColor","internalColorMode","useSite","overrideParagraphFormat","paragraphFormat","useMemo","contextValue","useChaynsTheme","createElement","ThemeProvider","theme","Provider","value","StyledColorSchemeProvider","className","displayName","_default"],"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 { color: internalColor, colorMode: internalColorMode } = useSite();\n\n const color = colorProp ?? internalColor;\n const colorMode = colorModeProp ?? internalColorMode;\n const overrideParagraphFormat =\n (color && color !== internalColor) || colorMode !== internalColorMode;\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,IAAAA,UAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAC,uBAAA,CAAAF,OAAA;AACA,IAAAG,iBAAA,GAAAH,OAAA;AACA,IAAAI,oBAAA,GAAAJ,OAAA;AACA,IAAAK,eAAA,GAAAL,OAAA;AAAwD,SAAAE,wBAAAI,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAN,uBAAA,YAAAA,CAAAI,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AA6CxD,MAAMkB,WAAW,GAAG,IAAAC,mCAAiB;AACrC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAQM,MAAMC,kBAAkB,GAAAC,OAAA,CAAAD,kBAAA,gBAAG,IAAAE,oBAAa,EAAsCC,SAAS,CAAC;AAExF,MAAMC,cAAc,GAAGA,CAAA,KAAM,IAAAC,iBAAU,EAACL,kBAAkB,CAAC;AAACC,OAAA,CAAAG,cAAA,GAAAA,cAAA;AAEnE,MAAME,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,MAAM;
|
|
1
|
+
{"version":3,"file":"ColorSchemeProvider.js","names":["_chaynsApi","require","_react","_interopRequireWildcard","_styledComponents","_ColorSchemeProvider","_useChaynsTheme","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","GlobalStyle","createGlobalStyle","ColorSchemeContext","exports","createContext","undefined","useColorScheme","useContext","ColorSchemeProvider","children","color","colorProp","colorMode","colorModeProp","secondaryColor","siteId","style","iconColor","customVariables","_context$designSettin","_context$designSettin2","context","internalColor","internalColorMode","useSite","designSettings","overrideParagraphFormat","paragraphFormat","useMemo","contextValue","useChaynsTheme","createElement","ThemeProvider","theme","Provider","value","StyledColorSchemeProvider","className","displayName","_default"],"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":"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","ignoreList":[]}
|
|
@@ -33,12 +33,13 @@ const ColorSchemeProvider = ({
|
|
|
33
33
|
iconColor,
|
|
34
34
|
customVariables
|
|
35
35
|
}) => {
|
|
36
|
+
const context = useContext(ColorSchemeContext);
|
|
36
37
|
const {
|
|
37
38
|
color: internalColor,
|
|
38
39
|
colorMode: internalColorMode
|
|
39
40
|
} = useSite();
|
|
40
|
-
const color = colorProp ?? internalColor;
|
|
41
|
-
const colorMode = colorModeProp ?? internalColorMode;
|
|
41
|
+
const color = colorProp ?? context?.designSettings?.color ?? internalColor;
|
|
42
|
+
const colorMode = colorModeProp ?? context?.designSettings?.colorMode ?? internalColorMode;
|
|
42
43
|
const overrideParagraphFormat = color && color !== internalColor || colorMode !== internalColorMode;
|
|
43
44
|
const paragraphFormat = useMemo(() => overrideParagraphFormat ? [] : undefined, [overrideParagraphFormat]);
|
|
44
45
|
const contextValue = useChaynsTheme({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"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","internalColor","internalColorMode","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 { color: internalColor, colorMode: internalColorMode } = useSite();\n\n const color = colorProp ?? internalColor;\n const colorMode = colorModeProp ?? internalColorMode;\n const overrideParagraphFormat =\n (color && color !== internalColor) || colorMode !== internalColorMode;\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,MAAM;
|
|
1
|
+
{"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/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@chayns-components/core",
|
|
3
|
-
"version": "5.0.0-beta.
|
|
3
|
+
"version": "5.0.0-beta.1322",
|
|
4
4
|
"description": "A set of beautiful React components for developing your own applications with chayns.",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"browserslist": [
|
|
@@ -57,9 +57,9 @@
|
|
|
57
57
|
"@babel/preset-env": "^7.28.5",
|
|
58
58
|
"@babel/preset-react": "^7.28.5",
|
|
59
59
|
"@babel/preset-typescript": "^7.28.5",
|
|
60
|
-
"@types/react": "^18.3.
|
|
60
|
+
"@types/react": "^18.3.27",
|
|
61
61
|
"@types/react-dom": "^18.3.7",
|
|
62
|
-
"@types/styled-components": "^5.1.
|
|
62
|
+
"@types/styled-components": "^5.1.36",
|
|
63
63
|
"@types/uuid": "^10.0.0",
|
|
64
64
|
"babel-loader": "^9.2.1",
|
|
65
65
|
"chayns-api": "^2.4.30",
|
|
@@ -86,5 +86,5 @@
|
|
|
86
86
|
"publishConfig": {
|
|
87
87
|
"access": "public"
|
|
88
88
|
},
|
|
89
|
-
"gitHead": "
|
|
89
|
+
"gitHead": "9ea88f6ab289276d6e8fc3d1c774180098666db9"
|
|
90
90
|
}
|