@latte-macchiat-io/latte-vanilla-components 0.0.458 → 0.0.459

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@latte-macchiat-io/latte-vanilla-components",
3
- "version": "0.0.458",
3
+ "version": "0.0.459",
4
4
  "description": "Beautiful components for amazing projects, with a touch of Vanilla 🥤",
5
5
  "type": "module",
6
6
  "main": "./src/index.ts",
@@ -1,29 +1,29 @@
1
- import { alertBoxContent, AlertBoxVariants } from './styles.css';
1
+ // import { alertBoxContent, AlertBoxVariants } from './styles.css';
2
2
 
3
- import { Box } from '..';
3
+ // import { Box } from '..';
4
4
 
5
- import { themeContract } from '../../../theme/contract.css';
5
+ // import { themeContract } from '../../../theme/contract.css';
6
6
 
7
- import { Heading } from '../../Heading';
8
- import { Icon } from '../../Icon';
9
- import icons from '../../Icon/path';
10
- import { Paragraph } from '../../Paragraph';
7
+ // import { Heading } from '../../Heading';
8
+ // import { Icon } from '../../Icon';
9
+ // import icons from '../../Icon/path';
10
+ // import { Paragraph } from '../../Paragraph';
11
11
 
12
- export type AlertBoxProps = React.HTMLAttributes<HTMLDivElement> &
13
- AlertBoxVariants & {
14
- text: string;
15
- noIcon?: boolean;
16
- title?: string | null;
17
- };
12
+ // export type AlertBoxProps = React.HTMLAttributes<HTMLDivElement> &
13
+ // AlertBoxVariants & {
14
+ // text: string;
15
+ // noIcon?: boolean;
16
+ // title?: string | null;
17
+ // };
18
18
 
19
- export const AlertBox = ({ title, text, noIcon = false, variant = 'info', className }: AlertBoxProps) => {
20
- return (
21
- <Box className={className} variant={variant} direction="row">
22
- {!noIcon && <Icon iconPath={icons.close} size={50} color={themeContract.boxAlert.variant[variant].iconColor} />}
23
- <div className={alertBoxContent}>
24
- {title && <Heading as="h4">{title}</Heading>}
25
- <Paragraph>{text}</Paragraph>
26
- </div>
27
- </Box>
28
- );
29
- };
19
+ // export const AlertBox = ({ title, text, noIcon = false, variant = 'info', className }: AlertBoxProps) => {
20
+ // return (
21
+ // <Box className={className} variant={variant} direction="row">
22
+ // {!noIcon && <Icon iconPath={icons.close} size={50} color={themeContract.boxAlert.variant[variant].iconColor} />}
23
+ // <div className={alertBoxContent}>
24
+ // {title && <Heading as="h4">{title}</Heading>}
25
+ // <Paragraph>{text}</Paragraph>
26
+ // </div>
27
+ // </Box>
28
+ // );
29
+ // };
@@ -1,29 +1,29 @@
1
- import type { Meta, StoryObj } from '@storybook/react-vite';
1
+ // import type { Meta, StoryObj } from '@storybook/react-vite';
2
2
 
3
- import { AlertBox } from '.';
3
+ // import { AlertBox } from '.';
4
4
 
5
- // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
6
- const meta: Meta<typeof AlertBox> = {
7
- title: 'Latte Components / 1. Global / AlertBox',
8
- component: AlertBox,
9
- parameters: {
10
- // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
11
- layout: 'centered',
12
- },
13
- // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
14
- tags: ['autodocs'],
15
- // More on argTypes: https://storybook.js.org/docs/api/argtypes
16
- argTypes: {},
17
- // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
18
- };
5
+ // // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
6
+ // const meta: Meta<typeof AlertBox> = {
7
+ // title: 'Latte Components / 1. Global / AlertBox',
8
+ // component: AlertBox,
9
+ // parameters: {
10
+ // // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
11
+ // layout: 'centered',
12
+ // },
13
+ // // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
14
+ // tags: ['autodocs'],
15
+ // // More on argTypes: https://storybook.js.org/docs/api/argtypes
16
+ // argTypes: {},
17
+ // // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
18
+ // };
19
19
 
