@primer/react 0.0.0-20260511204147 → 0.0.0-20260511210424

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 (43) hide show
  1. package/CHANGELOG.md +2 -2
  2. package/dist/Blankslate/Blankslate.d.ts.map +1 -1
  3. package/dist/Blankslate/Blankslate.js +6 -0
  4. package/dist/BranchName/BranchName.js +1 -0
  5. package/dist/Breadcrumbs/Breadcrumbs.d.ts.map +1 -1
  6. package/dist/Breadcrumbs/Breadcrumbs.js +4 -0
  7. package/dist/ButtonGroup/ButtonGroup.d.ts.map +1 -1
  8. package/dist/ButtonGroup/ButtonGroup.js +1 -0
  9. package/dist/Checkbox/Checkbox.d.ts +1 -0
  10. package/dist/Checkbox/Checkbox.d.ts.map +1 -1
  11. package/dist/Checkbox/Checkbox.js +10 -5
  12. package/dist/CheckboxGroup/CheckboxGroup.js +1 -0
  13. package/dist/CircleBadge/CircleBadge.d.ts.map +1 -1
  14. package/dist/CircleBadge/CircleBadge.js +44 -28
  15. package/dist/ConfirmationDialog/ConfirmationDialog.d.ts.map +1 -1
  16. package/dist/ConfirmationDialog/ConfirmationDialog.js +1 -0
  17. package/dist/CounterLabel/CounterLabel.d.ts +2 -0
  18. package/dist/CounterLabel/CounterLabel.d.ts.map +1 -1
  19. package/dist/CounterLabel/CounterLabel.js +25 -90
  20. package/dist/Dialog/Dialog-f9bb927a.css +2 -0
  21. package/dist/Dialog/Dialog-f9bb927a.css.map +1 -0
  22. package/dist/Dialog/Dialog.d.ts +3 -4
  23. package/dist/Dialog/Dialog.d.ts.map +1 -1
  24. package/dist/Dialog/Dialog.js +18 -19
  25. package/dist/Dialog/Dialog.module.css.js +1 -1
  26. package/dist/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroup.d.ts +2 -0
  27. package/dist/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroup.d.ts.map +1 -1
  28. package/dist/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroup.js +4 -1
  29. package/dist/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupCaption.d.ts.map +1 -1
  30. package/dist/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupCaption.js +3 -1
  31. package/dist/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupContext.d.ts +1 -0
  32. package/dist/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupContext.d.ts.map +1 -1
  33. package/dist/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupLabel.d.ts.map +1 -1
  34. package/dist/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupLabel.js +3 -1
  35. package/dist/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupValidation.d.ts.map +1 -1
  36. package/dist/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupValidation.js +3 -1
  37. package/dist/internal/components/InputValidation.d.ts +1 -1
  38. package/dist/internal/components/InputValidation.d.ts.map +1 -1
  39. package/dist/internal/components/InputValidation.js +58 -33
  40. package/generated/components.json +2 -2
  41. package/package.json +1 -1
  42. package/dist/Dialog/Dialog-b7da369a.css +0 -2
  43. package/dist/Dialog/Dialog-b7da369a.css.map +0 -1
package/CHANGELOG.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # @primer/react
2
2
 
3
- ## 0.0.0-20260511204147
3
+ ## 0.0.0-20260511210424
4
4
 
5
5
  ### Minor Changes
6
6
 
@@ -9,7 +9,7 @@
9
9
  - Export `ActionListContainerContext` as `ActionList.ContainerContext`.
10
10
  - Export `useRovingTabIndex` from the public API with additional configuration options (`preventScroll` and `dependencies`).
11
11
 
