@latte-macchiat-io/latte-vanilla-components 0.0.191 → 0.0.192

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 (99) hide show
  1. package/package.json +4 -1
  2. package/src/components/Actions/index.tsx +20 -0
  3. package/src/components/Actions/styles.css.ts +54 -0
  4. package/src/components/Button/index.tsx +29 -0
  5. package/src/components/Button/stories.tsx +4 -22
  6. package/src/components/Button/styles.css.ts +131 -0
  7. package/src/components/Carousel/{Carousel.tsx → index.tsx} +18 -115
  8. package/src/components/Carousel/styles.css.ts +176 -0
  9. package/src/components/Columns/index.tsx +36 -0
  10. package/src/components/Columns/styles.css.ts +70 -0
  11. package/src/components/ConsentCookie/ConsentCookie.css.ts +1 -1
  12. package/src/components/ConsentCookie/ConsentCookie.tsx +3 -3
  13. package/src/components/Footer/index.tsx +21 -0
  14. package/src/components/Footer/styles.css.ts +33 -0
  15. package/src/components/Form/Form.css.ts +1 -1
  16. package/src/components/Form/Row/Row.css.ts +1 -1
  17. package/src/components/Form/TextField/Input/Input.css.ts +1 -1
  18. package/src/components/Form/TextField/Label/Label.css.ts +1 -1
  19. package/src/components/Form/TextField/TextField.css.ts +1 -1
  20. package/src/components/Form/TextField/Textarea/Textarea.css.ts +1 -1
  21. package/src/components/Header/index.tsx +53 -0
  22. package/src/components/Header/styles.css.ts +89 -0
  23. package/src/components/Heading/index.tsx +22 -0
  24. package/src/components/Heading/styles.css.ts +66 -0
  25. package/src/components/Heading/types.tsx +1 -0
  26. package/src/components/Icon/index.tsx +25 -0
  27. package/src/components/Icon/style.css.ts +11 -0
  28. package/src/components/KeyNumber/index.tsx +51 -0
  29. package/src/components/KeyNumber/styles.css.ts +76 -0
  30. package/src/components/LanguageSwitcher/index.tsx +80 -0
  31. package/src/components/LanguageSwitcher/{LanguageSwitcher.css.ts → styles.css.ts} +1 -1
  32. package/src/components/Logo/index.tsx +13 -0
  33. package/src/components/Logo/styles.css.ts +14 -0
  34. package/src/components/Main/index.tsx +17 -0
  35. package/src/components/Main/styles.css.ts +14 -0
  36. package/src/components/Modal/index.tsx +42 -0
  37. package/src/components/Modal/stories.tsx +14 -358
  38. package/src/components/Modal/styles.css.ts +90 -0
  39. package/src/components/Nav/index.tsx +22 -0
  40. package/src/components/Nav/styles.css.ts +30 -0
  41. package/src/components/NavLegal/index.tsx +17 -0
  42. package/src/components/NavLegal/styles.css.ts +20 -0
  43. package/src/components/NavSocial/index.tsx +32 -0
  44. package/src/components/NavSocial/styles.css.ts +33 -0
  45. package/src/components/Section/index.tsx +20 -0
  46. package/src/components/Section/stories.tsx +5 -57
  47. package/src/components/Section/styles.css.ts +106 -0
  48. package/src/components/ThemeTest/ThemeTest.css.ts +11 -0
  49. package/src/components/ThemeTest/ThemeTest.tsx +12 -0
  50. package/src/components/ThemeToggle/ThemeToggle.tsx +30 -0
  51. package/src/components/Video/index.tsx +117 -0
  52. package/src/components/Video/styles.css.ts +200 -0
  53. package/src/index.ts +29 -41
  54. package/src/styles/mediaqueries.ts +2 -0
  55. package/src/styles/sprinkles.css.ts +11 -8
  56. package/src/theme/baseThemeValues.ts +1235 -0
  57. package/src/theme/contract.css.ts +676 -0
  58. package/src/{themes → theme}/createTheme.ts +40 -1
  59. package/src/theme/default.css.ts +10 -0
  60. package/src/utils/combineResponsive.ts +9 -0
  61. package/src/utils/generateResponsiveMedia.ts +19 -0
  62. package/src/components/Actions/Actions.css.ts +0 -113
  63. package/src/components/Actions/Actions.tsx +0 -132
  64. package/src/components/Button/Button.css.ts +0 -119
  65. package/src/components/Button/Button.tsx +0 -132
  66. package/src/components/Carousel/Carousel.css.ts +0 -179
  67. package/src/components/Columns/Columns.css.ts +0 -185
  68. package/src/components/Columns/Columns.tsx +0 -142
  69. package/src/components/Footer/Footer.css.ts +0 -108
  70. package/src/components/Footer/Footer.tsx +0 -130
  71. package/src/components/Header/Header.css.ts +0 -111
  72. package/src/components/Header/Header.tsx +0 -158
  73. package/src/components/Icon/Icon.css.ts +0 -101
  74. package/src/components/Icon/Icon.tsx +0 -159
  75. package/src/components/KeyNumber/KeyNumber.css.ts +0 -158
  76. package/src/components/KeyNumber/KeyNumber.tsx +0 -166
  77. package/src/components/LanguageSwitcher/LanguageSwitcher.tsx +0 -168
  78. package/src/components/Logo/Logo.css.ts +0 -98
  79. package/src/components/Logo/Logo.tsx +0 -137
  80. package/src/components/Main/Main.css.ts +0 -62
  81. package/src/components/Main/Main.tsx +0 -130
  82. package/src/components/Modal/Modal.css.ts +0 -203
  83. package/src/components/Modal/Modal.tsx +0 -194
  84. package/src/components/Nav/Nav.css.ts +0 -123
  85. package/src/components/Nav/Nav.tsx +0 -130
  86. package/src/components/NavLegal/NavLegal.css.ts +0 -121
  87. package/src/components/NavLegal/NavLegal.tsx +0 -133
  88. package/src/components/NavSocial/NavSocial.css.ts +0 -121
  89. package/src/components/NavSocial/NavSocial.tsx +0 -169
  90. package/src/components/Section/Section.css.ts +0 -101
  91. package/src/components/Section/Section.tsx +0 -130
  92. package/src/components/Video/Video.css.ts +0 -210
  93. package/src/components/Video/Video.tsx +0 -243
  94. package/src/components/VideoFullWidth/VideoFullWidth.css.ts +0 -50
  95. package/src/components/VideoFullWidth/VideoFullWidth.tsx +0 -152
  96. package/src/components/VideoFullWidth/export.tsx +0 -2
  97. package/src/themes/baseThemeValues.ts +0 -160
  98. package/src/themes/contract.css.ts +0 -83
  99. package/src/types/withClassName.ts +0 -4