20
- export default meta;
21
- type Story = StoryObj<typeof meta>;
20
+ // export default meta;
21
+ // type Story = StoryObj<typeof meta>;
22
22
 
23
- // More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
24
- export const Default: Story = {
25
- args: {
26
- title: 'Lorem ipsum',
27
- text: 'Lorem ipsum Lorem ipsum',
28
- },
29
- };
23
+ // // More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
24
+ // export const Default: Story = {
25
+ // args: {
26
+ // title: 'Lorem ipsum',
27
+ // text: 'Lorem ipsum Lorem ipsum',
28
+ // },
29
+ // };
@@ -1,38 +1,38 @@
1
- import { globalStyle, style } from '@vanilla-extract/css';
1
+ // import { globalStyle, style } from '@vanilla-extract/css';
2
2
 
3
- import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
4
- import { themeContract } from '../../../theme/contract.css';
5
- import { generateResponsiveMedia } from '../../../utils/generateResponsiveMedia';
3
+ // import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
4
+ // import { themeContract } from '../../../theme/contract.css';
5
+ // import { generateResponsiveMedia } from '../../../utils/generateResponsiveMedia';
6
6
 
7
- export const alertBox = recipe({
8
- variants: {
9
- variant: {
10
- warning: {
11
- backgroundColor: themeContract.section.variant.primary.backgroundColor,
12
- },
13
- info: {
14
- backgroundColor: themeContract.section.variant.primary.backgroundColor,
15
- },
16
- success: {
17
- backgroundColor: themeContract.section.variant.primary.backgroundColor,
18
- },
19
- danger: {
20
- backgroundColor: themeContract.section.variant.primary.backgroundColor,
21
- },
22
- },
23
- },
24
- });
7
+ // export const alertBox = recipe({
8
+ // variants: {
9
+ // variant: {
10
+ // warning: {
11
+ // backgroundColor: themeContract.section.variant.primary.backgroundColor,
12
+ // },
13
+ // info: {
14
+ // backgroundColor: themeContract.section.variant.primary.backgroundColor,
15
+ // },
16
+ // success: {
17
+ // backgroundColor: themeContract.section.variant.primary.backgroundColor,
18
+ // },
19
+ // danger: {
20
+ // backgroundColor: themeContract.section.variant.primary.backgroundColor,
21
+ // },
22
+ // },
23
+ // },
24
+ // });
25
25
 
26
- globalStyle(`${alertBox} > div `, {
27
- flexDirection: 'row',
26
+ // globalStyle(`${alertBox} > div `, {
27
+ // flexDirection: 'row',
28
28
 
29
- '@media': generateResponsiveMedia({
30
- gap: themeContract.box.gap,
31
- }),
32
- });
29
+ // '@media': generateResponsiveMedia({
30
+ // gap: themeContract.box.gap,
31
+ // }),
32
+ // });
33
33
 
34
- export const alertBoxContent = style({
35
- width: '100%',
36
- });
34
+ // export const alertBoxContent = style({
35
+ // width: '100%',
36
+ // });
37
37
 
38
- export type AlertBoxVariants = RecipeVariants<typeof alertBox>;
38
+ // export type AlertBoxVariants = RecipeVariants<typeof alertBox>;
@@ -1,157 +1,157 @@
1
- import { style } from '@vanilla-extract/css';
2
- import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
3
- import { queries, themeContract } from '@latte-macchiat-io/latte-vanilla-components';
1
+ // import { style } from '@vanilla-extract/css';
2
+ // import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
3
+ // import { queries, themeContract } from '@latte-macchiat-io/latte-vanilla-components';
4
4
 
5
- import { generateResponsiveMedia } from '../../utils/generateResponsiveMedia';
5
+ // import { generateResponsiveMedia } from '../../utils/generateResponsiveMedia';
6
6
 
