@citygross/components_v2 0.0.12 → 0.0.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (73) hide show
  1. package/dist/components/AlertBox/AlertBox.css.ts.vanilla.css +24 -24
  2. package/dist/components/AlertBox/AlertBox.css.vanilla.js +1 -1
  3. package/dist/components/AlertBox/AlertBox.d.ts +1 -1
  4. package/dist/components/AlertBox/AlertBox.js +1 -1
  5. package/dist/components/Box/Box.css.ts.vanilla.css +4 -0
  6. package/dist/components/Box/Box.css.vanilla.js +9 -0
  7. package/dist/components/Box/Box.d.ts +1 -1
  8. package/dist/components/Box/Box.js +21 -2
  9. package/dist/components/BoxArrow/BoxArrow.css.ts.vanilla.css +48 -48
  10. package/dist/components/BoxArrow/BoxArrow.css.vanilla.js +1 -2
  11. package/dist/components/CartItemSummary/CartItemSummary.css.ts.vanilla.css +23 -0
  12. package/dist/components/CartItemSummary/CartItemSummary.css.vanilla.js +8 -0
  13. package/dist/components/CartItemSummary/CartItemSummary.d.ts +15 -0
  14. package/dist/components/CartItemSummary/CartItemSummary.js +31 -0
  15. package/dist/components/CartSummary/CartSummary.css.ts.vanilla.css +34 -0
  16. package/dist/components/CartSummary/CartSummary.css.vanilla.js +11 -0
  17. package/dist/components/CartSummary/CartSummary.d.ts +26 -0
  18. package/dist/components/CartSummary/CartSummary.js +60 -0
  19. package/dist/components/Divider/Divider.css.ts.vanilla.css +6 -0
  20. package/dist/components/Divider/Divider.css.vanilla.js +7 -0
  21. package/dist/components/Divider/Divider.d.ts +9 -0
  22. package/dist/components/Divider/Divider.js +10 -0
  23. package/dist/components/Dot/Dot.css.ts.vanilla.css +8 -0
  24. package/dist/components/Dot/Dot.css.vanilla.js +7 -0
  25. package/dist/components/Dot/Dot.d.ts +9 -0
  26. package/dist/components/Dot/Dot.js +16 -0
  27. package/dist/components/FormControl/FormControl.css.ts.vanilla.css +21 -0
  28. package/dist/components/FormControl/FormControl.css.vanilla.js +7 -0
  29. package/dist/components/FormControl/FormControl.d.ts +17 -0
  30. package/dist/components/FormControl/FormControl.js +21 -0
  31. package/dist/components/Input/Input.css.ts.vanilla.css +60 -0
  32. package/dist/components/Input/Input.css.vanilla.js +9 -0
  33. package/dist/components/Input/Input.d.ts +16 -0
  34. package/dist/components/Input/Input.js +49 -0
  35. package/dist/components/ListItem/ListItem.css.ts.vanilla.css +72 -0
  36. package/dist/components/ListItem/ListItem.css.vanilla.js +11 -0
  37. package/dist/components/ListItem/ListItem.d.ts +29 -0
  38. package/dist/components/ListItem/ListItem.js +92 -0
  39. package/dist/components/ListItem/assets/fallback_grocery.js +3 -0
  40. package/dist/components/Skeleton/Skeleton.css.ts.vanilla.css +164 -0
  41. package/dist/components/Skeleton/Skeleton.css.vanilla.js +7 -0
  42. package/dist/components/Skeleton/Skeleton.d.ts +10 -0
  43. package/dist/components/Skeleton/Skeleton.js +22 -0
  44. package/dist/components/Spacer/Spacer.css.ts.vanilla.css +3 -0
  45. package/dist/components/Spacer/Spacer.css.vanilla.js +7 -0
  46. package/dist/components/Spacer/Spacer.d.ts +9 -0
  47. package/dist/components/Spacer/Spacer.js +6 -0
  48. package/dist/components/Spinner/Spinner.css.ts.vanilla.css +171 -0
  49. package/dist/components/Spinner/Spinner.css.vanilla.js +7 -0
  50. package/dist/components/Spinner/Spinner.d.ts +10 -0
  51. package/dist/components/Spinner/Spinner.js +17 -0
  52. package/dist/components/TimeLine/TimeLine.css.ts.vanilla.css +178 -0
  53. package/dist/components/TimeLine/TimeLine.css.vanilla.js +9 -0
  54. package/dist/components/TimeLine/TimeLine.d.ts +25 -0
  55. package/dist/components/TimeLine/TimeLine.js +53 -0
  56. package/dist/cssUtils/border.css.d.ts +4 -0
  57. package/dist/cssUtils/border.css.vanilla.js +6 -0
  58. package/dist/cssUtils/color.css.d.ts +6 -0
  59. package/dist/cssUtils/color.css.vanilla.js +8 -0
  60. package/dist/cssUtils/spacings.css.d.ts +9 -0
  61. package/dist/cssUtils/spacings.css.ts.vanilla.css +0 -66
  62. package/dist/cssUtils/spacings.css.vanilla.js +11 -0
  63. package/dist/cssUtils/typography.css.d.ts +5 -0
  64. package/dist/cssUtils/typography.css.ts.vanilla.css +100 -0
  65. package/dist/index.d.ts +17 -2
  66. package/dist/index.js +20 -2
  67. package/dist/typography/BodyText/BodyText.css.vanilla.js +8 -0
  68. package/dist/typography/BodyText/BodyText.d.ts +16 -0
  69. package/dist/typography/BodyText/BodyText.js +28 -0
  70. package/dist/typography/H3/H3.css.ts.vanilla.css +4 -0
  71. package/dist/typography/H3/H3.css.vanilla.js +8 -0
  72. package/dist/typography/H3/H3.js +24 -0
  73. package/package.json +2 -2
