@measured/puck 0.20.0-canary.f768aab9 → 0.20.1-canary.d7404af9

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.
package/dist/index.css CHANGED
@@ -134,7 +134,7 @@
134
134
  }
135
135
  }
136
136
 
137
- /* styles.css */
137
+ /* bundle/core.css */
138
138
  #frame-root {
139
139
  height: 1px;
140
140
  min-height: 100vh;
@@ -144,8 +144,10 @@
144
144
  z-index: 0;
145
145
  }
146
146
 
147
+ /* bundle/index.css */
148
+
147
149
  /* css-module:/home/runner/work/puck/puck/packages/core/components/ActionBar/styles.module.css/#css-module-data */
148
- ._ActionBar_rvadt_1 {
150
+ .ActionBar {
149
151
  align-items: center;
150
152
  cursor: default;
151
153
  display: flex;
@@ -161,7 +163,7 @@
161
163
  font-family: var(--puck-font-family);
162
164
  min-height: 26px;
163
165
  }
164
- ._ActionBar-label_rvadt_18 {
166
+ .ActionBar-label {
165
167
  color: var(--puck-color-grey-08);
166
168
  font-size: var(--puck-font-size-xxxs);
167
169
  font-weight: 500;
@@ -172,13 +174,13 @@
172
174
  text-overflow: ellipsis;
173
175
  white-space: nowrap;
174
176
  }
175
- ._ActionBar-action_rvadt_30 + ._ActionBar-label_rvadt_18 {
177
+ .ActionBar-action + .ActionBar-label {
176
178
  padding-inline-start: 0;
177
179
  }
178
- ._ActionBar-label_rvadt_18 + ._ActionBar-action_rvadt_30 {
180
+ .ActionBar-label + .ActionBar-action {
179
181
  margin-inline-start: -4px;
180
182
  }
181
- ._ActionBar-group_rvadt_38 {
183
+ .ActionBar-group {
182
184
  align-items: center;
183
185
  border-inline-start: 0.5px solid var(--puck-color-grey-05);
184
186
  display: flex;
@@ -186,13 +188,13 @@
186
188
  padding-inline-start: 4px;
187
189
  padding-inline-end: 4px;
188
190
  }
189
- ._ActionBar-group_rvadt_38:first-of-type {
191
+ .ActionBar-group:first-of-type {
190
192
  border-inline-start: 0;
191
193
  }
192
- ._ActionBar-group_rvadt_38:empty {
194
+ .ActionBar-group:empty {
193
195
  display: none;
194
196
  }
195
- ._ActionBar-action_rvadt_30 {
197
+ .ActionBar-action {
196
198
  background: transparent;
197
199
  border: none;
198
200
  color: var(--puck-color-grey-08);
@@ -207,32 +209,32 @@
207
209
  justify-content: center;
208
210
  transition: color 50ms ease-in;
209
211
  }
210
- ._ActionBar-action_rvadt_30 svg {
212
+ .ActionBar-action svg {
211
213
  max-width: none !important;
212
214
  }
213
- ._ActionBar-action_rvadt_30:focus-visible {
215
+ .ActionBar-action:focus-visible {
214
216
  outline: 2px solid var(--puck-color-azure-05);
215
217
  outline-offset: -2px;
216
218
  }
217
219
  @media (hover: hover) and (pointer: fine) {
218
- ._ActionBar-action_rvadt_30:hover {
220
+ .ActionBar-action:hover {
219
221
  color: var(--puck-color-azure-06);
220
222
  transition: none;
221
223
  }
222
224
  }
223
- ._ActionBar-action_rvadt_30:active {
225
+ .ActionBar-action:active {
224
226
  color: var(--puck-color-azure-07);
225
227
  transition: none;
226
228
  }
227
- ._ActionBar-group_rvadt_38 * {
229
+ .ActionBar-group * {
228
230
  margin: 0;
229
231
  }
230
232
 
231
233
  /* css-module:/home/runner/work/puck/puck/packages/core/components/AutoField/styles.module.css/#css-module-data */
232
- ._InputWrapper_py9hf_1 + ._InputWrapper_py9hf_1 {
234
+ .InputWrapper + .InputWrapper {
233
235
  margin-top: 12px;
234
236
  }
235
- ._Input-label_py9hf_5 {
237
+ .Input-label {
236
238
  align-items: center;
237
239
  color: var(--puck-color-grey-04);
238
240
  display: flex;
@@ -240,17 +242,17 @@
240
242
  font-size: var(--puck-font-size-xxs);
241
243
  font-weight: 600;
242
244
  }
243
- ._Input-labelIcon_py9hf_14 {
245
+ .Input-labelIcon {
244
246
  color: var(--puck-color-grey-07);
245
247
  display: flex;
246
248
  margin-inline-end: 4px;
247
249
  padding-inline-start: 4px;
248
250
  }
249
- ._Input-disabledIcon_py9hf_21 {
251
+ .Input-disabledIcon {
250
252
  color: var(--puck-color-grey-05);
251
253
  margin-inline-start: auto;
252
254
  }
253
- ._Input-input_py9hf_26 {
255
+ .Input-input {
254
256
  background: var(--puck-color-white);
255
257
  border-width: 1px;
256
258
  border-style: solid;
@@ -258,13 +260,18 @@
258
260
  border-radius: 4px;
259
261
  box-sizing: border-box;
260
262
  font-family: inherit;
261
- font-size: 14px;
263
+ font-size: 16px;
262
264
  padding: 12px 15px;
263
265
  transition: border-color 50ms ease-in;
264
266
  width: 100%;
265
267
  max-width: 100%;
266
268
  }
267
- select._Input-input_py9hf_26 {
269
+ @media (min-width: 458px) {
270
+ .Input-input {
271
+ font-size: 14px;
272
+ }
273
+ }
274
+ select.Input-input {
268
275
  appearance: none;
269
276
  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;
270
277
  background-size: 12px;
@@ -273,29 +280,29 @@ select._Input-input_py9hf_26 {
273
280
  background-color: var(--puck-color-white);
274
281
  cursor: pointer;
275
282
  }
276
- select._Input-input_py9hf_26:dir(rtl) {
283
+ select.Input-input:dir(rtl) {
277
284
  background-position: 12px calc(50% + 3px);
278
285
  }
279
286
  @media (hover: hover) and (pointer: fine) {
280
- ._Input_py9hf_1:has(> input):hover ._Input-input_py9hf_26:not([readonly]),
281
- ._Input_py9hf_1:has(> textarea):hover ._Input-input_py9hf_26:not([readonly]) {
287
+ .Input:has(> input):hover .Input-input:not([readonly]),
288
+ .Input:has(> textarea):hover .Input-input:not([readonly]) {
282
289
  border-color: var(--puck-color-grey-05);
283
290
  transition: none;
284
291
  }
285
- ._Input_py9hf_1:has(> select):hover ._Input-input_py9hf_26:not([disabled]) {
292
+ .Input:has(> select):hover .Input-input:not([disabled]) {
286
293
  background-color: var(--puck-color-azure-12);
287
294
  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>");
288
295
  border-color: var(--puck-color-grey-05);
289
296
  transition: none;
290
297
  }
291
298
  }
292
- ._Input-input_py9hf_26:focus {
299
+ .Input-input:focus {
293
300
  border-color: var(--puck-color-grey-05);
294
301
  outline: 2px solid var(--puck-color-azure-05);
295
302
  transition: none;
296
303
  }
297
- ._Input--readOnly_py9hf_76 > ._Input-input_py9hf_26,
298
- ._Input--readOnly_py9hf_76 > select._Input-input_py9hf_26 {
304
+ .Input--readOnly > .Input-input,
305
+ .Input--readOnly > select.Input-input {
299
306
  background-color: var(--puck-color-grey-11);
300
307
  border-color: var(--puck-color-grey-09);
301
308
  color: var(--puck-color-grey-04);
@@ -304,34 +311,34 @@ select._Input-input_py9hf_26:dir(rtl) {
304
311
  outline: 0;
305
312
  transition: none;
306
313
  }
307
- ._Input-radioGroupItems_py9hf_87 {
314
+ .Input-radioGroupItems {
308
315
  display: flex;
309
316
  border: 1px solid var(--puck-color-grey-09);
310
317
  border-radius: 4px;
311
318
  flex-wrap: wrap;
312
319
  }
313
- ._Input-radio_py9hf_87 {
320
+ .Input-radio {
314
321
  border-inline-end: 1px solid var(--puck-color-grey-09);
315
322
  flex-grow: 1;
316
323
  }
317
- ._Input-radio_py9hf_87:first-of-type {
324
+ .Input-radio:first-of-type {
318
325
  border-bottom-left-radius: 4px;
319
326
  border-top-left-radius: 4px;
320
327
  }
321
- ._Input-radio_py9hf_87:first-of-type ._Input-radioInner_py9hf_104 {
328
+ .Input-radio:first-of-type .Input-radioInner {
322
329
  border-bottom-left-radius: 3px;
323
330
  border-top-left-radius: 3px;
324
331
  }
325
- ._Input-radio_py9hf_87:last-of-type {
332
+ .Input-radio:last-of-type {
326
333
  border-bottom-right-radius: 4px;
327
334
  border-inline-end: 0;
328
335
  border-top-right-radius: 4px;
329
336
  }
330
- ._Input-radio_py9hf_87:last-of-type ._Input-radioInner_py9hf_104 {
337
+ .Input-radio:last-of-type .Input-radioInner {
331
338
  border-bottom-right-radius: 3px;
332
339
  border-top-right-radius: 3px;
333
340
  }
334
- ._Input-radioInner_py9hf_104 {
341
+ .Input-radioInner {
335
342
  background-color: var(--puck-color-white);
336
343
  color: var(--puck-color-grey-04);
337
344
  cursor: pointer;
@@ -340,32 +347,32 @@ select._Input-input_py9hf_26:dir(rtl) {
340
347
  text-align: center;
341
348
  transition: background-color 50ms ease-in;
342
349
  }
343
- ._Input-radio_py9hf_87:has(:focus-visible) {
350
+ .Input-radio:has(:focus-visible) {
344
351
  outline: 2px solid var(--puck-color-azure-05);
345
352
  outline-offset: 2px;
346
353
  position: relative;
347
354
  }
348
355
  @media (hover: hover) and (pointer: fine) {
349
- ._Input-radioInner_py9hf_104:hover {
356
+ .Input-radioInner:hover {
350
357
  background-color: var(--puck-color-azure-12);
351
358
  transition: none;
352
359
  }
353
360
  }
354
- ._Input--readOnly_py9hf_76 ._Input-radioInner_py9hf_104 {
361
+ .Input--readOnly .Input-radioInner {
355
362
  background-color: var(--puck-color-white);
356
363
  color: var(--puck-color-grey-04);
357
364
  cursor: default;
358
365
  }
359
- ._Input-radio_py9hf_87 ._Input-radioInput_py9hf_149:checked ~ ._Input-radioInner_py9hf_104 {
366
+ .Input-radio .Input-radioInput:checked ~ .Input-radioInner {
360
367
  background-color: var(--puck-color-azure-11);
361
368
  color: var(--puck-color-azure-04);
362
369
  font-weight: 500;
363
370
  }
364
- ._Input--readOnly_py9hf_76 ._Input-radioInput_py9hf_149:checked ~ ._Input-radioInner_py9hf_104 {
371
+ .Input--readOnly .Input-radioInput:checked ~ .Input-radioInner {
365
372
  background-color: var(--puck-color-grey-11);
366
373
  color: var(--puck-color-grey-04);
367
374
  }
368
- ._Input-radio_py9hf_87 ._Input-radioInput_py9hf_149 {
375
+ .Input-radio .Input-radioInput {
369
376
  clip: rect(0 0 0 0);
370
377
  clip-path: inset(100%);
371
378
  height: 1px;
@@ -374,23 +381,23 @@ select._Input-input_py9hf_26:dir(rtl) {
374
381
  white-space: nowrap;
375
382
  width: 1px;
376
383
  }
377
- textarea._Input-input_py9hf_26 {
384
+ textarea.Input-input {
378
385
  margin-bottom: -4px;
379
386
  }
380
387
 
381
388
  /* css-module:/home/runner/work/puck/puck/packages/core/components/AutoField/fields/ArrayField/styles.module.css/#css-module-data */
382
- ._ArrayField_14u8o_5 {
389
+ .ArrayField {
383
390
  display: flex;
384
391
  flex-direction: column;
385
392
  background: var(--puck-color-azure-11);
386
393
  border: 1px solid var(--puck-color-grey-09);
387
394
  border-radius: 4px;
388
395
  }
389
- ._ArrayField--isDraggingFrom_14u8o_13 {
396
+ .ArrayField--isDraggingFrom {
390
397
  background-color: var(--puck-color-azure-11);
391
398
  overflow: hidden;
392
399
  }
393
- ._ArrayField-addButton_14u8o_18 {
400
+ .ArrayField-addButton {
394
401
  background-color: var(--puck-color-white);
395
402
  border: none;
396
403
  border-radius: 3px;
@@ -404,63 +411,63 @@ textarea._Input-input_py9hf_26 {
404
411
  text-align: left;
405
412
  transition: background-color 50ms ease-in;
406
413
  }
407
- ._ArrayField--hasItems_14u8o_33 > ._ArrayField-addButton_14u8o_18 {
414
+ .ArrayField--hasItems > .ArrayField-addButton {
408
415
  border-top: 1px solid var(--puck-color-grey-09);
409
416
  border-top-left-radius: 0;
410
417
  border-top-right-radius: 0;
411
418
  }
412
- ._ArrayField-addButton_14u8o_18:focus-visible {
419
+ .ArrayField-addButton:focus-visible {
413
420
  outline: 2px solid var(--puck-color-azure-05);
414
421
  outline-offset: 2px;
415
422
  position: relative;
416
423
  }
417
424
  @media (hover: hover) and (pointer: fine) {
418
- ._ArrayField_14u8o_5:not(._ArrayField--isDraggingFrom_14u8o_13) > ._ArrayField-addButton_14u8o_18:hover {
425
+ .ArrayField:not(.ArrayField--isDraggingFrom) > .ArrayField-addButton:hover {
419
426
  background: var(--puck-color-azure-12);
420
427
  color: var(--puck-color-azure-04);
421
428
  transition: none;
422
429
  }
423
430
  }
424
- ._ArrayField_14u8o_5:not(._ArrayField--isDraggingFrom_14u8o_13) > ._ArrayField-addButton_14u8o_18:active {
431
+ .ArrayField:not(.ArrayField--isDraggingFrom) > .ArrayField-addButton:active {
425
432
  background: var(--puck-color-azure-11);
426
433
  color: var(--puck-color-azure-04);
427
434
  transition: none;
428
435
  }
429
- ._ArrayField-inner_14u8o_59 {
436
+ .ArrayField-inner {
430
437
  margin-top: -1px;
431
438
  }
432
- ._ArrayFieldItem_14u8o_67 {
439
+ .ArrayFieldItem {
433
440
  border-top-left-radius: 3px;
434
441
  border-top-right-radius: 3px;
435
442
  display: block;
436
443
  position: relative;
437
444
  }
438
- ._ArrayFieldItem_14u8o_67 {
445
+ .ArrayFieldItem {
439
446
  border-top: 1px solid var(--puck-color-grey-09);
440
447
  }
441
- ._ArrayFieldItem--isDragging_14u8o_78 {
448
+ .ArrayFieldItem--isDragging {
442
449
  border-top: transparent;
443
450
  }
444
- ._ArrayFieldItem--isExpanded_14u8o_82::before {
451
+ .ArrayFieldItem--isExpanded::before {
445
452
  display: none;
446
453
  }
447
- ._ArrayFieldItem--isExpanded_14u8o_82 {
454
+ .ArrayFieldItem--isExpanded {
448
455
  border-bottom: 0;
449
456
  outline-offset: 0px !important;
450
457
  outline: 1px solid var(--puck-color-azure-07) !important;
451
458
  z-index: 2;
452
459
  }
453
- ._ArrayFieldItem--isDragging_14u8o_78 {
460
+ .ArrayFieldItem--isDragging {
454
461
  outline: 2px var(--puck-color-azure-09) solid !important;
455
462
  }
456
- ._ArrayFieldItem--isDragging_14u8o_78 ._ArrayFieldItem-summary_14u8o_97:active {
463
+ .ArrayFieldItem--isDragging .ArrayFieldItem-summary:active {
457
464
  background-color: var(--puck-color-white);
458
465
  }
459
- ._ArrayFieldItem_14u8o_67 + ._ArrayFieldItem_14u8o_67 {
466
+ .ArrayFieldItem + .ArrayFieldItem {
460
467
  border-top-left-radius: 0;
461
468
  border-top-right-radius: 0;
462
469
  }
463
- ._ArrayFieldItem-summary_14u8o_97 {
470
+ .ArrayFieldItem-summary {
464
471
  background: var(--puck-color-white);
465
472
  color: var(--puck-color-grey-04);
466
473
  cursor: pointer;
@@ -475,70 +482,70 @@ textarea._Input-input_py9hf_26 {
475
482
  overflow: hidden;
476
483
  transition: background-color 50ms ease-in;
477
484
  }
478
- ._ArrayFieldItem_14u8o_67:first-of-type > ._ArrayFieldItem-summary_14u8o_97 {
485
+ .ArrayFieldItem:first-of-type > .ArrayFieldItem-summary {
479
486
  border-top-left-radius: 3px;
480
487
  border-top-right-radius: 3px;
481
488
  }
482
- ._ArrayField--addDisabled_14u8o_127 > ._ArrayField-inner_14u8o_59 > ._ArrayFieldItem_14u8o_67:last-of-type:not(._ArrayFieldItem--isExpanded_14u8o_82) > ._ArrayFieldItem-summary_14u8o_97 {
489
+ .ArrayField--addDisabled > .ArrayField-inner > .ArrayFieldItem:last-of-type:not(.ArrayFieldItem--isExpanded) > .ArrayFieldItem-summary {
483
490
  border-bottom-left-radius: 3px;
484
491
  border-bottom-right-radius: 3px;
485
492
  }
486
- ._ArrayField--addDisabled_14u8o_127 > ._ArrayField-inner_14u8o_59 > ._ArrayFieldItem--isExpanded_14u8o_82:last-of-type {
493
+ .ArrayField--addDisabled > .ArrayField-inner > .ArrayFieldItem--isExpanded:last-of-type {
487
494
  border-bottom-left-radius: 3px;
488
495
  border-bottom-right-radius: 3px;
489
496
  }
490
- ._ArrayFieldItem-summary_14u8o_97:focus-visible {
497
+ .ArrayFieldItem-summary:focus-visible {
491
498
  outline: 2px solid var(--puck-color-azure-05);
492
499
  outline-offset: 2px;
493
500
  }
494
501
  @media (hover: hover) and (pointer: fine) {
495
- ._ArrayFieldItem-summary_14u8o_97:hover {
502
+ .ArrayFieldItem-summary:hover {
496
503
  background-color: var(--puck-color-azure-12);
497
504
  transition: none;
498
505
  }
499
506
  }
500
- ._ArrayFieldItem-summary_14u8o_97:active {
507
+ .ArrayFieldItem-summary:active {
501
508
  background-color: var(--puck-color-azure-11);
502
509
  transition: none;
503
510
  }
504
- ._ArrayFieldItem--isExpanded_14u8o_82 > ._ArrayFieldItem-summary_14u8o_97 {
511
+ .ArrayFieldItem--isExpanded > .ArrayFieldItem-summary {
505
512
  background: var(--puck-color-azure-11);
506
513
  color: var(--puck-color-azure-04);
507
514
  font-weight: 600;
508
515
  transition: none;
509
516
  }
510
- ._ArrayFieldItem-body_14u8o_166 {
517
+ .ArrayFieldItem-body {
511
518
  background: var(--puck-color-white);
512
519
  display: none;
513
520
  }
514
- ._ArrayFieldItem--isExpanded_14u8o_82 > ._ArrayFieldItem-body_14u8o_166 {
521
+ .ArrayFieldItem--isExpanded > .ArrayFieldItem-body {
515
522
  display: block;
516
523
  }
517
- ._ArrayFieldItem-fieldset_14u8o_175 {
524
+ .ArrayFieldItem-fieldset {
518
525
  border: none;
519
526
  border-top: 1px solid var(--puck-color-grey-09);
520
527
  margin: 0;
521
528
  min-width: 0;
522
529
  padding: 16px 15px;
523
530
  }
524
- ._ArrayFieldItem-rhs_14u8o_183 {
531
+ .ArrayFieldItem-rhs {
525
532
  display: flex;
526
533
  gap: 4px;
527
534
  align-items: center;
528
535
  }
529
- ._ArrayFieldItem-actions_14u8o_189 {
536
+ .ArrayFieldItem-actions {
530
537
  color: var(--puck-color-grey-04);
531
538
  display: flex;
532
539
  gap: 4px;
533
540
  opacity: 0;
534
541
  }
535
- ._ArrayFieldItem-summary_14u8o_97:focus-within > ._ArrayFieldItem-rhs_14u8o_183 > ._ArrayFieldItem-actions_14u8o_189,
536
- ._ArrayFieldItem-summary_14u8o_97:hover > ._ArrayFieldItem-rhs_14u8o_183 > ._ArrayFieldItem-actions_14u8o_189 {
542
+ .ArrayFieldItem-summary:focus-within > .ArrayFieldItem-rhs > .ArrayFieldItem-actions,
543
+ .ArrayFieldItem-summary:hover > .ArrayFieldItem-rhs > .ArrayFieldItem-actions {
537
544
  opacity: 1;
538
545
  }
539
546
 
540
547
  /* css-module:/home/runner/work/puck/puck/packages/core/components/IconButton/IconButton.module.css/#css-module-data */
541
- ._IconButton_swpni_1 {
548
+ .IconButton {
542
549
  align-items: center;
543
550
  background: transparent;
544
551
  border: none;
@@ -550,23 +557,23 @@ textarea._Input-input_py9hf_26 {
550
557
  padding: 4px;
551
558
  transition: background-color 50ms ease-in, color 50ms ease-in;
552
559
  }
553
- ._IconButton_swpni_1:focus-visible {
560
+ .IconButton:focus-visible {
554
561
  outline: 2px solid var(--puck-color-azure-05);
555
562
  outline-offset: -2px;
556
563
  }
557
564
  @media (hover: hover) and (pointer: fine) {
558
- ._IconButton_swpni_1:hover:not(._IconButton--disabled_swpni_20) {
565
+ .IconButton:hover:not(.IconButton--disabled) {
559
566
  background: var(--puck-color-azure-12);
560
567
  color: var(--puck-color-azure-04);
561
568
  cursor: pointer;
562
569
  transition: none;
563
570
  }
564
571
  }
565
- ._IconButton_swpni_1:active {
572
+ .IconButton:active {
566
573
  background: var(--puck-color-azure-11);
567
574
  transition: none;
568
575
  }
569
- ._IconButton-title_swpni_33 {
576
+ .IconButton-title {
570
577
  clip: rect(0 0 0 0);
571
578
  clip-path: inset(100%);
572
579
  height: 1px;
@@ -575,12 +582,12 @@ textarea._Input-input_py9hf_26 {
575
582
  white-space: nowrap;
576
583
  width: 1px;
577
584
  }
578
- ._IconButton--disabled_swpni_20 {
585
+ .IconButton--disabled {
579
586
  color: var(--puck-color-grey-07);
580
587
  }
581
588
 
582
589
  /* css-module:/home/runner/work/puck/puck/packages/core/components/Loader/styles.module.css/#css-module-data */
583
- @keyframes _loader-animation_nacdm_1 {
590
+ @keyframes loader-animation {
584
591
  0% {
585
592
  transform: rotate(0deg) scale(1);
586
593
  }
@@ -591,28 +598,28 @@ textarea._Input-input_py9hf_26 {
591
598
  transform: rotate(360deg) scale(1);
592
599
  }
593
600
  }
594
- ._Loader_nacdm_13 {
601
+ .Loader {
595
602
  background: transparent;
596
603
  border-radius: 100%;
597
604
  border: 2px solid currentColor;
598
605
  border-bottom-color: transparent;
599
606
  display: inline-block;
600
- animation: _loader-animation_nacdm_1 1s 0s infinite linear;
607
+ animation: loader-animation 1s 0s infinite linear;
601
608
  animation-fill-mode: both;
602
609
  }
603
610
 
604
611
  /* css-module:/home/runner/work/puck/puck/packages/core/components/DragIcon/styles.module.css/#css-module-data */
605
- ._DragIcon_17p8x_1 {
612
+ .DragIcon {
606
613
  color: var(--puck-color-grey-05);
607
614
  cursor: grab;
608
615
  padding: 4px;
609
616
  border-radius: 4px;
610
617
  }
611
- ._DragIcon--disabled_17p8x_8 {
618
+ .DragIcon--disabled {
612
619
  cursor: no-drop;
613
620
  }
614
621
  @media (hover: hover) and (pointer: fine) {
615
- ._DragIcon_17p8x_1:not(._DragIcon--disabled_17p8x_8):hover {
622
+ .DragIcon:not(.DragIcon--disabled):hover {
616
623
  color: var(--puck-color-azure-05);
617
624
  background-color: var(--puck-color-azure-12);
618
625
  }
@@ -632,10 +639,10 @@ textarea._Input-input_py9hf_26 {
632
639
  }
633
640
 
634
641
  /* css-module:/home/runner/work/puck/puck/packages/core/components/ExternalInput/styles.module.css/#css-module-data */
635
- ._ExternalInput-actions_91ls0_1 {
642
+ .ExternalInput-actions {
636
643
  display: flex;
637
644
  }
638
- ._ExternalInput-button_91ls0_5 {
645
+ .ExternalInput-button {
639
646
  display: flex;
640
647
  gap: 8px;
641
648
  align-items: center;
@@ -653,16 +660,16 @@ textarea._Input-input_py9hf_26 {
653
660
  overflow: hidden;
654
661
  flex-grow: 1;
655
662
  }
656
- ._ExternalInput--dataSelected_91ls0_24 ._ExternalInput-button_91ls0_5 {
663
+ .ExternalInput--dataSelected .ExternalInput-button {
657
664
  color: var(--puck-color-grey-03);
658
665
  display: block;
659
666
  border-top-right-radius: 0px;
660
667
  border-bottom-right-radius: 0px;
661
668
  }
662
- ._ExternalInput--readOnly_91ls0_31 ._ExternalInput-button_91ls0_5 {
669
+ .ExternalInput--readOnly .ExternalInput-button {
663
670
  background-color: var(--puck-color-grey-11);
664
671
  }
665
- ._ExternalInput-detachButton_91ls0_35 {
672
+ .ExternalInput-detachButton {
666
673
  border: 1px solid var(--puck-color-grey-09);
667
674
  border-top-right-radius: 4px;
668
675
  border-bottom-right-radius: 4px;
@@ -677,28 +684,28 @@ textarea._Input-input_py9hf_26 {
677
684
  transition: background-color 50ms ease-in, color 50ms ease-in;
678
685
  margin-inline-start: -1px;
679
686
  }
680
- ._ExternalInput-button_91ls0_5:focus-visible,
681
- ._ExternalInput-detachButton_91ls0_35:focus-visible {
687
+ .ExternalInput-button:focus-visible,
688
+ .ExternalInput-detachButton:focus-visible {
682
689
  outline: 2px solid var(--puck-color-azure-05);
683
690
  outline-offset: 2px;
684
691
  z-index: 1;
685
692
  }
686
693
  @media (hover: hover) and (pointer: fine) {
687
- ._ExternalInput_91ls0_1:not(._ExternalInput--readOnly_91ls0_31) ._ExternalInput-button_91ls0_5:hover,
688
- ._ExternalInput_91ls0_1:not(._ExternalInput--readOnly_91ls0_31) ._ExternalInput-detachButton_91ls0_35:hover {
694
+ .ExternalInput:not(.ExternalInput--readOnly) .ExternalInput-button:hover,
695
+ .ExternalInput:not(.ExternalInput--readOnly) .ExternalInput-detachButton:hover {
689
696
  background: var(--puck-color-azure-12);
690
697
  transition: none;
691
698
  }
692
- ._ExternalInput_91ls0_1:not(._ExternalInput--readOnly_91ls0_31) ._ExternalInput-detachButton_91ls0_35:hover {
699
+ .ExternalInput:not(.ExternalInput--readOnly) .ExternalInput-detachButton:hover {
693
700
  color: var(--puck-color-azure-04);
694
701
  }
695
702
  }
696
- ._ExternalInput_91ls0_1:not(._ExternalInput--readOnly_91ls0_31) ._ExternalInput-button_91ls0_5:active,
697
- ._ExternalInput_91ls0_1:not(._ExternalInput--readOnly_91ls0_31) ._ExternalInput-detachButton_91ls0_35:active {
703
+ .ExternalInput:not(.ExternalInput--readOnly) .ExternalInput-button:active,
704
+ .ExternalInput:not(.ExternalInput--readOnly) .ExternalInput-detachButton:active {
698
705
  background: var(--puck-color-azure-11);
699
706
  transition: none;
700
707
  }
701
- ._ExternalInputModal_91ls0_79 {
708
+ .ExternalInputModal {
702
709
  color: var(--puck-color-black);
703
710
  display: grid;
704
711
  grid-template-rows: min-content minmax(128px, 100%) min-content;
@@ -707,35 +714,35 @@ textarea._Input-input_py9hf_26 {
707
714
  min-height: 50dvh;
708
715
  max-height: 90dvh;
709
716
  }
710
- ._ExternalInputModal-grid_91ls0_89 {
717
+ .ExternalInputModal-grid {
711
718
  display: flex;
712
719
  flex-direction: column;
713
720
  }
714
721
  @media (min-width: 458px) {
715
- ._ExternalInputModal-grid_91ls0_89 {
722
+ .ExternalInputModal-grid {
716
723
  display: grid;
717
724
  grid-template-columns: 100%;
718
725
  }
719
- ._ExternalInputModal--filtersToggled_91ls0_100 ._ExternalInputModal-grid_91ls0_89 {
726
+ .ExternalInputModal--filtersToggled .ExternalInputModal-grid {
720
727
  grid-template-columns: 25% 75%;
721
728
  }
722
729
  }
723
- ._ExternalInputModal-filters_91ls0_105 {
730
+ .ExternalInputModal-filters {
724
731
  border-bottom: 1px solid var(--puck-color-grey-09);
725
732
  }
726
- ._ExternalInputModal--filtersToggled_91ls0_100 ._ExternalInputModal-filters_91ls0_105 {
733
+ .ExternalInputModal--filtersToggled .ExternalInputModal-filters {
727
734
  display: none;
728
735
  }
729
736
  @media (min-width: 458px) {
730
- ._ExternalInputModal-filters_91ls0_105 {
737
+ .ExternalInputModal-filters {
731
738
  border-inline-end: 1px solid var(--puck-color-grey-09);
732
739
  display: none;
733
740
  }
734
- ._ExternalInputModal--filtersToggled_91ls0_100 ._ExternalInputModal-filters_91ls0_105 {
741
+ .ExternalInputModal--filtersToggled .ExternalInputModal-filters {
735
742
  display: block;
736
743
  }
737
744
  }
738
- ._ExternalInputModal-masthead_91ls0_124 {
745
+ .ExternalInputModal-masthead {
739
746
  background-color: var(--puck-color-grey-12);
740
747
  border-bottom: 1px solid var(--puck-color-grey-09);
741
748
  display: flex;
@@ -743,13 +750,13 @@ textarea._Input-input_py9hf_26 {
743
750
  gap: 24px;
744
751
  padding: 24px;
745
752
  }
746
- ._ExternalInputModal-tableWrapper_91ls0_133 {
753
+ .ExternalInputModal-tableWrapper {
747
754
  position: relative;
748
755
  overflow-x: auto;
749
756
  overflow-y: auto;
750
757
  flex-grow: 1;
751
758
  }
752
- ._ExternalInputModal-table_91ls0_133 {
759
+ .ExternalInputModal-table {
753
760
  border-collapse: unset;
754
761
  border-spacing: 0px;
755
762
  color: var(--puck-color-grey-02);
@@ -757,51 +764,51 @@ textarea._Input-input_py9hf_26 {
757
764
  z-index: 0;
758
765
  min-width: 100%;
759
766
  }
760
- ._ExternalInputModal-thead_91ls0_149 {
767
+ .ExternalInputModal-thead {
761
768
  background-color: var(--puck-color-white);
762
769
  position: sticky;
763
770
  top: 0;
764
771
  z-index: 1;
765
772
  }
766
- ._ExternalInputModal-th_91ls0_149 {
773
+ .ExternalInputModal-th {
767
774
  border-bottom: 1px solid var(--puck-color-grey-09);
768
775
  color: var(--puck-color-grey-04);
769
776
  font-weight: 500;
770
777
  font-size: 14px;
771
778
  padding: 16px 24px;
772
779
  }
773
- ._ExternalInputModal-td_91ls0_164 {
780
+ .ExternalInputModal-td {
774
781
  border-bottom: 1px solid var(--puck-color-grey-10);
775
782
  padding: 16px 24px;
776
783
  }
777
- ._ExternalInputModal-tr_91ls0_169 ._ExternalInputModal-td_91ls0_164:first-of-type {
784
+ .ExternalInputModal-tr .ExternalInputModal-td:first-of-type {
778
785
  font-weight: 500;
779
786
  width: 1%;
780
787
  white-space: nowrap;
781
788
  }
782
789
  @media (hover: hover) and (pointer: fine) {
783
- ._ExternalInputModal-tbody_91ls0_176 ._ExternalInputModal-tr_91ls0_169:hover {
790
+ .ExternalInputModal-tbody .ExternalInputModal-tr:hover {
784
791
  background: var(--puck-color-azure-12);
785
792
  color: var(--puck-color-azure-04);
786
793
  cursor: pointer;
787
794
  position: relative;
788
795
  margin-inline-start: -5px;
789
796
  }
790
- ._ExternalInputModal-tbody_91ls0_176 ._ExternalInputModal-tr_91ls0_169:hover ._ExternalInputModal-td_91ls0_164:first-of-type {
797
+ .ExternalInputModal-tbody .ExternalInputModal-tr:hover .ExternalInputModal-td:first-of-type {
791
798
  border-inline-start: 4px solid var(--puck-color-azure-04);
792
799
  padding-inline-start: 20px;
793
800
  }
794
801
  }
795
- ._ExternalInputModal-tbody_91ls0_176 ._ExternalInputModal-tr_91ls0_169:last-of-type ._ExternalInputModal-td_91ls0_164 {
802
+ .ExternalInputModal-tbody .ExternalInputModal-tr:last-of-type .ExternalInputModal-td {
796
803
  border-bottom: none;
797
804
  }
798
- ._ExternalInputModal-tableWrapper_91ls0_133 {
805
+ .ExternalInputModal-tableWrapper {
799
806
  display: none;
800
807
  }
801
- ._ExternalInputModal--hasData_91ls0_202 ._ExternalInputModal-tableWrapper_91ls0_133 {
808
+ .ExternalInputModal--hasData .ExternalInputModal-tableWrapper {
802
809
  display: block;
803
810
  }
804
- ._ExternalInputModal-loadingBanner_91ls0_206 {
811
+ .ExternalInputModal-loadingBanner {
805
812
  display: none;
806
813
  background-color: color-mix(in srgb, var(--puck-color-white) 90%, transparent);
807
814
  padding: 64px;
@@ -813,21 +820,21 @@ textarea._Input-input_py9hf_26 {
813
820
  right: 0;
814
821
  bottom: 0;
815
822
  }
816
- ._ExternalInputModal--isLoading_91ls0_223 ._ExternalInputModal-loadingBanner_91ls0_206 {
823
+ .ExternalInputModal--isLoading .ExternalInputModal-loadingBanner {
817
824
  display: flex;
818
825
  }
819
- ._ExternalInputModal-searchForm_91ls0_227 {
826
+ .ExternalInputModal-searchForm {
820
827
  display: flex;
821
828
  flex-wrap: wrap;
822
829
  gap: 12px;
823
830
  flex-grow: 1;
824
831
  }
825
832
  @media (min-width: 458px) {
826
- ._ExternalInputModal-searchForm_91ls0_227 {
833
+ .ExternalInputModal-searchForm {
827
834
  flex-wrap: nowrap;
828
835
  }
829
836
  }
830
- ._ExternalInputModal-search_91ls0_227 {
837
+ .ExternalInputModal-search {
831
838
  display: flex;
832
839
  background: var(--puck-color-white);
833
840
  border-width: 1px;
@@ -837,18 +844,18 @@ textarea._Input-input_py9hf_26 {
837
844
  flex-grow: 1;
838
845
  transition: border-color 50ms ease-in;
839
846
  }
840
- ._ExternalInputModal-search_91ls0_227:focus-within {
847
+ .ExternalInputModal-search:focus-within {
841
848
  border-color: var(--puck-color-grey-05);
842
849
  outline: 2px solid var(--puck-color-azure-05);
843
850
  transition: none;
844
851
  }
845
852
  @media (hover: hover) and (pointer: fine) {
846
- ._ExternalInputModal-search_91ls0_227:hover {
853
+ .ExternalInputModal-search:hover {
847
854
  border-color: var(--puck-color-grey-05);
848
855
  transition: none;
849
856
  }
850
857
  }
851
- ._ExternalInputModal-searchIcon_91ls0_264 {
858
+ .ExternalInputModal-searchIcon {
852
859
  align-items: center;
853
860
  background: var(--puck-color-grey-12);
854
861
  border-bottom-left-radius: 4px;
@@ -860,17 +867,17 @@ textarea._Input-input_py9hf_26 {
860
867
  padding: 12px 15px;
861
868
  transition: color 50ms ease-in;
862
869
  }
863
- ._ExternalInputModal-search_91ls0_227:focus-within ._ExternalInputModal-searchIcon_91ls0_264 {
870
+ .ExternalInputModal-search:focus-within .ExternalInputModal-searchIcon {
864
871
  color: var(--puck-color-grey-04);
865
872
  transition: none;
866
873
  }
867
874
  @media (hover: hover) and (pointer: fine) {
868
- ._ExternalInputModal-search_91ls0_227:hover ._ExternalInputModal-searchIcon_91ls0_264 {
875
+ .ExternalInputModal-search:hover .ExternalInputModal-searchIcon {
869
876
  color: var(--puck-color-grey-04);
870
877
  transition: none;
871
878
  }
872
879
  }
873
- ._ExternalInputModal-searchIconText_91ls0_289 {
880
+ .ExternalInputModal-searchIconText {
874
881
  clip: rect(0 0 0 0);
875
882
  clip-path: inset(100%);
876
883
  height: 1px;
@@ -879,7 +886,7 @@ textarea._Input-input_py9hf_26 {
879
886
  white-space: nowrap;
880
887
  width: 1px;
881
888
  }
882
- ._ExternalInputModal-searchInput_91ls0_299 {
889
+ .ExternalInputModal-searchInput {
883
890
  border: none;
884
891
  border-radius: 4px;
885
892
  background: var(--puck-color-white);
@@ -888,35 +895,35 @@ textarea._Input-input_py9hf_26 {
888
895
  padding: 12px 15px;
889
896
  width: 100%;
890
897
  }
891
- ._ExternalInputModal-searchInput_91ls0_299:focus {
898
+ .ExternalInputModal-searchInput:focus {
892
899
  outline: 0;
893
900
  }
894
- ._ExternalInputModal-searchActions_91ls0_313 {
901
+ .ExternalInputModal-searchActions {
895
902
  display: flex;
896
903
  gap: 8px;
897
904
  height: 44px;
898
905
  width: 100%;
899
906
  }
900
907
  @media (min-width: 458px) {
901
- ._ExternalInputModal-searchActions_91ls0_313 {
908
+ .ExternalInputModal-searchActions {
902
909
  width: auto;
903
910
  }
904
911
  }
905
- ._ExternalInputModal-searchActionIcon_91ls0_326 {
912
+ .ExternalInputModal-searchActionIcon {
906
913
  align-self: center;
907
914
  }
908
- ._ExternalInputModal-footerContainer_91ls0_330 {
915
+ .ExternalInputModal-footerContainer {
909
916
  background-color: var(--puck-color-grey-12);
910
917
  border-top: 1px solid var(--puck-color-grey-09);
911
918
  color: var(--puck-color-grey-04);
912
919
  padding: 16px;
913
920
  }
914
- ._ExternalInputModal-footer_91ls0_330 {
921
+ .ExternalInputModal-footer {
915
922
  font-weight: 500;
916
923
  font-size: 14px;
917
924
  text-align: right;
918
925
  }
919
- ._ExternalInputModal-field_91ls0_343 {
926
+ .ExternalInputModal-field {
920
927
  color: var(--puck-color-grey-04);
921
928
  margin: 16px;
922
929
  margin-bottom: 12px;
@@ -924,7 +931,7 @@ textarea._Input-input_py9hf_26 {
924
931
  }
925
932
 
926
933
  /* css-module:/home/runner/work/puck/puck/packages/core/components/Modal/styles.module.css/#css-module-data */
927
- ._Modal_ikbaj_1 {
934
+ .Modal {
928
935
  background: color-mix(in srgb, var(--puck-color-black) 75%, transparent);
929
936
  display: none;
930
937
  justify-content: center;
@@ -937,10 +944,10 @@ textarea._Input-input_py9hf_26 {
937
944
  z-index: 1;
938
945
  padding: 32px;
939
946
  }
940
- ._Modal--isOpen_ikbaj_15 {
947
+ .Modal--isOpen {
941
948
  display: flex;
942
949
  }
943
- ._Modal-inner_ikbaj_19 {
950
+ .Modal-inner {
944
951
  width: 100%;
945
952
  max-width: 1024px;
946
953
  border-radius: 8px;
@@ -952,44 +959,44 @@ textarea._Input-input_py9hf_26 {
952
959
  }
953
960
 
954
961
  /* css-module:/home/runner/work/puck/puck/packages/core/components/Heading/styles.module.css/#css-module-data */
955
- ._Heading_qxrry_1 {
962
+ .Heading {
956
963
  display: block;
957
964
  color: var(--puck-color-black);
958
965
  font-weight: 700;
959
966
  margin: 0;
960
967
  }
961
- ._Heading_qxrry_1 b {
968
+ .Heading b {
962
969
  font-weight: 700;
963
970
  }
964
- ._Heading--xxxxl_qxrry_12 {
971
+ .Heading--xxxxl {
965
972
  font-size: var(--puck-font-size-xxxxl);
966
973
  letter-spacing: 0.08ch;
967
974
  font-weight: 800;
968
975
  }
969
- ._Heading--xxxl_qxrry_18 {
976
+ .Heading--xxxl {
970
977
  font-size: var(--puck-font-size-xxxl);
971
978
  }
972
- ._Heading--xxl_qxrry_22 {
979
+ .Heading--xxl {
973
980
  font-size: var(--puck-font-size-xxl);
974
981
  }
975
- ._Heading--xl_qxrry_26 {
982
+ .Heading--xl {
976
983
  font-size: var(--puck-font-size-xl);
977
984
  }
978
- ._Heading--l_qxrry_30 {
985
+ .Heading--l {
979
986
  font-size: var(--puck-font-size-l);
980
987
  }
981
- ._Heading--m_qxrry_34 {
988
+ .Heading--m {
982
989
  font-size: var(--puck-font-size-m);
983
990
  }
984
- ._Heading--s_qxrry_38 {
991
+ .Heading--s {
985
992
  font-size: var(--puck-font-size-s);
986
993
  }
987
- ._Heading--xs_qxrry_42 {
994
+ .Heading--xs {
988
995
  font-size: var(--puck-font-size-xs);
989
996
  }
990
997
 
991
998
  /* css-module:/home/runner/work/puck/puck/packages/core/components/Button/Button.module.css/#css-module-data */
992
- ._Button_10byl_1 {
999
+ .Button {
993
1000
  appearance: none;
994
1001
  background: none;
995
1002
  border: 1px solid transparent;
@@ -1011,81 +1018,81 @@ textarea._Input-input_py9hf_26 {
1011
1018
  white-space: nowrap;
1012
1019
  margin: 0;
1013
1020
  }
1014
- ._Button_10byl_1:hover,
1015
- ._Button_10byl_1:active {
1021
+ .Button:hover,
1022
+ .Button:active {
1016
1023
  transition: none;
1017
1024
  }
1018
- ._Button--medium_10byl_29 {
1025
+ .Button--medium {
1019
1026
  min-height: 34px;
1020
1027
  padding-bottom: 7px;
1021
1028
  padding-inline-start: 19px;
1022
1029
  padding-inline-end: 19px;
1023
1030
  padding-top: 7px;
1024
1031
  }
1025
- ._Button--large_10byl_37 {
1032
+ .Button--large {
1026
1033
  padding-bottom: 11px;
1027
1034
  padding-inline-start: 19px;
1028
1035
  padding-inline-end: 19px;
1029
1036
  padding-top: 11px;
1030
1037
  }
1031
- ._Button-icon_10byl_44 {
1038
+ .Button-icon {
1032
1039
  margin-top: 2px;
1033
1040
  }
1034
- ._Button--primary_10byl_48 {
1041
+ .Button--primary {
1035
1042
  background: var(--puck-color-azure-04);
1036
1043
  }
1037
- ._Button_10byl_1:focus-visible {
1044
+ .Button:focus-visible {
1038
1045
  outline: 2px solid var(--puck-color-azure-05);
1039
1046
  outline-offset: 2px;
1040
1047
  }
1041
1048
  @media (hover: hover) and (pointer: fine) {
1042
- ._Button--primary_10byl_48:hover {
1049
+ .Button--primary:hover {
1043
1050
  background-color: var(--puck-color-azure-03);
1044
1051
  }
1045
1052
  }
1046
- ._Button--primary_10byl_48:active {
1053
+ .Button--primary:active {
1047
1054
  background-color: var(--puck-color-azure-02);
1048
1055
  }
1049
- ._Button--secondary_10byl_67 {
1056
+ .Button--secondary {
1050
1057
  border: 1px solid currentColor;
1051
1058
  color: currentColor;
1052
1059
  }
1053
1060
  @media (hover: hover) and (pointer: fine) {
1054
- ._Button--secondary_10byl_67:hover {
1061
+ .Button--secondary:hover {
1055
1062
  background-color: var(--puck-color-azure-12);
1056
1063
  color: var(--puck-color-black);
1057
1064
  }
1058
1065
  }
1059
- ._Button--secondary_10byl_67:active {
1066
+ .Button--secondary:active {
1060
1067
  background-color: var(--puck-color-azure-11);
1061
1068
  color: var(--puck-color-black);
1062
1069
  }
1063
- ._Button--flush_10byl_84 {
1070
+ .Button--flush {
1064
1071
  border-radius: 0;
1065
1072
  }
1066
- ._Button--disabled_10byl_88,
1067
- ._Button--disabled_10byl_88:hover {
1073
+ .Button--disabled,
1074
+ .Button--disabled:hover {
1068
1075
  background-color: var(--puck-color-grey-07);
1069
1076
  color: var(--puck-color-grey-03);
1070
1077
  cursor: not-allowed;
1071
1078
  }
1072
- ._Button--fullWidth_10byl_95 {
1079
+ .Button--fullWidth {
1073
1080
  justify-content: center;
1074
1081
  width: 100%;
1075
1082
  }
1076
- ._Button-spinner_10byl_100 {
1083
+ .Button-spinner {
1077
1084
  padding-inline-start: 8px;
1078
1085
  }
1079
1086
 
1080
1087
  /* css-module:/home/runner/work/puck/puck/packages/core/components/AutoField/fields/ObjectField/styles.module.css/#css-module-data */
1081
- ._ObjectField_1ua3y_5 {
1088
+ .ObjectField {
1082
1089
  display: flex;
1083
1090
  flex-direction: column;
1084
1091
  background-color: var(--puck-color-white);
1085
1092
  border: 1px solid var(--puck-color-grey-09);
1086
1093
  border-radius: 4px;
1087
1094
  }
1088
- ._ObjectField-fieldset_1ua3y_13 {
1095
+ .ObjectField-fieldset {
1089
1096
  border: none;
1090
1097
  margin: 0;
1091
1098
  min-width: 0;
@@ -1093,16 +1100,16 @@ textarea._Input-input_py9hf_26 {
1093
1100
  }
1094
1101
 
1095
1102
  /* css-module:/home/runner/work/puck/puck/packages/core/components/Drawer/styles.module.css/#css-module-data */
1096
- ._Drawer_pl7z0_1 {
1103
+ .Drawer {
1097
1104
  display: flex;
1098
1105
  flex-direction: column;
1099
1106
  font-family: var(--puck-font-family);
1100
1107
  gap: 12px;
1101
1108
  }
1102
- ._Drawer-draggable_pl7z0_8 {
1109
+ .Drawer-draggable {
1103
1110
  position: relative;
1104
1111
  }
1105
- ._Drawer-draggableBg_pl7z0_12 {
1112
+ .Drawer-draggableBg {
1106
1113
  position: absolute;
1107
1114
  top: 0;
1108
1115
  right: 0;
@@ -1111,7 +1118,7 @@ textarea._Input-input_py9hf_26 {
1111
1118
  pointer-events: none;
1112
1119
  z-index: -1;
1113
1120
  }
1114
- ._DrawerItem-draggable_pl7z0_22 {
1121
+ .DrawerItem-draggable {
1115
1122
  background: var(--puck-color-white);
1116
1123
  cursor: grab;
1117
1124
  padding: 12px;
@@ -1123,54 +1130,58 @@ textarea._Input-input_py9hf_26 {
1123
1130
  align-items: center;
1124
1131
  transition: background-color 50ms ease-in, color 50ms ease-in;
1125
1132
  }
1126
- ._DrawerItem--disabled_pl7z0_35 ._DrawerItem-draggable_pl7z0_22 {
1133
+ .DrawerItem--disabled .DrawerItem-draggable {
1127
1134
  background: var(--puck-color-grey-11);
1128
1135
  color: var(--puck-color-grey-05);
1129
1136
  cursor: not-allowed;
1130
1137
  }
1131
- ._DrawerItem_pl7z0_22:focus-visible {
1138
+ .DrawerItem:focus-visible {
1132
1139
  outline: 0;
1133
1140
  }
1134
- ._Drawer_pl7z0_1:not(._Drawer--isDraggingFrom_pl7z0_45) ._DrawerItem_pl7z0_22:focus-visible ._DrawerItem-draggable_pl7z0_22 {
1141
+ .Drawer:not(.Drawer--isDraggingFrom) .DrawerItem:focus-visible .DrawerItem-draggable {
1135
1142
  border-radius: 4px;
1136
1143
  outline: 2px solid var(--puck-color-azure-05);
1137
1144
  outline-offset: 2px;
1138
1145
  }
1139
1146
  @media (hover: hover) and (pointer: fine) {
1140
- ._Drawer_pl7z0_1:not(._Drawer--isDraggingFrom_pl7z0_45) ._DrawerItem_pl7z0_22:not(._DrawerItem--disabled_pl7z0_35) ._DrawerItem-draggable_pl7z0_22:hover {
1147
+ .Drawer:not(.Drawer--isDraggingFrom) .DrawerItem:not(.DrawerItem--disabled) .DrawerItem-draggable:hover {
1141
1148
  background-color: var(--puck-color-azure-12);
1142
1149
  color: var(--puck-color-azure-04);
1143
1150
  transition: none;
1144
1151
  }
1145
1152
  }
1146
- ._DrawerItem-name_pl7z0_63 {
1153
+ .DrawerItem-name {
1147
1154
  overflow-x: hidden;
1148
1155
  text-overflow: ellipsis;
1149
1156
  white-space: nowrap;
1150
1157
  }
1151
1158
 
1152
1159
  /* css-module:/home/runner/work/puck/puck/packages/core/components/DraggableComponent/styles.module.css/#css-module-data */
1153
- ._DraggableComponent_qzbgx_1 {
1160
+ .DraggableComponent {
1154
1161
  position: absolute;
1155
1162
  pointer-events: none;
1156
1163
  --overlay-background: color-mix( in srgb, var(--puck-color-azure-08) 30%, transparent );
1157
1164
  }
1158
- ._DraggableComponent-overlay_qzbgx_12 {
1159
- cursor: pointer;
1165
+ .DraggableComponent-overlayWrapper {
1160
1166
  height: 100%;
1161
1167
  width: 100%;
1162
1168
  top: 0;
1163
- outline: 2px var(--puck-color-azure-09) solid;
1164
- outline-offset: -2px;
1165
1169
  position: absolute;
1166
1170
  pointer-events: none;
1167
1171
  box-sizing: border-box;
1168
1172
  z-index: 1;
1169
1173
  }
1170
- ._DraggableComponent_qzbgx_1:focus-visible > ._DraggableComponent-overlay_qzbgx_12 {
1174
+ .DraggableComponent-overlay {
1175
+ cursor: pointer;
1176
+ height: 100%;
1177
+ outline: 2px var(--puck-color-azure-09) solid;
1178
+ outline-offset: -2px;
1179
+ width: 100%;
1180
+ }
1181
+ .DraggableComponent:focus-visible > .DraggableComponent-overlayWrapper {
1171
1182
  outline: 1px solid var(--puck-color-azure-05);
1172
1183
  }
1173
- ._DraggableComponent-loadingOverlay_qzbgx_29 {
1184
+ .DraggableComponent-loadingOverlay {
1174
1185
  background: var(--puck-color-white);
1175
1186
  color: var(--puck-color-grey-03);
1176
1187
  border-radius: 4px;
@@ -1185,29 +1196,27 @@ textarea._Input-input_py9hf_26 {
1185
1196
  opacity: 0.8;
1186
1197
  z-index: 1;
1187
1198
  }
1188
- ._DraggableComponent--hover_qzbgx_45:not(._DraggableComponent--isLocked_qzbgx_45) > ._DraggableComponent-overlay_qzbgx_12 {
1199
+ .DraggableComponent--hover > .DraggableComponent-overlayWrapper > .DraggableComponent-overlay {
1189
1200
  background: var(--overlay-background);
1190
- }
1191
- ._DraggableComponent--hover_qzbgx_45 > ._DraggableComponent-overlay_qzbgx_12 {
1192
1201
  outline: 2px var(--puck-color-azure-09) solid;
1193
1202
  }
1194
- ._DraggableComponent--isSelected_qzbgx_54 > ._DraggableComponent-overlay_qzbgx_12 {
1203
+ .DraggableComponent--isSelected > .DraggableComponent-overlayWrapper > .DraggableComponent-overlay {
1195
1204
  outline-color: var(--puck-color-azure-07);
1196
1205
  }
1197
- ._DraggableComponent_qzbgx_1:has(._DraggableComponent--hover_qzbgx_45 > ._DraggableComponent-overlay_qzbgx_12) > ._DraggableComponent-overlay_qzbgx_12 {
1206
+ .DraggableComponent:has(.DraggableComponent--hover > .DraggableComponent-overlayWrapper) > .DraggableComponent-overlayWrapper {
1198
1207
  display: none;
1199
1208
  }
1200
- ._DraggableComponent-actionsOverlay_qzbgx_66 {
1209
+ .DraggableComponent-actionsOverlay {
1201
1210
  position: sticky;
1202
1211
  opacity: 0;
1203
1212
  pointer-events: none;
1204
1213
  z-index: 2;
1205
1214
  }
1206
- ._DraggableComponent--isSelected_qzbgx_54 ._DraggableComponent-actionsOverlay_qzbgx_66 {
1215
+ .DraggableComponent--isSelected .DraggableComponent-actionsOverlay {
1207
1216
  opacity: 1;
1208
1217
  pointer-events: auto;
1209
1218
  }
1210
- ._DraggableComponent-actions_qzbgx_66 {
1219
+ .DraggableComponent-actions {
1211
1220
  position: absolute;
1212
1221
  width: auto;
1213
1222
  cursor: grab;
@@ -1255,7 +1264,7 @@ textarea._Input-input_py9hf_26 {
1255
1264
  }
1256
1265
 
1257
1266
  /* css-module:/home/runner/work/puck/puck/packages/core/components/DropZone/styles.module.css/#css-module-data */
1258
- ._DropZone_1i2sv_1 {
1267
+ .DropZone {
1259
1268
  --resize-animation-ms: 150ms;
1260
1269
  position: relative;
1261
1270
  height: 100%;
@@ -1263,84 +1272,111 @@ textarea._Input-input_py9hf_26 {
1263
1272
  outline-offset: -2px;
1264
1273
  width: 100%;
1265
1274
  }
1266
- ._DropZone--hasChildren_1i2sv_11 {
1275
+ .DropZone--hasChildren {
1267
1276
  min-height: 0;
1268
1277
  }
1269
- ._DropZone_1i2sv_1:empty {
1278
+ .DropZone:empty {
1270
1279
  min-height: var(--min-empty-height);
1271
1280
  }
1272
- [data-puck-entry]:not([data-puck-dragging]) ._DropZone_1i2sv_1 {
1281
+ [data-puck-entry]:not([data-puck-dragging]) .DropZone {
1273
1282
  transition: min-height var(--resize-animation-ms) ease-in;
1274
1283
  }
1275
- ._DropZone--isAreaSelected_1i2sv_24,
1276
- ._DropZone--hoveringOverArea_1i2sv_25:not(._DropZone--isRootZone_1i2sv_25) {
1284
+ .DropZone--isAreaSelected,
1285
+ .DropZone--hoveringOverArea:not(.DropZone--isRootZone) {
1277
1286
  background: color-mix(in srgb, var(--puck-color-azure-09) 30%, transparent);
1278
1287
  outline: 2px dashed var(--puck-color-azure-08);
1279
1288
  }
1280
- ._DropZone_1i2sv_1:empty {
1289
+ .DropZone:empty {
1281
1290
  background: color-mix(in srgb, var(--puck-color-azure-09) 30%, transparent);
1282
1291
  outline: 2px dashed var(--puck-color-azure-08);
1283
1292
  }
1284
- ._DropZone--isDestination_1i2sv_35 {
1293
+ .DropZone--isDestination {
1285
1294
  outline: 2px dashed var(--puck-color-azure-04) !important;
1286
1295
  }
1287
- ._DropZone--isDestination_1i2sv_35:not(._DropZone--isRootZone_1i2sv_25) {
1296
+ .DropZone--isDestination:not(.DropZone--isRootZone) {
1288
1297
  background: color-mix(in srgb, var(--puck-color-azure-09) 30%, transparent) !important;
1289
1298
  }
1290
- ._DropZone-item_1i2sv_47 {
1299
+ .DropZone-item {
1291
1300
  position: relative;
1292
1301
  }
1293
- ._DropZone-hitbox_1i2sv_51 {
1302
+ .DropZone-hitbox {
1294
1303
  position: absolute;
1295
1304
  bottom: -12px;
1296
1305
  height: 24px;
1297
1306
  width: 100%;
1298
1307
  z-index: 1;
1299
1308
  }
1300
- [data-puck-dragging] ._DropZone--isEnabled_1i2sv_59 {
1309
+ [data-puck-dragging] .DropZone--isEnabled {
1301
1310
  outline: 2px dashed var(--puck-color-azure-06);
1302
1311
  }
1303
- ._DropZone_1i2sv_1 > *:not([data-puck-component]) {
1312
+ .DropZone > *:not([data-puck-component]) {
1304
1313
  opacity: 0;
1305
1314
  }
1306
- body:has(._DropZone--isAnimating_1i2sv_68:empty) [data-puck-overlay] {
1315
+ body:has(.DropZone--isAnimating:empty) [data-puck-overlay] {
1307
1316
  opacity: 0 !important;
1308
1317
  }
1309
1318
 
1319
+ /* lib/overlay-portal/styles.css */
1320
+ [data-puck-overlay-portal],
1321
+ [data-puck-overlay-portal] * {
1322
+ pointer-events: auto !important;
1323
+ }
1324
+ [data-puck-overlay-portal]:hover {
1325
+ outline: 2px var(--puck-color-azure-09) dashed;
1326
+ outline-offset: 2px;
1327
+ }
1328
+ [data-puck-overlay-portal]:focus-within {
1329
+ outline: 2px var(--puck-color-azure-07) solid;
1330
+ outline-offset: 2px;
1331
+ }
1332
+
1333
+ /* css-module:/home/runner/work/puck/puck/packages/core/components/InlineTextField/styles.module.css/#css-module-data */
1334
+ .InlineTextField {
1335
+ cursor: text;
1336
+ display: inline-block;
1337
+ }
1338
+ [data-dnd-dragging] .InlineTextField {
1339
+ cursor: none;
1340
+ caret-color: transparent;
1341
+ }
1342
+ [data-dnd-dragging] .InlineTextField::selection {
1343
+ display: none;
1344
+ }
1345
+
1310
1346
  /* css-module:/home/runner/work/puck/puck/packages/core/components/SidebarSection/styles.module.css/#css-module-data */
1311
- ._SidebarSection_8boj8_1 {
1347
+ .SidebarSection {
1312
1348
  display: flex;
1313
1349
  position: relative;
1314
1350
  flex-direction: column;
1315
1351
  color: var(--puck-color-black);
1316
1352
  }
1317
- ._SidebarSection_8boj8_1:last-of-type {
1353
+ .SidebarSection:last-of-type {
1318
1354
  flex-grow: 1;
1319
1355
  }
1320
- ._SidebarSection-title_8boj8_12 {
1356
+ .SidebarSection-title {
1321
1357
  background: var(--puck-color-white);
1322
1358
  padding: 16px;
1323
1359
  border-bottom: 1px solid var(--puck-color-grey-09);
1324
1360
  border-top: 1px solid var(--puck-color-grey-09);
1325
1361
  overflow-x: auto;
1326
1362
  }
1327
- ._SidebarSection--noBorderTop_8boj8_20 > ._SidebarSection-title_8boj8_12 {
1363
+ .SidebarSection--noBorderTop > .SidebarSection-title {
1328
1364
  border-top: 0px;
1329
1365
  }
1330
- ._SidebarSection-content_8boj8_24 {
1366
+ .SidebarSection-content {
1331
1367
  padding: 16px;
1332
1368
  }
1333
- ._SidebarSection--noPadding_8boj8_28 > ._SidebarSection-content_8boj8_24 {
1369
+ .SidebarSection--noPadding > .SidebarSection-content {
1334
1370
  padding: 0px;
1335
1371
  }
1336
- ._SidebarSection--noPadding_8boj8_28 > ._SidebarSection-content_8boj8_24:last-child {
1372
+ .SidebarSection--noPadding > .SidebarSection-content:last-child {
1337
1373
  padding-bottom: 4px;
1338
1374
  }
1339
- ._SidebarSection_8boj8_1:last-of-type ._SidebarSection-content_8boj8_24 {
1375
+ .SidebarSection:last-of-type .SidebarSection-content {
1340
1376
  border-bottom: none;
1341
1377
  flex-grow: 1;
1342
1378
  }
1343
- ._SidebarSection-breadcrumbLabel_8boj8_41 {
1379
+ .SidebarSection-breadcrumbLabel {
1344
1380
  background: none;
1345
1381
  border: 0;
1346
1382
  border-radius: 2px;
@@ -1351,34 +1387,34 @@ body:has(._DropZone--isAnimating_1i2sv_68:empty) [data-puck-overlay] {
1351
1387
  padding: 0;
1352
1388
  transition: color 50ms ease-in;
1353
1389
  }
1354
- ._SidebarSection-breadcrumbLabel_8boj8_41:focus-visible {
1390
+ .SidebarSection-breadcrumbLabel:focus-visible {
1355
1391
  outline: 2px solid var(--puck-color-azure-05);
1356
1392
  outline-offset: 2px;
1357
1393
  }
1358
1394
  @media (hover: hover) and (pointer: fine) {
1359
- ._SidebarSection-breadcrumbLabel_8boj8_41:hover {
1395
+ .SidebarSection-breadcrumbLabel:hover {
1360
1396
  color: var(--puck-color-azure-03);
1361
1397
  transition: none;
1362
1398
  }
1363
1399
  }
1364
- ._SidebarSection-breadcrumbLabel_8boj8_41:active {
1400
+ .SidebarSection-breadcrumbLabel:active {
1365
1401
  color: var(--puck-color-azure-02);
1366
1402
  transition: none;
1367
1403
  }
1368
- ._SidebarSection-breadcrumbs_8boj8_70 {
1404
+ .SidebarSection-breadcrumbs {
1369
1405
  align-items: center;
1370
1406
  display: flex;
1371
1407
  gap: 4px;
1372
1408
  }
1373
- ._SidebarSection-breadcrumb_8boj8_41 {
1409
+ .SidebarSection-breadcrumb {
1374
1410
  align-items: center;
1375
1411
  display: flex;
1376
1412
  gap: 4px;
1377
1413
  }
1378
- ._SidebarSection-heading_8boj8_82 {
1414
+ .SidebarSection-heading {
1379
1415
  padding-inline-end: 16px;
1380
1416
  }
1381
- ._SidebarSection-loadingOverlay_8boj8_86 {
1417
+ .SidebarSection-loadingOverlay {
1382
1418
  background: var(--puck-color-white);
1383
1419
  display: flex;
1384
1420
  justify-content: center;
@@ -1394,23 +1430,25 @@ body:has(._DropZone--isAnimating_1i2sv_68:empty) [data-puck-overlay] {
1394
1430
  }
1395
1431
 
1396
1432
  /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/styles.module.css/#css-module-data */
1397
- ._Puck_dnlfp_19 {
1433
+ .Puck {
1398
1434
  --puck-space-px: 16px;
1399
1435
  font-family: var(--puck-font-family);
1400
1436
  overflow-x: hidden;
1401
1437
  }
1402
1438
  @media (min-width: 766px) {
1403
- ._Puck_dnlfp_19 {
1439
+ .Puck {
1404
1440
  overflow-x: auto;
1405
1441
  }
1406
1442
  }
1407
- ._Puck-portal_dnlfp_31 {
1443
+ .Puck-portal {
1408
1444
  position: relative;
1409
1445
  z-index: 2;
1410
1446
  }
1411
- ._PuckLayout-inner_dnlfp_38 {
1447
+ .PuckLayout-inner {
1412
1448
  --puck-frame-width: auto;
1413
1449
  --puck-side-bar-width: 0px;
1450
+ --puck-left-side-bar-width: var( --puck-user-left-side-bar-width, var(--puck-side-bar-width) );
1451
+ --puck-right-side-bar-width: var( --puck-user-right-side-bar-width, var(--puck-side-bar-width) );
1414
1452
  display: grid;
1415
1453
  grid-template-areas: "header header header" "left editor right";
1416
1454
  grid-template-columns: 0 var(--puck-frame-width) 0;
@@ -1419,79 +1457,63 @@ body:has(._DropZone--isAnimating_1i2sv_68:empty) [data-puck-overlay] {
1419
1457
  position: relative;
1420
1458
  z-index: 0;
1421
1459
  }
1422
- ._PuckLayout--mounted_dnlfp_50 ._PuckLayout-inner_dnlfp_38 {
1460
+ .PuckLayout--mounted .PuckLayout-inner {
1423
1461
  --puck-side-bar-width: 186px;
1424
1462
  }
1425
- ._PuckLayout--leftSideBarVisible_dnlfp_54 ._PuckLayout-inner_dnlfp_38 {
1426
- grid-template-columns: var(--puck-side-bar-width) var(--puck-frame-width) 0;
1463
+ .PuckLayout--leftSideBarVisible .PuckLayout-inner {
1464
+ grid-template-columns: var(--puck-left-side-bar-width) var(--puck-frame-width) 0;
1427
1465
  }
1428
- ._PuckLayout--rightSideBarVisible_dnlfp_60 ._PuckLayout-inner_dnlfp_38 {
1429
- grid-template-columns: 0 var(--puck-frame-width) var(--puck-side-bar-width);
1466
+ .PuckLayout--rightSideBarVisible .PuckLayout-inner {
1467
+ grid-template-columns: 0 var(--puck-frame-width) var(--puck-right-side-bar-width);
1430
1468
  }
1431
- ._PuckLayout--leftSideBarVisible_dnlfp_54._PuckLayout--rightSideBarVisible_dnlfp_60 ._PuckLayout-inner_dnlfp_38 {
1432
- grid-template-columns: var(--puck-side-bar-width) var(--puck-frame-width) var(--puck-side-bar-width);
1469
+ .PuckLayout--leftSideBarVisible.PuckLayout--rightSideBarVisible .PuckLayout-inner {
1470
+ grid-template-columns: var(--puck-left-side-bar-width) var(--puck-frame-width) var(--puck-right-side-bar-width);
1433
1471
  }
1434
1472
  @media (min-width: 458px) {
1435
- ._PuckLayout-mounted_dnlfp_74 ._PuckLayout-inner_dnlfp_38 {
1473
+ .PuckLayout-mounted .PuckLayout-inner {
1436
1474
  --puck-frame-width: minmax(266px, auto);
1437
1475
  }
1438
1476
  }
1439
1477
  @media (min-width: 638px) {
1440
- ._PuckLayout_dnlfp_38 ._PuckLayout-inner_dnlfp_38 {
1478
+ .PuckLayout .PuckLayout-inner {
1441
1479
  --puck-side-bar-width: minmax(186px, 250px);
1442
1480
  }
1443
1481
  }
1444
1482
  @media (min-width: 766px) {
1445
- ._PuckLayout_dnlfp_38 ._PuckLayout-inner_dnlfp_38 {
1483
+ .PuckLayout .PuckLayout-inner {
1446
1484
  --puck-frame-width: auto;
1447
1485
  }
1448
1486
  }
1449
1487
  @media (min-width: 990px) {
1450
- ._PuckLayout_dnlfp_38 ._PuckLayout-inner_dnlfp_38 {
1488
+ .PuckLayout .PuckLayout-inner {
1451
1489
  --puck-side-bar-width: 256px;
1452
1490
  }
1453
1491
  }
1454
1492
  @media (min-width: 1198px) {
1455
- ._PuckLayout_dnlfp_38 ._PuckLayout-inner_dnlfp_38 {
1493
+ .PuckLayout .PuckLayout-inner {
1456
1494
  --puck-side-bar-width: 274px;
1457
1495
  }
1458
1496
  }
1459
1497
  @media (min-width: 1398px) {
1460
- ._PuckLayout_dnlfp_38 ._PuckLayout-inner_dnlfp_38 {
1498
+ .PuckLayout .PuckLayout-inner {
1461
1499
  --puck-side-bar-width: 290px;
1462
1500
  }
1463
1501
  }
1464
1502
  @media (min-width: 1598px) {
1465
- ._PuckLayout_dnlfp_38 ._PuckLayout-inner_dnlfp_38 {
1503
+ .PuckLayout .PuckLayout-inner {
1466
1504
  --puck-side-bar-width: 320px;
1467
1505
  }
1468
1506
  }
1469
- ._PuckLayout-leftSideBar_dnlfp_115 {
1470
- background: var(--puck-color-grey-12);
1471
- border-inline-end: 1px solid var(--puck-color-grey-09);
1472
- display: flex;
1473
- flex-direction: column;
1474
- grid-area: left;
1475
- overflow-y: auto;
1476
- }
1477
- ._PuckLayout-rightSideBar_dnlfp_124 {
1478
- background: var(--puck-color-white);
1479
- border-inline-start: 1px solid var(--puck-color-grey-09);
1480
- display: flex;
1481
- flex-direction: column;
1482
- grid-area: right;
1483
- overflow-y: auto;
1484
- }
1485
1507
 
1486
1508
  /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Fields/styles.module.css/#css-module-data */
1487
- ._PuckFields_10bh7_1 {
1509
+ .PuckFields {
1488
1510
  position: relative;
1489
1511
  font-family: var(--puck-font-family);
1490
1512
  }
1491
- ._PuckFields--isLoading_10bh7_6 {
1513
+ .PuckFields--isLoading {
1492
1514
  min-height: 48px;
1493
1515
  }
1494
- ._PuckFields-loadingOverlay_10bh7_10 {
1516
+ .PuckFields-loadingOverlay {
1495
1517
  background: var(--puck-color-white);
1496
1518
  display: flex;
1497
1519
  justify-content: flex-end;
@@ -1505,40 +1527,40 @@ body:has(._DropZone--isAnimating_1i2sv_68:empty) [data-puck-overlay] {
1505
1527
  box-sizing: border-box;
1506
1528
  opacity: 0.8;
1507
1529
  }
1508
- ._PuckFields-loadingOverlayInner_10bh7_25 {
1530
+ .PuckFields-loadingOverlayInner {
1509
1531
  display: flex;
1510
1532
  padding: 16px;
1511
1533
  position: sticky;
1512
1534
  top: 0;
1513
1535
  }
1514
- ._PuckFields-field_10bh7_32 * {
1536
+ .PuckFields-field * {
1515
1537
  box-sizing: border-box;
1516
1538
  }
1517
- ._PuckFields--wrapFields_10bh7_36 ._PuckFields-field_10bh7_32 {
1539
+ .PuckFields--wrapFields .PuckFields-field {
1518
1540
  color: var(--puck-color-grey-04);
1519
1541
  padding: 16px;
1520
1542
  padding-bottom: 12px;
1521
1543
  display: block;
1522
1544
  }
1523
- ._PuckFields--wrapFields_10bh7_36 ._PuckFields-field_10bh7_32 + ._PuckFields-field_10bh7_32 {
1545
+ .PuckFields--wrapFields .PuckFields-field + .PuckFields-field {
1524
1546
  border-top: 1px solid var(--puck-color-grey-09);
1525
1547
  margin-top: 8px;
1526
1548
  }
1527
1549
 
1528
1550
  /* css-module:/home/runner/work/puck/puck/packages/core/components/ComponentList/styles.module.css/#css-module-data */
1529
- ._ComponentList_1rrlt_1 {
1551
+ .ComponentList {
1530
1552
  max-width: 100%;
1531
1553
  }
1532
- ._ComponentList--isExpanded_1rrlt_5 + ._ComponentList_1rrlt_1 {
1554
+ .ComponentList--isExpanded + .ComponentList {
1533
1555
  margin-top: 12px;
1534
1556
  }
1535
- ._ComponentList-content_1rrlt_9 {
1557
+ .ComponentList-content {
1536
1558
  display: none;
1537
1559
  }
1538
- ._ComponentList--isExpanded_1rrlt_5 > ._ComponentList-content_1rrlt_9 {
1560
+ .ComponentList--isExpanded > .ComponentList-content {
1539
1561
  display: block;
1540
1562
  }
1541
- ._ComponentList-title_1rrlt_17 {
1563
+ .ComponentList-title {
1542
1564
  background-color: transparent;
1543
1565
  border: 0;
1544
1566
  color: var(--puck-color-grey-05);
@@ -1555,38 +1577,38 @@ body:has(._DropZone--isAnimating_1i2sv_68:empty) [data-puck-overlay] {
1555
1577
  border-radius: 4px;
1556
1578
  width: 100%;
1557
1579
  }
1558
- ._ComponentList-title_1rrlt_17:focus-visible {
1580
+ .ComponentList-title:focus-visible {
1559
1581
  outline: 2px solid var(--puck-color-azure-05);
1560
1582
  outline-offset: 2px;
1561
1583
  }
1562
1584
  @media (hover: hover) and (pointer: fine) {
1563
- ._ComponentList-title_1rrlt_17:hover {
1585
+ .ComponentList-title:hover {
1564
1586
  background-color: var(--puck-color-azure-11);
1565
1587
  color: var(--puck-color-azure-04);
1566
1588
  transition: none;
1567
1589
  }
1568
1590
  }
1569
- ._ComponentList-title_1rrlt_17:active {
1591
+ .ComponentList-title:active {
1570
1592
  background-color: var(--puck-color-azure-10);
1571
1593
  transition: none;
1572
1594
  }
1573
- ._ComponentList-titleIcon_1rrlt_53 {
1595
+ .ComponentList-titleIcon {
1574
1596
  margin-inline-start: auto;
1575
1597
  }
1576
1598
 
1577
1599
  /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Preview/styles.module.css/#css-module-data */
1578
- ._PuckPreview_z2rgu_1 {
1600
+ .PuckPreview {
1579
1601
  position: relative;
1580
1602
  height: 100%;
1581
1603
  }
1582
- ._PuckPreview-frame_z2rgu_6 {
1604
+ .PuckPreview-frame {
1583
1605
  border: none;
1584
1606
  height: 100%;
1585
1607
  width: 100%;
1586
1608
  }
1587
1609
 
1588
1610
  /* css-module:/home/runner/work/puck/puck/packages/core/components/LayerTree/styles.module.css/#css-module-data */
1589
- ._LayerTree_7rx04_1 {
1611
+ .LayerTree {
1590
1612
  color: var(--puck-color-grey-03);
1591
1613
  font-family: var(--puck-font-family);
1592
1614
  font-size: var(--puck-font-size-xxs);
@@ -1595,30 +1617,30 @@ body:has(._DropZone--isAnimating_1i2sv_68:empty) [data-puck-overlay] {
1595
1617
  list-style: none;
1596
1618
  padding: 0;
1597
1619
  }
1598
- ._LayerTree-zoneTitle_7rx04_11 {
1620
+ .LayerTree-zoneTitle {
1599
1621
  color: var(--puck-color-grey-05);
1600
1622
  font-size: var(--puck-font-size-xxxs);
1601
1623
  text-transform: uppercase;
1602
1624
  }
1603
- ._LayerTree-helper_7rx04_17 {
1625
+ .LayerTree-helper {
1604
1626
  text-align: center;
1605
1627
  color: var(--puck-color-grey-07);
1606
1628
  margin: 8px 4px;
1607
1629
  }
1608
- ._Layer_7rx04_1 {
1630
+ .Layer {
1609
1631
  position: relative;
1610
1632
  border: 1px solid transparent;
1611
1633
  border-radius: 4px;
1612
1634
  }
1613
- ._Layer-inner_7rx04_29 {
1635
+ .Layer-inner {
1614
1636
  border: 1px solid transparent;
1615
1637
  border-radius: 4px;
1616
1638
  transition: color 50ms ease-in;
1617
1639
  }
1618
- ._Layer--containsZone_7rx04_35 > ._Layer-inner_7rx04_29 {
1640
+ .Layer--containsZone > .Layer-inner {
1619
1641
  padding-inline-start: 0;
1620
1642
  }
1621
- ._Layer-clickable_7rx04_39 {
1643
+ .Layer-clickable {
1622
1644
  align-items: center;
1623
1645
  background: none;
1624
1646
  border: 0;
@@ -1631,65 +1653,65 @@ body:has(._DropZone--isAnimating_1i2sv_68:empty) [data-puck-overlay] {
1631
1653
  padding-inline-end: 4px;
1632
1654
  width: 100%;
1633
1655
  }
1634
- ._Layer-clickable_7rx04_39:focus-visible {
1656
+ .Layer-clickable:focus-visible {
1635
1657
  outline: 2px solid var(--puck-color-azure-05);
1636
1658
  outline-offset: 2px;
1637
1659
  position: relative;
1638
1660
  z-index: 1;
1639
1661
  }
1640
1662
  @media (hover: hover) and (pointer: fine) {
1641
- ._Layer_7rx04_1:not(._Layer--isSelected_7rx04_61) > ._Layer-inner_7rx04_29:hover {
1663
+ .Layer:not(.Layer--isSelected) > .Layer-inner:hover {
1642
1664
  border-color: var(--puck-color-azure-10);
1643
1665
  background: var(--puck-color-azure-11);
1644
1666
  color: var(--puck-color-azure-04);
1645
1667
  transition: none;
1646
1668
  }
1647
1669
  }
1648
- ._Layer--isSelected_7rx04_61 {
1670
+ .Layer--isSelected {
1649
1671
  border-color: var(--puck-color-azure-08);
1650
1672
  }
1651
- ._Layer--isSelected_7rx04_61 > ._Layer-inner_7rx04_29 {
1673
+ .Layer--isSelected > .Layer-inner {
1652
1674
  background: var(--puck-color-azure-10);
1653
1675
  }
1654
- ._Layer--isSelected_7rx04_61 > ._Layer-inner_7rx04_29 > ._Layer-clickable_7rx04_39 > ._Layer-chevron_7rx04_77,
1655
- ._Layer--childIsSelected_7rx04_78 > ._Layer-inner_7rx04_29 > ._Layer-clickable_7rx04_39 > ._Layer-chevron_7rx04_77 {
1676
+ .Layer--isSelected > .Layer-inner > .Layer-clickable > .Layer-chevron,
1677
+ .Layer--childIsSelected > .Layer-inner > .Layer-clickable > .Layer-chevron {
1656
1678
  transform: scaleY(-1);
1657
1679
  }
1658
- ._Layer-zones_7rx04_82 {
1680
+ .Layer-zones {
1659
1681
  display: none;
1660
1682
  margin-inline-start: 12px;
1661
1683
  }
1662
- ._Layer--isSelected_7rx04_61 > ._Layer-zones_7rx04_82,
1663
- ._Layer--childIsSelected_7rx04_78 > ._Layer-zones_7rx04_82 {
1684
+ .Layer--isSelected > .Layer-zones,
1685
+ .Layer--childIsSelected > .Layer-zones {
1664
1686
  display: block;
1665
1687
  }
1666
- ._Layer-zones_7rx04_82 > ._LayerTree_7rx04_1 {
1688
+ .Layer-zones > .LayerTree {
1667
1689
  margin-inline-start: 12px;
1668
1690
  }
1669
- ._Layer-title_7rx04_96,
1670
- ._LayerTree-zoneTitle_7rx04_11 {
1691
+ .Layer-title,
1692
+ .LayerTree-zoneTitle {
1671
1693
  display: flex;
1672
1694
  gap: 8px;
1673
1695
  align-items: center;
1674
1696
  margin: 8px 4px;
1675
1697
  overflow-x: hidden;
1676
1698
  }
1677
- ._Layer-name_7rx04_105 {
1699
+ .Layer-name {
1678
1700
  overflow-x: hidden;
1679
1701
  text-overflow: ellipsis;
1680
1702
  white-space: nowrap;
1681
1703
  }
1682
- ._Layer-icon_7rx04_111 {
1704
+ .Layer-icon {
1683
1705
  color: var(--puck-color-rose-07);
1684
1706
  margin-top: 4px;
1685
1707
  }
1686
- ._Layer-zoneIcon_7rx04_116 {
1708
+ .Layer-zoneIcon {
1687
1709
  color: var(--puck-color-grey-08);
1688
1710
  margin-top: 4px;
1689
1711
  }
1690
1712
 
1691
1713
  /* css-module:/home/runner/work/puck/puck/packages/core/components/ViewportControls/styles.module.css/#css-module-data */
1692
- ._ViewportControls_gejzr_1 {
1714
+ .ViewportControls {
1693
1715
  display: flex;
1694
1716
  background: var(--puck-color-grey-11);
1695
1717
  box-sizing: border-box;
@@ -1702,12 +1724,12 @@ body:has(._DropZone--isAnimating_1i2sv_68:empty) [data-puck-overlay] {
1702
1724
  padding-inline-end: var(--puck-space-px);
1703
1725
  z-index: 1;
1704
1726
  }
1705
- ._ViewportControls-divider_gejzr_15 {
1727
+ .ViewportControls-divider {
1706
1728
  border-inline-end: 1px solid var(--puck-color-grey-09);
1707
1729
  margin-inline-start: 8px;
1708
1730
  margin-inline-end: 8px;
1709
1731
  }
1710
- ._ViewportControls-zoomSelect_gejzr_21 {
1732
+ .ViewportControls-zoomSelect {
1711
1733
  appearance: none;
1712
1734
  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;
1713
1735
  background-size: 10px;
@@ -1718,15 +1740,15 @@ body:has(._DropZone--isAnimating_1i2sv_68:empty) [data-puck-overlay] {
1718
1740
  padding: 0;
1719
1741
  width: 96px;
1720
1742
  }
1721
- ._ViewportControls-zoomSelect_gejzr_21:dir(rtl) {
1743
+ .ViewportControls-zoomSelect:dir(rtl) {
1722
1744
  background-position: 12px calc(50% + 3px);
1723
1745
  }
1724
- ._ViewportButton--isActive_gejzr_38 ._ViewportButton-inner_gejzr_38 {
1746
+ .ViewportButton--isActive .ViewportButton-inner {
1725
1747
  color: var(--puck-color-azure-04);
1726
1748
  }
1727
1749
 
1728
1750
  /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Canvas/styles.module.css/#css-module-data */
1729
- ._PuckCanvas_18jay_1 {
1751
+ .PuckCanvas {
1730
1752
  background: var(--puck-color-grey-11);
1731
1753
  display: flex;
1732
1754
  grid-area: editor;
@@ -1735,15 +1757,15 @@ body:has(._DropZone--isAnimating_1i2sv_68:empty) [data-puck-overlay] {
1735
1757
  overflow: auto;
1736
1758
  }
1737
1759
  @media (min-width: 1198px) {
1738
- ._PuckCanvas_18jay_1 {
1760
+ .PuckCanvas {
1739
1761
  padding: calc(var(--puck-space-px) * 1.5);
1740
1762
  padding-top: var(--puck-space-px);
1741
1763
  }
1742
- ._PuckCanvas_18jay_1:not(._PuckCanvas_18jay_1:has(._PuckCanvas-controls_18jay_16)) {
1764
+ .PuckCanvas:not(.PuckCanvas:has(.PuckCanvas-controls)) {
1743
1765
  padding-top: calc(var(--puck-space-px) * 1.5);
1744
1766
  }
1745
1767
  }
1746
- ._PuckCanvas-inner_18jay_21 {
1768
+ .PuckCanvas-inner {
1747
1769
  display: flex;
1748
1770
  height: 100%;
1749
1771
  justify-content: center;
@@ -1751,7 +1773,7 @@ body:has(._DropZone--isAnimating_1i2sv_68:empty) [data-puck-overlay] {
1751
1773
  position: relative;
1752
1774
  width: 100%;
1753
1775
  }
1754
- ._PuckCanvas-root_18jay_30 {
1776
+ .PuckCanvas-root {
1755
1777
  background: white;
1756
1778
  border: 1px solid var(--puck-color-grey-09);
1757
1779
  box-sizing: content-box;
@@ -1764,20 +1786,20 @@ body:has(._DropZone--isAnimating_1i2sv_68:empty) [data-puck-overlay] {
1764
1786
  opacity: 0;
1765
1787
  }
1766
1788
  @media (min-width: 1198px) {
1767
- ._PuckCanvas-root_18jay_30 {
1789
+ .PuckCanvas-root {
1768
1790
  min-width: unset;
1769
1791
  }
1770
1792
  }
1771
1793
  @media (prefers-reduced-motion: reduce) {
1772
- ._PuckCanvas-root_18jay_30 {
1794
+ .PuckCanvas-root {
1773
1795
  transition: none !important;
1774
1796
  }
1775
1797
  }
1776
- ._PuckCanvas--ready_18jay_55 ._PuckCanvas-root_18jay_30 {
1798
+ .PuckCanvas--ready .PuckCanvas-root {
1777
1799
  pointer-events: unset;
1778
1800
  opacity: 1;
1779
1801
  }
1780
- ._PuckCanvas-loader_18jay_60 {
1802
+ .PuckCanvas-loader {
1781
1803
  align-items: center;
1782
1804
  color: var(--puck-color-grey-06);
1783
1805
  display: flex;
@@ -1786,17 +1808,17 @@ body:has(._DropZone--isAnimating_1i2sv_68:empty) [data-puck-overlay] {
1786
1808
  transition: opacity 250ms ease-out;
1787
1809
  opacity: 0;
1788
1810
  }
1789
- ._PuckCanvas--showLoader_18jay_70 ._PuckCanvas-loader_18jay_60 {
1811
+ .PuckCanvas--showLoader .PuckCanvas-loader {
1790
1812
  opacity: 1;
1791
1813
  }
1792
- ._PuckCanvas--showLoader_18jay_70._PuckCanvas--ready_18jay_55 ._PuckCanvas-loader_18jay_60 {
1814
+ .PuckCanvas--showLoader.PuckCanvas--ready .PuckCanvas-loader {
1793
1815
  opacity: 0;
1794
1816
  height: 0;
1795
1817
  transition: none;
1796
1818
  }
1797
1819
 
1798
1820
  /* css-module:/home/runner/work/puck/puck/packages/core/components/MenuBar/styles.module.css/#css-module-data */
1799
- ._MenuBar_8pf8c_1 {
1821
+ .MenuBar {
1800
1822
  background-color: var(--puck-color-white);
1801
1823
  border-bottom: 1px solid var(--puck-color-grey-09);
1802
1824
  display: none;
@@ -1808,11 +1830,11 @@ body:has(._DropZone--isAnimating_1i2sv_68:empty) [data-puck-overlay] {
1808
1830
  top: 100%;
1809
1831
  z-index: 2;
1810
1832
  }
1811
- ._MenuBar--menuOpen_8pf8c_14 {
1833
+ .MenuBar--menuOpen {
1812
1834
  display: block;
1813
1835
  }
1814
1836
  @media (min-width: 638px) {
1815
- ._MenuBar_8pf8c_1 {
1837
+ .MenuBar {
1816
1838
  border: none;
1817
1839
  display: block;
1818
1840
  margin-top: 0;
@@ -1821,7 +1843,7 @@ body:has(._DropZone--isAnimating_1i2sv_68:empty) [data-puck-overlay] {
1821
1843
  position: static;
1822
1844
  }
1823
1845
  }
1824
- ._MenuBar-inner_8pf8c_29 {
1846
+ .MenuBar-inner {
1825
1847
  align-items: center;
1826
1848
  display: flex;
1827
1849
  flex-wrap: wrap;
@@ -1829,18 +1851,18 @@ body:has(._DropZone--isAnimating_1i2sv_68:empty) [data-puck-overlay] {
1829
1851
  justify-content: flex-end;
1830
1852
  }
1831
1853
  @media (min-width: 638px) {
1832
- ._MenuBar-inner_8pf8c_29 {
1854
+ .MenuBar-inner {
1833
1855
  display: flex;
1834
1856
  flex-direction: row;
1835
1857
  flex-wrap: nowrap;
1836
1858
  }
1837
1859
  }
1838
- ._MenuBar-history_8pf8c_45 {
1860
+ .MenuBar-history {
1839
1861
  display: flex;
1840
1862
  }
1841
1863
 
1842
1864
  /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Header/styles.module.css/#css-module-data */
1843
- ._PuckHeader_15xnq_1 {
1865
+ .PuckHeader {
1844
1866
  background: var(--puck-color-white);
1845
1867
  border-bottom: 1px solid var(--puck-color-grey-09);
1846
1868
  color: var(--puck-color-black);
@@ -1848,7 +1870,7 @@ body:has(._DropZone--isAnimating_1i2sv_68:empty) [data-puck-overlay] {
1848
1870
  position: relative;
1849
1871
  max-width: 100vw;
1850
1872
  }
1851
- ._PuckHeader-inner_15xnq_10 {
1873
+ .PuckHeader-inner {
1852
1874
  align-items: end;
1853
1875
  display: grid;
1854
1876
  gap: var(--puck-space-px);
@@ -1857,39 +1879,102 @@ body:has(._DropZone--isAnimating_1i2sv_68:empty) [data-puck-overlay] {
1857
1879
  grid-template-rows: auto;
1858
1880
  padding: var(--puck-space-px);
1859
1881
  }
1860
- ._PuckHeader-toggle_15xnq_20 {
1882
+ .PuckHeader-toggle {
1861
1883
  color: var(--puck-color-grey-05);
1862
1884
  display: flex;
1863
1885
  margin-inline-start: -4px;
1864
1886
  padding-top: 2px;
1865
1887
  }
1866
- ._PuckHeader--rightSideBarVisible_15xnq_27 ._PuckHeader-rightSideBarToggle_15xnq_27,
1867
- ._PuckHeader--leftSideBarVisible_15xnq_28 ._PuckHeader-leftSideBarToggle_15xnq_28 {
1888
+ .PuckHeader--rightSideBarVisible .PuckHeader-rightSideBarToggle,
1889
+ .PuckHeader--leftSideBarVisible .PuckHeader-leftSideBarToggle {
1868
1890
  color: var(--puck-color-black);
1869
1891
  }
1870
- ._PuckHeader-title_15xnq_32 {
1892
+ .PuckHeader-title {
1871
1893
  align-self: center;
1872
1894
  }
1873
- ._PuckHeader-path_15xnq_36 {
1895
+ .PuckHeader-path {
1874
1896
  font-family: var(--puck-font-family-monospaced);
1875
1897
  font-size: var(--puck-font-size-xxs);
1876
1898
  font-weight: normal;
1877
1899
  word-break: break-all;
1878
1900
  }
1879
- ._PuckHeader-tools_15xnq_43 {
1901
+ .PuckHeader-tools {
1880
1902
  display: flex;
1881
1903
  gap: 16px;
1882
1904
  justify-content: flex-end;
1883
1905
  }
1884
- ._PuckHeader-menuButton_15xnq_49 {
1906
+ .PuckHeader-menuButton {
1885
1907
  color: var(--puck-color-grey-05);
1886
1908
  margin-inline-start: -4px;
1887
1909
  }
1888
- ._PuckHeader--menuOpen_15xnq_54 ._PuckHeader-menuButton_15xnq_49 {
1910
+ .PuckHeader--menuOpen .PuckHeader-menuButton {
1889
1911
  color: var(--puck-color-black);
1890
1912
  }
1891
1913
  @media (min-width: 638px) {
1892
- ._PuckHeader-menuButton_15xnq_49 {
1914
+ .PuckHeader-menuButton {
1893
1915
  display: none;
1894
1916
  }
1895
1917
  }
1918
+
1919
+ /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/ResizeHandle/styles.module.css/#css-module-data */
1920
+ @media (min-width: 766px) {
1921
+ .ResizeHandle {
1922
+ position: absolute;
1923
+ width: 5px;
1924
+ height: 100%;
1925
+ cursor: col-resize;
1926
+ z-index: 10;
1927
+ background: transparent;
1928
+ top: 0;
1929
+ }
1930
+ .ResizeHandle:hover {
1931
+ background: rgba(0, 0, 0, 0.1);
1932
+ }
1933
+ .ResizeHandle--left {
1934
+ right: -3px;
1935
+ }
1936
+ .ResizeHandle--right {
1937
+ left: -3px;
1938
+ }
1939
+ }
1940
+
1941
+ /* components/Puck/components/ResizeHandle/styles.css */
1942
+ [data-resize-overlay] {
1943
+ position: fixed;
1944
+ top: 0;
1945
+ left: 0;
1946
+ right: 0;
1947
+ bottom: 0;
1948
+ z-index: 9999;
1949
+ cursor: col-resize;
1950
+ }
1951
+
1952
+ /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Sidebar/styles.module.css/#css-module-data */
1953
+ .Sidebar {
1954
+ position: relative;
1955
+ display: flex;
1956
+ flex-direction: column;
1957
+ overflow-y: auto;
1958
+ }
1959
+ .Sidebar--left {
1960
+ background: var(--puck-color-grey-12);
1961
+ border-inline-end: 1px solid var(--puck-color-grey-09);
1962
+ grid-area: left;
1963
+ }
1964
+ .Sidebar--right {
1965
+ background: var(--puck-color-white);
1966
+ border-inline-start: 1px solid var(--puck-color-grey-09);
1967
+ grid-area: right;
1968
+ }
1969
+ .Sidebar-resizeHandle {
1970
+ position: absolute;
1971
+ height: 100%;
1972
+ }
1973
+ .Sidebar--left + .Sidebar-resizeHandle {
1974
+ grid-area: left;
1975
+ justify-self: end;
1976
+ }
1977
+ .Sidebar--right + .Sidebar-resizeHandle {
1978
+ grid-area: right;
1979
+ justify-self: start;
1980
+ }