@primer/react 38.32.0-rc.5a40d42f8 → 38.32.0-rc.68e0ffa22

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 (28) hide show
  1. package/CHANGELOG.md +0 -10
  2. package/dist/ActionList/{ActionList-1ff5220c.css → ActionList-65f7daac.css} +2 -2
  3. package/dist/ActionList/ActionList-65f7daac.css.map +1 -0
  4. package/dist/ActionList/ActionList.module.css.js +1 -1
  5. package/dist/Breadcrumbs/{Breadcrumbs-16d81430.css → Breadcrumbs-54395fc6.css} +2 -2
  6. package/dist/Breadcrumbs/{Breadcrumbs-16d81430.css.map → Breadcrumbs-54395fc6.css.map} +1 -1
  7. package/dist/Breadcrumbs/Breadcrumbs.js +0 -1
  8. package/dist/Breadcrumbs/Breadcrumbs.module.css.js +2 -2
  9. package/dist/PageHeader/PageHeader-5e969745.css +2 -0
  10. package/dist/PageHeader/PageHeader-5e969745.css.map +1 -0
  11. package/dist/PageHeader/PageHeader.js +23 -64
  12. package/dist/PageHeader/PageHeader.module.css.js +1 -1
  13. package/dist/SegmentedControl/SegmentedControl-622e61a4.css +2 -0
  14. package/dist/SegmentedControl/SegmentedControl-622e61a4.css.map +1 -0
  15. package/dist/SegmentedControl/SegmentedControl.module.css.js +1 -1
  16. package/dist/ToggleSwitch/ToggleSwitch.js +186 -167
  17. package/dist/experimental/SelectPanel2/SelectPanel-608e207e.css +2 -0
  18. package/dist/experimental/SelectPanel2/{SelectPanel-917fdaef.css.map → SelectPanel-608e207e.css.map} +1 -1
  19. package/dist/experimental/SelectPanel2/SelectPanel.module.css.js +1 -1
  20. package/dist/hooks/useMedia.js +43 -44
  21. package/dist/internal/components/ValidationAnimationContainer.js +34 -40
  22. package/package.json +1 -1
  23. package/dist/ActionList/ActionList-1ff5220c.css.map +0 -1
  24. package/dist/PageHeader/PageHeader-b12247c8.css +0 -2
  25. package/dist/PageHeader/PageHeader-b12247c8.css.map +0 -1
  26. package/dist/SegmentedControl/SegmentedControl-a004561f.css +0 -2
  27. package/dist/SegmentedControl/SegmentedControl-a004561f.css.map +0 -1
  28. package/dist/experimental/SelectPanel2/SelectPanel-917fdaef.css +0 -2
package/dist/ToggleSwitch/ToggleSwitch.js CHANGED
@@ -72,7 +72,7 @@ const LineIcon = (t0) => {
72
72
  };
