@citygross/components_v2 0.0.14 → 0.0.16

package/dist/components/Box/Box.css.vanilla.js

@@ -4,6 +4,6 @@ import './../../cssUtils/spacings.css.ts.vanilla.css';
 import './Box.css.ts.vanilla.css';
 import { createRuntimeFn } from '@vanilla-extract/recipes/createRuntimeFn';
 
-var BoxStyle = createRuntimeFn({ defaultClassName: "Box__inom6d0", variantClassNames: { backgroundColor: { primary: "color_backgroundColor_primary__13rr0b21b", secondary: "color_backgroundColor_secondary__13rr0b21c", brandYellow: "color_backgroundColor_brandYellow__13rr0b21d", brandBlue: "color_backgroundColor_brandBlue__13rr0b21e", brandPurple: "color_backgroundColor_brandPurple__13rr0b21f", brandPrio: "color_backgroundColor_brandPrio__13rr0b21g", yellowLighter: "color_backgroundColor_yellowLighter__13rr0b21h", yellowLight: "color_backgroundColor_yellowLight__13rr0b21i", blueLight: "color_backgroundColor_blueLight__13rr0b21j", blueLighter: "color_backgroundColor_blueLighter__13rr0b21k", blueMedium: "color_backgroundColor_blueMedium__13rr0b21l", greenLight: "color_backgroundColor_greenLight__13rr0b21m", greenMedium: "color_backgroundColor_greenMedium__13rr0b21n", redLight: "color_backgroundColor_redLight__13rr0b21o", recipeVego: "color_backgroundColor_recipeVego__13rr0b21p", recipeLactose: "color_backgroundColor_recipeLactose__13rr0b21q", recipeGluten: "color_backgroundColor_recipeGluten__13rr0b21r", link: "color_backgroundColor_link__13rr0b21s", white: "color_backgroundColor_white__13rr0b21t", black: "color_backgroundColor_black__13rr0b21u", lightest: "color_backgroundColor_lightest__13rr0b21v", lighter: "color_backgroundColor_lighter__13rr0b21w", light: "color_backgroundColor_light__13rr0b21x", medium: "color_backgroundColor_medium__13rr0b21y", mediumDark: "color_backgroundColor_mediumDark__13rr0b21z", dark: "color_backgroundColor_dark__13rr0b220", darker: "color_backgroundColor_darker__13rr0b221", darkest: "color_backgroundColor_darkest__13rr0b222", buttonGray: "color_backgroundColor_buttonGray__13rr0b223", disabledGray: "color_backgroundColor_disabledGray__13rr0b224", disabledDarkGray: "color_backgroundColor_disabledDarkGray__13rr0b225", placeholder: "color_backgroundColor_placeholder__13rr0b226", border: "color_backgroundColor_border__13rr0b227", boxShadow: "color_backgroundColor_boxShadow__13rr0b228", boxShadowActive: "color_backgroundColor_boxShadowActive__13rr0b229", alertRed: "color_backgroundColor_alertRed__13rr0b22a", alertBlue: "color_backgroundColor_alertBlue__13rr0b22b", alertGreen: "color_backgroundColor_alertGreen__13rr0b22c", darkOverlay: "color_backgroundColor_darkOverlay__13rr0b22d", transparent: "color_backgroundColor_transparent__13rr0b22e", brandBlueHover: "color_backgroundColor_brandBlueHover__13rr0b22f", brandYellowHover: "color_backgroundColor_brandYellowHover__13rr0b22g", brandPrioHover: "color_backgroundColor_brandPrioHover__13rr0b22h", brandBlueActive: "color_backgroundColor_brandBlueActive__13rr0b22i", brandYellowActive: "color_backgroundColor_brandYellowActive__13rr0b22j", brandPrioActive: "color_backgroundColor_brandPrioActive__13rr0b22k", none: "color_backgroundColor_none__13rr0b22l" }, hoverBackgroundColor: { primary: "color_hoverBackgroundColor_primary__13rr0b23x", secondary: "color_hoverBackgroundColor_secondary__13rr0b23y", brandYellow: "color_hoverBackgroundColor_brandYellow__13rr0b23z", brandBlue: "color_hoverBackgroundColor_brandBlue__13rr0b240", brandPurple: "color_hoverBackgroundColor_brandPurple__13rr0b241", brandPrio: "color_hoverBackgroundColor_brandPrio__13rr0b242", yellowLighter: "color_hoverBackgroundColor_yellowLighter__13rr0b243", yellowLight: "color_hoverBackgroundColor_yellowLight__13rr0b244", blueLight: "color_hoverBackgroundColor_blueLight__13rr0b245", blueLighter: "color_hoverBackgroundColor_blueLighter__13rr0b246", blueMedium: "color_hoverBackgroundColor_blueMedium__13rr0b247", greenLight: "color_hoverBackgroundColor_greenLight__13rr0b248", greenMedium: "color_hoverBackgroundColor_greenMedium__13rr0b249", redLight: "color_hoverBackgroundColor_redLight__13rr0b24a", recipeVego: "color_hoverBackgroundColor_recipeVego__13rr0b24b", recipeLactose: "color_hoverBackgroundColor_recipeLactose__13rr0b24c", recipeGluten: "color_hoverBackgroundColor_recipeGluten__13rr0b24d", link: "color_hoverBackgroundColor_link__13rr0b24e", white: "color_hoverBackgroundColor_white__13rr0b24f", black: "color_hoverBackgroundColor_black__13rr0b24g", lightest: "color_hoverBackgroundColor_lightest__13rr0b24h", lighter: "color_hoverBackgroundColor_lighter__13rr0b24i", light: "color_hoverBackgroundColor_light__13rr0b24j", medium: "color_hoverBackgroundColor_medium__13rr0b24k", mediumDark: "color_hoverBackgroundColor_mediumDark__13rr0b24l", dark: "color_hoverBackgroundColor_dark__13rr0b24m", darker: "color_hoverBackgroundColor_darker__13rr0b24n", darkest: "color_hoverBackgroundColor_darkest__13rr0b24o", buttonGray: "color_hoverBackgroundColor_buttonGray__13rr0b24p", disabledGray: "color_hoverBackgroundColor_disabledGray__13rr0b24q", disabledDarkGray: "color_hoverBackgroundColor_disabledDarkGray__13rr0b24r", placeholder: "color_hoverBackgroundColor_placeholder__13rr0b24s", border: "color_hoverBackgroundColor_border__13rr0b24t", boxShadow: "color_hoverBackgroundColor_boxShadow__13rr0b24u", boxShadowActive: "color_hoverBackgroundColor_boxShadowActive__13rr0b24v", alertRed: "color_hoverBackgroundColor_alertRed__13rr0b24w", alertBlue: "color_hoverBackgroundColor_alertBlue__13rr0b24x", alertGreen: "color_hoverBackgroundColor_alertGreen__13rr0b24y", darkOverlay: "color_hoverBackgroundColor_darkOverlay__13rr0b24z", transparent: "color_hoverBackgroundColor_transparent__13rr0b250", brandBlueHover: "color_hoverBackgroundColor_brandBlueHover__13rr0b251", brandYellowHover: "color_hoverBackgroundColor_brandYellowHover__13rr0b252", brandPrioHover: "color_hoverBackgroundColor_brandPrioHover__13rr0b253", brandBlueActive: "color_hoverBackgroundColor_brandBlueActive__13rr0b254", brandYellowActive: "color_hoverBackgroundColor_brandYellowActive__13rr0b255", brandPrioActive: "color_hoverBackgroundColor_brandPrioActive__13rr0b256", none: "color_hoverBackgroundColor_none__13rr0b257" }, borderColor: { primary: "border_borderColor_primary__c3f0gf0", secondary: "border_borderColor_secondary__c3f0gf1", brandYellow: "border_borderColor_brandYellow__c3f0gf2", brandBlue: "border_borderColor_brandBlue__c3f0gf3", brandPurple: "border_borderColor_brandPurple__c3f0gf4", brandPrio: "border_borderColor_brandPrio__c3f0gf5", yellowLighter: "border_borderColor_yellowLighter__c3f0gf6", yellowLight: "border_borderColor_yellowLight__c3f0gf7", blueLight: "border_borderColor_blueLight__c3f0gf8", blueLighter: "border_borderColor_blueLighter__c3f0gf9", blueMedium: "border_borderColor_blueMedium__c3f0gfa", greenLight: "border_borderColor_greenLight__c3f0gfb", greenMedium: "border_borderColor_greenMedium__c3f0gfc", redLight: "border_borderColor_redLight__c3f0gfd", recipeVego: "border_borderColor_recipeVego__c3f0gfe", recipeLactose: "border_borderColor_recipeLactose__c3f0gff", recipeGluten: "border_borderColor_recipeGluten__c3f0gfg", link: "border_borderColor_link__c3f0gfh", white: "border_borderColor_white__c3f0gfi", black: "border_borderColor_black__c3f0gfj", lightest: "border_borderColor_lightest__c3f0gfk", lighter: "border_borderColor_lighter__c3f0gfl", light: "border_borderColor_light__c3f0gfm", medium: "border_borderColor_medium__c3f0gfn", mediumDark: "border_borderColor_mediumDark__c3f0gfo", dark: "border_borderColor_dark__c3f0gfp", darker: "border_borderColor_darker__c3f0gfq", darkest: "border_borderColor_darkest__c3f0gfr", buttonGray: "border_borderColor_buttonGray__c3f0gfs", disabledGray: "border_borderColor_disabledGray__c3f0gft", disabledDarkGray: "border_borderColor_disabledDarkGray__c3f0gfu", placeholder: "border_borderColor_placeholder__c3f0gfv", border: "border_borderColor_border__c3f0gfw", boxShadow: "border_borderColor_boxShadow__c3f0gfx", boxShadowActive: "border_borderColor_boxShadowActive__c3f0gfy", alertRed: "border_borderColor_alertRed__c3f0gfz", alertBlue: "border_borderColor_alertBlue__c3f0gf10", alertGreen: "border_borderColor_alertGreen__c3f0gf11", darkOverlay: "border_borderColor_darkOverlay__c3f0gf12", transparent: "border_borderColor_transparent__c3f0gf13", brandBlueHover: "border_borderColor_brandBlueHover__c3f0gf14", brandYellowHover: "border_borderColor_brandYellowHover__c3f0gf15", brandPrioHover: "border_borderColor_brandPrioHover__c3f0gf16", brandBlueActive: "border_borderColor_brandBlueActive__c3f0gf17", brandYellowActive: "border_borderColor_brandYellowActive__c3f0gf18", brandPrioActive: "border_borderColor_brandPrioActive__c3f0gf19", none: "border_borderColor_none__c3f0gf1a" }, borderRadius: { none: "border_borderRadius_none__c3f0gf1b", extraSmall: "border_borderRadius_extraSmall__c3f0gf1c", small: "border_borderRadius_small__c3f0gf1d", "default": "border_borderRadius_default__c3f0gf1e", big: "border_borderRadius_big__c3f0gf1f", bigger: "border_borderRadius_bigger__c3f0gf1g", large: "border_borderRadius_large__c3f0gf1h", round: "border_borderRadius_round__c3f0gf1i" }, margin: { xxxs: "spacings_margin_xxxs__e0awtz0", xxs: "spacings_margin_xxs__e0awtz1", xxs2: "spacings_margin_xxs2__e0awtz2", xs: "spacings_margin_xs__e0awtz3", xs2: "spacings_margin_xs2__e0awtz4", sm: "spacings_margin_sm__e0awtz5", sm2: "spacings_margin_sm2__e0awtz6", md: "spacings_margin_md__e0awtz7", lg: "spacings_margin_lg__e0awtz8", xl: "spacings_margin_xl__e0awtz9", xxl: "spacings_margin_xxl__e0awtza", false: "spacings_margin_false__e0awtzb" }, marginHorizontal: { xxxs: "spacings_marginHorizontal_xxxs__e0awtzc", xxs: "spacings_marginHorizontal_xxs__e0awtzd", xxs2: "spacings_marginHorizontal_xxs2__e0awtze", xs: "spacings_marginHorizontal_xs__e0awtzf", xs2: "spacings_marginHorizontal_xs2__e0awtzg", sm: "spacings_marginHorizontal_sm__e0awtzh", sm2: "spacings_marginHorizontal_sm2__e0awtzi", md: "spacings_marginHorizontal_md__e0awtzj", lg: "spacings_marginHorizontal_lg__e0awtzk", xl: "spacings_marginHorizontal_xl__e0awtzl", xxl: "spacings_marginHorizontal_xxl__e0awtzm", false: "spacings_marginHorizontal_false__e0awtzn" }, marginVertical: { xxxs: "spacings_marginVertical_xxxs__e0awtzo", xxs: "spacings_marginVertical_xxs__e0awtzp", xxs2: "spacings_marginVertical_xxs2__e0awtzq", xs: "spacings_marginVertical_xs__e0awtzr", xs2: "spacings_marginVertical_xs2__e0awtzs", sm: "spacings_marginVertical_sm__e0awtzt", sm2: "spacings_marginVertical_sm2__e0awtzu", md: "spacings_marginVertical_md__e0awtzv", lg: "spacings_marginVertical_lg__e0awtzw", xl: "spacings_marginVertical_xl__e0awtzx", xxl: "spacings_marginVertical_xxl__e0awtzy", false: "spacings_marginVertical_false__e0awtzz" }, padding: { xxxs: "spacings_padding_xxxs__e0awtz1c", xxs: "spacings_padding_xxs__e0awtz1d", xxs2: "spacings_padding_xxs2__e0awtz1e", xs: "spacings_padding_xs__e0awtz1f", xs2: "spacings_padding_xs2__e0awtz1g", sm: "spacings_padding_sm__e0awtz1h", sm2: "spacings_padding_sm2__e0awtz1i", md: "spacings_padding_md__e0awtz1j", lg: "spacings_padding_lg__e0awtz1k", xl: "spacings_padding_xl__e0awtz1l", xxl: "spacings_padding_xxl__e0awtz1m", false: "spacings_padding_false__e0awtz1n" }, paddingHorizontal: { xxxs: "spacings_paddingHorizontal_xxxs__e0awtz1o", xxs: "spacings_paddingHorizontal_xxs__e0awtz1p", xxs2: "spacings_paddingHorizontal_xxs2__e0awtz1q", xs: "spacings_paddingHorizontal_xs__e0awtz1r", xs2: "spacings_paddingHorizontal_xs2__e0awtz1s", sm: "spacings_paddingHorizontal_sm__e0awtz1t", sm2: "spacings_paddingHorizontal_sm2__e0awtz1u", md: "spacings_paddingHorizontal_md__e0awtz1v", lg: "spacings_paddingHorizontal_lg__e0awtz1w", xl: "spacings_paddingHorizontal_xl__e0awtz1x", xxl: "spacings_paddingHorizontal_xxl__e0awtz1y", false: "spacings_paddingHorizontal_false__e0awtz1z" }, paddingVertical: { xxxs: "spacings_paddingVertical_xxxs__e0awtz20", xxs: "spacings_paddingVertical_xxs__e0awtz21", xxs2: "spacings_paddingVertical_xxs2__e0awtz22", xs: "spacings_paddingVertical_xs__e0awtz23", xs2: "spacings_paddingVertical_xs2__e0awtz24", sm: "spacings_paddingVertical_sm__e0awtz25", sm2: "spacings_paddingVertical_sm2__e0awtz26", md: "spacings_paddingVertical_md__e0awtz27", lg: "spacings_paddingVertical_lg__e0awtz28", xl: "spacings_paddingVertical_xl__e0awtz29", xxl: "spacings_paddingVertical_xxl__e0awtz2a", false: "spacings_paddingVertical_false__e0awtz2b" }, border: { true: "Box_BoxStyle_border_true__inom6d66" } }, defaultVariants: { backgroundColor: "white", hoverBackgroundColor: "transparent", borderColor: "transparent", borderRadius: "none", padding: "sm" }, compoundVariants: [] });
+var BoxStyle = createRuntimeFn({ defaultClassName: "Box__inom6d0", variantClassNames: { backgroundColor: { primary: "color_backgroundColor_primary__13rr0b21b", secondary: "color_backgroundColor_secondary__13rr0b21c", brandYellow: "color_backgroundColor_brandYellow__13rr0b21d", brandBlue: "color_backgroundColor_brandBlue__13rr0b21e", brandPurple: "color_backgroundColor_brandPurple__13rr0b21f", brandPrio: "color_backgroundColor_brandPrio__13rr0b21g", yellowLighter: "color_backgroundColor_yellowLighter__13rr0b21h", yellowLight: "color_backgroundColor_yellowLight__13rr0b21i", blueLight: "color_backgroundColor_blueLight__13rr0b21j", blueLighter: "color_backgroundColor_blueLighter__13rr0b21k", blueMedium: "color_backgroundColor_blueMedium__13rr0b21l", greenLight: "color_backgroundColor_greenLight__13rr0b21m", greenMedium: "color_backgroundColor_greenMedium__13rr0b21n", redLight: "color_backgroundColor_redLight__13rr0b21o", recipeVego: "color_backgroundColor_recipeVego__13rr0b21p", recipeLactose: "color_backgroundColor_recipeLactose__13rr0b21q", recipeGluten: "color_backgroundColor_recipeGluten__13rr0b21r", link: "color_backgroundColor_link__13rr0b21s", white: "color_backgroundColor_white__13rr0b21t", black: "color_backgroundColor_black__13rr0b21u", lightest: "color_backgroundColor_lightest__13rr0b21v", lighter: "color_backgroundColor_lighter__13rr0b21w", light: "color_backgroundColor_light__13rr0b21x", medium: "color_backgroundColor_medium__13rr0b21y", mediumDark: "color_backgroundColor_mediumDark__13rr0b21z", dark: "color_backgroundColor_dark__13rr0b220", darker: "color_backgroundColor_darker__13rr0b221", darkest: "color_backgroundColor_darkest__13rr0b222", buttonGray: "color_backgroundColor_buttonGray__13rr0b223", disabledGray: "color_backgroundColor_disabledGray__13rr0b224", disabledDarkGray: "color_backgroundColor_disabledDarkGray__13rr0b225", placeholder: "color_backgroundColor_placeholder__13rr0b226", border: "color_backgroundColor_border__13rr0b227", boxShadow: "color_backgroundColor_boxShadow__13rr0b228", boxShadowActive: "color_backgroundColor_boxShadowActive__13rr0b229", alertRed: "color_backgroundColor_alertRed__13rr0b22a", alertBlue: "color_backgroundColor_alertBlue__13rr0b22b", alertGreen: "color_backgroundColor_alertGreen__13rr0b22c", darkOverlay: "color_backgroundColor_darkOverlay__13rr0b22d", transparent: "color_backgroundColor_transparent__13rr0b22e", brandBlueHover: "color_backgroundColor_brandBlueHover__13rr0b22f", brandYellowHover: "color_backgroundColor_brandYellowHover__13rr0b22g", brandPrioHover: "color_backgroundColor_brandPrioHover__13rr0b22h", brandBlueActive: "color_backgroundColor_brandBlueActive__13rr0b22i", brandYellowActive: "color_backgroundColor_brandYellowActive__13rr0b22j", brandPrioActive: "color_backgroundColor_brandPrioActive__13rr0b22k", none: "color_backgroundColor_none__13rr0b22l" }, hoverBackgroundColor: { primary: "color_hoverBackgroundColor_primary__13rr0b23x", secondary: "color_hoverBackgroundColor_secondary__13rr0b23y", brandYellow: "color_hoverBackgroundColor_brandYellow__13rr0b23z", brandBlue: "color_hoverBackgroundColor_brandBlue__13rr0b240", brandPurple: "color_hoverBackgroundColor_brandPurple__13rr0b241", brandPrio: "color_hoverBackgroundColor_brandPrio__13rr0b242", yellowLighter: "color_hoverBackgroundColor_yellowLighter__13rr0b243", yellowLight: "color_hoverBackgroundColor_yellowLight__13rr0b244", blueLight: "color_hoverBackgroundColor_blueLight__13rr0b245", blueLighter: "color_hoverBackgroundColor_blueLighter__13rr0b246", blueMedium: "color_hoverBackgroundColor_blueMedium__13rr0b247", greenLight: "color_hoverBackgroundColor_greenLight__13rr0b248", greenMedium: "color_hoverBackgroundColor_greenMedium__13rr0b249", redLight: "color_hoverBackgroundColor_redLight__13rr0b24a", recipeVego: "color_hoverBackgroundColor_recipeVego__13rr0b24b", recipeLactose: "color_hoverBackgroundColor_recipeLactose__13rr0b24c", recipeGluten: "color_hoverBackgroundColor_recipeGluten__13rr0b24d", link: "color_hoverBackgroundColor_link__13rr0b24e", white: "color_hoverBackgroundColor_white__13rr0b24f", black: "color_hoverBackgroundColor_black__13rr0b24g", lightest: "color_hoverBackgroundColor_lightest__13rr0b24h", lighter: "color_hoverBackgroundColor_lighter__13rr0b24i", light: "color_hoverBackgroundColor_light__13rr0b24j", medium: "color_hoverBackgroundColor_medium__13rr0b24k", mediumDark: "color_hoverBackgroundColor_mediumDark__13rr0b24l", dark: "color_hoverBackgroundColor_dark__13rr0b24m", darker: "color_hoverBackgroundColor_darker__13rr0b24n", darkest: "color_hoverBackgroundColor_darkest__13rr0b24o", buttonGray: "color_hoverBackgroundColor_buttonGray__13rr0b24p", disabledGray: "color_hoverBackgroundColor_disabledGray__13rr0b24q", disabledDarkGray: "color_hoverBackgroundColor_disabledDarkGray__13rr0b24r", placeholder: "color_hoverBackgroundColor_placeholder__13rr0b24s", border: "color_hoverBackgroundColor_border__13rr0b24t", boxShadow: "color_hoverBackgroundColor_boxShadow__13rr0b24u", boxShadowActive: "color_hoverBackgroundColor_boxShadowActive__13rr0b24v", alertRed: "color_hoverBackgroundColor_alertRed__13rr0b24w", alertBlue: "color_hoverBackgroundColor_alertBlue__13rr0b24x", alertGreen: "color_hoverBackgroundColor_alertGreen__13rr0b24y", darkOverlay: "color_hoverBackgroundColor_darkOverlay__13rr0b24z", transparent: "color_hoverBackgroundColor_transparent__13rr0b250", brandBlueHover: "color_hoverBackgroundColor_brandBlueHover__13rr0b251", brandYellowHover: "color_hoverBackgroundColor_brandYellowHover__13rr0b252", brandPrioHover: "color_hoverBackgroundColor_brandPrioHover__13rr0b253", brandBlueActive: "color_hoverBackgroundColor_brandBlueActive__13rr0b254", brandYellowActive: "color_hoverBackgroundColor_brandYellowActive__13rr0b255", brandPrioActive: "color_hoverBackgroundColor_brandPrioActive__13rr0b256", none: "color_hoverBackgroundColor_none__13rr0b257" }, borderColor: { primary: "border_borderColor_primary__c3f0gf0", secondary: "border_borderColor_secondary__c3f0gf1", brandYellow: "border_borderColor_brandYellow__c3f0gf2", brandBlue: "border_borderColor_brandBlue__c3f0gf3", brandPurple: "border_borderColor_brandPurple__c3f0gf4", brandPrio: "border_borderColor_brandPrio__c3f0gf5", yellowLighter: "border_borderColor_yellowLighter__c3f0gf6", yellowLight: "border_borderColor_yellowLight__c3f0gf7", blueLight: "border_borderColor_blueLight__c3f0gf8", blueLighter: "border_borderColor_blueLighter__c3f0gf9", blueMedium: "border_borderColor_blueMedium__c3f0gfa", greenLight: "border_borderColor_greenLight__c3f0gfb", greenMedium: "border_borderColor_greenMedium__c3f0gfc", redLight: "border_borderColor_redLight__c3f0gfd", recipeVego: "border_borderColor_recipeVego__c3f0gfe", recipeLactose: "border_borderColor_recipeLactose__c3f0gff", recipeGluten: "border_borderColor_recipeGluten__c3f0gfg", link: "border_borderColor_link__c3f0gfh", white: "border_borderColor_white__c3f0gfi", black: "border_borderColor_black__c3f0gfj", lightest: "border_borderColor_lightest__c3f0gfk", lighter: "border_borderColor_lighter__c3f0gfl", light: "border_borderColor_light__c3f0gfm", medium: "border_borderColor_medium__c3f0gfn", mediumDark: "border_borderColor_mediumDark__c3f0gfo", dark: "border_borderColor_dark__c3f0gfp", darker: "border_borderColor_darker__c3f0gfq", darkest: "border_borderColor_darkest__c3f0gfr", buttonGray: "border_borderColor_buttonGray__c3f0gfs", disabledGray: "border_borderColor_disabledGray__c3f0gft", disabledDarkGray: "border_borderColor_disabledDarkGray__c3f0gfu", placeholder: "border_borderColor_placeholder__c3f0gfv", border: "border_borderColor_border__c3f0gfw", boxShadow: "border_borderColor_boxShadow__c3f0gfx", boxShadowActive: "border_borderColor_boxShadowActive__c3f0gfy", alertRed: "border_borderColor_alertRed__c3f0gfz", alertBlue: "border_borderColor_alertBlue__c3f0gf10", alertGreen: "border_borderColor_alertGreen__c3f0gf11", darkOverlay: "border_borderColor_darkOverlay__c3f0gf12", transparent: "border_borderColor_transparent__c3f0gf13", brandBlueHover: "border_borderColor_brandBlueHover__c3f0gf14", brandYellowHover: "border_borderColor_brandYellowHover__c3f0gf15", brandPrioHover: "border_borderColor_brandPrioHover__c3f0gf16", brandBlueActive: "border_borderColor_brandBlueActive__c3f0gf17", brandYellowActive: "border_borderColor_brandYellowActive__c3f0gf18", brandPrioActive: "border_borderColor_brandPrioActive__c3f0gf19", none: "border_borderColor_none__c3f0gf1a" }, borderRadius: { none: "border_borderRadius_none__c3f0gf1b", extraSmall: "border_borderRadius_extraSmall__c3f0gf1c", small: "border_borderRadius_small__c3f0gf1d", "default": "border_borderRadius_default__c3f0gf1e", big: "border_borderRadius_big__c3f0gf1f", bigger: "border_borderRadius_bigger__c3f0gf1g", large: "border_borderRadius_large__c3f0gf1h", round: "border_borderRadius_round__c3f0gf1i" }, margin: { xxxs: "spacings_margin_xxxs__e0awtz0", xxs: "spacings_margin_xxs__e0awtz1", xxs2: "spacings_margin_xxs2__e0awtz2", xs: "spacings_margin_xs__e0awtz3", xs2: "spacings_margin_xs2__e0awtz4", sm: "spacings_margin_sm__e0awtz5", sm2: "spacings_margin_sm2__e0awtz6", md: "spacings_margin_md__e0awtz7", lg: "spacings_margin_lg__e0awtz8", xl: "spacings_margin_xl__e0awtz9", xxl: "spacings_margin_xxl__e0awtza", false: "spacings_margin_false__e0awtzb" }, marginHorizontal: { xxxs: "spacings_marginHorizontal_xxxs__e0awtzc", xxs: "spacings_marginHorizontal_xxs__e0awtzd", xxs2: "spacings_marginHorizontal_xxs2__e0awtze", xs: "spacings_marginHorizontal_xs__e0awtzf", xs2: "spacings_marginHorizontal_xs2__e0awtzg", sm: "spacings_marginHorizontal_sm__e0awtzh", sm2: "spacings_marginHorizontal_sm2__e0awtzi", md: "spacings_marginHorizontal_md__e0awtzj", lg: "spacings_marginHorizontal_lg__e0awtzk", xl: "spacings_marginHorizontal_xl__e0awtzl", xxl: "spacings_marginHorizontal_xxl__e0awtzm", false: "spacings_marginHorizontal_false__e0awtzn" }, marginVertical: { xxxs: "spacings_marginVertical_xxxs__e0awtzo", xxs: "spacings_marginVertical_xxs__e0awtzp", xxs2: "spacings_marginVertical_xxs2__e0awtzq", xs: "spacings_marginVertical_xs__e0awtzr", xs2: "spacings_marginVertical_xs2__e0awtzs", sm: "spacings_marginVertical_sm__e0awtzt", sm2: "spacings_marginVertical_sm2__e0awtzu", md: "spacings_marginVertical_md__e0awtzv", lg: "spacings_marginVertical_lg__e0awtzw", xl: "spacings_marginVertical_xl__e0awtzx", xxl: "spacings_marginVertical_xxl__e0awtzy", false: "spacings_marginVertical_false__e0awtzz" }, padding: { xxxs: "spacings_padding_xxxs__e0awtz1c", xxs: "spacings_padding_xxs__e0awtz1d", xxs2: "spacings_padding_xxs2__e0awtz1e", xs: "spacings_padding_xs__e0awtz1f", xs2: "spacings_padding_xs2__e0awtz1g", sm: "spacings_padding_sm__e0awtz1h", sm2: "spacings_padding_sm2__e0awtz1i", md: "spacings_padding_md__e0awtz1j", lg: "spacings_padding_lg__e0awtz1k", xl: "spacings_padding_xl__e0awtz1l", xxl: "spacings_padding_xxl__e0awtz1m", false: "spacings_padding_false__e0awtz1n" }, paddingHorizontal: { xxxs: "spacings_paddingHorizontal_xxxs__e0awtz1o", xxs: "spacings_paddingHorizontal_xxs__e0awtz1p", xxs2: "spacings_paddingHorizontal_xxs2__e0awtz1q", xs: "spacings_paddingHorizontal_xs__e0awtz1r", xs2: "spacings_paddingHorizontal_xs2__e0awtz1s", sm: "spacings_paddingHorizontal_sm__e0awtz1t", sm2: "spacings_paddingHorizontal_sm2__e0awtz1u", md: "spacings_paddingHorizontal_md__e0awtz1v", lg: "spacings_paddingHorizontal_lg__e0awtz1w", xl: "spacings_paddingHorizontal_xl__e0awtz1x", xxl: "spacings_paddingHorizontal_xxl__e0awtz1y", false: "spacings_paddingHorizontal_false__e0awtz1z" }, paddingVertical: { xxxs: "spacings_paddingVertical_xxxs__e0awtz20", xxs: "spacings_paddingVertical_xxs__e0awtz21", xxs2: "spacings_paddingVertical_xxs2__e0awtz22", xs: "spacings_paddingVertical_xs__e0awtz23", xs2: "spacings_paddingVertical_xs2__e0awtz24", sm: "spacings_paddingVertical_sm__e0awtz25", sm2: "spacings_paddingVertical_sm2__e0awtz26", md: "spacings_paddingVertical_md__e0awtz27", lg: "spacings_paddingVertical_lg__e0awtz28", xl: "spacings_paddingVertical_xl__e0awtz29", xxl: "spacings_paddingVertical_xxl__e0awtz2a", false: "spacings_paddingVertical_false__e0awtz2b" }, border: { true: "Box_BoxStyle_border_true__inom6d66" } }, defaultVariants: { backgroundColor: "white", borderColor: "transparent", borderRadius: "none", padding: "sm" }, compoundVariants: [] });
 
 export { BoxStyle };

