@primer/react 38.24.0-rc.ff9ea71b3 → 38.25.0-rc.89740d738

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 (110) hide show
  1. package/CHANGELOG.md +24 -0
  2. package/dist/ActionBar/ActionBar-e63def3c.css +2 -0
  3. package/dist/ActionBar/ActionBar-e63def3c.css.map +1 -0
  4. package/dist/ActionBar/ActionBar.d.ts +1 -1
  5. package/dist/ActionBar/ActionBar.d.ts.map +1 -1
  6. package/dist/ActionBar/ActionBar.js +298 -384
  7. package/dist/ActionBar/ActionBar.module.css.js +2 -2
  8. package/dist/ActionBar/index.d.ts +1 -1
  9. package/dist/ActionList/Heading.js +17 -16
  10. package/dist/Autocomplete/AutocompleteInput.js +3 -3
  11. package/dist/Autocomplete/AutocompleteOverlay.js +3 -3
  12. package/dist/Blankslate/Blankslate.d.ts.map +1 -1
  13. package/dist/Blankslate/Blankslate.js +6 -0
  14. package/dist/BranchName/BranchName.js +1 -0
  15. package/dist/Breadcrumbs/Breadcrumbs.d.ts.map +1 -1
  16. package/dist/Breadcrumbs/Breadcrumbs.js +3 -0
  17. package/dist/Button/ButtonBase.js +3 -3
  18. package/dist/ButtonGroup/ButtonGroup.d.ts.map +1 -1
  19. package/dist/ButtonGroup/ButtonGroup.js +1 -0
  20. package/dist/Card/{Card-cec366f8.css → Card-d8a02dd9.css} +2 -2
  21. package/dist/Card/{Card-cec366f8.css.map → Card-d8a02dd9.css.map} +1 -1
  22. package/dist/Card/Card.d.ts +75 -39
  23. package/dist/Card/Card.d.ts.map +1 -1
  24. package/dist/Card/Card.js +260 -160
  25. package/dist/Card/Card.module.css.js +2 -2
  26. package/dist/Card/index.d.ts +16 -16
  27. package/dist/Card/index.d.ts.map +1 -1
  28. package/dist/Card/index.js +2 -2
  29. package/dist/Checkbox/Checkbox.d.ts +1 -0
  30. package/dist/Checkbox/Checkbox.d.ts.map +1 -1
  31. package/dist/Checkbox/Checkbox.js +10 -5
  32. package/dist/CheckboxGroup/CheckboxGroup.js +1 -0
  33. package/dist/CircleBadge/CircleBadge.d.ts.map +1 -1
  34. package/dist/CircleBadge/CircleBadge.js +44 -28
  35. package/dist/ConfirmationDialog/ConfirmationDialog.d.ts.map +1 -1
  36. package/dist/ConfirmationDialog/ConfirmationDialog.js +1 -0
  37. package/dist/CounterLabel/CounterLabel.d.ts +2 -0
  38. package/dist/CounterLabel/CounterLabel.d.ts.map +1 -1
  39. package/dist/CounterLabel/CounterLabel.js +25 -90
  40. package/dist/DataTable/useTable.d.ts.map +1 -1
  41. package/dist/DataTable/useTable.js +8 -3
  42. package/dist/Details/Details.d.ts +6 -2
  43. package/dist/Details/Details.d.ts.map +1 -1
  44. package/dist/Details/Details.js +31 -22
  45. package/dist/Dialog/Dialog-b7da369a.css +2 -0
  46. package/dist/Dialog/Dialog-b7da369a.css.map +1 -0
  47. package/dist/Dialog/Dialog.d.ts +5 -2
  48. package/dist/Dialog/Dialog.d.ts.map +1 -1
  49. package/dist/Dialog/Dialog.js +34 -11
  50. package/dist/Dialog/Dialog.module.css.js +1 -1
  51. package/dist/Flash/Flash.d.ts.map +1 -1
  52. package/dist/Flash/Flash.js +2 -1
  53. package/dist/FormControl/FormControl.d.ts.map +1 -1
  54. package/dist/FormControl/FormControl.js +2 -0
  55. package/dist/FormControl/FormControlCaption.d.ts.map +1 -1
  56. package/dist/FormControl/FormControlCaption.js +1 -0
  57. package/dist/FormControl/FormControlLabel.d.ts.map +1 -1
  58. package/dist/FormControl/FormControlLabel.js +1 -0
  59. package/dist/FormControl/FormControlLeadingVisual.d.ts.map +1 -1
  60. package/dist/FormControl/FormControlLeadingVisual.js +1 -0
  61. package/dist/FormControl/_FormControlValidation.d.ts.map +1 -1
  62. package/dist/FormControl/_FormControlValidation.js +1 -0
  63. package/dist/Header/Header.d.ts.map +1 -1
  64. package/dist/Header/Header.js +3 -0
  65. package/dist/Heading/Heading.d.ts.map +1 -1
  66. package/dist/Heading/Heading.js +4 -3
  67. package/dist/Hidden/Hidden.d.ts.map +1 -1
  68. package/dist/Hidden/Hidden.js +1 -0
  69. package/dist/InlineMessage/InlineMessage.d.ts.map +1 -1
  70. package/dist/InlineMessage/InlineMessage.js +1 -0
  71. package/dist/KeybindingHint/KeybindingHint.d.ts.map +1 -1
  72. package/dist/KeybindingHint/KeybindingHint.js +1 -0
  73. package/dist/Label/Label.d.ts.map +1 -1
  74. package/dist/Label/Label.js +2 -1
  75. package/dist/LabelGroup/LabelGroup.d.ts.map +1 -1
  76. package/dist/LabelGroup/LabelGroup.js +4 -1
  77. package/dist/Link/Link.js +3 -3
  78. package/dist/Overlay/Overlay.d.ts.map +1 -1
  79. package/dist/Overlay/Overlay.js +20 -19
  80. package/dist/PageLayout/PageLayout.js +5 -5
  81. package/dist/PageLayout/usePaneWidth.d.ts.map +1 -1
  82. package/dist/PageLayout/usePaneWidth.js +12 -6
  83. package/dist/TextInputWithTokens/TextInputWithTokens.js +91 -90
  84. package/dist/Timeline/{Timeline-ad31a7fb.css → Timeline-05decc91.css} +2 -2
  85. package/dist/Timeline/Timeline-05decc91.css.map +1 -0
  86. package/dist/Timeline/Timeline.module.css.js +1 -1
  87. package/dist/deprecated/DialogV1/Dialog.js +10 -9
  88. package/dist/experimental/index.d.ts +1 -1
  89. package/dist/experimental/index.d.ts.map +1 -1
  90. package/dist/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroup.d.ts +1 -0
  91. package/dist/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroup.d.ts.map +1 -1
  92. package/dist/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroup.js +5 -2
  93. package/dist/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupCaption.d.ts.map +1 -1
  94. package/dist/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupCaption.js +3 -1
  95. package/dist/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupContext.d.ts +1 -0
  96. package/dist/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupContext.d.ts.map +1 -1
  97. package/dist/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupLabel.d.ts.map +1 -1
  98. package/dist/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupLabel.js +3 -1
  99. package/dist/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupValidation.d.ts.map +1 -1
  100. package/dist/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupValidation.js +3 -1
  101. package/dist/internal/components/InputValidation.d.ts +2 -1
  102. package/dist/internal/components/InputValidation.d.ts.map +1 -1
  103. package/dist/internal/components/InputValidation.js +64 -33
  104. package/generated/components.json +59 -10
  105. package/package.json +1 -1
  106. package/dist/ActionBar/ActionBar-a41224b2.css +0 -2
  107. package/dist/ActionBar/ActionBar-a41224b2.css.map +0 -1
  108. package/dist/Dialog/Dialog-f9bb927a.css +0 -2
  109. package/dist/Dialog/Dialog-f9bb927a.css.map +0 -1
  110. package/dist/Timeline/Timeline-ad31a7fb.css.map +0 -1