7
- export const boxBase = style({
8
- display: 'flex',
9
- position: 'relative',
10
- alignItems: 'stretch',
7
+ // export const boxBase = style({
8
+ // display: 'flex',
9
+ // position: 'relative',
10
+ // alignItems: 'stretch',
11
11
 
12
- border: themeContract.box.border,
13
- borderRadius: themeContract.box.borderRadius,
12
+ // border: themeContract.box.border,
13
+ // borderRadius: themeContract.box.borderRadius,
14
14
 
15
- selectors: {
16
- '&:first-of-type:last-of-type': {
17
- height: '100%',
18
- },
19
- },
15
+ // selectors: {
16
+ // '&:first-of-type:last-of-type': {
17
+ // height: '100%',
18
+ // },
19
+ // },
20
20
 
21
- '@media': {
22
- ...generateResponsiveMedia({
23
- gap: themeContract.box.gap,
24
- paddingTop: themeContract.box.paddingTop.sm,
25
- paddingLeft: themeContract.box.paddingLeft,
26
- paddingRight: themeContract.box.paddingRight,
27
- paddingBottom: themeContract.box.paddingBottom,
28
- }),
29
- },
30
- });
21
+ // '@media': {
22
+ // ...generateResponsiveMedia({
23
+ // gap: themeContract.box.gap,
24
+ // paddingTop: themeContract.box.paddingTop.sm,
25
+ // paddingLeft: themeContract.box.paddingLeft,
26
+ // paddingRight: themeContract.box.paddingRight,
27
+ // paddingBottom: themeContract.box.paddingBottom,
28
+ // }),
29
+ // },
30
+ // });
31
31
 
32
- export const boxAdjacent = style({
33
- selectors: {
34
- [`${boxBase} + &`]: {
35
- '@media': generateResponsiveMedia({
36
- marginTop: themeContract.box.adjacent.marginTop,
37
- }),
38
- },
39
- },
40
- });
32
+ // export const boxAdjacent = style({
33
+ // selectors: {
34
+ // [`${boxBase} + &`]: {
35
+ // '@media': generateResponsiveMedia({
36
+ // marginTop: themeContract.box.adjacent.marginTop,
37
+ // }),
38
+ // },
39
+ // },
40
+ // });
41
41
 
42
- export const box = recipe({
43
- base: [boxBase, boxAdjacent],
42
+ // export const box = recipe({
43
+ // base: [boxBase, boxAdjacent],
44
44
 
45
- variants: {
46
- variant: {
47
- primary: {
48
- backgroundColor: themeContract.section.variant.primary.backgroundColor,
49
- },
50
- secondary: {
51
- backgroundColor: themeContract.section.variant.secondary.backgroundColor,
52
- },
53
- transparent: {
54
- backgroundColor: themeContract.section.variant.transparent.backgroundColor,
55
- },
56
- warning: {
57
- backgroundColor: themeContract.boxAlert.variant.warning.backgroundColor,
58
- },
59
- info: {
60
- backgroundColor: themeContract.boxAlert.variant.info.backgroundColor,
61
- },
62
- success: {
63
- backgroundColor: themeContract.boxAlert.variant.success.backgroundColor,
64
- },
65
- danger: {
66
- backgroundColor: themeContract.boxAlert.variant.danger.backgroundColor,
67
- },
68
- },
45
+ // variants: {
46
+ // variant: {
47
+ // primary: {
48
+ // backgroundColor: themeContract.section.variant.primary.backgroundColor,
49
+ // },
50
+ // secondary: {
51
+ // backgroundColor: themeContract.section.variant.secondary.backgroundColor,
52
+ // },
53
+ // transparent: {
54
+ // backgroundColor: themeContract.section.variant.transparent.backgroundColor,
55
+ // },
56
+ // warning: {
57
+ // backgroundColor: themeContract.boxAlert.variant.warning.backgroundColor,
58
+ // },
59
+ // info: {
60
+ // backgroundColor: themeContract.boxAlert.variant.info.backgroundColor,
61
+ // },
62
+ // success: {
63
+ // backgroundColor: themeContract.boxAlert.variant.success.backgroundColor,
64
+ // },
65
+ // danger: {
66
+ // backgroundColor: themeContract.boxAlert.variant.danger.backgroundColor,
67
+ // },
68
+ // },
69
69
 
70
- paddingTop: {
71
- small: {},
72
- medium: {
73
- '@media': generateResponsiveMedia({
74
- paddingTop: themeContract.box.paddingTop.md,
75
- }),
76
- },
77
- large: {
78
- '@media': generateResponsiveMedia({
79
- paddingTop: themeContract.box.paddingTop.lg,
80
- }),
81
- },
82
- },
83
- },
70
+ // paddingTop: {
71
+ // small: {},
72
+ // medium: {
73
+ // '@media': generateResponsiveMedia({
74
+ // paddingTop: themeContract.box.paddingTop.md,
75
+ // }),
76
+ // },
77
+ // large: {
78
+ // '@media': generateResponsiveMedia({
79
+ // paddingTop: themeContract.box.paddingTop.lg,
80
+ // }),
81
+ // },
82
+ // },
83
+ // },
84
84
 
85
- defaultVariants: {
86
- paddingTop: 'small',
87
- variant: 'primary',
88
- },
89
- });
85
+ // defaultVariants: {
86
+ // paddingTop: 'small',
87
+ // variant: 'primary',
88
+ // },
89
+ // });
90
90
 