package/dist/components/Button/Button.css.ts.vanilla.css

@@ -0,0 +1,142 @@
+.Button_buttonBase__fe4m9p0 {
+  outline: none;
+  border: none;
+}
+.Button_buttonBase__fe4m9p0:disabled {
+  color: #FFFFFF;
+  background-color: #E8E8E8;
+  cursor: default;
+}
+.Button_buttonBase__fe4m9p0:focus-visible:not(:hover) {
+  outline: none;
+  box-shadow: 0 0 0 2px #fff,0 0 0 4px #000,0 0 0 6px #fff;
+  transition: all 0.1s ease-in-out;
+}
+.Button_buttonVariant_primary__fe4m9p1 {
+  background-color: #0069AE;
+  color: #FFFFFF;
+}
+.Button_buttonVariant_primary__fe4m9p1:hover:not(:disabled) {
+  background-color: #005C99;
+}
+.Button_buttonVariant_primary__fe4m9p1:active:not(:disabled) {
+  background-color: #004D80;
+}
+.Button_buttonVariant_secondary__fe4m9p2 {
+  background-color: #FFFFFF;
+  color: #333333;
+  border: 1px solid #B8B8B8;
+}
+.Button_buttonVariant_secondary__fe4m9p2:hover:not(:disabled) {
+  background-color: #F7F7F7;
+}
+.Button_buttonVariant_secondary__fe4m9p2:active:not(:disabled) {
+  background-color: #F1F1F1;
+}
+.Button_buttonVariant_secondary__fe4m9p2:disabled {
+  color: #B8B8B8;
+}
+.Button_buttonVariant_ghost__fe4m9p3 {
+  background-color: #FFFFFF;
+  color: #333333;
+}
+.Button_buttonVariant_ghost__fe4m9p3:hover:not(:disabled) {
+  background-color: #F7F7F7;
+}
+.Button_buttonVariant_ghost__fe4m9p3:active:not(:disabled) {
+  background-color: #F1F1F1;
+}
+.Button_buttonVariant_ghost__fe4m9p3:disabled {
+  color: #B8B8B8;
+}
+.Button_buttonVariant_tertiary__fe4m9p4 {
+  background-color: #FFE522;
+  color: #333333;
+}
+.Button_buttonVariant_tertiary__fe4m9p4:hover:not(:disabled) {
+  background-color: #F5D800;
+}
+.Button_buttonVariant_tertiary__fe4m9p4:active:not(:disabled) {
+  background-color: #DBC100;
+}
+.Button_buttonVariant_prio__fe4m9p5 {
+  background-color: #A71680;
+  color: #FFFFFF;
+}
+.Button_buttonVariant_prio__fe4m9p5:hover:not(:disabled) {
+  background-color: #90136F;
+}
+.Button_buttonVariant_prio__fe4m9p5:active:not(:disabled) {
+  background-color: #7A105E;
+}
+.Button_buttonFontSize_small__fe4m9p6 {
+  font-size: 13px;
+}
+.Button_buttonFontSize_default__fe4m9p7 {
+  font-size: 15px;
+}
+.Button_buttonPadding_small__fe4m9p8 {
+  padding: 6px 8px;
+}
+.Button_buttonPadding_medium__fe4m9p9 {
+  padding: 8px 12px;
+}
+.Button_buttonPadding_large__fe4m9pa {
+  padding: 12px 16px;
+}
+.Button_buttonPadding_icon__fe4m9pb {
+  height: 32px;
+  width: 32px;
+  display: grid;
+  place-content: center;
+}
+.Button_buttonShadow_none__fe4m9pc {
+  box-shadow: none;
+}
+.Button_buttonShadow_small__fe4m9pd {
+  box-shadow: inset 0px -1px 0px rgba(0, 0, 0, 0.15);
+}
+.Button_buttonShadow_default__fe4m9pe {
+  box-shadow: inset 0px -2px 0px rgba(0, 0, 0, 0.15);
+}
+.Button_buttonRadius_round__fe4m9pf {
+  border-radius: 100px;
+  box-shadow: none;
+}
+.Button_buttonRadius_default__fe4m9pg {
+  border-radius: 4px;
+}
+.Button_button__fe4m9ph {
+  cursor: pointer;
+  position: relative;
+}
+.Button_button__fe4m9ph[data-loading="true"] {
+  background-color: #F7F7F7;
+}
+.Button_button_fullWidth_true__fe4m9pi {
+  width: 100%;
+}
+.Button_buttonContent__fe4m9px {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  flex-direction: row;
+  white-space: nowrap;
+  min-width: max-content;
+}
+.Button_buttonContent_flexReverse_true__fe4m9p10 {
+  flex-direction: row-reverse;
+}
+.Button_buttonContent_loading_true__fe4m9p11 {
+  opacity: 0;
+}
+.Button_buttonLoader__fe4m9p12 {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: grid;
+  place-content: center;
+}

