@measured/puck 0.19.0-canary.c33636f → 0.19.0-canary.cb4b6ee5

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
@@ -139,6 +139,10 @@
139
139
  height: 1px;
140
140
  min-height: 100vh;
141
141
  }
142
+ [data-puck-entry] {
143
+ position: relative;
144
+ z-index: 0;
145
+ }
142
146
 
143
147
  /* css-module:/home/runner/work/puck/puck/packages/core/components/ActionBar/styles.module.css/#css-module-data */
144
148
  ._ActionBar_rvadt_1 {
@@ -225,10 +229,10 @@
225
229
  }
226
230
 
227
231
  /* css-module:/home/runner/work/puck/puck/packages/core/components/AutoField/styles.module.css/#css-module-data */
228
- ._InputWrapper_g5w3n_1 + ._InputWrapper_g5w3n_1 {
232
+ ._InputWrapper_py9hf_1 + ._InputWrapper_py9hf_1 {
229
233
  margin-top: 12px;
230
234
  }
231
- ._Input-label_g5w3n_5 {
235
+ ._Input-label_py9hf_5 {
232
236
  align-items: center;
233
237
  color: var(--puck-color-grey-04);
234
238
  display: flex;
@@ -236,29 +240,31 @@
236
240
  font-size: var(--puck-font-size-xxs);
237
241
  font-weight: 600;
238
242
  }
239
- ._Input-labelIcon_g5w3n_14 {
243
+ ._Input-labelIcon_py9hf_14 {
240
244
  color: var(--puck-color-grey-07);
241
245
  display: flex;
242
246
  margin-inline-end: 4px;
243
247
  padding-inline-start: 4px;
244
248
  }
245
- ._Input-disabledIcon_g5w3n_21 {
249
+ ._Input-disabledIcon_py9hf_21 {
246
250
  color: var(--puck-color-grey-05);
247
251
  margin-inline-start: auto;
248
252
  }
249
- ._Input-input_g5w3n_26 {
253
+ ._Input-input_py9hf_26 {
250
254
  background: var(--puck-color-white);
251
255
  border-width: 1px;
252
256
  border-style: solid;
253
257
  border-color: var(--puck-color-grey-09);
254
258
  border-radius: 4px;
259
+ box-sizing: border-box;
255
260
  font-family: inherit;
256
261
  font-size: 14px;
257
262
  padding: 12px 15px;
258
263
  transition: border-color 50ms ease-in;
259
264
  width: 100%;
265
+ max-width: 100%;
260
266
  }
261
- select._Input-input_g5w3n_26 {
267
+ select._Input-input_py9hf_26 {
262
268
  appearance: none;
263
269
  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;
264
270
  background-size: 12px;
@@ -267,29 +273,29 @@ select._Input-input_g5w3n_26 {
267
273
  background-color: var(--puck-color-white);
268
274
  cursor: pointer;
269
275
  }
270
- select._Input-input_g5w3n_26:dir(rtl) {
276
+ select._Input-input_py9hf_26:dir(rtl) {
271
277
  background-position: 12px calc(50% + 3px);
272
278
  }
273
279
  @media (hover: hover) and (pointer: fine) {
274
- ._Input_g5w3n_1:has(> input):hover ._Input-input_g5w3n_26:not([readonly]),
275
- ._Input_g5w3n_1:has(> textarea):hover ._Input-input_g5w3n_26:not([readonly]) {
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]) {
276
282
  border-color: var(--puck-color-grey-05);
277
283
  transition: none;
278
284
  }
279
- ._Input_g5w3n_1:has(> select):hover ._Input-input_g5w3n_26:not([disabled]) {
285
+ ._Input_py9hf_1:has(> select):hover ._Input-input_py9hf_26:not([disabled]) {
280
286
  background-color: var(--puck-color-azure-12);
281
287
  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>");
282
288
  border-color: var(--puck-color-grey-05);
283
289
  transition: none;
284
290
  }
285
291
  }
286
- ._Input-input_g5w3n_26:focus {
292
+ ._Input-input_py9hf_26:focus {
287
293
  border-color: var(--puck-color-grey-05);
288
294
  outline: 2px solid var(--puck-color-azure-05);
289
295
  transition: none;
290
296
  }
291
- ._Input--readOnly_g5w3n_74 > ._Input-input_g5w3n_26,
292
- ._Input--readOnly_g5w3n_74 > select._Input-input_g5w3n_26 {
297
+ ._Input--readOnly_py9hf_76 > ._Input-input_py9hf_26,
298
+ ._Input--readOnly_py9hf_76 > select._Input-input_py9hf_26 {
293
299
  background-color: var(--puck-color-grey-11);
294
300
  border-color: var(--puck-color-grey-09);
295
301
  color: var(--puck-color-grey-04);
@@ -298,34 +304,34 @@ select._Input-input_g5w3n_26:dir(rtl) {
298
304
  outline: 0;
299
305
  transition: none;
300
306
  }
301
- ._Input-radioGroupItems_g5w3n_85 {
307
+ ._Input-radioGroupItems_py9hf_87 {
302
308
  display: flex;
303
309
  border: 1px solid var(--puck-color-grey-09);
304
310
  border-radius: 4px;
305
311
  flex-wrap: wrap;
306
312
  }
307
- ._Input-radio_g5w3n_85 {
313
+ ._Input-radio_py9hf_87 {
308
314
  border-inline-end: 1px solid var(--puck-color-grey-09);
309
315
  flex-grow: 1;
310
316
  }
311
- ._Input-radio_g5w3n_85:first-of-type {
317
+ ._Input-radio_py9hf_87:first-of-type {
312
318
  border-bottom-left-radius: 4px;
313
319
  border-top-left-radius: 4px;
314
320
  }
315
- ._Input-radio_g5w3n_85:first-of-type ._Input-radioInner_g5w3n_102 {
321
+ ._Input-radio_py9hf_87:first-of-type ._Input-radioInner_py9hf_104 {
316
322
  border-bottom-left-radius: 3px;
317
323
  border-top-left-radius: 3px;
318
324
  }
319
- ._Input-radio_g5w3n_85:last-of-type {
325
+ ._Input-radio_py9hf_87:last-of-type {
320
326
  border-bottom-right-radius: 4px;
321
327
  border-inline-end: 0;
322
328
  border-top-right-radius: 4px;
323
329
  }
324
- ._Input-radio_g5w3n_85:last-of-type ._Input-radioInner_g5w3n_102 {
330
+ ._Input-radio_py9hf_87:last-of-type ._Input-radioInner_py9hf_104 {
325
331
  border-bottom-right-radius: 3px;
326
332
  border-top-right-radius: 3px;
327
333
  }
328
- ._Input-radioInner_g5w3n_102 {
334
+ ._Input-radioInner_py9hf_104 {
329
335
  background-color: var(--puck-color-white);
330
336
  color: var(--puck-color-grey-04);
331
337
  cursor: pointer;
@@ -334,32 +340,32 @@ select._Input-input_g5w3n_26:dir(rtl) {
334
340
  text-align: center;
335
341
  transition: background-color 50ms ease-in;
336
342
  }
337
- ._Input-radio_g5w3n_85:has(:focus-visible) {
343
+ ._Input-radio_py9hf_87:has(:focus-visible) {
338
344
  outline: 2px solid var(--puck-color-azure-05);
339
345
  outline-offset: 2px;
340
346
  position: relative;
341
347
  }
342
348
  @media (hover: hover) and (pointer: fine) {
343
- ._Input-radioInner_g5w3n_102:hover {
349
+ ._Input-radioInner_py9hf_104:hover {
344
350
  background-color: var(--puck-color-azure-12);
345
351
  transition: none;
346
352
  }
347
353
  }
348
- ._Input--readOnly_g5w3n_74 ._Input-radioInner_g5w3n_102 {
354
+ ._Input--readOnly_py9hf_76 ._Input-radioInner_py9hf_104 {
349
355
  background-color: var(--puck-color-white);
350
356
  color: var(--puck-color-grey-04);
351
357
  cursor: default;
352
358
  }
353
- ._Input-radio_g5w3n_85 ._Input-radioInput_g5w3n_147:checked ~ ._Input-radioInner_g5w3n_102 {
359
+ ._Input-radio_py9hf_87 ._Input-radioInput_py9hf_149:checked ~ ._Input-radioInner_py9hf_104 {
354
360
  background-color: var(--puck-color-azure-11);
355
361
  color: var(--puck-color-azure-04);
356
362
  font-weight: 500;
357
363
  }
358
- ._Input--readOnly_g5w3n_74 ._Input-radioInput_g5w3n_147:checked ~ ._Input-radioInner_g5w3n_102 {
364
+ ._Input--readOnly_py9hf_76 ._Input-radioInput_py9hf_149:checked ~ ._Input-radioInner_py9hf_104 {
359
365
  background-color: var(--puck-color-grey-11);
360
366
  color: var(--puck-color-grey-04);
361
367
  }
362
- ._Input-radio_g5w3n_85 ._Input-radioInput_g5w3n_147 {
368
+ ._Input-radio_py9hf_87 ._Input-radioInput_py9hf_149 {
363
369
  clip: rect(0 0 0 0);
364
370
  clip-path: inset(100%);
365
371
  height: 1px;
@@ -368,7 +374,7 @@ select._Input-input_g5w3n_26:dir(rtl) {
368
374
  white-space: nowrap;
369
375
  width: 1px;
370
376
  }
371
- textarea._Input-input_g5w3n_26 {
377
+ textarea._Input-input_py9hf_26 {
372
378
  margin-bottom: -4px;
373
379
  }
374
380
 
@@ -612,6 +618,19 @@ textarea._Input-input_g5w3n_26 {
612
618
  }
613
619
  }
614
620
 
621
+ /* components/Sortable/styles.css */
622
+ [data-dnd-placeholder] * {
623
+ opacity: 0 !important;
624
+ }
625
+ [data-dnd-placeholder] {
626
+ background: var(--puck-color-azure-09) !important;
627
+ border: none !important;
628
+ color: #00000000 !important;
629
+ opacity: 0.3 !important;
630
+ outline: none !important;
631
+ transition: none !important;
632
+ }
633
+
615
634
  /* css-module:/home/runner/work/puck/puck/packages/core/components/ExternalInput/styles.module.css/#css-module-data */
616
635
  ._ExternalInput-actions_91ls0_1 {
617
636
  display: flex;
@@ -1074,27 +1093,25 @@ textarea._Input-input_g5w3n_26 {
1074
1093
  }
1075
1094
 
1076
1095
  /* css-module:/home/runner/work/puck/puck/packages/core/components/Drawer/styles.module.css/#css-module-data */
1077
- ._Drawer_fkqfo_1 {
1096
+ ._Drawer_pl7z0_1 {
1078
1097
  display: flex;
1079
1098
  flex-direction: column;
1080
1099
  font-family: var(--puck-font-family);
1081
1100
  gap: 12px;
1082
1101
  }
1083
- ._Drawer-draggable_fkqfo_8 {
1102
+ ._Drawer-draggable_pl7z0_8 {
1084
1103
  position: relative;
1085
1104
  }
1086
- ._Drawer-draggableBg_fkqfo_12 {
1105
+ ._Drawer-draggableBg_pl7z0_12 {
1087
1106
  position: absolute;
1088
1107
  top: 0;
1089
1108
  right: 0;
1090
1109
  bottom: 0;
1091
1110
  left: 0;
1092
1111
  pointer-events: none;
1112
+ z-index: -1;
1093
1113
  }
1094
- ._Drawer-draggableFg_fkqfo_21 {
1095
- z-index: 1;
1096
- }
1097
- ._DrawerItem-draggable_fkqfo_25 {
1114
+ ._DrawerItem-draggable_pl7z0_22 {
1098
1115
  background: var(--puck-color-white);
1099
1116
  cursor: grab;
1100
1117
  padding: 12px;
@@ -1106,39 +1123,39 @@ textarea._Input-input_g5w3n_26 {
1106
1123
  align-items: center;
1107
1124
  transition: background-color 50ms ease-in, color 50ms ease-in;
1108
1125
  }
1109
- ._DrawerItem--disabled_fkqfo_38 ._DrawerItem-draggable_fkqfo_25 {
1126
+ ._DrawerItem--disabled_pl7z0_35 ._DrawerItem-draggable_pl7z0_22 {
1110
1127
  background: var(--puck-color-grey-11);
1111
1128
  color: var(--puck-color-grey-05);
1112
1129
  cursor: not-allowed;
1113
1130
  }
1114
- ._DrawerItem_fkqfo_25:focus-visible {
1131
+ ._DrawerItem_pl7z0_22:focus-visible {
1115
1132
  outline: 0;
1116
1133
  }
1117
- ._Drawer_fkqfo_1:not(._Drawer--isDraggingFrom_fkqfo_48) ._DrawerItem_fkqfo_25:focus-visible ._DrawerItem-draggable_fkqfo_25 {
1134
+ ._Drawer_pl7z0_1:not(._Drawer--isDraggingFrom_pl7z0_45) ._DrawerItem_pl7z0_22:focus-visible ._DrawerItem-draggable_pl7z0_22 {
1118
1135
  border-radius: 4px;
1119
1136
  outline: 2px solid var(--puck-color-azure-05);
1120
1137
  outline-offset: 2px;
1121
1138
  }
1122
1139
  @media (hover: hover) and (pointer: fine) {
1123
- ._Drawer_fkqfo_1:not(._Drawer--isDraggingFrom_fkqfo_48) ._DrawerItem_fkqfo_25:not(._DrawerItem--disabled_fkqfo_38) ._DrawerItem-draggable_fkqfo_25:hover {
1140
+ ._Drawer_pl7z0_1:not(._Drawer--isDraggingFrom_pl7z0_45) ._DrawerItem_pl7z0_22:not(._DrawerItem--disabled_pl7z0_35) ._DrawerItem-draggable_pl7z0_22:hover {
1124
1141
  background-color: var(--puck-color-azure-12);
1125
1142
  color: var(--puck-color-azure-04);
1126
1143
  transition: none;
1127
1144
  }
1128
1145
  }
1129
- ._DrawerItem-name_fkqfo_66 {
1146
+ ._DrawerItem-name_pl7z0_63 {
1130
1147
  overflow-x: hidden;
1131
1148
  text-overflow: ellipsis;
1132
1149
  white-space: nowrap;
1133
1150
  }
1134
1151
 
1135
1152
  /* css-module:/home/runner/work/puck/puck/packages/core/components/DraggableComponent/styles.module.css/#css-module-data */
1136
- ._DraggableComponent_1ukn8_1 {
1153
+ ._DraggableComponent_qzbgx_1 {
1137
1154
  position: absolute;
1138
1155
  pointer-events: none;
1139
1156
  --overlay-background: color-mix( in srgb, var(--puck-color-azure-08) 30%, transparent );
1140
1157
  }
1141
- ._DraggableComponent-overlay_1ukn8_12 {
1158
+ ._DraggableComponent-overlay_qzbgx_12 {
1142
1159
  cursor: pointer;
1143
1160
  height: 100%;
1144
1161
  width: 100%;
@@ -1150,10 +1167,10 @@ textarea._Input-input_g5w3n_26 {
1150
1167
  box-sizing: border-box;
1151
1168
  z-index: 1;
1152
1169
  }
1153
- ._DraggableComponent_1ukn8_1:focus-visible > ._DraggableComponent-overlay_1ukn8_12 {
1170
+ ._DraggableComponent_qzbgx_1:focus-visible > ._DraggableComponent-overlay_qzbgx_12 {
1154
1171
  outline: 1px solid var(--puck-color-azure-05);
1155
1172
  }
1156
- ._DraggableComponent-loadingOverlay_1ukn8_29 {
1173
+ ._DraggableComponent-loadingOverlay_qzbgx_29 {
1157
1174
  background: var(--puck-color-white);
1158
1175
  color: var(--puck-color-grey-03);
1159
1176
  border-radius: 4px;
@@ -1168,35 +1185,36 @@ textarea._Input-input_g5w3n_26 {
1168
1185
  opacity: 0.8;
1169
1186
  z-index: 1;
1170
1187
  }
1171
- ._DraggableComponent--hover_1ukn8_45:not(._DraggableComponent--isLocked_1ukn8_45) > ._DraggableComponent-overlay_1ukn8_12 {
1188
+ ._DraggableComponent--hover_qzbgx_45:not(._DraggableComponent--isLocked_qzbgx_45) > ._DraggableComponent-overlay_qzbgx_12 {
1172
1189
  background: var(--overlay-background);
1173
1190
  }
1174
- ._DraggableComponent--hover_1ukn8_45 > ._DraggableComponent-overlay_1ukn8_12 {
1191
+ ._DraggableComponent--hover_qzbgx_45 > ._DraggableComponent-overlay_qzbgx_12 {
1175
1192
  outline: 2px var(--puck-color-azure-09) solid;
1176
1193
  }
1177
- ._DraggableComponent--isSelected_1ukn8_54 > ._DraggableComponent-overlay_1ukn8_12 {
1194
+ ._DraggableComponent--isSelected_qzbgx_54 > ._DraggableComponent-overlay_qzbgx_12 {
1178
1195
  outline-color: var(--puck-color-azure-07);
1179
1196
  }
1180
- ._DraggableComponent_1ukn8_1:has(._DraggableComponent--hover_1ukn8_45 > ._DraggableComponent-overlay_1ukn8_12) > ._DraggableComponent-overlay_1ukn8_12 {
1197
+ ._DraggableComponent_qzbgx_1:has(._DraggableComponent--hover_qzbgx_45 > ._DraggableComponent-overlay_qzbgx_12) > ._DraggableComponent-overlay_qzbgx_12 {
1181
1198
  display: none;
1182
1199
  }
1183
- ._DraggableComponent-actionsOverlay_1ukn8_66 {
1200
+ ._DraggableComponent-actionsOverlay_qzbgx_66 {
1184
1201
  position: sticky;
1185
1202
  opacity: 0;
1186
1203
  pointer-events: none;
1187
1204
  z-index: 2;
1188
1205
  }
1189
- ._DraggableComponent--isSelected_1ukn8_54 ._DraggableComponent-actionsOverlay_1ukn8_66 {
1206
+ ._DraggableComponent--isSelected_qzbgx_54 ._DraggableComponent-actionsOverlay_qzbgx_66 {
1190
1207
  opacity: 1;
1191
1208
  pointer-events: auto;
1192
1209
  }
1193
- ._DraggableComponent-actions_1ukn8_66 {
1210
+ ._DraggableComponent-actions_qzbgx_66 {
1194
1211
  position: absolute;
1195
1212
  width: auto;
1196
1213
  cursor: grab;
1197
1214
  display: flex;
1198
1215
  box-sizing: border-box;
1199
1216
  transform-origin: right top;
1217
+ min-height: 36px;
1200
1218
  }
1201
1219
 
1202
1220
  /* components/DraggableComponent/styles.css */
@@ -1217,7 +1235,7 @@ textarea._Input-input_g5w3n_26 {
1217
1235
  [data-puck-disabled] {
1218
1236
  cursor: pointer;
1219
1237
  }
1220
- [data-puck-dragging]:not([data-dnd-dragging]) {
1238
+ [data-dnd-placeholder] {
1221
1239
  background: var(--puck-color-azure-06) !important;
1222
1240
  border: none !important;
1223
1241
  color: #00000000 !important;
@@ -1225,9 +1243,9 @@ textarea._Input-input_g5w3n_26 {
1225
1243
  outline: none !important;
1226
1244
  transition: none !important;
1227
1245
  }
1228
- [data-puck-dragging]:not([data-dnd-dragging]) *,
1229
- [data-puck-dragging]:not([data-dnd-dragging])::after,
1230
- [data-puck-dragging]:not([data-dnd-dragging])::before {
1246
+ [data-dnd-placeholder] *,
1247
+ [data-dnd-placeholder]::after,
1248
+ [data-dnd-placeholder]::before {
1231
1249
  opacity: 0 !important;
1232
1250
  }
1233
1251
  [data-dnd-dragging][data-puck-component] {
@@ -1237,57 +1255,55 @@ textarea._Input-input_g5w3n_26 {
1237
1255
  }
1238
1256
 
1239
1257
  /* css-module:/home/runner/work/puck/puck/packages/core/components/DropZone/styles.module.css/#css-module-data */
1240
- ._DropZone_kmkdc_1 {
1258
+ ._DropZone_1i2sv_1 {
1241
1259
  --resize-animation-ms: 150ms;
1242
1260
  position: relative;
1243
1261
  height: 100%;
1262
+ min-height: var(--min-empty-height);
1244
1263
  outline-offset: -2px;
1245
1264
  width: 100%;
1246
1265
  }
1247
- ._DropZone--isActive_kmkdc_10 {
1248
- min-height: var(--min-empty-height);
1249
- }
1250
- ._DropZone--hasChildren_kmkdc_14 {
1266
+ ._DropZone--hasChildren_1i2sv_11 {
1251
1267
  min-height: 0;
1252
1268
  }
1253
- ._DropZone--isActive_kmkdc_10._DropZone_kmkdc_1:empty {
1269
+ ._DropZone_1i2sv_1:empty {
1254
1270
  min-height: var(--min-empty-height);
1255
1271
  }
1256
- ._DropZone_kmkdc_1:not(._DropZone--userIsDragging_kmkdc_22) {
1272
+ [data-puck-entry]:not([data-puck-dragging]) ._DropZone_1i2sv_1 {
1257
1273
  transition: min-height var(--resize-animation-ms) ease-in;
1258
1274
  }
1259
- ._DropZone--isAreaSelected_kmkdc_26,
1260
- ._DropZone--hoveringOverArea_kmkdc_27:not(._DropZone--isRootZone_kmkdc_27) {
1275
+ ._DropZone--isAreaSelected_1i2sv_24,
1276
+ ._DropZone--hoveringOverArea_1i2sv_25:not(._DropZone--isRootZone_1i2sv_25) {
1261
1277
  background: color-mix(in srgb, var(--puck-color-azure-09) 30%, transparent);
1262
1278
  outline: 2px dashed var(--puck-color-azure-08);
1263
1279
  }
1264
- ._DropZone_kmkdc_1:empty {
1280
+ ._DropZone_1i2sv_1:empty {
1265
1281
  background: color-mix(in srgb, var(--puck-color-azure-09) 30%, transparent);
1266
1282
  outline: 2px dashed var(--puck-color-azure-08);
1267
1283
  }
1268
- ._DropZone--isDestination_kmkdc_37 {
1284
+ ._DropZone--isDestination_1i2sv_35 {
1269
1285
  outline: 2px dashed var(--puck-color-azure-04) !important;
1270
1286
  }
1271
- ._DropZone--isDestination_kmkdc_37:not(._DropZone--isRootZone_kmkdc_27) {
1287
+ ._DropZone--isDestination_1i2sv_35:not(._DropZone--isRootZone_1i2sv_25) {
1272
1288
  background: color-mix(in srgb, var(--puck-color-azure-09) 30%, transparent) !important;
1273
1289
  }
1274
- ._DropZone-item_kmkdc_49 {
1290
+ ._DropZone-item_1i2sv_47 {
1275
1291
  position: relative;
1276
1292
  }
1277
- ._DropZone-hitbox_kmkdc_53 {
1293
+ ._DropZone-hitbox_1i2sv_51 {
1278
1294
  position: absolute;
1279
1295
  bottom: -12px;
1280
1296
  height: 24px;
1281
1297
  width: 100%;
1282
1298
  z-index: 1;
1283
1299
  }
1284
- ._DropZone--isEnabled_kmkdc_61._DropZone--userIsDragging_kmkdc_22 {
1300
+ [data-puck-dragging] ._DropZone--isEnabled_1i2sv_59 {
1285
1301
  outline: 2px dashed var(--puck-color-azure-06);
1286
1302
  }
1287
- ._DropZone_kmkdc_1 > *:not([data-puck-component]) {
1303
+ ._DropZone_1i2sv_1 > *:not([data-puck-component]) {
1288
1304
  opacity: 0;
1289
1305
  }
1290
- body:has(._DropZone--isAnimating_kmkdc_70:empty) [data-puck-overlay] {
1306
+ body:has(._DropZone--isAnimating_1i2sv_68:empty) [data-puck-overlay] {
1291
1307
  opacity: 0 !important;
1292
1308
  }
1293
1309
 
@@ -1377,60 +1393,22 @@ body:has(._DropZone--isAnimating_kmkdc_70:empty) [data-puck-overlay] {
1377
1393
  opacity: 0.8;
1378
1394
  }
1379
1395
 
1380
- /* css-module:/home/runner/work/puck/puck/packages/core/components/MenuBar/styles.module.css/#css-module-data */
1381
- ._MenuBar_8pf8c_1 {
1382
- background-color: var(--puck-color-white);
1383
- border-bottom: 1px solid var(--puck-color-grey-09);
1384
- display: none;
1385
- left: 0;
1386
- margin-top: 1px;
1387
- padding: 8px 16px;
1388
- position: absolute;
1389
- right: 0;
1390
- top: 100%;
1391
- z-index: 2;
1392
- }
1393
- ._MenuBar--menuOpen_8pf8c_14 {
1394
- display: block;
1395
- }
1396
- @media (min-width: 638px) {
1397
- ._MenuBar_8pf8c_1 {
1398
- border: none;
1399
- display: block;
1400
- margin-top: 0;
1401
- overflow-y: visible;
1402
- padding: 0;
1403
- position: static;
1404
- }
1405
- }
1406
- ._MenuBar-inner_8pf8c_29 {
1407
- align-items: center;
1408
- display: flex;
1409
- flex-wrap: wrap;
1410
- gap: 8px 16px;
1411
- justify-content: flex-end;
1412
- }
1413
- @media (min-width: 638px) {
1414
- ._MenuBar-inner_8pf8c_29 {
1415
- display: flex;
1416
- flex-direction: row;
1417
- flex-wrap: nowrap;
1418
- }
1419
- }
1420
- ._MenuBar-history_8pf8c_45 {
1421
- display: flex;
1422
- }
1423
-
1424
1396
  /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/styles.module.css/#css-module-data */
1425
- ._Puck_11o75_19 {
1397
+ ._Puck_dnlfp_19 {
1426
1398
  --puck-space-px: 16px;
1427
1399
  font-family: var(--puck-font-family);
1400
+ overflow-x: hidden;
1401
+ }
1402
+ @media (min-width: 766px) {
1403
+ ._Puck_dnlfp_19 {
1404
+ overflow-x: auto;
1405
+ }
1428
1406
  }
1429
- ._Puck-portal_11o75_24 {
1407
+ ._Puck-portal_dnlfp_31 {
1430
1408
  position: relative;
1431
1409
  z-index: 2;
1432
1410
  }
1433
- ._PuckLayout-inner_11o75_31 {
1411
+ ._PuckLayout-inner_dnlfp_38 {
1434
1412
  --puck-frame-width: auto;
1435
1413
  --puck-side-bar-width: 0px;
1436
1414
  display: grid;
@@ -1441,107 +1419,54 @@ body:has(._DropZone--isAnimating_kmkdc_70:empty) [data-puck-overlay] {
1441
1419
  position: relative;
1442
1420
  z-index: 0;
1443
1421
  }
1444
- ._PuckLayout--mounted_11o75_43 ._PuckLayout-inner_11o75_31 {
1422
+ ._PuckLayout--mounted_dnlfp_50 ._PuckLayout-inner_dnlfp_38 {
1445
1423
  --puck-side-bar-width: 186px;
1446
1424
  }
1447
- ._PuckLayout--leftSideBarVisible_11o75_47 ._PuckLayout-inner_11o75_31 {
1425
+ ._PuckLayout--leftSideBarVisible_dnlfp_54 ._PuckLayout-inner_dnlfp_38 {
1448
1426
  grid-template-columns: var(--puck-side-bar-width) var(--puck-frame-width) 0;
1449
1427
  }
1450
- ._PuckLayout--rightSideBarVisible_11o75_53 ._PuckLayout-inner_11o75_31 {
1428
+ ._PuckLayout--rightSideBarVisible_dnlfp_60 ._PuckLayout-inner_dnlfp_38 {
1451
1429
  grid-template-columns: 0 var(--puck-frame-width) var(--puck-side-bar-width);
1452
1430
  }
1453
- ._PuckLayout--leftSideBarVisible_11o75_47._PuckLayout--rightSideBarVisible_11o75_53 ._PuckLayout-inner_11o75_31 {
1431
+ ._PuckLayout--leftSideBarVisible_dnlfp_54._PuckLayout--rightSideBarVisible_dnlfp_60 ._PuckLayout-inner_dnlfp_38 {
1454
1432
  grid-template-columns: var(--puck-side-bar-width) var(--puck-frame-width) var(--puck-side-bar-width);
1455
1433
  }
1456
1434
  @media (min-width: 458px) {
1457
- ._PuckLayout-mounted_11o75_67 ._PuckLayout-inner_11o75_31 {
1435
+ ._PuckLayout-mounted_dnlfp_74 ._PuckLayout-inner_dnlfp_38 {
1458
1436
  --puck-frame-width: minmax(266px, auto);
1459
1437
  }
1460
1438
  }
1461
1439
  @media (min-width: 638px) {
1462
- ._PuckLayout_11o75_31 ._PuckLayout-inner_11o75_31 {
1440
+ ._PuckLayout_dnlfp_38 ._PuckLayout-inner_dnlfp_38 {
1463
1441
  --puck-side-bar-width: minmax(186px, 250px);
1464
1442
  }
1465
1443
  }
1466
1444
  @media (min-width: 766px) {
1467
- ._PuckLayout_11o75_31 ._PuckLayout-inner_11o75_31 {
1445
+ ._PuckLayout_dnlfp_38 ._PuckLayout-inner_dnlfp_38 {
1468
1446
  --puck-frame-width: auto;
1469
1447
  }
1470
1448
  }
1471
1449
  @media (min-width: 990px) {
1472
- ._PuckLayout_11o75_31 ._PuckLayout-inner_11o75_31 {
1450
+ ._PuckLayout_dnlfp_38 ._PuckLayout-inner_dnlfp_38 {
1473
1451
  --puck-side-bar-width: 256px;
1474
1452
  }
1475
1453
  }
1476
1454
  @media (min-width: 1198px) {
1477
- ._PuckLayout_11o75_31 ._PuckLayout-inner_11o75_31 {
1455
+ ._PuckLayout_dnlfp_38 ._PuckLayout-inner_dnlfp_38 {
1478
1456
  --puck-side-bar-width: 274px;
1479
1457
  }
1480
1458
  }
1481
1459
  @media (min-width: 1398px) {
1482
- ._PuckLayout_11o75_31 ._PuckLayout-inner_11o75_31 {
1460
+ ._PuckLayout_dnlfp_38 ._PuckLayout-inner_dnlfp_38 {
1483
1461
  --puck-side-bar-width: 290px;
1484
1462
  }
1485
1463
  }
1486
1464
  @media (min-width: 1598px) {
1487
- ._PuckLayout_11o75_31 ._PuckLayout-inner_11o75_31 {
1465
+ ._PuckLayout_dnlfp_38 ._PuckLayout-inner_dnlfp_38 {
1488
1466
  --puck-side-bar-width: 320px;
1489
1467
  }
1490
1468
  }
1491
- ._PuckLayout-header_11o75_108 {
1492
- background: var(--puck-color-white);
1493
- border-bottom: 1px solid var(--puck-color-grey-09);
1494
- color: var(--puck-color-black);
1495
- grid-area: header;
1496
- position: relative;
1497
- max-width: 100vw;
1498
- }
1499
- ._PuckLayout-headerInner_11o75_117 {
1500
- align-items: end;
1501
- display: grid;
1502
- gap: var(--puck-space-px);
1503
- grid-template-areas: "left middle right";
1504
- grid-template-columns: 1fr auto 1fr;
1505
- grid-template-rows: auto;
1506
- padding: var(--puck-space-px);
1507
- }
1508
- ._PuckLayout-headerToggle_11o75_127 {
1509
- color: var(--puck-color-grey-05);
1510
- display: flex;
1511
- margin-inline-start: -4px;
1512
- padding-top: 2px;
1513
- }
1514
- ._PuckLayout--rightSideBarVisible_11o75_53 ._PuckLayout-rightSideBarToggle_11o75_134,
1515
- ._PuckLayout--leftSideBarVisible_11o75_47 ._PuckLayout-leftSideBarToggle_11o75_135 {
1516
- color: var(--puck-color-black);
1517
- }
1518
- ._PuckLayout-headerTitle_11o75_139 {
1519
- align-self: center;
1520
- }
1521
- ._PuckLayout-headerPath_11o75_143 {
1522
- font-family: var(--puck-font-family-monospaced);
1523
- font-size: var(--puck-font-size-xxs);
1524
- font-weight: normal;
1525
- word-break: break-all;
1526
- }
1527
- ._PuckLayout-headerTools_11o75_150 {
1528
- display: flex;
1529
- gap: 16px;
1530
- justify-content: flex-end;
1531
- }
1532
- ._PuckLayout-menuButton_11o75_156 {
1533
- color: var(--puck-color-grey-05);
1534
- margin-inline-start: -4px;
1535
- }
1536
- ._PuckLayout--menuOpen_11o75_161 ._PuckLayout-menuButton_11o75_156 {
1537
- color: var(--puck-color-black);
1538
- }
1539
- @media (min-width: 638px) {
1540
- ._PuckLayout-menuButton_11o75_156 {
1541
- display: none;
1542
- }
1543
- }
1544
- ._PuckLayout-leftSideBar_11o75_135 {
1469
+ ._PuckLayout-leftSideBar_dnlfp_115 {
1545
1470
  background: var(--puck-color-grey-12);
1546
1471
  border-inline-end: 1px solid var(--puck-color-grey-09);
1547
1472
  display: flex;
@@ -1549,7 +1474,7 @@ body:has(._DropZone--isAnimating_kmkdc_70:empty) [data-puck-overlay] {
1549
1474
  grid-area: left;
1550
1475
  overflow-y: auto;
1551
1476
  }
1552
- ._PuckLayout-rightSideBar_11o75_134 {
1477
+ ._PuckLayout-rightSideBar_dnlfp_124 {
1553
1478
  background: var(--puck-color-white);
1554
1479
  border-inline-start: 1px solid var(--puck-color-grey-09);
1555
1480
  display: flex;
@@ -1869,3 +1794,102 @@ body:has(._DropZone--isAnimating_kmkdc_70:empty) [data-puck-overlay] {
1869
1794
  height: 0;
1870
1795
  transition: none;
1871
1796
  }
1797
+
1798
+ /* css-module:/home/runner/work/puck/puck/packages/core/components/MenuBar/styles.module.css/#css-module-data */
1799
+ ._MenuBar_8pf8c_1 {
1800
+ background-color: var(--puck-color-white);
1801
+ border-bottom: 1px solid var(--puck-color-grey-09);
1802
+ display: none;
1803
+ left: 0;
1804
+ margin-top: 1px;
1805
+ padding: 8px 16px;
1806
+ position: absolute;
1807
+ right: 0;
1808
+ top: 100%;
1809
+ z-index: 2;
1810
+ }
1811
+ ._MenuBar--menuOpen_8pf8c_14 {
1812
+ display: block;
1813
+ }
1814
+ @media (min-width: 638px) {
1815
+ ._MenuBar_8pf8c_1 {
1816
+ border: none;
1817
+ display: block;
1818
+ margin-top: 0;
1819
+ overflow-y: visible;
1820
+ padding: 0;
1821
+ position: static;
1822
+ }
1823
+ }
1824
+ ._MenuBar-inner_8pf8c_29 {
1825
+ align-items: center;
1826
+ display: flex;
1827
+ flex-wrap: wrap;
1828
+ gap: 8px 16px;
1829
+ justify-content: flex-end;
1830
+ }
1831
+ @media (min-width: 638px) {
1832
+ ._MenuBar-inner_8pf8c_29 {
1833
+ display: flex;
1834
+ flex-direction: row;
1835
+ flex-wrap: nowrap;
1836
+ }
1837
+ }
1838
+ ._MenuBar-history_8pf8c_45 {
1839
+ display: flex;
1840
+ }
1841
+
1842
+ /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Header/styles.module.css/#css-module-data */
1843
+ ._PuckHeader_15xnq_1 {
1844
+ background: var(--puck-color-white);
1845
+ border-bottom: 1px solid var(--puck-color-grey-09);
1846
+ color: var(--puck-color-black);
1847
+ grid-area: header;
1848
+ position: relative;
1849
+ max-width: 100vw;
1850
+ }
1851
+ ._PuckHeader-inner_15xnq_10 {
1852
+ align-items: end;
1853
+ display: grid;
1854
+ gap: var(--puck-space-px);
1855
+ grid-template-areas: "left middle right";
1856
+ grid-template-columns: 1fr auto 1fr;
1857
+ grid-template-rows: auto;
1858
+ padding: var(--puck-space-px);
1859
+ }
1860
+ ._PuckHeader-toggle_15xnq_20 {
1861
+ color: var(--puck-color-grey-05);
1862
+ display: flex;
1863
+ margin-inline-start: -4px;
1864
+ padding-top: 2px;
1865
+ }
1866
+ ._PuckHeader--rightSideBarVisible_15xnq_27 ._PuckHeader-rightSideBarToggle_15xnq_27,
1867
+ ._PuckHeader--leftSideBarVisible_15xnq_28 ._PuckHeader-leftSideBarToggle_15xnq_28 {
1868
+ color: var(--puck-color-black);
1869
+ }
1870
+ ._PuckHeader-title_15xnq_32 {
1871
+ align-self: center;
1872
+ }
1873
+ ._PuckHeader-path_15xnq_36 {
1874
+ font-family: var(--puck-font-family-monospaced);
1875
+ font-size: var(--puck-font-size-xxs);
1876
+ font-weight: normal;
1877
+ word-break: break-all;
1878
+ }
1879
+ ._PuckHeader-tools_15xnq_43 {
1880
+ display: flex;
1881
+ gap: 16px;
1882
+ justify-content: flex-end;
1883
+ }
1884
+ ._PuckHeader-menuButton_15xnq_49 {
1885
+ color: var(--puck-color-grey-05);
1886
+ margin-inline-start: -4px;
1887
+ }
1888
+ ._PuckHeader--menuOpen_15xnq_54 ._PuckHeader-menuButton_15xnq_49 {
1889
+ color: var(--puck-color-black);
1890
+ }
1891
+ @media (min-width: 638px) {
1892
+ ._PuckHeader-menuButton_15xnq_49 {
1893
+ display: none;
1894
+ }
1895
+ }