@chayns-components/core 5.0.2 → 5.0.4

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

@@ -17,6 +17,12 @@ const StyledColorSchemeProvider = exports.StyledColorSchemeProvider = _styledCom
   return [`--chayns-color--${colorName}: ${theme[colorName]};`, `--chayns-color-rgb--${colorName}: ${theme[colorNameRgb]};`];
 })}
 
+    ${({
+  theme
+}) => `
+        --chayns-color--header-bar: ${theme['header-bar'] ?? theme.primary};
+    `}
+
     // ToDo: Remove .h1...
     .color-scheme-provider :is(h1,.h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6):first-child {
         margin-top: 0;

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

@@ -1 +1 @@
-{"version":3,"file":"ColorSchemeProvider.styles.js","names":["_colors","require","_styledComponents","StyledColorSchemeProvider","exports","styled","div","theme","getAvailableColorList","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,IAAAA,OAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAD,OAAA;AAKA;AACO,MAAME,yBAAyB,GAAAC,OAAA,CAAAD,yBAAA,GAAGE,wBAAM,CAACC,GAA6B;AAC7E;AACA;AACA,MAAM,CAAC;EAAEC;AAAgC,CAAC,KAClC,IAAAC,6BAAqB,EAAC,CAAC,CAACC,GAAG,CAAEC,SAAiB,IAAK;EAC/C,MAAMC,YAAY,GAAG,GAAGD,SAAS,MAAM;EACvC,OAAO,CACH,mBAAmBA,SAAS,KAAKH,KAAK,CAACG,SAAS,CAAC,GAAG,EACpD,uBAAuBA,SAAS,KAAKH,KAAK,CAACI,YAAY,CAAC,GAAG,CAC9D;AACL,CAAC,CAAC;AACV;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
+{"version":3,"file":"ColorSchemeProvider.styles.js","names":["_colors","require","_styledComponents","StyledColorSchemeProvider","exports","styled","div","theme","getAvailableColorList","map","colorName","colorNameRgb","primary"],"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    ${({ theme }: ColorSchemeProviderProps) =>\n        `\n        --chayns-color--header-bar: ${theme['header-bar'] ?? theme.primary};\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,IAAAA,OAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAD,OAAA;AAKA;AACO,MAAME,yBAAyB,GAAAC,OAAA,CAAAD,yBAAA,GAAGE,wBAAM,CAACC,GAA6B;AAC7E;AACA;AACA,MAAM,CAAC;EAAEC;AAAgC,CAAC,KAClC,IAAAC,6BAAqB,EAAC,CAAC,CAACC,GAAG,CAAEC,SAAiB,IAAK;EAC/C,MAAMC,YAAY,GAAG,GAAGD,SAAS,MAAM;EACvC,OAAO,CACH,mBAAmBA,SAAS,KAAKH,KAAK,CAACG,SAAS,CAAC,GAAG,EACpD,uBAAuBA,SAAS,KAAKH,KAAK,CAACI,YAAY,CAAC,GAAG,CAC9D;AACL,CAAC,CAAC;AACV;AACA,MAAM,CAAC;EAAEJ;AAAgC,CAAC,KAClC;AACR,sCAAsCA,KAAK,CAAC,YAAY,CAAC,IAAIA,KAAK,CAACK,OAAO;AAC1E,KAAK;AACL;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}

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

@@ -10,6 +10,9 @@ var _react = require("react");
 var _font = require("../../../utils/font");
 var _useDesignSettings = require("./useDesignSettings");
 var _useParagraphFormat = require("./useParagraphFormat");
+const DesignSettingsKeyMap = {
+  headerBarColor: 'header-bar'
+};
 const createTheme = ({
   colors,
   colorMode,
@@ -53,7 +56,7 @@ const createTheme = ({
         result[key] = (0, _font.convertIconStyle)(designSettings.iconStyle);
         return;
       }
-      result[key] = designSettings[key];
+      result[DesignSettingsKeyMap[key] || key] = designSettings[key];
     });
   }
   if (paragraphFormat) {

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

@@ -1 +1 @@
-{"version":3,"file":"useChaynsTheme.js","names":["_colors","require","_chaynsApi","_react","_font","_useDesignSettings","_useParagraphFormat","createTheme","colors","colorMode","color","secondaryColor","designSettings","paragraphFormat","theme","iconColor","customVariables","result","Object","keys","forEach","key","availableColors","getAvailableColorList","colorName","hexColor","getColorFromPalette","rgbColor","hexToRgb255","r","g","b","convertIconStyle","iconStyle","themeResult","getHeadlineColorSelector","ColorMode","Light","Dark","fontSize","fontSizePx","useChaynsTheme","designSettingsProp","paragraphFormatProp","siteId","useDesignSettings","useParagraphFormat","isMountedRef","useRef","internalTheme","setInternalTheme","useState","useEffect","current","useMemo","exports"],"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":[]}
+{"version":3,"file":"useChaynsTheme.js","names":["_colors","require","_chaynsApi","_react","_font","_useDesignSettings","_useParagraphFormat","DesignSettingsKeyMap","headerBarColor","createTheme","colors","colorMode","color","secondaryColor","designSettings","paragraphFormat","theme","iconColor","customVariables","result","Object","keys","forEach","key","availableColors","getAvailableColorList","colorName","hexColor","getColorFromPalette","rgbColor","hexToRgb255","r","g","b","convertIconStyle","iconStyle","themeResult","getHeadlineColorSelector","ColorMode","Light","Dark","fontSize","fontSizePx","useChaynsTheme","designSettingsProp","paragraphFormatProp","siteId","useDesignSettings","useParagraphFormat","isMountedRef","useRef","internalTheme","setInternalTheme","useState","useEffect","current","useMemo","exports"],"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 DesignSettingsKeyMap: Partial<Record<keyof ChaynsDesignSettings, string>> = {\n    headerBarColor: 'header-bar',\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[DesignSettingsKeyMap[key as keyof ChaynsDesignSettings] || key] = designSettings[\n                key as keyof ChaynsDesignSettings\n            ] 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/cjs/components/multi-action-button/action-button/ActionButton.js

@@ -38,7 +38,6 @@ const ActionButton = ({
   const isPrimary = actionType === 'primary';
   const isSecondary = actionType === 'secondary';
   const actionColor = action.color ?? '#FFFFFF';
-  const labelKey = typeof action.label === 'string' || typeof action.label === 'number' ? action.label : actionType;
   return /*#__PURE__*/_react2.default.createElement(_ActionButton.StyledActionButton, {
     disabled: isDisabled || action.isDisabled,
     $backgroundColor: backgroundColor,
@@ -64,10 +63,8 @@ const ActionButton = ({
     color: actionColor,
     size: height - 24
   }) : action.icon), /*#__PURE__*/_react2.default.createElement(_react.AnimatePresence, {
-    initial: false,
-    mode: "wait"
+    initial: false
   }, showLabel && /*#__PURE__*/_react2.default.createElement(_ActionButton.StyledLabelWrapper, {
-    key: labelKey,
     animate: {
       opacity: 1,
       width: 'auto',

package/lib/cjs/components/multi-action-button/action-button/ActionButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActionButton.js","names":["_react","require","_react2","_interopRequireDefault","_Icon","_ActionButton","e","__esModule","default","LABEL_GAP","LABEL_TRANSITION","duration","ActionButton","action","actionType","backgroundColor","isCollapsed","isDisabled","isExpanded","isHidden","isShrunk","isSolo","onClick","onMouseEnter","onMouseLeave","showLabel","shouldUseContentWidth","height","_action$status","_action$status2","isPrimary","isSecondary","actionColor","color","labelKey","label","createElement","StyledActionButton","disabled","$backgroundColor","$isCollapsed","$isExpanded","undefined","$isHidden","$isPrimary","$isSecondary","$isShrunk","$isSolo","$pulseColors","status","pulseColors","$height","$statusType","type","$shouldUseContentWidth","StyledActionContent","StyledIconSlot","icon","icons","size","AnimatePresence","initial","mode","StyledLabelWrapper","key","animate","opacity","width","marginLeft","exit","transition","StyledSecondaryLabel","style","displayName","_default","exports"],"sources":["../../../../../src/components/multi-action-button/action-button/ActionButton.tsx"],"sourcesContent":["import { AnimatePresence } from 'motion/react';\nimport React, { FC, MouseEvent } from 'react';\nimport Icon from '../../icon/Icon';\nimport {\n    StyledActionButton,\n    StyledActionContent,\n    StyledIconSlot,\n    StyledLabelWrapper,\n    StyledSecondaryLabel,\n} from './ActionButton.styles';\nimport type { MultiActionButtonAction } from '../MultiActionButton.types';\n\nconst LABEL_GAP = 6;\nconst LABEL_TRANSITION = { duration: 0.3 };\n\nexport type ActionButtonProps = {\n    action: MultiActionButtonAction;\n    actionType: 'primary' | 'secondary';\n    backgroundColor?: string;\n    isCollapsed: boolean;\n    isDisabled: boolean;\n    isExpanded?: boolean;\n    isHidden?: boolean;\n    isShrunk?: boolean;\n    isSolo?: boolean;\n    onClick?: (event: MouseEvent<HTMLButtonElement>) => void;\n    onMouseEnter?: () => void;\n    onMouseLeave?: () => void;\n    showLabel: boolean;\n    shouldUseContentWidth: boolean;\n    height: number;\n};\n\n/**\n * Shared action button UI used by both primary and secondary actions.\n * Keeps layout and animations consistent while isolating styling details.\n */\nconst ActionButton: FC<ActionButtonProps> = ({\n    action,\n    actionType,\n    backgroundColor,\n    isCollapsed,\n    isDisabled,\n    isExpanded,\n    isHidden,\n    isShrunk,\n    isSolo,\n    onClick,\n    onMouseEnter,\n    onMouseLeave,\n    showLabel,\n    shouldUseContentWidth,\n    height,\n}) => {\n    const isPrimary = actionType === 'primary';\n    const isSecondary = actionType === 'secondary';\n    const actionColor = action.color ?? '#FFFFFF';\n    \n    const labelKey =\n        typeof action.label === 'string' || typeof action.label === 'number'\n            ? action.label\n            : actionType;\n\n    return (\n        <StyledActionButton\n            disabled={isDisabled || action.isDisabled}\n            $backgroundColor={backgroundColor}\n            $isCollapsed={isCollapsed}\n            $isExpanded={isSecondary ? isExpanded : undefined}\n            $isHidden={isSecondary ? isHidden : undefined}\n            $isPrimary={isPrimary}\n            $isSecondary={isSecondary}\n            $isShrunk={isPrimary ? isShrunk : undefined}\n            $isSolo={isPrimary ? isSolo : undefined}\n            $pulseColors={action.status?.pulseColors}\n            $height={height}\n            $statusType={action.status?.type}\n            $shouldUseContentWidth={shouldUseContentWidth}\n            onClick={onClick}\n            onMouseEnter={onMouseEnter}\n            onMouseLeave={onMouseLeave}\n            type=\"button\"\n        >\n            <StyledActionContent>\n                <StyledIconSlot $height={height}>\n                    {typeof action.icon === 'string' ? (\n                        <Icon icons={[action.icon]} color={actionColor} size={height - 24} />\n                    ) : (\n                        action.icon\n                    )}\n                </StyledIconSlot>\n                <AnimatePresence initial={false} mode=\"wait\">\n                    {/* Animate width and margin to avoid layout jumps when labels mount/unmount. */}\n                    {showLabel && (\n                        <StyledLabelWrapper\n                            key={labelKey}\n                            animate={{ opacity: 1, width: 'auto', marginLeft: LABEL_GAP }}\n                            exit={{ opacity: 0, width: 0, marginLeft: 0 }}\n                            initial={{ opacity: 0, width: 0, marginLeft: 0 }}\n                            transition={LABEL_TRANSITION}\n                        >\n                            <StyledSecondaryLabel style={{ color: actionColor }}>\n                                {action.label}\n                            </StyledSecondaryLabel>\n                        </StyledLabelWrapper>\n                    )}\n                </AnimatePresence>\n            </StyledActionContent>\n        </StyledActionButton>\n    );\n};\n\nActionButton.displayName = 'ActionButton';\n\nexport default ActionButton;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"ActionButton.js","names":["_react","require","_react2","_interopRequireDefault","_Icon","_ActionButton","e","__esModule","default","LABEL_GAP","LABEL_TRANSITION","duration","ActionButton","action","actionType","backgroundColor","isCollapsed","isDisabled","isExpanded","isHidden","isShrunk","isSolo","onClick","onMouseEnter","onMouseLeave","showLabel","shouldUseContentWidth","height","_action$status","_action$status2","isPrimary","isSecondary","actionColor","color","createElement","StyledActionButton","disabled","$backgroundColor","$isCollapsed","$isExpanded","undefined","$isHidden","$isPrimary","$isSecondary","$isShrunk","$isSolo","$pulseColors","status","pulseColors","$height","$statusType","type","$shouldUseContentWidth","StyledActionContent","StyledIconSlot","icon","icons","size","AnimatePresence","initial","StyledLabelWrapper","animate","opacity","width","marginLeft","exit","transition","StyledSecondaryLabel","style","label","displayName","_default","exports"],"sources":["../../../../../src/components/multi-action-button/action-button/ActionButton.tsx"],"sourcesContent":["import { AnimatePresence } from 'motion/react';\nimport React, { FC, MouseEvent } from 'react';\nimport Icon from '../../icon/Icon';\nimport {\n    StyledActionButton,\n    StyledActionContent,\n    StyledIconSlot,\n    StyledLabelWrapper,\n    StyledSecondaryLabel,\n} from './ActionButton.styles';\nimport type { MultiActionButtonAction } from '../MultiActionButton.types';\n\nconst LABEL_GAP = 6;\nconst LABEL_TRANSITION = { duration: 0.3 };\n\nexport type ActionButtonProps = {\n    action: MultiActionButtonAction;\n    actionType: 'primary' | 'secondary';\n    backgroundColor?: string;\n    isCollapsed: boolean;\n    isDisabled: boolean;\n    isExpanded?: boolean;\n    isHidden?: boolean;\n    isShrunk?: boolean;\n    isSolo?: boolean;\n    onClick?: (event: MouseEvent<HTMLButtonElement>) => void;\n    onMouseEnter?: () => void;\n    onMouseLeave?: () => void;\n    showLabel: boolean;\n    shouldUseContentWidth: boolean;\n    height: number;\n};\n\n/**\n * Shared action button UI used by both primary and secondary actions.\n * Keeps layout and animations consistent while isolating styling details.\n */\nconst ActionButton: FC<ActionButtonProps> = ({\n    action,\n    actionType,\n    backgroundColor,\n    isCollapsed,\n    isDisabled,\n    isExpanded,\n    isHidden,\n    isShrunk,\n    isSolo,\n    onClick,\n    onMouseEnter,\n    onMouseLeave,\n    showLabel,\n    shouldUseContentWidth,\n    height,\n}) => {\n    const isPrimary = actionType === 'primary';\n    const isSecondary = actionType === 'secondary';\n    const actionColor = action.color ?? '#FFFFFF';\n\n    return (\n        <StyledActionButton\n            disabled={isDisabled || action.isDisabled}\n            $backgroundColor={backgroundColor}\n            $isCollapsed={isCollapsed}\n            $isExpanded={isSecondary ? isExpanded : undefined}\n            $isHidden={isSecondary ? isHidden : undefined}\n            $isPrimary={isPrimary}\n            $isSecondary={isSecondary}\n            $isShrunk={isPrimary ? isShrunk : undefined}\n            $isSolo={isPrimary ? isSolo : undefined}\n            $pulseColors={action.status?.pulseColors}\n            $height={height}\n            $statusType={action.status?.type}\n            $shouldUseContentWidth={shouldUseContentWidth}\n            onClick={onClick}\n            onMouseEnter={onMouseEnter}\n            onMouseLeave={onMouseLeave}\n            type=\"button\"\n        >\n            <StyledActionContent>\n                <StyledIconSlot $height={height}>\n                    {typeof action.icon === 'string' ? (\n                        <Icon icons={[action.icon]} color={actionColor} size={height - 24} />\n                    ) : (\n                        action.icon\n                    )}\n                </StyledIconSlot>\n                <AnimatePresence initial={false}>\n                    {/* Animate width and margin to avoid layout jumps when labels mount/unmount. */}\n                    {showLabel && (\n                        <StyledLabelWrapper\n                            animate={{ opacity: 1, width: 'auto', marginLeft: LABEL_GAP }}\n                            exit={{ opacity: 0, width: 0, marginLeft: 0 }}\n                            initial={{ opacity: 0, width: 0, marginLeft: 0 }}\n                            transition={LABEL_TRANSITION}\n                        >\n                            <StyledSecondaryLabel style={{ color: actionColor }}>\n                                {action.label}\n                            </StyledSecondaryLabel>\n                        </StyledLabelWrapper>\n                    )}\n                </AnimatePresence>\n            </StyledActionContent>\n        </StyledActionButton>\n    );\n};\n\nActionButton.displayName = 'ActionButton';\n\nexport default ActionButton;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/verification-badge/VerificationBadge.js

@@ -8,8 +8,8 @@ var _react = _interopRequireDefault(require("react"));
 var _VerificationBadge = require("./VerificationBadge.styles");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const VerificationBadge = () => /*#__PURE__*/_react.default.createElement(_VerificationBadge.StyledVerificationBadge, {
-  className: "vcid-check--blue"
-}, /*#__PURE__*/_react.default.createElement("span", null), /*#__PURE__*/_react.default.createElement("span", null), /*#__PURE__*/_react.default.createElement("span", null));
+  className: "beta-chayns-verification-badge"
+}, /*#__PURE__*/_react.default.createElement("span", null, '\ue903'), /*#__PURE__*/_react.default.createElement("span", null, '\ue904'), /*#__PURE__*/_react.default.createElement("span", null, '\ue905'));
 VerificationBadge.displayName = 'VerificationBadge';
 var _default = exports.default = VerificationBadge;
 //# sourceMappingURL=VerificationBadge.js.map

package/lib/cjs/components/verification-badge/VerificationBadge.js.map

@@ -1 +1 @@
-{"version":3,"file":"VerificationBadge.js","names":["_react","_interopRequireDefault","require","_VerificationBadge","e","__esModule","default","VerificationBadge","createElement","StyledVerificationBadge","className","displayName","_default","exports"],"sources":["../../../../src/components/verification-badge/VerificationBadge.tsx"],"sourcesContent":["import React from 'react';\nimport { StyledVerificationBadge } from './VerificationBadge.styles';\n\nconst VerificationBadge = () => (\n    <StyledVerificationBadge className=\"vcid-check--blue\">\n        <span />\n        <span />\n        <span />\n    </StyledVerificationBadge>\n);\n\nVerificationBadge.displayName = 'VerificationBadge';\n\nexport default VerificationBadge;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,kBAAA,GAAAD,OAAA;AAAqE,SAAAD,uBAAAG,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAErE,MAAMG,iBAAiB,GAAGA,CAAA,kBACtBP,MAAA,CAAAM,OAAA,CAAAE,aAAA,CAACL,kBAAA,CAAAM,uBAAuB;EAACC,SAAS,EAAC;AAAkB,gBACjDV,MAAA,CAAAM,OAAA,CAAAE,aAAA,aAAO,CAAC,eACRR,MAAA,CAAAM,OAAA,CAAAE,aAAA,aAAO,CAAC,eACRR,MAAA,CAAAM,OAAA,CAAAE,aAAA,aAAO,CACc,CAC5B;AAEDD,iBAAiB,CAACI,WAAW,GAAG,mBAAmB;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAP,OAAA,GAErCC,iBAAiB","ignoreList":[]}
+{"version":3,"file":"VerificationBadge.js","names":["_react","_interopRequireDefault","require","_VerificationBadge","e","__esModule","default","VerificationBadge","createElement","StyledVerificationBadge","className","displayName","_default","exports"],"sources":["../../../../src/components/verification-badge/VerificationBadge.tsx"],"sourcesContent":["import React from 'react';\nimport { StyledVerificationBadge } from './VerificationBadge.styles';\n\nconst VerificationBadge = () => (\n    <StyledVerificationBadge className=\"beta-chayns-verification-badge\">\n        <span>{'\\ue903'}</span>\n        <span>{'\\ue904'}</span>\n        <span>{'\\ue905'}</span>\n    </StyledVerificationBadge>\n);\n\nVerificationBadge.displayName = 'VerificationBadge';\n\nexport default VerificationBadge;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,kBAAA,GAAAD,OAAA;AAAqE,SAAAD,uBAAAG,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAErE,MAAMG,iBAAiB,GAAGA,CAAA,kBACtBP,MAAA,CAAAM,OAAA,CAAAE,aAAA,CAACL,kBAAA,CAAAM,uBAAuB;EAACC,SAAS,EAAC;AAAgC,gBAC/DV,MAAA,CAAAM,OAAA,CAAAE,aAAA,eAAO,QAAe,CAAC,eACvBR,MAAA,CAAAM,OAAA,CAAAE,aAAA,eAAO,QAAe,CAAC,eACvBR,MAAA,CAAAM,OAAA,CAAAE,aAAA,eAAO,QAAe,CACD,CAC5B;AAEDD,iBAAiB,CAACI,WAAW,GAAG,mBAAmB;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAP,OAAA,GAErCC,iBAAiB","ignoreList":[]}

package/lib/cjs/components/verification-badge/VerificationBadge.styles.js

@@ -6,5 +6,41 @@ Object.defineProperty(exports, "__esModule", {
 exports.StyledVerificationBadge = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const StyledVerificationBadge = exports.StyledVerificationBadge = _styledComponents.default.span``;
+const StyledVerificationBadge = exports.StyledVerificationBadge = _styledComponents.default.span`
+    @font-face {
+        font-family: 'Verified-chaynsID';
+        src:
+            url(https://api.chayns-static.space/font-vcid/Verified-chaynsID.woff2) format('woff2'),
+            url(https://api.chayns-static.space/font-vcid/Verified-chaynsID.woff2) format('woff'),
+            url(https://api.chayns-static.space/font-vcid/Verified-chaynsID.woff2) format('woff'),
+            url(https://api.chayns-static.space/font-vcid/Verified-chaynsID.ttf) format('truetype'),
+            url(https://api.chayns-static.space/font-vcid/Verified-chaynsID.svg) format('svg');
+        font-weight: normal;
+        font-style: normal;
+        font-display: block;
+    }
+
+    /*noinspection CssNoGenericFontName*/
+    font-family: 'Verified-chaynsID' !important;
+    font-style: normal;
+    font-weight: normal;
+    font-variant: normal;
+    text-transform: none;
+    line-height: 1;
+    font-size: 0.8em;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+
+    margin-left: 0.2em;
+
+    & > :first-child {
+        color: #5890ff;
+    }
+
+    & > :nth-child(2),
+    & > :nth-child(3) {
+        margin-left: -1em;
+        color: #fff;
+    }
+`;
 //# sourceMappingURL=VerificationBadge.styles.js.map

package/lib/cjs/components/verification-badge/VerificationBadge.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"VerificationBadge.styles.js","names":["_styledComponents","_interopRequireDefault","require","e","__esModule","default","StyledVerificationBadge","exports","styled","span"],"sources":["../../../../src/components/verification-badge/VerificationBadge.styles.ts"],"sourcesContent":["import styled from 'styled-components';\n\nexport const StyledVerificationBadge = styled.span``;\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAuC,SAAAD,uBAAAE,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAEhC,MAAMG,uBAAuB,GAAAC,OAAA,CAAAD,uBAAA,GAAGE,yBAAM,CAACC,IAAI,EAAE","ignoreList":[]}
+{"version":3,"file":"VerificationBadge.styles.js","names":["_styledComponents","_interopRequireDefault","require","e","__esModule","default","StyledVerificationBadge","exports","styled","span"],"sources":["../../../../src/components/verification-badge/VerificationBadge.styles.ts"],"sourcesContent":["import styled from 'styled-components';\n\nexport const StyledVerificationBadge = styled.span`\n    @font-face {\n        font-family: 'Verified-chaynsID';\n        src:\n            url(https://api.chayns-static.space/font-vcid/Verified-chaynsID.woff2) format('woff2'),\n            url(https://api.chayns-static.space/font-vcid/Verified-chaynsID.woff2) format('woff'),\n            url(https://api.chayns-static.space/font-vcid/Verified-chaynsID.woff2) format('woff'),\n            url(https://api.chayns-static.space/font-vcid/Verified-chaynsID.ttf) format('truetype'),\n            url(https://api.chayns-static.space/font-vcid/Verified-chaynsID.svg) format('svg');\n        font-weight: normal;\n        font-style: normal;\n        font-display: block;\n    }\n\n    /*noinspection CssNoGenericFontName*/\n    font-family: 'Verified-chaynsID' !important;\n    font-style: normal;\n    font-weight: normal;\n    font-variant: normal;\n    text-transform: none;\n    line-height: 1;\n    font-size: 0.8em;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n\n    margin-left: 0.2em;\n\n    & > :first-child {\n        color: #5890ff;\n    }\n\n    & > :nth-child(2),\n    & > :nth-child(3) {\n        margin-left: -1em;\n        color: #fff;\n    }\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAuC,SAAAD,uBAAAE,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAEhC,MAAMG,uBAAuB,GAAAC,OAAA,CAAAD,uBAAA,GAAGE,yBAAM,CAACC,IAAI;AAClD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}

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

@@ -11,6 +11,12 @@ export const StyledColorSchemeProvider = styled.div`
   return [`--chayns-color--${colorName}: ${theme[colorName]};`, `--chayns-color-rgb--${colorName}: ${theme[colorNameRgb]};`];
 })}
 
+    ${({
+  theme
+}) => `
+        --chayns-color--header-bar: ${theme['header-bar'] ?? theme.primary};
+    `}
+
     // ToDo: Remove .h1...
     .color-scheme-provider :is(h1,.h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6):first-child {
         margin-top: 0;

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

@@ -1 +1 @@
-{"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":[]}
+{"version":3,"file":"ColorSchemeProvider.styles.js","names":["getAvailableColorList","styled","StyledColorSchemeProvider","div","theme","map","colorName","colorNameRgb","primary"],"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    ${({ theme }: ColorSchemeProviderProps) =>\n        `\n        --chayns-color--header-bar: ${theme['header-bar'] ?? theme.primary};\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,MAAM,CAAC;EAAEH;AAAgC,CAAC,KAClC;AACR,sCAAsCA,KAAK,CAAC,YAAY,CAAC,IAAIA,KAAK,CAACI,OAAO;AAC1E,KAAK;AACL;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}

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

@@ -4,6 +4,9 @@ import { useEffect, useMemo, useRef, useState } from 'react';
 import { convertIconStyle, getHeadlineColorSelector } from '../../../utils/font';
 import { useDesignSettings } from './useDesignSettings';
 import { useParagraphFormat } from './useParagraphFormat';
+const DesignSettingsKeyMap = {
+  headerBarColor: 'header-bar'
+};
 const createTheme = ({
   colors,
   colorMode,
@@ -47,7 +50,7 @@ const createTheme = ({
         result[key] = convertIconStyle(designSettings.iconStyle);
         return;
       }
-      result[key] = designSettings[key];
+      result[DesignSettingsKeyMap[key] || key] = designSettings[key];
     });
   }
   if (paragraphFormat) {

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

@@ -1 +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":[]}
+{"version":3,"file":"useChaynsTheme.js","names":["getAvailableColorList","getColorFromPalette","hexToRgb255","ColorMode","useEffect","useMemo","useRef","useState","convertIconStyle","getHeadlineColorSelector","useDesignSettings","useParagraphFormat","DesignSettingsKeyMap","headerBarColor","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 DesignSettingsKeyMap: Partial<Record<keyof ChaynsDesignSettings, string>> = {\n    headerBarColor: 'header-bar',\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[DesignSettingsKeyMap[key as keyof ChaynsDesignSettings] || key] = designSettings[\n                key as keyof ChaynsDesignSettings\n            ] 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/multi-action-button/action-button/ActionButton.js

@@ -30,7 +30,6 @@ const ActionButton = ({
   const isPrimary = actionType === 'primary';
   const isSecondary = actionType === 'secondary';
   const actionColor = action.color ?? '#FFFFFF';
-  const labelKey = typeof action.label === 'string' || typeof action.label === 'number' ? action.label : actionType;
   return /*#__PURE__*/React.createElement(StyledActionButton, {
     disabled: isDisabled || action.isDisabled,
     $backgroundColor: backgroundColor,
@@ -56,10 +55,8 @@ const ActionButton = ({
     color: actionColor,
     size: height - 24
   }) : action.icon), /*#__PURE__*/React.createElement(AnimatePresence, {
-    initial: false,
-    mode: "wait"
+    initial: false
   }, showLabel && /*#__PURE__*/React.createElement(StyledLabelWrapper, {
-    key: labelKey,
     animate: {
       opacity: 1,
       width: 'auto',

package/lib/esm/components/multi-action-button/action-button/ActionButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActionButton.js","names":["AnimatePresence","React","Icon","StyledActionButton","StyledActionContent","StyledIconSlot","StyledLabelWrapper","StyledSecondaryLabel","LABEL_GAP","LABEL_TRANSITION","duration","ActionButton","action","actionType","backgroundColor","isCollapsed","isDisabled","isExpanded","isHidden","isShrunk","isSolo","onClick","onMouseEnter","onMouseLeave","showLabel","shouldUseContentWidth","height","isPrimary","isSecondary","actionColor","color","labelKey","label","createElement","disabled","$backgroundColor","$isCollapsed","$isExpanded","undefined","$isHidden","$isPrimary","$isSecondary","$isShrunk","$isSolo","$pulseColors","status","pulseColors","$height","$statusType","type","$shouldUseContentWidth","icon","icons","size","initial","mode","key","animate","opacity","width","marginLeft","exit","transition","style","displayName"],"sources":["../../../../../src/components/multi-action-button/action-button/ActionButton.tsx"],"sourcesContent":["import { AnimatePresence } from 'motion/react';\nimport React, { FC, MouseEvent } from 'react';\nimport Icon from '../../icon/Icon';\nimport {\n    StyledActionButton,\n    StyledActionContent,\n    StyledIconSlot,\n    StyledLabelWrapper,\n    StyledSecondaryLabel,\n} from './ActionButton.styles';\nimport type { MultiActionButtonAction } from '../MultiActionButton.types';\n\nconst LABEL_GAP = 6;\nconst LABEL_TRANSITION = { duration: 0.3 };\n\nexport type ActionButtonProps = {\n    action: MultiActionButtonAction;\n    actionType: 'primary' | 'secondary';\n    backgroundColor?: string;\n    isCollapsed: boolean;\n    isDisabled: boolean;\n    isExpanded?: boolean;\n    isHidden?: boolean;\n    isShrunk?: boolean;\n    isSolo?: boolean;\n    onClick?: (event: MouseEvent<HTMLButtonElement>) => void;\n    onMouseEnter?: () => void;\n    onMouseLeave?: () => void;\n    showLabel: boolean;\n    shouldUseContentWidth: boolean;\n    height: number;\n};\n\n/**\n * Shared action button UI used by both primary and secondary actions.\n * Keeps layout and animations consistent while isolating styling details.\n */\nconst ActionButton: FC<ActionButtonProps> = ({\n    action,\n    actionType,\n    backgroundColor,\n    isCollapsed,\n    isDisabled,\n    isExpanded,\n    isHidden,\n    isShrunk,\n    isSolo,\n    onClick,\n    onMouseEnter,\n    onMouseLeave,\n    showLabel,\n    shouldUseContentWidth,\n    height,\n}) => {\n    const isPrimary = actionType === 'primary';\n    const isSecondary = actionType === 'secondary';\n    const actionColor = action.color ?? '#FFFFFF';\n    \n    const labelKey =\n        typeof action.label === 'string' || typeof action.label === 'number'\n            ? action.label\n            : actionType;\n\n    return (\n        <StyledActionButton\n            disabled={isDisabled || action.isDisabled}\n            $backgroundColor={backgroundColor}\n            $isCollapsed={isCollapsed}\n            $isExpanded={isSecondary ? isExpanded : undefined}\n            $isHidden={isSecondary ? isHidden : undefined}\n            $isPrimary={isPrimary}\n            $isSecondary={isSecondary}\n            $isShrunk={isPrimary ? isShrunk : undefined}\n            $isSolo={isPrimary ? isSolo : undefined}\n            $pulseColors={action.status?.pulseColors}\n            $height={height}\n            $statusType={action.status?.type}\n            $shouldUseContentWidth={shouldUseContentWidth}\n            onClick={onClick}\n            onMouseEnter={onMouseEnter}\n            onMouseLeave={onMouseLeave}\n            type=\"button\"\n        >\n            <StyledActionContent>\n                <StyledIconSlot $height={height}>\n                    {typeof action.icon === 'string' ? (\n                        <Icon icons={[action.icon]} color={actionColor} size={height - 24} />\n                    ) : (\n                        action.icon\n                    )}\n                </StyledIconSlot>\n                <AnimatePresence initial={false} mode=\"wait\">\n                    {/* Animate width and margin to avoid layout jumps when labels mount/unmount. */}\n                    {showLabel && (\n                        <StyledLabelWrapper\n                            key={labelKey}\n                            animate={{ opacity: 1, width: 'auto', marginLeft: LABEL_GAP }}\n                            exit={{ opacity: 0, width: 0, marginLeft: 0 }}\n                            initial={{ opacity: 0, width: 0, marginLeft: 0 }}\n                            transition={LABEL_TRANSITION}\n                        >\n                            <StyledSecondaryLabel style={{ color: actionColor }}>\n                                {action.label}\n                            </StyledSecondaryLabel>\n                        </StyledLabelWrapper>\n                    )}\n                </AnimatePresence>\n            </StyledActionContent>\n        </StyledActionButton>\n    );\n};\n\nActionButton.displayName = 'ActionButton';\n\nexport default ActionButton;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"ActionButton.js","names":["AnimatePresence","React","Icon","StyledActionButton","StyledActionContent","StyledIconSlot","StyledLabelWrapper","StyledSecondaryLabel","LABEL_GAP","LABEL_TRANSITION","duration","ActionButton","action","actionType","backgroundColor","isCollapsed","isDisabled","isExpanded","isHidden","isShrunk","isSolo","onClick","onMouseEnter","onMouseLeave","showLabel","shouldUseContentWidth","height","isPrimary","isSecondary","actionColor","color","createElement","disabled","$backgroundColor","$isCollapsed","$isExpanded","undefined","$isHidden","$isPrimary","$isSecondary","$isShrunk","$isSolo","$pulseColors","status","pulseColors","$height","$statusType","type","$shouldUseContentWidth","icon","icons","size","initial","animate","opacity","width","marginLeft","exit","transition","style","label","displayName"],"sources":["../../../../../src/components/multi-action-button/action-button/ActionButton.tsx"],"sourcesContent":["import { AnimatePresence } from 'motion/react';\nimport React, { FC, MouseEvent } from 'react';\nimport Icon from '../../icon/Icon';\nimport {\n    StyledActionButton,\n    StyledActionContent,\n    StyledIconSlot,\n    StyledLabelWrapper,\n    StyledSecondaryLabel,\n} from './ActionButton.styles';\nimport type { MultiActionButtonAction } from '../MultiActionButton.types';\n\nconst LABEL_GAP = 6;\nconst LABEL_TRANSITION = { duration: 0.3 };\n\nexport type ActionButtonProps = {\n    action: MultiActionButtonAction;\n    actionType: 'primary' | 'secondary';\n    backgroundColor?: string;\n    isCollapsed: boolean;\n    isDisabled: boolean;\n    isExpanded?: boolean;\n    isHidden?: boolean;\n    isShrunk?: boolean;\n    isSolo?: boolean;\n    onClick?: (event: MouseEvent<HTMLButtonElement>) => void;\n    onMouseEnter?: () => void;\n    onMouseLeave?: () => void;\n    showLabel: boolean;\n    shouldUseContentWidth: boolean;\n    height: number;\n};\n\n/**\n * Shared action button UI used by both primary and secondary actions.\n * Keeps layout and animations consistent while isolating styling details.\n */\nconst ActionButton: FC<ActionButtonProps> = ({\n    action,\n    actionType,\n    backgroundColor,\n    isCollapsed,\n    isDisabled,\n    isExpanded,\n    isHidden,\n    isShrunk,\n    isSolo,\n    onClick,\n    onMouseEnter,\n    onMouseLeave,\n    showLabel,\n    shouldUseContentWidth,\n    height,\n}) => {\n    const isPrimary = actionType === 'primary';\n    const isSecondary = actionType === 'secondary';\n    const actionColor = action.color ?? '#FFFFFF';\n\n    return (\n        <StyledActionButton\n            disabled={isDisabled || action.isDisabled}\n            $backgroundColor={backgroundColor}\n            $isCollapsed={isCollapsed}\n            $isExpanded={isSecondary ? isExpanded : undefined}\n            $isHidden={isSecondary ? isHidden : undefined}\n            $isPrimary={isPrimary}\n            $isSecondary={isSecondary}\n            $isShrunk={isPrimary ? isShrunk : undefined}\n            $isSolo={isPrimary ? isSolo : undefined}\n            $pulseColors={action.status?.pulseColors}\n            $height={height}\n            $statusType={action.status?.type}\n            $shouldUseContentWidth={shouldUseContentWidth}\n            onClick={onClick}\n            onMouseEnter={onMouseEnter}\n            onMouseLeave={onMouseLeave}\n            type=\"button\"\n        >\n            <StyledActionContent>\n                <StyledIconSlot $height={height}>\n                    {typeof action.icon === 'string' ? (\n                        <Icon icons={[action.icon]} color={actionColor} size={height - 24} />\n                    ) : (\n                        action.icon\n                    )}\n                </StyledIconSlot>\n                <AnimatePresence initial={false}>\n                    {/* Animate width and margin to avoid layout jumps when labels mount/unmount. */}\n                    {showLabel && (\n                        <StyledLabelWrapper\n                            animate={{ opacity: 1, width: 'auto', marginLeft: LABEL_GAP }}\n                            exit={{ opacity: 0, width: 0, marginLeft: 0 }}\n                            initial={{ opacity: 0, width: 0, marginLeft: 0 }}\n                            transition={LABEL_TRANSITION}\n                        >\n                            <StyledSecondaryLabel style={{ color: actionColor }}>\n                                {action.label}\n                            </StyledSecondaryLabel>\n                        </StyledLabelWrapper>\n                    )}\n                </AnimatePresence>\n            </StyledActionContent>\n        </StyledActionButton>\n    );\n};\n\nActionButton.displayName = 'ActionButton';\n\nexport default ActionButton;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/verification-badge/VerificationBadge.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import { StyledVerificationBadge } from './VerificationBadge.styles';
 const VerificationBadge = () => /*#__PURE__*/React.createElement(StyledVerificationBadge, {
-  className: "vcid-check--blue"
-}, /*#__PURE__*/React.createElement("span", null), /*#__PURE__*/React.createElement("span", null), /*#__PURE__*/React.createElement("span", null));
+  className: "beta-chayns-verification-badge"
+}, /*#__PURE__*/React.createElement("span", null, '\ue903'), /*#__PURE__*/React.createElement("span", null, '\ue904'), /*#__PURE__*/React.createElement("span", null, '\ue905'));
 VerificationBadge.displayName = 'VerificationBadge';
 export default VerificationBadge;
 //# sourceMappingURL=VerificationBadge.js.map

package/lib/esm/components/verification-badge/VerificationBadge.js.map

@@ -1 +1 @@
-{"version":3,"file":"VerificationBadge.js","names":["React","StyledVerificationBadge","VerificationBadge","createElement","className","displayName"],"sources":["../../../../src/components/verification-badge/VerificationBadge.tsx"],"sourcesContent":["import React from 'react';\nimport { StyledVerificationBadge } from './VerificationBadge.styles';\n\nconst VerificationBadge = () => (\n    <StyledVerificationBadge className=\"vcid-check--blue\">\n        <span />\n        <span />\n        <span />\n    </StyledVerificationBadge>\n);\n\nVerificationBadge.displayName = 'VerificationBadge';\n\nexport default VerificationBadge;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,uBAAuB,QAAQ,4BAA4B;AAEpE,MAAMC,iBAAiB,GAAGA,CAAA,kBACtBF,KAAA,CAAAG,aAAA,CAACF,uBAAuB;EAACG,SAAS,EAAC;AAAkB,gBACjDJ,KAAA,CAAAG,aAAA,aAAO,CAAC,eACRH,KAAA,CAAAG,aAAA,aAAO,CAAC,eACRH,KAAA,CAAAG,aAAA,aAAO,CACc,CAC5B;AAEDD,iBAAiB,CAACG,WAAW,GAAG,mBAAmB;AAEnD,eAAeH,iBAAiB","ignoreList":[]}
+{"version":3,"file":"VerificationBadge.js","names":["React","StyledVerificationBadge","VerificationBadge","createElement","className","displayName"],"sources":["../../../../src/components/verification-badge/VerificationBadge.tsx"],"sourcesContent":["import React from 'react';\nimport { StyledVerificationBadge } from './VerificationBadge.styles';\n\nconst VerificationBadge = () => (\n    <StyledVerificationBadge className=\"beta-chayns-verification-badge\">\n        <span>{'\\ue903'}</span>\n        <span>{'\\ue904'}</span>\n        <span>{'\\ue905'}</span>\n    </StyledVerificationBadge>\n);\n\nVerificationBadge.displayName = 'VerificationBadge';\n\nexport default VerificationBadge;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,uBAAuB,QAAQ,4BAA4B;AAEpE,MAAMC,iBAAiB,GAAGA,CAAA,kBACtBF,KAAA,CAAAG,aAAA,CAACF,uBAAuB;EAACG,SAAS,EAAC;AAAgC,gBAC/DJ,KAAA,CAAAG,aAAA,eAAO,QAAe,CAAC,eACvBH,KAAA,CAAAG,aAAA,eAAO,QAAe,CAAC,eACvBH,KAAA,CAAAG,aAAA,eAAO,QAAe,CACD,CAC5B;AAEDD,iBAAiB,CAACG,WAAW,GAAG,mBAAmB;AAEnD,eAAeH,iBAAiB","ignoreList":[]}

package/lib/esm/components/verification-badge/VerificationBadge.styles.js

@@ -1,3 +1,39 @@
 import styled from 'styled-components';
-export const StyledVerificationBadge = styled.span``;
+export const StyledVerificationBadge = styled.span`
+    @font-face {
+        font-family: 'Verified-chaynsID';
+        src:
+            url(https://api.chayns-static.space/font-vcid/Verified-chaynsID.woff2) format('woff2'),
+            url(https://api.chayns-static.space/font-vcid/Verified-chaynsID.woff2) format('woff'),
+            url(https://api.chayns-static.space/font-vcid/Verified-chaynsID.woff2) format('woff'),
+            url(https://api.chayns-static.space/font-vcid/Verified-chaynsID.ttf) format('truetype'),
+            url(https://api.chayns-static.space/font-vcid/Verified-chaynsID.svg) format('svg');
+        font-weight: normal;
+        font-style: normal;
+        font-display: block;
+    }
+
+    /*noinspection CssNoGenericFontName*/
+    font-family: 'Verified-chaynsID' !important;
+    font-style: normal;
+    font-weight: normal;
+    font-variant: normal;
+    text-transform: none;
+    line-height: 1;
+    font-size: 0.8em;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+
+    margin-left: 0.2em;
+
+    & > :first-child {
+        color: #5890ff;
+    }
+
+    & > :nth-child(2),
+    & > :nth-child(3) {
+        margin-left: -1em;
+        color: #fff;
+    }
+`;
 //# sourceMappingURL=VerificationBadge.styles.js.map

package/lib/esm/components/verification-badge/VerificationBadge.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"VerificationBadge.styles.js","names":["styled","StyledVerificationBadge","span"],"sources":["../../../../src/components/verification-badge/VerificationBadge.styles.ts"],"sourcesContent":["import styled from 'styled-components';\n\nexport const StyledVerificationBadge = styled.span``;\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AAEtC,OAAO,MAAMC,uBAAuB,GAAGD,MAAM,CAACE,IAAI,EAAE","ignoreList":[]}
+{"version":3,"file":"VerificationBadge.styles.js","names":["styled","StyledVerificationBadge","span"],"sources":["../../../../src/components/verification-badge/VerificationBadge.styles.ts"],"sourcesContent":["import styled from 'styled-components';\n\nexport const StyledVerificationBadge = styled.span`\n    @font-face {\n        font-family: 'Verified-chaynsID';\n        src:\n            url(https://api.chayns-static.space/font-vcid/Verified-chaynsID.woff2) format('woff2'),\n            url(https://api.chayns-static.space/font-vcid/Verified-chaynsID.woff2) format('woff'),\n            url(https://api.chayns-static.space/font-vcid/Verified-chaynsID.woff2) format('woff'),\n            url(https://api.chayns-static.space/font-vcid/Verified-chaynsID.ttf) format('truetype'),\n            url(https://api.chayns-static.space/font-vcid/Verified-chaynsID.svg) format('svg');\n        font-weight: normal;\n        font-style: normal;\n        font-display: block;\n    }\n\n    /*noinspection CssNoGenericFontName*/\n    font-family: 'Verified-chaynsID' !important;\n    font-style: normal;\n    font-weight: normal;\n    font-variant: normal;\n    text-transform: none;\n    line-height: 1;\n    font-size: 0.8em;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n\n    margin-left: 0.2em;\n\n    & > :first-child {\n        color: #5890ff;\n    }\n\n    & > :nth-child(2),\n    & > :nth-child(3) {\n        margin-left: -1em;\n        color: #fff;\n    }\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AAEtC,OAAO,MAAMC,uBAAuB,GAAGD,MAAM,CAACE,IAAI;AAClD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@chayns-components/core",
-    "version": "5.0.2",
+    "version": "5.0.4",
     "description": "A set of beautiful React components for developing your own applications with chayns.",
     "sideEffects": false,
     "browserslist": [
@@ -86,5 +86,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "871adcebe1361aea7ce6d0583dc915c013e28451"
+    "gitHead": "dbf6a9280e3bb587e0518278e4302c500205e2dc"
 }