package/dist/components/Button/Button.css.vanilla.js

@@ -0,0 +1,8 @@
+import './Button.css.ts.vanilla.css';
+import { createRuntimeFn } from '@vanilla-extract/recipes/createRuntimeFn';
+
+var button = createRuntimeFn({ defaultClassName: "Button_button__fe4m9ph Button_buttonBase__fe4m9p0", variantClassNames: { fullWidth: { true: "Button_button_fullWidth_true__fe4m9pi" }, buttonRadius: { round: "Button_buttonRadius_round__fe4m9pf", "default": "Button_buttonRadius_default__fe4m9pg" }, buttonShadow: { none: "Button_buttonShadow_none__fe4m9pc", small: "Button_buttonShadow_small__fe4m9pd", "default": "Button_buttonShadow_default__fe4m9pe" }, buttonVariant: { primary: "Button_buttonVariant_primary__fe4m9p1", secondary: "Button_buttonVariant_secondary__fe4m9p2", ghost: "Button_buttonVariant_ghost__fe4m9p3", tertiary: "Button_buttonVariant_tertiary__fe4m9p4", prio: "Button_buttonVariant_prio__fe4m9p5" }, buttonPadding: { small: "Button_buttonPadding_small__fe4m9p8", medium: "Button_buttonPadding_medium__fe4m9p9", large: "Button_buttonPadding_large__fe4m9pa", icon: "Button_buttonPadding_icon__fe4m9pb" } }, defaultVariants: { buttonPadding: "large", buttonRadius: "default", buttonShadow: "default", buttonVariant: "primary" }, compoundVariants: [] });
+var buttonContent = createRuntimeFn({ defaultClassName: "Button_buttonContent__fe4m9px", variantClassNames: { buttonFontSize: { small: "Button_buttonFontSize_small__fe4m9p6", "default": "Button_buttonFontSize_default__fe4m9p7" }, flexReverse: { true: "Button_buttonContent_flexReverse_true__fe4m9p10" }, loading: { true: "Button_buttonContent_loading_true__fe4m9p11" } }, defaultVariants: { buttonFontSize: "default" }, compoundVariants: [] });
+var buttonLoader = "Button_buttonLoader__fe4m9p12";
+
+export { button, buttonContent, buttonLoader };