91
- export const boxContent = recipe({
92
- base: [
93
- {
94
- flex: 1,
95
- display: 'flex',
96
- flexDirection: 'column',
97
- },
98
- ],
99
- variants: {
100
- vAlign: {
101
- top: { justifyContent: 'start' },
102
- bottom: { justifyContent: 'end' },
103
- center: { justifyContent: 'center' },
104
- spaceBetween: { justifyContent: 'space-between' },
105
- },
106
- direction: {
107
- column: {
108
- flexDirection: 'column',
109
- },
110
- row: {
111
- flexDirection: 'column',
91
+ // export const boxContent = recipe({
92
+ // base: [
93
+ // {
94
+ // flex: 1,
95
+ // display: 'flex',
96
+ // flexDirection: 'column',
97
+ // },
98
+ // ],
99
+ // variants: {
100
+ // vAlign: {
101
+ // top: { justifyContent: 'start' },
102
+ // bottom: { justifyContent: 'end' },
103
+ // center: { justifyContent: 'center' },
104
+ // spaceBetween: { justifyContent: 'space-between' },
105
+ // },
106
+ // direction: {
107
+ // column: {
108
+ // flexDirection: 'column',
109
+ // },
110
+ // row: {
111
+ // flexDirection: 'column',
112
112
 
113
- '@media': {
114
- [queries.md]: {
115
- flexDirection: 'row',
116
- },
117
- },
118
- },
119
- },
113
+ // '@media': {
114
+ // [queries.md]: {
115
+ // flexDirection: 'row',
116
+ // },
117
+ // },
118
+ // },
119
+ // },
120
120
 
121
- isReversed: {
122
- true: {
123
- selectors: {
124
- '&': {
125
- flexDirection: 'column-reverse',
126
- },
127
- },
128
- },
129
- },
121
+ // isReversed: {
122
+ // true: {
123
+ // selectors: {
124
+ // '&': {
125
+ // flexDirection: 'column-reverse',
126
+ // },
127
+ // },
128
+ // },
129
+ // },
130
130
 
131
- align: {
132
- left: { textAlign: 'left' },
133
- center: {
134
- textAlign: 'center',
135
- alignItems: 'center',
136
- },
137
- right: { textAlign: 'right', alignItems: 'end' },
138
- },
139
- isLight: {
140
- true: {
141
- color: themeContract.colors.textLight,
142
- },
143
- false: {
144
- color: themeContract.colors.text,
145
- },
146
- },
147
- },
148
- defaultVariants: {
149
- vAlign: 'top',
150
- align: 'left',
151
- direction: 'column',
152
- isLight: false,
153
- },
154
- });
131
+ // align: {
132
+ // left: { textAlign: 'left' },
133
+ // center: {
134
+ // textAlign: 'center',
135
+ // alignItems: 'center',
136
+ // },
137
+ // right: { textAlign: 'right', alignItems: 'end' },
138
+ // },
139
+ // isLight: {
140
+ // true: {
141
+ // color: themeContract.colors.textLight,
142
+ // },
143
+ // false: {
144
+ // color: themeContract.colors.text,
145
+ // },
146
+ // },
147
+ // },
148
+ // defaultVariants: {
149
+ // vAlign: 'top',
150
+ // align: 'left',
151
+ // direction: 'column',
152
+ // isLight: false,
153
+ // },
154
+ // });
155
155
 