@@ -1,137 +0,0 @@
1
- import { clsx } from 'clsx';
2
- import { forwardRef } from 'react';
3
- import { logoRecipe, type LogoVariants } from './Logo.css';
4
- import { sprinkles, type Sprinkles } from '../../styles/sprinkles.css';
5
-
6
- export interface LogoProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color'>, Sprinkles, NonNullable<LogoVariants> {
7
- css?: string;
8
- as?: 'div' | 'a' | 'span';
9
- href?: string;
10
- }
11
-
12
- export const Logo = forwardRef<HTMLDivElement, LogoProps>(
13
- (
14
- {
15
- children,
16
- size,
17
- variant,
18
- responsive,
19
- as: Component = 'div',
20
- href,
21
- css,
22
- className,
23
- // Extract sprinkles props
24
- margin,
25
- marginTop,
26
- marginBottom,
27
- marginLeft,
28
- marginRight,
29
- padding,
30
- paddingTop,
31
- paddingBottom,
32
- paddingLeft,
33
- paddingRight,
34
- gap,
35
- display,
36
- flexDirection,
37
- justifyContent,
38
- flexWrap,
39
- flex,
40
- width,
41
- height,
42
- minWidth,
43
- maxWidth,
44
- minHeight,
45
- position,
46
- top,
47
- bottom,
48
- left,
49
- right,
50
- zIndex,
51
- fontSize,
52
- fontFamily,
53
- lineHeight,
54
- textAlign,
55
- fontWeight,
56
- color,
57
- backgroundColor,
58
- borderRadius,
59
- borderWidth,
60
- borderStyle,
61
- borderColor,
62
- boxShadow,
63
- opacity,
64
- overflow,
65
- overflowX,
66
- overflowY,
67
- ...htmlProps
68
- },
69
- ref
70
- ) => {
71
- // If href is provided, use 'a' tag and set variant to 'link'
72
- // TODO const FinalComponent = href ? 'a' : Component;
73
- const finalVariant = href ? 'link' : variant;
74
-
75
- return (
76
- <div
77
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
78
- ref={ref as any}
79
- // TODO href={href}
80
- className={clsx(
81
- logoRecipe({ size, variant: finalVariant, responsive }),
82
- sprinkles({
83
- margin,
84
- marginTop,
85
- marginBottom,
86
- marginLeft,
87
- marginRight,
88
- padding,
89
- paddingTop,
90
- paddingBottom,
91
- paddingLeft,
92
- paddingRight,
93
- gap,
94
- display,
95
- flexDirection,
96
- justifyContent,
97
- flexWrap,
98
- flex,
99
- width,
100
- height,
101
- minWidth,
102
- maxWidth,
103
- minHeight,
104
- position,
105
- top,
106
- bottom,
107
- left,
108
- right,
109
- zIndex,
110
- fontSize,
111
- fontFamily,
112
- lineHeight,
113
- textAlign,
114
- fontWeight,
115
- color,
116
- backgroundColor,
117
- borderRadius,
118
- borderWidth,
119
- borderStyle,
120
- borderColor,
121
- boxShadow,
122
- opacity,
123
- overflow,
124
- overflowX,
125
- overflowY,
126
- }),
127
- css,
128
- className
129
- )}
130
- {...htmlProps}>
131
- {children}
132
- </div>
133
- );
134
- }
135
- );
136
-
137
- Logo.displayName = 'Logo';
@@ -1,62 +0,0 @@
1
- import { style } from '@vanilla-extract/css';
2
- import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
3
- import { themeContract } from '../../themes/contract.css';
4
-
5
- const mainBase = style({
6
- display: 'flex',
7
- flexDirection: 'column',
8
- alignItems: 'center',
9
- justifyContent: 'flex-start',
10
- width: '100%',
11
- minHeight: '100vh',
12
- maxWidth: themeContract.maxWidth,
13
- margin: '0 auto',
14
- paddingTop: themeContract.header.height,
15
- paddingBottom: themeContract.footer.height,
16
- backgroundColor: themeContract.colors.background,
17
- color: themeContract.colors.text,
18
- fontFamily: themeContract.fonts.body,
19
- });
20
-
21
- export const mainRecipe = recipe({
22
- base: mainBase,
23
-
24
- variants: {
25
- centered: {
26
- true: {
27
- justifyContent: 'center',
28
- alignItems: 'center',
29
- },
30
- false: {
31
- justifyContent: 'flex-start',
32
- alignItems: 'stretch',
33
- },
34
- },
35
- fullWidth: {
36
- true: {
37
- maxWidth: '100%',
38
- },
39
- false: {
40
- maxWidth: themeContract.maxWidth,
41
- },
42
- },
43
- noPadding: {
44
- true: {
45
- paddingTop: '0',
46
- paddingBottom: '0',
47
- },
48
- false: {
49
- paddingTop: themeContract.header.height,
50
- paddingBottom: themeContract.footer.height,
51
- },
52
- },
53
- },
54
-
55
- defaultVariants: {
56
- centered: false,
57
- fullWidth: false,
58
- noPadding: false,
59
- },
60
- });
61
-
62
- export type MainVariants = RecipeVariants<typeof mainRecipe>;
@@ -1,130 +0,0 @@
1
- import { clsx } from 'clsx';
2
- import { forwardRef } from 'react';
3
-
4
- import { mainRecipe, type MainVariants } from './Main.css';
5
- import { sprinkles, type Sprinkles } from '../../styles/sprinkles.css';
6
-
7
- export interface MainProps extends Omit<React.HTMLAttributes<HTMLElement>, 'color'>, Sprinkles, NonNullable<MainVariants> {
8
- css?: string;
9
- as?: 'main' | 'div';
10
- }
11
-
12
- export const Main = forwardRef<HTMLElement, MainProps>(
13
- (
14
- {
15
- children,
16
- centered,
17
- fullWidth,
18
- noPadding,
19
- as: Component = 'main',
20
- css,
21
- className,
22
- // Extract sprinkles props
23
- margin,
24
- marginTop,
25
- marginBottom,
26
- marginLeft,
27
- marginRight,
28
- padding,
29
- paddingTop,
30
- paddingBottom,
31
- paddingLeft,
32
- paddingRight,
33
- gap,
34
- display,
35
- flexDirection,
36
- justifyContent,
37
- flexWrap,
38
- flex,
39
- width,
40
- height,
41
- minWidth,
42
- maxWidth,
43
- minHeight,
44
- position,
45
- top,
46
- bottom,
47
- left,
48
- right,
49
- zIndex,
50
- fontSize,
51
- fontFamily,
52
- lineHeight,
53
- textAlign,
54
- fontWeight,
55
- color,
56
- backgroundColor,
57
- borderRadius,
58
- borderWidth,
59
- borderStyle,
60
- borderColor,
61
- boxShadow,
62
- opacity,
63
- overflow,
64
- overflowX,
65
- overflowY,
66
- ...htmlProps
67
- },
68
- ref
69
- ) => {
70
- return (
71
- <Component
72
- ref={ref as any}
73
- className={clsx(
74
- mainRecipe({ centered, fullWidth, noPadding }),
75
- sprinkles({
76
- margin,
77
- marginTop,
78
- marginBottom,
79
- marginLeft,
80
- marginRight,
81
- padding,
82
- paddingTop,
83
- paddingBottom,
84
- paddingLeft,
85
- paddingRight,
86
- gap,
87
- display,
88
- flexDirection,
89
- justifyContent,
90
- flexWrap,
91
- flex,
92
- width,
93
- height,
94
- minWidth,
95
- maxWidth,
96
- minHeight,
97
- position,
98
- top,
99
- bottom,
100
- left,
101
- right,
102
- zIndex,
103
- fontSize,
104
- fontFamily,
105
- lineHeight,
106
- textAlign,
107
- fontWeight,
108
- color,
109
- backgroundColor,
110
- borderRadius,
111
- borderWidth,
112
- borderStyle,
113
- borderColor,
114
- boxShadow,
115
- opacity,
116
- overflow,
117
- overflowX,
118
- overflowY,
119
- }),
120
- css,
121
- className
122
- )}
123
- {...htmlProps}>
124
- {children}
125
- </Component>
126
- );
127
- }
128
- );
129
-
130
- Main.displayName = 'Main';
@@ -1,203 +0,0 @@
1
- import { keyframes, style } from '@vanilla-extract/css';
2
- import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
3
- import { queries } from '../../styles/mediaqueries';
4
- import { themeContract } from '../../themes/contract.css';
5
-
6
- const fadeIn = keyframes({
7
- from: { opacity: '0' },
8
- to: { opacity: '1' },
9
- });
10
-
11
- const slideIn = keyframes({
12
- from: {
13
- opacity: '0',
14
- transform: 'translate(-50%, -60%) scale(0.95)',
15
- },
16
- to: {
17
- opacity: '1',
18
- transform: 'translate(-50%, -50%) scale(1)',
19
- },
20
- });
21
-
22
- const modalOverlay = style({
23
- position: 'fixed',
24
- top: 0,
25
- left: 0,
26
- right: 0,
27
- bottom: 0,
28
- zIndex: 50,
29
- backgroundColor: 'rgba(0, 0, 0, 0.5)',
30
- backdropFilter: 'blur(4px)',
31
- animation: `${fadeIn} 0.2s ease-out`,
32
- display: 'flex',
33
- alignItems: 'center',
34
- justifyContent: 'center',
35
- padding: themeContract.space.md,
36
- overflowY: 'auto',
37
- });
38
-
39
- const modalContent = style({
40
- position: 'relative',
41
- backgroundColor: themeContract.colors.background,
42
- borderRadius: themeContract.radii.lg,
43
- boxShadow: themeContract.shadows.xl,
44
- border: `1px solid ${themeContract.colors.border}`,
45
- maxHeight: '90vh',
46
- maxWidth: '90vw',
47
- width: '100%',
48
- overflowY: 'auto',
49
- animation: `${slideIn} 0.3s ease-out`,
50
-
51
- '@media': {
52
- [queries.sm]: {
53
- maxWidth: '500px',
54
- },
55
- [queries.md]: {
56
- maxWidth: '600px',
57
- },
58
- [queries.lg]: {
59
- maxWidth: '800px',
60
- },
61
- },
62
- });
63
-
64
- const modalCloseButton = style({
65
- position: 'absolute',
66
- top: themeContract.space.md,
67
- right: themeContract.space.md,
68
- zIndex: 10,
69
- display: 'flex',
70
- alignItems: 'center',
71
- justifyContent: 'center',
72
- width: '32px',
73
- height: '32px',
74
- border: 'none',
75
- borderRadius: themeContract.radii.full,
76
- backgroundColor: themeContract.colors.surface,
77
- color: themeContract.colors.text,
78
- cursor: 'pointer',
79
- transition: 'all 0.2s ease-in-out',
80
-
81
- // ':hover': {
82
- // backgroundColor: themeContract.colors.error,
83
- // color: themeContract.colors.background,
84
- // transform: 'scale(1.1)',
85
- // },
86
-
87
- // ':focus': {
88
- // outline: '2px solid',
89
- // outlineColor: themeContract.colors.primary,
90
- // outlineOffset: '2px',
91
- // },
92
- });
93
-
94
- export const modalRecipe = recipe({
95
- base: modalOverlay,
96
-
97
- variants: {
98
- size: {
99
- sm: {},
100
- md: {},
101
- lg: {},
102
- xl: {},
103
- full: {
104
- padding: 0,
105
-
106
- // selectors: {
107
- // '& > div': {
108
- // width: '100vw',
109
- // height: '100vh',
110
- // maxWidth: 'none',
111
- // maxHeight: 'none',
112
- // borderRadius: 0,
113
- // },
114
- // },
115
- },
116
- },
117
- centered: {
118
- true: {
119
- alignItems: 'center',
120
- justifyContent: 'center',
121
- },
122
- false: {
123
- alignItems: 'flex-start',
124
- justifyContent: 'center',
125
- paddingTop: '5vh',
126
- },
127
- },
128
- },
129
-
130
- defaultVariants: {
131
- size: 'md',
132
- centered: true,
133
- },
134
- });
135
-
136
- export const modalContentRecipe = recipe({
137
- base: modalContent,
138
-
139
- variants: {
140
- size: {
141
- sm: {
142
- padding: themeContract.space.md,
143
- '@media': {
144
- [queries.sm]: {
145
- maxWidth: '400px',
146
- },
147
- },
148
- },
149
- md: {
150
- padding: themeContract.space.lg,
151
- '@media': {
152
- [queries.sm]: {
153
- maxWidth: '500px',
154
- },
155
- },
156
- },
157
- lg: {
158
- padding: themeContract.space.xl,
159
- '@media': {
160
- [queries.md]: {
161
- maxWidth: '700px',
162
- },
163
- },
164
- },
165
- xl: {
166
- padding: themeContract.space.xl,
167
- '@media': {
168
- [queries.lg]: {
169
- maxWidth: '900px',
170
- },
171
- },
172
- },
173
- full: {
174
- width: '100vw',
175
- height: '100vh',
176
- maxWidth: 'none',
177
- maxHeight: 'none',
178
- borderRadius: 0,
179
- padding: themeContract.space.xl,
180
- },
181
- },
182
- align: {
183
- left: {
184
- textAlign: 'left',
185
- },
186
- center: {
187
- textAlign: 'center',
188
- },
189
- right: {
190
- textAlign: 'right',
191
- },
192
- },
193
- },
194
-
195
- defaultVariants: {
196
- size: 'md',
197
- align: 'left',
198
- },
199
- });
200
-
201
- export { modalCloseButton };
202
- export type ModalVariants = RecipeVariants<typeof modalRecipe>;
203
- export type ModalContentVariants = RecipeVariants<typeof modalContentRecipe>;
@@ -1,194 +0,0 @@
1
- import { clsx } from 'clsx';
2
- import { forwardRef, useEffect, useState } from 'react';
3
- import { modalCloseButton, modalContentRecipe, type ModalContentVariants, modalRecipe, type ModalVariants } from './Modal.css';
4
- import { sprinkles, type Sprinkles } from '../../styles/sprinkles.css';
5
- import { Icon } from '../Icon/Icon';
6
-
7
- export interface ModalProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color'>, Sprinkles, NonNullable<ModalVariants> {
8
- css?: string;
9
- isOpen: boolean;
10
- onClose?: () => void;
11
- showCloseButton?: boolean;
12
- closeOnBackdropClick?: boolean;
13
- closeOnEscape?: boolean;
14
- contentProps?: ModalContentVariants & {
15
- css?: string;
16
- className?: string;
17
- };
18
- }
19
-
20
- export const Modal = forwardRef<HTMLDivElement, ModalProps>(
21
- (
22
- {
23
- children,
24
- isOpen,
25
- onClose,
26
- showCloseButton = true,
27
- closeOnBackdropClick = true,
28
- closeOnEscape = true,
29
- contentProps = {},
30
- size,
31
- centered,
32
- css,
33
- className,
34
- // Extract sprinkles props
35
- margin,
36
- marginTop,
37
- marginBottom,
38
- marginLeft,
39
- marginRight,
40
- padding,
41
- paddingTop,
42
- paddingBottom,
43
- paddingLeft,
44
- paddingRight,
45
- gap,
46
- display,
47
- flexDirection,
48
- justifyContent,
49
- flexWrap,
50
- flex,
51
- width,
52
- height,
53
- minWidth,
54
- maxWidth,
55
- minHeight,
56
- position,
57
- top,
58
- bottom,
59
- left,
60
- right,
61
- zIndex,
62
- fontSize,
63
- fontFamily,
64
- lineHeight,
65
- textAlign,
66
- fontWeight,
67
- color,
68
- backgroundColor,
69
- borderRadius,
70
- borderWidth,
71
- borderStyle,
72
- borderColor,
73
- boxShadow,
74
- opacity,
75
- overflow,
76
- overflowX,
77
- overflowY,
78
- ...htmlProps
79
- },
80
- ref
81
- ) => {
82
- const [shouldRender, setShouldRender] = useState(isOpen);
83
-
84
- useEffect(() => {
85
- if (isOpen) {
86
- setShouldRender(true);
87
- document.body.style.overflow = 'hidden';
88
- } else {
89
- const timer = setTimeout(() => setShouldRender(false), 300);
90
- document.body.style.overflow = '';
91
- return () => clearTimeout(timer);
92
- }
93
- }, [isOpen]);
94
-
95
- useEffect(() => {
96
- const handleEscape = (event: KeyboardEvent) => {
97
- if (closeOnEscape && event.key === 'Escape' && onClose) {
98
- onClose();
99
- }
100
- };
101
-
102
- if (isOpen) {
103
- document.addEventListener('keydown', handleEscape);
104
- return () => document.removeEventListener('keydown', handleEscape);
105
- }
106
- }, [isOpen, closeOnEscape, onClose]);
107
-
108
- const handleBackdropClick = (event: React.MouseEvent) => {
109
- if (closeOnBackdropClick && event.target === event.currentTarget && onClose) {
110
- onClose();
111
- }
112
- };
113
-
114
- if (!shouldRender) return null;
115
-
116
- return (
117
- <div
118
- ref={ref}
119
- className={clsx(
120
- modalRecipe({ size, centered }),
121
- sprinkles({
122
- margin,
123
- marginTop,
124
- marginBottom,
125
- marginLeft,
126
- marginRight,
127
- padding,
128
- paddingTop,
129
- paddingBottom,
130
- paddingLeft,
131
- paddingRight,
132
- gap,
133
- display,
134
- flexDirection,
135
- justifyContent,
136
- flexWrap,
137
- flex,
138
- width,
139
- height,
140
- minWidth,
141
- maxWidth,
142
- minHeight,
143
- position,
144
- top,
145
- bottom,
146
- left,
147
- right,
148
- zIndex,
149
- fontSize,
150
- fontFamily,
151
- lineHeight,
152
- textAlign,
153
- fontWeight,
154
- color,
155
- backgroundColor,
156
- borderRadius,
157
- borderWidth,
158
- borderStyle,
159
- borderColor,
160
- boxShadow,
161
- opacity,
162
- overflow,
163
- overflowX,
164
- overflowY,
165
- }),
166
- css,
167
- className
168
- )}
169
- onClick={handleBackdropClick}
170
- role="dialog"
171
- aria-modal="true"
172
- {...htmlProps}>
173
- <div
174
- className={clsx(
175
- modalContentRecipe({
176
- size: contentProps.size || size,
177
- align: contentProps.align,
178
- }),
179
- contentProps.css,
180
- contentProps.className
181
- )}>
182
- {showCloseButton && onClose && (
183
- <button type="button" className={modalCloseButton} onClick={onClose} aria-label="Close modal">
184
- <Icon icon="close" size="sm" />
185
- </button>
186
- )}
187
- {children}
188
- </div>
189
- </div>
190
- );
191
- }
192
- );
193
-
194
- Modal.displayName = 'Modal';