@measured/puck 0.12.0-canary.27e3e7e → 0.12.0-canary.349f44d

Sign up to get free protection for your applications and to get access to all the features.
@@ -179,6 +179,7 @@ type ArrayState = {
179
179
  };
180
180
  type UiState = {
181
181
  leftSideBarVisible: boolean;
182
+ rightSideBarVisible: boolean;
182
183
  itemSelector: ItemSelector | null;
183
184
  arrayState: Record<string, ArrayState | undefined>;
184
185
  componentList: Record<string, {
package/dist/index.css CHANGED
@@ -143,71 +143,72 @@
143
143
  /* styles/global.css */
144
144
 
145
145
  /* css-module:/home/runner/work/puck/puck/packages/core/components/Button/Button.module.css/#css-module-data */
146
- ._Button_zx1c8_1 {
146
+ ._Button_1brfa_1 {
147
147
  appearance: none;
148
148
  background: none;
149
149
  border: none;
150
150
  border-radius: 4px;
151
151
  color: white;
152
- display: flex;
152
+ display: inline-flex;
153
153
  align-items: center;
154
154
  gap: 8px;
155
155
  letter-spacing: 0.05ch;
156
- font-family: var(--puck-font-family);
156
+ font-family: var(--puck-font-family-proportional);
157
157
  font-size: 14px;
158
- font-weight: 500;
158
+ font-weight: 400;
159
+ line-height: 1;
159
160
  text-align: center;
160
161
  text-decoration: none;
161
162
  cursor: pointer;
162
163
  white-space: nowrap;
163
164
  margin: 0;
164
165
  }
165
- ._Button--medium_zx1c8_21 {
166
+ ._Button--medium_1brfa_22 {
166
167
  padding-bottom: 8px;
167
168
  padding-left: 20px;
168
169
  padding-right: 20px;
169
170
  padding-top: 8px;
170
171
  }
171
- ._Button--large_zx1c8_28 {
172
+ ._Button--large_1brfa_29 {
172
173
  padding-bottom: 12px;
173
174
  padding-left: 20px;
174
175
  padding-right: 20px;
175
176
  padding-top: 12px;
176
177
  }
177
- ._Button-icon_zx1c8_35 {
178
+ ._Button-icon_1brfa_36 {
178
179
  margin-top: 2px;
179
180
  }
180
- ._Button_zx1c8_1:hover {
181
+ ._Button_1brfa_1:hover {
181
182
  text-decoration: none;
182
183
  }
183
- ._Button--primary_zx1c8_43 {
184
+ ._Button--primary_1brfa_44 {
184
185
  background: var(--puck-color-blue);
185
186
  }
186
- ._Button--primary_zx1c8_43:hover {
187
+ ._Button--primary_1brfa_44:hover {
187
188
  opacity: 0.7;
188
189
  transition: opacity 50ms ease-in;
189
190
  }
190
- ._Button--secondary_zx1c8_52 {
191
+ ._Button--secondary_1brfa_53 {
191
192
  color: currentColor;
192
193
  border: 1px solid currentColor;
193
194
  }
194
- ._Button--secondary_zx1c8_52:hover {
195
+ ._Button--secondary_1brfa_53:hover {
195
196
  background-color: var(--puck-color-grey-10);
196
197
  color: black;
197
198
  opacity: 0.7;
198
199
  }
199
- ._Button--flush_zx1c8_63 {
200
+ ._Button--flush_1brfa_64 {
200
201
  border-radius: 0;
201
202
  }
202
- ._Button--disabled_zx1c8_67 {
203
+ ._Button--disabled_1brfa_68 {
203
204
  background: var(--puck-color-grey-10);
204
205
  color: black;
205
206
  cursor: not-allowed;
206
207
  }
207
- ._Button--disabled_zx1c8_67:hover {
208
+ ._Button--disabled_1brfa_68:hover {
208
209
  opacity: 1;
209
210
  }
210
- ._Button--fullWidth_zx1c8_77 {
211
+ ._Button--fullWidth_1brfa_78 {
211
212
  width: 100%;
212
213
  }
213
214
 
@@ -382,71 +383,81 @@
382
383
  }
383
384
 
384
385
  /* css-module:/home/runner/work/puck/puck/packages/core/components/IconButton/IconButton.module.css/#css-module-data */
385
- ._IconButton_13gzt_1 {
386
+ ._IconButton_38xdr_1 {
387
+ align-items: center;
386
388
  background: transparent;
387
389
  border: none;
388
- color: var(--puck-color-grey-3);
390
+ border-radius: 4px;
391
+ color: currentColor;
389
392
  display: flex;
390
- align-items: center;
391
393
  justify-content: center;
392
- border-radius: 4px;
393
394
  padding: 4px;
394
395
  }
395
- ._IconButton_13gzt_1:hover {
396
+ ._IconButton_38xdr_1:hover {
396
397
  background: var(--puck-color-grey-9);
397
398
  color: var(--puck-color-blue);
398
399
  cursor: pointer;
399
400
  }
401
+ ._IconButton-title_38xdr_18 {
402
+ clip: rect(0 0 0 0);
403
+ clip-path: inset(100%);
404
+ height: 1px;
405
+ overflow: hidden;
406
+ position: absolute;
407
+ white-space: nowrap;
408
+ width: 1px;
409
+ }
400
410
 
401
411
  /* css-module:/home/runner/work/puck/puck/packages/core/components/InputOrGroup/styles.module.css/#css-module-data */
402
- ._Input_199j9_1 {
412
+ ._Input_1jyrm_1 {
403
413
  color: var(--puck-color-grey-3);
404
414
  padding: 16px;
405
415
  padding-bottom: 12px;
406
416
  display: block;
407
417
  font-family: var(--puck-font-stack);
408
418
  }
409
- ._Input_199j9_1 ._Input_199j9_1 {
419
+ ._Input_1jyrm_1 ._Input_1jyrm_1 {
410
420
  padding: 0px;
411
421
  }
412
- ._Input_199j9_1 * {
422
+ ._Input_1jyrm_1 * {
413
423
  box-sizing: border-box;
414
424
  }
415
- ._Input_199j9_1 + ._Input_199j9_1 {
425
+ ._Input_1jyrm_1 + ._Input_1jyrm_1 {
416
426
  border-top: 1px solid var(--puck-color-grey-8);
417
427
  margin-top: 8px;
418
428
  }
419
- ._Input_199j9_1 ._Input_199j9_1 + ._Input_199j9_1 {
429
+ ._Input_1jyrm_1 ._Input_1jyrm_1 + ._Input_1jyrm_1 {
420
430
  border-top: 0px;
421
431
  margin-top: 12px;
422
432
  }
423
- ._Input-label_199j9_27 {
433
+ ._Input-label_1jyrm_27 {
424
434
  align-items: center;
425
435
  display: flex;
426
436
  padding-bottom: 12px;
427
437
  font-size: var(--puck-font-size-xxs);
428
438
  font-weight: 600;
429
439
  }
430
- ._Input-labelIcon_199j9_35 {
440
+ ._Input-labelIcon_1jyrm_35 {
431
441
  color: var(--puck-color-grey-6);
432
442
  margin-right: 4px;
433
443
  padding-left: 4px;
434
444
  }
435
- ._Input-disabledIcon_199j9_41 {
445
+ ._Input-disabledIcon_1jyrm_41 {
436
446
  color: var(--puck-color-grey-4);
437
447
  margin-left: auto;
438
448
  }
439
- ._Input-input_199j9_46 {
449
+ ._Input-input_1jyrm_46 {
440
450
  background: white;
441
451
  border-width: 1px;
442
452
  border-style: solid;
443
453
  border-color: var(--puck-color-grey-8);
444
454
  border-radius: 4px;
445
455
  font-family: inherit;
456
+ font-size: 14px;
446
457
  padding: 12px 15px;
447
458
  width: 100%;
448
459
  }
449
- ._Input_199j9_1 select._Input-input_199j9_46 {
460
+ ._Input_1jyrm_1 select._Input-input_1jyrm_46 {
450
461
  appearance: none;
451
462
  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;
452
463
  background-size: 12px;
@@ -454,81 +465,81 @@
454
465
  background-repeat: no-repeat;
455
466
  background-color: white;
456
467
  }
457
- ._Input--readOnly_199j9_68 > ._Input-input_199j9_46,
458
- ._Input--readOnly_199j9_68 > select._Input-input_199j9_46 {
468
+ ._Input--readOnly_1jyrm_69 > ._Input-input_1jyrm_46,
469
+ ._Input--readOnly_1jyrm_69 > select._Input-input_1jyrm_46 {
459
470
  background-color: var(--puck-color-grey-11);
460
471
  border-color: var(--puck-color-grey-8);
461
472
  color: var(--puck-color-grey-5);
462
473
  opacity: 1;
463
474
  }
464
- ._Input-input_199j9_46:hover {
475
+ ._Input-input_1jyrm_46:hover {
465
476
  border-color: var(--puck-color-neutral-3);
466
477
  }
467
- ._Input-input_199j9_46:focus {
478
+ ._Input-input_1jyrm_46:focus {
468
479
  border-color: var(--puck-color-azure-4);
469
480
  outline: var(--puck-color-azure-8) 4px solid;
470
481
  outline-offset: 0;
471
482
  }
472
- ._Input-radioGroupItems_199j9_86 {
483
+ ._Input-radioGroupItems_1jyrm_87 {
473
484
  display: flex;
474
485
  border: 1px solid var(--puck-color-grey-7);
475
486
  border-radius: 4px;
476
487
  flex-wrap: wrap;
477
488
  overflow: hidden;
478
489
  }
479
- ._Input-radio_199j9_86 {
490
+ ._Input-radio_1jyrm_87 {
480
491
  border-right: 1px solid var(--puck-color-grey-7);
481
492
  flex-grow: 1;
482
493
  }
483
- ._Input-radio_199j9_86:last-of-type {
494
+ ._Input-radio_1jyrm_87:last-of-type {
484
495
  border-right: none;
485
496
  }
486
- ._Input-radioInner_199j9_103 {
497
+ ._Input-radioInner_1jyrm_104 {
487
498
  background-color: white;
488
499
  color: var(--puck-color-grey-4);
489
500
  font-size: var(--puck-font-size-xxxs);
490
501
  padding: 8px 12px;
491
502
  text-align: center;
492
503
  }
493
- ._Input-radioInner_199j9_103:hover {
504
+ ._Input-radioInner_1jyrm_104:hover {
494
505
  background-color: var(--puck-color-azure-9);
495
506
  cursor: pointer;
496
507
  }
497
- ._Input--readOnly_199j9_68 ._Input-radioGroupItems_199j9_86 {
508
+ ._Input--readOnly_1jyrm_69 ._Input-radioGroupItems_1jyrm_87 {
498
509
  border-color: var(--puck-color-grey-8);
499
510
  }
500
- ._Input--readOnly_199j9_68 ._Input-radioInner_199j9_103 {
511
+ ._Input--readOnly_1jyrm_69 ._Input-radioInner_1jyrm_104 {
501
512
  background-color: var(--puck-color-grey-11);
502
513
  color: var(--puck-color-grey-5);
503
514
  }
504
- ._Input-radio_199j9_86 ._Input-radioInput_199j9_125:checked ~ ._Input-radioInner_199j9_103 {
515
+ ._Input-radio_1jyrm_87 ._Input-radioInput_1jyrm_126:checked ~ ._Input-radioInner_1jyrm_104 {
505
516
  background-color: var(--puck-color-azure-9);
506
517
  color: var(--puck-color-grey-1);
507
518
  font-weight: 500;
508
519
  }
509
- ._Input--readOnly_199j9_68 ._Input-radioInput_199j9_125:checked ~ ._Input-radioInner_199j9_103 {
520
+ ._Input--readOnly_1jyrm_69 ._Input-radioInput_1jyrm_126:checked ~ ._Input-radioInner_1jyrm_104 {
510
521
  background-color: var(--puck-color-azure-9);
511
522
  color: var(--puck-color-grey-4);
512
523
  }
513
- ._Input-radio_199j9_86 ._Input-radioInput_199j9_125 {
524
+ ._Input-radio_1jyrm_87 ._Input-radioInput_1jyrm_126 {
514
525
  display: none;
515
526
  }
516
- ._Input_199j9_1 textarea._Input-input_199j9_46 {
527
+ ._Input_1jyrm_1 textarea._Input-input_1jyrm_46 {
517
528
  margin-bottom: -4px;
518
529
  }
519
530
 
520
531
  /* css-module:/home/runner/work/puck/puck/packages/core/components/InputOrGroup/fields/ArrayField/styles.module.css/#css-module-data */
521
- ._ArrayField_hsw7n_5 {
532
+ ._ArrayField_1auyc_5 {
522
533
  display: flex;
523
534
  flex-direction: column;
524
535
  background-color: var(--puck-color-grey-8);
525
536
  border: 1px solid var(--puck-color-grey-8);
526
537
  border-radius: 4px;
527
538
  }
528
- ._ArrayField--isDraggingFrom_hsw7n_13 {
539
+ ._ArrayField--isDraggingFrom_1auyc_13 {
529
540
  background-color: var(--puck-color-azure-9);
530
541
  }
531
- ._ArrayField-addButton_hsw7n_17 {
542
+ ._ArrayField-addButton_1auyc_17 {
532
543
  background-color: white;
533
544
  border: none;
534
545
  border-radius: 4px;
@@ -541,38 +552,38 @@
541
552
  padding: 16px;
542
553
  text-align: left;
543
554
  }
544
- ._ArrayField--hasItems_hsw7n_31 > ._ArrayField-addButton_hsw7n_17 {
555
+ ._ArrayField--hasItems_1auyc_31 > ._ArrayField-addButton_1auyc_17 {
545
556
  border-top-left-radius: 0;
546
557
  border-top-right-radius: 0;
547
558
  }
548
- ._ArrayField_hsw7n_5:not(._ArrayField--isDraggingFrom_hsw7n_13) > ._ArrayField-addButton_hsw7n_17:hover {
559
+ ._ArrayField_1auyc_5:not(._ArrayField--isDraggingFrom_1auyc_13) > ._ArrayField-addButton_1auyc_17:hover {
549
560
  background: var(--puck-color-azure-9);
550
561
  color: var(--puck-color-azure-4);
551
562
  }
552
- ._ArrayFieldItem_hsw7n_45 {
563
+ ._ArrayFieldItem_1auyc_45 {
553
564
  background: white;
554
565
  border-top-left-radius: 4px;
555
566
  border-top-right-radius: 4px;
556
567
  display: block;
557
568
  margin-bottom: 1px;
558
569
  }
559
- ._ArrayField--isDraggingFrom_hsw7n_13 > ._ArrayFieldItem_hsw7n_45:not(._ArrayFieldItem--isDragging_hsw7n_53) {
570
+ ._ArrayField--isDraggingFrom_1auyc_13 > ._ArrayFieldItem_1auyc_45:not(._ArrayFieldItem--isDragging_1auyc_53) {
560
571
  border-bottom: 1px solid var(--puck-color-grey-8);
561
572
  margin-bottom: 0;
562
573
  }
563
- ._ArrayFieldItem--isExpanded_hsw7n_58 {
574
+ ._ArrayFieldItem--isExpanded_1auyc_58 {
564
575
  border-bottom: 0;
565
576
  outline-offset: 0px !important;
566
577
  outline: 1px solid var(--puck-color-azure-6) !important;
567
578
  }
568
- ._ArrayFieldItem--isDragging_hsw7n_53 {
579
+ ._ArrayFieldItem--isDragging_1auyc_53 {
569
580
  box-shadow: rgba(140, 152, 164, 0.25) 0 3px 6px 0;
570
581
  }
571
- ._ArrayFieldItem_hsw7n_45 + ._ArrayFieldItem_hsw7n_45 {
582
+ ._ArrayFieldItem_1auyc_45 + ._ArrayFieldItem_1auyc_45 {
572
583
  border-top-left-radius: 0;
573
584
  border-top-right-radius: 0;
574
585
  }
575
- ._ArrayFieldItem-summary_hsw7n_73 {
586
+ ._ArrayFieldItem-summary_1auyc_73 {
576
587
  color: var(--puck-color-grey-3);
577
588
  display: flex;
578
589
  align-items: center;
@@ -584,52 +595,52 @@
584
595
  position: relative;
585
596
  overflow: hidden;
586
597
  }
587
- ._ArrayFieldItem--readOnly_hsw7n_86 > ._ArrayFieldItem-summary_hsw7n_73 {
598
+ ._ArrayFieldItem--readOnly_1auyc_86 > ._ArrayFieldItem-summary_1auyc_73 {
588
599
  background-color: var(--puck-color-grey-11);
589
600
  color: var(--puck-color-grey-5);
590
601
  }
591
- ._ArrayFieldItem--isExpanded_hsw7n_58 > ._ArrayFieldItem-summary_hsw7n_73 {
602
+ ._ArrayFieldItem--isExpanded_1auyc_58 > ._ArrayFieldItem-summary_1auyc_73 {
592
603
  font-weight: 600;
593
604
  }
594
- ._ArrayFieldItem_hsw7n_45:first-of-type > ._ArrayFieldItem-summary_hsw7n_73 {
605
+ ._ArrayFieldItem_1auyc_45:first-of-type > ._ArrayFieldItem-summary_1auyc_73 {
595
606
  border-top-left-radius: 4px;
596
607
  border-top-right-radius: 4px;
597
608
  }
598
- ._ArrayFieldItem-summary_hsw7n_73:hover,
599
- ._ArrayFieldItem--isExpanded_hsw7n_58 > ._ArrayFieldItem-summary_hsw7n_73 {
609
+ ._ArrayFieldItem-summary_1auyc_73:hover,
610
+ ._ArrayFieldItem--isExpanded_1auyc_58 > ._ArrayFieldItem-summary_1auyc_73 {
600
611
  background: var(--puck-color-azure-9);
601
612
  cursor: pointer;
602
613
  color: var(--puck-color-azure-4);
603
614
  }
604
- ._ArrayFieldItem-body_hsw7n_107 {
615
+ ._ArrayFieldItem-body_1auyc_107 {
605
616
  display: none;
606
617
  }
607
- ._ArrayFieldItem--isExpanded_hsw7n_58 > ._ArrayFieldItem-body_hsw7n_107 {
618
+ ._ArrayFieldItem--isExpanded_1auyc_58 > ._ArrayFieldItem-body_1auyc_107 {
608
619
  display: block;
609
620
  }
610
- ._ArrayFieldItem-fieldset_hsw7n_115 {
621
+ ._ArrayFieldItem-fieldset_1auyc_115 {
611
622
  border: none;
612
623
  border-top: 1px solid var(--puck-color-grey-8);
613
624
  margin: 0;
614
625
  padding: 16px 15px;
615
626
  }
616
- ._ArrayFieldItem-rhs_hsw7n_122 {
627
+ ._ArrayFieldItem-rhs_1auyc_122 {
617
628
  display: flex;
618
629
  gap: 4px;
619
630
  align-items: center;
620
631
  }
621
- ._ArrayFieldItem-actions_hsw7n_128 {
632
+ ._ArrayFieldItem-actions_1auyc_128 {
633
+ color: var(--puck-color-grey-3);
622
634
  display: flex;
623
635
  gap: 4px;
624
636
  opacity: 0;
625
637
  }
626
- ._ArrayFieldItem-summary_hsw7n_73:hover > ._ArrayFieldItem-rhs_hsw7n_122 > ._ArrayFieldItem-actions_hsw7n_128 {
638
+ ._ArrayFieldItem-summary_1auyc_73:hover > ._ArrayFieldItem-rhs_1auyc_122 > ._ArrayFieldItem-actions_1auyc_128 {
627
639
  opacity: 1;
628
640
  }
629
- ._ArrayFieldItem-action_hsw7n_128:hover {
641
+ ._ArrayFieldItem-action_1auyc_128:hover {
630
642
  background: var(--puck-color-grey-9);
631
643
  border-radius: 4px;
632
- color: var(--puck-color-blue);
633
644
  cursor: pointer;
634
645
  }
635
646
 
@@ -1061,59 +1072,120 @@
1061
1072
  margin-top: 4px;
1062
1073
  }
1063
1074
 
1075
+ /* css-module:/home/runner/work/puck/puck/packages/core/components/MenuBar/styles.module.css/#css-module-data */
1076
+ ._MenuBar_12sp7_1 {
1077
+ background-color: var(--puck-color-white);
1078
+ border-bottom: 1px solid var(--puck-color-grey-8);
1079
+ display: none;
1080
+ left: 0;
1081
+ margin-top: 1px;
1082
+ padding: 8px 16px;
1083
+ position: absolute;
1084
+ right: 0;
1085
+ top: 100%;
1086
+ z-index: 2;
1087
+ }
1088
+ ._MenuBar--menuOpen_12sp7_14 {
1089
+ display: block;
1090
+ }
1091
+ @media (min-width: 638px) {
1092
+ ._MenuBar_12sp7_1 {
1093
+ border: none;
1094
+ display: block;
1095
+ margin-top: 0;
1096
+ overflow-y: visible;
1097
+ padding: 0;
1098
+ position: static;
1099
+ }
1100
+ }
1101
+ ._MenuBar-inner_12sp7_29 {
1102
+ align-items: center;
1103
+ display: flex;
1104
+ flex-wrap: wrap;
1105
+ gap: 8px 16px;
1106
+ justify-content: flex-end;
1107
+ }
1108
+ @media (min-width: 638px) {
1109
+ ._MenuBar-inner_12sp7_29 {
1110
+ display: flex;
1111
+ flex-direction: row;
1112
+ flex-wrap: nowrap;
1113
+ }
1114
+ }
1115
+ ._MenuBar-history_12sp7_45 {
1116
+ display: flex;
1117
+ }
1118
+
1064
1119
  /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/styles.module.css/#css-module-data */
1065
- ._Puck_vj9gy_19 {
1066
- --puck-frame-width: minmax(266px, auto);
1067
- --puck-side-bar-width: minmax(186px, 250px);
1120
+ ._Puck_103k9_19 {
1121
+ --puck-frame-width: auto;
1122
+ --puck-side-bar-width: 186px;
1068
1123
  --puck-space-px: 16px;
1069
1124
  bottom: 0;
1070
1125
  display: grid;
1071
1126
  grid-template-areas: "header header header" "left editor right";
1072
- grid-template-columns: 0 var(--puck-frame-width) var(--puck-side-bar-width);
1127
+ grid-template-columns: 0 var(--puck-frame-width) 0;
1073
1128
  grid-template-rows: min-content auto;
1074
1129
  height: 100vh;
1075
1130
  left: 0;
1076
- overflow-x: auto;
1077
1131
  position: fixed;
1078
1132
  right: 0;
1079
1133
  top: 0;
1080
1134
  }
1081
- ._Puck--leftSideBarVisible_vj9gy_36 {
1135
+ ._Puck--leftSideBarVisible_103k9_35 {
1136
+ grid-template-columns: var(--puck-side-bar-width) var(--puck-frame-width) 0;
1137
+ }
1138
+ ._Puck--rightSideBarVisible_103k9_41 {
1139
+ grid-template-columns: 0 var(--puck-frame-width) var(--puck-side-bar-width);
1140
+ }
1141
+ ._Puck--leftSideBarVisible_103k9_35._Puck--rightSideBarVisible_103k9_41 {
1082
1142
  grid-template-columns: var(--puck-side-bar-width) var(--puck-frame-width) var(--puck-side-bar-width);
1083
1143
  }
1144
+ @media (min-width: 458px) {
1145
+ ._Puck_103k9_19 {
1146
+ --puck-frame-width: minmax(266px, auto);
1147
+ }
1148
+ }
1149
+ @media (min-width: 638px) {
1150
+ ._Puck_103k9_19 {
1151
+ --puck-side-bar-width: minmax(186px, 250px);
1152
+ }
1153
+ }
1084
1154
  @media (min-width: 766px) {
1085
- ._Puck_vj9gy_19 {
1155
+ ._Puck_103k9_19 {
1086
1156
  --puck-frame-width: auto;
1087
1157
  }
1088
1158
  }
1089
1159
  @media (min-width: 990px) {
1090
- ._Puck_vj9gy_19 {
1160
+ ._Puck_103k9_19 {
1091
1161
  --puck-side-bar-width: 256px;
1092
1162
  }
1093
1163
  }
1094
1164
  @media (min-width: 1198px) {
1095
- ._Puck_vj9gy_19 {
1165
+ ._Puck_103k9_19 {
1096
1166
  --puck-side-bar-width: 274px;
1097
1167
  }
1098
1168
  }
1099
1169
  @media (min-width: 1398px) {
1100
- ._Puck_vj9gy_19 {
1170
+ ._Puck_103k9_19 {
1101
1171
  --puck-side-bar-width: 290px;
1102
1172
  }
1103
1173
  }
1104
1174
  @media (min-width: 1598px) {
1105
- ._Puck_vj9gy_19 {
1175
+ ._Puck_103k9_19 {
1106
1176
  --puck-side-bar-width: 320px;
1107
1177
  }
1108
1178
  }
1109
- ._Puck-header_vj9gy_72 {
1179
+ ._Puck-header_103k9_95 {
1110
1180
  background: var(--puck-color-white);
1111
1181
  border-bottom: 1px solid var(--puck-color-grey-8);
1112
1182
  color: var(--puck-color-black);
1113
1183
  grid-area: header;
1184
+ position: relative;
1185
+ max-width: 100vw;
1114
1186
  }
1115
- ._Puck-headerInner_vj9gy_79 {
1116
- align-items: start;
1187
+ ._Puck-headerInner_103k9_104 {
1188
+ align-items: end;
1117
1189
  display: grid;
1118
1190
  gap: var(--puck-space-px);
1119
1191
  grid-template-areas: "left middle right";
@@ -1121,24 +1193,46 @@
1121
1193
  grid-template-rows: auto;
1122
1194
  padding: var(--puck-space-px);
1123
1195
  }
1124
- ._Puck-headerToggle_vj9gy_89 {
1196
+ ._Puck-headerToggle_103k9_114 {
1197
+ color: var(--puck-color-grey-4);
1198
+ display: flex;
1199
+ margin-left: -4px;
1125
1200
  padding-top: 2px;
1126
1201
  }
1127
- ._Puck-headerTitle_vj9gy_93 {
1202
+ ._Puck-rightSideBarToggle_103k9_121 {
1203
+ transform: rotate(180deg);
1204
+ }
1205
+ ._Puck--rightSideBarVisible_103k9_41 ._Puck-rightSideBarToggle_103k9_121,
1206
+ ._Puck--leftSideBarVisible_103k9_35 ._Puck-leftSideBarToggle_103k9_126 {
1207
+ color: var(--puck-color-black);
1208
+ }
1209
+ ._Puck-headerTitle_103k9_130 {
1128
1210
  align-self: center;
1129
1211
  }
1130
- ._Puck-headerPath_vj9gy_97 {
1212
+ ._Puck-headerPath_103k9_134 {
1131
1213
  font-family: var(--puck-font-family-monospaced);
1132
1214
  font-size: var(--puck-font-size-xxs);
1133
1215
  font-weight: normal;
1134
1216
  word-break: break-all;
1135
1217
  }
1136
- ._Puck-headerTools_vj9gy_104 {
1218
+ ._Puck-headerTools_103k9_141 {
1137
1219
  display: flex;
1138
1220
  gap: 16px;
1139
1221
  justify-content: flex-end;
1140
1222
  }
1141
- ._Puck-leftSideBar_vj9gy_110 {
1223
+ ._Puck-menuButton_103k9_147 {
1224
+ color: var(--puck-color-grey-4);
1225
+ margin-left: -4px;
1226
+ }
1227
+ ._Puck--menuOpen_103k9_152 ._Puck-menuButton_103k9_147 {
1228
+ color: var(--puck-color-black);
1229
+ }
1230
+ @media (min-width: 638px) {
1231
+ ._Puck-menuButton_103k9_147 {
1232
+ display: none;
1233
+ }
1234
+ }
1235
+ ._Puck-leftSideBar_103k9_126 {
1142
1236
  background: var(--puck-color-grey-11);
1143
1237
  border-right: 1px solid var(--puck-color-grey-8);
1144
1238
  display: flex;
@@ -1146,27 +1240,28 @@
1146
1240
  grid-area: left;
1147
1241
  overflow-y: auto;
1148
1242
  }
1149
- ._Puck-frame_vj9gy_119 {
1243
+ ._Puck-frame_103k9_171 {
1150
1244
  display: flex;
1151
1245
  flex-direction: column;
1152
1246
  grid-area: editor;
1153
- overflow-y: auto;
1247
+ overflow: auto;
1154
1248
  position: relative;
1155
1249
  }
1156
- ._Puck-root_vj9gy_127 {
1250
+ ._Puck-root_103k9_179 {
1157
1251
  box-shadow: 0 0 0 calc(var(--puck-space-px) * 2) var(--puck-color-grey-10);
1158
1252
  margin: var(--puck-space-px);
1253
+ min-width: 321px;
1159
1254
  zoom: 0.75;
1160
1255
  }
1161
1256
  @media (min-width: 1198px) {
1162
- ._Puck-root_vj9gy_127 {
1257
+ ._Puck-root_103k9_179 {
1163
1258
  margin: calc(var(--puck-space-px) * 2);
1164
1259
  }
1165
1260
  }
1166
- ._Puck-page_vj9gy_139 {
1261
+ ._Puck-page_103k9_192 {
1167
1262
  border: 1px solid var(--puck-color-grey-8);
1168
1263
  }
1169
- ._Puck-rightSideBar_vj9gy_143 {
1264
+ ._Puck-rightSideBar_103k9_121 {
1170
1265
  background: var(--puck-color-white);
1171
1266
  border-left: 1px solid var(--puck-color-grey-8);
1172
1267
  display: flex;
package/dist/index.d.ts CHANGED
@@ -1,5 +1,5 @@
1
- import { U as UiState, D as Data, A as AppState, C as Config, I as ItemSelector, M as MappedItem, R as RootDataWithProps, a as DefaultRootProps, b as RootData } from './Config-a03de579.js';
2
- export { d as Adaptor, c as ArrayField, p as ArrayState, l as BaseData, B as BaseField, k as ComponentConfig, m as ComponentData, i as Content, f as CustomField, g as DefaultComponentProps, q as DropZone, e as ExternalField, E as ExternalFieldWithAdaptor, F as Field, h as Fields, o as ItemWithId, P as PuckComponent, j as PuckContext, n as RootDataWithoutProps, S as SelectField, T as TextField } from './Config-a03de579.js';
1
+ import { U as UiState, D as Data, A as AppState, C as Config, I as ItemSelector, M as MappedItem, R as RootDataWithProps, a as DefaultRootProps, b as RootData } from './Config-e71a51c7.js';
2
+ export { d as Adaptor, c as ArrayField, p as ArrayState, l as BaseData, B as BaseField, k as ComponentConfig, m as ComponentData, i as Content, f as CustomField, g as DefaultComponentProps, q as DropZone, e as ExternalField, E as ExternalFieldWithAdaptor, F as Field, h as Fields, o as ItemWithId, P as PuckComponent, j as PuckContext, n as RootDataWithoutProps, S as SelectField, T as TextField } from './Config-e71a51c7.js';
3
3
  import * as react_jsx_runtime from 'react/jsx-runtime';
4
4
  import * as react from 'react';
5
5
  import { ReactNode, CSSProperties, SyntheticEvent, ReactElement } from 'react';