@dnanpm/ui-components 0.7.0 → 0.9.0

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 (159) hide show
  1. package/dist/components/Accordion/Accordion.css +6 -3
  2. package/dist/components/AccordionItem/AccordionItem.css +6 -3
  3. package/dist/components/Breadcrumb/Breadcrumb.css +15 -12
  4. package/dist/components/Breadcrumb/Breadcrumb.module.css.cjs +6 -6
  5. package/dist/components/Breadcrumb/Breadcrumb.module.css.js +6 -6
  6. package/dist/components/Button/Button.css +33 -32
  7. package/dist/components/Button/Button.module.css.cjs +11 -11
  8. package/dist/components/Button/Button.module.css.js +11 -11
  9. package/dist/components/ButtonCard/ButtonCard.cjs +105 -0
  10. package/dist/components/ButtonCard/ButtonCard.cjs.map +1 -0
  11. package/dist/components/ButtonCard/ButtonCard.css +166 -0
  12. package/dist/components/ButtonCard/ButtonCard.d.ts +3 -0
  13. package/dist/components/ButtonCard/ButtonCard.d.ts.map +1 -0
  14. package/dist/components/ButtonCard/ButtonCard.js +105 -0
  15. package/dist/components/ButtonCard/ButtonCard.js.map +1 -0
  16. package/dist/components/ButtonCard/ButtonCard.module.css.cjs +18 -0
  17. package/dist/components/ButtonCard/ButtonCard.module.css.cjs.map +1 -0
  18. package/dist/components/ButtonCard/ButtonCard.module.css.js +19 -0
  19. package/dist/components/ButtonCard/ButtonCard.module.css.js.map +1 -0
  20. package/dist/components/ButtonCard/ButtonCard.types.d.ts +103 -0
  21. package/dist/components/ButtonCard/ButtonCard.types.d.ts.map +1 -0
  22. package/dist/components/ButtonCard/index.d.ts +3 -0
  23. package/dist/components/ButtonCard/index.d.ts.map +1 -0
  24. package/dist/components/ContentCard/ContentCard.cjs +96 -0
  25. package/dist/components/ContentCard/ContentCard.cjs.map +1 -0
  26. package/dist/components/ContentCard/ContentCard.css +249 -0
  27. package/dist/components/ContentCard/ContentCard.d.ts +3 -0
  28. package/dist/components/ContentCard/ContentCard.d.ts.map +1 -0
  29. package/dist/components/ContentCard/ContentCard.js +96 -0
  30. package/dist/components/ContentCard/ContentCard.js.map +1 -0
  31. package/dist/components/ContentCard/ContentCard.module.css.cjs +24 -0
  32. package/dist/components/ContentCard/ContentCard.module.css.cjs.map +1 -0
  33. package/dist/components/ContentCard/ContentCard.module.css.js +25 -0
  34. package/dist/components/ContentCard/ContentCard.module.css.js.map +1 -0
  35. package/dist/components/ContentCard/ContentCard.types.d.ts +99 -0
  36. package/dist/components/ContentCard/ContentCard.types.d.ts.map +1 -0
  37. package/dist/components/ContentCard/index.d.ts +3 -0
  38. package/dist/components/ContentCard/index.d.ts.map +1 -0
  39. package/dist/components/Drawer/Drawer.cjs +101 -0
  40. package/dist/components/Drawer/Drawer.cjs.map +1 -0
  41. package/dist/components/Drawer/Drawer.css +218 -0
  42. package/dist/components/Drawer/Drawer.d.ts +3 -0
  43. package/dist/components/Drawer/Drawer.d.ts.map +1 -0
  44. package/dist/components/Drawer/Drawer.js +101 -0
  45. package/dist/components/Drawer/Drawer.js.map +1 -0
  46. package/dist/components/Drawer/Drawer.module.css.cjs +37 -0
  47. package/dist/components/Drawer/Drawer.module.css.cjs.map +1 -0
  48. package/dist/components/Drawer/Drawer.module.css.js +37 -0
  49. package/dist/components/Drawer/Drawer.module.css.js.map +1 -0
  50. package/dist/components/Drawer/Drawer.types.d.ts +63 -0
  51. package/dist/components/Drawer/Drawer.types.d.ts.map +1 -0
  52. package/dist/components/Drawer/index.d.ts +3 -0
  53. package/dist/components/Drawer/index.d.ts.map +1 -0
  54. package/dist/components/Footer/Footer.css +87 -77
  55. package/dist/components/Footer/Footer.module.css.cjs +39 -39
  56. package/dist/components/Footer/Footer.module.css.js +39 -39
  57. package/dist/components/FunctionButton/FunctionButton.cjs +34 -0
  58. package/dist/components/FunctionButton/FunctionButton.cjs.map +1 -0
  59. package/dist/components/FunctionButton/FunctionButton.css +124 -0
  60. package/dist/components/FunctionButton/FunctionButton.d.ts +3 -0
  61. package/dist/components/FunctionButton/FunctionButton.d.ts.map +1 -0
  62. package/dist/components/FunctionButton/FunctionButton.js +34 -0
  63. package/dist/components/FunctionButton/FunctionButton.js.map +1 -0
  64. package/dist/components/FunctionButton/FunctionButton.module.css.cjs +11 -0
  65. package/dist/components/FunctionButton/FunctionButton.module.css.cjs.map +1 -0
  66. package/dist/components/FunctionButton/FunctionButton.module.css.js +12 -0
  67. package/dist/components/FunctionButton/FunctionButton.module.css.js.map +1 -0
  68. package/dist/components/FunctionButton/FunctionButton.types.d.ts +21 -0
  69. package/dist/components/FunctionButton/FunctionButton.types.d.ts.map +1 -0
  70. package/dist/components/FunctionButton/index.d.ts +3 -0
  71. package/dist/components/FunctionButton/index.d.ts.map +1 -0
  72. package/dist/components/Hero/Hero.cjs +24 -26
  73. package/dist/components/Hero/Hero.cjs.map +1 -1
  74. package/dist/components/Hero/Hero.css +81 -74
  75. package/dist/components/Hero/Hero.js +24 -26
  76. package/dist/components/Hero/Hero.js.map +1 -1
  77. package/dist/components/Hero/Hero.module.css.cjs +20 -17
  78. package/dist/components/Hero/Hero.module.css.cjs.map +1 -1
  79. package/dist/components/Hero/Hero.module.css.js +20 -17
  80. package/dist/components/Hero/Hero.module.css.js.map +1 -1
  81. package/dist/components/IconButton/IconButton.css +32 -34
  82. package/dist/components/IconButton/IconButton.module.css.cjs +9 -9
  83. package/dist/components/IconButton/IconButton.module.css.js +9 -9
  84. package/dist/components/Label/Label.css +2 -3
  85. package/dist/components/MainNavigation/MainNavigation.cjs +415 -120
  86. package/dist/components/MainNavigation/MainNavigation.cjs.map +1 -1
  87. package/dist/components/MainNavigation/MainNavigation.css +265 -159
  88. package/dist/components/MainNavigation/MainNavigation.d.ts +1 -1
  89. package/dist/components/MainNavigation/MainNavigation.d.ts.map +1 -1
  90. package/dist/components/MainNavigation/MainNavigation.js +417 -122
  91. package/dist/components/MainNavigation/MainNavigation.js.map +1 -1
  92. package/dist/components/MainNavigation/MainNavigation.module.css.cjs +78 -68
  93. package/dist/components/MainNavigation/MainNavigation.module.css.cjs.map +1 -1
  94. package/dist/components/MainNavigation/MainNavigation.module.css.js +78 -68
  95. package/dist/components/MainNavigation/MainNavigation.module.css.js.map +1 -1
  96. package/dist/components/MainNavigation/MainNavigation.types.d.ts +64 -17
  97. package/dist/components/MainNavigation/MainNavigation.types.d.ts.map +1 -1
  98. package/dist/components/MainNavigation/MainNavigation.utils.cjs +20 -0
  99. package/dist/components/MainNavigation/MainNavigation.utils.cjs.map +1 -1
  100. package/dist/components/MainNavigation/MainNavigation.utils.d.ts +10 -1
  101. package/dist/components/MainNavigation/MainNavigation.utils.d.ts.map +1 -1
  102. package/dist/components/MainNavigation/MainNavigation.utils.js +20 -0
  103. package/dist/components/MainNavigation/MainNavigation.utils.js.map +1 -1
  104. package/dist/components/MainNavigation/index.d.ts +1 -1
  105. package/dist/components/MainNavigation/index.d.ts.map +1 -1
  106. package/dist/components/Modal/Modal.cjs +101 -0
  107. package/dist/components/Modal/Modal.cjs.map +1 -0
  108. package/dist/components/Modal/Modal.css +204 -0
  109. package/dist/components/Modal/Modal.d.ts +3 -0
  110. package/dist/components/Modal/Modal.d.ts.map +1 -0
  111. package/dist/components/Modal/Modal.js +101 -0
  112. package/dist/components/Modal/Modal.js.map +1 -0
  113. package/dist/components/Modal/Modal.module.css.cjs +39 -0
  114. package/dist/components/Modal/Modal.module.css.cjs.map +1 -0
  115. package/dist/components/Modal/Modal.module.css.js +39 -0
  116. package/dist/components/Modal/Modal.module.css.js.map +1 -0
  117. package/dist/components/Modal/Modal.types.d.ts +62 -0
  118. package/dist/components/Modal/Modal.types.d.ts.map +1 -0
  119. package/dist/components/Modal/index.d.ts +3 -0
  120. package/dist/components/Modal/index.d.ts.map +1 -0
  121. package/dist/components/Modal/useDialogDismissal.cjs +41 -0
  122. package/dist/components/Modal/useDialogDismissal.cjs.map +1 -0
  123. package/dist/components/Modal/useDialogDismissal.d.ts +17 -0
  124. package/dist/components/Modal/useDialogDismissal.d.ts.map +1 -0
  125. package/dist/components/Modal/useDialogDismissal.js +41 -0
  126. package/dist/components/Modal/useDialogDismissal.js.map +1 -0
  127. package/dist/components/Modal/useNativeDialog.cjs +126 -0
  128. package/dist/components/Modal/useNativeDialog.cjs.map +1 -0
  129. package/dist/components/Modal/useNativeDialog.d.ts +14 -0
  130. package/dist/components/Modal/useNativeDialog.d.ts.map +1 -0
  131. package/dist/components/Modal/useNativeDialog.js +126 -0
  132. package/dist/components/Modal/useNativeDialog.js.map +1 -0
  133. package/dist/components/Notification/Notification.css +6 -3
  134. package/dist/components/Pictograph/Pictograph.css +6 -3
  135. package/dist/components/Pictograph/PictographItem.css +6 -3
  136. package/dist/components/Quote/Quote.css +2 -3
  137. package/dist/components/Spinner/Spinner.css +6 -3
  138. package/dist/index.cjs +10 -0
  139. package/dist/index.cjs.map +1 -1
  140. package/dist/index.d.ts +11 -1
  141. package/dist/index.d.ts.map +1 -1
  142. package/dist/index.js +10 -0
  143. package/dist/index.js.map +1 -1
  144. package/dist/styles/utils/elevation.css +2 -3
  145. package/dist/styles/utils/elevation.module.css.cjs +3 -0
  146. package/dist/styles/utils/elevation.module.css.cjs.map +1 -1
  147. package/dist/styles/utils/elevation.module.css.js +4 -1
  148. package/dist/styles/utils/elevation.module.css.js.map +1 -1
  149. package/dist/styles/utils/focus.css +26 -24
  150. package/dist/styles/utils/focus.module.css.cjs +3 -6
  151. package/dist/styles/utils/focus.module.css.cjs.map +1 -1
  152. package/dist/styles/utils/focus.module.css.js +4 -7
  153. package/dist/styles/utils/focus.module.css.js.map +1 -1
  154. package/dist/styles/utils/overlay.css +2 -3
  155. package/dist/styles/utils/text-decoration.css +4 -4
  156. package/dist/styles/utils/text-decoration.module.css.cjs +2 -2
  157. package/dist/styles/utils/text-decoration.module.css.js +2 -2
  158. package/dist/styles.css +17 -7
  159. package/package.json +3 -3
