@measured/puck 0.14.0-canary.cc7d391 → 0.14.0-canary.d944288

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
@@ -136,8 +136,8 @@
136
136
 
137
137
  /* styles.css */
138
138
 
139
- /* css-module:/home/runner/work/puck/puck/packages/core/components/Button/Button.module.css/#css-module-data */
140
- ._Button_8fn3a_1 {
139
+ /* components/Button/Button.module.css */
140
+ .Button_Button {
141
141
  appearance: none;
142
142
  background: none;
143
143
  border: 1px solid transparent;
@@ -159,81 +159,83 @@
159
159
  white-space: nowrap;
160
160
  margin: 0;
161
161
  }
162
- ._Button_8fn3a_1:hover,
163
- ._Button_8fn3a_1:active {
162
+ .Button_Button:hover,
163
+ .Button_Button:active {
164
164
  transition: none;
165
165
  }
166
- ._Button--medium_8fn3a_29 {
166
+ .Button_Button--medium {
167
167
  min-height: 34px;
168
168
  padding-bottom: 7px;
169
169
  padding-left: 19px;
170
170
  padding-right: 19px;
171
171
  padding-top: 7px;
172
172
  }
173
- ._Button--large_8fn3a_37 {
173
+ .Button_Button--large {
174
174
  padding-bottom: 11px;
175
175
  padding-left: 19px;
176
176
  padding-right: 19px;
177
177
  padding-top: 11px;
178
178
  }
179
- ._Button-icon_8fn3a_44 {
179
+ .Button_Button-icon {
180
180
  margin-top: 2px;
181
181
  }
182
- ._Button--primary_8fn3a_48 {
182
+ .Button_Button--primary {
183
183
  background: var(--puck-color-azure-04);
184
184
  }
185
- ._Button_8fn3a_1:focus-visible {
185
+ .Button_Button:focus-visible {
186
186
  outline: 2px solid var(--puck-color-azure-05);
187
187
  outline-offset: 2px;
188
188
  }
189
189
  @media (hover: hover) and (pointer: fine) {
190
- ._Button--primary_8fn3a_48:hover {
190
+ .Button_Button--primary:hover {
191
191
  background-color: var(--puck-color-azure-03);
192
192
  }
193
193
  }
194
- ._Button--primary_8fn3a_48:active {
194
+ .Button_Button--primary:active {
195
195
  background-color: var(--puck-color-azure-02);
196
196
  }
197
- ._Button--secondary_8fn3a_67 {
198
- border: 1px solid var(--puck-color-grey-01);
199
- color: var(--puck-color-black);
197
+ .Button_Button--secondary {
198
+ border: 1px solid currentColor;
199
+ color: currentColor;
200
200
  }
201
201
  @media (hover: hover) and (pointer: fine) {
202
- ._Button--secondary_8fn3a_67:hover {
202
+ .Button_Button--secondary:hover {
203
203
  background-color: var(--puck-color-azure-12);
204
+ color: var(--puck-color-black);
204
205
  }
205
206
  }
206
- ._Button--secondary_8fn3a_67:active {
207
+ .Button_Button--secondary:active {
207
208
  background-color: var(--puck-color-azure-11);
209
+ color: var(--puck-color-black);
208
210
  }
209
- ._Button--flush_8fn3a_82 {
211
+ .Button_Button--flush {
210
212
  border-radius: 0;
211
213
  }
212
- ._Button--disabled_8fn3a_86,
213
- ._Button--disabled_8fn3a_86:hover {
214
+ .Button_Button--disabled,
215
+ .Button_Button--disabled:hover {
214
216
  background-color: var(--puck-color-grey-07);
215
217
  color: var(--puck-color-grey-03);
216
218
  cursor: not-allowed;
217
219
  }
218
- ._Button--fullWidth_8fn3a_93 {
220
+ .Button_Button--fullWidth {
219
221
  justify-content: center;
220
222
  width: 100%;
221
223
  }
222
- ._Button-spinner_8fn3a_98 {
224
+ .Button_Button-spinner {
223
225
  padding-left: 8px;
224
226
  }
225
227
 
226
- /* css-module:/home/runner/work/puck/puck/packages/core/components/Drawer/styles.module.css/#css-module-data */
227
- ._Drawer_6zh0b_1 {
228
+ /* components/Drawer/styles.module.css */
229
+ .styles_Drawer {
228
230
  font-family: var(--puck-font-family);
229
231
  }
230
- ._DrawerItem-default_6zh0b_5 ._DrawerItem-draggableWrapper_6zh0b_5 {
232
+ .styles_DrawerItem-default .styles_DrawerItem-draggableWrapper {
231
233
  padding-bottom: 12px;
232
234
  }
233
- ._DrawerItem_6zh0b_5:last-of-type ._DrawerItem-default_6zh0b_5 ._DrawerItem-draggableWrapper_6zh0b_5 {
235
+ .styles_DrawerItem:last-of-type .styles_DrawerItem-default .styles_DrawerItem-draggableWrapper {
234
236
  padding-bottom: 0;
235
237
  }
236
- ._DrawerItem-draggable_6zh0b_5 {
238
+ .styles_DrawerItem-draggable {
237
239
  background: var(--puck-color-white);
238
240
  padding: 12px;
239
241
  display: flex;
@@ -245,77 +247,78 @@
245
247
  cursor: grab;
246
248
  transition: background-color 50ms ease-in, color 50ms ease-in;
247
249
  }
248
- ._DrawerItem_6zh0b_5:focus-visible {
250
+ .styles_DrawerItem:focus-visible {
249
251
  outline: 0;
250
252
  }
251
- ._Drawer_6zh0b_1:not(._Drawer--isDraggingFrom_6zh0b_31) ._DrawerItem_6zh0b_5:focus-visible ._DrawerItem-draggable_6zh0b_5 {
253
+ .styles_Drawer:not(.styles_Drawer--isDraggingFrom) .styles_DrawerItem:focus-visible .styles_DrawerItem-draggable {
252
254
  border-radius: 4px;
253
255
  outline: 2px solid var(--puck-color-azure-05);
254
256
  outline-offset: 2px;
255
257
  }
256
258
  @media (hover: hover) and (pointer: fine) {
257
- ._Drawer_6zh0b_1:not(._Drawer--isDraggingFrom_6zh0b_31) ._DrawerItem-draggable_6zh0b_5:hover {
259
+ .styles_Drawer:not(.styles_Drawer--isDraggingFrom) .styles_DrawerItem-draggable:hover {
258
260
  background-color: var(--puck-color-azure-12);
259
261
  color: var(--puck-color-azure-04);
260
262
  transition: none;
261
263
  }
262
264
  }
263
- ._DrawerItem-name_6zh0b_47 {
265
+ .styles_DrawerItem-name {
264
266
  overflow-x: hidden;
265
267
  text-overflow: ellipsis;
266
268
  white-space: nowrap;
267
269
  }
268
270
 
269
- /* css-module:/home/runner/work/puck/puck/packages/core/components/DragIcon/styles.module.css/#css-module-data */
270
- ._DragIcon_1p5wn_1 {
271
+ /* components/DragIcon/styles.module.css */
272
+ .styles_DragIcon {
271
273
  color: var(--puck-color-grey-05);
272
274
  cursor: grab;
273
275
  padding: 4px;
274
276
  border-radius: 4px;
275
277
  }
276
278
  @media (hover: hover) and (pointer: fine) {
277
- ._DragIcon_1p5wn_1:hover {
279
+ .styles_DragIcon:hover {
278
280
  color: var(--puck-color-azure-05);
279
281
  background-color: var(--puck-color-azure-12);
280
282
  }
281
283
  }
282
284
 
283
- /* css-module:/home/runner/work/puck/puck/packages/core/components/DraggableComponent/styles.module.css/#css-module-data */
284
- ._DraggableComponent_1vpvt_1 {
285
- outline-offset: 0px !important;
285
+ /* components/DraggableComponent/styles.module.css */
286
+ .styles_DraggableComponent {
286
287
  pointer-events: auto;
288
+ --overlay-background: color-mix( in srgb, var(--puck-color-azure-08) 30%, transparent );
287
289
  }
288
- ._DraggableComponent_1vpvt_1:focus-visible {
289
- outline: 2px solid var(--puck-color-azure-05);
290
- }
291
- ._DraggableComponent--isDragging_1vpvt_10 {
290
+ .styles_DraggableComponent--isDragging {
292
291
  background: color-mix(in srgb, var(--puck-color-azure-08) 10%, transparent);
293
- outline: 2px var(--puck-color-azure-09) solid !important;
294
292
  overflow: hidden;
295
293
  }
296
- ._DraggableComponent-contents_1vpvt_16 {
294
+ .styles_DraggableComponent-contents {
297
295
  position: relative;
298
296
  pointer-events: none;
299
297
  z-index: 0;
300
298
  }
301
- ._DraggableComponent-contents_1vpvt_16::before,
302
- ._DraggableComponent-contents_1vpvt_16::after {
299
+ .styles_DraggableComponent-contents::before,
300
+ .styles_DraggableComponent-contents::after {
303
301
  content: " ";
304
302
  display: table;
305
303
  }
306
- ._DraggableComponent-overlay_1vpvt_29 {
307
- display: none;
308
- background: color-mix(in srgb, var(--puck-color-azure-08) 30%, transparent);
304
+ .styles_DraggableComponent-overlay {
309
305
  cursor: pointer;
310
306
  height: 100%;
311
307
  width: 100%;
312
308
  top: 0;
309
+ outline-offset: -2px;
313
310
  position: absolute;
314
- z-index: 0;
315
311
  pointer-events: none;
316
312
  box-sizing: border-box;
313
+ z-index: 1;
314
+ }
315
+ .styles_DraggableComponent:focus-visible > .styles_DraggableComponent-overlay {
316
+ outline: 1px solid var(--puck-color-azure-05);
317
+ }
318
+ .styles_DraggableComponent--isDragging > .styles_DraggableComponent-overlay {
319
+ outline: 1px var(--puck-color-azure-09) solid !important;
317
320
  }
318
- ._DraggableComponent-loadingOverlay_1vpvt_42 {
321
+ .styles_DraggableComponent-loadingOverlay {
319
322
  background: var(--puck-color-white);
320
323
  color: var(--puck-color-grey-03);
321
324
  border-radius: 4px;
@@ -330,40 +333,34 @@
330
333
  opacity: 0.8;
331
334
  z-index: 1;
332
335
  }
333
- ._DraggableComponent_1vpvt_1:hover:not(._DraggableComponent--isLocked_1vpvt_58) > ._DraggableComponent-overlay_1vpvt_29 {
334
- display: block;
336
+ .styles_DraggableComponent:hover:not(.styles_DraggableComponent--isLocked) > .styles_DraggableComponent-overlay {
337
+ background: var(--overlay-background);
335
338
  pointer-events: none;
336
339
  }
337
- ._DraggableComponent--forceHover_1vpvt_64 > ._DraggableComponent-overlay_1vpvt_29 {
338
- display: block;
340
+ .styles_DraggableComponent--forceHover > .styles_DraggableComponent-overlay {
341
+ background: var(--overlay-background);
339
342
  pointer-events: none;
340
343
  }
341
- ._DraggableComponent_1vpvt_1:not(._DraggableComponent--isSelected_1vpvt_69) > ._DraggableComponent-overlay_1vpvt_29 {
344
+ .styles_DraggableComponent:not(.styles_DraggableComponent--isSelected):hover > .styles_DraggableComponent-overlay {
342
345
  outline: 2px var(--puck-color-azure-09) solid !important;
343
346
  }
344
- ._DraggableComponent--indicativeHover_1vpvt_74 > ._DraggableComponent-overlay_1vpvt_29 {
345
- display: block;
346
- background: transparent;
347
+ .styles_DraggableComponent--indicativeHover > .styles_DraggableComponent-overlay {
347
348
  pointer-events: none;
348
349
  }
349
- ._DraggableComponent_1vpvt_1:not(._DraggableComponent--isSelected_1vpvt_69):has(._DraggableComponent_1vpvt_1:hover > ._DraggableComponent-overlay_1vpvt_29) > ._DraggableComponent-overlay_1vpvt_29 {
350
+ .styles_DraggableComponent:not(.styles_DraggableComponent--isSelected):has(.styles_DraggableComponent:hover > .styles_DraggableComponent-overlay) > .styles_DraggableComponent-overlay {
350
351
  display: none;
351
352
  }
352
- ._DraggableComponent--isSelected_1vpvt_69 {
353
+ .styles_DraggableComponent--isSelected > .styles_DraggableComponent-overlay {
353
354
  outline: 2px var(--puck-color-azure-07) solid !important;
354
355
  }
355
- ._DraggableComponent--isSelected_1vpvt_69 > ._DraggableComponent-overlay_1vpvt_29 {
356
- background: none;
356
+ .styles_DraggableComponent--isSelected > .styles_DraggableComponent-actionsOverlay {
357
357
  display: block;
358
358
  position: sticky;
359
- top: 56px;
360
- z-index: 1;
359
+ z-index: 2;
361
360
  }
362
- ._DraggableComponent-actions_1vpvt_100 {
361
+ .styles_DraggableComponent-actions {
363
362
  position: absolute;
364
- right: 6.5px;
365
363
  width: auto;
366
- top: -48px;
367
364
  padding: 4px;
368
365
  border-top-left-radius: 8px;
369
366
  border-top-right-radius: 8px;
@@ -376,11 +373,12 @@
376
373
  gap: 4px;
377
374
  pointer-events: auto;
378
375
  box-sizing: border-box;
376
+ transform-origin: right top;
379
377
  }
380
- ._DraggableComponent--isSelected_1vpvt_69 > ._DraggableComponent-overlay_1vpvt_29 > ._DraggableComponent-actions_1vpvt_100 {
378
+ .styles_DraggableComponent--isSelected > .styles_DraggableComponent-actionsOverlay > .styles_DraggableComponent-actions {
381
379
  display: flex;
382
380
  }
383
- ._DraggableComponent-actionsLabel_1vpvt_125 {
381
+ .styles_DraggableComponent-actionsLabel {
384
382
  color: var(--puck-color-grey-08);
385
383
  display: flex;
386
384
  font-size: var(--puck-font-size-xxxs);
@@ -390,11 +388,11 @@
390
388
  padding-left: 8px;
391
389
  padding-right: 16px;
392
390
  margin-right: 8px;
393
- border-right: 1px solid var(--puck-color-grey-05);
391
+ border-right: 0.5px solid var(--puck-color-grey-05);
394
392
  text-overflow: ellipsis;
395
393
  white-space: nowrap;
396
394
  }
397
- ._DraggableComponent-action_1vpvt_100 {
395
+ .styles_DraggableComponent-action {
398
396
  background: transparent;
399
397
  border: none;
400
398
  color: var(--puck-color-grey-08);
@@ -407,23 +405,23 @@
407
405
  justify-content: center;
408
406
  transition: color 50ms ease-in;
409
407
  }
410
- ._DraggableComponent-action_1vpvt_100:focus-visible {
408
+ .styles_DraggableComponent-action:focus-visible {
411
409
  outline: 2px solid var(--puck-color-azure-05);
412
410
  outline-offset: -2px;
413
411
  }
414
412
  @media (hover: hover) and (pointer: fine) {
415
- ._DraggableComponent-action_1vpvt_100:hover {
413
+ .styles_DraggableComponent-action:hover {
416
414
  color: var(--puck-color-azure-06);
417
415
  transition: none;
418
416
  }
419
417
  }
420
- ._DraggableComponent-action_1vpvt_100:active {
418
+ .styles_DraggableComponent-action:active {
421
419
  color: var(--puck-color-azure-07);
422
420
  transition: none;
423
421
  }
424
422
 
425
- /* css-module:/home/runner/work/puck/puck/packages/core/components/DropZone/styles.module.css/#css-module-data */
426
- ._DropZone_utidm_1 {
423
+ /* components/DropZone/styles.module.css */
424
+ .styles_DropZone {
427
425
  margin-left: auto;
428
426
  margin-right: auto;
429
427
  position: relative;
@@ -431,42 +429,36 @@
431
429
  outline-offset: -1px;
432
430
  width: 100%;
433
431
  }
434
- ._DropZone--zoomEnabled_utidm_10 {
435
- zoom: 1.33;
436
- }
437
- ._DropZone--zoomEnabled_utidm_10 ._DropZone-renderWrapper_utidm_14 {
438
- zoom: 0.75;
439
- }
440
- ._DropZone-content_utidm_18 {
432
+ .styles_DropZone-content {
441
433
  min-height: 128px;
442
434
  height: 100%;
443
435
  }
444
- ._DropZone--userIsDragging_utidm_23 ._DropZone-content_utidm_18 {
436
+ .styles_DropZone--userIsDragging .styles_DropZone-content {
445
437
  pointer-events: all;
446
438
  }
447
- ._DropZone--userIsDragging_utidm_23:not(._DropZone--draggingOverArea_utidm_27):not(._DropZone--draggingNewComponent_utidm_28) > ._DropZone-content_utidm_18 {
439
+ .styles_DropZone--userIsDragging:not(.styles_DropZone--draggingOverArea):not(.styles_DropZone--draggingNewComponent) > .styles_DropZone-content {
448
440
  pointer-events: none;
449
441
  }
450
- ._DropZone--isAreaSelected_utidm_34,
451
- ._DropZone--draggingOverArea_utidm_27:not(:has(._DropZone--hoveringOverArea_utidm_35)),
452
- ._DropZone--hoveringOverArea_utidm_35:not(._DropZone--isDisabled_utidm_36):not(._DropZone--isRootZone_utidm_37) {
453
- background: var(--puck-color-azure-11);
442
+ .styles_DropZone--isAreaSelected,
443
+ .styles_DropZone--draggingOverArea:not(:has(.styles_DropZone--hoveringOverArea)),
444
+ .styles_DropZone--hoveringOverArea:not(.styles_DropZone--isDisabled):not(.styles_DropZone--isRootZone):not(.styles_DropZone--hasChildren) {
445
+ background: color-mix(in srgb, var(--puck-color-azure-09) 30%, transparent);
454
446
  outline: 2px dashed var(--puck-color-azure-08);
455
447
  }
456
- ._DropZone_utidm_1:not(._DropZone--hasChildren_utidm_43) {
457
- background: var(--puck-color-azure-11);
448
+ .styles_DropZone:not(.styles_DropZone--hasChildren) {
449
+ background: color-mix(in srgb, var(--puck-color-azure-09) 30%, transparent);
458
450
  outline: 2px dashed var(--puck-color-azure-08);
459
451
  }
460
- ._DropZone--isDestination_utidm_48 {
452
+ .styles_DropZone--isDestination {
461
453
  outline: 2px dashed var(--puck-color-azure-04) !important;
462
454
  }
463
- ._DropZone--isDestination_utidm_48:not(._DropZone--isRootZone_utidm_37) {
455
+ .styles_DropZone--isDestination:not(.styles_DropZone--isRootZone) {
464
456
  background: var(--puck-color-azure-10) !important;
465
457
  }
466
- ._DropZone-item_utidm_56 {
458
+ .styles_DropZone-item {
467
459
  position: relative;
468
460
  }
469
- ._DropZone-hitbox_utidm_60 {
461
+ .styles_DropZone-hitbox {
470
462
  position: absolute;
471
463
  bottom: -12px;
472
464
  height: 24px;
@@ -474,36 +466,36 @@
474
466
  z-index: 1;
475
467
  }
476
468
 
477
- /* css-module:/home/runner/work/puck/puck/packages/core/components/IconButton/IconButton.module.css/#css-module-data */
478
- ._IconButton_1xqlg_1 {
469
+ /* components/IconButton/IconButton.module.css */
470
+ .IconButton_IconButton {
479
471
  align-items: center;
480
472
  background: transparent;
481
473
  border: none;
482
474
  border-radius: 4px;
483
475
  color: currentColor;
484
- cursor: pointer;
485
476
  display: flex;
486
477
  font-family: var(--puck-font-family);
487
478
  justify-content: center;
488
479
  padding: 4px;
489
480
  transition: background-color 50ms ease-in, color 50ms ease-in;
490
481
  }
491
- ._IconButton_1xqlg_1:focus-visible {
482
+ .IconButton_IconButton:focus-visible {
492
483
  outline: 2px solid var(--puck-color-azure-05);
493
484
  outline-offset: -2px;
494
485
  }
495
486
  @media (hover: hover) and (pointer: fine) {
496
- ._IconButton_1xqlg_1:hover {
487
+ .IconButton_IconButton:hover:not(.IconButton_IconButton--disabled) {
497
488
  background: var(--puck-color-azure-12);
498
489
  color: var(--puck-color-azure-04);
490
+ cursor: pointer;
499
491
  transition: none;
500
492
  }
501
493
  }
502
- ._IconButton_1xqlg_1:active {
494
+ .IconButton_IconButton:active {
503
495
  background: var(--puck-color-azure-11);
504
496
  transition: none;
505
497
  }
506
- ._IconButton-title_1xqlg_33 {
498
+ .IconButton_IconButton-title {
507
499
  clip: rect(0 0 0 0);
508
500
  clip-path: inset(100%);
509
501
  height: 1px;
@@ -512,41 +504,44 @@
512
504
  white-space: nowrap;
513
505
  width: 1px;
514
506
  }
507
+ .IconButton_IconButton--disabled {
508
+ color: var(--puck-color-grey-07);
509
+ }
515
510
 
516
- /* css-module:/home/runner/work/puck/puck/packages/core/components/SidebarSection/styles.module.css/#css-module-data */
517
- ._SidebarSection_125qe_1 {
511
+ /* components/SidebarSection/styles.module.css */
512
+ .styles_SidebarSection {
518
513
  display: flex;
519
514
  position: relative;
520
515
  flex-direction: column;
521
516
  color: var(--puck-color-black);
522
517
  }
523
- ._SidebarSection_125qe_1:last-of-type {
518
+ .styles_SidebarSection:last-of-type {
524
519
  flex-grow: 1;
525
520
  }
526
- ._SidebarSection-title_125qe_12 {
521
+ .styles_SidebarSection-title {
527
522
  background: var(--puck-color-white);
528
523
  padding: 16px;
529
524
  border-bottom: 1px solid var(--puck-color-grey-09);
530
525
  border-top: 1px solid var(--puck-color-grey-09);
531
526
  overflow-x: auto;
532
527
  }
533
- ._SidebarSection--noBorderTop_125qe_20 > ._SidebarSection-title_125qe_12 {
528
+ .styles_SidebarSection--noBorderTop > .styles_SidebarSection-title {
534
529
  border-top: 0px;
535
530
  }
536
- ._SidebarSection-content_125qe_24 {
531
+ .styles_SidebarSection-content {
537
532
  padding: 16px;
538
533
  }
539
- ._SidebarSection--noPadding_125qe_28 > ._SidebarSection-content_125qe_24 {
534
+ .styles_SidebarSection--noPadding > .styles_SidebarSection-content {
540
535
  padding: 0px;
541
536
  }
542
- ._SidebarSection--noPadding_125qe_28 > ._SidebarSection-content_125qe_24:last-child {
537
+ .styles_SidebarSection--noPadding > .styles_SidebarSection-content:last-child {
543
538
  padding-bottom: 4px;
544
539
  }
545
- ._SidebarSection_125qe_1:last-of-type ._SidebarSection-content_125qe_24 {
540
+ .styles_SidebarSection:last-of-type .styles_SidebarSection-content {
546
541
  border-bottom: none;
547
542
  flex-grow: 1;
548
543
  }
549
- ._SidebarSection-breadcrumbLabel_125qe_41 {
544
+ .styles_SidebarSection-breadcrumbLabel {
550
545
  background: none;
551
546
  border: 0;
552
547
  border-radius: 2px;
@@ -557,34 +552,34 @@
557
552
  padding: 0;
558
553
  transition: color 50ms ease-in;
559
554
  }
560
- ._SidebarSection-breadcrumbLabel_125qe_41:focus-visible {
555
+ .styles_SidebarSection-breadcrumbLabel:focus-visible {
561
556
  outline: 2px solid var(--puck-color-azure-05);
562
557
  outline-offset: 2px;
563
558
  }
564
559
  @media (hover: hover) and (pointer: fine) {
565
- ._SidebarSection-breadcrumbLabel_125qe_41:hover {
560
+ .styles_SidebarSection-breadcrumbLabel:hover {
566
561
  color: var(--puck-color-azure-03);
567
562
  transition: none;
568
563
  }
569
564
  }
570
- ._SidebarSection-breadcrumbLabel_125qe_41:active {
565
+ .styles_SidebarSection-breadcrumbLabel:active {
571
566
  color: var(--puck-color-azure-02);
572
567
  transition: none;
573
568
  }
574
- ._SidebarSection-breadcrumbs_125qe_70 {
569
+ .styles_SidebarSection-breadcrumbs {
575
570
  align-items: center;
576
571
  display: flex;
577
572
  gap: 4px;
578
573
  }
579
- ._SidebarSection-breadcrumb_125qe_41 {
574
+ .styles_SidebarSection-breadcrumb {
580
575
  align-items: center;
581
576
  display: flex;
582
577
  gap: 4px;
583
578
  }
584
- ._SidebarSection-heading_125qe_82 {
579
+ .styles_SidebarSection-heading {
585
580
  padding-right: 16px;
586
581
  }
587
- ._SidebarSection-loadingOverlay_125qe_86 {
582
+ .styles_SidebarSection-loadingOverlay {
588
583
  background: var(--puck-color-white);
589
584
  display: flex;
590
585
  justify-content: center;
@@ -599,45 +594,45 @@
599
594
  opacity: 0.8;
600
595
  }
601
596
 
602
- /* css-module:/home/runner/work/puck/puck/packages/core/components/Heading/styles.module.css/#css-module-data */
603
- ._Heading_qxrry_1 {
597
+ /* components/Heading/styles.module.css */
598
+ .styles_Heading {
604
599
  display: block;
605
600
  color: var(--puck-color-black);
606
601
  font-weight: 700;
607
602
  margin: 0;
608
603
  }
609
- ._Heading_qxrry_1 b {
604
+ .styles_Heading b {
610
605
  font-weight: 700;
611
606
  }
612
- ._Heading--xxxxl_qxrry_12 {
607
+ .styles_Heading--xxxxl {
613
608
  font-size: var(--puck-font-size-xxxxl);
614
609
  letter-spacing: 0.08ch;
615
610
  font-weight: 800;
616
611
  }
617
- ._Heading--xxxl_qxrry_18 {
612
+ .styles_Heading--xxxl {
618
613
  font-size: var(--puck-font-size-xxxl);
619
614
  }
620
- ._Heading--xxl_qxrry_22 {
615
+ .styles_Heading--xxl {
621
616
  font-size: var(--puck-font-size-xxl);
622
617
  }
623
- ._Heading--xl_qxrry_26 {
618
+ .styles_Heading--xl {
624
619
  font-size: var(--puck-font-size-xl);
625
620
  }
626
- ._Heading--l_qxrry_30 {
621
+ .styles_Heading--l {
627
622
  font-size: var(--puck-font-size-l);
628
623
  }
629
- ._Heading--m_qxrry_34 {
624
+ .styles_Heading--m {
630
625
  font-size: var(--puck-font-size-m);
631
626
  }
632
- ._Heading--s_qxrry_38 {
627
+ .styles_Heading--s {
633
628
  font-size: var(--puck-font-size-s);
634
629
  }
635
- ._Heading--xs_qxrry_42 {
630
+ .styles_Heading--xs {
636
631
  font-size: var(--puck-font-size-xs);
637
632
  }
638
633
 
639
- /* css-module:/home/runner/work/puck/puck/packages/core/components/MenuBar/styles.module.css/#css-module-data */
640
- ._MenuBar_8pf8c_1 {
634
+ /* components/MenuBar/styles.module.css */
635
+ .styles_MenuBar {
641
636
  background-color: var(--puck-color-white);
642
637
  border-bottom: 1px solid var(--puck-color-grey-09);
643
638
  display: none;
@@ -649,11 +644,11 @@
649
644
  top: 100%;
650
645
  z-index: 2;
651
646
  }
652
- ._MenuBar--menuOpen_8pf8c_14 {
647
+ .styles_MenuBar--menuOpen {
653
648
  display: block;
654
649
  }
655
650
  @media (min-width: 638px) {
656
- ._MenuBar_8pf8c_1 {
651
+ .styles_MenuBar {
657
652
  border: none;
658
653
  display: block;
659
654
  margin-top: 0;
@@ -662,7 +657,7 @@
662
657
  position: static;
663
658
  }
664
659
  }
665
- ._MenuBar-inner_8pf8c_29 {
660
+ .styles_MenuBar-inner {
666
661
  align-items: center;
667
662
  display: flex;
668
663
  flex-wrap: wrap;
@@ -670,18 +665,18 @@
670
665
  justify-content: flex-end;
671
666
  }
672
667
  @media (min-width: 638px) {
673
- ._MenuBar-inner_8pf8c_29 {
668
+ .styles_MenuBar-inner {
674
669
  display: flex;
675
670
  flex-direction: row;
676
671
  flex-wrap: nowrap;
677
672
  }
678
673
  }
679
- ._MenuBar-history_8pf8c_45 {
674
+ .styles_MenuBar-history {
680
675
  display: flex;
681
676
  }
682
677
 
683
- /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/styles.module.css/#css-module-data */
684
- ._Puck_1mnww_19 {
678
+ /* components/Puck/styles.module.css */
679
+ .styles_Puck {
685
680
  --puck-frame-width: auto;
686
681
  --puck-side-bar-width: 186px;
687
682
  --puck-space-px: 16px;
@@ -691,57 +686,57 @@
691
686
  grid-template-areas: "header header header" "left editor right";
692
687
  grid-template-columns: 0 var(--puck-frame-width) 0;
693
688
  grid-template-rows: min-content auto;
694
- height: 100vh;
689
+ height: 100dvh;
695
690
  left: 0;
696
691
  position: fixed;
697
692
  right: 0;
698
693
  top: 0;
699
694
  }
700
- ._Puck--leftSideBarVisible_1mnww_36 {
695
+ .styles_Puck--leftSideBarVisible {
701
696
  grid-template-columns: var(--puck-side-bar-width) var(--puck-frame-width) 0;
702
697
  }
703
- ._Puck--rightSideBarVisible_1mnww_42 {
698
+ .styles_Puck--rightSideBarVisible {
704
699
  grid-template-columns: 0 var(--puck-frame-width) var(--puck-side-bar-width);
705
700
  }
706
- ._Puck--leftSideBarVisible_1mnww_36._Puck--rightSideBarVisible_1mnww_42 {
701
+ .styles_Puck--leftSideBarVisible.styles_Puck--rightSideBarVisible {
707
702
  grid-template-columns: var(--puck-side-bar-width) var(--puck-frame-width) var(--puck-side-bar-width);
708
703
  }
709
704
  @media (min-width: 458px) {
710
- ._Puck_1mnww_19 {
705
+ .styles_Puck {
711
706
  --puck-frame-width: minmax(266px, auto);
712
707
  }
713
708
  }
714
709
  @media (min-width: 638px) {
715
- ._Puck_1mnww_19 {
710
+ .styles_Puck {
716
711
  --puck-side-bar-width: minmax(186px, 250px);
717
712
  }
718
713
  }
719
714
  @media (min-width: 766px) {
720
- ._Puck_1mnww_19 {
715
+ .styles_Puck {
721
716
  --puck-frame-width: auto;
722
717
  }
723
718
  }
724
719
  @media (min-width: 990px) {
725
- ._Puck_1mnww_19 {
720
+ .styles_Puck {
726
721
  --puck-side-bar-width: 256px;
727
722
  }
728
723
  }
729
724
  @media (min-width: 1198px) {
730
- ._Puck_1mnww_19 {
725
+ .styles_Puck {
731
726
  --puck-side-bar-width: 274px;
732
727
  }
733
728
  }
734
729
  @media (min-width: 1398px) {
735
- ._Puck_1mnww_19 {
730
+ .styles_Puck {
736
731
  --puck-side-bar-width: 290px;
737
732
  }
738
733
  }
739
734
  @media (min-width: 1598px) {
740
- ._Puck_1mnww_19 {
735
+ .styles_Puck {
741
736
  --puck-side-bar-width: 320px;
742
737
  }
743
738
  }
744
- ._Puck-header_1mnww_96 {
739
+ .styles_Puck-header {
745
740
  background: var(--puck-color-white);
746
741
  border-bottom: 1px solid var(--puck-color-grey-09);
747
742
  color: var(--puck-color-black);
@@ -749,7 +744,7 @@
749
744
  position: relative;
750
745
  max-width: 100vw;
751
746
  }
752
- ._Puck-headerInner_1mnww_105 {
747
+ .styles_Puck-headerInner {
753
748
  align-items: end;
754
749
  display: grid;
755
750
  gap: var(--puck-space-px);
@@ -758,43 +753,43 @@
758
753
  grid-template-rows: auto;
759
754
  padding: var(--puck-space-px);
760
755
  }
761
- ._Puck-headerToggle_1mnww_115 {
756
+ .styles_Puck-headerToggle {
762
757
  color: var(--puck-color-grey-05);
763
758
  display: flex;
764
759
  margin-left: -4px;
765
760
  padding-top: 2px;
766
761
  }
767
- ._Puck--rightSideBarVisible_1mnww_42 ._Puck-rightSideBarToggle_1mnww_122,
768
- ._Puck--leftSideBarVisible_1mnww_36 ._Puck-leftSideBarToggle_1mnww_123 {
762
+ .styles_Puck--rightSideBarVisible .styles_Puck-rightSideBarToggle,
763
+ .styles_Puck--leftSideBarVisible .styles_Puck-leftSideBarToggle {
769
764
  color: var(--puck-color-black);
770
765
  }
771
- ._Puck-headerTitle_1mnww_127 {
766
+ .styles_Puck-headerTitle {
772
767
  align-self: center;
773
768
  }
774
- ._Puck-headerPath_1mnww_131 {
769
+ .styles_Puck-headerPath {
775
770
  font-family: var(--puck-font-family-monospaced);
776
771
  font-size: var(--puck-font-size-xxs);
777
772
  font-weight: normal;
778
773
  word-break: break-all;
779
774
  }
780
- ._Puck-headerTools_1mnww_138 {
775
+ .styles_Puck-headerTools {
781
776
  display: flex;
782
777
  gap: 16px;
783
778
  justify-content: flex-end;
784
779
  }
785
- ._Puck-menuButton_1mnww_144 {
780
+ .styles_Puck-menuButton {
786
781
  color: var(--puck-color-grey-05);
787
782
  margin-left: -4px;
788
783
  }
789
- ._Puck--menuOpen_1mnww_149 ._Puck-menuButton_1mnww_144 {
784
+ .styles_Puck--menuOpen .styles_Puck-menuButton {
790
785
  color: var(--puck-color-black);
791
786
  }
792
787
  @media (min-width: 638px) {
793
- ._Puck-menuButton_1mnww_144 {
788
+ .styles_Puck-menuButton {
794
789
  display: none;
795
790
  }
796
791
  }
797
- ._Puck-leftSideBar_1mnww_123 {
792
+ .styles_Puck-leftSideBar {
798
793
  background: var(--puck-color-grey-12);
799
794
  border-right: 1px solid var(--puck-color-grey-09);
800
795
  display: flex;
@@ -802,25 +797,7 @@
802
797
  grid-area: left;
803
798
  overflow-y: auto;
804
799
  }
805
- ._Puck-frame_1mnww_168 {
806
- display: flex;
807
- flex-direction: column;
808
- grid-area: editor;
809
- overflow: auto;
810
- position: relative;
811
- }
812
- ._Puck-root_1mnww_176 {
813
- border: 1px solid var(--puck-color-grey-09);
814
- box-shadow: 0 0 0 calc(var(--puck-space-px) * 1.5) var(--puck-color-grey-11);
815
- margin: var(--puck-space-px);
816
- min-width: 321px;
817
- }
818
- @media (min-width: 1198px) {
819
- ._Puck-root_1mnww_176 {
820
- margin: calc(var(--puck-space-px) * 1.5);
821
- }
822
- }
823
- ._Puck-rightSideBar_1mnww_122 {
800
+ .styles_Puck-rightSideBar {
824
801
  background: var(--puck-color-white);
825
802
  border-left: 1px solid var(--puck-color-grey-09);
826
803
  display: flex;
@@ -829,45 +806,45 @@
829
806
  overflow-y: auto;
830
807
  }
831
808
 
832
- /* css-module:/home/runner/work/puck/puck/packages/core/components/InputOrGroup/styles.module.css/#css-module-data */
833
- ._Input_1qi5b_1 {
809
+ /* components/InputOrGroup/styles.module.css */
810
+ .styles_Input {
834
811
  color: var(--puck-color-grey-04);
835
812
  padding: 16px;
836
813
  padding-bottom: 12px;
837
814
  display: block;
838
815
  }
839
- ._Input_1qi5b_1 ._Input_1qi5b_1 {
816
+ .styles_Input .styles_Input {
840
817
  padding: 0px;
841
818
  }
842
- ._Input_1qi5b_1 * {
819
+ .styles_Input * {
843
820
  box-sizing: border-box;
844
821
  }
845
- ._Input_1qi5b_1 + ._Input_1qi5b_1 {
822
+ .styles_Input + .styles_Input {
846
823
  border-top: 1px solid var(--puck-color-grey-09);
847
824
  margin-top: 8px;
848
825
  }
849
- ._Input_1qi5b_1 ._Input_1qi5b_1 + ._Input_1qi5b_1 {
826
+ .styles_Input .styles_Input + .styles_Input {
850
827
  border-top: 0px;
851
828
  margin-top: 12px;
852
829
  }
853
- ._Input-label_1qi5b_26 {
830
+ .styles_Input-label {
854
831
  align-items: center;
855
832
  display: flex;
856
833
  padding-bottom: 12px;
857
834
  font-size: var(--puck-font-size-xxs);
858
835
  font-weight: 600;
859
836
  }
860
- ._Input-labelIcon_1qi5b_34 {
837
+ .styles_Input-labelIcon {
861
838
  color: var(--puck-color-grey-07);
862
839
  display: flex;
863
840
  margin-right: 4px;
864
841
  padding-left: 4px;
865
842
  }
866
- ._Input-disabledIcon_1qi5b_41 {
843
+ .styles_Input-disabledIcon {
867
844
  color: var(--puck-color-grey-05);
868
845
  margin-left: auto;
869
846
  }
870
- ._Input-input_1qi5b_46 {
847
+ .styles_Input-input {
871
848
  background: var(--puck-color-white);
872
849
  border-width: 1px;
873
850
  border-style: solid;
@@ -879,7 +856,7 @@
879
856
  transition: border-color 50ms ease-in;
880
857
  width: 100%;
881
858
  }
882
- select._Input-input_1qi5b_46 {
859
+ select.styles_Input-input {
883
860
  appearance: none;
884
861
  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;
885
862
  background-size: 12px;
@@ -889,25 +866,25 @@ select._Input-input_1qi5b_46 {
889
866
  cursor: pointer;
890
867
  }
891
868
  @media (hover: hover) and (pointer: fine) {
892
- ._Input_1qi5b_1:has(> input):hover ._Input-input_1qi5b_46:not([readonly]),
893
- ._Input_1qi5b_1:has(> textarea):hover ._Input-input_1qi5b_46:not([readonly]) {
869
+ .styles_Input:has(> input):hover .styles_Input-input:not([readonly]),
870
+ .styles_Input:has(> textarea):hover .styles_Input-input:not([readonly]) {
894
871
  border-color: var(--puck-color-grey-05);
895
872
  transition: none;
896
873
  }
897
- ._Input_1qi5b_1:has(> select):hover ._Input-input_1qi5b_46:not([disabled]) {
874
+ .styles_Input:has(> select):hover .styles_Input-input:not([disabled]) {
898
875
  background-color: var(--puck-color-azure-12);
899
876
  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>");
900
877
  border-color: var(--puck-color-grey-05);
901
878
  transition: none;
902
879
  }
903
880
  }
904
- ._Input-input_1qi5b_46:focus {
881
+ .styles_Input-input:focus {
905
882
  border-color: var(--puck-color-grey-05);
906
883
  outline: 2px solid var(--puck-color-azure-05);
907
884
  transition: none;
908
885
  }
909
- ._Input--readOnly_1qi5b_90 > ._Input-input_1qi5b_46,
910
- ._Input--readOnly_1qi5b_90 > select._Input-input_1qi5b_46 {
886
+ .styles_Input--readOnly > .styles_Input-input,
887
+ .styles_Input--readOnly > select.styles_Input-input {
911
888
  background-color: var(--puck-color-grey-11);
912
889
  border-color: var(--puck-color-grey-09);
913
890
  color: var(--puck-color-grey-04);
@@ -916,34 +893,34 @@ select._Input-input_1qi5b_46 {
916
893
  outline: 0;
917
894
  transition: none;
918
895
  }
919
- ._Input-radioGroupItems_1qi5b_101 {
896
+ .styles_Input-radioGroupItems {
920
897
  display: flex;
921
898
  border: 1px solid var(--puck-color-grey-09);
922
899
  border-radius: 4px;
923
900
  flex-wrap: wrap;
924
901
  }
925
- ._Input-radio_1qi5b_101 {
902
+ .styles_Input-radio {
926
903
  border-right: 1px solid var(--puck-color-grey-09);
927
904
  flex-grow: 1;
928
905
  }
929
- ._Input-radio_1qi5b_101:first-of-type {
906
+ .styles_Input-radio:first-of-type {
930
907
  border-bottom-left-radius: 4px;
931
908
  border-top-left-radius: 4px;
932
909
  }
933
- ._Input-radio_1qi5b_101:first-of-type ._Input-radioInner_1qi5b_118 {
910
+ .styles_Input-radio:first-of-type .styles_Input-radioInner {
934
911
  border-bottom-left-radius: 3px;
935
912
  border-top-left-radius: 3px;
936
913
  }
937
- ._Input-radio_1qi5b_101:last-of-type {
914
+ .styles_Input-radio:last-of-type {
938
915
  border-bottom-right-radius: 4px;
939
916
  border-right: 0;
940
917
  border-top-right-radius: 4px;
941
918
  }
942
- ._Input-radio_1qi5b_101:last-of-type ._Input-radioInner_1qi5b_118 {
919
+ .styles_Input-radio:last-of-type .styles_Input-radioInner {
943
920
  border-bottom-right-radius: 3px;
944
921
  border-top-right-radius: 3px;
945
922
  }
946
- ._Input-radioInner_1qi5b_118 {
923
+ .styles_Input-radioInner {
947
924
  background-color: var(--puck-color-white);
948
925
  color: var(--puck-color-grey-04);
949
926
  cursor: pointer;
@@ -952,32 +929,32 @@ select._Input-input_1qi5b_46 {
952
929
  text-align: center;
953
930
  transition: background-color 50ms ease-in;
954
931
  }
955
- ._Input-radio_1qi5b_101:has(:focus-visible) {
932
+ .styles_Input-radio:has(:focus-visible) {
956
933
  outline: 2px solid var(--puck-color-azure-05);
957
934
  outline-offset: 2px;
958
935
  position: relative;
959
936
  }
960
937
  @media (hover: hover) and (pointer: fine) {
961
- ._Input-radioInner_1qi5b_118:hover {
938
+ .styles_Input-radioInner:hover {
962
939
  background-color: var(--puck-color-azure-12);
963
940
  transition: none;
964
941
  }
965
942
  }
966
- ._Input--readOnly_1qi5b_90 ._Input-radioInner_1qi5b_118 {
943
+ .styles_Input--readOnly .styles_Input-radioInner {
967
944
  background-color: var(--puck-color-white);
968
945
  color: var(--puck-color-grey-04);
969
946
  cursor: default;
970
947
  }
971
- ._Input-radio_1qi5b_101 ._Input-radioInput_1qi5b_163:checked ~ ._Input-radioInner_1qi5b_118 {
948
+ .styles_Input-radio .styles_Input-radioInput:checked ~ .styles_Input-radioInner {
972
949
  background-color: var(--puck-color-azure-11);
973
950
  color: var(--puck-color-azure-04);
974
951
  font-weight: 500;
975
952
  }
976
- ._Input--readOnly_1qi5b_90 ._Input-radioInput_1qi5b_163:checked ~ ._Input-radioInner_1qi5b_118 {
953
+ .styles_Input--readOnly .styles_Input-radioInput:checked ~ .styles_Input-radioInner {
977
954
  background-color: var(--puck-color-grey-11);
978
955
  color: var(--puck-color-grey-04);
979
956
  }
980
- ._Input-radio_1qi5b_101 ._Input-radioInput_1qi5b_163 {
957
+ .styles_Input-radio .styles_Input-radioInput {
981
958
  clip: rect(0 0 0 0);
982
959
  clip-path: inset(100%);
983
960
  height: 1px;
@@ -986,22 +963,22 @@ select._Input-input_1qi5b_46 {
986
963
  white-space: nowrap;
987
964
  width: 1px;
988
965
  }
989
- textarea._Input-input_1qi5b_46 {
966
+ textarea.styles_Input-input {
990
967
  margin-bottom: -4px;
991
968
  }
992
969
 
993
- /* css-module:/home/runner/work/puck/puck/packages/core/components/InputOrGroup/fields/ArrayField/styles.module.css/#css-module-data */
994
- ._ArrayField_1txra_5 {
970
+ /* components/InputOrGroup/fields/ArrayField/styles.module.css */
971
+ .styles_ArrayField {
995
972
  display: flex;
996
973
  flex-direction: column;
997
974
  background-color: var(--puck-color-grey-09);
998
975
  border: 1px solid var(--puck-color-grey-09);
999
976
  border-radius: 4px;
1000
977
  }
1001
- ._ArrayField--isDraggingFrom_1txra_13 {
978
+ .styles_ArrayField--isDraggingFrom {
1002
979
  background-color: var(--puck-color-azure-11);
1003
980
  }
1004
- ._ArrayField-addButton_1txra_17 {
981
+ .styles_ArrayField-addButton {
1005
982
  background-color: var(--puck-color-white);
1006
983
  border: none;
1007
984
  border-radius: 4px;
@@ -1015,54 +992,54 @@ textarea._Input-input_1qi5b_46 {
1015
992
  text-align: left;
1016
993
  transition: background-color 50ms ease-in;
1017
994
  }
1018
- ._ArrayField--hasItems_1txra_32 > ._ArrayField-addButton_1txra_17 {
995
+ .styles_ArrayField--hasItems > .styles_ArrayField-addButton {
1019
996
  border-top-left-radius: 0;
1020
997
  border-top-right-radius: 0;
1021
998
  }
1022
- ._ArrayField-addButton_1txra_17:focus-visible {
999
+ .styles_ArrayField-addButton:focus-visible {
1023
1000
  outline: 2px solid var(--puck-color-azure-05);
1024
1001
  outline-offset: 2px;
1025
1002
  position: relative;
1026
1003
  }
1027
1004
  @media (hover: hover) and (pointer: fine) {
1028
- ._ArrayField_1txra_5:not(._ArrayField--isDraggingFrom_1txra_13) > ._ArrayField-addButton_1txra_17:hover {
1005
+ .styles_ArrayField:not(.styles_ArrayField--isDraggingFrom) > .styles_ArrayField-addButton:hover {
1029
1006
  background: var(--puck-color-azure-12);
1030
1007
  color: var(--puck-color-azure-04);
1031
1008
  transition: none;
1032
1009
  }
1033
1010
  }
1034
- ._ArrayField_1txra_5:not(._ArrayField--isDraggingFrom_1txra_13) > ._ArrayField-addButton_1txra_17:active {
1011
+ .styles_ArrayField:not(.styles_ArrayField--isDraggingFrom) > .styles_ArrayField-addButton:active {
1035
1012
  background: var(--puck-color-azure-11);
1036
1013
  color: var(--puck-color-azure-04);
1037
1014
  transition: none;
1038
1015
  }
1039
- ._ArrayFieldItem_1txra_61 {
1016
+ .styles_ArrayFieldItem {
1040
1017
  background: var(--puck-color-white);
1041
1018
  border-top-left-radius: 4px;
1042
1019
  border-top-right-radius: 4px;
1043
1020
  display: block;
1044
1021
  margin-bottom: 1px;
1045
1022
  }
1046
- ._ArrayField--isDraggingFrom_1txra_13 > ._ArrayFieldItem_1txra_61:not(._ArrayFieldItem--isDragging_1txra_69) {
1023
+ .styles_ArrayField--isDraggingFrom > .styles_ArrayFieldItem:not(.styles_ArrayFieldItem--isDragging) {
1047
1024
  border-bottom: 1px solid var(--puck-color-grey-09);
1048
1025
  margin-bottom: 0;
1049
1026
  }
1050
- ._ArrayFieldItem--isExpanded_1txra_74 {
1027
+ .styles_ArrayFieldItem--isExpanded {
1051
1028
  border-bottom: 0;
1052
1029
  outline-offset: 0px !important;
1053
1030
  outline: 1px solid var(--puck-color-azure-07) !important;
1054
1031
  }
1055
- ._ArrayFieldItem--isDragging_1txra_69 {
1032
+ .styles_ArrayFieldItem--isDragging {
1056
1033
  box-shadow: color-mix(in srgb, var(--puck-color-grey-06) 25%, transparent) 0 3px 6px 0;
1057
1034
  }
1058
- ._ArrayFieldItem--isDragging_1txra_69 ._ArrayFieldItem-summary_1txra_84:active {
1035
+ .styles_ArrayFieldItem--isDragging .styles_ArrayFieldItem-summary:active {
1059
1036
  background-color: var(--puck-color-white);
1060
1037
  }
1061
- ._ArrayFieldItem_1txra_61 + ._ArrayFieldItem_1txra_61 {
1038
+ .styles_ArrayFieldItem + .styles_ArrayFieldItem {
1062
1039
  border-top-left-radius: 0;
1063
1040
  border-top-right-radius: 0;
1064
1041
  }
1065
- ._ArrayFieldItem-summary_1txra_84 {
1042
+ .styles_ArrayFieldItem-summary {
1066
1043
  color: var(--puck-color-grey-04);
1067
1044
  cursor: pointer;
1068
1045
  display: flex;
@@ -1076,67 +1053,67 @@ textarea._Input-input_1qi5b_46 {
1076
1053
  overflow: hidden;
1077
1054
  transition: background-color 50ms ease-in;
1078
1055
  }
1079
- ._ArrayFieldItem--readOnly_1txra_108 > ._ArrayFieldItem-summary_1txra_84 {
1056
+ .styles_ArrayFieldItem--readOnly > .styles_ArrayFieldItem-summary {
1080
1057
  background-color: var(--puck-color-grey-12);
1081
1058
  color: var(--puck-color-grey-06);
1082
1059
  }
1083
- ._ArrayFieldItem_1txra_61:first-of-type > ._ArrayFieldItem-summary_1txra_84 {
1060
+ .styles_ArrayFieldItem:first-of-type > .styles_ArrayFieldItem-summary {
1084
1061
  border-top-left-radius: 4px;
1085
1062
  border-top-right-radius: 4px;
1086
1063
  }
1087
- ._ArrayFieldItem-summary_1txra_84:focus-visible {
1064
+ .styles_ArrayFieldItem-summary:focus-visible {
1088
1065
  outline: 2px solid var(--puck-color-azure-05);
1089
1066
  outline-offset: 2px;
1090
1067
  }
1091
1068
  @media (hover: hover) and (pointer: fine) {
1092
- ._ArrayFieldItem-summary_1txra_84:hover {
1069
+ .styles_ArrayFieldItem-summary:hover {
1093
1070
  background-color: var(--puck-color-azure-12);
1094
1071
  transition: none;
1095
1072
  }
1096
1073
  }
1097
- ._ArrayFieldItem-summary_1txra_84:active {
1074
+ .styles_ArrayFieldItem-summary:active {
1098
1075
  background-color: var(--puck-color-azure-11);
1099
1076
  transition: none;
1100
1077
  }
1101
- ._ArrayFieldItem--isExpanded_1txra_74 > ._ArrayFieldItem-summary_1txra_84 {
1078
+ .styles_ArrayFieldItem--isExpanded > .styles_ArrayFieldItem-summary {
1102
1079
  background: var(--puck-color-azure-11);
1103
1080
  color: var(--puck-color-azure-04);
1104
1081
  font-weight: 600;
1105
1082
  transition: none;
1106
1083
  }
1107
- ._ArrayFieldItem-body_1txra_142 {
1084
+ .styles_ArrayFieldItem-body {
1108
1085
  display: none;
1109
1086
  }
1110
- ._ArrayFieldItem--isExpanded_1txra_74 > ._ArrayFieldItem-body_1txra_142 {
1087
+ .styles_ArrayFieldItem--isExpanded > .styles_ArrayFieldItem-body {
1111
1088
  display: block;
1112
1089
  }
1113
- ._ArrayFieldItem-fieldset_1txra_150 {
1090
+ .styles_ArrayFieldItem-fieldset {
1114
1091
  border: none;
1115
1092
  border-top: 1px solid var(--puck-color-grey-09);
1116
1093
  margin: 0;
1117
1094
  padding: 16px 15px;
1118
1095
  }
1119
- ._ArrayFieldItem-rhs_1txra_157 {
1096
+ .styles_ArrayFieldItem-rhs {
1120
1097
  display: flex;
1121
1098
  gap: 4px;
1122
1099
  align-items: center;
1123
1100
  }
1124
- ._ArrayFieldItem-actions_1txra_163 {
1101
+ .styles_ArrayFieldItem-actions {
1125
1102
  color: var(--puck-color-grey-04);
1126
1103
  display: flex;
1127
1104
  gap: 4px;
1128
1105
  opacity: 0;
1129
1106
  }
1130
- ._ArrayFieldItem-summary_1txra_84:focus-within > ._ArrayFieldItem-rhs_1txra_157 > ._ArrayFieldItem-actions_1txra_163,
1131
- ._ArrayFieldItem-summary_1txra_84:hover > ._ArrayFieldItem-rhs_1txra_157 > ._ArrayFieldItem-actions_1txra_163 {
1107
+ .styles_ArrayFieldItem-summary:focus-within > .styles_ArrayFieldItem-rhs > .styles_ArrayFieldItem-actions,
1108
+ .styles_ArrayFieldItem-summary:hover > .styles_ArrayFieldItem-rhs > .styles_ArrayFieldItem-actions {
1132
1109
  opacity: 1;
1133
1110
  }
1134
1111
 
1135
- /* css-module:/home/runner/work/puck/puck/packages/core/components/ExternalInput/styles.module.css/#css-module-data */
1136
- ._ExternalInput-actions_q3l5a_1 {
1112
+ /* components/ExternalInput/styles.module.css */
1113
+ .styles_ExternalInput-actions {
1137
1114
  display: flex;
1138
1115
  }
1139
- ._ExternalInput-button_q3l5a_5 {
1116
+ .styles_ExternalInput-button {
1140
1117
  display: flex;
1141
1118
  gap: 8px;
1142
1119
  align-items: center;
@@ -1155,13 +1132,13 @@ textarea._Input-input_1qi5b_46 {
1155
1132
  overflow: hidden;
1156
1133
  flex-grow: 1;
1157
1134
  }
1158
- ._ExternalInput--dataSelected_q3l5a_25 ._ExternalInput-button_q3l5a_5 {
1135
+ .styles_ExternalInput--dataSelected .styles_ExternalInput-button {
1159
1136
  color: var(--puck-color-grey-03);
1160
1137
  display: block;
1161
1138
  border-top-right-radius: 0px;
1162
1139
  border-bottom-right-radius: 0px;
1163
1140
  }
1164
- ._ExternalInput-detachButton_q3l5a_32 {
1141
+ .styles_ExternalInput-detachButton {
1165
1142
  border: 1px solid var(--puck-color-grey-09);
1166
1143
  border-top-right-radius: 4px;
1167
1144
  border-bottom-right-radius: 4px;
@@ -1177,65 +1154,65 @@ textarea._Input-input_1qi5b_46 {
1177
1154
  transition: background-color 50ms ease-in, color 50ms ease-in;
1178
1155
  margin-left: -1px;
1179
1156
  }
1180
- ._ExternalInput-button_q3l5a_5:focus-visible,
1181
- ._ExternalInput-detachButton_q3l5a_32:focus-visible {
1157
+ .styles_ExternalInput-button:focus-visible,
1158
+ .styles_ExternalInput-detachButton:focus-visible {
1182
1159
  outline: 2px solid var(--puck-color-azure-05);
1183
1160
  outline-offset: 2px;
1184
1161
  z-index: 1;
1185
1162
  }
1186
1163
  @media (hover: hover) and (pointer: fine) {
1187
- ._ExternalInput-button_q3l5a_5:hover,
1188
- ._ExternalInput-detachButton_q3l5a_32:hover {
1164
+ .styles_ExternalInput-button:hover,
1165
+ .styles_ExternalInput-detachButton:hover {
1189
1166
  background: var(--puck-color-azure-12);
1190
1167
  transition: none;
1191
1168
  }
1192
- ._ExternalInput-detachButton_q3l5a_32:hover {
1169
+ .styles_ExternalInput-detachButton:hover {
1193
1170
  color: var(--puck-color-azure-04);
1194
1171
  }
1195
1172
  }
1196
- ._ExternalInput-button_q3l5a_5:active,
1197
- ._ExternalInput-detachButton_q3l5a_32:active {
1173
+ .styles_ExternalInput-button:active,
1174
+ .styles_ExternalInput-detachButton:active {
1198
1175
  background: var(--puck-color-azure-11);
1199
1176
  transition: none;
1200
1177
  }
1201
- ._ExternalInputModal_q3l5a_74 {
1178
+ .styles_ExternalInputModal {
1202
1179
  color: var(--puck-color-black);
1203
1180
  display: grid;
1204
1181
  grid-template-rows: min-content minmax(128px, 100%) min-content;
1205
1182
  grid-template-columns: 100%;
1206
1183
  position: relative;
1207
- min-height: 50vh;
1208
- max-height: 90vh;
1184
+ min-height: 50dvh;
1185
+ max-height: 90dvh;
1209
1186
  }
1210
- ._ExternalInputModal-grid_q3l5a_84 {
1187
+ .styles_ExternalInputModal-grid {
1211
1188
  display: flex;
1212
1189
  flex-direction: column;
1213
1190
  }
1214
1191
  @media (min-width: 458px) {
1215
- ._ExternalInputModal-grid_q3l5a_84 {
1192
+ .styles_ExternalInputModal-grid {
1216
1193
  display: grid;
1217
1194
  grid-template-columns: 100%;
1218
1195
  }
1219
- ._ExternalInputModal--filtersToggled_q3l5a_95 ._ExternalInputModal-grid_q3l5a_84 {
1196
+ .styles_ExternalInputModal--filtersToggled .styles_ExternalInputModal-grid {
1220
1197
  grid-template-columns: 25% 75%;
1221
1198
  }
1222
1199
  }
1223
- ._ExternalInputModal-filters_q3l5a_100 {
1200
+ .styles_ExternalInputModal-filters {
1224
1201
  border-bottom: 1px solid var(--puck-color-grey-09);
1225
1202
  }
1226
- ._ExternalInputModal--filtersToggled_q3l5a_95 ._ExternalInputModal-filters_q3l5a_100 {
1203
+ .styles_ExternalInputModal--filtersToggled .styles_ExternalInputModal-filters {
1227
1204
  display: none;
1228
1205
  }
1229
1206
  @media (min-width: 458px) {
1230
- ._ExternalInputModal-filters_q3l5a_100 {
1207
+ .styles_ExternalInputModal-filters {
1231
1208
  border-right: 1px solid var(--puck-color-grey-09);
1232
1209
  display: none;
1233
1210
  }
1234
- ._ExternalInputModal--filtersToggled_q3l5a_95 ._ExternalInputModal-filters_q3l5a_100 {
1211
+ .styles_ExternalInputModal--filtersToggled .styles_ExternalInputModal-filters {
1235
1212
  display: block;
1236
1213
  }
1237
1214
  }
1238
- ._ExternalInputModal-masthead_q3l5a_119 {
1215
+ .styles_ExternalInputModal-masthead {
1239
1216
  background-color: var(--puck-color-grey-12);
1240
1217
  border-bottom: 1px solid var(--puck-color-grey-09);
1241
1218
  display: flex;
@@ -1243,13 +1220,13 @@ textarea._Input-input_1qi5b_46 {
1243
1220
  gap: 24px;
1244
1221
  padding: 24px;
1245
1222
  }
1246
- ._ExternalInputModal-tableWrapper_q3l5a_128 {
1223
+ .styles_ExternalInputModal-tableWrapper {
1247
1224
  position: relative;
1248
1225
  overflow-x: auto;
1249
1226
  overflow-y: auto;
1250
1227
  flex-grow: 1;
1251
1228
  }
1252
- ._ExternalInputModal-table_q3l5a_128 {
1229
+ .styles_ExternalInputModal-table {
1253
1230
  border-collapse: unset;
1254
1231
  border-spacing: 0px;
1255
1232
  color: var(--puck-color-grey-02);
@@ -1257,51 +1234,51 @@ textarea._Input-input_1qi5b_46 {
1257
1234
  z-index: 0;
1258
1235
  min-width: 100%;
1259
1236
  }
1260
- ._ExternalInputModal-thead_q3l5a_144 {
1237
+ .styles_ExternalInputModal-thead {
1261
1238
  background-color: var(--puck-color-white);
1262
1239
  position: sticky;
1263
1240
  top: 0;
1264
1241
  z-index: 1;
1265
1242
  }
1266
- ._ExternalInputModal-th_q3l5a_144 {
1243
+ .styles_ExternalInputModal-th {
1267
1244
  border-bottom: 1px solid var(--puck-color-grey-09);
1268
1245
  color: var(--puck-color-grey-04);
1269
1246
  font-weight: 500;
1270
1247
  font-size: 14px;
1271
1248
  padding: 16px 24px;
1272
1249
  }
1273
- ._ExternalInputModal-td_q3l5a_159 {
1250
+ .styles_ExternalInputModal-td {
1274
1251
  border-bottom: 1px solid var(--puck-color-grey-10);
1275
1252
  padding: 16px 24px;
1276
1253
  }
1277
- ._ExternalInputModal-tr_q3l5a_164 ._ExternalInputModal-td_q3l5a_159:first-of-type {
1254
+ .styles_ExternalInputModal-tr .styles_ExternalInputModal-td:first-of-type {
1278
1255
  font-weight: 500;
1279
1256
  width: 1%;
1280
1257
  white-space: nowrap;
1281
1258
  }
1282
1259
  @media (hover: hover) and (pointer: fine) {
1283
- ._ExternalInputModal-tbody_q3l5a_171 ._ExternalInputModal-tr_q3l5a_164:hover {
1260
+ .styles_ExternalInputModal-tbody .styles_ExternalInputModal-tr:hover {
1284
1261
  background: var(--puck-color-azure-12);
1285
1262
  color: var(--puck-color-azure-04);
1286
1263
  cursor: pointer;
1287
1264
  position: relative;
1288
1265
  margin-left: -5px;
1289
1266
  }
1290
- ._ExternalInputModal-tbody_q3l5a_171 ._ExternalInputModal-tr_q3l5a_164:hover ._ExternalInputModal-td_q3l5a_159:first-of-type {
1267
+ .styles_ExternalInputModal-tbody .styles_ExternalInputModal-tr:hover .styles_ExternalInputModal-td:first-of-type {
1291
1268
  border-left: 4px solid var(--puck-color-azure-04);
1292
1269
  padding-left: 20px;
1293
1270
  }
1294
1271
  }
1295
- ._ExternalInputModal-tbody_q3l5a_171 ._ExternalInputModal-tr_q3l5a_164:last-of-type ._ExternalInputModal-td_q3l5a_159 {
1272
+ .styles_ExternalInputModal-tbody .styles_ExternalInputModal-tr:last-of-type .styles_ExternalInputModal-td {
1296
1273
  border-bottom: none;
1297
1274
  }
1298
- ._ExternalInputModal-tableWrapper_q3l5a_128 {
1275
+ .styles_ExternalInputModal-tableWrapper {
1299
1276
  display: none;
1300
1277
  }
1301
- ._ExternalInputModal--hasData_q3l5a_197 ._ExternalInputModal-tableWrapper_q3l5a_128 {
1278
+ .styles_ExternalInputModal--hasData .styles_ExternalInputModal-tableWrapper {
1302
1279
  display: block;
1303
1280
  }
1304
- ._ExternalInputModal-loadingBanner_q3l5a_201 {
1281
+ .styles_ExternalInputModal-loadingBanner {
1305
1282
  display: none;
1306
1283
  background-color: color-mix(in srgb, var(--puck-color-white) 90%, transparent);
1307
1284
  padding: 64px;
@@ -1313,21 +1290,21 @@ textarea._Input-input_1qi5b_46 {
1313
1290
  right: 0;
1314
1291
  bottom: 0;
1315
1292
  }
1316
- ._ExternalInputModal--isLoading_q3l5a_218 ._ExternalInputModal-loadingBanner_q3l5a_201 {
1293
+ .styles_ExternalInputModal--isLoading .styles_ExternalInputModal-loadingBanner {
1317
1294
  display: flex;
1318
1295
  }
1319
- ._ExternalInputModal-searchForm_q3l5a_222 {
1296
+ .styles_ExternalInputModal-searchForm {
1320
1297
  display: flex;
1321
1298
  flex-wrap: wrap;
1322
1299
  gap: 12px;
1323
1300
  flex-grow: 1;
1324
1301
  }
1325
1302
  @media (min-width: 458px) {
1326
- ._ExternalInputModal-searchForm_q3l5a_222 {
1303
+ .styles_ExternalInputModal-searchForm {
1327
1304
  flex-wrap: nowrap;
1328
1305
  }
1329
1306
  }
1330
- ._ExternalInputModal-search_q3l5a_222 {
1307
+ .styles_ExternalInputModal-search {
1331
1308
  display: flex;
1332
1309
  background: var(--puck-color-white);
1333
1310
  border-width: 1px;
@@ -1337,18 +1314,18 @@ textarea._Input-input_1qi5b_46 {
1337
1314
  flex-grow: 1;
1338
1315
  transition: border-color 50ms ease-in;
1339
1316
  }
1340
- ._ExternalInputModal-search_q3l5a_222:focus-within {
1317
+ .styles_ExternalInputModal-search:focus-within {
1341
1318
  border-color: var(--puck-color-grey-05);
1342
1319
  outline: 2px solid var(--puck-color-azure-05);
1343
1320
  transition: none;
1344
1321
  }
1345
1322
  @media (hover: hover) and (pointer: fine) {
1346
- ._ExternalInputModal-search_q3l5a_222:hover {
1323
+ .styles_ExternalInputModal-search:hover {
1347
1324
  border-color: var(--puck-color-grey-05);
1348
1325
  transition: none;
1349
1326
  }
1350
1327
  }
1351
- ._ExternalInputModal-searchIcon_q3l5a_259 {
1328
+ .styles_ExternalInputModal-searchIcon {
1352
1329
  align-items: center;
1353
1330
  background: var(--puck-color-grey-12);
1354
1331
  border-bottom-left-radius: 4px;
@@ -1360,17 +1337,17 @@ textarea._Input-input_1qi5b_46 {
1360
1337
  padding: 12px 15px;
1361
1338
  transition: color 50ms ease-in;
1362
1339
  }
1363
- ._ExternalInputModal-search_q3l5a_222:focus-within ._ExternalInputModal-searchIcon_q3l5a_259 {
1340
+ .styles_ExternalInputModal-search:focus-within .styles_ExternalInputModal-searchIcon {
1364
1341
  color: var(--puck-color-grey-04);
1365
1342
  transition: none;
1366
1343
  }
1367
1344
  @media (hover: hover) and (pointer: fine) {
1368
- ._ExternalInputModal-search_q3l5a_222:hover ._ExternalInputModal-searchIcon_q3l5a_259 {
1345
+ .styles_ExternalInputModal-search:hover .styles_ExternalInputModal-searchIcon {
1369
1346
  color: var(--puck-color-grey-04);
1370
1347
  transition: none;
1371
1348
  }
1372
1349
  }
1373
- ._ExternalInputModal-searchIconText_q3l5a_284 {
1350
+ .styles_ExternalInputModal-searchIconText {
1374
1351
  clip: rect(0 0 0 0);
1375
1352
  clip-path: inset(100%);
1376
1353
  height: 1px;
@@ -1379,7 +1356,7 @@ textarea._Input-input_1qi5b_46 {
1379
1356
  white-space: nowrap;
1380
1357
  width: 1px;
1381
1358
  }
1382
- ._ExternalInputModal-searchInput_q3l5a_294 {
1359
+ .styles_ExternalInputModal-searchInput {
1383
1360
  border: none;
1384
1361
  border-radius: 4px;
1385
1362
  background: var(--puck-color-white);
@@ -1388,24 +1365,24 @@ textarea._Input-input_1qi5b_46 {
1388
1365
  padding: 12px 15px;
1389
1366
  width: 100%;
1390
1367
  }
1391
- ._ExternalInputModal-searchInput_q3l5a_294:focus {
1368
+ .styles_ExternalInputModal-searchInput:focus {
1392
1369
  outline: 0;
1393
1370
  }
1394
- ._ExternalInputModal-searchActions_q3l5a_308 {
1371
+ .styles_ExternalInputModal-searchActions {
1395
1372
  display: flex;
1396
1373
  gap: 8px;
1397
1374
  height: 44px;
1398
1375
  width: 100%;
1399
1376
  }
1400
1377
  @media (min-width: 458px) {
1401
- ._ExternalInputModal-searchActions_q3l5a_308 {
1378
+ .styles_ExternalInputModal-searchActions {
1402
1379
  width: auto;
1403
1380
  }
1404
1381
  }
1405
- ._ExternalInputModal-searchActionIcon_q3l5a_321 {
1382
+ .styles_ExternalInputModal-searchActionIcon {
1406
1383
  align-self: center;
1407
1384
  }
1408
- ._ExternalInputModal-footer_q3l5a_325 {
1385
+ .styles_ExternalInputModal-footer {
1409
1386
  background-color: var(--puck-color-grey-12);
1410
1387
  border-top: 1px solid var(--puck-color-grey-09);
1411
1388
  color: var(--puck-color-grey-04);
@@ -1415,8 +1392,8 @@ textarea._Input-input_1qi5b_46 {
1415
1392
  text-align: right;
1416
1393
  }
1417
1394
 
1418
- /* css-module:/home/runner/work/puck/puck/packages/core/components/Modal/styles.module.css/#css-module-data */
1419
- ._Modal_zud0i_1 {
1395
+ /* components/Modal/styles.module.css */
1396
+ .styles_Modal {
1420
1397
  background: color-mix(in srgb, var(--puck-color-black) 75%, transparent);
1421
1398
  display: none;
1422
1399
  justify-content: center;
@@ -1429,10 +1406,10 @@ textarea._Input-input_1qi5b_46 {
1429
1406
  z-index: 1;
1430
1407
  padding: 32px;
1431
1408
  }
1432
- ._Modal--isOpen_zud0i_15 {
1409
+ .styles_Modal--isOpen {
1433
1410
  display: flex;
1434
1411
  }
1435
- ._Modal-inner_zud0i_19 {
1412
+ .styles_Modal-inner {
1436
1413
  width: 100%;
1437
1414
  max-width: 1024px;
1438
1415
  border-radius: 8px;
@@ -1440,29 +1417,29 @@ textarea._Input-input_1qi5b_46 {
1440
1417
  background: var(--puck-color-white);
1441
1418
  display: flex;
1442
1419
  flex-direction: column;
1443
- max-height: 90vh;
1420
+ max-height: 90dvh;
1444
1421
  }
1445
1422
 
1446
- /* css-module:/home/runner/work/puck/puck/packages/core/components/InputOrGroup/fields/ObjectField/styles.module.css/#css-module-data */
1447
- ._ObjectField_15j63_5 {
1423
+ /* components/InputOrGroup/fields/ObjectField/styles.module.css */
1424
+ .styles_ObjectField {
1448
1425
  display: flex;
1449
1426
  flex-direction: column;
1450
1427
  background-color: var(--puck-color-white);
1451
1428
  border: 1px solid var(--puck-color-grey-09);
1452
1429
  border-radius: 4px;
1453
1430
  }
1454
- ._ObjectField-fieldset_15j63_13 {
1431
+ .styles_ObjectField-fieldset {
1455
1432
  border: none;
1456
1433
  margin: 0;
1457
1434
  padding: 16px 15px;
1458
1435
  }
1459
1436
 
1460
- /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Fields/styles.module.css/#css-module-data */
1461
- ._PuckFields_17k3p_1 {
1437
+ /* components/Puck/components/Fields/styles.module.css */
1438
+ .styles_PuckFields {
1462
1439
  position: relative;
1463
1440
  font-family: var(--puck-font-family);
1464
1441
  }
1465
- ._PuckFields-loadingOverlay_17k3p_6 {
1442
+ .styles_PuckFields-loadingOverlay {
1466
1443
  background: var(--puck-color-white);
1467
1444
  display: flex;
1468
1445
  justify-content: center;
@@ -1477,20 +1454,20 @@ textarea._Input-input_1qi5b_46 {
1477
1454
  opacity: 0.8;
1478
1455
  }
1479
1456
 
1480
- /* css-module:/home/runner/work/puck/puck/packages/core/components/ComponentList/styles.module.css/#css-module-data */
1481
- ._ComponentList_odh9d_1 {
1457
+ /* components/ComponentList/styles.module.css */
1458
+ .styles_ComponentList {
1482
1459
  max-width: 100%;
1483
1460
  }
1484
- ._ComponentList--isExpanded_odh9d_5 + ._ComponentList_odh9d_1 {
1461
+ .styles_ComponentList--isExpanded + .styles_ComponentList {
1485
1462
  margin-top: 12px;
1486
1463
  }
1487
- ._ComponentList-content_odh9d_9 {
1464
+ .styles_ComponentList-content {
1488
1465
  display: none;
1489
1466
  }
1490
- ._ComponentList--isExpanded_odh9d_5 > ._ComponentList-content_odh9d_9 {
1467
+ .styles_ComponentList--isExpanded > .styles_ComponentList-content {
1491
1468
  display: block;
1492
1469
  }
1493
- ._ComponentList-title_odh9d_17 {
1470
+ .styles_ComponentList-title {
1494
1471
  background-color: transparent;
1495
1472
  border: 0;
1496
1473
  color: var(--puck-color-grey-05);
@@ -1507,27 +1484,37 @@ textarea._Input-input_1qi5b_46 {
1507
1484
  border-radius: 4px;
1508
1485
  width: 100%;
1509
1486
  }
1510
- ._ComponentList-title_odh9d_17:focus-visible {
1487
+ .styles_ComponentList-title:focus-visible {
1511
1488
  outline: 2px solid var(--puck-color-azure-05);
1512
1489
  outline-offset: 2px;
1513
1490
  }
1514
1491
  @media (hover: hover) and (pointer: fine) {
1515
- ._ComponentList-title_odh9d_17:hover {
1492
+ .styles_ComponentList-title:hover {
1516
1493
  background-color: var(--puck-color-azure-11);
1517
1494
  color: var(--puck-color-azure-04);
1518
1495
  transition: none;
1519
1496
  }
1520
1497
  }
1521
- ._ComponentList-title_odh9d_17:active {
1498
+ .styles_ComponentList-title:active {
1522
1499
  background-color: var(--puck-color-azure-10);
1523
1500
  transition: none;
1524
1501
  }
1525
- ._ComponentList-titleIcon_odh9d_53 {
1502
+ .styles_ComponentList-titleIcon {
1526
1503
  margin-left: auto;
1527
1504
  }
1528
1505
 
1529
- /* css-module:/home/runner/work/puck/puck/packages/core/components/LayerTree/styles.module.css/#css-module-data */
1530
- ._LayerTree_1pgw8_1 {
1506
+ /* components/Puck/components/Preview/styles.module.css */
1507
+ .styles_PuckPreview {
1508
+ height: 100%;
1509
+ }
1510
+ .styles_PuckPreview-frame {
1511
+ border: none;
1512
+ height: 100%;
1513
+ width: 100%;
1514
+ }
1515
+
1516
+ /* components/LayerTree/styles.module.css */
1517
+ .styles_LayerTree {
1531
1518
  color: var(--puck-color-grey-03);
1532
1519
  font-family: var(--puck-font-family);
1533
1520
  font-size: var(--puck-font-size-xxs);
@@ -1536,30 +1523,30 @@ textarea._Input-input_1qi5b_46 {
1536
1523
  list-style: none;
1537
1524
  padding: 0;
1538
1525
  }
1539
- ._LayerTree-zoneTitle_1pgw8_11 {
1526
+ .styles_LayerTree-zoneTitle {
1540
1527
  color: var(--puck-color-grey-05);
1541
1528
  font-size: var(--puck-font-size-xxxs);
1542
1529
  text-transform: uppercase;
1543
1530
  }
1544
- ._LayerTree-helper_1pgw8_17 {
1531
+ .styles_LayerTree-helper {
1545
1532
  text-align: center;
1546
1533
  color: var(--puck-color-grey-07);
1547
1534
  margin: 8px 4px;
1548
1535
  }
1549
- ._Layer_1pgw8_1 {
1536
+ .styles_Layer {
1550
1537
  position: relative;
1551
1538
  border: 1px solid transparent;
1552
1539
  border-radius: 4px;
1553
1540
  }
1554
- ._Layer-inner_1pgw8_29 {
1541
+ .styles_Layer-inner {
1555
1542
  border: 1px solid transparent;
1556
1543
  border-radius: 4px;
1557
1544
  transition: color 50ms ease-in;
1558
1545
  }
1559
- ._Layer--containsZone_1pgw8_35 > ._Layer-inner_1pgw8_29 {
1546
+ .styles_Layer--containsZone > .styles_Layer-inner {
1560
1547
  padding-left: 0;
1561
1548
  }
1562
- ._Layer-clickable_1pgw8_39 {
1549
+ .styles_Layer-clickable {
1563
1550
  align-items: center;
1564
1551
  background: none;
1565
1552
  border: 0;
@@ -1572,59 +1559,146 @@ textarea._Input-input_1qi5b_46 {
1572
1559
  padding-right: 4px;
1573
1560
  width: 100%;
1574
1561
  }
1575
- ._Layer-clickable_1pgw8_39:focus-visible {
1562
+ .styles_Layer-clickable:focus-visible {
1576
1563
  outline: 2px solid var(--puck-color-azure-05);
1577
1564
  outline-offset: 2px;
1578
1565
  position: relative;
1579
1566
  z-index: 1;
1580
1567
  }
1581
1568
  @media (hover: hover) and (pointer: fine) {
1582
- ._Layer_1pgw8_1:not(._Layer--isSelected_1pgw8_61) > ._Layer-inner_1pgw8_29:hover {
1569
+ .styles_Layer:not(.styles_Layer--isSelected) > .styles_Layer-inner:hover {
1583
1570
  border-color: var(--puck-color-azure-10);
1584
1571
  background: var(--puck-color-azure-11);
1585
1572
  color: var(--puck-color-azure-04);
1586
1573
  transition: none;
1587
1574
  }
1588
1575
  }
1589
- ._Layer--isSelected_1pgw8_61 {
1576
+ .styles_Layer--isSelected {
1590
1577
  border-color: var(--puck-color-azure-08);
1591
1578
  }
1592
- ._Layer--isSelected_1pgw8_61 > ._Layer-inner_1pgw8_29 {
1579
+ .styles_Layer--isSelected > .styles_Layer-inner {
1593
1580
  background: var(--puck-color-azure-10);
1594
1581
  }
1595
- ._Layer--isSelected_1pgw8_61 > ._Layer-inner_1pgw8_29 > ._Layer-clickable_1pgw8_39 > ._Layer-chevron_1pgw8_77,
1596
- ._Layer--childIsSelected_1pgw8_78 > ._Layer-inner_1pgw8_29 > ._Layer-clickable_1pgw8_39 > ._Layer-chevron_1pgw8_77 {
1582
+ .styles_Layer--isSelected > .styles_Layer-inner > .styles_Layer-clickable > .styles_Layer-chevron,
1583
+ .styles_Layer--childIsSelected > .styles_Layer-inner > .styles_Layer-clickable > .styles_Layer-chevron {
1597
1584
  transform: scaleY(-1);
1598
1585
  }
1599
- ._Layer-zones_1pgw8_82 {
1586
+ .styles_Layer-zones {
1600
1587
  display: none;
1601
1588
  margin-left: 12px;
1602
1589
  }
1603
- ._Layer--isSelected_1pgw8_61 > ._Layer-zones_1pgw8_82,
1604
- ._Layer--childIsSelected_1pgw8_78 > ._Layer-zones_1pgw8_82 {
1590
+ .styles_Layer--isSelected > .styles_Layer-zones,
1591
+ .styles_Layer--childIsSelected > .styles_Layer-zones {
1605
1592
  display: block;
1606
1593
  }
1607
- ._Layer-zones_1pgw8_82 > ._LayerTree_1pgw8_1 {
1594
+ .styles_Layer-zones > .styles_LayerTree {
1608
1595
  margin-left: 12px;
1609
1596
  }
1610
- ._Layer-title_1pgw8_96,
1611
- ._LayerTree-zoneTitle_1pgw8_11 {
1597
+ .styles_Layer-title,
1598
+ .styles_LayerTree-zoneTitle {
1612
1599
  display: flex;
1613
1600
  gap: 8px;
1614
1601
  align-items: center;
1615
1602
  margin: 8px 4px;
1616
1603
  overflow-x: hidden;
1617
1604
  }
1618
- ._Layer-name_1pgw8_105 {
1605
+ .styles_Layer-name {
1619
1606
  overflow-x: hidden;
1620
1607
  text-overflow: ellipsis;
1621
1608
  white-space: nowrap;
1622
1609
  }
1623
- ._Layer-icon_1pgw8_111 {
1610
+ .styles_Layer-icon {
1624
1611
  color: var(--puck-color-rose-07);
1625
1612
  margin-top: 4px;
1626
1613
  }
1627
- ._Layer-zoneIcon_1pgw8_116 {
1614
+ .styles_Layer-zoneIcon {
1628
1615
  color: var(--puck-color-grey-08);
1629
1616
  margin-top: 4px;
1630
1617
  }
1618
+
1619
+ /* components/ViewportControls/styles.module.css */
1620
+ .styles_ViewportControls {
1621
+ display: flex;
1622
+ background: var(--puck-color-grey-11);
1623
+ box-sizing: border-box;
1624
+ border-left: 2px solid var(--puck-color-grey-11);
1625
+ justify-content: center;
1626
+ gap: 8px;
1627
+ min-width: 358px;
1628
+ padding-bottom: 16px;
1629
+ padding-left: var(--puck-space-px);
1630
+ padding-right: var(--puck-space-px);
1631
+ z-index: 1;
1632
+ }
1633
+ .styles_ViewportControls-divider {
1634
+ border-right: 1px solid var(--puck-color-grey-09);
1635
+ margin-left: 8px;
1636
+ margin-right: 8px;
1637
+ }
1638
+ .styles_ViewportControls-zoomSelect {
1639
+ appearance: none;
1640
+ 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;
1641
+ background-size: 10px;
1642
+ background-position: calc(100% - 12px) calc(50% + 3px);
1643
+ background-repeat: no-repeat;
1644
+ border: 0;
1645
+ font-size: var(--puck-font-size-xxxs);
1646
+ width: 96px;
1647
+ }
1648
+ .styles_ViewportButton--isActive .styles_ViewportButton-inner {
1649
+ color: var(--puck-color-azure-04);
1650
+ }
1651
+
1652
+ /* components/Puck/components/Canvas/styles.module.css */
1653
+ .styles_PuckCanvas {
1654
+ background: var(--puck-color-grey-11);
1655
+ display: flex;
1656
+ grid-area: editor;
1657
+ flex-direction: column;
1658
+ padding: var(--puck-space-px);
1659
+ overflow: auto;
1660
+ }
1661
+ @media (min-width: 1198px) {
1662
+ .styles_PuckCanvas {
1663
+ padding: calc(var(--puck-space-px) * 1.5);
1664
+ padding-top: var(--puck-space-px);
1665
+ }
1666
+ .styles_PuckCanvas:not(.styles_PuckCanvas:has(.styles_PuckCanvas-controls)) {
1667
+ padding-top: calc(var(--puck-space-px) * 1.5);
1668
+ }
1669
+ }
1670
+ .styles_PuckCanvas-inner {
1671
+ box-sizing: border-box;
1672
+ display: flex;
1673
+ height: 100%;
1674
+ justify-content: center;
1675
+ min-width: 358px;
1676
+ overflow: hidden;
1677
+ position: relative;
1678
+ width: 100%;
1679
+ }
1680
+ .styles_PuckCanvas-root {
1681
+ background: white;
1682
+ border: 1px solid var(--puck-color-grey-09);
1683
+ box-sizing: border-box;
1684
+ min-width: 321px;
1685
+ position: absolute;
1686
+ transform-origin: top;
1687
+ top: 0;
1688
+ bottom: 0;
1689
+ opacity: 0;
1690
+ }
1691
+ @media (min-width: 1198px) {
1692
+ .styles_PuckCanvas-root {
1693
+ min-width: unset;
1694
+ }
1695
+ }
1696
+ @media (prefers-reduced-motion: reduce) {
1697
+ .styles_PuckCanvas-root {
1698
+ transition: none !important;
1699
+ }
1700
+ }
1701
+ .styles_PuckCanvas--ready .styles_PuckCanvas-root {
1702
+ opacity: 1;
1703
+ transition: opacity 150ms ease-out;
1704
+ }