@measured/puck 0.20.1-canary.d7404af9 → 0.21.0-canary.5c9698fb

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.
@@ -145,7 +145,7 @@
145
145
  /* bundle/no-external.css */
146
146
 
147
147
  /* css-module:/home/runner/work/puck/puck/packages/core/components/ActionBar/styles.module.css/#css-module-data */
148
- .ActionBar {
148
+ ._ActionBar_rvadt_1 {
149
149
  align-items: center;
150
150
  cursor: default;
151
151
  display: flex;
@@ -161,7 +161,7 @@
161
161
  font-family: var(--puck-font-family);
162
162
  min-height: 26px;
163
163
  }
164
- .ActionBar-label {
164
+ ._ActionBar-label_rvadt_18 {
165
165
  color: var(--puck-color-grey-08);
166
166
  font-size: var(--puck-font-size-xxxs);
167
167
  font-weight: 500;
@@ -172,13 +172,13 @@
172
172
  text-overflow: ellipsis;
173
173
  white-space: nowrap;
174
174
  }
175
- .ActionBar-action + .ActionBar-label {
175
+ ._ActionBar-action_rvadt_30 + ._ActionBar-label_rvadt_18 {
176
176
  padding-inline-start: 0;
177
177
  }
178
- .ActionBar-label + .ActionBar-action {
178
+ ._ActionBar-label_rvadt_18 + ._ActionBar-action_rvadt_30 {
179
179
  margin-inline-start: -4px;
180
180
  }
181
- .ActionBar-group {
181
+ ._ActionBar-group_rvadt_38 {
182
182
  align-items: center;
183
183
  border-inline-start: 0.5px solid var(--puck-color-grey-05);
184
184
  display: flex;
@@ -186,13 +186,13 @@
186
186
  padding-inline-start: 4px;
187
187
  padding-inline-end: 4px;
188
188
  }
189
- .ActionBar-group:first-of-type {
189
+ ._ActionBar-group_rvadt_38:first-of-type {
190
190
  border-inline-start: 0;
191
191
  }
192
- .ActionBar-group:empty {
192
+ ._ActionBar-group_rvadt_38:empty {
193
193
  display: none;
194
194
  }
195
- .ActionBar-action {
195
+ ._ActionBar-action_rvadt_30 {
196
196
  background: transparent;
197
197
  border: none;
198
198
  color: var(--puck-color-grey-08);
@@ -207,32 +207,32 @@
207
207
  justify-content: center;
208
208
  transition: color 50ms ease-in;
209
209
  }
210
- .ActionBar-action svg {
210
+ ._ActionBar-action_rvadt_30 svg {
211
211
  max-width: none !important;
212
212
  }
213
- .ActionBar-action:focus-visible {
213
+ ._ActionBar-action_rvadt_30:focus-visible {
214
214
  outline: 2px solid var(--puck-color-azure-05);
215
215
  outline-offset: -2px;
216
216
  }
217
217
  @media (hover: hover) and (pointer: fine) {
218
- .ActionBar-action:hover {
218
+ ._ActionBar-action_rvadt_30:hover {
219
219
  color: var(--puck-color-azure-06);
220
220
  transition: none;
221
221
  }
222
222
  }
223
- .ActionBar-action:active {
223
+ ._ActionBar-action_rvadt_30:active {
224
224
  color: var(--puck-color-azure-07);
225
225
  transition: none;
226
226
  }
227
- .ActionBar-group * {
227
+ ._ActionBar-group_rvadt_38 * {
228
228
  margin: 0;
229
229
  }
230
230
 
231
231
  /* css-module:/home/runner/work/puck/puck/packages/core/components/AutoField/styles.module.css/#css-module-data */
232
- .InputWrapper + .InputWrapper {
232
+ ._InputWrapper_bsxfo_1 + ._InputWrapper_bsxfo_1 {
233
233
  margin-top: 12px;
234
234
  }
235
- .Input-label {
235
+ ._Input-label_bsxfo_5 {
236
236
  align-items: center;
237
237
  color: var(--puck-color-grey-04);
238
238
  display: flex;
@@ -240,17 +240,17 @@
240
240
  font-size: var(--puck-font-size-xxs);
241
241
  font-weight: 600;
242
242
  }
243
- .Input-labelIcon {
243
+ ._Input-labelIcon_bsxfo_14 {
244
244
  color: var(--puck-color-grey-07);
245
245
  display: flex;
246
246
  margin-inline-end: 4px;
247
247
  padding-inline-start: 4px;
248
248
  }
249
- .Input-disabledIcon {
249
+ ._Input-disabledIcon_bsxfo_21 {
250
250
  color: var(--puck-color-grey-05);
251
251
  margin-inline-start: auto;
252
252
  }
253
- .Input-input {
253
+ ._Input-input_bsxfo_26 {
254
254
  background: var(--puck-color-white);
255
255
  border-width: 1px;
256
256
  border-style: solid;
@@ -265,11 +265,11 @@
265
265
  max-width: 100%;
266
266
  }
267
267
  @media (min-width: 458px) {
268
- .Input-input {
268
+ ._Input-input_bsxfo_26 {
269
269
  font-size: 14px;
270
270
  }
271
271
  }
272
- select.Input-input {
272
+ select._Input-input_bsxfo_26 {
273
273
  appearance: none;
274
274
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23c3c3c3'><polygon points='0,0 100,0 50,50'/></svg>") no-repeat;
275
275
  background-size: 12px;
@@ -278,29 +278,29 @@ select.Input-input {
278
278
  background-color: var(--puck-color-white);
279
279
  cursor: pointer;
280
280
  }
281
- select.Input-input:dir(rtl) {
281
+ select._Input-input_bsxfo_26:dir(rtl) {
282
282
  background-position: 12px calc(50% + 3px);
283
283
  }
284
284
  @media (hover: hover) and (pointer: fine) {
285
- .Input:has(> input):hover .Input-input:not([readonly]),
286
- .Input:has(> textarea):hover .Input-input:not([readonly]) {
285
+ ._Input_bsxfo_1:has(> input):hover ._Input-input_bsxfo_26:not([readonly]),
286
+ ._Input_bsxfo_1:has(> textarea):hover ._Input-input_bsxfo_26:not([readonly]) {
287
287
  border-color: var(--puck-color-grey-05);
288
288
  transition: none;
289
289
  }
290
- .Input:has(> select):hover .Input-input:not([disabled]) {
290
+ ._Input_bsxfo_1:has(> select):hover ._Input-input_bsxfo_26:not([disabled]) {
291
291
  background-color: var(--puck-color-azure-12);
292
292
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%235a5a5a'><polygon points='0,0 100,0 50,50'/></svg>");
293
293
  border-color: var(--puck-color-grey-05);
294
294
  transition: none;
295
295
  }
296
296
  }
297
- .Input-input:focus {
297
+ ._Input-input_bsxfo_26:focus {
298
298
  border-color: var(--puck-color-grey-05);
299
299
  outline: 2px solid var(--puck-color-azure-05);
300
300
  transition: none;
301
301
  }
302
- .Input--readOnly > .Input-input,
303
- .Input--readOnly > select.Input-input {
302
+ ._Input--readOnly_bsxfo_82 > ._Input-input_bsxfo_26,
303
+ ._Input--readOnly_bsxfo_82 > select._Input-input_bsxfo_26 {
304
304
  background-color: var(--puck-color-grey-11);
305
305
  border-color: var(--puck-color-grey-09);
306
306
  color: var(--puck-color-grey-04);
@@ -309,34 +309,34 @@ select.Input-input:dir(rtl) {
309
309
  outline: 0;
310
310
  transition: none;
311
311
  }
312
- .Input-radioGroupItems {
312
+ ._Input-radioGroupItems_bsxfo_93 {
313
313
  display: flex;
314
314
  border: 1px solid var(--puck-color-grey-09);
315
315
  border-radius: 4px;
316
316
  flex-wrap: wrap;
317
317
  }
318
- .Input-radio {
318
+ ._Input-radio_bsxfo_93 {
319
319
  border-inline-end: 1px solid var(--puck-color-grey-09);
320
320
  flex-grow: 1;
321
321
  }
322
- .Input-radio:first-of-type {
322
+ ._Input-radio_bsxfo_93:first-of-type {
323
323
  border-bottom-left-radius: 4px;
324
324
  border-top-left-radius: 4px;
325
325
  }
326
- .Input-radio:first-of-type .Input-radioInner {
326
+ ._Input-radio_bsxfo_93:first-of-type ._Input-radioInner_bsxfo_110 {
327
327
  border-bottom-left-radius: 3px;
328
328
  border-top-left-radius: 3px;
329
329
  }
330
- .Input-radio:last-of-type {
330
+ ._Input-radio_bsxfo_93:last-of-type {
331
331
  border-bottom-right-radius: 4px;
332
332
  border-inline-end: 0;
333
333
  border-top-right-radius: 4px;
334
334
  }
335
- .Input-radio:last-of-type .Input-radioInner {
335
+ ._Input-radio_bsxfo_93:last-of-type ._Input-radioInner_bsxfo_110 {
336
336
  border-bottom-right-radius: 3px;
337
337
  border-top-right-radius: 3px;
338
338
  }
339
- .Input-radioInner {
339
+ ._Input-radioInner_bsxfo_110 {
340
340
  background-color: var(--puck-color-white);
341
341
  color: var(--puck-color-grey-04);
342
342
  cursor: pointer;
@@ -345,32 +345,32 @@ select.Input-input:dir(rtl) {
345
345
  text-align: center;
346
346
  transition: background-color 50ms ease-in;
347
347
  }
348
- .Input-radio:has(:focus-visible) {
348
+ ._Input-radio_bsxfo_93:has(:focus-visible) {
349
349
  outline: 2px solid var(--puck-color-azure-05);
350
350
  outline-offset: 2px;
351
351
  position: relative;
352
352
  }
353
353
  @media (hover: hover) and (pointer: fine) {
354
- .Input-radioInner:hover {
354
+ ._Input-radioInner_bsxfo_110:hover {
355
355
  background-color: var(--puck-color-azure-12);
356
356
  transition: none;
357
357
  }
358
358
  }
359
- .Input--readOnly .Input-radioInner {
359
+ ._Input--readOnly_bsxfo_82 ._Input-radioInner_bsxfo_110 {
360
360
  background-color: var(--puck-color-white);
361
361
  color: var(--puck-color-grey-04);
362
362
  cursor: default;
363
363
  }
364
- .Input-radio .Input-radioInput:checked ~ .Input-radioInner {
364
+ ._Input-radio_bsxfo_93 ._Input-radioInput_bsxfo_155:checked ~ ._Input-radioInner_bsxfo_110 {
365
365
  background-color: var(--puck-color-azure-11);
366
366
  color: var(--puck-color-azure-04);
367
367
  font-weight: 500;
368
368
  }
369
- .Input--readOnly .Input-radioInput:checked ~ .Input-radioInner {
369
+ ._Input--readOnly_bsxfo_82 ._Input-radioInput_bsxfo_155:checked ~ ._Input-radioInner_bsxfo_110 {
370
370
  background-color: var(--puck-color-grey-11);
371
371
  color: var(--puck-color-grey-04);
372
372
  }
373
- .Input-radio .Input-radioInput {
373
+ ._Input-radio_bsxfo_93 ._Input-radioInput_bsxfo_155 {
374
374
  clip: rect(0 0 0 0);
375
375
  clip-path: inset(100%);
376
376
  height: 1px;
@@ -379,23 +379,23 @@ select.Input-input:dir(rtl) {
379
379
  white-space: nowrap;
380
380
  width: 1px;
381
381
  }
382
- textarea.Input-input {
382
+ textarea._Input-input_bsxfo_26 {
383
383
  margin-bottom: -4px;
384
384
  }
385
385
 
386
386
  /* css-module:/home/runner/work/puck/puck/packages/core/components/AutoField/fields/ArrayField/styles.module.css/#css-module-data */
387
- .ArrayField {
387
+ ._ArrayField_14u8o_5 {
388
388
  display: flex;
389
389
  flex-direction: column;
390
390
  background: var(--puck-color-azure-11);
391
391
  border: 1px solid var(--puck-color-grey-09);
392
392
  border-radius: 4px;
393
393
  }
394
- .ArrayField--isDraggingFrom {
394
+ ._ArrayField--isDraggingFrom_14u8o_13 {
395
395
  background-color: var(--puck-color-azure-11);
396
396
  overflow: hidden;
397
397
  }
398
- .ArrayField-addButton {
398
+ ._ArrayField-addButton_14u8o_18 {
399
399
  background-color: var(--puck-color-white);
400
400
  border: none;
401
401
  border-radius: 3px;
@@ -409,63 +409,63 @@ textarea.Input-input {
409
409
  text-align: left;
410
410
  transition: background-color 50ms ease-in;
411
411
  }
412
- .ArrayField--hasItems > .ArrayField-addButton {
412
+ ._ArrayField--hasItems_14u8o_33 > ._ArrayField-addButton_14u8o_18 {
413
413
  border-top: 1px solid var(--puck-color-grey-09);
414
414
  border-top-left-radius: 0;
415
415
  border-top-right-radius: 0;
416
416
  }
417
- .ArrayField-addButton:focus-visible {
417
+ ._ArrayField-addButton_14u8o_18:focus-visible {
418
418
  outline: 2px solid var(--puck-color-azure-05);
419
419
  outline-offset: 2px;
420
420
  position: relative;
421
421
  }
422
422
  @media (hover: hover) and (pointer: fine) {
423
- .ArrayField:not(.ArrayField--isDraggingFrom) > .ArrayField-addButton:hover {
423
+ ._ArrayField_14u8o_5:not(._ArrayField--isDraggingFrom_14u8o_13) > ._ArrayField-addButton_14u8o_18:hover {
424
424
  background: var(--puck-color-azure-12);
425
425
  color: var(--puck-color-azure-04);
426
426
  transition: none;
427
427
  }
428
428
  }
429
- .ArrayField:not(.ArrayField--isDraggingFrom) > .ArrayField-addButton:active {
429
+ ._ArrayField_14u8o_5:not(._ArrayField--isDraggingFrom_14u8o_13) > ._ArrayField-addButton_14u8o_18:active {
430
430
  background: var(--puck-color-azure-11);
431
431
  color: var(--puck-color-azure-04);
432
432
  transition: none;
433
433
  }
434
- .ArrayField-inner {
434
+ ._ArrayField-inner_14u8o_59 {
435
435
  margin-top: -1px;
436
436
  }
437
- .ArrayFieldItem {
437
+ ._ArrayFieldItem_14u8o_67 {
438
438
  border-top-left-radius: 3px;
439
439
  border-top-right-radius: 3px;
440
440
  display: block;
441
441
  position: relative;
442
442
  }
443
- .ArrayFieldItem {
443
+ ._ArrayFieldItem_14u8o_67 {
444
444
  border-top: 1px solid var(--puck-color-grey-09);
445
445
  }
446
- .ArrayFieldItem--isDragging {
446
+ ._ArrayFieldItem--isDragging_14u8o_78 {
447
447
  border-top: transparent;
448
448
  }
449
- .ArrayFieldItem--isExpanded::before {
449
+ ._ArrayFieldItem--isExpanded_14u8o_82::before {
450
450
  display: none;
451
451
  }
452
- .ArrayFieldItem--isExpanded {
452
+ ._ArrayFieldItem--isExpanded_14u8o_82 {
453
453
  border-bottom: 0;
454
454
  outline-offset: 0px !important;
455
455
  outline: 1px solid var(--puck-color-azure-07) !important;
456
456
  z-index: 2;
457
457
  }
458
- .ArrayFieldItem--isDragging {
458
+ ._ArrayFieldItem--isDragging_14u8o_78 {
459
459
  outline: 2px var(--puck-color-azure-09) solid !important;
460
460
  }
461
- .ArrayFieldItem--isDragging .ArrayFieldItem-summary:active {
461
+ ._ArrayFieldItem--isDragging_14u8o_78 ._ArrayFieldItem-summary_14u8o_97:active {
462
462
  background-color: var(--puck-color-white);
463
463
  }
464
- .ArrayFieldItem + .ArrayFieldItem {
464
+ ._ArrayFieldItem_14u8o_67 + ._ArrayFieldItem_14u8o_67 {
465
465
  border-top-left-radius: 0;
466
466
  border-top-right-radius: 0;
467
467
  }
468
- .ArrayFieldItem-summary {
468
+ ._ArrayFieldItem-summary_14u8o_97 {
469
469
  background: var(--puck-color-white);
470
470
  color: var(--puck-color-grey-04);
471
471
  cursor: pointer;
@@ -480,70 +480,70 @@ textarea.Input-input {
480
480
  overflow: hidden;
481
481
  transition: background-color 50ms ease-in;
482
482
  }
483
- .ArrayFieldItem:first-of-type > .ArrayFieldItem-summary {
483
+ ._ArrayFieldItem_14u8o_67:first-of-type > ._ArrayFieldItem-summary_14u8o_97 {
484
484
  border-top-left-radius: 3px;
485
485
  border-top-right-radius: 3px;
486
486
  }
487
- .ArrayField--addDisabled > .ArrayField-inner > .ArrayFieldItem:last-of-type:not(.ArrayFieldItem--isExpanded) > .ArrayFieldItem-summary {
487
+ ._ArrayField--addDisabled_14u8o_127 > ._ArrayField-inner_14u8o_59 > ._ArrayFieldItem_14u8o_67:last-of-type:not(._ArrayFieldItem--isExpanded_14u8o_82) > ._ArrayFieldItem-summary_14u8o_97 {
488
488
  border-bottom-left-radius: 3px;
489
489
  border-bottom-right-radius: 3px;
490
490
  }
491
- .ArrayField--addDisabled > .ArrayField-inner > .ArrayFieldItem--isExpanded:last-of-type {
491
+ ._ArrayField--addDisabled_14u8o_127 > ._ArrayField-inner_14u8o_59 > ._ArrayFieldItem--isExpanded_14u8o_82:last-of-type {
492
492
  border-bottom-left-radius: 3px;
493
493
  border-bottom-right-radius: 3px;
494
494
  }
495
- .ArrayFieldItem-summary:focus-visible {
495
+ ._ArrayFieldItem-summary_14u8o_97:focus-visible {
496
496
  outline: 2px solid var(--puck-color-azure-05);
497
497
  outline-offset: 2px;
498
498
  }
499
499
  @media (hover: hover) and (pointer: fine) {
500
- .ArrayFieldItem-summary:hover {
500
+ ._ArrayFieldItem-summary_14u8o_97:hover {
501
501
  background-color: var(--puck-color-azure-12);
502
502
  transition: none;
503
503
  }
504
504
  }
505
- .ArrayFieldItem-summary:active {
505
+ ._ArrayFieldItem-summary_14u8o_97:active {
506
506
  background-color: var(--puck-color-azure-11);
507
507
  transition: none;
508
508
  }
509
- .ArrayFieldItem--isExpanded > .ArrayFieldItem-summary {
509
+ ._ArrayFieldItem--isExpanded_14u8o_82 > ._ArrayFieldItem-summary_14u8o_97 {
510
510
  background: var(--puck-color-azure-11);
511
511
  color: var(--puck-color-azure-04);
512
512
  font-weight: 600;
513
513
  transition: none;
514
514
  }
515
- .ArrayFieldItem-body {
515
+ ._ArrayFieldItem-body_14u8o_166 {
516
516
  background: var(--puck-color-white);
517
517
  display: none;
518
518
  }
519
- .ArrayFieldItem--isExpanded > .ArrayFieldItem-body {
519
+ ._ArrayFieldItem--isExpanded_14u8o_82 > ._ArrayFieldItem-body_14u8o_166 {
520
520
  display: block;
521
521
  }
522
- .ArrayFieldItem-fieldset {
522
+ ._ArrayFieldItem-fieldset_14u8o_175 {
523
523
  border: none;
524
524
  border-top: 1px solid var(--puck-color-grey-09);
525
525
  margin: 0;
526
526
  min-width: 0;
527
527
  padding: 16px 15px;
528
528
  }
529
- .ArrayFieldItem-rhs {
529
+ ._ArrayFieldItem-rhs_14u8o_183 {
530
530
  display: flex;
531
531
  gap: 4px;
532
532
  align-items: center;
533
533
  }
534
- .ArrayFieldItem-actions {
534
+ ._ArrayFieldItem-actions_14u8o_189 {
535
535
  color: var(--puck-color-grey-04);
536
536
  display: flex;
537
537
  gap: 4px;
538
538
  opacity: 0;
539
539
  }
540
- .ArrayFieldItem-summary:focus-within > .ArrayFieldItem-rhs > .ArrayFieldItem-actions,
541
- .ArrayFieldItem-summary:hover > .ArrayFieldItem-rhs > .ArrayFieldItem-actions {
540
+ ._ArrayFieldItem-summary_14u8o_97:focus-within > ._ArrayFieldItem-rhs_14u8o_183 > ._ArrayFieldItem-actions_14u8o_189,
541
+ ._ArrayFieldItem-summary_14u8o_97:hover > ._ArrayFieldItem-rhs_14u8o_183 > ._ArrayFieldItem-actions_14u8o_189 {
542
542
  opacity: 1;
543
543
  }
544
544
 
545
545
  /* css-module:/home/runner/work/puck/puck/packages/core/components/IconButton/IconButton.module.css/#css-module-data */
546
- .IconButton {
546
+ ._IconButton_swpni_1 {
547
547
  align-items: center;
548
548
  background: transparent;
549
549
  border: none;
@@ -555,23 +555,23 @@ textarea.Input-input {
555
555
  padding: 4px;
556
556
  transition: background-color 50ms ease-in, color 50ms ease-in;
557
557
  }
558
- .IconButton:focus-visible {
558
+ ._IconButton_swpni_1:focus-visible {
559
559
  outline: 2px solid var(--puck-color-azure-05);
560
560
  outline-offset: -2px;
561
561
  }
562
562
  @media (hover: hover) and (pointer: fine) {
563
- .IconButton:hover:not(.IconButton--disabled) {
563
+ ._IconButton_swpni_1:hover:not(._IconButton--disabled_swpni_20) {
564
564
  background: var(--puck-color-azure-12);
565
565
  color: var(--puck-color-azure-04);
566
566
  cursor: pointer;
567
567
  transition: none;
568
568
  }
569
569
  }
570
- .IconButton:active {
570
+ ._IconButton_swpni_1:active {
571
571
  background: var(--puck-color-azure-11);
572
572
  transition: none;
573
573
  }
574
- .IconButton-title {
574
+ ._IconButton-title_swpni_33 {
575
575
  clip: rect(0 0 0 0);
576
576
  clip-path: inset(100%);
577
577
  height: 1px;
@@ -580,12 +580,12 @@ textarea.Input-input {
580
580
  white-space: nowrap;
581
581
  width: 1px;
582
582
  }
583
- .IconButton--disabled {
583
+ ._IconButton--disabled_swpni_20 {
584
584
  color: var(--puck-color-grey-07);
585
585
  }
586
586
 
587
587
  /* css-module:/home/runner/work/puck/puck/packages/core/components/Loader/styles.module.css/#css-module-data */
588
- @keyframes loader-animation {
588
+ @keyframes _loader-animation_nacdm_1 {
589
589
  0% {
590
590
  transform: rotate(0deg) scale(1);
591
591
  }
@@ -596,28 +596,28 @@ textarea.Input-input {
596
596
  transform: rotate(360deg) scale(1);
597
597
  }
598
598
  }
599
- .Loader {
599
+ ._Loader_nacdm_13 {
600
600
  background: transparent;
601
601
  border-radius: 100%;
602
602
  border: 2px solid currentColor;
603
603
  border-bottom-color: transparent;
604
604
  display: inline-block;
605
- animation: loader-animation 1s 0s infinite linear;
605
+ animation: _loader-animation_nacdm_1 1s 0s infinite linear;
606
606
  animation-fill-mode: both;
607
607
  }
608
608
 
609
609
  /* css-module:/home/runner/work/puck/puck/packages/core/components/DragIcon/styles.module.css/#css-module-data */
610
- .DragIcon {
610
+ ._DragIcon_17p8x_1 {
611
611
  color: var(--puck-color-grey-05);
612
612
  cursor: grab;
613
613
  padding: 4px;
614
614
  border-radius: 4px;
615
615
  }
616
- .DragIcon--disabled {
616
+ ._DragIcon--disabled_17p8x_8 {
617
617
  cursor: no-drop;
618
618
  }
619
619
  @media (hover: hover) and (pointer: fine) {
620
- .DragIcon:not(.DragIcon--disabled):hover {
620
+ ._DragIcon_17p8x_1:not(._DragIcon--disabled_17p8x_8):hover {
621
621
  color: var(--puck-color-azure-05);
622
622
  background-color: var(--puck-color-azure-12);
623
623
  }
@@ -637,10 +637,10 @@ textarea.Input-input {
637
637
  }
638
638
 
639
639
  /* css-module:/home/runner/work/puck/puck/packages/core/components/ExternalInput/styles.module.css/#css-module-data */
640
- .ExternalInput-actions {
640
+ ._ExternalInput-actions_91ls0_1 {
641
641
  display: flex;
642
642
  }
643
- .ExternalInput-button {
643
+ ._ExternalInput-button_91ls0_5 {
644
644
  display: flex;
645
645
  gap: 8px;
646
646
  align-items: center;
@@ -658,16 +658,16 @@ textarea.Input-input {
658
658
  overflow: hidden;
659
659
  flex-grow: 1;
660
660
  }
661
- .ExternalInput--dataSelected .ExternalInput-button {
661
+ ._ExternalInput--dataSelected_91ls0_24 ._ExternalInput-button_91ls0_5 {
662
662
  color: var(--puck-color-grey-03);
663
663
  display: block;
664
664
  border-top-right-radius: 0px;
665
665
  border-bottom-right-radius: 0px;
666
666
  }
667
- .ExternalInput--readOnly .ExternalInput-button {
667
+ ._ExternalInput--readOnly_91ls0_31 ._ExternalInput-button_91ls0_5 {
668
668
  background-color: var(--puck-color-grey-11);
669
669
  }
670
- .ExternalInput-detachButton {
670
+ ._ExternalInput-detachButton_91ls0_35 {
671
671
  border: 1px solid var(--puck-color-grey-09);
672
672
  border-top-right-radius: 4px;
673
673
  border-bottom-right-radius: 4px;
@@ -682,28 +682,28 @@ textarea.Input-input {
682
682
  transition: background-color 50ms ease-in, color 50ms ease-in;
683
683
  margin-inline-start: -1px;
684
684
  }
685
- .ExternalInput-button:focus-visible,
686
- .ExternalInput-detachButton:focus-visible {
685
+ ._ExternalInput-button_91ls0_5:focus-visible,
686
+ ._ExternalInput-detachButton_91ls0_35:focus-visible {
687
687
  outline: 2px solid var(--puck-color-azure-05);
688
688
  outline-offset: 2px;
689
689
  z-index: 1;
690
690
  }
691
691
  @media (hover: hover) and (pointer: fine) {
692
- .ExternalInput:not(.ExternalInput--readOnly) .ExternalInput-button:hover,
693
- .ExternalInput:not(.ExternalInput--readOnly) .ExternalInput-detachButton:hover {
692
+ ._ExternalInput_91ls0_1:not(._ExternalInput--readOnly_91ls0_31) ._ExternalInput-button_91ls0_5:hover,
693
+ ._ExternalInput_91ls0_1:not(._ExternalInput--readOnly_91ls0_31) ._ExternalInput-detachButton_91ls0_35:hover {
694
694
  background: var(--puck-color-azure-12);
695
695
  transition: none;
696
696
  }
697
- .ExternalInput:not(.ExternalInput--readOnly) .ExternalInput-detachButton:hover {
697
+ ._ExternalInput_91ls0_1:not(._ExternalInput--readOnly_91ls0_31) ._ExternalInput-detachButton_91ls0_35:hover {
698
698
  color: var(--puck-color-azure-04);
699
699
  }
700
700
  }
701
- .ExternalInput:not(.ExternalInput--readOnly) .ExternalInput-button:active,
702
- .ExternalInput:not(.ExternalInput--readOnly) .ExternalInput-detachButton:active {
701
+ ._ExternalInput_91ls0_1:not(._ExternalInput--readOnly_91ls0_31) ._ExternalInput-button_91ls0_5:active,
702
+ ._ExternalInput_91ls0_1:not(._ExternalInput--readOnly_91ls0_31) ._ExternalInput-detachButton_91ls0_35:active {
703
703
  background: var(--puck-color-azure-11);
704
704
  transition: none;
705
705
  }
706
- .ExternalInputModal {
706
+ ._ExternalInputModal_91ls0_79 {
707
707
  color: var(--puck-color-black);
708
708
  display: grid;
709
709
  grid-template-rows: min-content minmax(128px, 100%) min-content;
@@ -712,35 +712,35 @@ textarea.Input-input {
712
712
  min-height: 50dvh;
713
713
  max-height: 90dvh;
714
714
  }
715
- .ExternalInputModal-grid {
715
+ ._ExternalInputModal-grid_91ls0_89 {
716
716
  display: flex;
717
717
  flex-direction: column;
718
718
  }
719
719
  @media (min-width: 458px) {
720
- .ExternalInputModal-grid {
720
+ ._ExternalInputModal-grid_91ls0_89 {
721
721
  display: grid;
722
722
  grid-template-columns: 100%;
723
723
  }
724
- .ExternalInputModal--filtersToggled .ExternalInputModal-grid {
724
+ ._ExternalInputModal--filtersToggled_91ls0_100 ._ExternalInputModal-grid_91ls0_89 {
725
725
  grid-template-columns: 25% 75%;
726
726
  }
727
727
  }
728
- .ExternalInputModal-filters {
728
+ ._ExternalInputModal-filters_91ls0_105 {
729
729
  border-bottom: 1px solid var(--puck-color-grey-09);
730
730
  }
731
- .ExternalInputModal--filtersToggled .ExternalInputModal-filters {
731
+ ._ExternalInputModal--filtersToggled_91ls0_100 ._ExternalInputModal-filters_91ls0_105 {
732
732
  display: none;
733
733
  }
734
734
  @media (min-width: 458px) {
735
- .ExternalInputModal-filters {
735
+ ._ExternalInputModal-filters_91ls0_105 {
736
736
  border-inline-end: 1px solid var(--puck-color-grey-09);
737
737
  display: none;
738
738
  }
739
- .ExternalInputModal--filtersToggled .ExternalInputModal-filters {
739
+ ._ExternalInputModal--filtersToggled_91ls0_100 ._ExternalInputModal-filters_91ls0_105 {
740
740
  display: block;
741
741
  }
742
742
  }
743
- .ExternalInputModal-masthead {
743
+ ._ExternalInputModal-masthead_91ls0_124 {
744
744
  background-color: var(--puck-color-grey-12);
745
745
  border-bottom: 1px solid var(--puck-color-grey-09);
746
746
  display: flex;
@@ -748,13 +748,13 @@ textarea.Input-input {
748
748
  gap: 24px;
749
749
  padding: 24px;
750
750
  }
751
- .ExternalInputModal-tableWrapper {
751
+ ._ExternalInputModal-tableWrapper_91ls0_133 {
752
752
  position: relative;
753
753
  overflow-x: auto;
754
754
  overflow-y: auto;
755
755
  flex-grow: 1;
756
756
  }
757
- .ExternalInputModal-table {
757
+ ._ExternalInputModal-table_91ls0_133 {
758
758
  border-collapse: unset;
759
759
  border-spacing: 0px;
760
760
  color: var(--puck-color-grey-02);
@@ -762,51 +762,51 @@ textarea.Input-input {
762
762
  z-index: 0;
763
763
  min-width: 100%;
764
764
  }
765
- .ExternalInputModal-thead {
765
+ ._ExternalInputModal-thead_91ls0_149 {
766
766
  background-color: var(--puck-color-white);
767
767
  position: sticky;
768
768
  top: 0;
769
769
  z-index: 1;
770
770
  }
771
- .ExternalInputModal-th {
771
+ ._ExternalInputModal-th_91ls0_149 {
772
772
  border-bottom: 1px solid var(--puck-color-grey-09);
773
773
  color: var(--puck-color-grey-04);
774
774
  font-weight: 500;
775
775
  font-size: 14px;
776
776
  padding: 16px 24px;
777
777
  }
778
- .ExternalInputModal-td {
778
+ ._ExternalInputModal-td_91ls0_164 {
779
779
  border-bottom: 1px solid var(--puck-color-grey-10);
780
780
  padding: 16px 24px;
781
781
  }
782
- .ExternalInputModal-tr .ExternalInputModal-td:first-of-type {
782
+ ._ExternalInputModal-tr_91ls0_169 ._ExternalInputModal-td_91ls0_164:first-of-type {
783
783
  font-weight: 500;
784
784
  width: 1%;
785
785
  white-space: nowrap;
786
786
  }
787
787
  @media (hover: hover) and (pointer: fine) {
788
- .ExternalInputModal-tbody .ExternalInputModal-tr:hover {
788
+ ._ExternalInputModal-tbody_91ls0_176 ._ExternalInputModal-tr_91ls0_169:hover {
789
789
  background: var(--puck-color-azure-12);
790
790
  color: var(--puck-color-azure-04);
791
791
  cursor: pointer;
792
792
  position: relative;
793
793
  margin-inline-start: -5px;
794
794
  }
795
- .ExternalInputModal-tbody .ExternalInputModal-tr:hover .ExternalInputModal-td:first-of-type {
795
+ ._ExternalInputModal-tbody_91ls0_176 ._ExternalInputModal-tr_91ls0_169:hover ._ExternalInputModal-td_91ls0_164:first-of-type {
796
796
  border-inline-start: 4px solid var(--puck-color-azure-04);
797
797
  padding-inline-start: 20px;
798
798
  }
799
799
  }
800
- .ExternalInputModal-tbody .ExternalInputModal-tr:last-of-type .ExternalInputModal-td {
800
+ ._ExternalInputModal-tbody_91ls0_176 ._ExternalInputModal-tr_91ls0_169:last-of-type ._ExternalInputModal-td_91ls0_164 {
801
801
  border-bottom: none;
802
802
  }
803
- .ExternalInputModal-tableWrapper {
803
+ ._ExternalInputModal-tableWrapper_91ls0_133 {
804
804
  display: none;
805
805
  }
806
- .ExternalInputModal--hasData .ExternalInputModal-tableWrapper {
806
+ ._ExternalInputModal--hasData_91ls0_202 ._ExternalInputModal-tableWrapper_91ls0_133 {
807
807
  display: block;
808
808
  }
809
- .ExternalInputModal-loadingBanner {
809
+ ._ExternalInputModal-loadingBanner_91ls0_206 {
810
810
  display: none;
811
811
  background-color: color-mix(in srgb, var(--puck-color-white) 90%, transparent);
812
812
  padding: 64px;
@@ -818,21 +818,21 @@ textarea.Input-input {
818
818
  right: 0;
819
819
  bottom: 0;
820
820
  }
821
- .ExternalInputModal--isLoading .ExternalInputModal-loadingBanner {
821
+ ._ExternalInputModal--isLoading_91ls0_223 ._ExternalInputModal-loadingBanner_91ls0_206 {
822
822
  display: flex;
823
823
  }
824
- .ExternalInputModal-searchForm {
824
+ ._ExternalInputModal-searchForm_91ls0_227 {
825
825
  display: flex;
826
826
  flex-wrap: wrap;
827
827
  gap: 12px;
828
828
  flex-grow: 1;
829
829
  }
830
830
  @media (min-width: 458px) {
831
- .ExternalInputModal-searchForm {
831
+ ._ExternalInputModal-searchForm_91ls0_227 {
832
832
  flex-wrap: nowrap;
833
833
  }
834
834
  }
835
- .ExternalInputModal-search {
835
+ ._ExternalInputModal-search_91ls0_227 {
836
836
  display: flex;
837
837
  background: var(--puck-color-white);
838
838
  border-width: 1px;
@@ -842,18 +842,18 @@ textarea.Input-input {
842
842
  flex-grow: 1;
843
843
  transition: border-color 50ms ease-in;
844
844
  }
845
- .ExternalInputModal-search:focus-within {
845
+ ._ExternalInputModal-search_91ls0_227:focus-within {
846
846
  border-color: var(--puck-color-grey-05);
847
847
  outline: 2px solid var(--puck-color-azure-05);
848
848
  transition: none;
849
849
  }
850
850
  @media (hover: hover) and (pointer: fine) {
851
- .ExternalInputModal-search:hover {
851
+ ._ExternalInputModal-search_91ls0_227:hover {
852
852
  border-color: var(--puck-color-grey-05);
853
853
  transition: none;
854
854
  }
855
855
  }
856
- .ExternalInputModal-searchIcon {
856
+ ._ExternalInputModal-searchIcon_91ls0_264 {
857
857
  align-items: center;
858
858
  background: var(--puck-color-grey-12);
859
859
  border-bottom-left-radius: 4px;
@@ -865,17 +865,17 @@ textarea.Input-input {
865
865
  padding: 12px 15px;
866
866
  transition: color 50ms ease-in;
867
867
  }
868
- .ExternalInputModal-search:focus-within .ExternalInputModal-searchIcon {
868
+ ._ExternalInputModal-search_91ls0_227:focus-within ._ExternalInputModal-searchIcon_91ls0_264 {
869
869
  color: var(--puck-color-grey-04);
870
870
  transition: none;
871
871
  }
872
872
  @media (hover: hover) and (pointer: fine) {
873
- .ExternalInputModal-search:hover .ExternalInputModal-searchIcon {
873
+ ._ExternalInputModal-search_91ls0_227:hover ._ExternalInputModal-searchIcon_91ls0_264 {
874
874
  color: var(--puck-color-grey-04);
875
875
  transition: none;
876
876
  }
877
877
  }
878
- .ExternalInputModal-searchIconText {
878
+ ._ExternalInputModal-searchIconText_91ls0_289 {
879
879
  clip: rect(0 0 0 0);
880
880
  clip-path: inset(100%);
881
881
  height: 1px;
@@ -884,7 +884,7 @@ textarea.Input-input {
884
884
  white-space: nowrap;
885
885
  width: 1px;
886
886
  }
887
- .ExternalInputModal-searchInput {
887
+ ._ExternalInputModal-searchInput_91ls0_299 {
888
888
  border: none;
889
889
  border-radius: 4px;
890
890
  background: var(--puck-color-white);
@@ -893,35 +893,35 @@ textarea.Input-input {
893
893
  padding: 12px 15px;
894
894
  width: 100%;
895
895
  }
896
- .ExternalInputModal-searchInput:focus {
896
+ ._ExternalInputModal-searchInput_91ls0_299:focus {
897
897
  outline: 0;
898
898
  }
899
- .ExternalInputModal-searchActions {
899
+ ._ExternalInputModal-searchActions_91ls0_313 {
900
900
  display: flex;
901
901
  gap: 8px;
902
902
  height: 44px;
903
903
  width: 100%;
904
904
  }
905
905
  @media (min-width: 458px) {
906
- .ExternalInputModal-searchActions {
906
+ ._ExternalInputModal-searchActions_91ls0_313 {
907
907
  width: auto;
908
908
  }
909
909
  }
910
- .ExternalInputModal-searchActionIcon {
910
+ ._ExternalInputModal-searchActionIcon_91ls0_326 {
911
911
  align-self: center;
912
912
  }
913
- .ExternalInputModal-footerContainer {
913
+ ._ExternalInputModal-footerContainer_91ls0_330 {
914
914
  background-color: var(--puck-color-grey-12);
915
915
  border-top: 1px solid var(--puck-color-grey-09);
916
916
  color: var(--puck-color-grey-04);
917
917
  padding: 16px;
918
918
  }
919
- .ExternalInputModal-footer {
919
+ ._ExternalInputModal-footer_91ls0_330 {
920
920
  font-weight: 500;
921
921
  font-size: 14px;
922
922
  text-align: right;
923
923
  }
924
- .ExternalInputModal-field {
924
+ ._ExternalInputModal-field_91ls0_343 {
925
925
  color: var(--puck-color-grey-04);
926
926
  margin: 16px;
927
927
  margin-bottom: 12px;
@@ -929,7 +929,7 @@ textarea.Input-input {
929
929
  }
930
930
 
931
931
  /* css-module:/home/runner/work/puck/puck/packages/core/components/Modal/styles.module.css/#css-module-data */
932
- .Modal {
932
+ ._Modal_ikbaj_1 {
933
933
  background: color-mix(in srgb, var(--puck-color-black) 75%, transparent);
934
934
  display: none;
935
935
  justify-content: center;
@@ -942,10 +942,10 @@ textarea.Input-input {
942
942
  z-index: 1;
943
943
  padding: 32px;
944
944
  }
945
- .Modal--isOpen {
945
+ ._Modal--isOpen_ikbaj_15 {
946
946
  display: flex;
947
947
  }
948
- .Modal-inner {
948
+ ._Modal-inner_ikbaj_19 {
949
949
  width: 100%;
950
950
  max-width: 1024px;
951
951
  border-radius: 8px;
@@ -957,44 +957,44 @@ textarea.Input-input {
957
957
  }
958
958
 
959
959
  /* css-module:/home/runner/work/puck/puck/packages/core/components/Heading/styles.module.css/#css-module-data */
960
- .Heading {
960
+ ._Heading_qxrry_1 {
961
961
  display: block;
962
962
  color: var(--puck-color-black);
963
963
  font-weight: 700;
964
964
  margin: 0;
965
965
  }
966
- .Heading b {
966
+ ._Heading_qxrry_1 b {
967
967
  font-weight: 700;
968
968
  }
969
- .Heading--xxxxl {
969
+ ._Heading--xxxxl_qxrry_12 {
970
970
  font-size: var(--puck-font-size-xxxxl);
971
971
  letter-spacing: 0.08ch;
972
972
  font-weight: 800;
973
973
  }
974
- .Heading--xxxl {
974
+ ._Heading--xxxl_qxrry_18 {
975
975
  font-size: var(--puck-font-size-xxxl);
976
976
  }
977
- .Heading--xxl {
977
+ ._Heading--xxl_qxrry_22 {
978
978
  font-size: var(--puck-font-size-xxl);
979
979
  }
980
- .Heading--xl {
980
+ ._Heading--xl_qxrry_26 {
981
981
  font-size: var(--puck-font-size-xl);
982
982
  }
983
- .Heading--l {
983
+ ._Heading--l_qxrry_30 {
984
984
  font-size: var(--puck-font-size-l);
985
985
  }
986
- .Heading--m {
986
+ ._Heading--m_qxrry_34 {
987
987
  font-size: var(--puck-font-size-m);
988
988
  }
989
- .Heading--s {
989
+ ._Heading--s_qxrry_38 {
990
990
  font-size: var(--puck-font-size-s);
991
991
  }
992
- .Heading--xs {
992
+ ._Heading--xs_qxrry_42 {
993
993
  font-size: var(--puck-font-size-xs);
994
994
  }
995
995
 
996
996
  /* css-module:/home/runner/work/puck/puck/packages/core/components/Button/Button.module.css/#css-module-data */
997
- .Button {
997
+ ._Button_10byl_1 {
998
998
  appearance: none;
999
999
  background: none;
1000
1000
  border: 1px solid transparent;
@@ -1016,81 +1016,81 @@ textarea.Input-input {
1016
1016
  white-space: nowrap;
1017
1017
  margin: 0;
1018
1018
  }
1019
- .Button:hover,
1020
- .Button:active {
1019
+ ._Button_10byl_1:hover,
1020
+ ._Button_10byl_1:active {
1021
1021
  transition: none;
1022
1022
  }
1023
- .Button--medium {
1023
+ ._Button--medium_10byl_29 {
1024
1024
  min-height: 34px;
1025
1025
  padding-bottom: 7px;
1026
1026
  padding-inline-start: 19px;
1027
1027
  padding-inline-end: 19px;
1028
1028
  padding-top: 7px;
1029
1029
  }
1030
- .Button--large {
1030
+ ._Button--large_10byl_37 {
1031
1031
  padding-bottom: 11px;
1032
1032
  padding-inline-start: 19px;
1033
1033
  padding-inline-end: 19px;
1034
1034
  padding-top: 11px;
1035
1035
  }
1036
- .Button-icon {
1036
+ ._Button-icon_10byl_44 {
1037
1037
  margin-top: 2px;
1038
1038
  }
1039
- .Button--primary {
1039
+ ._Button--primary_10byl_48 {
1040
1040
  background: var(--puck-color-azure-04);
1041
1041
  }
1042
- .Button:focus-visible {
1042
+ ._Button_10byl_1:focus-visible {
1043
1043
  outline: 2px solid var(--puck-color-azure-05);
1044
1044
  outline-offset: 2px;
1045
1045
  }
1046
1046
  @media (hover: hover) and (pointer: fine) {
1047
- .Button--primary:hover {
1047
+ ._Button--primary_10byl_48:hover {
1048
1048
  background-color: var(--puck-color-azure-03);
1049
1049
  }
1050
1050
  }
1051
- .Button--primary:active {
1051
+ ._Button--primary_10byl_48:active {
1052
1052
  background-color: var(--puck-color-azure-02);
1053
1053
  }
1054
- .Button--secondary {
1054
+ ._Button--secondary_10byl_67 {
1055
1055
  border: 1px solid currentColor;
1056
1056
  color: currentColor;
1057
1057
  }
1058
1058
  @media (hover: hover) and (pointer: fine) {
1059
- .Button--secondary:hover {
1059
+ ._Button--secondary_10byl_67:hover {
1060
1060
  background-color: var(--puck-color-azure-12);
1061
1061
  color: var(--puck-color-black);
1062
1062
  }
1063
1063
  }
1064
- .Button--secondary:active {
1064
+ ._Button--secondary_10byl_67:active {
1065
1065
  background-color: var(--puck-color-azure-11);
1066
1066
  color: var(--puck-color-black);
1067
1067
  }
1068
- .Button--flush {
1068
+ ._Button--flush_10byl_84 {
1069
1069
  border-radius: 0;
1070
1070
  }
1071
- .Button--disabled,
1072
- .Button--disabled:hover {
1071
+ ._Button--disabled_10byl_88,
1072
+ ._Button--disabled_10byl_88:hover {
1073
1073
  background-color: var(--puck-color-grey-07);
1074
1074
  color: var(--puck-color-grey-03);
1075
1075
  cursor: not-allowed;
1076
1076
  }
1077
- .Button--fullWidth {
1077
+ ._Button--fullWidth_10byl_95 {
1078
1078
  justify-content: center;
1079
1079
  width: 100%;
1080
1080
  }
1081
- .Button-spinner {
1081
+ ._Button-spinner_10byl_100 {
1082
1082
  padding-inline-start: 8px;
1083
1083
  }
1084
1084
 
1085
1085
  /* css-module:/home/runner/work/puck/puck/packages/core/components/AutoField/fields/ObjectField/styles.module.css/#css-module-data */
1086
- .ObjectField {
1086
+ ._ObjectField_1ua3y_5 {
1087
1087
  display: flex;
1088
1088
  flex-direction: column;
1089
1089
  background-color: var(--puck-color-white);
1090
1090
  border: 1px solid var(--puck-color-grey-09);
1091
1091
  border-radius: 4px;
1092
1092
  }
1093
- .ObjectField-fieldset {
1093
+ ._ObjectField-fieldset_1ua3y_13 {
1094
1094
  border: none;
1095
1095
  margin: 0;
1096
1096
  min-width: 0;
@@ -1098,16 +1098,16 @@ textarea.Input-input {
1098
1098
  }
1099
1099
 
1100
1100
  /* css-module:/home/runner/work/puck/puck/packages/core/components/Drawer/styles.module.css/#css-module-data */
1101
- .Drawer {
1101
+ ._Drawer_pl7z0_1 {
1102
1102
  display: flex;
1103
1103
  flex-direction: column;
1104
1104
  font-family: var(--puck-font-family);
1105
1105
  gap: 12px;
1106
1106
  }
1107
- .Drawer-draggable {
1107
+ ._Drawer-draggable_pl7z0_8 {
1108
1108
  position: relative;
1109
1109
  }
1110
- .Drawer-draggableBg {
1110
+ ._Drawer-draggableBg_pl7z0_12 {
1111
1111
  position: absolute;
1112
1112
  top: 0;
1113
1113
  right: 0;
@@ -1116,7 +1116,7 @@ textarea.Input-input {
1116
1116
  pointer-events: none;
1117
1117
  z-index: -1;
1118
1118
  }
1119
- .DrawerItem-draggable {
1119
+ ._DrawerItem-draggable_pl7z0_22 {
1120
1120
  background: var(--puck-color-white);
1121
1121
  cursor: grab;
1122
1122
  padding: 12px;
@@ -1128,39 +1128,39 @@ textarea.Input-input {
1128
1128
  align-items: center;
1129
1129
  transition: background-color 50ms ease-in, color 50ms ease-in;
1130
1130
  }
1131
- .DrawerItem--disabled .DrawerItem-draggable {
1131
+ ._DrawerItem--disabled_pl7z0_35 ._DrawerItem-draggable_pl7z0_22 {
1132
1132
  background: var(--puck-color-grey-11);
1133
1133
  color: var(--puck-color-grey-05);
1134
1134
  cursor: not-allowed;
1135
1135
  }
1136
- .DrawerItem:focus-visible {
1136
+ ._DrawerItem_pl7z0_22:focus-visible {
1137
1137
  outline: 0;
1138
1138
  }
1139
- .Drawer:not(.Drawer--isDraggingFrom) .DrawerItem:focus-visible .DrawerItem-draggable {
1139
+ ._Drawer_pl7z0_1:not(._Drawer--isDraggingFrom_pl7z0_45) ._DrawerItem_pl7z0_22:focus-visible ._DrawerItem-draggable_pl7z0_22 {
1140
1140
  border-radius: 4px;
1141
1141
  outline: 2px solid var(--puck-color-azure-05);
1142
1142
  outline-offset: 2px;
1143
1143
  }
1144
1144
  @media (hover: hover) and (pointer: fine) {
1145
- .Drawer:not(.Drawer--isDraggingFrom) .DrawerItem:not(.DrawerItem--disabled) .DrawerItem-draggable:hover {
1145
+ ._Drawer_pl7z0_1:not(._Drawer--isDraggingFrom_pl7z0_45) ._DrawerItem_pl7z0_22:not(._DrawerItem--disabled_pl7z0_35) ._DrawerItem-draggable_pl7z0_22:hover {
1146
1146
  background-color: var(--puck-color-azure-12);
1147
1147
  color: var(--puck-color-azure-04);
1148
1148
  transition: none;
1149
1149
  }
1150
1150
  }
1151
- .DrawerItem-name {
1151
+ ._DrawerItem-name_pl7z0_63 {
1152
1152
  overflow-x: hidden;
1153
1153
  text-overflow: ellipsis;
1154
1154
  white-space: nowrap;
1155
1155
  }
1156
1156
 
1157
1157
  /* css-module:/home/runner/work/puck/puck/packages/core/components/DraggableComponent/styles.module.css/#css-module-data */
1158
- .DraggableComponent {
1158
+ ._DraggableComponent_1vaqy_1 {
1159
1159
  position: absolute;
1160
1160
  pointer-events: none;
1161
1161
  --overlay-background: color-mix( in srgb, var(--puck-color-azure-08) 30%, transparent );
1162
1162
  }
1163
- .DraggableComponent-overlayWrapper {
1163
+ ._DraggableComponent-overlayWrapper_1vaqy_12 {
1164
1164
  height: 100%;
1165
1165
  width: 100%;
1166
1166
  top: 0;
@@ -1169,17 +1169,17 @@ textarea.Input-input {
1169
1169
  box-sizing: border-box;
1170
1170
  z-index: 1;
1171
1171
  }
1172
- .DraggableComponent-overlay {
1172
+ ._DraggableComponent-overlay_1vaqy_12 {
1173
1173
  cursor: pointer;
1174
1174
  height: 100%;
1175
1175
  outline: 2px var(--puck-color-azure-09) solid;
1176
1176
  outline-offset: -2px;
1177
1177
  width: 100%;
1178
1178
  }
1179
- .DraggableComponent:focus-visible > .DraggableComponent-overlayWrapper {
1179
+ ._DraggableComponent_1vaqy_1:focus-visible > ._DraggableComponent-overlayWrapper_1vaqy_12 {
1180
1180
  outline: 1px solid var(--puck-color-azure-05);
1181
1181
  }
1182
- .DraggableComponent-loadingOverlay {
1182
+ ._DraggableComponent-loadingOverlay_1vaqy_34 {
1183
1183
  background: var(--puck-color-white);
1184
1184
  color: var(--puck-color-grey-03);
1185
1185
  border-radius: 4px;
@@ -1194,27 +1194,27 @@ textarea.Input-input {
1194
1194
  opacity: 0.8;
1195
1195
  z-index: 1;
1196
1196
  }
1197
- .DraggableComponent--hover > .DraggableComponent-overlayWrapper > .DraggableComponent-overlay {
1197
+ ._DraggableComponent--hover_1vaqy_50 > ._DraggableComponent-overlayWrapper_1vaqy_12 > ._DraggableComponent-overlay_1vaqy_12 {
1198
1198
  background: var(--overlay-background);
1199
1199
  outline: 2px var(--puck-color-azure-09) solid;
1200
1200
  }
1201
- .DraggableComponent--isSelected > .DraggableComponent-overlayWrapper > .DraggableComponent-overlay {
1201
+ ._DraggableComponent--isSelected_1vaqy_57 > ._DraggableComponent-overlayWrapper_1vaqy_12 > ._DraggableComponent-overlay_1vaqy_12 {
1202
1202
  outline-color: var(--puck-color-azure-07);
1203
1203
  }
1204
- .DraggableComponent:has(.DraggableComponent--hover > .DraggableComponent-overlayWrapper) > .DraggableComponent-overlayWrapper {
1204
+ ._DraggableComponent_1vaqy_1:has(._DraggableComponent--hover_1vaqy_50 > ._DraggableComponent-overlayWrapper_1vaqy_12) > ._DraggableComponent-overlayWrapper_1vaqy_12 {
1205
1205
  display: none;
1206
1206
  }
1207
- .DraggableComponent-actionsOverlay {
1207
+ ._DraggableComponent-actionsOverlay_1vaqy_71 {
1208
1208
  position: sticky;
1209
1209
  opacity: 0;
1210
1210
  pointer-events: none;
1211
1211
  z-index: 2;
1212
1212
  }
1213
- .DraggableComponent--isSelected .DraggableComponent-actionsOverlay {
1213
+ ._DraggableComponent--isSelected_1vaqy_57 ._DraggableComponent-actionsOverlay_1vaqy_71 {
1214
1214
  opacity: 1;
1215
1215
  pointer-events: auto;
1216
1216
  }
1217
- .DraggableComponent-actions {
1217
+ ._DraggableComponent-actions_1vaqy_71 {
1218
1218
  position: absolute;
1219
1219
  width: auto;
1220
1220
  cursor: grab;
@@ -1262,7 +1262,7 @@ textarea.Input-input {
1262
1262
  }
1263
1263
 
1264
1264
  /* css-module:/home/runner/work/puck/puck/packages/core/components/DropZone/styles.module.css/#css-module-data */
1265
- .DropZone {
1265
+ ._DropZone_1i2sv_1 {
1266
1266
  --resize-animation-ms: 150ms;
1267
1267
  position: relative;
1268
1268
  height: 100%;
@@ -1270,47 +1270,47 @@ textarea.Input-input {
1270
1270
  outline-offset: -2px;
1271
1271
  width: 100%;
1272
1272
  }
1273
- .DropZone--hasChildren {
1273
+ ._DropZone--hasChildren_1i2sv_11 {
1274
1274
  min-height: 0;
1275
1275
  }
1276
- .DropZone:empty {
1276
+ ._DropZone_1i2sv_1:empty {
1277
1277
  min-height: var(--min-empty-height);
1278
1278
  }
1279
- [data-puck-entry]:not([data-puck-dragging]) .DropZone {
1279
+ [data-puck-entry]:not([data-puck-dragging]) ._DropZone_1i2sv_1 {
1280
1280
  transition: min-height var(--resize-animation-ms) ease-in;
1281
1281
  }
1282
- .DropZone--isAreaSelected,
1283
- .DropZone--hoveringOverArea:not(.DropZone--isRootZone) {
1282
+ ._DropZone--isAreaSelected_1i2sv_24,
1283
+ ._DropZone--hoveringOverArea_1i2sv_25:not(._DropZone--isRootZone_1i2sv_25) {
1284
1284
  background: color-mix(in srgb, var(--puck-color-azure-09) 30%, transparent);
1285
1285
  outline: 2px dashed var(--puck-color-azure-08);
1286
1286
  }
1287
- .DropZone:empty {
1287
+ ._DropZone_1i2sv_1:empty {
1288
1288
  background: color-mix(in srgb, var(--puck-color-azure-09) 30%, transparent);
1289
1289
  outline: 2px dashed var(--puck-color-azure-08);
1290
1290
  }
1291
- .DropZone--isDestination {
1291
+ ._DropZone--isDestination_1i2sv_35 {
1292
1292
  outline: 2px dashed var(--puck-color-azure-04) !important;
1293
1293
  }
1294
- .DropZone--isDestination:not(.DropZone--isRootZone) {
1294
+ ._DropZone--isDestination_1i2sv_35:not(._DropZone--isRootZone_1i2sv_25) {
1295
1295
  background: color-mix(in srgb, var(--puck-color-azure-09) 30%, transparent) !important;
1296
1296
  }
1297
- .DropZone-item {
1297
+ ._DropZone-item_1i2sv_47 {
1298
1298
  position: relative;
1299
1299
  }
1300
- .DropZone-hitbox {
1300
+ ._DropZone-hitbox_1i2sv_51 {
1301
1301
  position: absolute;
1302
1302
  bottom: -12px;
1303
1303
  height: 24px;
1304
1304
  width: 100%;
1305
1305
  z-index: 1;
1306
1306
  }
1307
- [data-puck-dragging] .DropZone--isEnabled {
1307
+ [data-puck-dragging] ._DropZone--isEnabled_1i2sv_59 {
1308
1308
  outline: 2px dashed var(--puck-color-azure-06);
1309
1309
  }
1310
- .DropZone > *:not([data-puck-component]) {
1310
+ ._DropZone_1i2sv_1 > *:not([data-puck-component]) {
1311
1311
  opacity: 0;
1312
1312
  }
1313
- body:has(.DropZone--isAnimating:empty) [data-puck-overlay] {
1313
+ body:has(._DropZone--isAnimating_1i2sv_68:empty) [data-puck-overlay] {
1314
1314
  opacity: 0 !important;
1315
1315
  }
1316
1316
 
@@ -1329,189 +1329,27 @@ body:has(.DropZone--isAnimating:empty) [data-puck-overlay] {
1329
1329
  }
1330
1330
 
1331
1331
  /* css-module:/home/runner/work/puck/puck/packages/core/components/InlineTextField/styles.module.css/#css-module-data */
1332
- .InlineTextField {
1332
+ ._InlineTextField_ilw2a_1 {
1333
1333
  cursor: text;
1334
1334
  display: inline-block;
1335
1335
  }
1336
- [data-dnd-dragging] .InlineTextField {
1336
+ [data-dnd-dragging] ._InlineTextField_ilw2a_1 {
1337
1337
  cursor: none;
1338
1338
  caret-color: transparent;
1339
1339
  }
1340
- [data-dnd-dragging] .InlineTextField::selection {
1340
+ [data-dnd-dragging] ._InlineTextField_ilw2a_1::selection {
1341
1341
  display: none;
1342
1342
  }
1343
1343
 
1344
- /* css-module:/home/runner/work/puck/puck/packages/core/components/SidebarSection/styles.module.css/#css-module-data */
1345
- .SidebarSection {
1346
- display: flex;
1347
- position: relative;
1348
- flex-direction: column;
1349
- color: var(--puck-color-black);
1350
- }
1351
- .SidebarSection:last-of-type {
1352
- flex-grow: 1;
1353
- }
1354
- .SidebarSection-title {
1355
- background: var(--puck-color-white);
1356
- padding: 16px;
1357
- border-bottom: 1px solid var(--puck-color-grey-09);
1358
- border-top: 1px solid var(--puck-color-grey-09);
1359
- overflow-x: auto;
1360
- }
1361
- .SidebarSection--noBorderTop > .SidebarSection-title {
1362
- border-top: 0px;
1363
- }
1364
- .SidebarSection-content {
1365
- padding: 16px;
1366
- }
1367
- .SidebarSection--noPadding > .SidebarSection-content {
1368
- padding: 0px;
1369
- }
1370
- .SidebarSection--noPadding > .SidebarSection-content:last-child {
1371
- padding-bottom: 4px;
1372
- }
1373
- .SidebarSection:last-of-type .SidebarSection-content {
1374
- border-bottom: none;
1375
- flex-grow: 1;
1376
- }
1377
- .SidebarSection-breadcrumbLabel {
1378
- background: none;
1379
- border: 0;
1380
- border-radius: 2px;
1381
- color: var(--puck-color-azure-04);
1382
- cursor: pointer;
1383
- font: inherit;
1384
- flex-shrink: 0;
1385
- padding: 0;
1386
- transition: color 50ms ease-in;
1387
- }
1388
- .SidebarSection-breadcrumbLabel:focus-visible {
1389
- outline: 2px solid var(--puck-color-azure-05);
1390
- outline-offset: 2px;
1391
- }
1392
- @media (hover: hover) and (pointer: fine) {
1393
- .SidebarSection-breadcrumbLabel:hover {
1394
- color: var(--puck-color-azure-03);
1395
- transition: none;
1396
- }
1397
- }
1398
- .SidebarSection-breadcrumbLabel:active {
1399
- color: var(--puck-color-azure-02);
1400
- transition: none;
1401
- }
1402
- .SidebarSection-breadcrumbs {
1403
- align-items: center;
1404
- display: flex;
1405
- gap: 4px;
1406
- }
1407
- .SidebarSection-breadcrumb {
1408
- align-items: center;
1409
- display: flex;
1410
- gap: 4px;
1411
- }
1412
- .SidebarSection-heading {
1413
- padding-inline-end: 16px;
1414
- }
1415
- .SidebarSection-loadingOverlay {
1416
- background: var(--puck-color-white);
1417
- display: flex;
1418
- justify-content: center;
1419
- align-items: center;
1420
- height: 100%;
1421
- width: 100%;
1422
- top: 0;
1423
- position: absolute;
1424
- z-index: 1;
1425
- pointer-events: all;
1426
- box-sizing: border-box;
1427
- opacity: 0.8;
1428
- }
1429
-
1430
- /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/styles.module.css/#css-module-data */
1431
- .Puck {
1432
- --puck-space-px: 16px;
1433
- font-family: var(--puck-font-family);
1434
- overflow-x: hidden;
1435
- }
1436
- @media (min-width: 766px) {
1437
- .Puck {
1438
- overflow-x: auto;
1439
- }
1440
- }
1441
- .Puck-portal {
1442
- position: relative;
1443
- z-index: 2;
1444
- }
1445
- .PuckLayout-inner {
1446
- --puck-frame-width: auto;
1447
- --puck-side-bar-width: 0px;
1448
- --puck-left-side-bar-width: var( --puck-user-left-side-bar-width, var(--puck-side-bar-width) );
1449
- --puck-right-side-bar-width: var( --puck-user-right-side-bar-width, var(--puck-side-bar-width) );
1450
- display: grid;
1451
- grid-template-areas: "header header header" "left editor right";
1452
- grid-template-columns: 0 var(--puck-frame-width) 0;
1453
- grid-template-rows: min-content auto;
1454
- height: 100dvh;
1455
- position: relative;
1456
- z-index: 0;
1457
- }
1458
- .PuckLayout--mounted .PuckLayout-inner {
1459
- --puck-side-bar-width: 186px;
1460
- }
1461
- .PuckLayout--leftSideBarVisible .PuckLayout-inner {
1462
- grid-template-columns: var(--puck-left-side-bar-width) var(--puck-frame-width) 0;
1463
- }
1464
- .PuckLayout--rightSideBarVisible .PuckLayout-inner {
1465
- grid-template-columns: 0 var(--puck-frame-width) var(--puck-right-side-bar-width);
1466
- }
1467
- .PuckLayout--leftSideBarVisible.PuckLayout--rightSideBarVisible .PuckLayout-inner {
1468
- grid-template-columns: var(--puck-left-side-bar-width) var(--puck-frame-width) var(--puck-right-side-bar-width);
1469
- }
1470
- @media (min-width: 458px) {
1471
- .PuckLayout-mounted .PuckLayout-inner {
1472
- --puck-frame-width: minmax(266px, auto);
1473
- }
1474
- }
1475
- @media (min-width: 638px) {
1476
- .PuckLayout .PuckLayout-inner {
1477
- --puck-side-bar-width: minmax(186px, 250px);
1478
- }
1479
- }
1480
- @media (min-width: 766px) {
1481
- .PuckLayout .PuckLayout-inner {
1482
- --puck-frame-width: auto;
1483
- }
1484
- }
1485
- @media (min-width: 990px) {
1486
- .PuckLayout .PuckLayout-inner {
1487
- --puck-side-bar-width: 256px;
1488
- }
1489
- }
1490
- @media (min-width: 1198px) {
1491
- .PuckLayout .PuckLayout-inner {
1492
- --puck-side-bar-width: 274px;
1493
- }
1494
- }
1495
- @media (min-width: 1398px) {
1496
- .PuckLayout .PuckLayout-inner {
1497
- --puck-side-bar-width: 290px;
1498
- }
1499
- }
1500
- @media (min-width: 1598px) {
1501
- .PuckLayout .PuckLayout-inner {
1502
- --puck-side-bar-width: 320px;
1503
- }
1504
- }
1505
-
1506
1344
  /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Fields/styles.module.css/#css-module-data */
1507
- .PuckFields {
1345
+ ._PuckFields_10bh7_1 {
1508
1346
  position: relative;
1509
1347
  font-family: var(--puck-font-family);
1510
1348
  }
1511
- .PuckFields--isLoading {
1349
+ ._PuckFields--isLoading_10bh7_6 {
1512
1350
  min-height: 48px;
1513
1351
  }
1514
- .PuckFields-loadingOverlay {
1352
+ ._PuckFields-loadingOverlay_10bh7_10 {
1515
1353
  background: var(--puck-color-white);
1516
1354
  display: flex;
1517
1355
  justify-content: flex-end;
@@ -1525,40 +1363,40 @@ body:has(.DropZone--isAnimating:empty) [data-puck-overlay] {
1525
1363
  box-sizing: border-box;
1526
1364
  opacity: 0.8;
1527
1365
  }
1528
- .PuckFields-loadingOverlayInner {
1366
+ ._PuckFields-loadingOverlayInner_10bh7_25 {
1529
1367
  display: flex;
1530
1368
  padding: 16px;
1531
1369
  position: sticky;
1532
1370
  top: 0;
1533
1371
  }
1534
- .PuckFields-field * {
1372
+ ._PuckFields-field_10bh7_32 * {
1535
1373
  box-sizing: border-box;
1536
1374
  }
1537
- .PuckFields--wrapFields .PuckFields-field {
1375
+ ._PuckFields--wrapFields_10bh7_36 ._PuckFields-field_10bh7_32 {
1538
1376
  color: var(--puck-color-grey-04);
1539
1377
  padding: 16px;
1540
1378
  padding-bottom: 12px;
1541
1379
  display: block;
1542
1380
  }
1543
- .PuckFields--wrapFields .PuckFields-field + .PuckFields-field {
1381
+ ._PuckFields--wrapFields_10bh7_36 ._PuckFields-field_10bh7_32 + ._PuckFields-field_10bh7_32 {
1544
1382
  border-top: 1px solid var(--puck-color-grey-09);
1545
1383
  margin-top: 8px;
1546
1384
  }
1547
1385
 
1548
1386
  /* css-module:/home/runner/work/puck/puck/packages/core/components/ComponentList/styles.module.css/#css-module-data */
1549
- .ComponentList {
1387
+ ._ComponentList_1rrlt_1 {
1550
1388
  max-width: 100%;
1551
1389
  }
1552
- .ComponentList--isExpanded + .ComponentList {
1390
+ ._ComponentList--isExpanded_1rrlt_5 + ._ComponentList_1rrlt_1 {
1553
1391
  margin-top: 12px;
1554
1392
  }
1555
- .ComponentList-content {
1393
+ ._ComponentList-content_1rrlt_9 {
1556
1394
  display: none;
1557
1395
  }
1558
- .ComponentList--isExpanded > .ComponentList-content {
1396
+ ._ComponentList--isExpanded_1rrlt_5 > ._ComponentList-content_1rrlt_9 {
1559
1397
  display: block;
1560
1398
  }
1561
- .ComponentList-title {
1399
+ ._ComponentList-title_1rrlt_17 {
1562
1400
  background-color: transparent;
1563
1401
  border: 0;
1564
1402
  color: var(--puck-color-grey-05);
@@ -1575,38 +1413,46 @@ body:has(.DropZone--isAnimating:empty) [data-puck-overlay] {
1575
1413
  border-radius: 4px;
1576
1414
  width: 100%;
1577
1415
  }
1578
- .ComponentList-title:focus-visible {
1416
+ ._ComponentList-title_1rrlt_17:focus-visible {
1579
1417
  outline: 2px solid var(--puck-color-azure-05);
1580
1418
  outline-offset: 2px;
1581
1419
  }
1582
1420
  @media (hover: hover) and (pointer: fine) {
1583
- .ComponentList-title:hover {
1421
+ ._ComponentList-title_1rrlt_17:hover {
1584
1422
  background-color: var(--puck-color-azure-11);
1585
1423
  color: var(--puck-color-azure-04);
1586
1424
  transition: none;
1587
1425
  }
1588
1426
  }
1589
- .ComponentList-title:active {
1427
+ ._ComponentList-title_1rrlt_17:active {
1590
1428
  background-color: var(--puck-color-azure-10);
1591
1429
  transition: none;
1592
1430
  }
1593
- .ComponentList-titleIcon {
1431
+ ._ComponentList-titleIcon_1rrlt_53 {
1594
1432
  margin-inline-start: auto;
1595
1433
  }
1596
1434
 
1435
+ /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Components/styles.module.css/#css-module-data */
1436
+ ._Components_3pbdy_1 {
1437
+ padding: 16px;
1438
+ height: 100%;
1439
+ overflow-y: auto;
1440
+ box-sizing: border-box;
1441
+ }
1442
+
1597
1443
  /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Preview/styles.module.css/#css-module-data */
1598
- .PuckPreview {
1444
+ ._PuckPreview_z2rgu_1 {
1599
1445
  position: relative;
1600
1446
  height: 100%;
1601
1447
  }
1602
- .PuckPreview-frame {
1448
+ ._PuckPreview-frame_z2rgu_6 {
1603
1449
  border: none;
1604
1450
  height: 100%;
1605
1451
  width: 100%;
1606
1452
  }
1607
1453
 
1608
1454
  /* css-module:/home/runner/work/puck/puck/packages/core/components/LayerTree/styles.module.css/#css-module-data */
1609
- .LayerTree {
1455
+ ._LayerTree_7rx04_1 {
1610
1456
  color: var(--puck-color-grey-03);
1611
1457
  font-family: var(--puck-font-family);
1612
1458
  font-size: var(--puck-font-size-xxs);
@@ -1615,30 +1461,30 @@ body:has(.DropZone--isAnimating:empty) [data-puck-overlay] {
1615
1461
  list-style: none;
1616
1462
  padding: 0;
1617
1463
  }
1618
- .LayerTree-zoneTitle {
1464
+ ._LayerTree-zoneTitle_7rx04_11 {
1619
1465
  color: var(--puck-color-grey-05);
1620
1466
  font-size: var(--puck-font-size-xxxs);
1621
1467
  text-transform: uppercase;
1622
1468
  }
1623
- .LayerTree-helper {
1469
+ ._LayerTree-helper_7rx04_17 {
1624
1470
  text-align: center;
1625
1471
  color: var(--puck-color-grey-07);
1626
1472
  margin: 8px 4px;
1627
1473
  }
1628
- .Layer {
1474
+ ._Layer_7rx04_1 {
1629
1475
  position: relative;
1630
1476
  border: 1px solid transparent;
1631
1477
  border-radius: 4px;
1632
1478
  }
1633
- .Layer-inner {
1479
+ ._Layer-inner_7rx04_29 {
1634
1480
  border: 1px solid transparent;
1635
1481
  border-radius: 4px;
1636
1482
  transition: color 50ms ease-in;
1637
1483
  }
1638
- .Layer--containsZone > .Layer-inner {
1484
+ ._Layer--containsZone_7rx04_35 > ._Layer-inner_7rx04_29 {
1639
1485
  padding-inline-start: 0;
1640
1486
  }
1641
- .Layer-clickable {
1487
+ ._Layer-clickable_7rx04_39 {
1642
1488
  align-items: center;
1643
1489
  background: none;
1644
1490
  border: 0;
@@ -1651,224 +1497,285 @@ body:has(.DropZone--isAnimating:empty) [data-puck-overlay] {
1651
1497
  padding-inline-end: 4px;
1652
1498
  width: 100%;
1653
1499
  }
1654
- .Layer-clickable:focus-visible {
1500
+ ._Layer-clickable_7rx04_39:focus-visible {
1655
1501
  outline: 2px solid var(--puck-color-azure-05);
1656
1502
  outline-offset: 2px;
1657
1503
  position: relative;
1658
1504
  z-index: 1;
1659
1505
  }
1660
1506
  @media (hover: hover) and (pointer: fine) {
1661
- .Layer:not(.Layer--isSelected) > .Layer-inner:hover {
1507
+ ._Layer_7rx04_1:not(._Layer--isSelected_7rx04_61) > ._Layer-inner_7rx04_29:hover {
1662
1508
  border-color: var(--puck-color-azure-10);
1663
1509
  background: var(--puck-color-azure-11);
1664
1510
  color: var(--puck-color-azure-04);
1665
1511
  transition: none;
1666
1512
  }
1667
1513
  }
1668
- .Layer--isSelected {
1514
+ ._Layer--isSelected_7rx04_61 {
1669
1515
  border-color: var(--puck-color-azure-08);
1670
1516
  }
1671
- .Layer--isSelected > .Layer-inner {
1517
+ ._Layer--isSelected_7rx04_61 > ._Layer-inner_7rx04_29 {
1672
1518
  background: var(--puck-color-azure-10);
1673
1519
  }
1674
- .Layer--isSelected > .Layer-inner > .Layer-clickable > .Layer-chevron,
1675
- .Layer--childIsSelected > .Layer-inner > .Layer-clickable > .Layer-chevron {
1520
+ ._Layer--isSelected_7rx04_61 > ._Layer-inner_7rx04_29 > ._Layer-clickable_7rx04_39 > ._Layer-chevron_7rx04_77,
1521
+ ._Layer--childIsSelected_7rx04_78 > ._Layer-inner_7rx04_29 > ._Layer-clickable_7rx04_39 > ._Layer-chevron_7rx04_77 {
1676
1522
  transform: scaleY(-1);
1677
1523
  }
1678
- .Layer-zones {
1524
+ ._Layer-zones_7rx04_82 {
1679
1525
  display: none;
1680
1526
  margin-inline-start: 12px;
1681
1527
  }
1682
- .Layer--isSelected > .Layer-zones,
1683
- .Layer--childIsSelected > .Layer-zones {
1528
+ ._Layer--isSelected_7rx04_61 > ._Layer-zones_7rx04_82,
1529
+ ._Layer--childIsSelected_7rx04_78 > ._Layer-zones_7rx04_82 {
1684
1530
  display: block;
1685
1531
  }
1686
- .Layer-zones > .LayerTree {
1532
+ ._Layer-zones_7rx04_82 > ._LayerTree_7rx04_1 {
1687
1533
  margin-inline-start: 12px;
1688
1534
  }
1689
- .Layer-title,
1690
- .LayerTree-zoneTitle {
1535
+ ._Layer-title_7rx04_96,
1536
+ ._LayerTree-zoneTitle_7rx04_11 {
1691
1537
  display: flex;
1692
1538
  gap: 8px;
1693
1539
  align-items: center;
1694
1540
  margin: 8px 4px;
1695
1541
  overflow-x: hidden;
1696
1542
  }
1697
- .Layer-name {
1543
+ ._Layer-name_7rx04_105 {
1698
1544
  overflow-x: hidden;
1699
1545
  text-overflow: ellipsis;
1700
1546
  white-space: nowrap;
1701
1547
  }
1702
- .Layer-icon {
1548
+ ._Layer-icon_7rx04_111 {
1703
1549
  color: var(--puck-color-rose-07);
1704
1550
  margin-top: 4px;
1705
1551
  }
1706
- .Layer-zoneIcon {
1552
+ ._Layer-zoneIcon_7rx04_116 {
1707
1553
  color: var(--puck-color-grey-08);
1708
1554
  margin-top: 4px;
1709
1555
  }
1710
1556
 
1711
- /* css-module:/home/runner/work/puck/puck/packages/core/components/ViewportControls/styles.module.css/#css-module-data */
1712
- .ViewportControls {
1713
- display: flex;
1714
- background: var(--puck-color-grey-11);
1557
+ /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Outline/styles.module.css/#css-module-data */
1558
+ ._Outline_cvjlj_1 {
1559
+ padding: 16px;
1560
+ height: 100%;
1561
+ overflow-y: auto;
1715
1562
  box-sizing: border-box;
1716
- border-inline-start: 2px solid var(--puck-color-grey-11);
1717
- justify-content: center;
1718
- gap: 8px;
1719
- min-width: 358px;
1720
- padding-bottom: 16px;
1721
- padding-inline-start: var(--puck-space-px);
1722
- padding-inline-end: var(--puck-space-px);
1723
- z-index: 1;
1724
- }
1725
- .ViewportControls-divider {
1726
- border-inline-end: 1px solid var(--puck-color-grey-09);
1727
- margin-inline-start: 8px;
1728
- margin-inline-end: 8px;
1729
- }
1730
- .ViewportControls-zoomSelect {
1731
- appearance: none;
1732
- background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23c3c3c3'><polygon points='0,0 100,0 50,50'/></svg>") no-repeat;
1733
- background-size: 10px;
1734
- background-position: calc(100% - 12px) calc(50% + 3px);
1735
- background-repeat: no-repeat;
1736
- border: 0;
1737
- font-size: var(--puck-font-size-xxxs);
1738
- padding: 0;
1739
- width: 96px;
1740
- }
1741
- .ViewportControls-zoomSelect:dir(rtl) {
1742
- background-position: 12px calc(50% + 3px);
1743
- }
1744
- .ViewportButton--isActive .ViewportButton-inner {
1745
- color: var(--puck-color-azure-04);
1746
1563
  }
1747
1564
 
1748
- /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Canvas/styles.module.css/#css-module-data */
1749
- .PuckCanvas {
1750
- background: var(--puck-color-grey-11);
1751
- display: flex;
1752
- grid-area: editor;
1753
- flex-direction: column;
1754
- padding: var(--puck-space-px);
1755
- overflow: auto;
1565
+ /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Layout/styles.module.css/#css-module-data */
1566
+ ._Puck_hv23j_19 {
1567
+ --puck-space-px: 16px;
1568
+ font-family: var(--puck-font-family);
1569
+ overflow-x: hidden;
1756
1570
  }
1757
- @media (min-width: 1198px) {
1758
- .PuckCanvas {
1759
- padding: calc(var(--puck-space-px) * 1.5);
1760
- padding-top: var(--puck-space-px);
1761
- }
1762
- .PuckCanvas:not(.PuckCanvas:has(.PuckCanvas-controls)) {
1763
- padding-top: calc(var(--puck-space-px) * 1.5);
1571
+ @media (min-width: 766px) {
1572
+ ._Puck_hv23j_19 {
1573
+ overflow-x: auto;
1764
1574
  }
1765
1575
  }
1766
- .PuckCanvas-inner {
1767
- display: flex;
1768
- height: 100%;
1769
- justify-content: center;
1770
- min-width: 358px;
1576
+ ._Puck-portal_hv23j_31 {
1771
1577
  position: relative;
1772
- width: 100%;
1578
+ z-index: 2;
1773
1579
  }
1774
- .PuckCanvas-root {
1775
- background: white;
1776
- border: 1px solid var(--puck-color-grey-09);
1777
- box-sizing: content-box;
1778
- min-width: 321px;
1779
- position: absolute;
1780
- pointer-events: none;
1781
- transform-origin: top;
1782
- top: 0;
1783
- bottom: 0;
1784
- opacity: 0;
1580
+ ._PuckLayout_hv23j_36 {
1581
+ height: 100%;
1785
1582
  }
1786
- @media (min-width: 1198px) {
1787
- .PuckCanvas-root {
1788
- min-width: unset;
1789
- }
1583
+ ._PuckLayout-inner_hv23j_40 {
1584
+ --puck-frame-width: auto;
1585
+ --puck-side-nav-width: min-content;
1586
+ --puck-side-bar-width: 0px;
1587
+ --puck-left-side-bar-width: var( --puck-user-left-side-bar-width, var(--puck-side-bar-width) );
1588
+ --puck-right-side-bar-width: var( --puck-user-right-side-bar-width, var(--puck-side-bar-width) );
1589
+ background-color: var(--puck-color-grey-12);
1590
+ display: grid;
1591
+ grid-template-areas: "header" "editor" "left" "right" "sidenav";
1592
+ grid-template-columns: var(--puck-frame-width);
1593
+ grid-template-rows: min-content auto 0 0 var(--puck-side-nav-width);
1594
+ height: 100%;
1595
+ position: relative;
1596
+ transition: grid-template-rows 150ms ease-in;
1597
+ z-index: 0;
1598
+ overflow: hidden;
1790
1599
  }
1791
- @media (prefers-reduced-motion: reduce) {
1792
- .PuckCanvas-root {
1793
- transition: none !important;
1600
+ @media (min-width: 638px) {
1601
+ ._PuckLayout-inner_hv23j_40 {
1602
+ --puck-side-nav-width: 68px;
1603
+ grid-template-areas: "header header header header" "sidenav left editor right";
1604
+ grid-template-columns: var(--puck-side-nav-width) 0 var(--puck-frame-width) 0;
1605
+ grid-template-rows: min-content auto;
1794
1606
  }
1795
1607
  }
1796
- .PuckCanvas--ready .PuckCanvas-root {
1797
- pointer-events: unset;
1798
- opacity: 1;
1799
- }
1800
- .PuckCanvas-loader {
1801
- align-items: center;
1802
- color: var(--puck-color-grey-06);
1803
- display: flex;
1804
- height: 100%;
1805
- justify-content: center;
1806
- transition: opacity 250ms ease-out;
1807
- opacity: 0;
1608
+ ._PuckLayout--mounted_hv23j_73 ._PuckLayout-inner_hv23j_40 {
1609
+ --puck-side-bar-width: 186px;
1808
1610
  }
1809
- .PuckCanvas--showLoader .PuckCanvas-loader {
1810
- opacity: 1;
1611
+ ._PuckLayout--mobilePanelHeightToggle_hv23j_77._PuckLayout--leftSideBarVisible_hv23j_77 ._PuckLayout-inner_hv23j_40 {
1612
+ grid-template-rows: 0 auto 30% 0 var(--puck-side-nav-width);
1811
1613
  }
1812
- .PuckCanvas--showLoader.PuckCanvas--ready .PuckCanvas-loader {
1813
- opacity: 0;
1814
- height: 0;
1815
- transition: none;
1614
+ ._PuckLayout--mobilePanelHeightToggle_hv23j_77._PuckLayout--leftSideBarVisible_hv23j_77._PuckLayout--isExpanded_hv23j_83 ._PuckLayout-inner_hv23j_40 {
1615
+ grid-template-rows: 0 auto 55% 0 var(--puck-side-nav-width);
1816
1616
  }
1817
-
1818
- /* css-module:/home/runner/work/puck/puck/packages/core/components/MenuBar/styles.module.css/#css-module-data */
1819
- .MenuBar {
1820
- background-color: var(--puck-color-white);
1821
- border-bottom: 1px solid var(--puck-color-grey-09);
1822
- display: none;
1823
- left: 0;
1824
- margin-top: 1px;
1825
- padding: 8px 16px;
1826
- position: absolute;
1827
- right: 0;
1828
- top: 100%;
1829
- z-index: 2;
1617
+ @media (min-width: 638px) {
1618
+ ._PuckLayout--mobilePanelHeightToggle_hv23j_77._PuckLayout--leftSideBarVisible_hv23j_77 ._PuckLayout-inner_hv23j_40 {
1619
+ grid-template-columns: var(--puck-side-nav-width) var(--puck-left-side-bar-width) var( --puck-frame-width ) 0;
1620
+ grid-template-rows: min-content auto;
1621
+ }
1830
1622
  }
1831
- .MenuBar--menuOpen {
1832
- display: block;
1623
+ ._PuckLayout--mobilePanelHeightMinContent_hv23j_101._PuckLayout--leftSideBarVisible_hv23j_77 ._PuckLayout-inner_hv23j_40,
1624
+ ._PuckLayout--mobilePanelHeightMinContent_hv23j_101._PuckLayout--leftSideBarVisible_hv23j_77._PuckLayout--isExpanded_hv23j_83 ._PuckLayout-inner_hv23j_40 {
1625
+ grid-template-rows: 0 auto min-content 0 var(--puck-side-nav-width);
1833
1626
  }
1834
1627
  @media (min-width: 638px) {
1835
- .MenuBar {
1836
- border: none;
1837
- display: block;
1838
- margin-top: 0;
1839
- overflow-y: visible;
1840
- padding: 0;
1841
- position: static;
1628
+ ._PuckLayout--mobilePanelHeightToggle_hv23j_77._PuckLayout--leftSideBarVisible_hv23j_77 ._PuckLayout-inner_hv23j_40,
1629
+ ._PuckLayout--mobilePanelHeightToggle_hv23j_77._PuckLayout--leftSideBarVisible_hv23j_77._PuckLayout--isExpanded_hv23j_83 ._PuckLayout-inner_hv23j_40,
1630
+ ._PuckLayout--mobilePanelHeightMinContent_hv23j_101._PuckLayout--leftSideBarVisible_hv23j_77 ._PuckLayout-inner_hv23j_40,
1631
+ ._PuckLayout--mobilePanelHeightMinContent_hv23j_101._PuckLayout--leftSideBarVisible_hv23j_77._PuckLayout--isExpanded_hv23j_83 ._PuckLayout-inner_hv23j_40 {
1632
+ grid-template-columns: var(--puck-side-nav-width) var(--puck-left-side-bar-width) var( --puck-frame-width ) 0;
1633
+ grid-template-rows: min-content auto;
1842
1634
  }
1843
1635
  }
1844
- .MenuBar-inner {
1845
- align-items: center;
1846
- display: flex;
1847
- flex-wrap: wrap;
1848
- gap: 8px 16px;
1849
- justify-content: flex-end;
1636
+ @media (min-width: 638px) {
1637
+ ._PuckLayout--rightSideBarVisible_hv23j_128 ._PuckLayout-inner_hv23j_40 {
1638
+ grid-template-columns: var(--puck-side-nav-width) 0 var(--puck-frame-width) var(--puck-right-side-bar-width);
1639
+ }
1850
1640
  }
1851
1641
  @media (min-width: 638px) {
1852
- .MenuBar-inner {
1853
- display: flex;
1854
- flex-direction: row;
1855
- flex-wrap: nowrap;
1642
+ ._PuckLayout--leftSideBarVisible_hv23j_77._PuckLayout--rightSideBarVisible_hv23j_128 ._PuckLayout-inner_hv23j_40 {
1643
+ grid-template-columns: var(--puck-side-nav-width) var(--puck-left-side-bar-width) var( --puck-frame-width ) var(--puck-right-side-bar-width);
1856
1644
  }
1857
1645
  }
1858
- .MenuBar-history {
1859
- display: flex;
1646
+ @media (min-width: 458px) {
1647
+ ._PuckLayout-mounted_hv23j_147 ._PuckLayout-inner_hv23j_40 {
1648
+ --puck-frame-width: minmax(266px, auto);
1649
+ }
1860
1650
  }
1861
-
1862
- /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Header/styles.module.css/#css-module-data */
1863
- .PuckHeader {
1864
- background: var(--puck-color-white);
1865
- border-bottom: 1px solid var(--puck-color-grey-09);
1651
+ @media (min-width: 638px) {
1652
+ ._PuckLayout_hv23j_36 ._PuckLayout-inner_hv23j_40 {
1653
+ --puck-side-bar-width: minmax(186px, 250px);
1654
+ }
1655
+ }
1656
+ @media (min-width: 766px) {
1657
+ ._PuckLayout_hv23j_36 ._PuckLayout-inner_hv23j_40 {
1658
+ --puck-frame-width: auto;
1659
+ }
1660
+ }
1661
+ @media (min-width: 990px) {
1662
+ ._PuckLayout_hv23j_36 ._PuckLayout-inner_hv23j_40 {
1663
+ --puck-side-bar-width: 256px;
1664
+ }
1665
+ }
1666
+ @media (min-width: 1198px) {
1667
+ ._PuckLayout_hv23j_36 ._PuckLayout-inner_hv23j_40 {
1668
+ --puck-side-bar-width: 274px;
1669
+ }
1670
+ }
1671
+ @media (min-width: 1398px) {
1672
+ ._PuckLayout_hv23j_36 ._PuckLayout-inner_hv23j_40 {
1673
+ --puck-side-bar-width: 290px;
1674
+ }
1675
+ }
1676
+ @media (min-width: 1598px) {
1677
+ ._PuckLayout_hv23j_36 ._PuckLayout-inner_hv23j_40 {
1678
+ --puck-side-bar-width: 320px;
1679
+ }
1680
+ }
1681
+ ._PuckLayout-nav_hv23j_188 {
1682
+ border-top: 1px solid var(--puck-color-grey-09);
1683
+ background-color: var(--puck-color-grey-12);
1684
+ grid-area: sidenav;
1685
+ overflow: hidden;
1686
+ width: 100%;
1687
+ }
1688
+ @media (min-width: 638px) {
1689
+ ._PuckLayout-nav_hv23j_188 {
1690
+ border-top: 0;
1691
+ border-right: 1px solid var(--puck-color-grey-09);
1692
+ box-sizing: border-box;
1693
+ }
1694
+ }
1695
+ ._PuckLayout-header_hv23j_204 {
1696
+ grid-area: header;
1697
+ }
1698
+ ._PuckLayout--leftSideBarVisible_hv23j_77 ._PuckLayout-header_hv23j_204 {
1699
+ overflow: hidden;
1700
+ }
1701
+ @media (min-width: 638px) {
1702
+ ._PuckLayout--leftSideBarVisible_hv23j_77 ._PuckLayout-header_hv23j_204 {
1703
+ overflow: auto;
1704
+ }
1705
+ }
1706
+ ._PuckPluginTab_hv23j_218 {
1707
+ display: none;
1708
+ flex-grow: 1;
1709
+ overflow: hidden;
1710
+ }
1711
+ ._PuckPluginTab--visible_hv23j_224 {
1712
+ display: flex;
1713
+ flex-direction: column;
1714
+ }
1715
+ ._PuckPluginTab-body_hv23j_229 {
1716
+ flex-grow: 1;
1717
+ overflow: hidden;
1718
+ }
1719
+
1720
+ /* css-module:/home/runner/work/puck/puck/packages/core/components/MenuBar/styles.module.css/#css-module-data */
1721
+ ._MenuBar_8pf8c_1 {
1722
+ background-color: var(--puck-color-white);
1723
+ border-bottom: 1px solid var(--puck-color-grey-09);
1724
+ display: none;
1725
+ left: 0;
1726
+ margin-top: 1px;
1727
+ padding: 8px 16px;
1728
+ position: absolute;
1729
+ right: 0;
1730
+ top: 100%;
1731
+ z-index: 2;
1732
+ }
1733
+ ._MenuBar--menuOpen_8pf8c_14 {
1734
+ display: block;
1735
+ }
1736
+ @media (min-width: 638px) {
1737
+ ._MenuBar_8pf8c_1 {
1738
+ border: none;
1739
+ display: block;
1740
+ margin-top: 0;
1741
+ overflow-y: visible;
1742
+ padding: 0;
1743
+ position: static;
1744
+ }
1745
+ }
1746
+ ._MenuBar-inner_8pf8c_29 {
1747
+ align-items: center;
1748
+ display: flex;
1749
+ flex-wrap: wrap;
1750
+ gap: 8px 16px;
1751
+ justify-content: flex-end;
1752
+ }
1753
+ @media (min-width: 638px) {
1754
+ ._MenuBar-inner_8pf8c_29 {
1755
+ display: flex;
1756
+ flex-direction: row;
1757
+ flex-wrap: nowrap;
1758
+ }
1759
+ }
1760
+ ._MenuBar-history_8pf8c_45 {
1761
+ display: flex;
1762
+ }
1763
+
1764
+ /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Header/styles.module.css/#css-module-data */
1765
+ ._PuckHeader_1bhmt_1 {
1766
+ background: var(--puck-color-white);
1767
+ border-bottom: 1px solid var(--puck-color-grey-09);
1866
1768
  color: var(--puck-color-black);
1867
1769
  grid-area: header;
1868
1770
  position: relative;
1869
1771
  max-width: 100vw;
1870
1772
  }
1871
- .PuckHeader-inner {
1773
+ @media (min-width: 638px) {
1774
+ ._PuckHeader_1bhmt_1 {
1775
+ padding-left: 67px;
1776
+ }
1777
+ }
1778
+ ._PuckHeader-inner_1bhmt_16 {
1872
1779
  align-items: end;
1873
1780
  display: grid;
1874
1781
  gap: var(--puck-space-px);
@@ -1877,46 +1784,375 @@ body:has(.DropZone--isAnimating:empty) [data-puck-overlay] {
1877
1784
  grid-template-rows: auto;
1878
1785
  padding: var(--puck-space-px);
1879
1786
  }
1880
- .PuckHeader-toggle {
1787
+ @media (min-width: 638px) {
1788
+ ._PuckHeader-inner_1bhmt_16 {
1789
+ border-left: 1px solid var(--puck-color-grey-09);
1790
+ }
1791
+ }
1792
+ ._PuckHeader-toggle_1bhmt_32 {
1881
1793
  color: var(--puck-color-grey-05);
1882
1794
  display: flex;
1883
1795
  margin-inline-start: -4px;
1884
1796
  padding-top: 2px;
1885
1797
  }
1886
- .PuckHeader--rightSideBarVisible .PuckHeader-rightSideBarToggle,
1887
- .PuckHeader--leftSideBarVisible .PuckHeader-leftSideBarToggle {
1798
+ ._PuckHeader--rightSideBarVisible_1bhmt_39 ._PuckHeader-rightSideBarToggle_1bhmt_39,
1799
+ ._PuckHeader--leftSideBarVisible_1bhmt_40 ._PuckHeader-leftSideBarToggle_1bhmt_40 {
1888
1800
  color: var(--puck-color-black);
1889
1801
  }
1890
- .PuckHeader-title {
1802
+ ._PuckHeader-rightSideBarToggle_1bhmt_39,
1803
+ ._PuckHeader-leftSideBarToggle_1bhmt_40 {
1804
+ display: none;
1805
+ }
1806
+ @media (min-width: 638px) {
1807
+ ._PuckHeader-rightSideBarToggle_1bhmt_39,
1808
+ ._PuckHeader-leftSideBarToggle_1bhmt_40 {
1809
+ display: block;
1810
+ }
1811
+ }
1812
+ ._PuckHeader-title_1bhmt_56 {
1891
1813
  align-self: center;
1892
1814
  }
1893
- .PuckHeader-path {
1815
+ ._PuckHeader-path_1bhmt_60 {
1894
1816
  font-family: var(--puck-font-family-monospaced);
1895
1817
  font-size: var(--puck-font-size-xxs);
1896
1818
  font-weight: normal;
1897
1819
  word-break: break-all;
1898
1820
  }
1899
- .PuckHeader-tools {
1821
+ ._PuckHeader-tools_1bhmt_67 {
1900
1822
  display: flex;
1901
1823
  gap: 16px;
1902
1824
  justify-content: flex-end;
1903
1825
  }
1904
- .PuckHeader-menuButton {
1826
+ ._PuckHeader-menuButton_1bhmt_73 {
1905
1827
  color: var(--puck-color-grey-05);
1906
1828
  margin-inline-start: -4px;
1907
1829
  }
1908
- .PuckHeader--menuOpen .PuckHeader-menuButton {
1830
+ ._PuckHeader--menuOpen_1bhmt_78 ._PuckHeader-menuButton_1bhmt_73 {
1909
1831
  color: var(--puck-color-black);
1910
1832
  }
1911
1833
  @media (min-width: 638px) {
1912
- .PuckHeader-menuButton {
1834
+ ._PuckHeader-menuButton_1bhmt_73 {
1913
1835
  display: none;
1914
1836
  }
1915
1837
  }
1916
1838
 
1839
+ /* css-module:/home/runner/work/puck/puck/packages/core/components/SidebarSection/styles.module.css/#css-module-data */
1840
+ ._SidebarSection_8boj8_1 {
1841
+ display: flex;
1842
+ position: relative;
1843
+ flex-direction: column;
1844
+ color: var(--puck-color-black);
1845
+ }
1846
+ ._SidebarSection_8boj8_1:last-of-type {
1847
+ flex-grow: 1;
1848
+ }
1849
+ ._SidebarSection-title_8boj8_12 {
1850
+ background: var(--puck-color-white);
1851
+ padding: 16px;
1852
+ border-bottom: 1px solid var(--puck-color-grey-09);
1853
+ border-top: 1px solid var(--puck-color-grey-09);
1854
+ overflow-x: auto;
1855
+ }
1856
+ ._SidebarSection--noBorderTop_8boj8_20 > ._SidebarSection-title_8boj8_12 {
1857
+ border-top: 0px;
1858
+ }
1859
+ ._SidebarSection-content_8boj8_24 {
1860
+ padding: 16px;
1861
+ }
1862
+ ._SidebarSection--noPadding_8boj8_28 > ._SidebarSection-content_8boj8_24 {
1863
+ padding: 0px;
1864
+ }
1865
+ ._SidebarSection--noPadding_8boj8_28 > ._SidebarSection-content_8boj8_24:last-child {
1866
+ padding-bottom: 4px;
1867
+ }
1868
+ ._SidebarSection_8boj8_1:last-of-type ._SidebarSection-content_8boj8_24 {
1869
+ border-bottom: none;
1870
+ flex-grow: 1;
1871
+ }
1872
+ ._SidebarSection-breadcrumbLabel_8boj8_41 {
1873
+ background: none;
1874
+ border: 0;
1875
+ border-radius: 2px;
1876
+ color: var(--puck-color-azure-04);
1877
+ cursor: pointer;
1878
+ font: inherit;
1879
+ flex-shrink: 0;
1880
+ padding: 0;
1881
+ transition: color 50ms ease-in;
1882
+ }
1883
+ ._SidebarSection-breadcrumbLabel_8boj8_41:focus-visible {
1884
+ outline: 2px solid var(--puck-color-azure-05);
1885
+ outline-offset: 2px;
1886
+ }
1887
+ @media (hover: hover) and (pointer: fine) {
1888
+ ._SidebarSection-breadcrumbLabel_8boj8_41:hover {
1889
+ color: var(--puck-color-azure-03);
1890
+ transition: none;
1891
+ }
1892
+ }
1893
+ ._SidebarSection-breadcrumbLabel_8boj8_41:active {
1894
+ color: var(--puck-color-azure-02);
1895
+ transition: none;
1896
+ }
1897
+ ._SidebarSection-breadcrumbs_8boj8_70 {
1898
+ align-items: center;
1899
+ display: flex;
1900
+ gap: 4px;
1901
+ }
1902
+ ._SidebarSection-breadcrumb_8boj8_41 {
1903
+ align-items: center;
1904
+ display: flex;
1905
+ gap: 4px;
1906
+ }
1907
+ ._SidebarSection-heading_8boj8_82 {
1908
+ padding-inline-end: 16px;
1909
+ }
1910
+ ._SidebarSection-loadingOverlay_8boj8_86 {
1911
+ background: var(--puck-color-white);
1912
+ display: flex;
1913
+ justify-content: center;
1914
+ align-items: center;
1915
+ height: 100%;
1916
+ width: 100%;
1917
+ top: 0;
1918
+ position: absolute;
1919
+ z-index: 1;
1920
+ pointer-events: all;
1921
+ box-sizing: border-box;
1922
+ opacity: 0.8;
1923
+ }
1924
+
1925
+ /* css-module:/home/runner/work/puck/puck/packages/core/components/Breadcrumbs/styles.module.css/#css-module-data */
1926
+ ._Breadcrumbs_1c9yh_1 {
1927
+ align-items: center;
1928
+ display: flex;
1929
+ gap: 4px;
1930
+ }
1931
+ ._Breadcrumbs-breadcrumbLabel_1c9yh_7 {
1932
+ background: none;
1933
+ border: 0;
1934
+ border-radius: 2px;
1935
+ color: var(--puck-color-azure-04);
1936
+ cursor: pointer;
1937
+ font: inherit;
1938
+ flex-shrink: 0;
1939
+ padding: 0;
1940
+ transition: color 50ms ease-in;
1941
+ }
1942
+ ._Breadcrumbs-breadcrumbLabel_1c9yh_7:focus-visible {
1943
+ outline: 2px solid var(--puck-color-azure-05);
1944
+ outline-offset: 2px;
1945
+ }
1946
+ @media (hover: hover) and (pointer: fine) {
1947
+ ._Breadcrumbs-breadcrumbLabel_1c9yh_7:hover {
1948
+ color: var(--puck-color-azure-03);
1949
+ transition: none;
1950
+ }
1951
+ }
1952
+ ._Breadcrumbs-breadcrumbLabel_1c9yh_7:active {
1953
+ color: var(--puck-color-azure-02);
1954
+ transition: none;
1955
+ }
1956
+ ._Breadcrumbs-breadcrumb_1c9yh_7 {
1957
+ align-items: center;
1958
+ display: flex;
1959
+ gap: 4px;
1960
+ }
1961
+
1962
+ /* css-module:/home/runner/work/puck/puck/packages/core/components/ViewportControls/styles.module.css/#css-module-data */
1963
+ ._ViewportControls_e3unb_1 {
1964
+ position: relative;
1965
+ }
1966
+ ._ViewportControls--fullScreen_e3unb_5 {
1967
+ border-radius: 32px;
1968
+ display: flex;
1969
+ position: absolute;
1970
+ bottom: 12px;
1971
+ right: 12px;
1972
+ overflow: hidden;
1973
+ }
1974
+ ._ViewportControls-toggleButton_e3unb_14 {
1975
+ display: none;
1976
+ }
1977
+ ._ViewportControls--fullScreen_e3unb_5 ._ViewportControls-toggleButton_e3unb_14 {
1978
+ align-items: center;
1979
+ background-color: var(--puck-color-grey-02);
1980
+ border: 1px solid var(--puck-color-grey-04);
1981
+ border-radius: 30px;
1982
+ cursor: pointer;
1983
+ color: var(--puck-color-grey-11);
1984
+ display: flex;
1985
+ justify-content: center;
1986
+ width: 42px;
1987
+ height: 42px;
1988
+ z-index: 1;
1989
+ }
1990
+ ._ViewportControls--fullScreen_e3unb_5 ._ViewportControls-toggleButton_e3unb_14:hover {
1991
+ background-color: var(--puck-color-grey-02);
1992
+ border: 1px solid var(--puck-color-azure-04);
1993
+ color: var(--puck-color-azure-07);
1994
+ }
1995
+ ._ViewportControls--isExpanded_e3unb_38 ._ViewportControls-toggleButton_e3unb_14 {
1996
+ background-color: var(--puck-color-grey-03);
1997
+ }
1998
+ ._ViewportControls-actions_e3unb_42 {
1999
+ display: flex;
2000
+ }
2001
+ ._ViewportControls-actionsInner_e3unb_46 {
2002
+ display: flex;
2003
+ box-sizing: border-box;
2004
+ justify-content: center;
2005
+ margin-left: auto;
2006
+ margin-right: auto;
2007
+ z-index: 0;
2008
+ overflow: hidden;
2009
+ }
2010
+ ._ViewportControls--fullScreen_e3unb_5 ._ViewportControls-actionsInner_e3unb_46 {
2011
+ background: var(--puck-color-grey-11);
2012
+ border: 1px solid var(--puck-color-grey-09);
2013
+ border-radius: 30px;
2014
+ margin-left: none;
2015
+ margin-right: none;
2016
+ padding-right: 42px;
2017
+ }
2018
+ ._ViewportControls--fullScreen_e3unb_5 ._ViewportControls-actionsInner_e3unb_46 {
2019
+ transform: translateX(100%);
2020
+ transition: transform 150ms ease-in-out;
2021
+ }
2022
+ ._ViewportControls--fullScreen_e3unb_5._ViewportControls--isExpanded_e3unb_38 ._ViewportControls-actionsInner_e3unb_46 {
2023
+ transform: translateX(42px);
2024
+ }
2025
+ ._ViewportControls-divider_e3unb_75 {
2026
+ border-inline-end: 1px solid var(--puck-color-grey-09);
2027
+ margin-bottom: 8px;
2028
+ margin-top: 8px;
2029
+ }
2030
+ ._ViewportControls-zoomSelect_e3unb_81 {
2031
+ appearance: none;
2032
+ background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23c3c3c3'><polygon points='0,0 100,0 50,50'/></svg>") no-repeat;
2033
+ background-size: 10px;
2034
+ background-position: calc(100% - 12px) calc(50% + 3px);
2035
+ background-repeat: no-repeat;
2036
+ border: 0;
2037
+ font-size: var(--puck-font-size-xxxs);
2038
+ padding: 0;
2039
+ padding-left: 8px;
2040
+ width: 96px;
2041
+ }
2042
+ ._ViewportControls--fullScreen_e3unb_5 ._ViewportControls-zoom_e3unb_81 {
2043
+ display: none;
2044
+ }
2045
+ @media (min-width: 638px) {
2046
+ ._ViewportControls-zoom_e3unb_81,
2047
+ ._ViewportControls--fullScreen_e3unb_5 ._ViewportControls-zoom_e3unb_81 {
2048
+ display: flex;
2049
+ justify-content: center;
2050
+ }
2051
+ }
2052
+ ._ViewportControls-zoomSelect_e3unb_81:dir(rtl) {
2053
+ background-position: 12px calc(50% + 3px);
2054
+ }
2055
+ ._ViewportButton-inner_e3unb_111 {
2056
+ align-items: center;
2057
+ display: flex;
2058
+ justify-content: center;
2059
+ height: 32px;
2060
+ width: 32px;
2061
+ }
2062
+ ._ViewportButton--isActive_e3unb_119 ._ViewportButton-inner_e3unb_111 {
2063
+ color: var(--puck-color-azure-04);
2064
+ }
2065
+
2066
+ /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Canvas/styles.module.css/#css-module-data */
2067
+ ._PuckCanvas_t6s9b_1 {
2068
+ background: var(--puck-color-grey-11);
2069
+ display: flex;
2070
+ grid-area: editor;
2071
+ flex-direction: column;
2072
+ padding: var(--puck-space-px);
2073
+ position: relative;
2074
+ overflow: auto;
2075
+ }
2076
+ @media (min-width: 1198px) {
2077
+ ._PuckCanvas_t6s9b_1 {
2078
+ padding: calc(var(--puck-space-px) * 1.5);
2079
+ padding-top: calc(var(--puck-space-px) * 0.5);
2080
+ }
2081
+ ._PuckCanvas_t6s9b_1:not(._PuckCanvas_t6s9b_1:has(._PuckCanvas-controls_t6s9b_17)) {
2082
+ padding-top: calc(var(--puck-space-px) * 1.5);
2083
+ }
2084
+ }
2085
+ ._PuckCanvas--fullScreen_t6s9b_22 {
2086
+ padding: 0;
2087
+ overflow: hidden;
2088
+ }
2089
+ @media (min-width: 1198px) {
2090
+ ._PuckCanvas--fullScreen_t6s9b_22 {
2091
+ padding: 0;
2092
+ }
2093
+ }
2094
+ ._PuckCanvas-inner_t6s9b_33 {
2095
+ display: flex;
2096
+ height: 100%;
2097
+ justify-content: center;
2098
+ min-width: 288px;
2099
+ position: relative;
2100
+ width: 100%;
2101
+ }
2102
+ ._PuckCanvas-root_t6s9b_42 {
2103
+ background: white;
2104
+ outline: 1px solid var(--puck-color-grey-09);
2105
+ box-sizing: content-box;
2106
+ min-width: 321px;
2107
+ position: absolute;
2108
+ pointer-events: none;
2109
+ transform-origin: top;
2110
+ top: 0;
2111
+ bottom: 0;
2112
+ opacity: 0;
2113
+ }
2114
+ @media (min-width: 1198px) {
2115
+ ._PuckCanvas-root_t6s9b_42 {
2116
+ min-width: unset;
2117
+ }
2118
+ }
2119
+ @media (prefers-reduced-motion: reduce) {
2120
+ ._PuckCanvas-root_t6s9b_42 {
2121
+ transition: none !important;
2122
+ }
2123
+ }
2124
+ ._PuckCanvas--ready_t6s9b_67 ._PuckCanvas-root_t6s9b_42 {
2125
+ pointer-events: unset;
2126
+ opacity: 1;
2127
+ }
2128
+ ._PuckCanvas-loader_t6s9b_72 {
2129
+ align-items: center;
2130
+ color: var(--puck-color-grey-06);
2131
+ display: flex;
2132
+ height: 100%;
2133
+ justify-content: center;
2134
+ transition: opacity 250ms ease-out;
2135
+ opacity: 0;
2136
+ }
2137
+ ._PuckCanvas--showLoader_t6s9b_82 ._PuckCanvas-loader_t6s9b_72 {
2138
+ opacity: 1;
2139
+ }
2140
+ ._PuckCanvas--showLoader_t6s9b_82._PuckCanvas--ready_t6s9b_67 ._PuckCanvas-loader_t6s9b_72 {
2141
+ opacity: 0;
2142
+ height: 0;
2143
+ transition: none;
2144
+ }
2145
+ ._PuckCanvas-controls_t6s9b_17 {
2146
+ padding-bottom: calc(var(--puck-space-px) * 0.5);
2147
+ }
2148
+ ._PuckCanvas--fullScreen_t6s9b_22 ._PuckCanvas-controls_t6s9b_17 {
2149
+ padding-bottom: 0;
2150
+ z-index: 1;
2151
+ }
2152
+
1917
2153
  /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/ResizeHandle/styles.module.css/#css-module-data */
1918
2154
  @media (min-width: 766px) {
1919
- .ResizeHandle {
2155
+ ._ResizeHandle_144bf_2 {
1920
2156
  position: absolute;
1921
2157
  width: 5px;
1922
2158
  height: 100%;
@@ -1925,13 +2161,13 @@ body:has(.DropZone--isAnimating:empty) [data-puck-overlay] {
1925
2161
  background: transparent;
1926
2162
  top: 0;
1927
2163
  }
1928
- .ResizeHandle:hover {
2164
+ ._ResizeHandle_144bf_2:hover {
1929
2165
  background: rgba(0, 0, 0, 0.1);
1930
2166
  }
1931
- .ResizeHandle--left {
2167
+ ._ResizeHandle--left_144bf_16 {
1932
2168
  right: -3px;
1933
2169
  }
1934
- .ResizeHandle--right {
2170
+ ._ResizeHandle--right_144bf_20 {
1935
2171
  left: -3px;
1936
2172
  }
1937
2173
  }
@@ -1948,31 +2184,173 @@ body:has(.DropZone--isAnimating:empty) [data-puck-overlay] {
1948
2184
  }
1949
2185
 
1950
2186
  /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Sidebar/styles.module.css/#css-module-data */
1951
- .Sidebar {
2187
+ ._Sidebar_o396p_1 {
2188
+ border-block-start: 1px solid var(--puck-color-grey-09);
1952
2189
  position: relative;
1953
- display: flex;
2190
+ display: none;
1954
2191
  flex-direction: column;
1955
2192
  overflow-y: auto;
1956
2193
  }
1957
- .Sidebar--left {
2194
+ ._Sidebar--isVisible_o396p_9 {
2195
+ display: flex;
2196
+ }
2197
+ ._Sidebar--left_o396p_13 {
1958
2198
  background: var(--puck-color-grey-12);
1959
- border-inline-end: 1px solid var(--puck-color-grey-09);
1960
2199
  grid-area: left;
1961
2200
  }
1962
- .Sidebar--right {
2201
+ @media (min-width: 766px) {
2202
+ ._Sidebar--left_o396p_13 {
2203
+ border-block-start: 0;
2204
+ border-inline-end: 1px solid var(--puck-color-grey-09);
2205
+ }
2206
+ }
2207
+ ._Sidebar--right_o396p_25 {
1963
2208
  background: var(--puck-color-white);
1964
- border-inline-start: 1px solid var(--puck-color-grey-09);
1965
2209
  grid-area: right;
1966
2210
  }
1967
- .Sidebar-resizeHandle {
2211
+ @media (min-width: 766px) {
2212
+ ._Sidebar--right_o396p_25 {
2213
+ border-block-start: 0;
2214
+ border-inline-start: 1px solid var(--puck-color-grey-09);
2215
+ }
2216
+ }
2217
+ ._Sidebar-resizeHandle_o396p_37 {
1968
2218
  position: absolute;
1969
2219
  height: 100%;
1970
2220
  }
1971
- .Sidebar--left + .Sidebar-resizeHandle {
2221
+ ._Sidebar--left_o396p_13 + ._Sidebar-resizeHandle_o396p_37 {
1972
2222
  grid-area: left;
1973
2223
  justify-self: end;
1974
2224
  }
1975
- .Sidebar--right + .Sidebar-resizeHandle {
2225
+ ._Sidebar--right_o396p_25 + ._Sidebar-resizeHandle_o396p_37 {
1976
2226
  grid-area: right;
1977
2227
  justify-self: start;
1978
2228
  }
2229
+
2230
+ /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Nav/styles.module.css/#css-module-data */
2231
+ ._Nav_3nnxc_1 {
2232
+ display: flex;
2233
+ }
2234
+ ._Nav-list_3nnxc_5 {
2235
+ display: flex;
2236
+ list-style: none;
2237
+ margin: 0;
2238
+ padding: 0;
2239
+ overflow-x: auto;
2240
+ gap: 8px;
2241
+ }
2242
+ @media (min-width: 638px) {
2243
+ ._Nav-list_3nnxc_5 {
2244
+ padding-top: 32px;
2245
+ flex-direction: column;
2246
+ gap: 16px;
2247
+ width: 100%;
2248
+ }
2249
+ }
2250
+ ._Nav-mobileActions_3nnxc_23 {
2251
+ align-items: center;
2252
+ display: flex;
2253
+ justify-content: center;
2254
+ margin-inline-start: auto;
2255
+ padding: 4px 16px;
2256
+ border-inline-start: 1px solid var(--puck-color-grey-09);
2257
+ }
2258
+ @media (min-width: 638px) {
2259
+ ._Nav-mobileActions_3nnxc_23 {
2260
+ display: none;
2261
+ }
2262
+ }
2263
+ ._NavItem-link_3nnxc_38 {
2264
+ align-items: center;
2265
+ color: var(--puck-color-grey-03);
2266
+ display: flex;
2267
+ gap: 8px;
2268
+ text-decoration: none;
2269
+ cursor: pointer;
2270
+ border-radius: 4px;
2271
+ padding: 8px 4px;
2272
+ width: 64px;
2273
+ box-sizing: border-box;
2274
+ }
2275
+ @media (min-width: 638px) {
2276
+ ._NavItem-link_3nnxc_38 {
2277
+ width: auto;
2278
+ }
2279
+ }
2280
+ ._NavItem_3nnxc_38:first-of-type {
2281
+ padding-left: 16px;
2282
+ }
2283
+ ._NavItem_3nnxc_38:last-of-type {
2284
+ padding-right: 16px;
2285
+ }
2286
+ @media (min-width: 638px) {
2287
+ ._NavItem_3nnxc_38:first-of-type,
2288
+ ._NavItem_3nnxc_38:last-of-type {
2289
+ padding: 0;
2290
+ }
2291
+ }
2292
+ ._NavItem-link_3nnxc_38 {
2293
+ border-top: 4px solid transparent;
2294
+ border-bottom: 4px solid transparent;
2295
+ border-radius: 0;
2296
+ flex-direction: column;
2297
+ font-size: var(--puck-font-size-xxxs);
2298
+ }
2299
+ @media (min-width: 638px) {
2300
+ ._NavItem-link_3nnxc_38 {
2301
+ border: 0;
2302
+ border-left: 4px solid transparent;
2303
+ border-right: 4px solid transparent;
2304
+ }
2305
+ }
2306
+ ._NavItem-linkIcon_3nnxc_88 {
2307
+ height: 24px;
2308
+ width: 24px;
2309
+ }
2310
+ ._NavItem--active_3nnxc_93 > ._NavItem-link_3nnxc_38 {
2311
+ background-color: var(--puck-color-azure-10);
2312
+ color: var(--puck-color-azure-04);
2313
+ font-weight: 600;
2314
+ }
2315
+ ._NavItem--active_3nnxc_93 > ._NavItem-link_3nnxc_38 {
2316
+ background-color: transparent;
2317
+ border-top-color: var(--puck-color-azure-04);
2318
+ border-top-right-radius: 0;
2319
+ border-bottom-right-radius: 0;
2320
+ font-weight: 600;
2321
+ }
2322
+ @media (min-width: 638px) {
2323
+ ._NavItem--active_3nnxc_93 > ._NavItem-link_3nnxc_38 {
2324
+ border-top-color: transparent;
2325
+ border-right-color: var(--puck-color-azure-04);
2326
+ }
2327
+ }
2328
+ ._NavItem_3nnxc_38:not(._NavItem--active_3nnxc_93) > ._NavItem-link_3nnxc_38:hover {
2329
+ background-color: var(--puck-color-azure-11);
2330
+ color: var(--puck-color-azure-04);
2331
+ }
2332
+ @media (min-width: 638px) {
2333
+ ._NavItem--mobileOnly_3nnxc_120 {
2334
+ display: none;
2335
+ }
2336
+ }
2337
+
2338
+ /* css-module:/home/runner/work/puck/puck/packages/core/plugins/fields/styles.module.css/#css-module-data */
2339
+ ._FieldsPlugin_nd930_1 {
2340
+ background: white;
2341
+ height: 100%;
2342
+ overflow-y: auto;
2343
+ }
2344
+ ._FieldsPlugin-header_nd930_7 {
2345
+ border-bottom: 1px solid var(--puck-color-grey-09);
2346
+ font-weight: 600;
2347
+ padding-bottom: 8px;
2348
+ padding-left: 16px;
2349
+ padding-right: 16px;
2350
+ padding-top: 8px;
2351
+ }
2352
+ @media (min-width: 638px) {
2353
+ ._FieldsPlugin-header_nd930_7 {
2354
+ padding: 16px;
2355
+ }
2356
+ }