156
- export type BoxVariants = RecipeVariants<typeof box>;
157
- export type BoxContentVariants = RecipeVariants<typeof boxContent>;
156
+ // export type BoxVariants = RecipeVariants<typeof box>;
157
+ // export type BoxContentVariants = RecipeVariants<typeof boxContent>;
package/src/index.ts CHANGED
@@ -24,9 +24,6 @@ export * from './components/Header/export';
24
24
  export * from './components/Header/HeaderToggleNav/export';
25
25
  export * from './components/Footer/export';
26
26
 
27
- export * from './components/Box/export';
28
- export * from './components/Box/Alert/export';
29
-
30
27
  export * from './components/Nav/export';
31
28
 
32
29
  export * from './components/Icon/export';
@@ -633,113 +633,6 @@ export const themeContract = createGlobalThemeContract({
633
633
  color: 'latte-icon-color',
634
634
  },
635
635
 
636
- box: {
637
- border: 'latte-box-border',
638
- borderRadius: 'latte-box-borderRadius',
639
-
640
- gap: {
641
- mobile: 'latte-box-gap-mobile',
642
- sm: 'latte-box-gap-sm',
643
- md: 'latte-box-gap-md',
644
- lg: 'latte-box-gap-lg',
645
- xl: 'latte-box-gap-xl',
646
- '2xl': 'latte-box-gap-2xl',
647
- },
648
- variant: {
649
- transparent: {
650
- backgroundColor: 'latte-box-variant-transparent-backgroundColor',
651
- },
652
- primary: {
653
- backgroundColor: 'latte-box-variant-primary-backgroundColor',
654
- },
655
- secondary: {
656
- backgroundColor: 'latte-box-variant-secondary-backgroundColor',
657
- },
658
- },
659
- paddingTop: {
660
- sm: {
661
- mobile: 'latte-box-paddingTop-sm-mobile',
662
- sm: 'latte-box-paddingTop-sm-sm',
663
- md: 'latte-box-paddingTop-sm-md',
664
- lg: 'latte-box-paddingTop-sm-lg',
665
- xl: 'latte-box-paddingTop-sm-xl',
666
- '2xl': 'latte-box-paddingTop-sm-2xl',
667
- },
668
- md: {
669
- mobile: 'latte-box-paddingTop-md-mobile',
670
- sm: 'latte-box-paddingTop-md-sm',
671
- md: 'latte-box-paddingTop-md-md',
672
- lg: 'latte-box-paddingTop-md-lg',
673
- xl: 'latte-box-paddingTop-md-xl',
674
- '2xl': 'latte-box-paddingTop-md-2xl',
675
- },
676
- lg: {
677
- mobile: 'latte-box-paddingTop-lg-mobile',
678
- sm: 'latte-box-paddingTop-lg-sm',
679
- md: 'latte-box-paddingTop-lg-md',
680
- lg: 'latte-box-paddingTop-lg-lg',
681
- xl: 'latte-box-paddingTop-lg-xl',
682
- '2xl': 'latte-box-paddingTop-lg-xl',
683
- },
684
- },
685
- paddingLeft: {
686
- mobile: 'latte-box-paddingLeft-mobile',
687
- sm: 'latte-box-paddingLeft-sm',
688
- md: 'latte-box-paddingLeft-md',
689
- lg: 'latte-box-paddingLeft-lg',
690
- xl: 'latte-box-paddingLeft-xl',
691
- '2xl': 'latte-box-paddingLeft-2xl',
692
- },
693
- paddingRight: {
694
- mobile: 'latte-box-paddingRight-mobile',
695
- sm: 'latte-box-paddingRight-sm',
696
- md: 'latte-box-paddingRight-md',
697
- lg: 'latte-box-paddingRight-lg',
698
- xl: 'latte-box-paddingRight-xl',
699
- '2xl': 'latte-box-paddingRight-2xl',
700
- },
701
- paddingBottom: {
702
- mobile: 'latte-box-paddingBottom-mobile',
703
- sm: 'latte-box-paddingBottom-sm',
704
- md: 'latte-box-paddingBottom-md',
705
- lg: 'latte-box-paddingBottom-lg',
706
- xl: 'latte-box-paddingBottom-xl',
707
- '2xl': 'latte-box-paddingBottom-2xl',
708
- },
709
-
710
- adjacent: {
711
- marginTop: {
712
- mobile: 'latte-box-adjacent-marginTop-mobile',
713
- sm: 'latte-box-adjacent-marginTop-sm',
714
- md: 'latte-box-adjacent-marginTop-md',
715
- lg: 'latte-box-adjacent-marginTop-lg',
716
- xl: 'latte-box-adjacent-marginTop-xl',
717
- '2xl': 'latte-box-adjacent-marginTop-2xl',
718
- },
719
- },
720
- },
721
-
722
- boxAlert: {
723
- variant: {
724
- warning: {
725
- iconColor: 'latte-boxAlert-variant-warning-iconColor',
726
- backgroundColor: 'latte-boxAlert-variant-warning-backgroundColor',
727
- },
728
- info: {
729
- iconColor: 'latte-boxAlert-variant-info-iconColor',
730
- backgroundColor: 'latte-boxAlert-variant-info-backgroundColor',
731
- },
732
- success: {
733
- iconColor: 'latte-boxAlert-variant-success-iconColor',
734
- backgroundColor: 'latte-boxAlert-variant-success-backgroundColor',
735
- },
736
- danger: {
737
- iconColor: 'latte-boxAlert-variant-danger-iconColor',
738
- backgroundColor: 'latte-boxAlert-variant-danger-backgroundColor',
739
- },
740
- },
741
- },
742
-
743
636
  modal: {
744
637
  border: 'latte-modal-border',
745
638
  borderRadius: 'latte-modal-borderRadius',
@@ -34,8 +34,6 @@ export type ThemeOverrides = {
34
34
  carousel?: Partial<typeof baseLightTheme.carousel>;
35
35
  form?: Partial<typeof baseLightTheme.form>;
36
36
  logo?: Partial<typeof baseLightTheme.logo>;
37
- box?: Partial<typeof baseLightTheme.box>;
38
- boxAlert?: Partial<typeof baseLightTheme.boxAlert>;
39
37
  consentCookie?: Partial<typeof baseLightTheme.consentCookie>;
40
38
  };
41
39
 
@@ -72,8 +70,6 @@ const createAppTheme = (selector: string, overrides: ThemeOverrides = {}) => {
72
70
  carousel: { ...baseLightTheme.carousel, ...overrides.carousel },
73
71
  form: { ...baseLightTheme.form, ...overrides.form },
74
72
  logo: { ...baseLightTheme.logo, ...overrides.logo },
75
- box: { ...baseLightTheme.box, ...overrides.box },
76
- boxAlert: { ...baseLightTheme.boxAlert, ...overrides.boxAlert },
77
73
  consentCookie: { ...baseLightTheme.consentCookie, ...overrides.consentCookie },
78
74
  });
79
75
  };
@@ -111,8 +107,6 @@ const createAppDarkTheme = (selector: string, overrides: ThemeOverrides = {}) =>
111
107
  carousel: { ...baseDarkTheme.carousel, ...overrides.carousel },
112
108
  form: { ...baseDarkTheme.form, ...overrides.form },
113
109
  logo: { ...baseDarkTheme.logo, ...overrides.logo },
114
- box: { ...baseDarkTheme.box, ...overrides.box },
115
- boxAlert: { ...baseDarkTheme.boxAlert, ...overrides.boxAlert },
116
110
  consentCookie: { ...baseDarkTheme.consentCookie, ...overrides.consentCookie },
117
111
  });
118
112
  };