73
73
  const ToggleSwitch = /*#__PURE__*/ React.forwardRef(function ToggleSwitch(props, ref) {
74
74
  var _buttonLabelOn, _buttonLabelOff;
75
- const $ = c(90);
75
+ const $ = c(95);
76
76
  let ariaDescribedby;
77
77
  let ariaLabelledby;
78
78
  let buttonLabelOff;
@@ -141,74 +141,93 @@ const ToggleSwitch = /*#__PURE__*/ React.forwardRef(function ToggleSwitch(props,
141
141
  const loadingLabelId = useId$1("loadingLabel");
142
142
  const { safeSetTimeout } = useSafeTimeout();
143
143
  let t5;
144
- if ($[18] !== disabled || $[19] !== isControlled || $[20] !== isOn || $[21] !== loading || $[22] !== onChange || $[23] !== onClick || $[24] !== setIsOn) {
144
+ if ($[18] !== disabled || $[19] !== isControlled || $[20] !== isOn || $[21] !== loading || $[22] !== onClick || $[23] !== setIsOn) {
145
145
  t5 = (e) => {
146
146
  if (disabled || loading) return;
147
- if (isControlled) {
148
- var _onChange;
149
- (_onChange = onChange) === null || _onChange === void 0 || _onChange(!isOn);
150
- } else setIsOn(!isOn);
147
+ if (!isControlled) setIsOn(!isOn);
151
148
  onClick && onClick(e);
152
149
  };
153
150
  $[18] = disabled;
154
151
  $[19] = isControlled;
155
152
  $[20] = isOn;
156
153
  $[21] = loading;
157
- $[22] = onChange;
158
- $[23] = onClick;
159
- $[24] = setIsOn;
160
- $[25] = t5;
161
- } else t5 = $[25];
154
+ $[22] = onClick;
155
+ $[23] = setIsOn;
156
+ $[24] = t5;
157
+ } else t5 = $[24];
162
158
  const handleToggleClick = t5;
163
159
  let t6;
164
160
  let t7;
165
- if ($[26] !== isLoadingLabelVisible || $[27] !== loading || $[28] !== loadingLabelDelay || $[29] !== safeSetTimeout) {
161
+ if ($[25] !== checked || $[26] !== disabled || $[27] !== isControlled || $[28] !== onChange) {
166
162
  t6 = () => {
163
+ if (onChange && isControlled && !disabled) onChange(Boolean(checked));
164
+ };
165
+ t7 = [
166
+ onChange,
167
+ checked,
168
+ isControlled,
169
+ disabled
170
+ ];
171
+ $[25] = checked;
172
+ $[26] = disabled;
173
+ $[27] = isControlled;
174
+ $[28] = onChange;
175
+ $[29] = t6;
176
+ $[30] = t7;
177
+ } else {
178
+ t6 = $[29];
179
+ t7 = $[30];
180
+ }
181
+ useEffect(t6, t7);
182
+ let t8;
183
+ let t9;
184
+ if ($[31] !== isLoadingLabelVisible || $[32] !== loading || $[33] !== loadingLabelDelay || $[34] !== safeSetTimeout) {
185
+ t8 = () => {
167
186
  if (!loading && isLoadingLabelVisible) setIsLoadingLabelVisible(false);
168
187
  else if (loading && !isLoadingLabelVisible) safeSetTimeout(() => {
169
188
  setIsLoadingLabelVisible(true);
170
189
  }, loadingLabelDelay);
171
190
  };
172
- t7 = [
191
+ t9 = [
173
192
  loading,
174
193
  isLoadingLabelVisible,
175
194
  loadingLabelDelay,
176
195
  safeSetTimeout
177
196
  ];
178
- $[26] = isLoadingLabelVisible;
179
- $[27] = loading;
180
- $[28] = loadingLabelDelay;
181
- $[29] = safeSetTimeout;
182
- $[30] = t6;
183
- $[31] = t7;
197
+ $[31] = isLoadingLabelVisible;
198
+ $[32] = loading;
199
+ $[33] = loadingLabelDelay;
200
+ $[34] = safeSetTimeout;
201
+ $[35] = t8;
202
+ $[36] = t9;
184
203
  } else {
185
- t6 = $[30];
186
- t7 = $[31];
204
+ t8 = $[35];
205
+ t9 = $[36];
187
206
  }
188
- useEffect(t6, t7);
207
+ useEffect(t8, t9);
189
208
  let switchButtonDescribedBy = loadingLabelId;
190
209
  if (ariaDescribedby) switchButtonDescribedBy = `${switchButtonDescribedBy} ${ariaDescribedby}`;
191
- let t8;
192
- if ($[32] !== className) {
193
- t8 = clsx(ToggleSwitch_module_css_default.ToggleSwitch, className);
194
- $[32] = className;
195
- $[33] = t8;
196
- } else t8 = $[33];
197
- const t9 = isLoadingLabelVisible && loadingLabel;
198
210
  let t10;
199
- if ($[34] !== loadingLabelId || $[35] !== t9) {
200
- t10 = /*#__PURE__*/ jsx(VisuallyHidden, { children: /*#__PURE__*/ jsx(AriaStatus, {
211
+ if ($[37] !== className) {
212
+ t10 = clsx(ToggleSwitch_module_css_default.ToggleSwitch, className);
213
+ $[37] = className;
214
+ $[38] = t10;
215
+ } else t10 = $[38];
216
+ const t11 = isLoadingLabelVisible && loadingLabel;
217
+ let t12;
218
+ if ($[39] !== loadingLabelId || $[40] !== t11) {
219
+ t12 = /*#__PURE__*/ jsx(VisuallyHidden, { children: /*#__PURE__*/ jsx(AriaStatus, {
201
220
  announceOnShow: true,
202
221
  id: loadingLabelId,
203
- children: t9
222
+ children: t11
204
223
  }) });
205
- $[34] = loadingLabelId;
206
- $[35] = t9;
207
- $[36] = t10;
208
- } else t10 = $[36];
209
- let t11;
210
- if ($[37] !== loading || $[38] !== statusLabelPosition) {
211
- t11 = loading ? /*#__PURE__*/ jsx("div", {
224
+ $[39] = loadingLabelId;
225
+ $[40] = t11;
226
+ $[41] = t12;
227
+ } else t12 = $[41];
228
+ let t13;
229
+ if ($[42] !== loading || $[43] !== statusLabelPosition) {
230
+ t13 = loading ? /*#__PURE__*/ jsx("div", {
212
231
  className: ToggleSwitch_module_css_default.LoadingSpinner,
213
232
  "data-status-label-position": statusLabelPosition,
214
233
  children: /*#__PURE__*/ jsx(Spinner, {
@@ -216,172 +235,172 @@ const ToggleSwitch = /*#__PURE__*/ React.forwardRef(function ToggleSwitch(props,
216
235
  srText: null
217
236
  })
218
237
  }) : null;
219
- $[37] = loading;
220
- $[38] = statusLabelPosition;
221
- $[39] = t11;
222
- } else t11 = $[39];
223
- const t12 = !acceptsInteraction;
224
- const t13 = !isOn;
225
- const t14 = (_buttonLabelOn = buttonLabelOn) !== null && _buttonLabelOn !== void 0 ? _buttonLabelOn : "On";
226
- let t15;
227
- if ($[40] !== t13 || $[41] !== t14) {
228
- t15 = /*#__PURE__*/ jsx("span", {
229
- className: ToggleSwitch_module_css_default.StatusTextItem,
230
- "data-hidden": t13,
231
- children: t14
232
- });
233
- $[40] = t13;
234
- $[41] = t14;
235
- $[42] = t15;
236
- } else t15 = $[42];
237
- const t16 = (_buttonLabelOff = buttonLabelOff) !== null && _buttonLabelOff !== void 0 ? _buttonLabelOff : "Off";
238
+ $[42] = loading;
239
+ $[43] = statusLabelPosition;
240
+ $[44] = t13;
241
+ } else t13 = $[44];
242
+ const t14 = !acceptsInteraction;
243
+ const t15 = !isOn;
244
+ const t16 = (_buttonLabelOn = buttonLabelOn) !== null && _buttonLabelOn !== void 0 ? _buttonLabelOn : "On";
238
245
  let t17;
239
- if ($[43] !== isOn || $[44] !== t16) {
246
+ if ($[45] !== t15 || $[46] !== t16) {
240
247
  t17 = /*#__PURE__*/ jsx("span", {
241
248
  className: ToggleSwitch_module_css_default.StatusTextItem,
242
- "data-hidden": isOn,
249
+ "data-hidden": t15,
243
250
  children: t16
244
251
  });
245
- $[43] = isOn;
246
- $[44] = t16;
247
- $[45] = t17;
248
- } else t17 = $[45];
249
- let t18;
250
- if ($[46] !== handleToggleClick || $[47] !== size || $[48] !== t12 || $[49] !== t15 || $[50] !== t17) {
251
- t18 = /*#__PURE__*/ jsxs("span", {
252
+ $[45] = t15;
253
+ $[46] = t16;
254
+ $[47] = t17;
255
+ } else t17 = $[47];
256
+ const t18 = (_buttonLabelOff = buttonLabelOff) !== null && _buttonLabelOff !== void 0 ? _buttonLabelOff : "Off";
257
+ let t19;
258
+ if ($[48] !== isOn || $[49] !== t18) {
259
+ t19 = /*#__PURE__*/ jsx("span", {
260
+ className: ToggleSwitch_module_css_default.StatusTextItem,
261
+ "data-hidden": isOn,
262
+ children: t18
263
+ });
264
+ $[48] = isOn;
265
+ $[49] = t18;
266
+ $[50] = t19;
267
+ } else t19 = $[50];
268
+ let t20;
269
+ if ($[51] !== handleToggleClick || $[52] !== size || $[53] !== t14 || $[54] !== t17 || $[55] !== t19) {
270
+ t20 = /*#__PURE__*/ jsxs("span", {
252
271
  className: ToggleSwitch_module_css_default.StatusText,
253
272
  "data-size": size,
254
- "data-disabled": t12,
273
+ "data-disabled": t14,
255
274
  "aria-hidden": "true",
256
275
  onClick: handleToggleClick,
257
- children: [t15, t17]
276
+ children: [t17, t19]
258
277
  });
259
- $[46] = handleToggleClick;
260
- $[47] = size;
261
- $[48] = t12;
262
- $[49] = t15;
263
- $[50] = t17;
264
- $[51] = t18;
265
- } else t18 = $[51];
266
- const t19 = !acceptsInteraction;
267
- const t20 = isLoadingLabelVisible || ariaDescribedby ? switchButtonDescribedBy : void 0;
268
- const t21 = !acceptsInteraction;
269
- const t22 = !acceptsInteraction;
270
- let t23;
271
- if ($[52] !== size) {
272
- t23 = /*#__PURE__*/ jsx(LineIcon, { size });
278
+ $[51] = handleToggleClick;
273
279
  $[52] = size;
274
- $[53] = t23;
275
- } else t23 = $[53];
276
- let t24;
277
- if ($[54] !== isOn || $[55] !== t22 || $[56] !== t23) {
278
- t24 = /*#__PURE__*/ jsx("div", {
279
- className: `${ToggleSwitch_module_css_default.IconContainer} ${ToggleSwitch_module_css_default.LineIconContainer}`,
280
- "data-checked": isOn,
281
- "data-disabled": t22,
282
- children: t23
283
- });
284
- $[54] = isOn;
285
- $[55] = t22;
286
- $[56] = t23;
287
- $[57] = t24;
288
- } else t24 = $[57];
289
- const t25 = !acceptsInteraction;
280
+ $[53] = t14;
281
+ $[54] = t17;
282
+ $[55] = t19;
283
+ $[56] = t20;
284
+ } else t20 = $[56];
285
+ const t21 = !acceptsInteraction;
286
+ const t22 = isLoadingLabelVisible || ariaDescribedby ? switchButtonDescribedBy : void 0;
287
+ const t23 = !acceptsInteraction;
288
+ const t24 = !acceptsInteraction;
289
+ let t25;
290
+ if ($[57] !== size) {
291
+ t25 = /*#__PURE__*/ jsx(LineIcon, { size });
292
+ $[57] = size;
293
+ $[58] = t25;
294
+ } else t25 = $[58];
290
295
  let t26;
291
- if ($[58] !== size) {
292
- t26 = /*#__PURE__*/ jsx(CircleIcon, { size });
293
- $[58] = size;
294
- $[59] = t26;
295
- } else t26 = $[59];
296
- let t27;
297
- if ($[60] !== isOn || $[61] !== t25 || $[62] !== t26) {
298
- t27 = /*#__PURE__*/ jsx("div", {
299
- className: `${ToggleSwitch_module_css_default.IconContainer} ${ToggleSwitch_module_css_default.CircleIconContainer}`,
296
+ if ($[59] !== isOn || $[60] !== t24 || $[61] !== t25) {
297
+ t26 = /*#__PURE__*/ jsx("div", {
298
+ className: `${ToggleSwitch_module_css_default.IconContainer} ${ToggleSwitch_module_css_default.LineIconContainer}`,
300
299
  "data-checked": isOn,
301
- "data-disabled": t25,
302
- children: t26
300
+ "data-disabled": t24,
301
+ children: t25
303
302
  });
304
- $[60] = isOn;
303
+ $[59] = isOn;
304
+ $[60] = t24;
305
305
  $[61] = t25;
306
306
  $[62] = t26;
307
- $[63] = t27;
308
- } else t27 = $[63];
307
+ } else t26 = $[62];
308
+ const t27 = !acceptsInteraction;
309
309
  let t28;
310
- if ($[64] !== t24 || $[65] !== t27) {
311
- t28 = /*#__PURE__*/ jsxs("div", {
310
+ if ($[63] !== size) {
311
+ t28 = /*#__PURE__*/ jsx(CircleIcon, { size });
312
+ $[63] = size;
313
+ $[64] = t28;
314
+ } else t28 = $[64];
315
+ let t29;
316
+ if ($[65] !== isOn || $[66] !== t27 || $[67] !== t28) {
317
+ t29 = /*#__PURE__*/ jsx("div", {
318
+ className: `${ToggleSwitch_module_css_default.IconContainer} ${ToggleSwitch_module_css_default.CircleIconContainer}`,
319
+ "data-checked": isOn,
320
+ "data-disabled": t27,
321
+ children: t28
322
+ });
323
+ $[65] = isOn;
324
+ $[66] = t27;
325
+ $[67] = t28;
326
+ $[68] = t29;
327
+ } else t29 = $[68];
328
+ let t30;
329
+ if ($[69] !== t26 || $[70] !== t29) {
330
+ t30 = /*#__PURE__*/ jsxs("div", {
312
331
  className: ToggleSwitch_module_css_default.SwitchButtonContent,
313
332
  "aria-hidden": "true",
314
- children: [t24, t27]
333
+ children: [t26, t29]
315
334
  });
316
- $[64] = t24;
317
- $[65] = t27;
318
- $[66] = t28;
319
- } else t28 = $[66];
320
- const t29 = !acceptsInteraction;
321
- let t30;
322
- if ($[67] !== isOn || $[68] !== t29) {
323
- t30 = /*#__PURE__*/ jsx("div", {
335
+ $[69] = t26;
336
+ $[70] = t29;
337
+ $[71] = t30;
338
+ } else t30 = $[71];
339
+ const t31 = !acceptsInteraction;
340
+ let t32;
341
+ if ($[72] !== isOn || $[73] !== t31) {
342
+ t32 = /*#__PURE__*/ jsx("div", {
324
343
  className: ToggleSwitch_module_css_default.ToggleKnob,
325
344
  "data-checked": isOn,
326
- "data-disabled": t29,
345
+ "data-disabled": t31,
327
346
  "aria-hidden": "true"
328
347
  });
329
- $[67] = isOn;
330
- $[68] = t29;
331
- $[69] = t30;
332
- } else t30 = $[69];
333
- let t31;
334
- if ($[70] !== ariaLabelledby || $[71] !== buttonType || $[72] !== handleToggleClick || $[73] !== isOn || $[74] !== ref || $[75] !== size || $[76] !== t19 || $[77] !== t20 || $[78] !== t21 || $[79] !== t28 || $[80] !== t30) {
335
- t31 = /*#__PURE__*/ jsxs("button", {
348
+ $[72] = isOn;
349
+ $[73] = t31;
350
+ $[74] = t32;
351
+ } else t32 = $[74];
352
+ let t33;
353
+ if ($[75] !== ariaLabelledby || $[76] !== buttonType || $[77] !== handleToggleClick || $[78] !== isOn || $[79] !== ref || $[80] !== size || $[81] !== t21 || $[82] !== t22 || $[83] !== t23 || $[84] !== t30 || $[85] !== t32) {
354
+ t33 = /*#__PURE__*/ jsxs("button", {
336
355
  ref,
337
356
  type: buttonType,
338
357
  className: ToggleSwitch_module_css_default.SwitchButton,
339
358
  "data-size": size,
340
359
  "data-checked": isOn,
341
- "data-disabled": t19,
360
+ "data-disabled": t21,
342
361
  onClick: handleToggleClick,
343
362
  "aria-labelledby": ariaLabelledby,
344
- "aria-describedby": t20,
363
+ "aria-describedby": t22,
345
364
  "aria-pressed": isOn,
346
- "aria-disabled": t21,
347
- children: [t28, t30]
365
+ "aria-disabled": t23,
366
+ children: [t30, t32]
348
367
  });
349
- $[70] = ariaLabelledby;
350
- $[71] = buttonType;
351
- $[72] = handleToggleClick;
352
- $[73] = isOn;
353
- $[74] = ref;
354
- $[75] = size;
355
- $[76] = t19;
356
- $[77] = t20;
357
- $[78] = t21;
358
- $[79] = t28;
359
- $[80] = t30;
360
- $[81] = t31;
361
- } else t31 = $[81];
362
- let t32;
363
- if ($[82] !== rest || $[83] !== statusLabelPosition || $[84] !== t10 || $[85] !== t11 || $[86] !== t18 || $[87] !== t31 || $[88] !== t8) {
364
- t32 = /*#__PURE__*/ jsxs("div", {
365
- className: t8,
368
+ $[75] = ariaLabelledby;
369
+ $[76] = buttonType;
370
+ $[77] = handleToggleClick;
371
+ $[78] = isOn;
372
+ $[79] = ref;
373
+ $[80] = size;
374
+ $[81] = t21;
375
+ $[82] = t22;
376
+ $[83] = t23;
377
+ $[84] = t30;
378
+ $[85] = t32;
379
+ $[86] = t33;
380
+ } else t33 = $[86];
381
+ let t34;
382
+ if ($[87] !== rest || $[88] !== statusLabelPosition || $[89] !== t10 || $[90] !== t12 || $[91] !== t13 || $[92] !== t20 || $[93] !== t33) {
383
+ t34 = /*#__PURE__*/ jsxs("div", {
384
+ className: t10,
366
385
  "data-status-label-position": statusLabelPosition,
367
386
  ...rest,
368
387
  children: [
369
- t10,
370
- t11,
371
- t18,
372
- t31
388
+ t12,
389
+ t13,
390
+ t20,
391
+ t33
373
392
  ]
374
393
  });
375
- $[82] = rest;
376
- $[83] = statusLabelPosition;
377
- $[84] = t10;
378
- $[85] = t11;
379
- $[86] = t18;
380
- $[87] = t31;
381
- $[88] = t8;
382
- $[89] = t32;
383
- } else t32 = $[89];
384
- return t32;
394
+ $[87] = rest;
395
+ $[88] = statusLabelPosition;
396
+ $[89] = t10;
397
+ $[90] = t12;
398
+ $[91] = t13;
399
+ $[92] = t20;
400
+ $[93] = t33;
401
+ $[94] = t34;
402
+ } else t34 = $[94];
403
+ return t34;
385
404
  });
386
405
  ToggleSwitch.displayName = "ToggleSwitch";
387
406
  //#endregion
package/dist/experimental/SelectPanel2/SelectPanel-608e207e.css ADDED
@@ -0,0 +1,2 @@
1
+ .prc-SelectPanel2-Overlay--Q-FI{border:none;color:var(--fgColor-default,#1f2328);padding:0;--max-height:0;--position-top:0;--position-left:0}.prc-SelectPanel2-Overlay--Q-FI:where([open]){display:flex}.prc-SelectPanel2-Overlay--Q-FI:where([data-variant=anchored]),.prc-SelectPanel2-Overlay--Q-FI:where([data-variant=full-screen]){left:var(--position-left);margin:0;top:var(--position-top)}.prc-SelectPanel2-Overlay--Q-FI:where([data-variant=anchored])::backdrop{background-color:transparent}.prc-SelectPanel2-Overlay--Q-FI:where([data-variant=full-screen])::backdrop{background-color:transparent}.prc-SelectPanel2-Overlay--Q-FI:where([data-variant=modal]){bottom:0;left:0;right:0;top:0}.prc-SelectPanel2-Overlay--Q-FI:where([data-variant=modal])::backdrop{background-color:var(--overlay-backdrop-bgColor,#c8d1da66)}.prc-SelectPanel2-Overlay--Q-FI:where([data-variant=full-screen]){border-radius:unset;height:100%;left:0;margin:0;max-height:100vh;max-width:100vw;top:0;width:100%}.prc-SelectPanel2-Overlay--Q-FI:where([data-variant=bottom-sheet]){border-bottom-left-radius:0;border-bottom-right-radius:0;bottom:0;left:0;margin:0;max-height:calc(100vh - 64px);max-width:100vw;top:auto;width:100%}.prc-SelectPanel2-Form-bZ9HS{width:100%}.prc-SelectPanel2-Container-e5e6-,.prc-SelectPanel2-Form-bZ9HS{display:flex;flex-direction:column}.prc-SelectPanel2-Container-e5e6-{flex-grow:1;flex-shrink:1;justify-content:space-between;overflow:hidden}.prc-SelectPanel2-Container-e5e6- ul{flex-grow:1;overflow-y:auto}.prc-SelectPanel2-Container-e5e6- li:not(:focus,[data-is-active-descendant],[data-active]){contain-intrinsic-size:auto 32px;content-visibility:auto}.prc-SelectPanel2-HeaderContent-MsaAS{align-items:center;display:flex;justify-content:space-between;margin-bottom:0}.prc-SelectPanel2-HeaderContent-MsaAS:where([data-description]){align-items:flex-start}.prc-SelectPanel2-HeaderContent-MsaAS:where([data-search-input]){margin-bottom:var(--base-size-8,.5rem)}.prc-SelectPanel2-TitleWrapper-HzPu3{margin-left:var(--base-size-8,.5rem);margin-top:0}.prc-SelectPanel2-TitleWrapper-HzPu3:where([data-description]){margin-top:2px}.prc-SelectPanel2-TitleWrapper-HzPu3:where([data-on-back]){margin-left:var(--base-size-4,.25rem)}.prc-SelectPanel2-TextInput-lHH1n{padding-left:var(--base-size-8,.5rem)!important}.prc-SelectPanel2-TextInput-lHH1n:has(input:placeholder-shown) .TextInput-action{display:none}.prc-SelectPanel2-Checkbox-AYR38{margin-top:0}.prc-SelectPanel2-FlexBox-gWPRg{display:flex}.prc-SelectPanel2-Title-T-h3f{font-size:var(--text-body-size-medium,.875rem);font-weight:var(--base-text-weight-semibold,600)}.prc-SelectPanel2-Description-qTXfi{display:block;font-size:var(--text-body-size-small,.75rem)}.prc-SelectPanel2-ClearAction-tQj-f,.prc-SelectPanel2-Description-qTXfi{color:var(--fgColor-muted,#59636e)}.prc-SelectPanel2-ClearAction-tQj-f{background:none}.prc-SelectPanel2-Footer-TibV0{align-items:center;border-top:var(--borderWidth-thin,.0625rem) solid;border-top-color:var(--borderColor-default,#d1d9e0);display:flex;flex-shrink:0;justify-content:space-between;min-height:44px;padding:var(--base-size-16,1rem)}.prc-SelectPanel2-Footer-TibV0:where([data-hide-primary-actions]){padding:var(--base-size-8,.5rem)}.prc-SelectPanel2-FooterContent-UjAOM{flex-grow:0}.prc-SelectPanel2-FooterContent-UjAOM:where([data-hide-primary-actions]){flex-grow:1}.prc-SelectPanel2-FooterActions-T6yQR,.prc-SelectPanel2-SecondaryCheckbox-omkf-{display:flex;gap:var(--stack-gap-condensed,.5rem)}.prc-SelectPanel2-SecondaryCheckbox-omkf-{align-items:center}.prc-SelectPanel2-SmallText-c42ay{font-size:var(--text-body-size-small,.75rem)}.prc-SelectPanel2-SelectPanelLoading-mtyhD{align-items:center;display:flex;flex-direction:column;gap:var(--stack-gap-normal,1rem);height:100%;justify-content:center;min-height:min(calc(var(--max-height) - 150px),324px)}.prc-SelectPanel2-LoadingText-DB0wN{color:var(--fgColor-muted,#59636e);font-size:var(--text-body-size-medium,.875rem)}.prc-SelectPanel2-MessageFull-nY-qF{align-items:center;display:flex;flex-direction:column;flex-grow:1;gap:var(--base-size-4,.25rem);height:100%;justify-content:center;min-height:min(calc(var(--max-height) - 150px),324px);padding-left:var(--base-size-24,1.5rem);padding-right:var(--base-size-24,1.5rem);text-align:center}.prc-SelectPanel2-MessageFull-nY-qF a{color:inherit;-webkit-text-decoration:underline;text-decoration:underline}.prc-SelectPanel2-Octicon-zt-zU{margin-bottom:var(--base-size-8,.5rem)}.prc-SelectPanel2-Octicon-zt-zU.prc-SelectPanel2-Error-ZrZQQ{color:var(--fgColor-danger,#d1242f)}.prc-SelectPanel2-Octicon-zt-zU.prc-SelectPanel2-Warning-PDsVF{color:var(--fgColor-attention,#9a6700)}.prc-SelectPanel2-MessageTitle-T7v9d{font-size:var(--text-body-size-medium,.875rem);font-weight:var(--base-text-weight-medium,500)}.prc-SelectPanel2-MessageContent-UZ9vY{align-items:center;color:var(--fgColor-muted,#59636e);flex-direction:column;font-size:var(--text-body-size-medium,.875rem)}.prc-SelectPanel2-MessageContent-UZ9vY,.prc-SelectPanel2-MessageInline-sErQf{display:flex;gap:var(--stack-gap-condensed,.5rem)}.prc-SelectPanel2-MessageInline-sErQf{border-bottom:var(--borderWidth-thin,.0625rem) solid;font-size:var(--text-body-size-small,.75rem);padding:var(--base-size-12,.75rem) var(--base-size-16,1rem)}.prc-SelectPanel2-MessageInline-sErQf a{color:inherit;-webkit-text-decoration:underline;text-decoration:underline}.prc-SelectPanel2-MessageInline-sErQf:where([data-variant=error]){background-color:var(--bgColor-danger-muted,#ffebe9);border-color:var(--borderColor-danger-muted,#ff818266);color:var(--fgColor-danger,#d1242f)}.prc-SelectPanel2-MessageInline-sErQf:where([data-variant=warning]){background-color:var(--bgColor-attention-muted,#fff8c5);border-color:var(--borderColor-attention-muted,#d4a72c66);color:var(--fgColor-attention,#9a6700)}.prc-SelectPanel2-Header-LKyEJ{border-bottom:var(--borderWidth-thin,.0625rem) solid;border-bottom-color:var(--borderColor-default,#d1d9e0);display:flex;flex-direction:column;padding:var(--base-size-8,.5rem)}
2
+ /*# sourceMappingURL=SelectPanel-608e207e.css.map */
package/dist/experimental/SelectPanel2/{SelectPanel-917fdaef.css.map → SelectPanel-608e207e.css.map} RENAMED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/experimental/SelectPanel2/SelectPanel.module.css.js"],"names":[],"mappings":"AAAA,gCAGE,WAAY,CADZ,oCAA6B,CAD7B,SAAU,CAKV,cAAe,CACf,gBAAiB,CACjB,iBAoDF,CAlDE,8CACE,YACF,CAEA,iIAKE,yBAA0B,CAC1B,QAAS,CAHT,uBAQF,CAHE,yEACE,4BACF,CAFA,4EACE,4BACF,CAGF,4DAIE,QAAS,CAFT,MAAO,CACP,OAAQ,CAFR,KAIF,CAEA,sEACE,0DACF,CAEA,kEAQE,mBAAoB,CAHpB,WAAY,CAHZ,MAAO,CAKP,QAAS,CADT,gBAAiB,CAFjB,eAAgB,CAHhB,KAAM,CAEN,UAMF,CAEA,mEASE,2BAA4B,CAD5B,4BAA6B,CAN7B,QAAS,CACT,MAAO,CAIP,QAAS,CADT,6BAA8B,CAD9B,eAAgB,CAJhB,QAAS,CAGT,UAMF,CAGF,6BAEE,UAEF,CAEA,+DALE,YAAa,CAEb,qBAwBF,CArBA,kCAKE,WAAY,CADZ,aAAc,CAEd,6BAA8B,CAJ9B,eAmBF,CAbE,qCAEE,WAAY,CADZ,eAEF,CAMA,2FAEE,gCAAiC,CADjC,uBAEF,CAGF,sCAGE,kBAAmB,CAFnB,YAAa,CACb,6BAA8B,CAE9B,eASF,CAPE,gEACE,sBACF,CAEA,iEACE,sCACF,CAGF,qCAEE,oCAA+B,CAD/B,YAWF,CARE,+DAEE,cACF,CAEA,2DACE,qCACF,CAGF,kCACE,+CASF,CAHE,4EACE,YACF,CAGF,iCACE,YACF,CAEA,gCACE,YACF,CAEA,8BACE,8CAAuC,CACvC,gDACF,CAEA,oCACE,aAAc,CACd,4CAEF,CAEA,wEAHE,kCAMF,CAHA,oCAEE,eACF,CAEA,+BAOE,kBAAmB,CAHnB,iDAAyC,CACzC,mDAA4C,CAJ5C,YAAa,CAOb,aAAc,CAFd,6BAA8B,CAJ9B,eAAgB,CAChB,gCAUF,CAHE,kEACE,gCACF,CAGF,sCACE,WAKF,CAHE,yEACE,WACF,CAQF,gFAJE,YAAa,CACb,oCAOF,CAJA,0CAEE,kBAEF,CAEA,kCACE,4CACF,CAEA,2CAQE,kBAAmB,CAPnB,YAAa,CAKb,qBAAsB,CAGtB,gCAA4B,CAP5B,WAAY,CAKZ,sBAAuB,CAFvB,qDAKF,CAEA,oCAEE,kCAA2B,CAD3B,8CAEF,CAEA,oCAWE,kBAAmB,CAVnB,YAAa,CAQb,qBAAsB,CAGtB,WAAY,CACZ,6BAAuB,CAXvB,WAAY,CAQZ,sBAAuB,CALvB,qDAAuD,CAEvD,uCAAiC,CADjC,wCAAkC,CAElC,iBAWF,CAJE,sCACE,aAAc,CACd,iCAA0B,CAA1B,yBACF,CAGF,gCACE,sCASF,CAPE,6DACE,mCACF,CAEA,+DACE,sCACF,CAGF,qCACE,8CAAuC,CACvC,8CACF,CAEA,uCAME,kBAAmB,CAHnB,kCAA2B,CAC3B,qBAAsB,CAFtB,8CAKF,CAEA,6EARE,YAAa,CAIb,oCA8BF,CA1BA,sCAOE,oDAA4C,CAD5C,4CAAsC,CADtC,2DAqBF,CAhBE,wCACE,aAAc,CACd,iCAA0B,CAA1B,yBACF,CAEA,kEAEE,oDAA6C,CAC7C,sDAA6C,CAF7C,mCAGF,CAEA,oEAEE,uDAAgD,CAChD,yDAAgD,CAFhD,sCAGF,CAGF,+BAIE,oDAA4C,CAC5C,sDAA+C,CAJ/C,YAAa,CAEb,qBAAsB,CADtB,gCAIF","file":"SelectPanel-917fdaef.css","sourcesContent":[".Overlay {\n padding: 0;\n color: var(--fgColor-default);\n border: none;\n\n /* CSS variables values are passed in via styles */\n --max-height: 0;\n --position-top: 0;\n --position-left: 0;\n\n &:where([open]) {\n display: flex; /* to fit children */\n }\n\n &:where([data-variant='anchored']),\n &:where([data-variant='full-screen']) {\n /* stylelint-disable-next-line primer/spacing */\n top: var(--position-top);\n /* stylelint-disable-next-line primer/spacing */\n left: var(--position-left);\n margin: 0;\n\n &::backdrop {\n background-color: transparent;\n }\n }\n\n &:where([data-variant='modal']) {\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n }\n\n &:where([data-variant='modal'])::backdrop {\n background-color: var(--overlay-backdrop-bgColor);\n }\n\n &:where([data-variant='full-screen']) {\n top: 0;\n left: 0;\n width: 100%;\n max-width: 100vw;\n height: 100%;\n max-height: 100vh;\n margin: 0;\n border-radius: unset;\n }\n\n &:where([data-variant='bottom-sheet']) {\n top: auto;\n bottom: 0;\n left: 0;\n width: 100%;\n max-width: 100vw;\n max-height: calc(100vh - 64px);\n margin: 0;\n border-bottom-right-radius: 0;\n border-bottom-left-radius: 0;\n }\n}\n\n.Form {\n display: flex;\n width: 100%;\n flex-direction: column;\n}\n\n.Container {\n display: flex;\n overflow: hidden;\n flex-direction: column;\n flex-shrink: 1;\n flex-grow: 1;\n justify-content: space-between;\n\n ul {\n overflow-y: auto;\n flex-grow: 1;\n }\n\n /* Allow the browser to skip rendering for off-screen items, reducing style recalc and layout costs in long lists.\n Exclude items that show the active indicator line, as content-visibility: auto applies paint containment\n which clips the absolutely-positioned ::after pseudo-element that renders outside the item bounds. */\n /* stylelint-disable-next-line selector-no-qualifying-type */\n li:not(:focus, [data-is-active-descendant], [data-active]) {\n content-visibility: auto;\n contain-intrinsic-size: auto 32px;\n }\n}\n\n.HeaderContent {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 0;\n\n &:where([data-description]) {\n align-items: flex-start;\n }\n\n &:where([data-search-input]) {\n margin-bottom: var(--base-size-8);\n }\n}\n\n.TitleWrapper {\n margin-top: 0;\n margin-left: var(--base-size-8);\n\n &:where([data-description]) {\n /* stylelint-disable-next-line primer/spacing */\n margin-top: 2px;\n }\n\n &:where([data-on-back]) {\n margin-left: var(--base-size-4);\n }\n}\n\n.TextInput {\n padding-left: var(--base-size-8) !important;\n\n /* Hide the trailing action while the input is empty (showing its placeholder). Uses a\n forward sibling selector on the input instead of `:has()` to avoid Safari's `:has()`\n invalidation cost; `input` and `.TextInput-action` are siblings inside the wrapper. */\n /* stylelint-disable-next-line selector-class-pattern */\n & input:placeholder-shown ~ :global(.TextInput-action) {\n display: none;\n }\n}\n\n.Checkbox {\n margin-top: 0;\n}\n\n.FlexBox {\n display: flex;\n}\n\n.Title {\n font-size: var(--text-body-size-medium);\n font-weight: var(--base-text-weight-semibold);\n}\n\n.Description {\n display: block;\n font-size: var(--text-body-size-small);\n color: var(--fgColor-muted);\n}\n\n.ClearAction {\n color: var(--fgColor-muted);\n background: none;\n}\n\n.Footer {\n display: flex;\n min-height: 44px;\n padding: var(--base-size-16);\n border-top: var(--borderWidth-thin) solid;\n border-top-color: var(--borderColor-default);\n justify-content: space-between;\n align-items: center;\n flex-shrink: 0;\n\n &:where([data-hide-primary-actions]) {\n padding: var(--base-size-8);\n }\n}\n\n.FooterContent {\n flex-grow: 0;\n\n &:where([data-hide-primary-actions]) {\n flex-grow: 1;\n }\n}\n\n.FooterActions {\n display: flex;\n gap: var(--stack-gap-condensed);\n}\n\n.SecondaryCheckbox {\n display: flex;\n align-items: center;\n gap: var(--stack-gap-condensed);\n}\n\n.SmallText {\n font-size: var(--text-body-size-small);\n}\n\n.SelectPanelLoading {\n display: flex;\n height: 100%;\n\n /* maxHeight of dialog - (header & footer) */\n min-height: min(calc(var(--max-height) - 150px), 324px);\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: var(--stack-gap-normal);\n}\n\n.LoadingText {\n font-size: var(--text-body-size-medium);\n color: var(--fgColor-muted);\n}\n\n.MessageFull {\n display: flex;\n height: 100%;\n\n /* maxHeight of dialog - (header & footer) */\n min-height: min(calc(var(--max-height) - 150px), 324px);\n padding-right: var(--base-size-24);\n padding-left: var(--base-size-24);\n text-align: center;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n flex-grow: 1;\n gap: var(--base-size-4);\n\n a {\n color: inherit;\n text-decoration: underline;\n }\n}\n\n.Octicon {\n margin-bottom: var(--base-size-8);\n\n &.Error {\n color: var(--fgColor-danger);\n }\n\n &.Warning {\n color: var(--fgColor-attention);\n }\n}\n\n.MessageTitle {\n font-size: var(--text-body-size-medium);\n font-weight: var(--base-text-weight-medium);\n}\n\n.MessageContent {\n display: flex;\n font-size: var(--text-body-size-medium);\n color: var(--fgColor-muted);\n flex-direction: column;\n gap: var(--stack-gap-condensed);\n align-items: center;\n}\n\n.MessageInline {\n display: flex;\n padding-top: var(--base-size-12);\n padding-right: var(--base-size-16);\n padding-bottom: var(--base-size-12);\n padding-left: var(--base-size-16);\n font-size: var(--text-body-size-small);\n border-bottom: var(--borderWidth-thin) solid;\n gap: var(--stack-gap-condensed);\n\n a {\n color: inherit;\n text-decoration: underline;\n }\n\n &:where([data-variant='error']) {\n color: var(--fgColor-danger);\n background-color: var(--bgColor-danger-muted);\n border-color: var(--borderColor-danger-muted);\n }\n\n &:where([data-variant='warning']) {\n color: var(--fgColor-attention);\n background-color: var(--bgColor-attention-muted);\n border-color: var(--borderColor-attention-muted);\n }\n}\n\n.Header {\n display: flex;\n padding: var(--base-size-8);\n flex-direction: column;\n border-bottom: var(--borderWidth-thin) solid;\n border-bottom-color: var(--borderColor-default);\n}\n"]}
1
+ {"version":3,"sources":["../../src/experimental/SelectPanel2/SelectPanel.module.css.js"],"names":[],"mappings":"AAAA,gCAGE,WAAY,CADZ,oCAA6B,CAD7B,SAAU,CAKV,cAAe,CACf,gBAAiB,CACjB,iBAoDF,CAlDE,8CACE,YACF,CAEA,iIAKE,yBAA0B,CAC1B,QAAS,CAHT,uBAQF,CAHE,yEACE,4BACF,CAFA,4EACE,4BACF,CAGF,4DAIE,QAAS,CAFT,MAAO,CACP,OAAQ,CAFR,KAIF,CAEA,sEACE,0DACF,CAEA,kEAQE,mBAAoB,CAHpB,WAAY,CAHZ,MAAO,CAKP,QAAS,CADT,gBAAiB,CAFjB,eAAgB,CAHhB,KAAM,CAEN,UAMF,CAEA,mEASE,2BAA4B,CAD5B,4BAA6B,CAN7B,QAAS,CACT,MAAO,CAIP,QAAS,CADT,6BAA8B,CAD9B,eAAgB,CAJhB,QAAS,CAGT,UAMF,CAGF,6BAEE,UAEF,CAEA,+DALE,YAAa,CAEb,qBAwBF,CArBA,kCAKE,WAAY,CADZ,aAAc,CAEd,6BAA8B,CAJ9B,eAmBF,CAbE,qCAEE,WAAY,CADZ,eAEF,CAMA,2FAEE,gCAAiC,CADjC,uBAEF,CAGF,sCAGE,kBAAmB,CAFnB,YAAa,CACb,6BAA8B,CAE9B,eASF,CAPE,gEACE,sBACF,CAEA,iEACE,sCACF,CAGF,qCAEE,oCAA+B,CAD/B,YAWF,CARE,+DAEE,cACF,CAEA,2DACE,qCACF,CAGF,kCACE,+CAMF,CAHE,iFACE,YACF,CAGF,iCACE,YACF,CAEA,gCACE,YACF,CAEA,8BACE,8CAAuC,CACvC,gDACF,CAEA,oCACE,aAAc,CACd,4CAEF,CAEA,wEAHE,kCAMF,CAHA,oCAEE,eACF,CAEA,+BAOE,kBAAmB,CAHnB,iDAAyC,CACzC,mDAA4C,CAJ5C,YAAa,CAOb,aAAc,CAFd,6BAA8B,CAJ9B,eAAgB,CAChB,gCAUF,CAHE,kEACE,gCACF,CAGF,sCACE,WAKF,CAHE,yEACE,WACF,CAQF,gFAJE,YAAa,CACb,oCAOF,CAJA,0CAEE,kBAEF,CAEA,kCACE,4CACF,CAEA,2CAQE,kBAAmB,CAPnB,YAAa,CAKb,qBAAsB,CAGtB,gCAA4B,CAP5B,WAAY,CAKZ,sBAAuB,CAFvB,qDAKF,CAEA,oCAEE,kCAA2B,CAD3B,8CAEF,CAEA,oCAWE,kBAAmB,CAVnB,YAAa,CAQb,qBAAsB,CAGtB,WAAY,CACZ,6BAAuB,CAXvB,WAAY,CAQZ,sBAAuB,CALvB,qDAAuD,CAEvD,uCAAiC,CADjC,wCAAkC,CAElC,iBAWF,CAJE,sCACE,aAAc,CACd,iCAA0B,CAA1B,yBACF,CAGF,gCACE,sCASF,CAPE,6DACE,mCACF,CAEA,+DACE,sCACF,CAGF,qCACE,8CAAuC,CACvC,8CACF,CAEA,uCAME,kBAAmB,CAHnB,kCAA2B,CAC3B,qBAAsB,CAFtB,8CAKF,CAEA,6EARE,YAAa,CAIb,oCA8BF,CA1BA,sCAOE,oDAA4C,CAD5C,4CAAsC,CADtC,2DAqBF,CAhBE,wCACE,aAAc,CACd,iCAA0B,CAA1B,yBACF,CAEA,kEAEE,oDAA6C,CAC7C,sDAA6C,CAF7C,mCAGF,CAEA,oEAEE,uDAAgD,CAChD,yDAAgD,CAFhD,sCAGF,CAGF,+BAIE,oDAA4C,CAC5C,sDAA+C,CAJ/C,YAAa,CAEb,qBAAsB,CADtB,gCAIF","file":"SelectPanel-608e207e.css","sourcesContent":[".Overlay {\n padding: 0;\n color: var(--fgColor-default);\n border: none;\n\n /* CSS variables values are passed in via styles */\n --max-height: 0;\n --position-top: 0;\n --position-left: 0;\n\n &:where([open]) {\n display: flex; /* to fit children */\n }\n\n &:where([data-variant='anchored']),\n &:where([data-variant='full-screen']) {\n /* stylelint-disable-next-line primer/spacing */\n top: var(--position-top);\n /* stylelint-disable-next-line primer/spacing */\n left: var(--position-left);\n margin: 0;\n\n &::backdrop {\n background-color: transparent;\n }\n }\n\n &:where([data-variant='modal']) {\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n }\n\n &:where([data-variant='modal'])::backdrop {\n background-color: var(--overlay-backdrop-bgColor);\n }\n\n &:where([data-variant='full-screen']) {\n top: 0;\n left: 0;\n width: 100%;\n max-width: 100vw;\n height: 100%;\n max-height: 100vh;\n margin: 0;\n border-radius: unset;\n }\n\n &:where([data-variant='bottom-sheet']) {\n top: auto;\n bottom: 0;\n left: 0;\n width: 100%;\n max-width: 100vw;\n max-height: calc(100vh - 64px);\n margin: 0;\n border-bottom-right-radius: 0;\n border-bottom-left-radius: 0;\n }\n}\n\n.Form {\n display: flex;\n width: 100%;\n flex-direction: column;\n}\n\n.Container {\n display: flex;\n overflow: hidden;\n flex-direction: column;\n flex-shrink: 1;\n flex-grow: 1;\n justify-content: space-between;\n\n ul {\n overflow-y: auto;\n flex-grow: 1;\n }\n\n /* Allow the browser to skip rendering for off-screen items, reducing style recalc and layout costs in long lists.\n Exclude items that show the active indicator line, as content-visibility: auto applies paint containment\n which clips the absolutely-positioned ::after pseudo-element that renders outside the item bounds. */\n /* stylelint-disable-next-line selector-no-qualifying-type */\n li:not(:focus, [data-is-active-descendant], [data-active]) {\n content-visibility: auto;\n contain-intrinsic-size: auto 32px;\n }\n}\n\n.HeaderContent {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 0;\n\n &:where([data-description]) {\n align-items: flex-start;\n }\n\n &:where([data-search-input]) {\n margin-bottom: var(--base-size-8);\n }\n}\n\n.TitleWrapper {\n margin-top: 0;\n margin-left: var(--base-size-8);\n\n &:where([data-description]) {\n /* stylelint-disable-next-line primer/spacing */\n margin-top: 2px;\n }\n\n &:where([data-on-back]) {\n margin-left: var(--base-size-4);\n }\n}\n\n.TextInput {\n padding-left: var(--base-size-8) !important;\n\n /* stylelint-disable-next-line selector-class-pattern, selector-no-qualifying-type, selector-pseudo-class-disallowed-list -- :has() scoped to CSS Module, audited (github/github-ui#17224) */\n &:has(input:placeholder-shown) :global(.TextInput-action) {\n display: none;\n }\n}\n\n.Checkbox {\n margin-top: 0;\n}\n\n.FlexBox {\n display: flex;\n}\n\n.Title {\n font-size: var(--text-body-size-medium);\n font-weight: var(--base-text-weight-semibold);\n}\n\n.Description {\n display: block;\n font-size: var(--text-body-size-small);\n color: var(--fgColor-muted);\n}\n\n.ClearAction {\n color: var(--fgColor-muted);\n background: none;\n}\n\n.Footer {\n display: flex;\n min-height: 44px;\n padding: var(--base-size-16);\n border-top: var(--borderWidth-thin) solid;\n border-top-color: var(--borderColor-default);\n justify-content: space-between;\n align-items: center;\n flex-shrink: 0;\n\n &:where([data-hide-primary-actions]) {\n padding: var(--base-size-8);\n }\n}\n\n.FooterContent {\n flex-grow: 0;\n\n &:where([data-hide-primary-actions]) {\n flex-grow: 1;\n }\n}\n\n.FooterActions {\n display: flex;\n gap: var(--stack-gap-condensed);\n}\n\n.SecondaryCheckbox {\n display: flex;\n align-items: center;\n gap: var(--stack-gap-condensed);\n}\n\n.SmallText {\n font-size: var(--text-body-size-small);\n}\n\n.SelectPanelLoading {\n display: flex;\n height: 100%;\n\n /* maxHeight of dialog - (header & footer) */\n min-height: min(calc(var(--max-height) - 150px), 324px);\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: var(--stack-gap-normal);\n}\n\n.LoadingText {\n font-size: var(--text-body-size-medium);\n color: var(--fgColor-muted);\n}\n\n.MessageFull {\n display: flex;\n height: 100%;\n\n /* maxHeight of dialog - (header & footer) */\n min-height: min(calc(var(--max-height) - 150px), 324px);\n padding-right: var(--base-size-24);\n padding-left: var(--base-size-24);\n text-align: center;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n flex-grow: 1;\n gap: var(--base-size-4);\n\n a {\n color: inherit;\n text-decoration: underline;\n }\n}\n\n.Octicon {\n margin-bottom: var(--base-size-8);\n\n &.Error {\n color: var(--fgColor-danger);\n }\n\n &.Warning {\n color: var(--fgColor-attention);\n }\n}\n\n.MessageTitle {\n font-size: var(--text-body-size-medium);\n font-weight: var(--base-text-weight-medium);\n}\n\n.MessageContent {\n display: flex;\n font-size: var(--text-body-size-medium);\n color: var(--fgColor-muted);\n flex-direction: column;\n gap: var(--stack-gap-condensed);\n align-items: center;\n}\n\n.MessageInline {\n display: flex;\n padding-top: var(--base-size-12);\n padding-right: var(--base-size-16);\n padding-bottom: var(--base-size-12);\n padding-left: var(--base-size-16);\n font-size: var(--text-body-size-small);\n border-bottom: var(--borderWidth-thin) solid;\n gap: var(--stack-gap-condensed);\n\n a {\n color: inherit;\n text-decoration: underline;\n }\n\n &:where([data-variant='error']) {\n color: var(--fgColor-danger);\n background-color: var(--bgColor-danger-muted);\n border-color: var(--borderColor-danger-muted);\n }\n\n &:where([data-variant='warning']) {\n color: var(--fgColor-attention);\n background-color: var(--bgColor-attention-muted);\n border-color: var(--borderColor-attention-muted);\n }\n}\n\n.Header {\n display: flex;\n padding: var(--base-size-8);\n flex-direction: column;\n border-bottom: var(--borderWidth-thin) solid;\n border-bottom-color: var(--borderColor-default);\n}\n"]}
package/dist/experimental/SelectPanel2/SelectPanel.module.css.js CHANGED
@@ -1,4 +1,4 @@
1
- import "./SelectPanel-917fdaef.css";
1
+ import "./SelectPanel-608e207e.css";
2
2
  //#region src/experimental/SelectPanel2/SelectPanel.module.css.js
3
3
  var SelectPanel_module_css_default = {
4
4
  "Overlay": "prc-SelectPanel2-Overlay--Q-FI",
package/dist/hooks/useMedia.js CHANGED
@@ -1,7 +1,8 @@
1
+ import { canUseDOM } from "../utils/environment.js";
1
2
  import { warning } from "../utils/warning.js";
2
3
  import { MatchMediaContext } from "./MatchMediaContext.js";
3
4
  import { c } from "react-compiler-runtime";
4
- import { useContext, useSyncExternalStore } from "react";
5
+ import React, { useContext, useEffect } from "react";
5
6
  //#region src/hooks/useMedia.ts
6
7
  /**
7
8
  * `useMedia` will use the given `mediaQueryString` with `matchMedia` to
@@ -17,54 +18,52 @@ import { useContext, useSyncExternalStore } from "react";
17
18
  * }
18
19
  */
19
20
  function useMedia(mediaQueryString, defaultState) {
20
- const $ = c(9);
21
- const contextValue = useContext(MatchMediaContext)[mediaQueryString];
21
+ const $ = c(8);
22
+ const features = useContext(MatchMediaContext);
22
23
  let t0;
23
- if ($[0] !== contextValue || $[1] !== mediaQueryString) {
24
- t0 = (onStoreChange) => {
25
- if (contextValue !== void 0) return _temp;
26
- const mediaQueryList = window.matchMedia(mediaQueryString);
27
- if (mediaQueryList.addEventListener) {
28
- mediaQueryList.addEventListener("change", onStoreChange);
29
- return () => {
30
- mediaQueryList.removeEventListener("change", onStoreChange);
31
- };
32
- }
33
- mediaQueryList.addListener(onStoreChange);
34
- return () => {
35
- mediaQueryList.removeListener(onStoreChange);
36
- };
24
+ if ($[0] !== defaultState || $[1] !== features || $[2] !== mediaQueryString) {
25
+ t0 = () => {
26
+ if (features[mediaQueryString] !== void 0) return features[mediaQueryString];
27
+ if (defaultState !== void 0) return defaultState;
28
+ if (canUseDOM) return window.matchMedia(mediaQueryString).matches;
29
+ warning(true, "`useMedia` When server side rendering, defaultState should be defined to prevent a hydration mismatches.");
30
+ return false;
37
31
  };
38
- $[0] = contextValue;
39
- $[1] = mediaQueryString;
40
- $[2] = t0;
41
- } else t0 = $[2];
42
- const subscribe = t0;
32
+ $[0] = defaultState;
33
+ $[1] = features;
34
+ $[2] = mediaQueryString;
35
+ $[3] = t0;
36
+ } else t0 = $[3];
37
+ const [matches, setMatches] = React.useState(t0);
38
+ if (features[mediaQueryString] !== void 0 && matches !== features[mediaQueryString]) setMatches(features[mediaQueryString]);
43
39
  let t1;
44
- if ($[3] !== contextValue || $[4] !== mediaQueryString) {
45
- t1 = () => {
46
- if (contextValue !== void 0) return contextValue;
47
- return window.matchMedia(mediaQueryString).matches;
48
- };
49
- $[3] = contextValue;
50
- $[4] = mediaQueryString;
51
- $[5] = t1;
52
- } else t1 = $[5];
53
- const getSnapshot = t1;
54
40
  let t2;
55
- if ($[6] !== contextValue || $[7] !== defaultState) {
56
- t2 = () => {
57
- if (contextValue !== void 0) return contextValue;
58
- if (defaultState !== void 0) return defaultState;
59
- warning(typeof window === "undefined", "`useMedia` When server side rendering, defaultState should be defined to prevent a hydration mismatches.");
60
- return false;
41
+ if ($[4] !== features || $[5] !== mediaQueryString) {
42
+ t1 = () => {
43
+ if (features[mediaQueryString] !== void 0) return;
44
+ const listener = function listener(event) {
45
+ setMatches(event.matches);
46
+ };
47
+ const mediaQueryList = window.matchMedia(mediaQueryString);
48
+ if (mediaQueryList.addEventListener) mediaQueryList.addEventListener("change", listener);
49
+ else mediaQueryList.addListener(listener);
50
+ setMatches(mediaQueryList.matches);
51
+ return () => {
52
+ if (mediaQueryList.addEventListener) mediaQueryList.removeEventListener("change", listener);
53
+ else mediaQueryList.removeListener(listener);
54
+ };
61
55
  };
62
- $[6] = contextValue;
63
- $[7] = defaultState;
64
- $[8] = t2;
65
- } else t2 = $[8];
66
- return useSyncExternalStore(subscribe, getSnapshot, t2);
56
+ t2 = [features, mediaQueryString];
57
+ $[4] = features;
58
+ $[5] = mediaQueryString;
59
+ $[6] = t1;
60
+ $[7] = t2;
61
+ } else {
62
+ t1 = $[6];
63
+ t2 = $[7];
64
+ }
65
+ useEffect(t1, t2);
66
+ return matches;
67
67
  }
68
- function _temp() {}
69
68
  //#endregion
70
69
  export { useMedia };