@@ -9,76 +9,76 @@
9
9
  border-left-width: 4px;
10
10
  border-left-style: solid;
11
11
  }
12
- .AlertBox_customToCssMapper_8__1g3gawu30 {
12
+ .AlertBox_8__1g3gawu30 {
13
13
  min-width: 8px;
14
14
  }
15
- .AlertBox_customToCssMapper_16__1g3gawu31 {
15
+ .AlertBox_16__1g3gawu31 {
16
16
  min-width: 16px;
17
17
  }
18
- .AlertBox_customToCssMapper_24__1g3gawu32 {
18
+ .AlertBox_24__1g3gawu32 {
19
19
  min-width: 24px;
20
20
  }
21
- .AlertBox_customToCssMapper_32__1g3gawu33 {
21
+ .AlertBox_32__1g3gawu33 {
22
22
  min-width: 32px;
23
23
  }
24
- .AlertBox_customToCssMapper_40__1g3gawu34 {
24
+ .AlertBox_40__1g3gawu34 {
25
25
  min-width: 40px;
26
26
  }
27
- .AlertBox_customToCssMapper_48__1g3gawu35 {
27
+ .AlertBox_48__1g3gawu35 {
28
28
  min-width: 48px;
29
29
  }
30
- .AlertBox_customToCssMapper_56__1g3gawu36 {
30
+ .AlertBox_56__1g3gawu36 {
31
31
  min-width: 56px;
32
32
  }
33
- .AlertBox_customToCssMapper_64__1g3gawu37 {
33
+ .AlertBox_64__1g3gawu37 {
34
34
  min-width: 64px;
35
35
  }
36
- .AlertBox_customToCssMapper_72__1g3gawu38 {
36
+ .AlertBox_72__1g3gawu38 {
37
37
  min-width: 72px;
38
38
  }
39
- .AlertBox_customToCssMapper_80__1g3gawu39 {
39
+ .AlertBox_80__1g3gawu39 {
40
40
  min-width: 80px;
41
41
  }
42
- .AlertBox_customToCssMapper_88__1g3gawu3a {
42
+ .AlertBox_88__1g3gawu3a {
43
43
  min-width: 88px;
44
44
  }
45
- .AlertBox_customToCssMapper_96__1g3gawu3b {
45
+ .AlertBox_96__1g3gawu3b {
46
46
  min-width: 96px;
47
47
  }
48
- .AlertBox_customToCssMapper_104__1g3gawu3c {
48
+ .AlertBox_104__1g3gawu3c {
49
49
  min-width: 104px;
50
50
  }
51
- .AlertBox_customToCssMapper_112__1g3gawu3d {
51
+ .AlertBox_112__1g3gawu3d {
52
52
  min-width: 112px;
53
53
  }
54
- .AlertBox_customToCssMapper_120__1g3gawu3e {
54
+ .AlertBox_120__1g3gawu3e {
55
55
  min-width: 120px;
56
56
  }
57
- .AlertBox_customToCssMapper_128__1g3gawu3f {
57
+ .AlertBox_128__1g3gawu3f {
58
58
  min-width: 128px;
59
59
  }
60
- .AlertBox_customToCssMapper_136__1g3gawu3g {
60
+ .AlertBox_136__1g3gawu3g {
61
61
  min-width: 136px;
62
62
  }
63
- .AlertBox_customToCssMapper_144__1g3gawu3h {
63
+ .AlertBox_144__1g3gawu3h {
64
64
  min-width: 144px;
65
65
  }
66
- .AlertBox_customToCssMapper_152__1g3gawu3i {
66
+ .AlertBox_152__1g3gawu3i {
67
67
  min-width: 152px;
68
68
  }
69
- .AlertBox_customToCssMapper_160__1g3gawu3j {
69
+ .AlertBox_160__1g3gawu3j {
70
70
  min-width: 160px;
71
71
  }
72
- .AlertBox_customToCssMapper_168__1g3gawu3k {
72
+ .AlertBox_168__1g3gawu3k {
73
73
  min-width: 168px;
74
74
  }
75
- .AlertBox_customToCssMapper_176__1g3gawu3l {
75
+ .AlertBox_176__1g3gawu3l {
76
76
  min-width: 176px;
77
77
  }
78
- .AlertBox_customToCssMapper_184__1g3gawu3m {
78
+ .AlertBox_184__1g3gawu3m {
79
79
  min-width: 184px;
80
80
  }
81
- .AlertBox_customToCssMapper_192__1g3gawu3n {
81
+ .AlertBox_192__1g3gawu3n {
82
82
  min-width: 192px;
83
83
  }
84
84
  .AlertBox_iconContainer__1g3gawu3o {
@@ -5,6 +5,6 @@ import './AlertBox.css.ts.vanilla.css';
5
5
  import { createRuntimeFn } from '@vanilla-extract/recipes/createRuntimeFn';
6
6
 
7
7
  var alertBox = createRuntimeFn({ defaultClassName: "AlertBox_alertBox__1g3gawu0", 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" }, borderLeft: { true: "AlertBox_alertBox_borderLeft_true__1g3gawu1c" }, 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" }, 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" } }, defaultVariants: {}, compoundVariants: [] });
8
- var iconContainer = createRuntimeFn({ defaultClassName: "AlertBox_iconContainer__1g3gawu3o", variantClassNames: { minWidth: { "8": "AlertBox_customToCssMapper_8__1g3gawu30", "16": "AlertBox_customToCssMapper_16__1g3gawu31", "24": "AlertBox_customToCssMapper_24__1g3gawu32", "32": "AlertBox_customToCssMapper_32__1g3gawu33", "40": "AlertBox_customToCssMapper_40__1g3gawu34", "48": "AlertBox_customToCssMapper_48__1g3gawu35", "56": "AlertBox_customToCssMapper_56__1g3gawu36", "64": "AlertBox_customToCssMapper_64__1g3gawu37", "72": "AlertBox_customToCssMapper_72__1g3gawu38", "80": "AlertBox_customToCssMapper_80__1g3gawu39", "88": "AlertBox_customToCssMapper_88__1g3gawu3a", "96": "AlertBox_customToCssMapper_96__1g3gawu3b", "104": "AlertBox_customToCssMapper_104__1g3gawu3c", "112": "AlertBox_customToCssMapper_112__1g3gawu3d", "120": "AlertBox_customToCssMapper_120__1g3gawu3e", "128": "AlertBox_customToCssMapper_128__1g3gawu3f", "136": "AlertBox_customToCssMapper_136__1g3gawu3g", "144": "AlertBox_customToCssMapper_144__1g3gawu3h", "152": "AlertBox_customToCssMapper_152__1g3gawu3i", "160": "AlertBox_customToCssMapper_160__1g3gawu3j", "168": "AlertBox_customToCssMapper_168__1g3gawu3k", "176": "AlertBox_customToCssMapper_176__1g3gawu3l", "184": "AlertBox_customToCssMapper_184__1g3gawu3m", "192": "AlertBox_customToCssMapper_192__1g3gawu3n" } }, defaultVariants: { minWidth: "24" }, compoundVariants: [] });
8
+ var iconContainer = createRuntimeFn({ defaultClassName: "AlertBox_iconContainer__1g3gawu3o", variantClassNames: { minWidth: { "8": "AlertBox_8__1g3gawu30", "16": "AlertBox_16__1g3gawu31", "24": "AlertBox_24__1g3gawu32", "32": "AlertBox_32__1g3gawu33", "40": "AlertBox_40__1g3gawu34", "48": "AlertBox_48__1g3gawu35", "56": "AlertBox_56__1g3gawu36", "64": "AlertBox_64__1g3gawu37", "72": "AlertBox_72__1g3gawu38", "80": "AlertBox_80__1g3gawu39", "88": "AlertBox_88__1g3gawu3a", "96": "AlertBox_96__1g3gawu3b", "104": "AlertBox_104__1g3gawu3c", "112": "AlertBox_112__1g3gawu3d", "120": "AlertBox_120__1g3gawu3e", "128": "AlertBox_128__1g3gawu3f", "136": "AlertBox_136__1g3gawu3g", "144": "AlertBox_144__1g3gawu3h", "152": "AlertBox_152__1g3gawu3i", "160": "AlertBox_160__1g3gawu3j", "168": "AlertBox_168__1g3gawu3k", "176": "AlertBox_176__1g3gawu3l", "184": "AlertBox_184__1g3gawu3m", "192": "AlertBox_192__1g3gawu3n" } }, defaultVariants: { minWidth: "24" }, compoundVariants: [] });
9
9
 
10
10
  export { alertBox, iconContainer };
@@ -14,4 +14,4 @@ declare type TAlertBox = {
14
14
  };
15
15
  declare function AlertBox({ background, borderColor, icon, iconMinWidth, withArrow, arrowSpacing, arrowPlacement, padding, children }: TAlertBox): JSX.Element;
16
16
 
17
- export { TAlertBox, AlertBox as default };
17
+ export { AlertBox, TAlertBox };
@@ -35,4 +35,4 @@ function AlertBox({
35
35
  ));
36
36
  }
37
37
 
38
- export { AlertBox as default };
38
+ export { AlertBox };
@@ -0,0 +1,4 @@
1
+ .Box_BoxStyle_border_true__inom6d66 {
2
+ border-style: solid;
3
+ border-width: 1px;
4
+ }
@@ -0,0 +1,9 @@
1
+ import './../../cssUtils/color.css.ts.vanilla.css';
2
+ import './../../cssUtils/border.css.ts.vanilla.css';
3
+ import './../../cssUtils/spacings.css.ts.vanilla.css';
4
+ import './Box.css.ts.vanilla.css';
5
+ import { createRuntimeFn } from '@vanilla-extract/recipes/createRuntimeFn';
6
+
7
+ 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: [] });
8
+
9
+ export { BoxStyle };
@@ -16,4 +16,4 @@ declare type TBox = {
16
16
  };
17
17
  declare function Box({ background, borderColor, borderRadius, hoverBackgroundColor, padding, paddingVertical, paddingHorizontal, margin, marginHorizontal, marginVertical, children, ...props }: TBox): JSX.Element;
18
18
 
19
- export { TBox, Box as default };
19
+ export { Box, TBox };
@@ -1,4 +1,5 @@
1
1
  import React from 'react';
2
+ import { BoxStyle } from './Box.css.vanilla.js';
2
3
 
3
4
  function Box({
4
5
  background,
@@ -14,7 +15,25 @@ function Box({
14
15
  children,
15
16
  ...props
16
17
  }) {
17
- return /* @__PURE__ */ React.createElement("div", { ...props }, /* @__PURE__ */ React.createElement("div", null, children));
18
+ return /* @__PURE__ */ React.createElement("div", { ...props }, /* @__PURE__ */ React.createElement(
19
+ "div",
20
+ {
21
+ className: BoxStyle({
22
+ backgroundColor: background,
23
+ border: Boolean(borderColor),
24
+ borderColor,
25
+ borderRadius,
26
+ padding,
27
+ paddingVertical,
28
+ paddingHorizontal,
29
+ margin,
30
+ marginHorizontal,
31
+ marginVertical,
32
+ hoverBackgroundColor
33
+ })
34
+ },
35
+ children
36
+ ));
18
37
  }
19
38
 
20
- export { Box as default };
39
+ export { Box };
@@ -1,145 +1,145 @@
1
- .BoxArrow_customToCssMapper_8__11q5o2d0 {
1
+ .BoxArrow_8__11q5o2d0 {
2
2
  margin-right: 8px;
3
3
  }
4
- .BoxArrow_customToCssMapper_16__11q5o2d1 {
4
+ .BoxArrow_16__11q5o2d1 {
5
5
  margin-right: 16px;
6
6
  }
7
- .BoxArrow_customToCssMapper_24__11q5o2d2 {
7
+ .BoxArrow_24__11q5o2d2 {
8
8
  margin-right: 24px;
9
9
  }
10
- .BoxArrow_customToCssMapper_32__11q5o2d3 {
10
+ .BoxArrow_32__11q5o2d3 {
11
11
  margin-right: 32px;
12
12
  }
13
- .BoxArrow_customToCssMapper_40__11q5o2d4 {
13
+ .BoxArrow_40__11q5o2d4 {
14
14
  margin-right: 40px;
15
15
  }
16
- .BoxArrow_customToCssMapper_48__11q5o2d5 {
16
+ .BoxArrow_48__11q5o2d5 {
17
17
  margin-right: 48px;
18
18
  }
19
- .BoxArrow_customToCssMapper_56__11q5o2d6 {
19
+ .BoxArrow_56__11q5o2d6 {
20
20
  margin-right: 56px;
21
21
  }
22
- .BoxArrow_customToCssMapper_64__11q5o2d7 {
22
+ .BoxArrow_64__11q5o2d7 {
23
23
  margin-right: 64px;
24
24
  }
25
- .BoxArrow_customToCssMapper_72__11q5o2d8 {
25
+ .BoxArrow_72__11q5o2d8 {
26
26
  margin-right: 72px;
27
27
  }
28
- .BoxArrow_customToCssMapper_80__11q5o2d9 {
28
+ .BoxArrow_80__11q5o2d9 {
29
29
  margin-right: 80px;
30
30
  }
31
- .BoxArrow_customToCssMapper_88__11q5o2da {
31
+ .BoxArrow_88__11q5o2da {
32
32
  margin-right: 88px;
33
33
  }
34
- .BoxArrow_customToCssMapper_96__11q5o2db {
34
+ .BoxArrow_96__11q5o2db {
35
35
  margin-right: 96px;
36
36
  }
37
- .BoxArrow_customToCssMapper_104__11q5o2dc {
37
+ .BoxArrow_104__11q5o2dc {
38
38
  margin-right: 104px;
39
39
  }
40
- .BoxArrow_customToCssMapper_112__11q5o2dd {
40
+ .BoxArrow_112__11q5o2dd {
41
41
  margin-right: 112px;
42
42
  }
43
- .BoxArrow_customToCssMapper_120__11q5o2de {
43
+ .BoxArrow_120__11q5o2de {
44
44
  margin-right: 120px;
45
45
  }
46
- .BoxArrow_customToCssMapper_128__11q5o2df {
46
+ .BoxArrow_128__11q5o2df {
47
47
  margin-right: 128px;
48
48
  }
49
- .BoxArrow_customToCssMapper_136__11q5o2dg {
49
+ .BoxArrow_136__11q5o2dg {
50
50
  margin-right: 136px;
51
51
  }
52
- .BoxArrow_customToCssMapper_144__11q5o2dh {
52
+ .BoxArrow_144__11q5o2dh {
53
53
  margin-right: 144px;
54
54
  }
55
- .BoxArrow_customToCssMapper_152__11q5o2di {
55
+ .BoxArrow_152__11q5o2di {
56
56
  margin-right: 152px;
57
57
  }
58
- .BoxArrow_customToCssMapper_160__11q5o2dj {
58
+ .BoxArrow_160__11q5o2dj {
59
59
  margin-right: 160px;
60
60
  }
61
- .BoxArrow_customToCssMapper_168__11q5o2dk {
61
+ .BoxArrow_168__11q5o2dk {
62
62
  margin-right: 168px;
63
63
  }
64
- .BoxArrow_customToCssMapper_176__11q5o2dl {
64
+ .BoxArrow_176__11q5o2dl {
65
65
  margin-right: 176px;
66
66
  }
67
- .BoxArrow_customToCssMapper_184__11q5o2dm {
67
+ .BoxArrow_184__11q5o2dm {
68
68
  margin-right: 184px;
69
69
  }
70
- .BoxArrow_customToCssMapper_192__11q5o2dn {
70
+ .BoxArrow_192__11q5o2dn {
71
71
  margin-right: 192px;
72
72
  }
73
- .BoxArrow_customToCssMapper_8__11q5o2do {
73
+ .BoxArrow_8__11q5o2do {
74
74
  margin-left: 8px;
75
75
  }
76
- .BoxArrow_customToCssMapper_16__11q5o2dp {
76
+ .BoxArrow_16__11q5o2dp {
77
77
  margin-left: 16px;
78
78
  }
79
- .BoxArrow_customToCssMapper_24__11q5o2dq {
79
+ .BoxArrow_24__11q5o2dq {
80
80
  margin-left: 24px;
81
81
  }
82
- .BoxArrow_customToCssMapper_32__11q5o2dr {
82
+ .BoxArrow_32__11q5o2dr {
83
83
  margin-left: 32px;
84
84
  }
85
- .BoxArrow_customToCssMapper_40__11q5o2ds {
85
+ .BoxArrow_40__11q5o2ds {
86
86
  margin-left: 40px;
87
87
  }
88
- .BoxArrow_customToCssMapper_48__11q5o2dt {
88
+ .BoxArrow_48__11q5o2dt {
89
89
  margin-left: 48px;
90
90
  }
91
- .BoxArrow_customToCssMapper_56__11q5o2du {
91
+ .BoxArrow_56__11q5o2du {
92
92
  margin-left: 56px;
93
93
  }
94
- .BoxArrow_customToCssMapper_64__11q5o2dv {
94
+ .BoxArrow_64__11q5o2dv {
95
95
  margin-left: 64px;
96
96
  }
97
- .BoxArrow_customToCssMapper_72__11q5o2dw {
97
+ .BoxArrow_72__11q5o2dw {
98
98
  margin-left: 72px;
99
99
  }
100
- .BoxArrow_customToCssMapper_80__11q5o2dx {
100
+ .BoxArrow_80__11q5o2dx {
101
101
  margin-left: 80px;
102
102
  }
103
- .BoxArrow_customToCssMapper_88__11q5o2dy {
103
+ .BoxArrow_88__11q5o2dy {
104
104
  margin-left: 88px;
105
105
  }
106
- .BoxArrow_customToCssMapper_96__11q5o2dz {
106
+ .BoxArrow_96__11q5o2dz {
107
107
  margin-left: 96px;
108
108
  }
109
- .BoxArrow_customToCssMapper_104__11q5o2d10 {
109
+ .BoxArrow_104__11q5o2d10 {
110
110
  margin-left: 104px;
111
111
  }
112
- .BoxArrow_customToCssMapper_112__11q5o2d11 {
112
+ .BoxArrow_112__11q5o2d11 {
113
113
  margin-left: 112px;
114
114
  }
115
- .BoxArrow_customToCssMapper_120__11q5o2d12 {
115
+ .BoxArrow_120__11q5o2d12 {
116
116
  margin-left: 120px;
117
117
  }
118
- .BoxArrow_customToCssMapper_128__11q5o2d13 {
118
+ .BoxArrow_128__11q5o2d13 {
119
119
  margin-left: 128px;
120
120
  }
121
- .BoxArrow_customToCssMapper_136__11q5o2d14 {
121
+ .BoxArrow_136__11q5o2d14 {
122
122
  margin-left: 136px;
123
123
  }
124
- .BoxArrow_customToCssMapper_144__11q5o2d15 {
124
+ .BoxArrow_144__11q5o2d15 {
125
125
  margin-left: 144px;
126
126
  }
127
- .BoxArrow_customToCssMapper_152__11q5o2d16 {
127
+ .BoxArrow_152__11q5o2d16 {
128
128
  margin-left: 152px;
129
129
  }
130
- .BoxArrow_customToCssMapper_160__11q5o2d17 {
130
+ .BoxArrow_160__11q5o2d17 {
131
131
  margin-left: 160px;
132
132
  }
133
- .BoxArrow_customToCssMapper_168__11q5o2d18 {
133
+ .BoxArrow_168__11q5o2d18 {
134
134
  margin-left: 168px;
135
135
  }
136
- .BoxArrow_customToCssMapper_176__11q5o2d19 {
136
+ .BoxArrow_176__11q5o2d19 {
137
137
  margin-left: 176px;
138
138
  }
139
- .BoxArrow_customToCssMapper_184__11q5o2d1a {
139
+ .BoxArrow_184__11q5o2d1a {
140
140
  margin-left: 184px;
141
141
  }
142
- .BoxArrow_customToCssMapper_192__11q5o2d1b {
142
+ .BoxArrow_192__11q5o2d1b {
143
143
  margin-left: 192px;
144
144
  }
145
145
  .BoxArrow_boxArrowContainer__11q5o2d1c {
@@ -1,7 +1,6 @@
1
- import './../../cssUtils/spacings.css.ts.vanilla.css';
2
1
  import './BoxArrow.css.ts.vanilla.css';
3
2
  import { createRuntimeFn } from '@vanilla-extract/recipes/createRuntimeFn';
4
3
 
5
- var boxArrowContainer = createRuntimeFn({ defaultClassName: "BoxArrow_boxArrowContainer__11q5o2d1c", variantClassNames: { placement: { left: "BoxArrow_boxArrowContainer_placement_left__11q5o2d1d", right: "BoxArrow_boxArrowContainer_placement_right__11q5o2d1e" }, offsetRight: { "8": "BoxArrow_customToCssMapper_8__11q5o2d0", "16": "BoxArrow_customToCssMapper_16__11q5o2d1", "24": "BoxArrow_customToCssMapper_24__11q5o2d2", "32": "BoxArrow_customToCssMapper_32__11q5o2d3", "40": "BoxArrow_customToCssMapper_40__11q5o2d4", "48": "BoxArrow_customToCssMapper_48__11q5o2d5", "56": "BoxArrow_customToCssMapper_56__11q5o2d6", "64": "BoxArrow_customToCssMapper_64__11q5o2d7", "72": "BoxArrow_customToCssMapper_72__11q5o2d8", "80": "BoxArrow_customToCssMapper_80__11q5o2d9", "88": "BoxArrow_customToCssMapper_88__11q5o2da", "96": "BoxArrow_customToCssMapper_96__11q5o2db", "104": "BoxArrow_customToCssMapper_104__11q5o2dc", "112": "BoxArrow_customToCssMapper_112__11q5o2dd", "120": "BoxArrow_customToCssMapper_120__11q5o2de", "128": "BoxArrow_customToCssMapper_128__11q5o2df", "136": "BoxArrow_customToCssMapper_136__11q5o2dg", "144": "BoxArrow_customToCssMapper_144__11q5o2dh", "152": "BoxArrow_customToCssMapper_152__11q5o2di", "160": "BoxArrow_customToCssMapper_160__11q5o2dj", "168": "BoxArrow_customToCssMapper_168__11q5o2dk", "176": "BoxArrow_customToCssMapper_176__11q5o2dl", "184": "BoxArrow_customToCssMapper_184__11q5o2dm", "192": "BoxArrow_customToCssMapper_192__11q5o2dn" }, offsetLeft: { "8": "BoxArrow_customToCssMapper_8__11q5o2do", "16": "BoxArrow_customToCssMapper_16__11q5o2dp", "24": "BoxArrow_customToCssMapper_24__11q5o2dq", "32": "BoxArrow_customToCssMapper_32__11q5o2dr", "40": "BoxArrow_customToCssMapper_40__11q5o2ds", "48": "BoxArrow_customToCssMapper_48__11q5o2dt", "56": "BoxArrow_customToCssMapper_56__11q5o2du", "64": "BoxArrow_customToCssMapper_64__11q5o2dv", "72": "BoxArrow_customToCssMapper_72__11q5o2dw", "80": "BoxArrow_customToCssMapper_80__11q5o2dx", "88": "BoxArrow_customToCssMapper_88__11q5o2dy", "96": "BoxArrow_customToCssMapper_96__11q5o2dz", "104": "BoxArrow_customToCssMapper_104__11q5o2d10", "112": "BoxArrow_customToCssMapper_112__11q5o2d11", "120": "BoxArrow_customToCssMapper_120__11q5o2d12", "128": "BoxArrow_customToCssMapper_128__11q5o2d13", "136": "BoxArrow_customToCssMapper_136__11q5o2d14", "144": "BoxArrow_customToCssMapper_144__11q5o2d15", "152": "BoxArrow_customToCssMapper_152__11q5o2d16", "160": "BoxArrow_customToCssMapper_160__11q5o2d17", "168": "BoxArrow_customToCssMapper_168__11q5o2d18", "176": "BoxArrow_customToCssMapper_176__11q5o2d19", "184": "BoxArrow_customToCssMapper_184__11q5o2d1a", "192": "BoxArrow_customToCssMapper_192__11q5o2d1b" } }, defaultVariants: {}, compoundVariants: [] });
4
+ var boxArrowContainer = createRuntimeFn({ defaultClassName: "BoxArrow_boxArrowContainer__11q5o2d1c", variantClassNames: { placement: { left: "BoxArrow_boxArrowContainer_placement_left__11q5o2d1d", right: "BoxArrow_boxArrowContainer_placement_right__11q5o2d1e" }, offsetRight: { "8": "BoxArrow_8__11q5o2d0", "16": "BoxArrow_16__11q5o2d1", "24": "BoxArrow_24__11q5o2d2", "32": "BoxArrow_32__11q5o2d3", "40": "BoxArrow_40__11q5o2d4", "48": "BoxArrow_48__11q5o2d5", "56": "BoxArrow_56__11q5o2d6", "64": "BoxArrow_64__11q5o2d7", "72": "BoxArrow_72__11q5o2d8", "80": "BoxArrow_80__11q5o2d9", "88": "BoxArrow_88__11q5o2da", "96": "BoxArrow_96__11q5o2db", "104": "BoxArrow_104__11q5o2dc", "112": "BoxArrow_112__11q5o2dd", "120": "BoxArrow_120__11q5o2de", "128": "BoxArrow_128__11q5o2df", "136": "BoxArrow_136__11q5o2dg", "144": "BoxArrow_144__11q5o2dh", "152": "BoxArrow_152__11q5o2di", "160": "BoxArrow_160__11q5o2dj", "168": "BoxArrow_168__11q5o2dk", "176": "BoxArrow_176__11q5o2dl", "184": "BoxArrow_184__11q5o2dm", "192": "BoxArrow_192__11q5o2dn" }, offsetLeft: { "8": "BoxArrow_8__11q5o2do", "16": "BoxArrow_16__11q5o2dp", "24": "BoxArrow_24__11q5o2dq", "32": "BoxArrow_32__11q5o2dr", "40": "BoxArrow_40__11q5o2ds", "48": "BoxArrow_48__11q5o2dt", "56": "BoxArrow_56__11q5o2du", "64": "BoxArrow_64__11q5o2dv", "72": "BoxArrow_72__11q5o2dw", "80": "BoxArrow_80__11q5o2dx", "88": "BoxArrow_88__11q5o2dy", "96": "BoxArrow_96__11q5o2dz", "104": "BoxArrow_104__11q5o2d10", "112": "BoxArrow_112__11q5o2d11", "120": "BoxArrow_120__11q5o2d12", "128": "BoxArrow_128__11q5o2d13", "136": "BoxArrow_136__11q5o2d14", "144": "BoxArrow_144__11q5o2d15", "152": "BoxArrow_152__11q5o2d16", "160": "BoxArrow_160__11q5o2d17", "168": "BoxArrow_168__11q5o2d18", "176": "BoxArrow_176__11q5o2d19", "184": "BoxArrow_184__11q5o2d1a", "192": "BoxArrow_192__11q5o2d1b" } }, defaultVariants: {}, compoundVariants: [] });
6
5
 
7
6
  export { boxArrowContainer };
@@ -0,0 +1,23 @@
1
+ .CartItemSummary_cartitemsummary__vltros0 {
2
+ display: flex;
3
+ flex-direction: column;
4
+ gap: 20px;
5
+ }
6
+ .CartItemSummary_cancelledWrapper__vltros1 {
7
+ display: flex;
8
+ flex-direction: column;
9
+ align-items: flex-end;
10
+ }
11
+ .CartItemSummary_itemInformationContainer__vltros2 {
12
+ display: flex;
13
+ flex-direction: column;
14
+ align-items: flex-end;
15
+ }
16
+ .CartItemSummary_amountText__vltros3 {
17
+ white-space: nowrap;
18
+ }
19
+ @media screen and (min-width: 480px) {
20
+ .CartItemSummary_cartitemsummary__vltros0 {
21
+ flex-direction: row;
22
+ }
23
+ }
@@ -0,0 +1,8 @@
1
+ import './CartItemSummary.css.ts.vanilla.css';
2
+
3
+ var amountText = "CartItemSummary_amountText__vltros3";
4
+ var cancelledWrapper = "CartItemSummary_cancelledWrapper__vltros1";
5
+ var cartitemsummary = "CartItemSummary_cartitemsummary__vltros0";
6
+ var itemInformationContainer = "CartItemSummary_itemInformationContainer__vltros2";
7
+
8
+ export { amountText, cancelledWrapper, cartitemsummary, itemInformationContainer };
@@ -0,0 +1,15 @@
1
+ declare type TSummaryItem = {
2
+ amount: number;
3
+ cancelledAmount: number;
4
+ quantity: number;
5
+ cancelledQuantity: number;
6
+ name?: string;
7
+ };
8
+ declare type TCartItemSummary = {
9
+ product: TSummaryItem;
10
+ withParenthesis?: boolean;
11
+ unit?: string;
12
+ };
13
+ declare const CartItemSummary: ({ product, withParenthesis, unit }: TCartItemSummary) => JSX.Element;
14
+
15
+ export { CartItemSummary, TCartItemSummary, TSummaryItem };
@@ -0,0 +1,31 @@
1
+ import React from 'react';
2
+ import { BodyText } from '../../typography/BodyText/BodyText.js';
3
+ import Skeleton from '../Skeleton/Skeleton.js';
4
+ import { formatPrice } from '@citygross/utils';
5
+ import { H3 } from '../../typography/H3/H3.js';
6
+ import { cartitemsummary, cancelledWrapper, amountText, itemInformationContainer } from './CartItemSummary.css.vanilla.js';
7
+
8
+ const CartItemSummary = ({
9
+ product,
10
+ withParenthesis,
11
+ unit = "st"
12
+ }) => {
13
+ 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(
14
+ H3,
15
+ {
16
+ cx: amountText,
17
+ lineThrough: true,
18
+ fontWeight: withParenthesis ? "regular" : "semiBold"
19
+ },
20
+ product ? formatPrice(product.cancelledAmount, withParenthesis) : /* @__PURE__ */ React.createElement(Skeleton, { width: 104 })
21
+ )), /* @__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(
22
+ H3,
23
+ {
24
+ cx: amountText,
25
+ fontWeight: withParenthesis ? "regular" : "semiBold"
26
+ },
27
+ product ? formatPrice(product.amount, withParenthesis) : /* @__PURE__ */ React.createElement(Skeleton, { width: 104 })
28
+ )));
29
+ };
30
+
31
+ export { CartItemSummary };
@@ -0,0 +1,34 @@
1
+ .CartSummary_cartPaymentContainer__1h2882h0 {
2
+ background-color: #FFFBE7;
3
+ }
4
+ .CartSummary_cartSummaryHeader__1h2882h1 {
5
+ padding: 24px;
6
+ display: flex;
7
+ flex-direction: column;
8
+ gap: 8px;
9
+ }
10
+ .CartSummary_cartSummaryHeader_title_true__1h2882h2 {
11
+ padding-top: 16px;
12
+ }
13
+ .CartSummary_cartSummaryFooter__1h2882h3 {
14
+ padding: 24px;
15
+ background-color: #FFF7D1;
16
+ display: flex;
17
+ flex-direction: column;
18
+ gap: 8px;
19
+ }
20
+ .CartSummary_cartLine__1h2882h4 {
21
+ display: flex;
22
+ justify-content: space-between;
23
+ }
24
+ .CartSummary_amountWrapper__1h2882h5 {
25
+ display: flex;
26
+ gap: 8px;
27
+ }
28
+ .CartSummary_cartSummaryTitle__1h2882h6 {
29
+ padding: 24px 0 16px;
30
+ margin: 0 24px;
31
+ display: flex;
32
+ gap: 8px;
33
+ border-bottom: 1px solid #E8E8E8;
34
+ }
@@ -0,0 +1,11 @@
1
+ import './CartSummary.css.ts.vanilla.css';
2
+ import { createRuntimeFn } from '@vanilla-extract/recipes/createRuntimeFn';
3
+
4
+ var amountWrapper = "CartSummary_amountWrapper__1h2882h5";
5
+ var cartLine = "CartSummary_cartLine__1h2882h4";
6
+ var cartPaymentContainer = "CartSummary_cartPaymentContainer__1h2882h0";
7
+ var cartSummaryFooter = "CartSummary_cartSummaryFooter__1h2882h3";
8
+ var cartSummaryHeader = createRuntimeFn({ defaultClassName: "CartSummary_cartSummaryHeader__1h2882h1", variantClassNames: { title: { true: "CartSummary_cartSummaryHeader_title_true__1h2882h2" } }, defaultVariants: {}, compoundVariants: [] });
9
+ var cartSummaryTitle = "CartSummary_cartSummaryTitle__1h2882h6";
10
+
11
+ export { amountWrapper, cartLine, cartPaymentContainer, cartSummaryFooter, cartSummaryHeader, cartSummaryTitle };
@@ -0,0 +1,26 @@
1
+ import { TSummaryItem } from '../CartItemSummary/CartItemSummary.js';
2
+
3
+ declare type TCartSummary = {
4
+ title?: string;
5
+ subTitle?: string;
6
+ bags?: TSummaryItem[];
7
+ groceries?: TSummaryItem[];
8
+ charges?: TSummaryItem[];
9
+ cateredMeals?: TSummaryItem[];
10
+ deliveryFee?: {
11
+ amount: number;
12
+ taxAmount: number;
13
+ taxPercentage: number;
14
+ totalDiscountAmount: number;
15
+ };
16
+ totalAmount: number;
17
+ totalDiscount: number;
18
+ totalTaxAmount: number;
19
+ totalLabel?: string;
20
+ taxLabel?: string;
21
+ shippingLabel?: string;
22
+ saveLabel?: string;
23
+ };
24
+ declare function CartSummary({ saveLabel, shippingLabel, totalLabel, taxLabel, ...cartSummary }: TCartSummary): JSX.Element;
25
+
26
+ export { CartSummary, TCartSummary };