@@ -1,4 +1,4 @@
1
- @layer dds-components {._hero_1xib4_1 {
1
+ @layer dds-base, dds-components;@layer dds-components { @layer fallback, components; }@layer dds-components.components{._hero_1itry_1 {
2
2
  position: relative;
3
3
  display: flex;
4
4
  flex-direction: column;
@@ -6,9 +6,14 @@
6
6
  padding-top: var(--spacing-space-40);
7
7
  container-name: hero;
8
8
  container-type: inline-size;
9
+
10
+ /* Shared content-column geometry; the logo derives its position from these. */
11
+ --_hero-content-pad-start: var(--spacing-space-20);
12
+ --_hero-content-pad-end: var(--spacing-space-20);
13
+ --_hero-card-fraction: 1;
9
14
  }
10
15
 
11
- ._hero__background_1xib4_11 {
16
+ ._hero__background_1itry_16 {
12
17
  position: absolute;
13
18
  inset-inline: 0;
14
19
  top: 0;
@@ -17,21 +22,21 @@
17
22
  overflow: clip;
18
23
  }
19
24
 
20
- ._hero__backgroundImageComponent_1xib4_20 {
25
+ ._hero__backgroundImageComponent_1itry_25 {
21
26
  width: 100%;
22
27
  height: 100%;
23
28
  }
24
29
 
25
- ._hero__backgroundImageComponent_1xib4_20 > * {
30
+ ._hero__backgroundImageComponent_1itry_25 > * {
26
31
  width: 100%;
27
32
  height: 100%;
28
33
  }
29
34
 
30
- ._hero__backgroundImageComponent_1xib4_20 img,
31
- ._hero__backgroundImageComponent_1xib4_20 picture,
32
- ._hero__backgroundImageComponent_1xib4_20 video,
33
- ._hero__backgroundImageComponent_1xib4_20 canvas,
34
- ._hero__backgroundImageComponent_1xib4_20 svg {
35
+ ._hero__backgroundImageComponent_1itry_25 img,
36
+ ._hero__backgroundImageComponent_1itry_25 picture,
37
+ ._hero__backgroundImageComponent_1itry_25 video,
38
+ ._hero__backgroundImageComponent_1itry_25 canvas,
39
+ ._hero__backgroundImageComponent_1itry_25 svg {
35
40
  display: block;
36
41
  width: 100%;
37
42
  height: 100%;
@@ -39,24 +44,35 @@
39
44
  object-position: right center;
40
45
  }
41
46
 
42
- ._hero__logoImage_1xib4_42 {
47
+ ._hero__logoImageWrap_1itry_47 {
48
+ position: absolute;
49
+ inset: 0;
50
+ max-width: 1280px;
51
+ margin-inline: auto;
52
+ }
53
+
54
+ ._hero__logoImage_1itry_47 {
43
55
  position: absolute;
56
+ /* Insets bound the available area; padding provides the safety margins to those edges. */
44
57
  top: 0;
45
- left: 0;
46
58
  right: 0;
59
+ bottom: var(--spacing-space-40);
60
+ left: 0;
47
61
  display: flex;
48
62
  align-items: center;
49
63
  justify-content: center;
50
- height: 200px;
51
- padding-inline: var(--spacing-space-20);
64
+ max-width: 500px;
65
+ margin-inline: auto;
66
+ padding: var(--spacing-space-32) var(--spacing-space-40) var(--spacing-space-20);
52
67
  }
53
68
 
54
- ._hero__logoImage_1xib4_42 > * {
55
- height: auto;
56
- max-height: 80%;
69
+ ._hero__logoImage_1itry_47 > * {
70
+ max-width: 100%;
71
+ max-height: 100%;
72
+ object-fit: contain;
57
73
  }
58
74
 
59
- ._hero__overlay_1xib4_59 {
75
+ ._hero__overlay_1itry_75 {
60
76
  position: absolute;
61
77
  inset-inline: 0;
62
78
  bottom: 0;
@@ -68,7 +84,7 @@
68
84
  );
69
85
  }
70
86
 
71
- ._hero__content_1xib4_71 {
87
+ ._hero__content_1itry_87 {
72
88
  position: relative;
73
89
  z-index: 1;
74
90
  display: flex;
@@ -80,74 +96,74 @@
80
96
  width: 100%;
81
97
  margin-inline: auto;
82
98
  padding-top: 200px;
83
- padding-inline: var(--spacing-space-20);
99
+ padding-inline: var(--_hero-content-pad-start) var(--_hero-content-pad-end);
84
100
  }
85
101
 
86
- ._hero__card_1xib4_86 {
102
+ ._hero__card_1itry_102 {
87
103
  min-width: 0;
88
- width: 100%;
104
+ width: calc(var(--_hero-card-fraction) * 100%);
89
105
  background-color: var(--color-semantic-surface-base);
90
106
  border: var(--borderwidth-semantic-xs) solid var(--color-semantic-border-neutral-base);
91
107
  border-radius: var(--radius-semantic-md);
92
108
  padding: var(--spacing-space-20);
93
109
  }
94
110
 
95
- ._hero__main_1xib4_95 {
111
+ ._hero__main_1itry_111 {
96
112
  display: flex;
97
113
  flex-direction: column;
98
114
  gap: var(--spacing-space-40);
99
115
  }
100
116
 
101
- ._hero__text_1xib4_101 {
117
+ ._hero__text_1itry_117 {
102
118
  display: flex;
103
119
  flex-direction: column;
104
120
  gap: var(--spacing-space-20);
105
121
  }
106
122
 
107
- ._hero__header_1xib4_107 {
123
+ ._hero__header_1itry_123 {
108
124
  display: flex;
109
125
  flex-direction: column;
110
126
  gap: var(--spacing-space-8);
111
127
  }
112
128
 
113
- ._hero__label_1xib4_113 {
129
+ ._hero__label_1itry_129 {
114
130
  align-self: flex-start;
115
131
  }
116
132
 
117
- ._hero__heading_1xib4_117 {
133
+ ._hero__heading_1itry_133 {
118
134
  margin: 0;
119
135
  color: var(--color-semantic-foreground-default);
120
136
  text-wrap: balance;
121
137
  }
122
138
 
123
- ._hero__heading--default_1xib4_123 {
139
+ ._hero__heading--default_1itry_139 {
124
140
  font: var(--typography-heading-lg);
125
141
  }
126
142
 
127
- ._hero__heading--large_1xib4_127 {
143
+ ._hero__heading--large_1itry_143 {
128
144
  font: var(--typography-heading-xl);
129
145
  }
130
146
 
131
- ._hero__heading--small_1xib4_131 {
147
+ ._hero__heading--small_1itry_147 {
132
148
  font: var(--typography-heading-md);
133
149
  }
134
150
 
135
- ._hero__description_1xib4_135 {
151
+ ._hero__description_1itry_151 {
136
152
  margin: 0;
137
153
  color: var(--color-semantic-foreground-default);
138
154
  font: var(--typography-body-md);
139
155
  text-wrap: pretty;
140
156
  }
141
157
 
142
- ._hero__description_1xib4_135 p {
158
+ ._hero__description_1itry_151 p {
143
159
  margin: 0;
144
160
  }
145
161
 
146
- ._hero__description_1xib4_135 p + p {
162
+ ._hero__description_1itry_151 p + p {
147
163
  margin-top: var(--spacing-space-12);
148
164
  }
149
165
 
150
- ._hero__actions_1xib4_150 {
166
+ ._hero__actions_1itry_166 {
151
167
  display: flex;
152
168
  flex-direction: row;
153
169
  align-items: flex-start;
@@ -156,83 +172,74 @@
156
172
  }
157
173
 
158
174
  @container hero (min-width: 768px) {
159
- ._hero__background_1xib4_11 {
160
- height: 460px;
175
+ ._hero__content_1itry_87,
176
+ ._hero__background_1itry_16 {
177
+ --_hero-content-pad-start: var(--spacing-space-40);
178
+ --_hero-content-pad-end: var(--spacing-space-40);
179
+ --_hero-card-fraction: 0.5;
180
+ }
181
+
182
+ ._hero__background_1itry_16 {
183
+ height: auto;
184
+ bottom: var(--spacing-space-40);
161
185
  }
162
186
 
163
- ._hero__content_1xib4_71 {
187
+ ._hero__content_1itry_87 {
164
188
  flex-direction: row;
165
189
  align-items: flex-end;
166
190
  min-height: 460px;
167
191
  gap: var(--spacing-space-40);
168
192
  padding-top: 0;
169
- padding-inline: var(--spacing-space-40);
170
193
  }
171
194
 
172
- ._hero__card_1xib4_86 {
173
- width: 50%;
195
+ ._hero__card_1itry_102 {
174
196
  max-width: 650px;
175
197
  }
176
198
 
177
- ._hero__logoImage_1xib4_42 {
178
- position: static;
179
- flex: 1 1 auto;
180
- min-width: 0;
181
- height: auto;
182
- max-height: 460px;
183
- align-items: center;
184
- align-self: stretch;
185
- margin-top: calc(-1 * var(--spacing-space-40));
186
- padding-inline: 0;
187
- padding-top: 0;
188
- padding-bottom: 0;
189
- }
190
-
191
- ._hero__logoImage_1xib4_42 > * {
192
- width: auto;
193
- max-width: 90%;
194
- max-height: 100%;
199
+ ._hero__logoImage_1itry_47 {
200
+ bottom: 0;
201
+ padding: var(--spacing-space-40);
202
+ /* Inner edge sits at the card's right edge: pad-start + card-fraction of the content box. */
203
+ left: calc(
204
+ var(--_hero-content-pad-start) + var(--_hero-card-fraction) *
205
+ (100% - var(--_hero-content-pad-start) - var(--_hero-content-pad-end))
206
+ );
195
207
  }
196
208
  }
197
209
 
198
210
  @container hero (min-width: 1024px) {
199
- ._hero__background_1xib4_11 {
200
- height: 440px;
211
+ ._hero__content_1itry_87,
212
+ ._hero__background_1itry_16 {
213
+ --_hero-content-pad-start: var(--spacing-space-80);
214
+ --_hero-content-pad-end: var(--spacing-space-40);
215
+ --_hero-card-fraction: 0.6;
201
216
  }
202
217
 
203
- ._hero__content_1xib4_71 {
218
+ ._hero__content_1itry_87 {
204
219
  min-height: 440px;
205
- padding-left: var(--spacing-space-80);
206
- padding-right: var(--spacing-space-40);
207
220
  }
208
221
 
209
- ._hero__card_1xib4_86 {
210
- width: 60%;
222
+ ._hero__card_1itry_102 {
211
223
  max-width: initial;
212
224
  padding: var(--spacing-space-40);
213
225
  }
214
-
215
- ._hero__logoImage_1xib4_42 {
216
- max-height: 440px;
217
- }
218
226
  }
219
227
 
220
228
  @media (forced-colors: active) {
221
- ._hero__overlay_1xib4_59 {
229
+ ._hero__overlay_1itry_75 {
222
230
  display: none;
223
231
  }
224
232
 
225
- ._hero__background_1xib4_11 {
233
+ ._hero__background_1itry_16 {
226
234
  background-color: Canvas;
227
235
  }
228
236
 
229
- ._hero__card_1xib4_86 {
237
+ ._hero__card_1itry_102 {
230
238
  border: var(--borderwidth-semantic-xs) solid CanvasText;
231
239
  box-shadow: none;
232
240
  }
233
241
 
234
- ._hero__logoImage_1xib4_42 {
242
+ ._hero__logoImageWrap_1itry_47 {
235
243
  display: none;
236
244
  }
237
- }
238
- }
245
+ } }
@@ -41,34 +41,32 @@ const Hero = ({
41
41
  children: [
42
42
  /* @__PURE__ */ jsxs("div", { className: styles.hero__background, style: backgroundStyle, children: [
43
43
  image != null && /* @__PURE__ */ jsx("div", { className: styles.hero__backgroundImageComponent, "aria-hidden": "true", children: image }),
44
- /* @__PURE__ */ jsx("div", { className: styles.hero__overlay, "aria-hidden": "true" })
44
+ /* @__PURE__ */ jsx("div", { className: styles.hero__overlay, "aria-hidden": "true" }),
45
+ logoImage != null && /* @__PURE__ */ jsx("div", { className: styles.hero__logoImageWrap, "aria-hidden": "true", children: /* @__PURE__ */ jsx("div", { className: styles.hero__logoImage, children: logoImage }) })
45
46
  ] }),
46
- /* @__PURE__ */ jsxs("div", { className: styles.hero__content, children: [
47
- /* @__PURE__ */ jsx("div", { className: cn(styles.hero__card, elevationStyles.elevationHigh), children: /* @__PURE__ */ jsxs("div", { className: styles.hero__main, children: [
48
- /* @__PURE__ */ jsxs("div", { className: styles.hero__text, children: [
49
- /* @__PURE__ */ jsxs("div", { className: styles.hero__header, children: [
50
- label != null && /* @__PURE__ */ jsx("div", { className: styles.hero__label, children: label }),
51
- /* @__PURE__ */ jsx(
52
- HeadingLevel,
53
- {
54
- id: headingId,
55
- className: cn(
56
- styles.hero__heading,
57
- headingClassByStyle[headingStyle]
58
- ),
59
- children: heading
60
- }
61
- )
62
- ] }),
63
- description != null && /* @__PURE__ */ jsx("div", { className: cn(styles.hero__description, "dds-prose"), children: description })
47
+ /* @__PURE__ */ jsx("div", { className: styles.hero__content, children: /* @__PURE__ */ jsx("div", { className: cn(styles.hero__card, elevationStyles.elevationHigh), children: /* @__PURE__ */ jsxs("div", { className: styles.hero__main, children: [
48
+ /* @__PURE__ */ jsxs("div", { className: styles.hero__text, children: [
49
+ /* @__PURE__ */ jsxs("div", { className: styles.hero__header, children: [
50
+ label != null && /* @__PURE__ */ jsx("div", { className: styles.hero__label, children: label }),
51
+ /* @__PURE__ */ jsx(
52
+ HeadingLevel,
53
+ {
54
+ id: headingId,
55
+ className: cn(
56
+ styles.hero__heading,
57
+ headingClassByStyle[headingStyle]
58
+ ),
59
+ children: heading
60
+ }
61
+ )
64
62
  ] }),
65
- hasActions && /* @__PURE__ */ jsxs("div", { className: styles.hero__actions, children: [
66
- primaryCta != null && primaryCta,
67
- secondaryCta != null && secondaryCta
68
- ] })
69
- ] }) }),
70
- logoImage != null && /* @__PURE__ */ jsx("div", { className: styles.hero__logoImage, "aria-hidden": "true", children: logoImage })
71
- ] })
63
+ description != null && /* @__PURE__ */ jsx("div", { className: cn(styles.hero__description, "dds-prose"), children: description })
64
+ ] }),
65
+ hasActions && /* @__PURE__ */ jsxs("div", { className: styles.hero__actions, children: [
66
+ primaryCta != null && primaryCta,
67
+ secondaryCta != null && secondaryCta
68
+ ] })
69
+ ] }) }) })
72
70
  ]
73
71
  }
74
72
  );
@@ -1 +1 @@
1
- {"version":3,"file":"Hero.js","sources":["../../../src/components/Hero/Hero.tsx"],"sourcesContent":["import { useId } from 'react';\nimport { cn } from '../../utils/cn';\nimport elevationStyles from '../../styles/utils/elevation.module.css';\nimport styles from './Hero.module.css';\nimport type { HeroProps } from './Hero.types';\nimport { headingClassByStyle } from './Hero.utils';\n\nexport const Hero = ({\n label,\n heading,\n description,\n headingLevel = 'h1',\n headingStyle = 'default',\n Image,\n imageProps,\n LogoImage,\n logoImageProps,\n backgroundColor,\n primaryCta,\n secondaryCta,\n className,\n ref,\n ...props\n}: HeroProps) => {\n const headingId = useId();\n\n const ResolvedImage = Image ?? (imageProps != null ? 'img' : undefined);\n const ResolvedLogoImage = LogoImage ?? (logoImageProps != null ? 'img' : undefined);\n const image = ResolvedImage != null ? <ResolvedImage {...imageProps} /> : undefined;\n const logoImage =\n ResolvedLogoImage != null ? <ResolvedLogoImage {...logoImageProps} /> : undefined;\n const HeadingLevel = headingLevel;\n\n const hasActions = primaryCta != null || secondaryCta != null;\n const backgroundStyle =\n image == null && backgroundColor != null ? { backgroundColor } : undefined;\n const ariaLabelledBy = props['aria-label'] ? undefined : props['aria-labelledby'] || headingId;\n\n return (\n <section\n ref={ref}\n {...props}\n className={cn(styles.hero, className)}\n aria-label={props['aria-label']}\n aria-labelledby={ariaLabelledBy}\n >\n <div className={styles.hero__background} style={backgroundStyle}>\n {image != null && (\n <div className={styles.hero__backgroundImageComponent} aria-hidden=\"true\">\n {image}\n </div>\n )}\n <div className={styles.hero__overlay} aria-hidden=\"true\" />\n </div>\n\n <div className={styles.hero__content}>\n <div className={cn(styles.hero__card, elevationStyles.elevationHigh)}>\n <div className={styles.hero__main}>\n <div className={styles.hero__text}>\n <div className={styles.hero__header}>\n {label != null && <div className={styles.hero__label}>{label}</div>}\n <HeadingLevel\n id={headingId}\n className={cn(\n styles.hero__heading,\n headingClassByStyle[headingStyle],\n )}\n >\n {heading}\n </HeadingLevel>\n </div>\n {description != null && (\n <div className={cn(styles.hero__description, 'dds-prose')}>\n {description}\n </div>\n )}\n </div>\n\n {hasActions && (\n <div className={styles.hero__actions}>\n {primaryCta != null && primaryCta}\n {secondaryCta != null && secondaryCta}\n </div>\n )}\n </div>\n </div>\n {logoImage != null && (\n <div className={styles.hero__logoImage} aria-hidden=\"true\">\n {logoImage}\n </div>\n )}\n </div>\n </section>\n );\n};\n"],"names":[],"mappings":";;;;;;AAOO,MAAM,OAAO,CAAC;AAAA,EACjB;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf,eAAe;AAAA,EACf;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACP,MAAiB;AACb,QAAM,YAAY,MAAA;AAElB,QAAM,gBAAgB,UAAU,cAAc,OAAO,QAAQ;AAC7D,QAAM,oBAAoB,cAAc,kBAAkB,OAAO,QAAQ;AACzE,QAAM,QAAQ,iBAAiB,2BAAQ,eAAA,EAAe,GAAG,YAAY,IAAK;AAC1E,QAAM,YACF,qBAAqB,2BAAQ,mBAAA,EAAmB,GAAG,gBAAgB,IAAK;AAC5E,QAAM,eAAe;AAErB,QAAM,aAAa,cAAc,QAAQ,gBAAgB;AACzD,QAAM,kBACF,SAAS,QAAQ,mBAAmB,OAAO,EAAE,oBAAoB;AACrE,QAAM,iBAAiB,MAAM,YAAY,IAAI,SAAY,MAAM,iBAAiB,KAAK;AAErF,SACI;AAAA,IAAC;AAAA,IAAA;AAAA,MACG;AAAA,MACC,GAAG;AAAA,MACJ,WAAW,GAAG,OAAO,MAAM,SAAS;AAAA,MACpC,cAAY,MAAM,YAAY;AAAA,MAC9B,mBAAiB;AAAA,MAEjB,UAAA;AAAA,QAAA,qBAAC,OAAA,EAAI,WAAW,OAAO,kBAAkB,OAAO,iBAC3C,UAAA;AAAA,UAAA,SAAS,4BACL,OAAA,EAAI,WAAW,OAAO,gCAAgC,eAAY,QAC9D,UAAA,MAAA,CACL;AAAA,8BAEH,OAAA,EAAI,WAAW,OAAO,eAAe,eAAY,OAAA,CAAO;AAAA,QAAA,GAC7D;AAAA,QAEA,qBAAC,OAAA,EAAI,WAAW,OAAO,eACnB,UAAA;AAAA,UAAA,oBAAC,OAAA,EAAI,WAAW,GAAG,OAAO,YAAY,gBAAgB,aAAa,GAC/D,UAAA,qBAAC,OAAA,EAAI,WAAW,OAAO,YACnB,UAAA;AAAA,YAAA,qBAAC,OAAA,EAAI,WAAW,OAAO,YACnB,UAAA;AAAA,cAAA,qBAAC,OAAA,EAAI,WAAW,OAAO,cAClB,UAAA;AAAA,gBAAA,SAAS,QAAQ,oBAAC,OAAA,EAAI,WAAW,OAAO,aAAc,UAAA,OAAM;AAAA,gBAC7D;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACG,IAAI;AAAA,oBACJ,WAAW;AAAA,sBACP,OAAO;AAAA,sBACP,oBAAoB,YAAY;AAAA,oBAAA;AAAA,oBAGnC,UAAA;AAAA,kBAAA;AAAA,gBAAA;AAAA,cACL,GACJ;AAAA,cACC,eAAe,QACZ,oBAAC,OAAA,EAAI,WAAW,GAAG,OAAO,mBAAmB,WAAW,GACnD,UAAA,YAAA,CACL;AAAA,YAAA,GAER;AAAA,YAEC,cACG,qBAAC,OAAA,EAAI,WAAW,OAAO,eAClB,UAAA;AAAA,cAAA,cAAc,QAAQ;AAAA,cACtB,gBAAgB,QAAQ;AAAA,YAAA,EAAA,CAC7B;AAAA,UAAA,EAAA,CAER,EAAA,CACJ;AAAA,UACC,aAAa,QACV,oBAAC,OAAA,EAAI,WAAW,OAAO,iBAAiB,eAAY,QAC/C,UAAA,UAAA,CACL;AAAA,QAAA,EAAA,CAER;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGZ;"}
1
+ {"version":3,"file":"Hero.js","sources":["../../../src/components/Hero/Hero.tsx"],"sourcesContent":["import { useId } from 'react';\nimport { cn } from '../../utils/cn';\nimport elevationStyles from '../../styles/utils/elevation.module.css';\nimport styles from './Hero.module.css';\nimport type { HeroProps } from './Hero.types';\nimport { headingClassByStyle } from './Hero.utils';\n\nexport const Hero = ({\n label,\n heading,\n description,\n headingLevel = 'h1',\n headingStyle = 'default',\n Image,\n imageProps,\n LogoImage,\n logoImageProps,\n backgroundColor,\n primaryCta,\n secondaryCta,\n className,\n ref,\n ...props\n}: HeroProps) => {\n const headingId = useId();\n\n const ResolvedImage = Image ?? (imageProps != null ? 'img' : undefined);\n const ResolvedLogoImage = LogoImage ?? (logoImageProps != null ? 'img' : undefined);\n const image = ResolvedImage != null ? <ResolvedImage {...imageProps} /> : undefined;\n const logoImage =\n ResolvedLogoImage != null ? <ResolvedLogoImage {...logoImageProps} /> : undefined;\n const HeadingLevel = headingLevel;\n\n const hasActions = primaryCta != null || secondaryCta != null;\n const backgroundStyle =\n image == null && backgroundColor != null ? { backgroundColor } : undefined;\n const ariaLabelledBy = props['aria-label'] ? undefined : props['aria-labelledby'] || headingId;\n\n return (\n <section\n ref={ref}\n {...props}\n className={cn(styles.hero, className)}\n aria-label={props['aria-label']}\n aria-labelledby={ariaLabelledBy}\n >\n <div className={styles.hero__background} style={backgroundStyle}>\n {image != null && (\n <div className={styles.hero__backgroundImageComponent} aria-hidden=\"true\">\n {image}\n </div>\n )}\n <div className={styles.hero__overlay} aria-hidden=\"true\" />\n {logoImage != null && (\n <div className={styles.hero__logoImageWrap} aria-hidden=\"true\">\n <div className={styles.hero__logoImage}>{logoImage}</div>\n </div>\n )}\n </div>\n\n <div className={styles.hero__content}>\n <div className={cn(styles.hero__card, elevationStyles.elevationHigh)}>\n <div className={styles.hero__main}>\n <div className={styles.hero__text}>\n <div className={styles.hero__header}>\n {label != null && <div className={styles.hero__label}>{label}</div>}\n <HeadingLevel\n id={headingId}\n className={cn(\n styles.hero__heading,\n headingClassByStyle[headingStyle],\n )}\n >\n {heading}\n </HeadingLevel>\n </div>\n {description != null && (\n <div className={cn(styles.hero__description, 'dds-prose')}>\n {description}\n </div>\n )}\n </div>\n\n {hasActions && (\n <div className={styles.hero__actions}>\n {primaryCta != null && primaryCta}\n {secondaryCta != null && secondaryCta}\n </div>\n )}\n </div>\n </div>\n </div>\n </section>\n );\n};\n"],"names":[],"mappings":";;;;;;AAOO,MAAM,OAAO,CAAC;AAAA,EACjB;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf,eAAe;AAAA,EACf;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACP,MAAiB;AACb,QAAM,YAAY,MAAA;AAElB,QAAM,gBAAgB,UAAU,cAAc,OAAO,QAAQ;AAC7D,QAAM,oBAAoB,cAAc,kBAAkB,OAAO,QAAQ;AACzE,QAAM,QAAQ,iBAAiB,2BAAQ,eAAA,EAAe,GAAG,YAAY,IAAK;AAC1E,QAAM,YACF,qBAAqB,2BAAQ,mBAAA,EAAmB,GAAG,gBAAgB,IAAK;AAC5E,QAAM,eAAe;AAErB,QAAM,aAAa,cAAc,QAAQ,gBAAgB;AACzD,QAAM,kBACF,SAAS,QAAQ,mBAAmB,OAAO,EAAE,oBAAoB;AACrE,QAAM,iBAAiB,MAAM,YAAY,IAAI,SAAY,MAAM,iBAAiB,KAAK;AAErF,SACI;AAAA,IAAC;AAAA,IAAA;AAAA,MACG;AAAA,MACC,GAAG;AAAA,MACJ,WAAW,GAAG,OAAO,MAAM,SAAS;AAAA,MACpC,cAAY,MAAM,YAAY;AAAA,MAC9B,mBAAiB;AAAA,MAEjB,UAAA;AAAA,QAAA,qBAAC,OAAA,EAAI,WAAW,OAAO,kBAAkB,OAAO,iBAC3C,UAAA;AAAA,UAAA,SAAS,4BACL,OAAA,EAAI,WAAW,OAAO,gCAAgC,eAAY,QAC9D,UAAA,MAAA,CACL;AAAA,8BAEH,OAAA,EAAI,WAAW,OAAO,eAAe,eAAY,QAAO;AAAA,UACxD,aAAa,QACV,oBAAC,OAAA,EAAI,WAAW,OAAO,qBAAqB,eAAY,QACpD,8BAAC,OAAA,EAAI,WAAW,OAAO,iBAAkB,qBAAU,EAAA,CACvD;AAAA,QAAA,GAER;AAAA,4BAEC,OAAA,EAAI,WAAW,OAAO,eACnB,UAAA,oBAAC,SAAI,WAAW,GAAG,OAAO,YAAY,gBAAgB,aAAa,GAC/D,+BAAC,OAAA,EAAI,WAAW,OAAO,YACnB,UAAA;AAAA,UAAA,qBAAC,OAAA,EAAI,WAAW,OAAO,YACnB,UAAA;AAAA,YAAA,qBAAC,OAAA,EAAI,WAAW,OAAO,cAClB,UAAA;AAAA,cAAA,SAAS,QAAQ,oBAAC,OAAA,EAAI,WAAW,OAAO,aAAc,UAAA,OAAM;AAAA,cAC7D;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACG,IAAI;AAAA,kBACJ,WAAW;AAAA,oBACP,OAAO;AAAA,oBACP,oBAAoB,YAAY;AAAA,kBAAA;AAAA,kBAGnC,UAAA;AAAA,gBAAA;AAAA,cAAA;AAAA,YACL,GACJ;AAAA,YACC,eAAe,QACZ,oBAAC,OAAA,EAAI,WAAW,GAAG,OAAO,mBAAmB,WAAW,GACnD,UAAA,YAAA,CACL;AAAA,UAAA,GAER;AAAA,UAEC,cACG,qBAAC,OAAA,EAAI,WAAW,OAAO,eAClB,UAAA;AAAA,YAAA,cAAc,QAAQ;AAAA,YACtB,gBAAgB,QAAQ;AAAA,UAAA,EAAA,CAC7B;AAAA,QAAA,EAAA,CAER,GACJ,EAAA,CACJ;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGZ;"}
@@ -1,24 +1,26 @@
1
1
  require('./Hero.css');
2
2
  "use strict";
3
3
  Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
4
- const hero = "_hero_1xib4_1";
5
- const hero__background = "_hero__background_1xib4_11";
6
- const hero__backgroundImageComponent = "_hero__backgroundImageComponent_1xib4_20";
7
- const hero__logoImage = "_hero__logoImage_1xib4_42";
8
- const hero__overlay = "_hero__overlay_1xib4_59";
9
- const hero__content = "_hero__content_1xib4_71";
10
- const hero__card = "_hero__card_1xib4_86";
11
- const hero__main = "_hero__main_1xib4_95";
12
- const hero__text = "_hero__text_1xib4_101";
13
- const hero__header = "_hero__header_1xib4_107";
14
- const hero__label = "_hero__label_1xib4_113";
15
- const hero__heading = "_hero__heading_1xib4_117";
16
- const hero__description = "_hero__description_1xib4_135";
17
- const hero__actions = "_hero__actions_1xib4_150";
4
+ const hero = "_hero_1itry_1";
5
+ const hero__background = "_hero__background_1itry_16";
6
+ const hero__backgroundImageComponent = "_hero__backgroundImageComponent_1itry_25";
7
+ const hero__logoImageWrap = "_hero__logoImageWrap_1itry_47";
8
+ const hero__logoImage = "_hero__logoImage_1itry_47";
9
+ const hero__overlay = "_hero__overlay_1itry_75";
10
+ const hero__content = "_hero__content_1itry_87";
11
+ const hero__card = "_hero__card_1itry_102";
12
+ const hero__main = "_hero__main_1itry_111";
13
+ const hero__text = "_hero__text_1itry_117";
14
+ const hero__header = "_hero__header_1itry_123";
15
+ const hero__label = "_hero__label_1itry_129";
16
+ const hero__heading = "_hero__heading_1itry_133";
17
+ const hero__description = "_hero__description_1itry_151";
18
+ const hero__actions = "_hero__actions_1itry_166";
18
19
  const styles = {
19
20
  hero,
20
21
  hero__background,
21
22
  hero__backgroundImageComponent,
23
+ hero__logoImageWrap,
22
24
  hero__logoImage,
23
25
  hero__overlay,
24
26
  hero__content,
@@ -28,9 +30,9 @@ const styles = {
28
30
  hero__header,
29
31
  hero__label,
30
32
  hero__heading,
31
- "hero__heading--default": "_hero__heading--default_1xib4_123",
32
- "hero__heading--large": "_hero__heading--large_1xib4_127",
33
- "hero__heading--small": "_hero__heading--small_1xib4_131",
33
+ "hero__heading--default": "_hero__heading--default_1itry_139",
34
+ "hero__heading--large": "_hero__heading--large_1itry_143",
35
+ "hero__heading--small": "_hero__heading--small_1itry_147",
34
36
  hero__description,
35
37
  hero__actions
36
38
  };
@@ -46,6 +48,7 @@ exports.hero__header = hero__header;
46
48
  exports.hero__heading = hero__heading;
47
49
  exports.hero__label = hero__label;
48
50
  exports.hero__logoImage = hero__logoImage;
51
+ exports.hero__logoImageWrap = hero__logoImageWrap;
49
52
  exports.hero__main = hero__main;
50
53
  exports.hero__overlay = hero__overlay;
51
54
  exports.hero__text = hero__text;
@@ -1 +1 @@
1
- {"version":3,"file":"Hero.module.css.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"Hero.module.css.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -1,22 +1,24 @@
1
1
  import './Hero.css';
2
- const hero = "_hero_1xib4_1";
3
- const hero__background = "_hero__background_1xib4_11";
4
- const hero__backgroundImageComponent = "_hero__backgroundImageComponent_1xib4_20";
5
- const hero__logoImage = "_hero__logoImage_1xib4_42";
6
- const hero__overlay = "_hero__overlay_1xib4_59";
7
- const hero__content = "_hero__content_1xib4_71";
8
- const hero__card = "_hero__card_1xib4_86";
9
- const hero__main = "_hero__main_1xib4_95";
10
- const hero__text = "_hero__text_1xib4_101";
11
- const hero__header = "_hero__header_1xib4_107";
12
- const hero__label = "_hero__label_1xib4_113";
13
- const hero__heading = "_hero__heading_1xib4_117";
14
- const hero__description = "_hero__description_1xib4_135";
15
- const hero__actions = "_hero__actions_1xib4_150";
2
+ const hero = "_hero_1itry_1";
3
+ const hero__background = "_hero__background_1itry_16";
4
+ const hero__backgroundImageComponent = "_hero__backgroundImageComponent_1itry_25";
5
+ const hero__logoImageWrap = "_hero__logoImageWrap_1itry_47";
6
+ const hero__logoImage = "_hero__logoImage_1itry_47";
7
+ const hero__overlay = "_hero__overlay_1itry_75";
8
+ const hero__content = "_hero__content_1itry_87";
9
+ const hero__card = "_hero__card_1itry_102";
10
+ const hero__main = "_hero__main_1itry_111";
11
+ const hero__text = "_hero__text_1itry_117";
12
+ const hero__header = "_hero__header_1itry_123";
13
+ const hero__label = "_hero__label_1itry_129";
14
+ const hero__heading = "_hero__heading_1itry_133";
15
+ const hero__description = "_hero__description_1itry_151";
16
+ const hero__actions = "_hero__actions_1itry_166";
16
17
  const styles = {
17
18
  hero,
18
19
  hero__background,
19
20
  hero__backgroundImageComponent,
21
+ hero__logoImageWrap,
20
22
  hero__logoImage,
21
23
  hero__overlay,
22
24
  hero__content,
@@ -26,9 +28,9 @@ const styles = {
26
28
  hero__header,
27
29
  hero__label,
28
30
  hero__heading,
29
- "hero__heading--default": "_hero__heading--default_1xib4_123",
30
- "hero__heading--large": "_hero__heading--large_1xib4_127",
31
- "hero__heading--small": "_hero__heading--small_1xib4_131",
31
+ "hero__heading--default": "_hero__heading--default_1itry_139",
32
+ "hero__heading--large": "_hero__heading--large_1itry_143",
33
+ "hero__heading--small": "_hero__heading--small_1itry_147",
32
34
  hero__description,
33
35
  hero__actions
34
36
  };
@@ -45,6 +47,7 @@ export {
45
47
  hero__heading,
46
48
  hero__label,
47
49
  hero__logoImage,
50
+ hero__logoImageWrap,
48
51
  hero__main,
49
52
  hero__overlay,
50
53
  hero__text
@@ -1 +1 @@
1
- {"version":3,"file":"Hero.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"Hero.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}