12
- - [#7831](https://github.com/primer/react/pull/7831) [`c0111d7`](https://github.com/primer/react/commit/c0111d7a2f296434cf6ec671defd4f76bf772a8b) Thanks [@liuliu-dev](https://github.com/liuliu-dev)! - Dialog: Support custom width values.
12
+ - [#7776](https://github.com/primer/react/pull/7776) [`8b36590`](https://github.com/primer/react/commit/8b365905a171b48f2efe1e81b8b82d94d1697c93) Thanks [@llastflowers](https://github.com/llastflowers)! - Add `data-component` attributes for Blankslate, BranchName, Breadcrumbs, ButtonGroup, Checkbox, CheckboxGroup, CircleBadge, ConfirmationDialog, CounterLabel, and Dialog to provide stable selectors.
13
13
 
14
14
  ### Patch Changes
15
15
 
@@ -1 +1 @@
1
- {"version":3,"file":"Blankslate.d.ts","sourceRoot":"","sources":["../../src/Blankslate/Blankslate.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,KAAK,eAAe,GAAG,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,GAAG;IACzD;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;IAEhB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAElB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;IAEhB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAElB;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;CACpC,CAAA;AAED,iBAAS,UAAU,CAAC,EAAC,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,IAAe,EAAE,GAAG,IAAI,EAAC,EAAE,eAAe,qBAsB7G;AAED,KAAK,qBAAqB,GAAG,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,CAAA;AAE9D,iBAAS,MAAM,CAAC,EAAC,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAI,EAAC,EAAE,qBAAqB,qBAMpE;AAED,KAAK,sBAAsB,GAAG,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,GAAG;IAChE,EAAE,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;CAC7C,CAAA;AAED,iBAAS,OAAO,CAAC,EAAC,EAAE,EAAE,SAAgB,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAI,EAAC,EAAE,sBAAsB,qBAM5F;AAED,KAAK,0BAA0B,GAAG,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,CAAA;AAEnE,iBAAS,WAAW,CAAC,EAAC,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAI,EAAC,EAAE,0BAA0B,qBAM9E;AAED,KAAK,4BAA4B,GAC7B,CAAC,KAAK,CAAC,iBAAiB,CAAC;IACvB,IAAI,CAAC,EAAE,KAAK,CAAA;CACb,CAAC,GACA,KAAK,CAAC,wBAAwB,CAAC,QAAQ,CAAC,CAAC,GAC3C,KAAK,CAAC,iBAAiB,CAAC;IACtB,IAAI,EAAE,MAAM,CAAA;CACb,CAAC,CAAA;AAEN,iBAAS,aAAa,CAAC,EAAC,QAAQ,EAAE,IAAI,EAAE,GAAG,KAAK,EAAC,EAAE,4BAA4B,qBAe9E;AAED,KAAK,8BAA8B,GAAG,KAAK,CAAC,iBAAiB,CAAC;IAC5D,IAAI,EAAE,MAAM,CAAA;CACb,CAAC,CAAA;AAEF,iBAAS,eAAe,CAAC,EAAC,QAAQ,EAAE,IAAI,EAAC,EAAE,8BAA8B,qBAMxE;AAED,OAAO,EAAC,UAAU,EAAE,MAAM,EAAE,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,eAAe,EAAC,CAAA;AACjF,YAAY,EACV,eAAe,EACf,qBAAqB,EACrB,sBAAsB,EACtB,0BAA0B,EAC1B,4BAA4B,EAC5B,8BAA8B,GAC/B,CAAA"}
1
+ {"version":3,"file":"Blankslate.d.ts","sourceRoot":"","sources":["../../src/Blankslate/Blankslate.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,KAAK,eAAe,GAAG,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,GAAG;IACzD;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;IAEhB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAElB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;IAEhB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAElB;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;CACpC,CAAA;AAED,iBAAS,UAAU,CAAC,EAAC,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,IAAe,EAAE,GAAG,IAAI,EAAC,EAAE,eAAe,qBAuB7G;AAED,KAAK,qBAAqB,GAAG,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,CAAA;AAE9D,iBAAS,MAAM,CAAC,EAAC,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAI,EAAC,EAAE,qBAAqB,qBAMpE;AAED,KAAK,sBAAsB,GAAG,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,GAAG;IAChE,EAAE,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;CAC7C,CAAA;AAED,iBAAS,OAAO,CAAC,EAAC,EAAE,EAAE,SAAgB,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAI,EAAC,EAAE,sBAAsB,qBAU5F;AAED,KAAK,0BAA0B,GAAG,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,CAAA;AAEnE,iBAAS,WAAW,CAAC,EAAC,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAI,EAAC,EAAE,0BAA0B,qBAU9E;AAED,KAAK,4BAA4B,GAC7B,CAAC,KAAK,CAAC,iBAAiB,CAAC;IACvB,IAAI,CAAC,EAAE,KAAK,CAAA;CACb,CAAC,GACA,KAAK,CAAC,wBAAwB,CAAC,QAAQ,CAAC,CAAC,GAC3C,KAAK,CAAC,iBAAiB,CAAC;IACtB,IAAI,EAAE,MAAM,CAAA;CACb,CAAC,CAAA;AAEN,iBAAS,aAAa,CAAC,EAAC,QAAQ,EAAE,IAAI,EAAE,GAAG,KAAK,EAAC,EAAE,4BAA4B,qBAe9E;AAED,KAAK,8BAA8B,GAAG,KAAK,CAAC,iBAAiB,CAAC;IAC5D,IAAI,EAAE,MAAM,CAAA;CACb,CAAC,CAAA;AAEF,iBAAS,eAAe,CAAC,EAAC,QAAQ,EAAE,IAAI,EAAC,EAAE,8BAA8B,qBAMxE;AAED,OAAO,EAAC,UAAU,EAAE,MAAM,EAAE,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,eAAe,EAAC,CAAA;AACjF,YAAY,EACV,eAAe,EACf,qBAAqB,EACrB,sBAAsB,EACtB,0BAA0B,EAC1B,4BAA4B,EAC5B,8BAA8B,GAC/B,CAAA"}
@@ -70,6 +70,7 @@ function Blankslate(t0) {
70
70
  if ($[12] !== children || $[13] !== size || $[14] !== t3 || $[15] !== t4 || $[16] !== t5 || $[17] !== t6) {
71
71
  t7 = /*#__PURE__*/jsx("div", {
72
72
  className: t3,
73
+ "data-component": "Blankslate",
73
74
  "data-border": t4,
74
75
  "data-narrow": t5,
75
76
  "data-spacious": t6,
@@ -146,6 +147,7 @@ function Visual(t0) {
146
147
  t2 = /*#__PURE__*/jsx("span", {
147
148
  ...rest,
148
149
  className: t1,
150
+ "data-component": "Blankslate.Visual",
149
151
  children: children
150
152
  });
151
153
  $[6] = children;
@@ -195,6 +197,7 @@ function Heading(t0) {
195
197
  t3 = /*#__PURE__*/jsx(Component, {
196
198
  ...rest,
197
199
  className: t2,
200
+ "data-component": "Blankslate.Heading",
198
201
  children: children
199
202
  });
200
203
  $[7] = Component;
@@ -240,6 +243,7 @@ function Description(t0) {
240
243
  t2 = /*#__PURE__*/jsx("p", {
241
244
  ...rest,
242
245
  className: t1,
246
+ "data-component": "Blankslate.Description",
243
247
  children: children
244
248
  });
245
249
  $[6] = children;
@@ -287,6 +291,7 @@ function PrimaryAction(t0) {
287
291
  if ($[5] !== children || $[6] !== href || $[7] !== props || $[8] !== t2 || $[9] !== t3) {
288
292
  t4 = /*#__PURE__*/jsx("div", {
289
293
  className: t1,
294
+ "data-component": "Blankslate.PrimaryAction",
290
295
  children: /*#__PURE__*/jsx(ButtonComponent, {
291
296
  ...props,
292
297
  as: t2,
@@ -324,6 +329,7 @@ function SecondaryAction(t0) {
324
329
  if ($[1] !== children || $[2] !== href) {
325
330
  t2 = /*#__PURE__*/jsx("div", {
326
331
  className: t1,
332
+ "data-component": "Blankslate.SecondaryAction",
327
333
  children: /*#__PURE__*/jsx(Link, {
328
334
  href: href,
329
335
  children: children
@@ -44,6 +44,7 @@ function BranchName(props, ref) {
44
44
  ...rest,
45
45
  ref: ref,
46
46
  className: t1,
47
+ "data-component": "BranchName",
47
48
  children: children
48
49
  });
49
50
  $[7] = Component;
@@ -1 +1 @@
1
- {"version":3,"file":"Breadcrumbs.d.ts","sourceRoot":"","sources":["../../src/Breadcrumbs/Breadcrumbs.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAC,EAAE,EAAC,MAAM,SAAS,CAAA;AAC/B,OAAO,KAA6E,MAAM,OAAO,CAAA;AAUjG,OAAO,EAAC,KAAK,gBAAgB,EAAkB,MAAM,6BAA6B,CAAA;AAElF,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,iBAAiB,CAAC;IACrD;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,gBAAgB,CAAA;IAC7C;;;;OAIG;IACH,OAAO,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAA;IAC/B;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;CAC5B,CAAC,CAAA;AA8GF,iBAAS,WAAW,CAAC,EAAC,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAiB,EAAE,OAAkB,EAAC,EAAE,gBAAgB,qBAmMzG;kBAnMQ,WAAW;;;AA+MpB,KAAK,0BAA0B,CAAC,EAAE,SAAS,KAAK,CAAC,WAAW,GAAG,GAAG,IAAI,gBAAgB,CACpF,EAAE,EACF,GAAG,EACH;IACE,EAAE,CAAC,EAAE,EAAE,CAAA;IACP,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CACF,CAAA;AAsBD,MAAM,MAAM,oBAAoB,CAAC,EAAE,SAAS,KAAK,CAAC,WAAW,GAAG,GAAG,IAAI,0BAA0B,CAAC,EAAE,CAAC,CAAA;;YAnBlG,EAAE,SAAS,KAAK,CAAC,WAAW;aANtB,EAAE;mBACI,OAAO;;aADb,EAAE;mBACI,OAAO;;;;;;;AA2BtB,wBAAiF;AAEjF;;GAEG;AACH,eAAO,MAAM,UAAU;WA3BpB,EAAE,SAAS,KAAK,CAAC,WAAW;aANtB,EAAE;mBACI,OAAO;;aADb,EAAE;mBACI,OAAO;;;;CAgCuD,CAAA;AAE7E;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG,gBAAgB,CAAA;AAE9C;;GAEG;AACH,MAAM,MAAM,mBAAmB,CAAC,EAAE,SAAS,KAAK,CAAC,WAAW,GAAG,GAAG,IAAI,oBAAoB,CAAC,EAAE,CAAC,CAAA"}
1
+ {"version":3,"file":"Breadcrumbs.d.ts","sourceRoot":"","sources":["../../src/Breadcrumbs/Breadcrumbs.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAC,EAAE,EAAC,MAAM,SAAS,CAAA;AAC/B,OAAO,KAA6E,MAAM,OAAO,CAAA;AAUjG,OAAO,EAAC,KAAK,gBAAgB,EAAkB,MAAM,6BAA6B,CAAA;AAElF,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,iBAAiB,CAAC;IACrD;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,gBAAgB,CAAA;IAC7C;;;;OAIG;IACH,OAAO,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAA;IAC/B;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;CAC5B,CAAC,CAAA;AA8GF,iBAAS,WAAW,CAAC,EAAC,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAiB,EAAE,OAAkB,EAAC,EAAE,gBAAgB,qBAwMzG;kBAxMQ,WAAW;;;AAoNpB,KAAK,0BAA0B,CAAC,EAAE,SAAS,KAAK,CAAC,WAAW,GAAG,GAAG,IAAI,gBAAgB,CACpF,EAAE,EACF,GAAG,EACH;IACE,EAAE,CAAC,EAAE,EAAE,CAAA;IACP,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CACF,CAAA;AAuBD,MAAM,MAAM,oBAAoB,CAAC,EAAE,SAAS,KAAK,CAAC,WAAW,GAAG,GAAG,IAAI,0BAA0B,CAAC,EAAE,CAAC,CAAA;;YApBlG,EAAE,SAAS,KAAK,CAAC,WAAW;aANtB,EAAE;mBACI,OAAO;;aADb,EAAE;mBACI,OAAO;;;;;;;AA4BtB,wBAAiF;AAEjF;;GAEG;AACH,eAAO,MAAM,UAAU;WA5BpB,EAAE,SAAS,KAAK,CAAC,WAAW;aANtB,EAAE;mBACI,OAAO;;aADb,EAAE;mBACI,OAAO;;;;CAiCuD,CAAA;AAE7E;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG,gBAAgB,CAAA;AAE9C;;GAEG;AACH,MAAM,MAAM,mBAAmB,CAAC,EAAE,SAAS,KAAK,CAAC,WAAW,GAAG,GAAG,IAAI,oBAAoB,CAAC,EAAE,CAAC,CAAA"}
@@ -189,6 +189,7 @@ const BreadcrumbsMenuItem = /*#__PURE__*/React.forwardRef((t0, menuRefCallback)
189
189
  t13 = /*#__PURE__*/jsxs(Details, {
190
190
  ref: detailsRefCallback,
191
191
  className: classes.MenuDetails,
192
+ "data-component": "Breadcrumbs.MenuItem",
192
193
  children: [t10, t12]
193
194
  });
194
195
  $[21] = detailsRefCallback;
@@ -323,6 +324,7 @@ function Breadcrumbs({
323
324
  if (overflow === 'wrap' || menuItems.length === 0) {
324
325
  return React.Children.map(children, child_0 => /*#__PURE__*/jsx("li", {
325
326
  className: classes.ItemWrapper,
327
+ "data-component": "Breadcrumbs.ItemWrapper",
326
328
  children: child_0
327
329
  }));
328
330
  }
@@ -362,6 +364,7 @@ function Breadcrumbs({
362
364
  ref: containerRef,
363
365
  "data-overflow": overflow,
364
366
  "data-variant": variant,
367
+ "data-component": "Breadcrumbs",
365
368
  children: /*#__PURE__*/jsx(BreadcrumbsList, {
366
369
  children: finalChildren
367
370
  })
@@ -403,6 +406,7 @@ const BreadcrumbsItem = fixedForwardRef((props, ref) => {
403
406
  className: clsx(className, classes.Item, selected && 'selected'),
404
407
  "aria-current": selected ? 'page' : undefined,
405
408
  ref: ref,
409
+ "data-component": "Breadcrumbs.Item",
406
410
  ...rest
407
411
  });
408
412
  });
@@ -1 +1 @@
1
- {"version":3,"file":"ButtonGroup.d.ts","sourceRoot":"","sources":["../../src/ButtonGroup/ButtonGroup.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAC,KAAK,iBAAiB,EAAC,MAAM,OAAO,CAAA;AAKnD,OAAO,KAAK,EAAC,mBAAmB,IAAI,8BAA8B,EAAC,MAAM,sBAAsB,CAAA;AAE/F,MAAM,MAAM,gBAAgB,GAAG,iBAAiB,CAAC;IAC/C,4BAA4B;IAC5B,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,sCAAsC;IACtC,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAC,CAAA;AAEF,QAAA,MAAM,WAAW,EAoBX,8BAA8B,CAAC,KAAK,EAAE,gBAAgB,CAAC,CAAA;AAI7D,eAAe,WAAW,CAAA"}
1
+ {"version":3,"file":"ButtonGroup.d.ts","sourceRoot":"","sources":["../../src/ButtonGroup/ButtonGroup.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAC,KAAK,iBAAiB,EAAC,MAAM,OAAO,CAAA;AAKnD,OAAO,KAAK,EAAC,mBAAmB,IAAI,8BAA8B,EAAC,MAAM,sBAAsB,CAAA;AAE/F,MAAM,MAAM,gBAAgB,GAAG,iBAAiB,CAAC;IAC/C,4BAA4B;IAC5B,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,sCAAsC;IACtC,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAC,CAAA;AAEF,QAAA,MAAM,WAAW,EA0BX,8BAA8B,CAAC,KAAK,EAAE,gBAAgB,CAAC,CAAA;AAI7D,eAAe,WAAW,CAAA"}
@@ -77,6 +77,7 @@ const ButtonGroup = /*#__PURE__*/React.forwardRef(function ButtonGroup(t0, forwa
77
77
  className: t5,
78
78
  role: role,
79
79
  ...rest,
80
+ "data-component": "ButtonGroup",
80
81
  children: buttons
81
82
  });
82
83
  $[13] = BaseComponent;
@@ -27,6 +27,7 @@ export type CheckboxProps = {
27
27
  * Used during form submission and to identify which checkbox inputs are selected
28
28
  */
29
29
  value?: string;
30
+ 'data-component'?: string;
30
31
  } & Exclude<InputHTMLAttributes<HTMLInputElement>, 'value'>;
31
32
  /**
32
33
  * An accessible, native checkbox component
@@ -1 +1 @@
1
- {"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../src/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAiD,KAAK,mBAAmB,EAAoB,MAAM,OAAO,CAAA;AAExH,OAAO,KAAK,EAAC,oBAAoB,EAAC,MAAM,qCAAqC,CAAA;AAI7E,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,gBAAgB,CAAA;AAElD,MAAM,MAAM,aAAa,GAAG;IAC1B;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAA;IACvC;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,gBAAgB,CAAC,EAAE,oBAAoB,CAAA;IACvC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,GAAG,OAAO,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,OAAO,CAAC,CAAA;AAE3D;;GAEG;AACH,QAAA,MAAM,QAAQ,qGAqDb,CAAA;wBAK0B,cAAc,CAAC,OAAO,QAAQ,CAAC;AAA1D,wBAA0D"}
1
+ {"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../src/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAiD,KAAK,mBAAmB,EAAoB,MAAM,OAAO,CAAA;AAExH,OAAO,KAAK,EAAC,oBAAoB,EAAC,MAAM,qCAAqC,CAAA;AAI7E,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,gBAAgB,CAAA;AAElD,MAAM,MAAM,aAAa,GAAG;IAC1B;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAA;IACvC;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,gBAAgB,CAAC,EAAE,oBAAoB,CAAA;IACvC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,gBAAgB,CAAC,EAAE,MAAM,CAAA;CAC1B,GAAG,OAAO,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,OAAO,CAAC,CAAA;AAE3D;;GAEG;AACH,QAAA,MAAM,QAAQ,qGAuEb,CAAA;wBAK0B,cAAc,CAAC,OAAO,QAAQ,CAAC;AAA1D,wBAA0D"}
@@ -20,6 +20,7 @@ const Checkbox = /*#__PURE__*/React.forwardRef(({
20
20
  required,
21
21
  validationStatus,
22
22
  value,
23
+ ['data-component']: dataComponent,
23
24
  ...rest
24
25
  }, ref
25
26
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -66,11 +67,15 @@ const Checkbox = /*#__PURE__*/React.forwardRef(({
66
67
  checkbox.setAttribute('aria-checked', checkbox.checked ? 'true' : 'false');
67
68
  }
68
69
  });
69
- // @ts-expect-error inputProp needs a non nullable ref
70
- return /*#__PURE__*/jsx("input", {
71
- ...inputProps,
72
- className: clsx(className, sharedClasses.Input, classes.Checkbox)
73
- });
70
+ return (
71
+ /*#__PURE__*/
72
+ // @ts-expect-error inputProp needs a non nullable ref
73
+ jsx("input", {
74
+ ...inputProps,
75
+ "data-component": dataComponent !== null && dataComponent !== void 0 ? dataComponent : 'Checkbox',
76
+ className: clsx(className, sharedClasses.Input, classes.Checkbox)
77
+ })
78
+ );
74
79
  });
75
80
  Checkbox.displayName = 'Checkbox';
76
81
  Checkbox.__SLOT__ = Symbol('Checkbox');
@@ -96,6 +96,7 @@ const CheckboxGroup = t0 => {
96
96
  let t5;
97
97
  if ($[17] !== children || $[18] !== disabled || $[19] !== rest) {
98
98
  t5 = /*#__PURE__*/jsx(CheckboxOrRadioGroup, {
99
+ parentName: "CheckboxGroup",
99
100
  disabled: disabled,
100
101
  ...rest,
101
102
  children: children
@@ -1 +1 @@
1
- {"version":3,"file":"CircleBadge.d.ts","sourceRoot":"","sources":["../../src/CircleBadge/CircleBadge.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,gBAAgB,CAAA;AAGlD,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,YAAY,CAAA;AAG5C,QAAA,MAAM,YAAY;;;;CAIjB,CAAA;AAED,MAAM,MAAM,gBAAgB,CAAC,EAAE,SAAS,KAAK,CAAC,WAAW,IAAI;IAC3D,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,OAAO,CAAC,EAAE,MAAM,OAAO,YAAY,CAAA;IACnC,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,EAAE,CAAC,EAAE,EAAE,CAAA;IACP,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,GAAG,KAAK,CAAC,qBAAqB,CAAC,KAAK,CAAC,WAAW,SAAS,EAAE,GAAG,GAAG,GAAG,EAAE,CAAC,CAAA;AAmBxE,QAAA,MAAM,eAAe;YAAW,YAAY;;CAA8D,CAAA;AAI1G,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAAC,OAAO,eAAe,CAAC,CAAA;AAEzE;;;GAGG;0BAlBkB,EAAE,SAAS,KAAK,CAAC,WAAW,+BAAqC,gBAAgB,CAAC,EAAE,CAAC;;gBAS1E,YAAY;;;;AAU5C,wBAAkE"}
1
+ {"version":3,"file":"CircleBadge.d.ts","sourceRoot":"","sources":["../../src/CircleBadge/CircleBadge.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,gBAAgB,CAAA;AAGlD,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,YAAY,CAAA;AAG5C,QAAA,MAAM,YAAY;;;;CAIjB,CAAA;AAED,MAAM,MAAM,gBAAgB,CAAC,EAAE,SAAS,KAAK,CAAC,WAAW,IAAI;IAC3D,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,OAAO,CAAC,EAAE,MAAM,OAAO,YAAY,CAAA;IACnC,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,EAAE,CAAC,EAAE,EAAE,CAAA;IACP,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,GAAG,KAAK,CAAC,qBAAqB,CAAC,KAAK,CAAC,WAAW,SAAS,EAAE,GAAG,GAAG,GAAG,EAAE,CAAC,CAAA;AAoBxE,QAAA,MAAM,eAAe;YAAW,YAAY;;CAE3C,CAAA;AAID,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAAC,OAAO,eAAe,CAAC,CAAA;AAEzE;;;GAGG;0BArBkB,EAAE,SAAS,KAAK,CAAC,WAAW,+BAAqC,gBAAgB,CAAC,EAAE,CAAC;;gBAU1E,YAAY;;;;AAY5C,wBAAkE"}
@@ -21,69 +21,85 @@ const sizeStyles = ({
21
21
  };
22
22
  };
23
23
  const CircleBadge = t0 => {
24
- const $ = c(12);
24
+ const $ = c(14);
25
25
  let T0;
26
26
  let t1;
27
27
  let t2;
28
28
  let t3;
29
29
  let t4;
30
+ let t5;
30
31
  if ($[0] !== t0) {
31
32
  const {
32
- as: t5,
33
+ as: t6,
33
34
  ...props
34
35
  } = t0;
35
- const Component = t5 === undefined ? "div" : t5;
36
+ const Component = t6 === undefined ? "div" : t6;
36
37
  T0 = Component;
37
38
  t1 = props;
38
- t2 = clsx(styles.CircleBadge, props.className);
39
- t3 = props.inline ? "" : undefined;
40
- t4 = sizeStyles(props);
39
+ t2 = "CircleBadge";
40
+ t3 = clsx(styles.CircleBadge, props.className);
41
+ t4 = props.inline ? "" : undefined;
42
+ t5 = sizeStyles(props);
41
43
  $[0] = t0;
42
44
  $[1] = T0;
43
45
  $[2] = t1;
44
46
  $[3] = t2;
45
47
  $[4] = t3;
46
48
  $[5] = t4;
49
+ $[6] = t5;
47
50
  } else {
48
51
  T0 = $[1];
49
52
  t1 = $[2];
50
53
  t2 = $[3];
51
54
  t3 = $[4];
52
55
  t4 = $[5];
56
+ t5 = $[6];
53
57
  }
54
- let t5;
55
- if ($[6] !== T0 || $[7] !== t1 || $[8] !== t2 || $[9] !== t3 || $[10] !== t4) {
56
- t5 = /*#__PURE__*/jsx(T0, {
58
+ let t6;
59
+ if ($[7] !== T0 || $[8] !== t1 || $[9] !== t2 || $[10] !== t3 || $[11] !== t4 || $[12] !== t5) {
60
+ t6 = /*#__PURE__*/jsx(T0, {
57
61
  ...t1,
58
- className: t2,
59
- "data-inline": t3,
60
- style: t4
62
+ "data-component": t2,
63
+ className: t3,
64
+ "data-inline": t4,
65
+ style: t5
61
66
  });
62
- $[6] = T0;
63
- $[7] = t1;
64
- $[8] = t2;
65
- $[9] = t3;
66
- $[10] = t4;
67
- $[11] = t5;
67
+ $[7] = T0;
68
+ $[8] = t1;
69
+ $[9] = t2;
70
+ $[10] = t3;
71
+ $[11] = t4;
72
+ $[12] = t5;
73
+ $[13] = t6;
68
74
  } else {
69
- t5 = $[11];
75
+ t6 = $[13];
70
76
  }
71
- return t5;
77
+ return t6;
72
78
  };
73
79
  const CircleBadgeIcon = props => {
74
- const $ = c(2);
80
+ const $ = c(5);
75
81
  let t0;
76
- if ($[0] !== props) {
77
- t0 = /*#__PURE__*/jsx(Octicon, {
78
- className: styles.CircleBadgeIcon,
79
- ...props
80
- });
81
- $[0] = props;
82
+ if ($[0] !== props.className) {
83
+ t0 = clsx(styles.CircleBadgeIcon, props.className);
84
+ $[0] = props.className;
82
85
  $[1] = t0;
83
86
  } else {
84
87
  t0 = $[1];
85
88
  }
86
- return t0;
89
+ let t1;
90
+ if ($[2] !== props || $[3] !== t0) {
91
+ t1 = /*#__PURE__*/jsx(Octicon, {
92
+ ...props,
93
+ "data-component": "CircleBadge.Icon",
94
+ className: t0
95
+ });
96
+ $[2] = props;
97
+ $[3] = t0;
98
+ $[4] = t1;
99
+ } else {
100
+ t1 = $[4];
101
+ }
102
+ return t1;
87
103
  };
88
104
  CircleBadgeIcon.displayName = 'CircleBadge.Icon';
89
105
  /**
@@ -1 +1 @@
1
- {"version":3,"file":"ConfirmationDialog.d.ts","sourceRoot":"","sources":["../../src/ConfirmationDialog/ConfirmationDialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,KAAK,EAAoB,WAAW,EAAE,YAAY,EAAC,MAAM,WAAW,CAAA;AAI3E;;GAEG;AACH,MAAM,WAAW,uBAAuB;IACtC;;;OAGG;IACH,OAAO,EAAE,CAAC,OAAO,EAAE,SAAS,GAAG,cAAc,GAAG,QAAQ,GAAG,QAAQ,KAAK,IAAI,CAAA;IAE5E;;;OAGG;IACH,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IAEtB;;OAEG;IACH,mBAAmB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAErC;;OAEG;IACH,oBAAoB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAEtC;;OAEG;IACH,iBAAiB,CAAC,EAAE,QAAQ,GAAG,SAAS,GAAG,QAAQ,CAAA;IAEnD;;OAEG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAE7B;;OAEG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAA;IAE9B;;;;OAIG;IACH,mBAAmB,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAA;IAE1C;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAElB;;;;;;;OAOG;IACH,KAAK,CAAC,EAAE,WAAW,CAAA;IAEnB;;;;;OAKG;IACH,MAAM,CAAC,EAAE,YAAY,CAAA;CACtB;AAED;;;;;GAKG;AACH,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,iBAAiB,CAAC,uBAAuB,CAAC,CAoDzF,CAAA;AAGD,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,uBAAuB,EAAE,SAAS,CAAC,GAAG;IAAC,OAAO,EAAE,KAAK,CAAC,SAAS,CAAA;CAAC,CAAA;AAyBlG;;;;GAIG;AACH,wBAAgB,UAAU,cACa,cAAc,sBAIpD"}
1
+ {"version":3,"file":"ConfirmationDialog.d.ts","sourceRoot":"","sources":["../../src/ConfirmationDialog/ConfirmationDialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,KAAK,EAAoB,WAAW,EAAE,YAAY,EAAC,MAAM,WAAW,CAAA;AAI3E;;GAEG;AACH,MAAM,WAAW,uBAAuB;IACtC;;;OAGG;IACH,OAAO,EAAE,CAAC,OAAO,EAAE,SAAS,GAAG,cAAc,GAAG,QAAQ,GAAG,QAAQ,KAAK,IAAI,CAAA;IAE5E;;;OAGG;IACH,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IAEtB;;OAEG;IACH,mBAAmB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAErC;;OAEG;IACH,oBAAoB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAEtC;;OAEG;IACH,iBAAiB,CAAC,EAAE,QAAQ,GAAG,SAAS,GAAG,QAAQ,CAAA;IAEnD;;OAEG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAE7B;;OAEG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAA;IAE9B;;;;OAIG;IACH,mBAAmB,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAA;IAE1C;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAElB;;;;;;;OAOG;IACH,KAAK,CAAC,EAAE,WAAW,CAAA;IAEnB;;;;;OAKG;IACH,MAAM,CAAC,EAAE,YAAY,CAAA;CACtB;AAED;;;;;GAKG;AACH,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,iBAAiB,CAAC,uBAAuB,CAAC,CAqDzF,CAAA;AAGD,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,uBAAuB,EAAE,SAAS,CAAC,GAAG;IAAC,OAAO,EAAE,KAAK,CAAC,SAAS,CAAA;CAAC,CAAA;AAyBlG;;;;GAIG;AACH,wBAAgB,UAAU,cACa,cAAc,sBAIpD"}
@@ -48,6 +48,7 @@ const ConfirmationDialog = props => {
48
48
  };
49
49
  const footerButtons = [cancelButton, confirmButton];
50
50
  return /*#__PURE__*/jsx(Dialog, {
51
+ "data-component": "ConfirmationDialog",
51
52
  onClose: onClose,
52
53
  title: title,
53
54
  footerButtons: footerButtons,
@@ -5,12 +5,14 @@ export type CounterLabelProps = React.PropsWithChildren<HTMLAttributes<HTMLSpanE
5
5
  scheme?: 'primary' | 'secondary';
6
6
  variant?: 'primary' | 'secondary';
7
7
  className?: string;
8
+ 'data-component'?: string;
8
9
  }>;
9
10
  declare const CounterLabel: React.ForwardRefExoticComponent<HTMLAttributes<HTMLSpanElement> & {
10
11
  /** @deprecated use variant instead */
11
12
  scheme?: "primary" | "secondary";
12
13
  variant?: "primary" | "secondary";
13
14
  className?: string;
15
+ 'data-component'?: string;
14
16
  } & {
15
17
  children?: React.ReactNode | undefined;
16
18
  } & React.RefAttributes<HTMLSpanElement>>;
@@ -1 +1 @@
1
- {"version":3,"file":"CounterLabel.d.ts","sourceRoot":"","sources":["../../src/CounterLabel/CounterLabel.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,OAAO,CAAA;AACzC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,MAAM,MAAM,iBAAiB,GAAG,KAAK,CAAC,iBAAiB,CACrD,cAAc,CAAC,eAAe,CAAC,GAAG;IAChC,sCAAsC;IACtC,MAAM,CAAC,EAAE,SAAS,GAAG,WAAW,CAAA;IAChC,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,CAAA;IACjC,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CACF,CAAA;AAED,QAAA,MAAM,YAAY;IAPd,sCAAsC;aAC7B,SAAS,GAAG,WAAW;cACtB,SAAS,GAAG,WAAW;gBACrB,MAAM;;;yCA0BrB,CAAA;AAID,eAAe,YAAY,CAAA"}
1
+ {"version":3,"file":"CounterLabel.d.ts","sourceRoot":"","sources":["../../src/CounterLabel/CounterLabel.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,OAAO,CAAA;AACzC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,MAAM,MAAM,iBAAiB,GAAG,KAAK,CAAC,iBAAiB,CACrD,cAAc,CAAC,eAAe,CAAC,GAAG;IAChC,sCAAsC;IACtC,MAAM,CAAC,EAAE,SAAS,GAAG,WAAW,CAAA;IAChC,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,CAAA;IACjC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,gBAAgB,CAAC,EAAE,MAAM,CAAA;CAC1B,CACF,CAAA;AAED,QAAA,MAAM,YAAY;IARd,sCAAsC;aAC7B,SAAS,GAAG,WAAW;cACtB,SAAS,GAAG,WAAW;gBACrB,MAAM;uBACC,MAAM;;;yCA8B5B,CAAA;AAID,eAAe,YAAY,CAAA"}
@@ -1,100 +1,35 @@
1
- import { c } from 'react-compiler-runtime';
2
1
  import { clsx } from 'clsx';
3
2
  import { forwardRef } from 'react';
4
3
  import classes from './CounterLabel.module.css.js';
5
- import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
4
+ import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
6
5
  import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.js';
7
6
 
8
- const CounterLabel = /*#__PURE__*/forwardRef((t0, forwardedRef) => {
9
- const $ = c(21);
10
- let children;
11
- let className;
12
- let rest;
13
- let scheme;
14
- let variant;
15
- if ($[0] !== t0) {
16
- ({
17
- variant,
18
- scheme,
19
- className,
20
- children,
21
- ...rest
22
- } = t0);
23
- $[0] = t0;
24
- $[1] = children;
25
- $[2] = className;
26
- $[3] = rest;
27
- $[4] = scheme;
28
- $[5] = variant;
29
- } else {
30
- children = $[1];
31
- className = $[2];
32
- rest = $[3];
33
- scheme = $[4];
34
- variant = $[5];
35
- }
36
- let t1;
37
- if ($[6] !== children) {
38
- t1 = /*#__PURE__*/jsxs(VisuallyHidden, {
39
- children: ["\xA0(", children, ")"]
40
- });
41
- $[6] = children;
42
- $[7] = t1;
43
- } else {
44
- t1 = $[7];
45
- }
46
- const label = t1;
47
- const inferredVariant = variant || scheme || "secondary";
48
- let t2;
49
- if ($[8] !== forwardedRef || $[9] !== inferredVariant || $[10] !== rest) {
50
- t2 = {
51
- ref: forwardedRef,
52
- "aria-hidden": "true",
53
- "data-variant": inferredVariant,
54
- ...rest
55
- };
56
- $[8] = forwardedRef;
57
- $[9] = inferredVariant;
58
- $[10] = rest;
59
- $[11] = t2;
60
- } else {
61
- t2 = $[11];
62
- }
63
- const counterProps = t2;
64
- let t3;
65
- if ($[12] !== className) {
66
- t3 = clsx(className, classes.CounterLabel);
67
- $[12] = className;
68
- $[13] = t3;
69
- } else {
70
- t3 = $[13];
71
- }
72
- let t4;
73
- if ($[14] !== children || $[15] !== counterProps || $[16] !== t3) {
74
- t4 = /*#__PURE__*/jsx("span", {
7
+ const CounterLabel = /*#__PURE__*/forwardRef(({
8
+ variant,
9
+ scheme,
10
+ className,
11
+ children,
12
+ ['data-component']: dataComponent,
13
+ ...rest
14
+ }, forwardedRef) => {
15
+ const label = /*#__PURE__*/jsxs(VisuallyHidden, {
16
+ children: ["\xA0(", children, ")"]
17
+ });
18
+ const inferredVariant = variant || scheme || 'secondary';
19
+ const counterProps = {
20
+ ref: forwardedRef,
21
+ ['aria-hidden']: 'true',
22
+ ['data-variant']: inferredVariant,
23
+ ...rest
24
+ };
25
+ return /*#__PURE__*/jsxs(Fragment, {
26
+ children: [/*#__PURE__*/jsx("span", {
75
27
  ...counterProps,
76
- className: t3,
28
+ "data-component": dataComponent !== null && dataComponent !== void 0 ? dataComponent : 'CounterLabel',
29
+ className: clsx(className, classes.CounterLabel),
77
30
  children: children
78
- });
79
- $[14] = children;
80
- $[15] = counterProps;
81
- $[16] = t3;
82
- $[17] = t4;
83
- } else {
84
- t4 = $[17];
85
- }
86
- let t5;
87
- if ($[18] !== label || $[19] !== t4) {
88
- t5 = /*#__PURE__*/jsxs(Fragment, {
89
- children: [t4, label]
90
- });
91
- $[18] = label;
92
- $[19] = t4;
93
- $[20] = t5;
94
- } else {
95
- t5 = $[20];
96
- }
97
- return t5;
31
+ }), label]
32
+ });
98
33
  });
99
34
  CounterLabel.displayName = 'CounterLabel';
100
35
 
@@ -0,0 +1,2 @@
1
+ @property --prc-dialog-scrollgutter{initial-value:0;inherits:false;syntax:"<length>"}@keyframes prc-Dialog-dialog-backdrop-appear-tCG2K{0%{opacity:0}to{opacity:1}}@keyframes prc-Dialog-Overlay--motion-scaleFade-mE6-C{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}@keyframes prc-Dialog-Overlay--motion-slideUp-tPElO{0%{transform:translateY(100%)}}@keyframes prc-Dialog-Overlay--motion-slideInRight-BR-CZ{0%{transform:translateX(-100%)}}@keyframes prc-Dialog-Overlay--motion-slideInLeft-ISmQZ{0%{transform:translateX(100%)}}@keyframes prc-Dialog-detect-scroll-b3i8Q{0%,to{--can-scroll:1}}.prc-Dialog-Backdrop-5Nt2U{animation:prc-Dialog-dialog-backdrop-appear-tCG2K .2s cubic-bezier(.33,1,.68,1);background-color:var(--overlay-backdrop-bgColor,#c8d1da66);bottom:0;display:flex;left:0;position:fixed;right:0;top:0}.prc-Dialog-Backdrop-5Nt2U,.prc-Dialog-Backdrop-5Nt2U[data-position-regular=center]{align-items:center;justify-content:center}.prc-Dialog-Backdrop-5Nt2U[data-position-regular=left]{align-items:center;justify-content:flex-start}.prc-Dialog-Backdrop-5Nt2U[data-position-regular=right]{align-items:center;justify-content:flex-end}.prc-Dialog-Backdrop-5Nt2U[data-align=top]:where(:not([data-position-regular=left]):not([data-position-regular=right])){align-items:flex-start}.prc-Dialog-Backdrop-5Nt2U[data-align=center]:where(:not([data-position-regular=left]):not([data-position-regular=right])){align-items:center}.prc-Dialog-Backdrop-5Nt2U[data-align=bottom]:where(:not([data-position-regular=left]):not([data-position-regular=right])){align-items:flex-end}@media (max-width:767px){.prc-Dialog-Backdrop-5Nt2U[data-position-narrow=center]{align-items:center;justify-content:center}.prc-Dialog-Backdrop-5Nt2U[data-position-narrow=center][data-align=top]{align-items:flex-start}.prc-Dialog-Backdrop-5Nt2U[data-position-narrow=center][data-align=center]{align-items:center}.prc-Dialog-Backdrop-5Nt2U[data-position-narrow=center][data-align=bottom]{align-items:flex-end}.prc-Dialog-Backdrop-5Nt2U[data-position-narrow=bottom]{align-items:end;justify-content:center}}.prc-Dialog-Dialog-G8cDF{background-color:var(--overlay-bgColor,#fff);border-radius:var(--borderRadius-large,.75rem);border-radius:var(--borderRadius-large,var(--borderRadius-large,.75rem));box-shadow:var(--shadow-floating-small,0 0 0 1px #d1d9e080,0 6px 12px -3px #25292e0a,0 6px 18px 0 #25292e1f);display:flex;flex-direction:column;height:auto;max-height:calc(100dvh - 64px);max-width:calc(100dvw - 64px);min-width:296px;opacity:1;width:640px}.prc-Dialog-Dialog-G8cDF:where([data-width=small]){width:296px}.prc-Dialog-Dialog-G8cDF:where([data-width=medium]){width:320px}.prc-Dialog-Dialog-G8cDF:where([data-width=large]){width:480px}.prc-Dialog-Dialog-G8cDF:where([data-height=small]){height:480px}.prc-Dialog-Dialog-G8cDF:where([data-height=large]){height:640px}@media screen and (prefers-reduced-motion:no-preference){.prc-Dialog-Dialog-G8cDF{animation:prc-Dialog-Overlay--motion-scaleFade-mE6-C .2s cubic-bezier(.33,1,.68,1) 1ms 1 normal none running}}.prc-Dialog-Dialog-G8cDF[data-position-regular=center]{border-radius:var(--borderRadius-large,var(--borderRadius-large,.75rem))}@media screen and (prefers-reduced-motion:no-preference){.prc-Dialog-Dialog-G8cDF[data-position-regular=center]{animation:prc-Dialog-Overlay--motion-scaleFade-mE6-C .2s cubic-bezier(.33,1,.68,1) 1ms 1 normal none running}}.prc-Dialog-Dialog-G8cDF[data-position-regular=center][data-align=top]{margin-top:var(--base-size-64,4rem)}.prc-Dialog-Dialog-G8cDF[data-position-regular=center][data-align=bottom]{margin-bottom:var(--base-size-64,4rem)}.prc-Dialog-Dialog-G8cDF[data-position-regular=left]{border-radius:var(--borderRadius-large,var(--borderRadius-large,.75rem));border-bottom-left-radius:0;border-top-left-radius:0;height:100dvh;max-height:unset}@media screen and (prefers-reduced-motion:no-preference){.prc-Dialog-Dialog-G8cDF[data-position-regular=left]{animation:prc-Dialog-Overlay--motion-slideInRight-BR-CZ .25s cubic-bezier(.33,1,.68,1) 1ms 1 normal none running}}.prc-Dialog-Dialog-G8cDF[data-position-regular=right]{border-radius:var(--borderRadius-large,var(--borderRadius-large,.75rem));border-bottom-right-radius:0;border-top-right-radius:0;height:100dvh;max-height:unset}@media screen and (prefers-reduced-motion:no-preference){.prc-Dialog-Dialog-G8cDF[data-position-regular=right]{animation:prc-Dialog-Overlay--motion-slideInLeft-ISmQZ .25s cubic-bezier(.33,1,.68,1) 0s 1 normal none running}}@media (max-width:767px){.prc-Dialog-Dialog-G8cDF[data-position-narrow=center]{border-radius:var(--borderRadius-large,var(--borderRadius-large,.75rem));height:auto;width:640px}.prc-Dialog-Dialog-G8cDF[data-position-narrow=center]:where([data-width=small]){width:296px}.prc-Dialog-Dialog-G8cDF[data-position-narrow=center]:where([data-width=medium]){width:320px}.prc-Dialog-Dialog-G8cDF[data-position-narrow=center]:where([data-width=large]){width:480px}.prc-Dialog-Dialog-G8cDF[data-position-narrow=center]:where([data-height=small]){height:480px}.prc-Dialog-Dialog-G8cDF[data-position-narrow=center]:where([data-height=large]){height:640px}@media (max-height:280px){.prc-Dialog-Dialog-G8cDF{max-height:calc(100dvh - 12px);max-width:calc(100dvw - 12px)}}.prc-Dialog-Dialog-G8cDF[data-position-narrow=bottom]{border-radius:var(--borderRadius-large,var(--borderRadius-large,.75rem));border-bottom-left-radius:0;border-bottom-right-radius:0;height:auto;max-height:calc(100dvh - 64px);max-width:100dvw;width:100dvw}.prc-Dialog-Dialog-G8cDF[data-position-narrow=bottom][data-align]{margin-bottom:0;margin-top:0}@media screen and (prefers-reduced-motion:no-preference){.prc-Dialog-Dialog-G8cDF[data-position-narrow=bottom]{animation:prc-Dialog-Overlay--motion-slideUp-tPElO .25s cubic-bezier(.33,1,.68,1) 1ms 1 normal none running}}.prc-Dialog-Dialog-G8cDF[data-position-narrow=fullscreen]{border-radius:unset!important;flex-grow:1;height:100%;max-height:100dvh;max-width:100dvw;width:100%}.prc-Dialog-Dialog-G8cDF[data-position-narrow=fullscreen][data-align]{margin-bottom:0;margin-top:0}@media screen and (prefers-reduced-motion:no-preference){.prc-Dialog-Dialog-G8cDF[data-position-narrow=fullscreen]{animation:prc-Dialog-Overlay--motion-scaleFade-mE6-C .2s cubic-bezier(.33,1,.68,1) 1ms 1 normal none running}}}body[data-dialog-scroll-disabled]{overflow:hidden!important;padding-right:var(--prc-dialog-scrollgutter)!important}.prc-Dialog-DialogOverflowWrapper-JvHzz{flex-grow:1}.prc-Dialog-Dialog-G8cDF[data-has-footer]{--can-scroll:0}.prc-Dialog-Dialog-G8cDF[data-has-footer] .prc-Dialog-DialogOverflowWrapper-JvHzz{animation:prc-Dialog-detect-scroll-b3i8Q;border-bottom:var(--borderWidth-default,.0625rem) solid var(--borderColor-default,#d1d9e0);animation-timeline:scroll(self)}@supports (animation-timeline:scroll(self)){.prc-Dialog-Dialog-G8cDF[data-has-footer] .prc-Dialog-DialogOverflowWrapper-JvHzz{border-bottom:calc(var(--borderWidth-thin,.0625rem)*var(--can-scroll)) solid var(--borderColor-default,#d1d9e0)}}.prc-Dialog-Header-f7Me-{box-shadow:0 1px 0 var(--borderColor-default,#d1d9e0);flex-shrink:0;max-height:35vh;overflow-y:auto;padding:var(--base-size-8,.5rem);z-index:1}.prc-Dialog-HeaderInner-H-fFY{display:flex}.prc-Dialog-HeaderContent-mjAsn{display:flex;flex-direction:column;flex-grow:1;padding-block:var(--base-size-6,.375rem);padding-inline:var(--base-size-8,.5rem)}.prc-Dialog-Title-M-iPn{font-size:var(--text-body-size-medium,.875rem);font-weight:var(--text-title-weight-large,600);margin:0}.prc-Dialog-Subtitle-aBFSq{color:var(--fgColor-muted,#59636e);font-size:var(--text-body-size-small,.75rem);font-weight:var(--base-text-weight-normal,400);margin:0;margin-top:var(--base-size-4,.25rem)}.prc-Dialog-Body-bB903{flex-grow:1;overflow:auto}.prc-Dialog-Body-bB903,.prc-Dialog-Footer-PMeQk{padding:var(--base-size-16,1rem)}.prc-Dialog-Footer-PMeQk{display:flex;flex-flow:wrap;flex-shrink:0;gap:var(--base-size-8,.5rem);justify-content:flex-end;z-index:1}.prc-Dialog-Dialog-G8cDF[data-footer-button-layout=scroll] .prc-Dialog-Footer-PMeQk{flex-direction:row;flex-wrap:nowrap;justify-content:unset;overflow-x:scroll}
2
+ /*# sourceMappingURL=Dialog-f9bb927a.css.map */
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/Dialog/Dialog.module.css.js"],"names":[],"mappings":"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","file":"Dialog-f9bb927a.css","sourcesContent":["/* The --prc-dialog-scrollgutter property is used only on the body element to\n * simulate scrollbar-gutter:stable. This property is not and should not\n * be used elsewhere in the DOM. There is a performance penalty to\n * setting inherited properties which can cause a large style recalc to\n * occur, so it benefits us to prevent inheritance for this property.\n * See https://web.dev/blog/at-property-performance\n */\n@property --prc-dialog-scrollgutter {\n initial-value: 0;\n inherits: false;\n syntax: '<length>';\n}\n\n@keyframes dialog-backdrop-appear {\n 0% {\n opacity: 0;\n }\n\n 100% {\n opacity: 1;\n }\n}\n\n@keyframes Overlay--motion-scaleFade {\n 0% {\n opacity: 0;\n transform: scale(0.5);\n }\n\n 100% {\n opacity: 1;\n transform: scale(1);\n }\n}\n\n@keyframes Overlay--motion-slideUp {\n from {\n transform: translateY(100%);\n }\n}\n\n@keyframes Overlay--motion-slideInRight {\n from {\n transform: translateX(-100%);\n }\n}\n\n@keyframes Overlay--motion-slideInLeft {\n from {\n transform: translateX(100%);\n }\n}\n\n/* Used to determine whether there should be a border between the body and footer */\n@keyframes detect-scroll {\n from,\n to {\n --can-scroll: 1;\n }\n}\n\n.Backdrop {\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n display: flex;\n background-color: var(--overlay-backdrop-bgColor);\n animation: dialog-backdrop-appear 200ms cubic-bezier(0.33, 1, 0.68, 1);\n align-items: center;\n justify-content: center;\n\n &[data-position-regular='center'] {\n align-items: center;\n justify-content: center;\n }\n\n &[data-position-regular='left'] {\n align-items: center;\n justify-content: flex-start;\n }\n\n &[data-position-regular='right'] {\n align-items: center;\n justify-content: flex-end;\n }\n\n /* align only applies when regular position is center (or absent).\n * :where() zeroes out the :not() specificity so narrow-position rules (coming later)\n * always win when data-position-narrow is bottom or fullscreen. */\n &:where(:not([data-position-regular='left']):not([data-position-regular='right'])) {\n &[data-align='top'] {\n align-items: flex-start;\n }\n\n &[data-align='center'] {\n align-items: center;\n }\n\n &[data-align='bottom'] {\n align-items: flex-end;\n }\n }\n\n @media (max-width: 767px) {\n &[data-position-narrow='center'] {\n align-items: center;\n justify-content: center;\n\n /* align still applies when narrow position is center */\n &[data-align='top'] {\n align-items: flex-start;\n }\n\n &[data-align='center'] {\n align-items: center;\n }\n\n &[data-align='bottom'] {\n align-items: flex-end;\n }\n }\n\n &[data-position-narrow='bottom'] {\n align-items: end;\n justify-content: center;\n }\n }\n}\n\n.Dialog {\n display: flex;\n /* stylelint-disable-next-line primer/responsive-widths */\n width: 640px;\n min-width: 296px;\n max-width: calc(100dvw - 64px);\n height: auto;\n max-height: calc(100dvh - 64px);\n flex-direction: column;\n background-color: var(--overlay-bgColor);\n border-radius: var(--borderRadius-large);\n border-radius: var(--borderRadius-large, var(--borderRadius-large));\n box-shadow: var(--shadow-floating-small);\n opacity: 1;\n\n &:where([data-width='small']) {\n width: 296px;\n }\n\n &:where([data-width='medium']) {\n width: 320px;\n }\n\n &:where([data-width='large']) {\n /* stylelint-disable-next-line primer/responsive-widths */\n width: 480px;\n }\n\n &:where([data-height='small']) {\n height: 480px;\n }\n\n &:where([data-height='large']) {\n height: 640px;\n }\n\n @media screen and (prefers-reduced-motion: no-preference) {\n animation: Overlay--motion-scaleFade 0.2s cubic-bezier(0.33, 1, 0.68, 1) 1ms 1 normal none running;\n }\n\n &[data-position-regular='center'] {\n border-radius: var(--borderRadius-large, var(--borderRadius-large));\n\n @media screen and (prefers-reduced-motion: no-preference) {\n animation: Overlay--motion-scaleFade 0.2s cubic-bezier(0.33, 1, 0.68, 1) 1ms 1 normal none running;\n }\n\n /* align margins only apply when regular position is center */\n &[data-align='top'] {\n margin-top: var(--base-size-64);\n }\n\n &[data-align='bottom'] {\n margin-bottom: var(--base-size-64);\n }\n }\n\n &[data-position-regular='left'] {\n height: 100dvh;\n max-height: unset;\n border-radius: var(--borderRadius-large, var(--borderRadius-large));\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n\n @media screen and (prefers-reduced-motion: no-preference) {\n animation: Overlay--motion-slideInRight 0.25s cubic-bezier(0.33, 1, 0.68, 1) 1ms 1 normal none running;\n }\n }\n\n &[data-position-regular='right'] {\n height: 100dvh;\n max-height: unset;\n border-radius: var(--borderRadius-large, var(--borderRadius-large));\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n\n @media screen and (prefers-reduced-motion: no-preference) {\n animation: Overlay--motion-slideInLeft 0.25s cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running;\n }\n }\n\n @media (max-width: 767px) {\n &[data-position-narrow='center'] {\n /* stylelint-disable-next-line primer/responsive-widths */\n width: 640px;\n height: auto;\n border-radius: var(--borderRadius-large, var(--borderRadius-large));\n\n &:where([data-width='small']) {\n width: 296px;\n }\n\n &:where([data-width='medium']) {\n width: 320px;\n }\n\n &:where([data-width='large']) {\n /* stylelint-disable-next-line primer/responsive-widths */\n width: 480px;\n }\n\n &:where([data-height='small']) {\n height: 480px;\n }\n\n &:where([data-height='large']) {\n height: 640px;\n }\n }\n\n @media (max-height: 280px) {\n max-height: calc(100dvh - 12px);\n max-width: calc(100dvw - 12px);\n }\n\n &[data-position-narrow='bottom'] {\n width: 100dvw;\n max-width: 100dvw;\n height: auto;\n max-height: calc(100dvh - 64px);\n border-radius: var(--borderRadius-large, var(--borderRadius-large));\n border-bottom-right-radius: 0;\n border-bottom-left-radius: 0;\n\n /* reset align margins since position wins at narrow */\n &[data-align] {\n margin-top: 0;\n margin-bottom: 0;\n }\n\n @media screen and (prefers-reduced-motion: no-preference) {\n animation: Overlay--motion-slideUp 0.25s cubic-bezier(0.33, 1, 0.68, 1) 1ms 1 normal none running;\n }\n }\n\n &[data-position-narrow='fullscreen'] {\n width: 100%;\n max-width: 100dvw;\n height: 100%;\n max-height: 100dvh;\n border-radius: unset !important;\n flex-grow: 1;\n\n /* reset align margins since fullscreen wins at narrow */\n &[data-align] {\n margin-top: 0;\n margin-bottom: 0;\n }\n\n @media screen and (prefers-reduced-motion: no-preference) {\n animation: Overlay--motion-scaleFade 0.2s cubic-bezier(0.33, 1, 0.68, 1) 1ms 1 normal none running;\n }\n }\n }\n}\n\n/*\n * PERFORMANCE OPTIMIZATION: Direct attribute on body - O(1) lookup\n */\n/* stylelint-disable-next-line selector-no-qualifying-type */\nbody[data-dialog-scroll-disabled] {\n /* stylelint-disable-next-line primer/spacing */\n padding-right: var(--prc-dialog-scrollgutter) !important;\n overflow: hidden !important;\n}\n\n.DialogOverflowWrapper {\n flex-grow: 1;\n}\n\n/*\nAdd a border between the body and footer if:\n- the dialog has a footer\n- the dialog has a body that can scroll\n- the browser supports the `animation-timeline` property and its `scroll()` function\n*/\n.Dialog[data-has-footer] {\n --can-scroll: 0;\n\n .DialogOverflowWrapper {\n /* If the browser does not support the `animation-timeline` property, always show a border */\n border-bottom: var(--borderWidth-default) solid var(--borderColor-default);\n animation: detect-scroll;\n animation-timeline: scroll(self);\n\n @supports (animation-timeline: scroll(self)) {\n border-bottom: calc(var(--borderWidth-thin) * var(--can-scroll)) solid var(--borderColor-default);\n }\n }\n}\n\n.Header {\n z-index: 1;\n max-height: 35vh;\n padding: var(--base-size-8);\n overflow-y: auto;\n /* stylelint-disable-next-line primer/box-shadow */\n box-shadow: 0 1px 0 var(--borderColor-default);\n flex-shrink: 0;\n}\n\n.HeaderInner {\n display: flex;\n}\n\n.HeaderContent {\n display: flex;\n padding-inline: var(--base-size-8);\n padding-block: var(--base-size-6);\n flex-direction: column;\n flex-grow: 1;\n}\n\n.Title {\n margin: 0; /* override default margin */\n font-size: var(--text-body-size-medium);\n font-weight: var(--text-title-weight-large);\n}\n\n.Subtitle {\n margin: 0; /* override default margin */\n margin-top: var(--base-size-4);\n font-size: var(--text-body-size-small);\n font-weight: var(--base-text-weight-normal);\n color: var(--fgColor-muted);\n}\n\n.Body {\n padding: var(--base-size-16);\n overflow: auto;\n flex-grow: 1;\n}\n\n.Footer {\n z-index: 1;\n display: flex;\n flex-flow: wrap;\n justify-content: flex-end;\n padding: var(--base-size-16);\n gap: var(--base-size-8);\n flex-shrink: 0;\n}\n\n.Dialog[data-footer-button-layout='scroll'] .Footer {\n flex-wrap: nowrap;\n overflow-x: scroll;\n flex-direction: row;\n justify-content: unset;\n}\n"]}
@@ -1,4 +1,4 @@
1
- import React, { type CSSProperties } from 'react';
1
+ import React from 'react';
2
2
  import type { ButtonProps } from '../Button';
3
3
  import type { ResponsiveValue } from '../hooks/useResponsiveValue';
4
4
  import type { ForwardRefComponent as PolymorphicForwardRefComponent } from '../utils/polymorphic';
@@ -30,6 +30,7 @@ export type DialogButtonProps = Omit<ButtonProps, 'content'> & {
30
30
  * Props to customize the rendering of the Dialog.
31
31
  */
32
32
  export interface DialogProps {
33
+ 'data-component'?: string;
33
34
  /**
34
35
  * Title of the Dialog. Also serves as the aria-label for this Dialog.
35
36
  */
@@ -87,8 +88,6 @@ export interface DialogProps {
87
88
  * medium: 320px
88
89
  * large: 480px
89
90
  * xlarge: 640px
90
- *
91
- * Also accepts any valid CSS width value (e.g. '400px', '80rem').
92
91
  */
93
92
  width?: DialogWidth;
94
93
  /**
@@ -153,7 +152,7 @@ declare const widthMap: {
153
152
  readonly large: "480px";
154
153
  readonly xlarge: "640px";
155
154
  };
156
- export type DialogWidth = keyof typeof widthMap | Exclude<CSSProperties['width'], undefined>;
155
+ export type DialogWidth = keyof typeof widthMap;
157
156
  export type DialogHeight = keyof typeof heightMap;
158
157
  export declare const DialogContext: React.Context<object | undefined>;
159
158
  export declare const Dialog: React.ForwardRefExoticComponent<DialogProps & {
@@ -1 +1 @@
1
- {"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../src/Dialog/Dialog.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../src/Dialog/Dialog.tsx"],"names":[],"mappings":"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"}
@@ -18,12 +18,6 @@ import { ScrollableRegion } from '../ScrollableRegion/ScrollableRegion.js';
18
18
  import { useProvidedRefOrCreate } from '../hooks/useProvidedRefOrCreate.js';
19
19
 
20
20
  let dialogScrollDisabledCount = 0;
21
- const widthMap = {
22
- small: '296px',
23
- medium: '320px',
24
- large: '480px',
25
- xlarge: '640px'
26
- };
27
21
  const DefaultHeader = ({
28
22
  dialogLabelId,
29
23
  title,
@@ -91,6 +85,7 @@ const DIALOG_CONTEXT_VALUE = Object.freeze({});
91
85
  const _Dialog = /*#__PURE__*/React.forwardRef((props, forwardedRef) => {
92
86
  var _slots$header, _slots$body, _slots$footer;
93
87
  const {
88
+ 'data-component': dataComponentProp,
94
89
  title = 'Dialog',
95
90
  subtitle = '',
96
91
  renderHeader,
@@ -198,6 +193,7 @@ const _Dialog = /*#__PURE__*/React.forwardRef((props, forwardedRef) => {
198
193
  } : Object.fromEntries(Object.entries(position).map(([key, value]) => {
199
194
  return [`data-position-${key}`, value];
200
195
  }));
196
+ const dataComponent = dataComponentProp !== null && dataComponentProp !== void 0 ? dataComponentProp : 'Dialog';
201
197
  return /*#__PURE__*/jsx(DialogContext.Provider, {
202
198
  value: DIALOG_CONTEXT_VALUE,
203
199
  children: /*#__PURE__*/jsx(Portal, {
@@ -222,17 +218,13 @@ const _Dialog = /*#__PURE__*/React.forwardRef((props, forwardedRef) => {
222
218
  ...(align && {
223
219
  'data-align': align
224
220
  }),
225
- "data-width": width in widthMap ? width : undefined,
221
+ "data-width": width,
226
222
  "data-height": height,
227
223
  "data-has-footer": hasFooter ? '' : undefined,
228
224
  "data-footer-button-layout": hasFooter ? footerButtonLayout : undefined,
229
225
  className: clsx(className, classes.Dialog),
230
- style: {
231
- ...style,
232
- ...(!(width in widthMap) ? {
233
- '--dialog-width': width
234
- } : {})
235
- },
226
+ style: style,
227
+ "data-component": dataComponent,
236
228
  children: [header, /*#__PURE__*/jsx(ScrollableRegion, {
237
229
  "aria-labelledby": dialogLabelId,
238
230
  className: classes.DialogOverflowWrapper,
@@ -251,7 +243,8 @@ const Header = /*#__PURE__*/React.forwardRef(function Header({
251
243
  return /*#__PURE__*/jsx("div", {
252
244
  ref: forwardRef,
253
245
  className: clsx(className, classes.Header),
254
- ...rest
246
+ ...rest,
247
+ "data-component": "Dialog.Header"
255
248
  });
256
249
  });
257
250
  Header.displayName = 'Dialog.Header';
@@ -262,7 +255,8 @@ const Title = /*#__PURE__*/React.forwardRef(function Title({
262
255
  return /*#__PURE__*/jsx("h1", {
263
256
  ref: forwardRef,
264
257
  className: clsx(className, classes.Title),
265
- ...rest
258
+ ...rest,
259
+ "data-component": "Dialog.Title"
266
260
  });
267
261
  });
268
262
  Title.displayName = 'Dialog.Title';
@@ -273,7 +267,8 @@ const Subtitle = /*#__PURE__*/React.forwardRef(function Subtitle({
273
267
  return /*#__PURE__*/jsx("h2", {
274
268
  ref: forwardRef,
275
269
  className: clsx(className, classes.Subtitle),
276
- ...rest
270
+ ...rest,
271
+ "data-component": "Dialog.Subtitle"
277
272
  });
278
273
  });
279
274
  Subtitle.displayName = 'Dialog.Subtitle';
@@ -284,7 +279,8 @@ const Body = /*#__PURE__*/React.forwardRef(function Body({
284
279
  return /*#__PURE__*/jsx("div", {
285
280
  ref: forwardRef,
286
281
  className: clsx(className, classes.Body),
287
- ...rest
282
+ ...rest,
283
+ "data-component": "Dialog.Body"
288
284
  });
289
285
  });
290
286
  Body.displayName = 'Dialog.Body';
@@ -295,7 +291,8 @@ const Footer = /*#__PURE__*/React.forwardRef(function Footer({
295
291
  return /*#__PURE__*/jsx("div", {
296
292
  ref: forwardRef,
297
293
  className: clsx(className, classes.Footer),
298
- ...rest
294
+ ...rest,
295
+ "data-component": "Dialog.Footer"
299
296
  });
300
297
  });
301
298
  Footer.displayName = 'Dialog.Footer';
@@ -325,6 +322,7 @@ const Buttons = ({
325
322
  ...buttonProps
326
323
  } = dialogButtonProps;
327
324
  return /*#__PURE__*/jsx(ButtonComponent, {
325
+ "data-component": "Dialog.FooterButton",
328
326
  ...buttonProps,
329
327
  // 'normal' value is equivalent to 'default', this is used for backwards compatibility
330
328
  variant: buttonType === 'normal' ? 'default' : buttonType
@@ -343,7 +341,8 @@ const CloseButton = ({
343
341
  icon: XIcon,
344
342
  "aria-label": "Close",
345
343
  onClick: onClose,
346
- variant: "invisible"
344
+ variant: "invisible",
345
+ "data-component": "Dialog.CloseButton"
347
346
  });
348
347
  };
349
348
  CloseButton.displayName = "CloseButton";
@@ -1,4 +1,4 @@
1
- import './Dialog-b7da369a.css';
1
+ import './Dialog-f9bb927a.css';
2
2
 
3
3
  var classes = {"Backdrop":"prc-Dialog-Backdrop-5Nt2U","dialog-backdrop-appear":"prc-Dialog-dialog-backdrop-appear-tCG2K","Dialog":"prc-Dialog-Dialog-G8cDF","Overlay--motion-scaleFade":"prc-Dialog-Overlay--motion-scaleFade-mE6-C","Overlay--motion-slideInRight":"prc-Dialog-Overlay--motion-slideInRight-BR-CZ","Overlay--motion-slideInLeft":"prc-Dialog-Overlay--motion-slideInLeft-ISmQZ","Overlay--motion-slideUp":"prc-Dialog-Overlay--motion-slideUp-tPElO","DialogOverflowWrapper":"prc-Dialog-DialogOverflowWrapper-JvHzz","detect-scroll":"prc-Dialog-detect-scroll-b3i8Q","Header":"prc-Dialog-Header-f7Me-","HeaderInner":"prc-Dialog-HeaderInner-H-fFY","HeaderContent":"prc-Dialog-HeaderContent-mjAsn","Title":"prc-Dialog-Title-M-iPn","Subtitle":"prc-Dialog-Subtitle-aBFSq","Body":"prc-Dialog-Body-bB903","Footer":"prc-Dialog-Footer-PMeQk"};
4
4
 
@@ -1,5 +1,7 @@
1
1
  import React from 'react';
2
2
  export type CheckboxOrRadioGroupProps = {
3
+ /** Parent name for using data-component with either CheckboxGroup or RadioGroup and sub-components */
4
+ parentName?: string;
3
5
  /** Class name for custom styling */
4
6
  className?: string;
5
7
  /**
@@ -1 +1 @@
1
- {"version":3,"file":"CheckboxOrRadioGroup.d.ts","sourceRoot":"","sources":["../../../../src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAazB,MAAM,MAAM,yBAAyB,GAAG;IACtC,oCAAoC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,CAAC,iBAAiB,CAAC,CAAC,EAAE,MAAM,CAAA;IAC5B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAA;IACX;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAyHD,YAAY,EAAC,8BAA8B,EAAC,MAAM,6BAA6B,CAAA;;;;;;;;;;AAC/E,wBAIE"}
1
+ {"version":3,"file":"CheckboxOrRadioGroup.d.ts","sourceRoot":"","sources":["../../../../src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAazB,MAAM,MAAM,yBAAyB,GAAG;IACtC,sGAAsG;IACtG,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,oCAAoC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,CAAC,iBAAiB,CAAC,CAAC,EAAE,MAAM,CAAA;IAC5B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAA;IACX;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AA4HD,YAAY,EAAC,8BAA8B,EAAC,MAAM,6BAA6B,CAAA;;;;;;;;;;AAC/E,wBAIE"}
@@ -13,6 +13,7 @@ import { isSlot } from '../../../utils/is-slot.js';
13
13
  import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
14
14
 
15
15
  const CheckboxOrRadioGroup = ({
16
+ parentName,
16
17
  'aria-labelledby': ariaLabelledby,
17
18
  children,
18
19
  disabled = false,
@@ -43,10 +44,12 @@ const CheckboxOrRadioGroup = ({
43
44
  disabled,
44
45
  required,
45
46
  captionId,
46
- validationMessageId
47
+ validationMessageId,
48
+ parentName
47
49
  },
48
50
  children: /*#__PURE__*/jsxs("div", {
49
51
  children: [/*#__PURE__*/jsxs(Component, {
52
+ "data-component": parentName,
50
53
  className: clsx(className, classes.GroupFieldset),
51
54
  "data-validation": validationChild ? '' : undefined,
52
55
  ...(labelChild ? {
@@ -1 +1 @@
1
- {"version":3,"file":"CheckboxOrRadioGroupCaption.d.ts","sourceRoot":"","sources":["../../../../src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupCaption.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,sBAAsB,CAAA;AAE1D,KAAK,gCAAgC,GAAG,KAAK,CAAC,iBAAiB,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAC,CAAC,CAAA;AAErF,QAAA,MAAM,2BAA2B,EAAE,gBAAgB,CAAC,gCAAgC,CAOnF,CAAA;AAED,eAAe,2BAA2B,CAAA"}
1
+ {"version":3,"file":"CheckboxOrRadioGroupCaption.d.ts","sourceRoot":"","sources":["../../../../src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupCaption.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,sBAAsB,CAAA;AAE1D,KAAK,gCAAgC,GAAG,KAAK,CAAC,iBAAiB,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAC,CAAC,CAAA;AAErF,QAAA,MAAM,2BAA2B,EAAE,gBAAgB,CAAC,gCAAgC,CAWnF,CAAA;AAED,eAAe,2BAA2B,CAAA"}
@@ -10,11 +10,13 @@ const CheckboxOrRadioGroupCaption = ({
10
10
  children
11
11
  }) => {
12
12
  const {
13
- captionId
13
+ captionId,
14
+ parentName
14
15
  } = React.useContext(CheckboxOrRadioGroupContext);
15
16
  return /*#__PURE__*/jsx(Text, {
16
17
  className: clsx(className, classes.CheckboxOrRadioGroupCaption),
17
18
  id: captionId,
19
+ "data-component": parentName && `${parentName}.Caption`,
18
20
  children: children
19
21
  });
20
22
  };
@@ -3,6 +3,7 @@ import type { CheckboxOrRadioGroupProps } from './CheckboxOrRadioGroup';
3
3
  export type CheckboxOrRadioGroupContext = {
4
4
  validationMessageId?: string;
5
5
  captionId?: string;
6
+ parentName?: string;
6
7
  } & CheckboxOrRadioGroupProps;
7
8
  declare const CheckboxOrRadioGroupContext: React.Context<CheckboxOrRadioGroupContext>;
8
9
  export default CheckboxOrRadioGroupContext;
@@ -1 +1 @@
1
- {"version":3,"file":"CheckboxOrRadioGroupContext.d.ts","sourceRoot":"","sources":["../../../../src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,KAAK,EAAC,yBAAyB,EAAC,MAAM,wBAAwB,CAAA;AAErE,MAAM,MAAM,2BAA2B,GAAG;IACxC,mBAAmB,CAAC,EAAE,MAAM,CAAA;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,GAAG,yBAAyB,CAAA;AAE7B,QAAA,MAAM,2BAA2B,4CAAuD,CAAA;AAExF,eAAe,2BAA2B,CAAA"}
1
+ {"version":3,"file":"CheckboxOrRadioGroupContext.d.ts","sourceRoot":"","sources":["../../../../src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,KAAK,EAAC,yBAAyB,EAAC,MAAM,wBAAwB,CAAA;AAErE,MAAM,MAAM,2BAA2B,GAAG;IACxC,mBAAmB,CAAC,EAAE,MAAM,CAAA;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB,GAAG,yBAAyB,CAAA;AAE7B,QAAA,MAAM,2BAA2B,4CAAuD,CAAA;AAExF,eAAe,2BAA2B,CAAA"}
@@ -1 +1 @@
1
- {"version":3,"file":"CheckboxOrRadioGroupLabel.d.ts","sourceRoot":"","sources":["../../../../src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupLabel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAMzB,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,sBAAsB,CAAA;AAE1D,MAAM,MAAM,8BAA8B,GAAG;IAC3C,oCAAoC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAA;CACzB,CAAA;AAED,QAAA,MAAM,yBAAyB,EAAE,gBAAgB,CAAC,KAAK,CAAC,iBAAiB,CAAC,8BAA8B,CAAC,CAwBxG,CAAA;AAED,eAAe,yBAAyB,CAAA"}
1
+ {"version":3,"file":"CheckboxOrRadioGroupLabel.d.ts","sourceRoot":"","sources":["../../../../src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupLabel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAMzB,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,sBAAsB,CAAA;AAE1D,MAAM,MAAM,8BAA8B,GAAG;IAC3C,oCAAoC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAA;CACzB,CAAA;AAED,QAAA,MAAM,yBAAyB,EAAE,gBAAgB,CAAC,KAAK,CAAC,iBAAiB,CAAC,8BAA8B,CAAC,CAyBxG,CAAA;AAED,eAAe,yBAAyB,CAAA"}
@@ -13,13 +13,15 @@ const CheckboxOrRadioGroupLabel = ({
13
13
  }) => {
14
14
  const {
15
15
  required,
16
- disabled
16
+ disabled,
17
+ parentName
17
18
  } = React.useContext(CheckboxOrRadioGroupContext);
18
19
  return /*#__PURE__*/jsx(VisuallyHidden, {
19
20
  className: clsx(className, classes.RadioGroupLabel),
20
21
  isVisible: !visuallyHidden,
21
22
  title: required ? 'required field' : undefined,
22
23
  "data-label-disabled": disabled ? '' : undefined,
24
+ "data-component": parentName && `${parentName}.Label`,
23
25
  children: required ? /*#__PURE__*/jsxs(Stack, {
24
26
  direction: "horizontal",
25
27
  gap: "none",
@@ -1 +1 @@
1
- {"version":3,"file":"CheckboxOrRadioGroupValidation.d.ts","sourceRoot":"","sources":["../../../../src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupValidation.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAC,oBAAoB,EAAC,MAAM,2CAA2C,CAAA;AAEnF,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,sBAAsB,CAAA;AAE1D,MAAM,MAAM,mCAAmC,GAAG;IAChD,8DAA8D;IAC9D,OAAO,EAAE,oBAAoB,CAAA;CAC9B,CAAA;AAED,QAAA,MAAM,8BAA8B,EAAE,gBAAgB,CACpD,KAAK,CAAC,iBAAiB,CAAC,mCAAmC,CAAC,CAQ7D,CAAA;AAED,eAAe,8BAA8B,CAAA"}
1
+ {"version":3,"file":"CheckboxOrRadioGroupValidation.d.ts","sourceRoot":"","sources":["../../../../src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupValidation.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAC,oBAAoB,EAAC,MAAM,2CAA2C,CAAA;AAEnF,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,sBAAsB,CAAA;AAE1D,MAAM,MAAM,mCAAmC,GAAG;IAChD,8DAA8D;IAC9D,OAAO,EAAE,oBAAoB,CAAA;CAC9B,CAAA;AAED,QAAA,MAAM,8BAA8B,EAAE,gBAAgB,CACpD,KAAK,CAAC,iBAAiB,CAAC,mCAAmC,CAAC,CAY7D,CAAA;AAED,eAAe,8BAA8B,CAAA"}
@@ -8,11 +8,13 @@ const CheckboxOrRadioGroupValidation = ({
8
8
  variant
9
9
  }) => {
10
10
  const {
11
- validationMessageId = ''
11
+ validationMessageId = '',
12
+ parentName
12
13
  } = React.useContext(CheckboxOrRadioGroupContext);
13
14
  return /*#__PURE__*/jsx(InputValidation, {
14
15
  validationStatus: variant,
15
16
  id: validationMessageId,
17
+ "data-component": parentName && `${parentName}.Validation`,
16
18
  children: children
17
19
  });
18
20
  };
@@ -1,6 +1,6 @@
1
1
  import type React from 'react';
2
2
  import type { FormValidationStatus } from '../../utils/types/FormValidationStatus';
3
- type Props = {
3
+ type Props = React.HTMLAttributes<HTMLElement> & {
4
4
  className?: string;
5
5
  id: string;
6
6
  validationStatus?: FormValidationStatus;
@@ -1 +1 @@
1
- {"version":3,"file":"InputValidation.d.ts","sourceRoot":"","sources":["../../../src/internal/components/InputValidation.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,EAAC,oBAAoB,EAAC,MAAM,wCAAwC,CAAA;AAIhF,KAAK,KAAK,GAAG;IACX,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,EAAE,EAAE,MAAM,CAAA;IACV,gBAAgB,CAAC,EAAE,oBAAoB,CAAA;IACvC,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;CAC5B,CAAA;AAUD,QAAA,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAuC7D,CAAA;AAED,eAAe,eAAe,CAAA"}
1
+ {"version":3,"file":"InputValidation.d.ts","sourceRoot":"","sources":["../../../src/internal/components/InputValidation.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,EAAC,oBAAoB,EAAC,MAAM,wCAAwC,CAAA;AAIhF,KAAK,KAAK,GAAG,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,GAAG;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,EAAE,EAAE,MAAM,CAAA;IACV,gBAAgB,CAAC,EAAE,oBAAoB,CAAA;IACvC,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;CAC5B,CAAA;AAUD,QAAA,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,CA6C7D,CAAA;AAED,eAAe,eAAe,CAAA"}
@@ -2,7 +2,7 @@ import { c } from 'react-compiler-runtime';
2
2
  import { AlertFillIcon, CheckCircleFillIcon } from '@primer/octicons-react';
3
3
  import classes from './InputValidation.module.css.js';
4
4
  import { clsx } from 'clsx';
5
- import { jsx, jsxs } from 'react/jsx-runtime';
5
+ import { jsxs, jsx } from 'react/jsx-runtime';
6
6
  import Text from '../../Text/Text.js';
7
7
 
8
8
  const validationIconMap = {
@@ -10,25 +10,48 @@ const validationIconMap = {
10
10
  error: AlertFillIcon
11
11
  };
12
12
  const InputValidation = t0 => {
13
- const $ = c(14);
14
- const {
15
- children,
16
- className,
17
- id,
18
- validationStatus,
19
- style
20
- } = t0;
13
+ const $ = c(22);
14
+ let children;
15
+ let className;
16
+ let id;
17
+ let rest;
18
+ let style;
19
+ let validationStatus;
20
+ if ($[0] !== t0) {
21
+ ({
22
+ children,
23
+ className,
24
+ id,
25
+ validationStatus,
26
+ style,
27
+ ...rest
28
+ } = t0);
29
+ $[0] = t0;
30
+ $[1] = children;
31
+ $[2] = className;
32
+ $[3] = id;
33
+ $[4] = rest;
34
+ $[5] = style;
35
+ $[6] = validationStatus;
36
+ } else {
37
+ children = $[1];
38
+ className = $[2];
39
+ id = $[3];
40
+ rest = $[4];
41
+ style = $[5];
42
+ validationStatus = $[6];
43
+ }
21
44
  const IconComponent = validationStatus ? validationIconMap[validationStatus] : undefined;
22
45
  let t1;
23
- if ($[0] !== className) {
46
+ if ($[7] !== className) {
24
47
  t1 = clsx(className, classes.InputValidation);
25
- $[0] = className;
26
- $[1] = t1;
48
+ $[7] = className;
49
+ $[8] = t1;
27
50
  } else {
28
- t1 = $[1];
51
+ t1 = $[8];
29
52
  }
30
53
  let t2;
31
- if ($[2] !== IconComponent) {
54
+ if ($[9] !== IconComponent) {
32
55
  t2 = IconComponent ? /*#__PURE__*/jsx("span", {
33
56
  "aria-hidden": "true",
34
57
  className: classes.ValidationIcon,
@@ -40,50 +63,52 @@ const InputValidation = t0 => {
40
63
  fill: "currentColor"
41
64
  })
42
65
  }) : null;
43
- $[2] = IconComponent;
44
- $[3] = t2;
66
+ $[9] = IconComponent;
67
+ $[10] = t2;
45
68
  } else {
46
- t2 = $[3];
69
+ t2 = $[10];
47
70
  }
48
71
  let t3;
49
- if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
72
+ if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
50
73
  t3 = {
51
74
  "--inputValidation-lineHeight": 1.3333333333333333
52
75
  };
53
- $[4] = t3;
76
+ $[11] = t3;
54
77
  } else {
55
- t3 = $[4];
78
+ t3 = $[11];
56
79
  }
57
80
  let t4;
58
- if ($[5] !== children || $[6] !== id) {
81
+ if ($[12] !== children || $[13] !== id) {
59
82
  t4 = /*#__PURE__*/jsx("span", {
60
83
  id: id,
61
84
  className: classes.ValidationText,
62
85
  style: t3,
63
86
  children: children
64
87
  });
65
- $[5] = children;
66
- $[6] = id;
67
- $[7] = t4;
88
+ $[12] = children;
89
+ $[13] = id;
90
+ $[14] = t4;
68
91
  } else {
69
- t4 = $[7];
92
+ t4 = $[14];
70
93
  }
71
94
  let t5;
72
- if ($[8] !== style || $[9] !== t1 || $[10] !== t2 || $[11] !== t4 || $[12] !== validationStatus) {
95
+ if ($[15] !== rest || $[16] !== style || $[17] !== t1 || $[18] !== t2 || $[19] !== t4 || $[20] !== validationStatus) {
73
96
  t5 = /*#__PURE__*/jsxs(Text, {
97
+ ...rest,
74
98
  className: t1,
75
99
  "data-validation-status": validationStatus,
76
100
  style: style,
77
101
  children: [t2, t4]
78
102
  });
79
- $[8] = style;
80
- $[9] = t1;
81
- $[10] = t2;
82
- $[11] = t4;
83
- $[12] = validationStatus;
84
- $[13] = t5;
103
+ $[15] = rest;
104
+ $[16] = style;
105
+ $[17] = t1;
106
+ $[18] = t2;
107
+ $[19] = t4;
108
+ $[20] = validationStatus;
109
+ $[21] = t5;
85
110
  } else {
86
- t5 = $[13];
111
+ t5 = $[21];
87
112
  }
88
113
  return t5;
89
114
  };
@@ -3166,8 +3166,8 @@
3166
3166
  },
3167
3167
  {
3168
3168
  "name": "width",
3169
- "type": "'small' | 'medium' | 'large' | 'xlarge' | string",
3170
- "description": "The width of the dialog.\nsmall: 296px\nmedium: 320px\nlarge: 480px\nxlarge: 640px\n\nAlso accepts any valid CSS width value (e.g. '400px', '80rem')."
3169
+ "type": "'small' | 'medium' | 'large' | 'xlarge'",
3170
+ "description": "The width of the dialog.\nsmall: 296px\nmedium: 320px\nlarge: 480px\nxlarge: 640px"
3171
3171
  },
3172
3172
  {
3173
3173
  "name": "height",
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@primer/react",
3
3
  "type": "module",
4
- "version": "0.0.0-20260511204147",
4
+ "version": "0.0.0-20260511210424",
5
5
  "description": "An implementation of GitHub's Primer Design System using React",
6
6
  "main": "./dist/index.js",
7
7
  "module": "./dist/index.js",
@@ -1,2 +0,0 @@
1
- @property --prc-dialog-scrollgutter{initial-value:0;inherits:false;syntax:"<length>"}@keyframes prc-Dialog-dialog-backdrop-appear-tCG2K{0%{opacity:0}to{opacity:1}}@keyframes prc-Dialog-Overlay--motion-scaleFade-mE6-C{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}@keyframes prc-Dialog-Overlay--motion-slideUp-tPElO{0%{transform:translateY(100%)}}@keyframes prc-Dialog-Overlay--motion-slideInRight-BR-CZ{0%{transform:translateX(-100%)}}@keyframes prc-Dialog-Overlay--motion-slideInLeft-ISmQZ{0%{transform:translateX(100%)}}@keyframes prc-Dialog-detect-scroll-b3i8Q{0%,to{--can-scroll:1}}.prc-Dialog-Backdrop-5Nt2U{animation:prc-Dialog-dialog-backdrop-appear-tCG2K .2s cubic-bezier(.33,1,.68,1);background-color:var(--overlay-backdrop-bgColor,#c8d1da66);bottom:0;display:flex;left:0;position:fixed;right:0;top:0}.prc-Dialog-Backdrop-5Nt2U,.prc-Dialog-Backdrop-5Nt2U[data-position-regular=center]{align-items:center;justify-content:center}.prc-Dialog-Backdrop-5Nt2U[data-position-regular=left]{align-items:center;justify-content:flex-start}.prc-Dialog-Backdrop-5Nt2U[data-position-regular=right]{align-items:center;justify-content:flex-end}.prc-Dialog-Backdrop-5Nt2U[data-align=top]:where(:not([data-position-regular=left]):not([data-position-regular=right])){align-items:flex-start}.prc-Dialog-Backdrop-5Nt2U[data-align=center]:where(:not([data-position-regular=left]):not([data-position-regular=right])){align-items:center}.prc-Dialog-Backdrop-5Nt2U[data-align=bottom]:where(:not([data-position-regular=left]):not([data-position-regular=right])){align-items:flex-end}@media (max-width:767px){.prc-Dialog-Backdrop-5Nt2U[data-position-narrow=center]{align-items:center;justify-content:center}.prc-Dialog-Backdrop-5Nt2U[data-position-narrow=center][data-align=top]{align-items:flex-start}.prc-Dialog-Backdrop-5Nt2U[data-position-narrow=center][data-align=center]{align-items:center}.prc-Dialog-Backdrop-5Nt2U[data-position-narrow=center][data-align=bottom]{align-items:flex-end}.prc-Dialog-Backdrop-5Nt2U[data-position-narrow=bottom]{align-items:end;justify-content:center}}.prc-Dialog-Dialog-G8cDF{background-color:var(--overlay-bgColor,#fff);border-radius:var(--borderRadius-large,.75rem);border-radius:var(--borderRadius-large,var(--borderRadius-large,.75rem));box-shadow:var(--shadow-floating-small,0 0 0 1px #d1d9e080,0 6px 12px -3px #25292e0a,0 6px 18px 0 #25292e1f);display:flex;flex-direction:column;height:auto;max-height:calc(100dvh - 64px);max-width:calc(100dvw - 64px);min-width:296px;opacity:1;width:var(--dialog-width,640px)}.prc-Dialog-Dialog-G8cDF:where([data-width=small]){width:296px}.prc-Dialog-Dialog-G8cDF:where([data-width=medium]){width:320px}.prc-Dialog-Dialog-G8cDF:where([data-width=large]){width:480px}.prc-Dialog-Dialog-G8cDF:where([data-height=small]){height:480px}.prc-Dialog-Dialog-G8cDF:where([data-height=large]){height:640px}@media screen and (prefers-reduced-motion:no-preference){.prc-Dialog-Dialog-G8cDF{animation:prc-Dialog-Overlay--motion-scaleFade-mE6-C .2s cubic-bezier(.33,1,.68,1) 1ms 1 normal none running}}.prc-Dialog-Dialog-G8cDF[data-position-regular=center]{border-radius:var(--borderRadius-large,var(--borderRadius-large,.75rem))}@media screen and (prefers-reduced-motion:no-preference){.prc-Dialog-Dialog-G8cDF[data-position-regular=center]{animation:prc-Dialog-Overlay--motion-scaleFade-mE6-C .2s cubic-bezier(.33,1,.68,1) 1ms 1 normal none running}}.prc-Dialog-Dialog-G8cDF[data-position-regular=center][data-align=top]{margin-top:var(--base-size-64,4rem)}.prc-Dialog-Dialog-G8cDF[data-position-regular=center][data-align=bottom]{margin-bottom:var(--base-size-64,4rem)}.prc-Dialog-Dialog-G8cDF[data-position-regular=left]{border-radius:var(--borderRadius-large,var(--borderRadius-large,.75rem));border-bottom-left-radius:0;border-top-left-radius:0;height:100dvh;max-height:unset}@media screen and (prefers-reduced-motion:no-preference){.prc-Dialog-Dialog-G8cDF[data-position-regular=left]{animation:prc-Dialog-Overlay--motion-slideInRight-BR-CZ .25s cubic-bezier(.33,1,.68,1) 1ms 1 normal none running}}.prc-Dialog-Dialog-G8cDF[data-position-regular=right]{border-radius:var(--borderRadius-large,var(--borderRadius-large,.75rem));border-bottom-right-radius:0;border-top-right-radius:0;height:100dvh;max-height:unset}@media screen and (prefers-reduced-motion:no-preference){.prc-Dialog-Dialog-G8cDF[data-position-regular=right]{animation:prc-Dialog-Overlay--motion-slideInLeft-ISmQZ .25s cubic-bezier(.33,1,.68,1) 0s 1 normal none running}}@media (max-width:767px){.prc-Dialog-Dialog-G8cDF[data-position-narrow=center]{border-radius:var(--borderRadius-large,var(--borderRadius-large,.75rem));height:auto;width:var(--dialog-width,640px)}.prc-Dialog-Dialog-G8cDF[data-position-narrow=center]:where([data-width=small]){width:296px}.prc-Dialog-Dialog-G8cDF[data-position-narrow=center]:where([data-width=medium]){width:320px}.prc-Dialog-Dialog-G8cDF[data-position-narrow=center]:where([data-width=large]){width:480px}.prc-Dialog-Dialog-G8cDF[data-position-narrow=center]:where([data-height=small]){height:480px}.prc-Dialog-Dialog-G8cDF[data-position-narrow=center]:where([data-height=large]){height:640px}@media (max-height:280px){.prc-Dialog-Dialog-G8cDF{max-height:calc(100dvh - 12px);max-width:calc(100dvw - 12px)}}.prc-Dialog-Dialog-G8cDF[data-position-narrow=bottom]{border-radius:var(--borderRadius-large,var(--borderRadius-large,.75rem));border-bottom-left-radius:0;border-bottom-right-radius:0;height:auto;max-height:calc(100dvh - 64px);max-width:100dvw;width:100dvw}.prc-Dialog-Dialog-G8cDF[data-position-narrow=bottom][data-align]{margin-bottom:0;margin-top:0}@media screen and (prefers-reduced-motion:no-preference){.prc-Dialog-Dialog-G8cDF[data-position-narrow=bottom]{animation:prc-Dialog-Overlay--motion-slideUp-tPElO .25s cubic-bezier(.33,1,.68,1) 1ms 1 normal none running}}.prc-Dialog-Dialog-G8cDF[data-position-narrow=fullscreen]{border-radius:unset!important;flex-grow:1;height:100%;max-height:100dvh;max-width:100dvw;width:100%}.prc-Dialog-Dialog-G8cDF[data-position-narrow=fullscreen][data-align]{margin-bottom:0;margin-top:0}@media screen and (prefers-reduced-motion:no-preference){.prc-Dialog-Dialog-G8cDF[data-position-narrow=fullscreen]{animation:prc-Dialog-Overlay--motion-scaleFade-mE6-C .2s cubic-bezier(.33,1,.68,1) 1ms 1 normal none running}}}body[data-dialog-scroll-disabled]{overflow:hidden!important;padding-right:var(--prc-dialog-scrollgutter)!important}.prc-Dialog-DialogOverflowWrapper-JvHzz{flex-grow:1}.prc-Dialog-Dialog-G8cDF[data-has-footer]{--can-scroll:0}.prc-Dialog-Dialog-G8cDF[data-has-footer] .prc-Dialog-DialogOverflowWrapper-JvHzz{animation:prc-Dialog-detect-scroll-b3i8Q;border-bottom:var(--borderWidth-default,.0625rem) solid var(--borderColor-default,#d1d9e0);animation-timeline:scroll(self)}@supports (animation-timeline:scroll(self)){.prc-Dialog-Dialog-G8cDF[data-has-footer] .prc-Dialog-DialogOverflowWrapper-JvHzz{border-bottom:calc(var(--borderWidth-thin,.0625rem)*var(--can-scroll)) solid var(--borderColor-default,#d1d9e0)}}.prc-Dialog-Header-f7Me-{box-shadow:0 1px 0 var(--borderColor-default,#d1d9e0);flex-shrink:0;max-height:35vh;overflow-y:auto;padding:var(--base-size-8,.5rem);z-index:1}.prc-Dialog-HeaderInner-H-fFY{display:flex}.prc-Dialog-HeaderContent-mjAsn{display:flex;flex-direction:column;flex-grow:1;padding-block:var(--base-size-6,.375rem);padding-inline:var(--base-size-8,.5rem)}.prc-Dialog-Title-M-iPn{font-size:var(--text-body-size-medium,.875rem);font-weight:var(--text-title-weight-large,600);margin:0}.prc-Dialog-Subtitle-aBFSq{color:var(--fgColor-muted,#59636e);font-size:var(--text-body-size-small,.75rem);font-weight:var(--base-text-weight-normal,400);margin:0;margin-top:var(--base-size-4,.25rem)}.prc-Dialog-Body-bB903{flex-grow:1;overflow:auto}.prc-Dialog-Body-bB903,.prc-Dialog-Footer-PMeQk{padding:var(--base-size-16,1rem)}.prc-Dialog-Footer-PMeQk{display:flex;flex-flow:wrap;flex-shrink:0;gap:var(--base-size-8,.5rem);justify-content:flex-end;z-index:1}.prc-Dialog-Dialog-G8cDF[data-footer-button-layout=scroll] .prc-Dialog-Footer-PMeQk{flex-direction:row;flex-wrap:nowrap;justify-content:unset;overflow-x:scroll}
2
- /*# sourceMappingURL=Dialog-b7da369a.css.map */
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/Dialog/Dialog.module.css.js"],"names":[],"mappings":"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","file":"Dialog-b7da369a.css","sourcesContent":["/* The --prc-dialog-scrollgutter property is used only on the body element to\n * simulate scrollbar-gutter:stable. This property is not and should not\n * be used elsewhere in the DOM. There is a performance penalty to\n * setting inherited properties which can cause a large style recalc to\n * occur, so it benefits us to prevent inheritance for this property.\n * See https://web.dev/blog/at-property-performance\n */\n@property --prc-dialog-scrollgutter {\n initial-value: 0;\n inherits: false;\n syntax: '<length>';\n}\n\n@keyframes dialog-backdrop-appear {\n 0% {\n opacity: 0;\n }\n\n 100% {\n opacity: 1;\n }\n}\n\n@keyframes Overlay--motion-scaleFade {\n 0% {\n opacity: 0;\n transform: scale(0.5);\n }\n\n 100% {\n opacity: 1;\n transform: scale(1);\n }\n}\n\n@keyframes Overlay--motion-slideUp {\n from {\n transform: translateY(100%);\n }\n}\n\n@keyframes Overlay--motion-slideInRight {\n from {\n transform: translateX(-100%);\n }\n}\n\n@keyframes Overlay--motion-slideInLeft {\n from {\n transform: translateX(100%);\n }\n}\n\n/* Used to determine whether there should be a border between the body and footer */\n@keyframes detect-scroll {\n from,\n to {\n --can-scroll: 1;\n }\n}\n\n.Backdrop {\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n display: flex;\n background-color: var(--overlay-backdrop-bgColor);\n animation: dialog-backdrop-appear 200ms cubic-bezier(0.33, 1, 0.68, 1);\n align-items: center;\n justify-content: center;\n\n &[data-position-regular='center'] {\n align-items: center;\n justify-content: center;\n }\n\n &[data-position-regular='left'] {\n align-items: center;\n justify-content: flex-start;\n }\n\n &[data-position-regular='right'] {\n align-items: center;\n justify-content: flex-end;\n }\n\n /* align only applies when regular position is center (or absent).\n * :where() zeroes out the :not() specificity so narrow-position rules (coming later)\n * always win when data-position-narrow is bottom or fullscreen. */\n &:where(:not([data-position-regular='left']):not([data-position-regular='right'])) {\n &[data-align='top'] {\n align-items: flex-start;\n }\n\n &[data-align='center'] {\n align-items: center;\n }\n\n &[data-align='bottom'] {\n align-items: flex-end;\n }\n }\n\n @media (max-width: 767px) {\n &[data-position-narrow='center'] {\n align-items: center;\n justify-content: center;\n\n /* align still applies when narrow position is center */\n &[data-align='top'] {\n align-items: flex-start;\n }\n\n &[data-align='center'] {\n align-items: center;\n }\n\n &[data-align='bottom'] {\n align-items: flex-end;\n }\n }\n\n &[data-position-narrow='bottom'] {\n align-items: end;\n justify-content: center;\n }\n }\n}\n\n.Dialog {\n display: flex;\n /* stylelint-disable-next-line primer/responsive-widths */\n width: var(--dialog-width, 640px);\n min-width: 296px;\n max-width: calc(100dvw - 64px);\n height: auto;\n max-height: calc(100dvh - 64px);\n flex-direction: column;\n background-color: var(--overlay-bgColor);\n border-radius: var(--borderRadius-large);\n border-radius: var(--borderRadius-large, var(--borderRadius-large));\n box-shadow: var(--shadow-floating-small);\n opacity: 1;\n\n &:where([data-width='small']) {\n width: 296px;\n }\n\n &:where([data-width='medium']) {\n width: 320px;\n }\n\n &:where([data-width='large']) {\n /* stylelint-disable-next-line primer/responsive-widths */\n width: 480px;\n }\n\n &:where([data-height='small']) {\n height: 480px;\n }\n\n &:where([data-height='large']) {\n height: 640px;\n }\n\n @media screen and (prefers-reduced-motion: no-preference) {\n animation: Overlay--motion-scaleFade 0.2s cubic-bezier(0.33, 1, 0.68, 1) 1ms 1 normal none running;\n }\n\n &[data-position-regular='center'] {\n border-radius: var(--borderRadius-large, var(--borderRadius-large));\n\n @media screen and (prefers-reduced-motion: no-preference) {\n animation: Overlay--motion-scaleFade 0.2s cubic-bezier(0.33, 1, 0.68, 1) 1ms 1 normal none running;\n }\n\n /* align margins only apply when regular position is center */\n &[data-align='top'] {\n margin-top: var(--base-size-64);\n }\n\n &[data-align='bottom'] {\n margin-bottom: var(--base-size-64);\n }\n }\n\n &[data-position-regular='left'] {\n height: 100dvh;\n max-height: unset;\n border-radius: var(--borderRadius-large, var(--borderRadius-large));\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n\n @media screen and (prefers-reduced-motion: no-preference) {\n animation: Overlay--motion-slideInRight 0.25s cubic-bezier(0.33, 1, 0.68, 1) 1ms 1 normal none running;\n }\n }\n\n &[data-position-regular='right'] {\n height: 100dvh;\n max-height: unset;\n border-radius: var(--borderRadius-large, var(--borderRadius-large));\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n\n @media screen and (prefers-reduced-motion: no-preference) {\n animation: Overlay--motion-slideInLeft 0.25s cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running;\n }\n }\n\n @media (max-width: 767px) {\n &[data-position-narrow='center'] {\n /* stylelint-disable-next-line primer/responsive-widths */\n width: var(--dialog-width, 640px);\n height: auto;\n border-radius: var(--borderRadius-large, var(--borderRadius-large));\n\n &:where([data-width='small']) {\n width: 296px;\n }\n\n &:where([data-width='medium']) {\n width: 320px;\n }\n\n &:where([data-width='large']) {\n /* stylelint-disable-next-line primer/responsive-widths */\n width: 480px;\n }\n\n &:where([data-height='small']) {\n height: 480px;\n }\n\n &:where([data-height='large']) {\n height: 640px;\n }\n }\n\n @media (max-height: 280px) {\n max-height: calc(100dvh - 12px);\n max-width: calc(100dvw - 12px);\n }\n\n &[data-position-narrow='bottom'] {\n width: 100dvw;\n max-width: 100dvw;\n height: auto;\n max-height: calc(100dvh - 64px);\n border-radius: var(--borderRadius-large, var(--borderRadius-large));\n border-bottom-right-radius: 0;\n border-bottom-left-radius: 0;\n\n /* reset align margins since position wins at narrow */\n &[data-align] {\n margin-top: 0;\n margin-bottom: 0;\n }\n\n @media screen and (prefers-reduced-motion: no-preference) {\n animation: Overlay--motion-slideUp 0.25s cubic-bezier(0.33, 1, 0.68, 1) 1ms 1 normal none running;\n }\n }\n\n &[data-position-narrow='fullscreen'] {\n width: 100%;\n max-width: 100dvw;\n height: 100%;\n max-height: 100dvh;\n border-radius: unset !important;\n flex-grow: 1;\n\n /* reset align margins since fullscreen wins at narrow */\n &[data-align] {\n margin-top: 0;\n margin-bottom: 0;\n }\n\n @media screen and (prefers-reduced-motion: no-preference) {\n animation: Overlay--motion-scaleFade 0.2s cubic-bezier(0.33, 1, 0.68, 1) 1ms 1 normal none running;\n }\n }\n }\n}\n\n/*\n * PERFORMANCE OPTIMIZATION: Direct attribute on body - O(1) lookup\n */\n/* stylelint-disable-next-line selector-no-qualifying-type */\nbody[data-dialog-scroll-disabled] {\n /* stylelint-disable-next-line primer/spacing */\n padding-right: var(--prc-dialog-scrollgutter) !important;\n overflow: hidden !important;\n}\n\n.DialogOverflowWrapper {\n flex-grow: 1;\n}\n\n/*\nAdd a border between the body and footer if:\n- the dialog has a footer\n- the dialog has a body that can scroll\n- the browser supports the `animation-timeline` property and its `scroll()` function\n*/\n.Dialog[data-has-footer] {\n --can-scroll: 0;\n\n .DialogOverflowWrapper {\n /* If the browser does not support the `animation-timeline` property, always show a border */\n border-bottom: var(--borderWidth-default) solid var(--borderColor-default);\n animation: detect-scroll;\n animation-timeline: scroll(self);\n\n @supports (animation-timeline: scroll(self)) {\n border-bottom: calc(var(--borderWidth-thin) * var(--can-scroll)) solid var(--borderColor-default);\n }\n }\n}\n\n.Header {\n z-index: 1;\n max-height: 35vh;\n padding: var(--base-size-8);\n overflow-y: auto;\n /* stylelint-disable-next-line primer/box-shadow */\n box-shadow: 0 1px 0 var(--borderColor-default);\n flex-shrink: 0;\n}\n\n.HeaderInner {\n display: flex;\n}\n\n.HeaderContent {\n display: flex;\n padding-inline: var(--base-size-8);\n padding-block: var(--base-size-6);\n flex-direction: column;\n flex-grow: 1;\n}\n\n.Title {\n margin: 0; /* override default margin */\n font-size: var(--text-body-size-medium);\n font-weight: var(--text-title-weight-large);\n}\n\n.Subtitle {\n margin: 0; /* override default margin */\n margin-top: var(--base-size-4);\n font-size: var(--text-body-size-small);\n font-weight: var(--base-text-weight-normal);\n color: var(--fgColor-muted);\n}\n\n.Body {\n padding: var(--base-size-16);\n overflow: auto;\n flex-grow: 1;\n}\n\n.Footer {\n z-index: 1;\n display: flex;\n flex-flow: wrap;\n justify-content: flex-end;\n padding: var(--base-size-16);\n gap: var(--base-size-8);\n flex-shrink: 0;\n}\n\n.Dialog[data-footer-button-layout='scroll'] .Footer {\n flex-wrap: nowrap;\n overflow-x: scroll;\n flex-direction: row;\n justify-content: unset;\n}\n"]}