package/dist/components/Button/Button.js

@@ -0,0 +1,57 @@
+import React from 'react';
+import { button, buttonContent, buttonLoader } from './Button.css.vanilla.js';
+import { Spinner } from '../Spinner/Spinner.js';
+
+const Button = ({
+  size,
+  variant,
+  icon,
+  flexReverse,
+  disabled,
+  onClick,
+  children,
+  loading,
+  fullWidth,
+  buttonRef,
+  round,
+  className
+}) => {
+  return /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      ref: buttonRef,
+      className: `${button({
+        buttonPadding: size,
+        buttonRadius: round ? "round" : "default",
+        buttonVariant: variant,
+        fullWidth,
+        buttonShadow: variant === "ghost" || variant === "secondary" ? "none" : size === "small" ? "small" : "default"
+      })} ${className}`,
+      disabled: disabled || loading,
+      onKeyDown: (event) => {
+        if (event.key === "Enter") {
+          onClick && onClick();
+        }
+      },
+      onClick: (e) => {
+        e.preventDefault();
+        onClick && onClick();
+      }
+    },
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: buttonContent({
+          buttonFontSize: size === "small" ? "small" : "default",
+          flexReverse,
+          loading
+        })
+      },
+      icon,
+      children
+    ),
+    loading && /* @__PURE__ */ React.createElement("div", { className: buttonLoader }, /* @__PURE__ */ React.createElement(Spinner, { size: size === "small" ? "small" : "medium" }))
+  );
+};
+
+export { Button };