package/dist/Card/Card.js CHANGED
@@ -1,43 +1,39 @@
1
1
  import { c } from 'react-compiler-runtime';
2
2
  import { clsx } from 'clsx';
3
- import React, { forwardRef } from 'react';
3
+ import React, { forwardRef, useContext, createContext } from 'react';
4
4
  import classes from './Card.module.css.js';
5
- import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
5
+ import { fixedForwardRef } from '../utils/modern-polymorphic.js';
6
+ import { useId } from '../hooks/useId.js';
7
+ import { jsx, jsxs } from 'react/jsx-runtime';
6
8
 
7
- const CardImpl = /*#__PURE__*/forwardRef(function Card(t0, ref) {
8
- const $ = c(53);
9
- let children;
10
- let className;
11
- let rest;
12
- let t1;
13
- let t2;
14
- if ($[0] !== t0) {
15
- ({
16
- children,
17
- className,
18
- padding: t1,
19
- borderRadius: t2,
20
- ...rest
21
- } = t0);
22
- $[0] = t0;
23
- $[1] = children;
24
- $[2] = className;
25
- $[3] = rest;
26
- $[4] = t1;
27
- $[5] = t2;
28
- } else {
29
- children = $[1];
30
- className = $[2];
31
- rest = $[3];
32
- t1 = $[4];
33
- t2 = $[5];
9
+ const CardContext = /*#__PURE__*/createContext({});
10
+ function CardComponent(props, ref) {
11
+ const $ = c(67);
12
+ const {
13
+ children,
14
+ className,
15
+ padding: t0,
16
+ borderRadius: t1,
17
+ as: t2,
18
+ ...rest
19
+ } = props;
20
+ const padding = t0 === undefined ? "normal" : t0;
21
+ const borderRadius = t1 === undefined ? "large" : t1;
22
+ const as = t2 === undefined ? "div" : t2;
23
+ const Component = as;
24
+ const generatedId = useId();
25
+ const titleId = as === "section" ? generatedId : undefined;
26
+ if (as === "section" && !("aria-label" in props) && !("aria-labelledby" in props)) {
27
+ rest["aria-labelledby"] = titleId;
34
28
  }
35
- const padding = t1 === undefined ? "normal" : t1;
36
- const borderRadius = t2 === undefined ? "large" : t2;
29
+ let T0;
30
+ let T1;
37
31
  let description;
38
32
  let heading;
39
33
  let menu;
40
34
  let metadata;
35
+ let t10;
36
+ let t11;
41
37
  let t3;
42
38
  let t4;
43
39
  let t5;
@@ -45,8 +41,8 @@ const CardImpl = /*#__PURE__*/forwardRef(function Card(t0, ref) {
45
41
  let t7;
46
42
  let t8;
47
43
  let t9;
48
- if ($[6] !== borderRadius || $[7] !== children || $[8] !== className || $[9] !== padding || $[10] !== ref || $[11] !== rest) {
49
- t9 = Symbol.for("react.early_return_sentinel");
44
+ if ($[0] !== Component || $[1] !== borderRadius || $[2] !== children || $[3] !== className || $[4] !== padding || $[5] !== ref || $[6] !== rest || $[7] !== titleId) {
45
+ t11 = Symbol.for("react.early_return_sentinel");
50
46
  bb0: {
51
47
  let icon = null;
52
48
  let image = null;
@@ -74,7 +70,7 @@ const CardImpl = /*#__PURE__*/forwardRef(function Card(t0, ref) {
74
70
  if (child.type === CardMetadata) {
75
71
  metadata = child;
76
72
  } else {
77
- if (child.type === CardMenu) {
73
+ if (child.type === CardAction) {
78
74
  menu = child;
79
75
  }
80
76
  }
@@ -84,64 +80,111 @@ const CardImpl = /*#__PURE__*/forwardRef(function Card(t0, ref) {
84
80
  }
85
81
  }
86
82
  const hasSlotChildren = icon || image || heading || description || metadata || menu;
83
+ const isEmpty = !hasSlotChildren && childArray.length === 0;
84
+ if (isEmpty) {
85
+ t11 = null;
86
+ break bb0;
87
+ }
87
88
  if (!hasSlotChildren) {
88
- let t10;
89
- if ($[23] !== className) {
90
- t10 = clsx(classes.Card, className);
91
- $[23] = className;
92
- $[24] = t10;
89
+ let t12;
90
+ if ($[23] !== titleId) {
91
+ t12 = {
92
+ titleId
93
+ };
94
+ $[23] = titleId;
95
+ $[24] = t12;
93
96
  } else {
94
- t10 = $[24];
97
+ t12 = $[24];
95
98
  }
96
- let t11;
97
- if ($[25] !== borderRadius || $[26] !== children || $[27] !== padding || $[28] !== ref || $[29] !== rest || $[30] !== t10) {
98
- t11 = /*#__PURE__*/jsx("div", {
99
+ let t13;
100
+ if ($[25] !== className) {
101
+ t13 = clsx(classes.Card, className);
102
+ $[25] = className;
103
+ $[26] = t13;
104
+ } else {
105
+ t13 = $[26];
106
+ }
107
+ let t14;
108
+ if ($[27] !== Component || $[28] !== borderRadius || $[29] !== children || $[30] !== padding || $[31] !== ref || $[32] !== rest || $[33] !== t13) {
109
+ t14 = /*#__PURE__*/jsx(Component, {
99
110
  ref: ref,
100
- className: t10,
111
+ className: t13,
112
+ "data-component": "Card",
101
113
  "data-padding": padding,
102
114
  "data-border-radius": borderRadius,
103
115
  ...rest,
104
116
  children: children
105
117
  });
106
- $[25] = borderRadius;
107
- $[26] = children;
108
- $[27] = padding;
109
- $[28] = ref;
110
- $[29] = rest;
111
- $[30] = t10;
112
- $[31] = t11;
118
+ $[27] = Component;
119
+ $[28] = borderRadius;
120
+ $[29] = children;
121
+ $[30] = padding;
122
+ $[31] = ref;
123
+ $[32] = rest;
124
+ $[33] = t13;
125
+ $[34] = t14;
113
126
  } else {
114
- t11 = $[31];
127
+ t14 = $[34];
115
128
  }
116
- t9 = t11;
129
+ let t15;
130
+ if ($[35] !== t12 || $[36] !== t14) {
131
+ t15 = /*#__PURE__*/jsx(CardContext.Provider, {
132
+ value: t12,
133
+ children: t14
134
+ });
135
+ $[35] = t12;
136
+ $[36] = t14;
137
+ $[37] = t15;
138
+ } else {
139
+ t15 = $[37];
140
+ }
141
+ t11 = t15;
117
142
  break bb0;
118
143
  }
144
+ T1 = CardContext.Provider;
145
+ if ($[38] !== titleId) {
146
+ t10 = {
147
+ titleId
148
+ };
149
+ $[38] = titleId;
150
+ $[39] = t10;
151
+ } else {
152
+ t10 = $[39];
153
+ }
154
+ T0 = Component;
119
155
  t3 = ref;
120
- if ($[32] !== className) {
156
+ if ($[40] !== className) {
121
157
  t4 = clsx(classes.Card, className);
122
- $[32] = className;
123
- $[33] = t4;
158
+ $[40] = className;
159
+ $[41] = t4;
124
160
  } else {
125
- t4 = $[33];
161
+ t4 = $[41];
126
162
  }
127
- t5 = padding;
128
- t6 = borderRadius;
129
- t7 = rest;
130
- t8 = (image || icon) && /*#__PURE__*/jsx("div", {
163
+ t5 = "Card";
164
+ t6 = padding;
165
+ t7 = borderRadius;
166
+ t8 = rest;
167
+ t9 = (image || icon) && /*#__PURE__*/jsx("div", {
131
168
  className: clsx(classes.CardHeader, image && classes.CardHeaderEdgeToEdge),
132
169
  children: image || icon
133
170
  });
134
171
  }
135
- $[6] = borderRadius;
136
- $[7] = children;
137
- $[8] = className;
138
- $[9] = padding;
139
- $[10] = ref;
140
- $[11] = rest;
141
- $[12] = description;
142
- $[13] = heading;
143
- $[14] = menu;
144
- $[15] = metadata;
172
+ $[0] = Component;
173
+ $[1] = borderRadius;
174
+ $[2] = children;
175
+ $[3] = className;
176
+ $[4] = padding;
177
+ $[5] = ref;
178
+ $[6] = rest;
179
+ $[7] = titleId;
180
+ $[8] = T0;
181
+ $[9] = T1;
182
+ $[10] = description;
183
+ $[11] = heading;
184
+ $[12] = menu;
185
+ $[13] = metadata;
186
+ $[14] = t10;
187
+ $[15] = t11;
145
188
  $[16] = t3;
146
189
  $[17] = t4;
147
190
  $[18] = t5;
@@ -150,10 +193,14 @@ const CardImpl = /*#__PURE__*/forwardRef(function Card(t0, ref) {
150
193
  $[21] = t8;
151
194
  $[22] = t9;
152
195
  } else {
153
- description = $[12];
154
- heading = $[13];
155
- menu = $[14];
156
- metadata = $[15];
196
+ T0 = $[8];
197
+ T1 = $[9];
198
+ description = $[10];
199
+ heading = $[11];
200
+ menu = $[12];
201
+ metadata = $[13];
202
+ t10 = $[14];
203
+ t11 = $[15];
157
204
  t3 = $[16];
158
205
  t4 = $[17];
159
206
  t5 = $[18];
@@ -162,80 +209,98 @@ const CardImpl = /*#__PURE__*/forwardRef(function Card(t0, ref) {
162
209
  t8 = $[21];
163
210
  t9 = $[22];
164
211
  }
165
- if (t9 !== Symbol.for("react.early_return_sentinel")) {
166
- return t9;
212
+ if (t11 !== Symbol.for("react.early_return_sentinel")) {
213
+ return t11;
167
214
  }
168
- let t10;
169
- if ($[34] !== description || $[35] !== heading) {
170
- t10 = /*#__PURE__*/jsxs("div", {
215
+ let t12;
216
+ if ($[42] !== description || $[43] !== heading) {
217
+ t12 = /*#__PURE__*/jsxs("div", {
171
218
  className: classes.CardContent,
172
219
  children: [heading, description]
173
220
  });
174
- $[34] = description;
175
- $[35] = heading;
176
- $[36] = t10;
221
+ $[42] = description;
222
+ $[43] = heading;
223
+ $[44] = t12;
177
224
  } else {
178
- t10 = $[36];
225
+ t12 = $[44];
179
226
  }
180
- let t11;
181
- if ($[37] !== metadata) {
182
- t11 = metadata ? /*#__PURE__*/jsx("div", {
227
+ let t13;
228
+ if ($[45] !== metadata) {
229
+ t13 = metadata ? /*#__PURE__*/jsx("div", {
183
230
  className: classes.CardMetadataContainer,
184
231
  children: metadata
185
232
  }) : null;
186
- $[37] = metadata;
187
- $[38] = t11;
233
+ $[45] = metadata;
234
+ $[46] = t13;
188
235
  } else {
189
- t11 = $[38];
236
+ t13 = $[46];
190
237
  }
191
- let t12;
192
- if ($[39] !== t10 || $[40] !== t11) {
193
- t12 = /*#__PURE__*/jsxs("div", {
238
+ let t14;
239
+ if ($[47] !== t12 || $[48] !== t13) {
240
+ t14 = /*#__PURE__*/jsxs("div", {
194
241
  className: classes.CardBody,
195
- children: [t10, t11]
242
+ children: [t12, t13]
196
243
  });
197
- $[39] = t10;
198
- $[40] = t11;
199
- $[41] = t12;
244
+ $[47] = t12;
245
+ $[48] = t13;
246
+ $[49] = t14;
200
247
  } else {
201
- t12 = $[41];
248
+ t14 = $[49];
202
249
  }
203
- let t13;
204
- if ($[42] !== menu) {
205
- t13 = menu ? /*#__PURE__*/jsx("div", {
206
- className: classes.CardMenu,
250
+ let t15;
251
+ if ($[50] !== menu) {
252
+ t15 = menu ? /*#__PURE__*/jsx("div", {
253
+ className: classes.CardAction,
207
254
  children: menu
208
255
  }) : null;
209
- $[42] = menu;
210
- $[43] = t13;
256
+ $[50] = menu;
257
+ $[51] = t15;
211
258
  } else {
212
- t13 = $[43];
259
+ t15 = $[51];
213
260
  }
214
- let t14;
215
- if ($[44] !== t12 || $[45] !== t13 || $[46] !== t3 || $[47] !== t4 || $[48] !== t5 || $[49] !== t6 || $[50] !== t7 || $[51] !== t8) {
216
- t14 = /*#__PURE__*/jsxs("div", {
261
+ let t16;
262
+ if ($[52] !== T0 || $[53] !== t14 || $[54] !== t15 || $[55] !== t3 || $[56] !== t4 || $[57] !== t5 || $[58] !== t6 || $[59] !== t7 || $[60] !== t8 || $[61] !== t9) {
263
+ t16 = /*#__PURE__*/jsxs(T0, {
217
264
  ref: t3,
218
265
  className: t4,
219
- "data-padding": t5,
220
- "data-border-radius": t6,
221
- ...t7,
222
- children: [t8, t12, t13]
266
+ "data-component": t5,
267
+ "data-padding": t6,
268
+ "data-border-radius": t7,
269
+ ...t8,
270
+ children: [t9, t14, t15]
223
271
  });
224
- $[44] = t12;
225
- $[45] = t13;
226
- $[46] = t3;
227
- $[47] = t4;
228
- $[48] = t5;
229
- $[49] = t6;
230
- $[50] = t7;
231
- $[51] = t8;
232
- $[52] = t14;
272
+ $[52] = T0;
273
+ $[53] = t14;
274
+ $[54] = t15;
275
+ $[55] = t3;
276
+ $[56] = t4;
277
+ $[57] = t5;
278
+ $[58] = t6;
279
+ $[59] = t7;
280
+ $[60] = t8;
281
+ $[61] = t9;
282
+ $[62] = t16;
233
283
  } else {
234
- t14 = $[52];
284
+ t16 = $[62];
235
285
  }
236
- return t14;
237
- });
238
- const CardIcon = t0 => {
286
+ let t17;
287
+ if ($[63] !== T1 || $[64] !== t10 || $[65] !== t16) {
288
+ t17 = /*#__PURE__*/jsx(T1, {
289
+ value: t10,
290
+ children: t16
291
+ });
292
+ $[63] = T1;
293
+ $[64] = t10;
294
+ $[65] = t16;
295
+ $[66] = t17;
296
+ } else {
297
+ t17 = $[66];
298
+ }
299
+ return t17;
300
+ }
301
+ CardComponent.displayName = 'Card';
302
+ const CardImpl = fixedForwardRef(CardComponent);
303
+ function CardIcon(t0) {
239
304
  const $ = c(10);
240
305
  const {
241
306
  icon: IconComponent,
@@ -264,6 +329,7 @@ const CardIcon = t0 => {
264
329
  if ($[4] !== ariaLabel || $[5] !== t1 || $[6] !== t2 || $[7] !== t3 || $[8] !== t4) {
265
330
  t5 = /*#__PURE__*/jsx("span", {
266
331
  className: t1,
332
+ "data-component": "Card.Icon",
267
333
  role: t2,
268
334
  "aria-label": ariaLabel,
269
335
  "aria-hidden": t3,
@@ -279,9 +345,9 @@ const CardIcon = t0 => {
279
345
  t5 = $[9];
280
346
  }
281
347
  return t5;
282
- };
348
+ }
283
349
  CardIcon.displayName = 'Card.Icon';
284
- const CardImage = t0 => {
350
+ function CardImage(t0) {
285
351
  const $ = c(12);
286
352
  let className;
287
353
  let rest;
@@ -317,10 +383,11 @@ const CardImage = t0 => {
317
383
  let t3;
318
384
  if ($[7] !== alt || $[8] !== rest || $[9] !== src || $[10] !== t2) {
319
385
  t3 = /*#__PURE__*/jsx("img", {
386
+ ...rest,
320
387
  src: src,
321
388
  alt: alt,
322
389
  className: t2,
323
- ...rest
390
+ "data-component": "Card.Image"
324
391
  });
325
392
  $[7] = alt;
326
393
  $[8] = rest;
@@ -331,12 +398,21 @@ const CardImage = t0 => {
331
398
  t3 = $[11];
332
399
  }
333
400
  return t3;
334
- };
401
+ }
335
402
  CardImage.displayName = 'Card.Image';
403
+
404
+ /**
405
+ * Heading shown at the top of a Card.
406
+ *
407
+ * When the parent Card uses `as="section"`, the heading's `id` is
408
+ * automatically wired to the section's `aria-labelledby`.
409
+ */
336
410
  const CardHeading = /*#__PURE__*/forwardRef(function CardHeading(t0, ref) {
337
- const $ = c(13);
411
+ var _id;
412
+ const $ = c(15);
338
413
  let children;
339
414
  let className;
415
+ let id;
340
416
  let rest;
341
417
  let t1;
342
418
  if ($[0] !== t0) {
@@ -344,47 +420,58 @@ const CardHeading = /*#__PURE__*/forwardRef(function CardHeading(t0, ref) {
344
420
  as: t1,
345
421
  children,
346
422
  className,
423
+ id,
347
424
  ...rest
348
425
  } = t0);
349
426
  $[0] = t0;
350
427
  $[1] = children;
351
428
  $[2] = className;
352
- $[3] = rest;
353
- $[4] = t1;
429
+ $[3] = id;
430
+ $[4] = rest;
431
+ $[5] = t1;
354
432
  } else {
355
433
  children = $[1];
356
434
  className = $[2];
357
- rest = $[3];
358
- t1 = $[4];
435
+ id = $[3];
436
+ rest = $[4];
437
+ t1 = $[5];
359
438
  }
360
439
  const Component = t1 === undefined ? "h3" : t1;
361
- let t2;
362
- if ($[5] !== className) {
363
- t2 = clsx(classes.CardHeading, className);
364
- $[5] = className;
365
- $[6] = t2;
440
+ const {
441
+ titleId
442
+ } = useContext(CardContext);
443
+ const t2 = (_id = id) !== null && _id !== void 0 ? _id : titleId;
444
+ let t3;
445
+ if ($[6] !== className) {
446
+ t3 = clsx(classes.CardHeading, className);
447
+ $[6] = className;
448
+ $[7] = t3;
366
449
  } else {
367
- t2 = $[6];
450
+ t3 = $[7];
368
451
  }
369
- let t3;
370
- if ($[7] !== Component || $[8] !== children || $[9] !== ref || $[10] !== rest || $[11] !== t2) {
371
- t3 = /*#__PURE__*/jsx(Component, {
372
- ref: ref,
373
- className: t2,
452
+ let t4;
453
+ if ($[8] !== Component || $[9] !== children || $[10] !== ref || $[11] !== rest || $[12] !== t2 || $[13] !== t3) {
454
+ t4 = /*#__PURE__*/jsx(Component, {
374
455
  ...rest,
456
+ ref: ref,
457
+ id: t2,
458
+ className: t3,
459
+ "data-component": "Card.Heading",
375
460
  children: children
376
461
  });
377
- $[7] = Component;
378
- $[8] = children;
379
- $[9] = ref;
380
- $[10] = rest;
381
- $[11] = t2;
382
- $[12] = t3;
462
+ $[8] = Component;
463
+ $[9] = children;
464
+ $[10] = ref;
465
+ $[11] = rest;
466
+ $[12] = t2;
467
+ $[13] = t3;
468
+ $[14] = t4;
383
469
  } else {
384
- t3 = $[12];
470
+ t4 = $[14];
385
471
  }
386
- return t3;
472
+ return t4;
387
473
  });
474
+ CardHeading.displayName = 'Card.Heading';
388
475
  const CardDescription = /*#__PURE__*/forwardRef(function CardDescription(t0, ref) {
389
476
  const $ = c(11);
390
477
  let children;
@@ -416,9 +503,10 @@ const CardDescription = /*#__PURE__*/forwardRef(function CardDescription(t0, ref
416
503
  let t2;
417
504
  if ($[6] !== children || $[7] !== ref || $[8] !== rest || $[9] !== t1) {
418
505
  t2 = /*#__PURE__*/jsx("p", {
506
+ ...rest,
419
507
  ref: ref,
420
508
  className: t1,
421
- ...rest,
509
+ "data-component": "Card.Description",
422
510
  children: children
423
511
  });
424
512
  $[6] = children;
@@ -431,14 +519,24 @@ const CardDescription = /*#__PURE__*/forwardRef(function CardDescription(t0, ref
431
519
  }
432
520
  return t2;
433
521
  });
434
- const CardMenu = t0 => {
522
+ CardDescription.displayName = 'Card.Description';
523
+
524
+ /**
525
+ * Top-right slot for a single interactive control.
526
+ *
527
+ * Give the control a label that names the card (e.g. `"More options for
528
+ * Project Alpha"`, not just `"More options"`) so users can tell which card
529
+ * the action applies to when several cards are visible.
530
+ */
531
+ function CardAction(t0) {
435
532
  const $ = c(2);
436
533
  const {
437
534
  children
438
535
  } = t0;
439
536
  let t1;
440
537
  if ($[0] !== children) {
441
- t1 = /*#__PURE__*/jsx(Fragment, {
538
+ t1 = /*#__PURE__*/jsx("div", {
539
+ "data-component": "Card.Action",
442
540
  children: children
443
541
  });
444
542
  $[0] = children;
@@ -447,8 +545,8 @@ const CardMenu = t0 => {
447
545
  t1 = $[1];
448
546
  }
449
547
  return t1;
450
- };
451
- CardMenu.displayName = 'Card.Menu';
548
+ }
549
+ CardAction.displayName = 'Card.Action';
452
550
  const CardMetadata = /*#__PURE__*/forwardRef(function CardMetadata(t0, ref) {
453
551
  const $ = c(11);
454
552
  let children;
@@ -480,9 +578,10 @@ const CardMetadata = /*#__PURE__*/forwardRef(function CardMetadata(t0, ref) {
480
578
  let t2;
481
579
  if ($[6] !== children || $[7] !== ref || $[8] !== rest || $[9] !== t1) {
482
580
  t2 = /*#__PURE__*/jsx("div", {
581
+ ...rest,
483
582
  ref: ref,
484
583
  className: t1,
485
- ...rest,
584
+ "data-component": "Card.Metadata",
486
585
  children: children
487
586
  });
488
587
  $[6] = children;
@@ -495,5 +594,6 @@ const CardMetadata = /*#__PURE__*/forwardRef(function CardMetadata(t0, ref) {
495
594
  }
496
595
  return t2;
497
596
  });
597
+ CardMetadata.displayName = 'Card.Metadata';
498
598
 
499
- export { CardDescription, CardHeading, CardIcon, CardImage, CardImpl, CardMenu, CardMetadata };
599
+ export { CardAction, CardDescription, CardHeading, CardIcon, CardImage, CardImpl, CardMetadata };
@@ -1,5 +1,5 @@
1
- import './Card-cec366f8.css';
1
+ import './Card-d8a02dd9.css';
2
2
 
3
- var classes = {"Card":"prc-Card-Card-pYjuL","CardHeader":"prc-Card-CardHeader-P5Qbb","CardHeaderEdgeToEdge":"prc-Card-CardHeaderEdgeToEdge-3yCqT","CardImage":"prc-Card-CardImage-2M8DM","CardIcon":"prc-Card-CardIcon-mIMfj","CardBody":"prc-Card-CardBody-W1o-l","CardContent":"prc-Card-CardContent-omZDS","CardHeading":"prc-Card-CardHeading-3HXyS","CardDescription":"prc-Card-CardDescription-MnJ3F","CardMetadataContainer":"prc-Card-CardMetadataContainer-K-UlH","CardMetadataItem":"prc-Card-CardMetadataItem-ellY9","CardMenu":"prc-Card-CardMenu-1b3uS"};
3
+ var classes = {"Card":"prc-Card-Card-pYjuL","CardHeader":"prc-Card-CardHeader-P5Qbb","CardHeaderEdgeToEdge":"prc-Card-CardHeaderEdgeToEdge-3yCqT","CardImage":"prc-Card-CardImage-2M8DM","CardIcon":"prc-Card-CardIcon-mIMfj","CardBody":"prc-Card-CardBody-W1o-l","CardContent":"prc-Card-CardContent-omZDS","CardHeading":"prc-Card-CardHeading-3HXyS","CardDescription":"prc-Card-CardDescription-MnJ3F","CardMetadataContainer":"prc-Card-CardMetadataContainer-K-UlH","CardMetadataItem":"prc-Card-CardMetadataItem-ellY9","CardAction":"prc-Card-CardAction-VtI49"};
4
4
 
5
5
  export { classes as default };
@@ -1,17 +1,20 @@
1
- import type { CardProps, CardIconProps, CardImageProps, CardHeadingProps, CardDescriptionProps, CardMenuProps, CardMetadataProps } from './Card';
2
- declare const Card: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
1
+ import { CardIcon, CardImage, CardAction } from './Card';
2
+ import type { CardProps, CardIconProps, CardImageProps, CardHeadingProps, CardDescriptionProps, CardActionProps, CardMetadataProps } from './Card';
3
+ declare const Card: (<As extends "div" | "section">(props: (import("react").ComponentPropsWithRef<import("react").ElementType extends As ? "div" : As> & {
3
4
  className?: string;
4
5
  padding?: "none" | "condensed" | "normal";
5
6
  borderRadius?: "medium" | "large";
6
- } & import("react").RefAttributes<HTMLDivElement>> & {
7
- Icon: {
8
- ({ icon: IconComponent, "aria-label": ariaLabel, className }: CardIconProps): import("react").JSX.Element;
9
- displayName: string;
10
- };
11
- Image: {
12
- ({ src, alt, className, ...rest }: CardImageProps): import("react").JSX.Element;
13
- displayName: string;
14
- };
7
+ children: React.ReactNode;
8
+ } extends infer T ? T extends import("react").ComponentPropsWithRef<import("react").ElementType extends As ? "div" : As> & {
9
+ className?: string;
10
+ padding?: "none" | "condensed" | "normal";
11
+ borderRadius?: "medium" | "large";
12
+ children: React.ReactNode;
13
+ } ? T extends unknown ? Omit<T, "as"> : never : never : never) & {
14
+ as?: As | undefined;
15
+ } & import("react").RefAttributes<any>) => React.ReactNode) & {
16
+ Icon: typeof CardIcon;
17
+ Image: typeof CardImage;
15
18
  Heading: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & {
16
19
  as?: "h2" | "h3" | "h4" | "h5" | "h6";
17
20
  children: React.ReactNode;
@@ -19,14 +22,11 @@ declare const Card: import("react").ForwardRefExoticComponent<Omit<import("react
19
22
  Description: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & {
20
23
  children: React.ReactNode;
21
24
  } & import("react").RefAttributes<HTMLParagraphElement>>;
22
- Menu: {
23
- ({ children }: CardMenuProps): import("react").JSX.Element;
24
- displayName: string;
25
- };
25
+ Action: typeof CardAction;
26
26
  Metadata: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
27
27
  children: React.ReactNode;
28
28
  } & import("react").RefAttributes<HTMLDivElement>>;
29
29
  };
30
30
  export { Card };
31
- export type { CardProps, CardIconProps, CardImageProps, CardHeadingProps, CardDescriptionProps, CardMenuProps, CardMetadataProps, };
31
+ export type { CardProps, CardIconProps, CardImageProps, CardHeadingProps, CardDescriptionProps, CardActionProps, CardMetadataProps, };
32
32
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Card/index.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,SAAS,EACT,aAAa,EACb,cAAc,EACd,gBAAgB,EAChB,oBAAoB,EACpB,aAAa,EACb,iBAAiB,EAClB,MAAM,QAAQ,CAAA;AAEf,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;CAOR,CAAA;AAEF,OAAO,EAAC,IAAI,EAAC,CAAA;AACb,YAAY,EACV,SAAS,EACT,aAAa,EACb,cAAc,EACd,gBAAgB,EAChB,oBAAoB,EACpB,aAAa,EACb,iBAAiB,GAClB,CAAA"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Card/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAW,QAAQ,EAAE,SAAS,EAAgC,UAAU,EAAe,MAAM,QAAQ,CAAA;AAC5G,OAAO,KAAK,EACV,SAAS,EACT,aAAa,EACb,cAAc,EACd,gBAAgB,EAChB,oBAAoB,EACpB,eAAe,EACf,iBAAiB,EAClB,MAAM,QAAQ,CAAA;AAEf,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;CAOR,CAAA;AAEF,OAAO,EAAC,IAAI,EAAC,CAAA;AACb,YAAY,EACV,SAAS,EACT,aAAa,EACb,cAAc,EACd,gBAAgB,EAChB,oBAAoB,EACpB,eAAe,EACf,iBAAiB,GAClB,CAAA"}