package/dist/components/CartItemSummary/CartItemSummary.js

@@ -1,9 +1,9 @@
 import React from 'react';
-import { BodyText } from '../../typography/BodyText/BodyText.js';
 import Skeleton from '../Skeleton/Skeleton.js';
 import { formatPrice } from '@citygross/utils';
 import { H3 } from '../../typography/H3/H3.js';
 import { cartitemsummary, cancelledWrapper, amountText, itemInformationContainer } from './CartItemSummary.css.vanilla.js';
+import { BodyText } from '../../typography/BodyText/BodyText.js';
 
 const CartItemSummary = ({
   product,
@@ -13,7 +13,7 @@ const CartItemSummary = ({
   return /* @__PURE__ */ React.createElement("div", { className: cartitemsummary }, product && (product.amount === 0 || product.amount) && product?.cancelledQuantity !== 0 && product?.cancelledQuantity && /* @__PURE__ */ React.createElement("div", { className: cancelledWrapper }, /* @__PURE__ */ React.createElement(BodyText, { size: "small", textDecoration: "lineThrough" }, product?.cancelledQuantity ? `${product.cancelledQuantity} st` : /* @__PURE__ */ React.createElement(Skeleton, { width: 104 })), /* @__PURE__ */ React.createElement(
     H3,
     {
-      cx: amountText,
+      className: amountText,
       lineThrough: true,
       fontWeight: withParenthesis ? "regular" : "semiBold"
     },
@@ -21,7 +21,7 @@ const CartItemSummary = ({
   )), /* @__PURE__ */ React.createElement("div", { className: itemInformationContainer }, /* @__PURE__ */ React.createElement(BodyText, { size: "small" }, product?.quantity || product?.quantity === 0 ? `${product.quantity} ${unit}` : /* @__PURE__ */ React.createElement(Skeleton, { width: 104 })), /* @__PURE__ */ React.createElement(
     H3,
     {
-      cx: amountText,
+      className: amountText,
       fontWeight: withParenthesis ? "regular" : "semiBold"
     },
     product ? formatPrice(product.amount, withParenthesis) : /* @__PURE__ */ React.createElement(Skeleton, { width: 104 })

package/dist/components/Header/Header.css.ts.vanilla.css

@@ -0,0 +1,29 @@
+.Header_wrapper__11gdejs0 {
+  position: relative;
+  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.07);
+}
+.Header_headerWrapper__11gdejs1 {
+  background-color: #FFFFFF;
+  margin: 0 auto;
+  max-width: 1232px;
+  padding: 12px;
+}
+.Header_headerContainer__11gdejs2 {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.Header_menuIconContainer__11gdejs3 {
+  display: flex;
+  align-self: center;
+}
+.Header_sideModalHeader__11gdejs4 {
+  display: flex;
+  justify-content: space-between;
+  padding: 12px;
+}
+@media screen and (min-width: 960px) {
+  .Header_headerWrapper__11gdejs1 {
+    padding: 20px 24px;
+  }
+}

package/dist/components/Header/Header.css.vanilla.js

@@ -0,0 +1,9 @@
+import './Header.css.ts.vanilla.css';
+
+var headerContainer = "Header_headerContainer__11gdejs2";
+var headerWrapper = "Header_headerWrapper__11gdejs1";
+var menuIconContainer = "Header_menuIconContainer__11gdejs3";
+var sideModalHeader = "Header_sideModalHeader__11gdejs4";
+var wrapper = "Header_wrapper__11gdejs0";
+
+export { headerContainer, headerWrapper, menuIconContainer, sideModalHeader, wrapper };

package/dist/components/Header/Header.d.ts

@@ -0,0 +1,11 @@
+import React, { ReactNode } from 'react';
+
+declare type THeader = {
+    btnLabel?: string;
+    btnOnClick?: () => void;
+    children?: ReactNode;
+    headerLink?: React.ReactNode;
+};
+declare const Header: ({ btnLabel, btnOnClick, children, headerLink }: THeader) => JSX.Element;
+
+export { Header, THeader };

package/dist/components/Header/Header.js

@@ -0,0 +1,44 @@
+import React, { useState } from 'react';
+import { Button } from '../Button/Button.js';
+import { SideModal } from '@citygross/components';
+import { Icons } from '@citygross/icons';
+import { theme } from '@citygross/design-tokens';
+import { wrapper, headerWrapper, headerContainer, menuIconContainer, sideModalHeader } from './Header.css.vanilla.js';
+
+const Header = ({
+  btnLabel,
+  btnOnClick,
+  children,
+  headerLink
+}) => {
+  const [showSideModal, setShowSideModal] = useState(false);
+  const isMobile = window.innerWidth < (theme.breakpoints?.lg ?? 960);
+  return /* @__PURE__ */ React.createElement("div", { className: wrapper }, headerLink && headerLink, /* @__PURE__ */ React.createElement("div", { className: headerWrapper }, /* @__PURE__ */ React.createElement("div", { className: headerContainer }, isMobile ? /* @__PURE__ */ React.createElement(Icons.LogoFlat, null) : /* @__PURE__ */ React.createElement(Icons.Logo, null), isMobile ? /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: menuIconContainer,
+      onClick: () => setShowSideModal(true)
+    },
+    /* @__PURE__ */ React.createElement(Icons.Menu, null)
+  ) : btnLabel && /* @__PURE__ */ React.createElement(Button, { onClick: btnOnClick, variant: "secondary" }, btnLabel))), showSideModal && /* @__PURE__ */ React.createElement(
+    SideModal,
+    {
+      isVisible: true,
+      onBackdropClick: () => setShowSideModal(false),
+      slideFrom: "right"
+    },
+    /* @__PURE__ */ React.createElement("div", { className: sideModalHeader }, /* @__PURE__ */ React.createElement(Icons.LogoFlat, null), /* @__PURE__ */ React.createElement(
+      Button,
+      {
+        icon: /* @__PURE__ */ React.createElement(Icons.Cross, { height: 16, width: 16 }),
+        onClick: () => setShowSideModal(false),
+        round: true,
+        variant: "secondary",
+        size: "small"
+      }
+    )),
+    children
+  ));
+};
+
+export { Header };

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 export { Box, TBox } from './components/Box/Box.js';
 export { AlertBox, TAlertBox } from './components/AlertBox/AlertBox.js';
+export { Header, THeader } from './components/Header/Header.js';
 export { CartItemSummary, TCartItemSummary, TSummaryItem } from './components/CartItemSummary/CartItemSummary.js';
 export { Divider, TDivider } from './components/Divider/Divider.js';
 export { Dot, TDot } from './components/Dot/Dot.js';

package/dist/index.js

@@ -3,6 +3,7 @@ export { AlertBox } from './components/AlertBox/AlertBox.js';
 import '@citygross/icons_v2';
 import 'react';
 import './components/BoxArrow/BoxArrow.css.vanilla.js';
+export { Header } from './components/Header/Header.js';
 export { CartItemSummary } from './components/CartItemSummary/CartItemSummary.js';
 export { Divider } from './components/Divider/Divider.js';
 export { Dot } from './components/Dot/Dot.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@citygross/components_v2",
-  "version": "0.0.14",
+  "version": "0.0.16",
   "license": "ISC",
   "sideEffects": false,
   "main": "./dist/index.js",
@@ -65,6 +65,7 @@
     "react-dom": "^17.0.1"
   },
   "dependencies": {
+    "@citygross/components": "^0.8.51",
     "@citygross/design-tokens_v2": "^0.0.3",
     "@citygross/icons": "^0.1.12",
     "@citygross/react-use-bg-wizard": "^0.0.8",
@@ -79,5 +80,5 @@
     "react-slick": "^0.30.1",
     "slick-carousel": "^1.8.1"
   },
-  "gitHead": "258b63dd1593300b5dfaaecbf85751de4ea90d58"
+  "gitHead": "4680516ff99a0ed654230c4986d5292f3627e099"
 }