@measured/puck 0.19.0-canary.e62832e → 0.19.0-canary.e7d23713

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
 
@@ -1087,27 +1093,25 @@ textarea._Input-input_g5w3n_26 {
1087
1093
  }
1088
1094
 
1089
1095
  /* css-module:/home/runner/work/puck/puck/packages/core/components/Drawer/styles.module.css/#css-module-data */
1090
- ._Drawer_fkqfo_1 {
1096
+ ._Drawer_pl7z0_1 {
1091
1097
  display: flex;
1092
1098
  flex-direction: column;
1093
1099
  font-family: var(--puck-font-family);
1094
1100
  gap: 12px;
1095
1101
  }
1096
- ._Drawer-draggable_fkqfo_8 {
1102
+ ._Drawer-draggable_pl7z0_8 {
1097
1103
  position: relative;
1098
1104
  }
1099
- ._Drawer-draggableBg_fkqfo_12 {
1105
+ ._Drawer-draggableBg_pl7z0_12 {
1100
1106
  position: absolute;
1101
1107
  top: 0;
1102
1108
  right: 0;
1103
1109
  bottom: 0;
1104
1110
  left: 0;
1105
1111
  pointer-events: none;
1112
+ z-index: -1;
1106
1113
  }
1107
- ._Drawer-draggableFg_fkqfo_21 {
1108
- z-index: 1;
1109
- }
1110
- ._DrawerItem-draggable_fkqfo_25 {
1114
+ ._DrawerItem-draggable_pl7z0_22 {
1111
1115
  background: var(--puck-color-white);
1112
1116
  cursor: grab;
1113
1117
  padding: 12px;
@@ -1119,39 +1123,39 @@ textarea._Input-input_g5w3n_26 {
1119
1123
  align-items: center;
1120
1124
  transition: background-color 50ms ease-in, color 50ms ease-in;
1121
1125
  }
1122
- ._DrawerItem--disabled_fkqfo_38 ._DrawerItem-draggable_fkqfo_25 {
1126
+ ._DrawerItem--disabled_pl7z0_35 ._DrawerItem-draggable_pl7z0_22 {
1123
1127
  background: var(--puck-color-grey-11);
1124
1128
  color: var(--puck-color-grey-05);
1125
1129
  cursor: not-allowed;
1126
1130
  }
1127
- ._DrawerItem_fkqfo_25:focus-visible {
1131
+ ._DrawerItem_pl7z0_22:focus-visible {
1128
1132
  outline: 0;
1129
1133
  }
1130
- ._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 {
1131
1135
  border-radius: 4px;
1132
1136
  outline: 2px solid var(--puck-color-azure-05);
1133
1137
  outline-offset: 2px;
1134
1138
  }
1135
1139
  @media (hover: hover) and (pointer: fine) {
1136
- ._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 {
1137
1141
  background-color: var(--puck-color-azure-12);
1138
1142
  color: var(--puck-color-azure-04);
1139
1143
  transition: none;
1140
1144
  }
1141
1145
  }
1142
- ._DrawerItem-name_fkqfo_66 {
1146
+ ._DrawerItem-name_pl7z0_63 {
1143
1147
  overflow-x: hidden;
1144
1148
  text-overflow: ellipsis;
1145
1149
  white-space: nowrap;
1146
1150
  }
1147
1151
 
1148
1152
  /* css-module:/home/runner/work/puck/puck/packages/core/components/DraggableComponent/styles.module.css/#css-module-data */
1149
- ._DraggableComponent_1ukn8_1 {
1153
+ ._DraggableComponent_qzbgx_1 {
1150
1154
  position: absolute;
1151
1155
  pointer-events: none;
1152
1156
  --overlay-background: color-mix( in srgb, var(--puck-color-azure-08) 30%, transparent );
1153
1157
  }
1154
- ._DraggableComponent-overlay_1ukn8_12 {
1158
+ ._DraggableComponent-overlay_qzbgx_12 {
1155
1159
  cursor: pointer;
1156
1160
  height: 100%;
1157
1161
  width: 100%;
@@ -1163,10 +1167,10 @@ textarea._Input-input_g5w3n_26 {
1163
1167
  box-sizing: border-box;
1164
1168
  z-index: 1;
1165
1169
  }
1166
- ._DraggableComponent_1ukn8_1:focus-visible > ._DraggableComponent-overlay_1ukn8_12 {
1170
+ ._DraggableComponent_qzbgx_1:focus-visible > ._DraggableComponent-overlay_qzbgx_12 {
1167
1171
  outline: 1px solid var(--puck-color-azure-05);
1168
1172
  }
1169
- ._DraggableComponent-loadingOverlay_1ukn8_29 {
1173
+ ._DraggableComponent-loadingOverlay_qzbgx_29 {
1170
1174
  background: var(--puck-color-white);
1171
1175
  color: var(--puck-color-grey-03);
1172
1176
  border-radius: 4px;
@@ -1181,35 +1185,36 @@ textarea._Input-input_g5w3n_26 {
1181
1185
  opacity: 0.8;
1182
1186
  z-index: 1;
1183
1187
  }
1184
- ._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 {
1185
1189
  background: var(--overlay-background);
1186
1190
  }
1187
- ._DraggableComponent--hover_1ukn8_45 > ._DraggableComponent-overlay_1ukn8_12 {
1191
+ ._DraggableComponent--hover_qzbgx_45 > ._DraggableComponent-overlay_qzbgx_12 {
1188
1192
  outline: 2px var(--puck-color-azure-09) solid;
1189
1193
  }
1190
- ._DraggableComponent--isSelected_1ukn8_54 > ._DraggableComponent-overlay_1ukn8_12 {
1194
+ ._DraggableComponent--isSelected_qzbgx_54 > ._DraggableComponent-overlay_qzbgx_12 {
1191
1195
  outline-color: var(--puck-color-azure-07);
1192
1196
  }
1193
- ._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 {
1194
1198
  display: none;
1195
1199
  }
1196
- ._DraggableComponent-actionsOverlay_1ukn8_66 {
1200
+ ._DraggableComponent-actionsOverlay_qzbgx_66 {
1197
1201
  position: sticky;
1198
1202
  opacity: 0;
1199
1203
  pointer-events: none;
1200
1204
  z-index: 2;
1201
1205
  }
1202
- ._DraggableComponent--isSelected_1ukn8_54 ._DraggableComponent-actionsOverlay_1ukn8_66 {
1206
+ ._DraggableComponent--isSelected_qzbgx_54 ._DraggableComponent-actionsOverlay_qzbgx_66 {
1203
1207
  opacity: 1;
1204
1208
  pointer-events: auto;
1205
1209
  }
1206
- ._DraggableComponent-actions_1ukn8_66 {
1210
+ ._DraggableComponent-actions_qzbgx_66 {
1207
1211
  position: absolute;
1208
1212
  width: auto;
1209
1213
  cursor: grab;
1210
1214
  display: flex;
1211
1215
  box-sizing: border-box;
1212
1216
  transform-origin: right top;
1217
+ min-height: 36px;
1213
1218
  }
1214
1219
 
1215
1220
  /* components/DraggableComponent/styles.css */
@@ -1230,7 +1235,7 @@ textarea._Input-input_g5w3n_26 {
1230
1235
  [data-puck-disabled] {
1231
1236
  cursor: pointer;
1232
1237
  }
1233
- [data-puck-dragging]:not([data-dnd-dragging]) {
1238
+ [data-dnd-placeholder] {
1234
1239
  background: var(--puck-color-azure-06) !important;
1235
1240
  border: none !important;
1236
1241
  color: #00000000 !important;
@@ -1238,9 +1243,9 @@ textarea._Input-input_g5w3n_26 {
1238
1243
  outline: none !important;
1239
1244
  transition: none !important;
1240
1245
  }
1241
- [data-puck-dragging]:not([data-dnd-dragging]) *,
1242
- [data-puck-dragging]:not([data-dnd-dragging])::after,
1243
- [data-puck-dragging]:not([data-dnd-dragging])::before {
1246
+ [data-dnd-placeholder] *,
1247
+ [data-dnd-placeholder]::after,
1248
+ [data-dnd-placeholder]::before {
1244
1249
  opacity: 0 !important;
1245
1250
  }
1246
1251
  [data-dnd-dragging][data-puck-component] {
@@ -1250,57 +1255,55 @@ textarea._Input-input_g5w3n_26 {
1250
1255
  }
1251
1256
 
1252
1257
  /* css-module:/home/runner/work/puck/puck/packages/core/components/DropZone/styles.module.css/#css-module-data */
1253
- ._DropZone_kmkdc_1 {
1258
+ ._DropZone_1i2sv_1 {
1254
1259
  --resize-animation-ms: 150ms;
1255
1260
  position: relative;
1256
1261
  height: 100%;
1262
+ min-height: var(--min-empty-height);
1257
1263
  outline-offset: -2px;
1258
1264
  width: 100%;
1259
1265
  }
1260
- ._DropZone--isActive_kmkdc_10 {
1261
- min-height: var(--min-empty-height);
1262
- }
1263
- ._DropZone--hasChildren_kmkdc_14 {
1266
+ ._DropZone--hasChildren_1i2sv_11 {
1264
1267
  min-height: 0;
1265
1268
  }
1266
- ._DropZone--isActive_kmkdc_10._DropZone_kmkdc_1:empty {
1269
+ ._DropZone_1i2sv_1:empty {
1267
1270
  min-height: var(--min-empty-height);
1268
1271
  }
1269
- ._DropZone_kmkdc_1:not(._DropZone--userIsDragging_kmkdc_22) {
1272
+ [data-puck-entry]:not([data-puck-dragging]) ._DropZone_1i2sv_1 {
1270
1273
  transition: min-height var(--resize-animation-ms) ease-in;
1271
1274
  }
1272
- ._DropZone--isAreaSelected_kmkdc_26,
1273
- ._DropZone--hoveringOverArea_kmkdc_27:not(._DropZone--isRootZone_kmkdc_27) {
1275
+ ._DropZone--isAreaSelected_1i2sv_24,
1276
+ ._DropZone--hoveringOverArea_1i2sv_25:not(._DropZone--isRootZone_1i2sv_25) {
1274
1277
  background: color-mix(in srgb, var(--puck-color-azure-09) 30%, transparent);
1275
1278
  outline: 2px dashed var(--puck-color-azure-08);
1276
1279
  }
1277
- ._DropZone_kmkdc_1:empty {
1280
+ ._DropZone_1i2sv_1:empty {
1278
1281
  background: color-mix(in srgb, var(--puck-color-azure-09) 30%, transparent);
1279
1282
  outline: 2px dashed var(--puck-color-azure-08);
1280
1283
  }
1281
- ._DropZone--isDestination_kmkdc_37 {
1284
+ ._DropZone--isDestination_1i2sv_35 {
1282
1285
  outline: 2px dashed var(--puck-color-azure-04) !important;
1283
1286
  }
1284
- ._DropZone--isDestination_kmkdc_37:not(._DropZone--isRootZone_kmkdc_27) {
1287
+ ._DropZone--isDestination_1i2sv_35:not(._DropZone--isRootZone_1i2sv_25) {
1285
1288
  background: color-mix(in srgb, var(--puck-color-azure-09) 30%, transparent) !important;
1286
1289
  }
1287
- ._DropZone-item_kmkdc_49 {
1290
+ ._DropZone-item_1i2sv_47 {
1288
1291
  position: relative;
1289
1292
  }
1290
- ._DropZone-hitbox_kmkdc_53 {
1293
+ ._DropZone-hitbox_1i2sv_51 {
1291
1294
  position: absolute;
1292
1295
  bottom: -12px;
1293
1296
  height: 24px;
1294
1297
  width: 100%;
1295
1298
  z-index: 1;
1296
1299
  }
1297
- ._DropZone--isEnabled_kmkdc_61._DropZone--userIsDragging_kmkdc_22 {
1300
+ [data-puck-dragging] ._DropZone--isEnabled_1i2sv_59 {
1298
1301
  outline: 2px dashed var(--puck-color-azure-06);
1299
1302
  }
1300
- ._DropZone_kmkdc_1 > *:not([data-puck-component]) {
1303
+ ._DropZone_1i2sv_1 > *:not([data-puck-component]) {
1301
1304
  opacity: 0;
1302
1305
  }
1303
- body:has(._DropZone--isAnimating_kmkdc_70:empty) [data-puck-overlay] {
1306
+ body:has(._DropZone--isAnimating_1i2sv_68:empty) [data-puck-overlay] {
1304
1307
  opacity: 0 !important;
1305
1308
  }
1306
1309
 
@@ -1390,60 +1393,22 @@ body:has(._DropZone--isAnimating_kmkdc_70:empty) [data-puck-overlay] {
1390
1393
  opacity: 0.8;
1391
1394
  }
1392
1395
 
1393
- /* css-module:/home/runner/work/puck/puck/packages/core/components/MenuBar/styles.module.css/#css-module-data */
1394
- ._MenuBar_8pf8c_1 {
1395
- background-color: var(--puck-color-white);
1396
- border-bottom: 1px solid var(--puck-color-grey-09);
1397
- display: none;
1398
- left: 0;
1399
- margin-top: 1px;
1400
- padding: 8px 16px;
1401
- position: absolute;
1402
- right: 0;
1403
- top: 100%;
1404
- z-index: 2;
1405
- }
1406
- ._MenuBar--menuOpen_8pf8c_14 {
1407
- display: block;
1408
- }
1409
- @media (min-width: 638px) {
1410
- ._MenuBar_8pf8c_1 {
1411
- border: none;
1412
- display: block;
1413
- margin-top: 0;
1414
- overflow-y: visible;
1415
- padding: 0;
1416
- position: static;
1417
- }
1418
- }
1419
- ._MenuBar-inner_8pf8c_29 {
1420
- align-items: center;
1421
- display: flex;
1422
- flex-wrap: wrap;
1423
- gap: 8px 16px;
1424
- justify-content: flex-end;
1425
- }
1426
- @media (min-width: 638px) {
1427
- ._MenuBar-inner_8pf8c_29 {
1428
- display: flex;
1429
- flex-direction: row;
1430
- flex-wrap: nowrap;
1431
- }
1432
- }
1433
- ._MenuBar-history_8pf8c_45 {
1434
- display: flex;
1435
- }
1436
-
1437
1396
  /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/styles.module.css/#css-module-data */
1438
- ._Puck_11o75_19 {
1397
+ ._Puck_dnlfp_19 {
1439
1398
  --puck-space-px: 16px;
1440
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
+ }
1441
1406
  }
1442
- ._Puck-portal_11o75_24 {
1407
+ ._Puck-portal_dnlfp_31 {
1443
1408
  position: relative;
1444
1409
  z-index: 2;
1445
1410
  }
1446
- ._PuckLayout-inner_11o75_31 {
1411
+ ._PuckLayout-inner_dnlfp_38 {
1447
1412
  --puck-frame-width: auto;
1448
1413
  --puck-side-bar-width: 0px;
1449
1414
  display: grid;
@@ -1454,107 +1419,54 @@ body:has(._DropZone--isAnimating_kmkdc_70:empty) [data-puck-overlay] {
1454
1419
  position: relative;
1455
1420
  z-index: 0;
1456
1421
  }
1457
- ._PuckLayout--mounted_11o75_43 ._PuckLayout-inner_11o75_31 {
1422
+ ._PuckLayout--mounted_dnlfp_50 ._PuckLayout-inner_dnlfp_38 {
1458
1423
  --puck-side-bar-width: 186px;
1459
1424
  }
1460
- ._PuckLayout--leftSideBarVisible_11o75_47 ._PuckLayout-inner_11o75_31 {
1425
+ ._PuckLayout--leftSideBarVisible_dnlfp_54 ._PuckLayout-inner_dnlfp_38 {
1461
1426
  grid-template-columns: var(--puck-side-bar-width) var(--puck-frame-width) 0;
1462
1427
  }
1463
- ._PuckLayout--rightSideBarVisible_11o75_53 ._PuckLayout-inner_11o75_31 {
1428
+ ._PuckLayout--rightSideBarVisible_dnlfp_60 ._PuckLayout-inner_dnlfp_38 {
1464
1429
  grid-template-columns: 0 var(--puck-frame-width) var(--puck-side-bar-width);
1465
1430
  }
1466
- ._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 {
1467
1432
  grid-template-columns: var(--puck-side-bar-width) var(--puck-frame-width) var(--puck-side-bar-width);
1468
1433
  }
1469
1434
  @media (min-width: 458px) {
1470
- ._PuckLayout-mounted_11o75_67 ._PuckLayout-inner_11o75_31 {
1435
+ ._PuckLayout-mounted_dnlfp_74 ._PuckLayout-inner_dnlfp_38 {
1471
1436
  --puck-frame-width: minmax(266px, auto);
1472
1437
  }
1473
1438
  }
1474
1439
  @media (min-width: 638px) {
1475
- ._PuckLayout_11o75_31 ._PuckLayout-inner_11o75_31 {
1440
+ ._PuckLayout_dnlfp_38 ._PuckLayout-inner_dnlfp_38 {
1476
1441
  --puck-side-bar-width: minmax(186px, 250px);
1477
1442
  }
1478
1443
  }
1479
1444
  @media (min-width: 766px) {
1480
- ._PuckLayout_11o75_31 ._PuckLayout-inner_11o75_31 {
1445
+ ._PuckLayout_dnlfp_38 ._PuckLayout-inner_dnlfp_38 {
1481
1446
  --puck-frame-width: auto;
1482
1447
  }
1483
1448
  }
1484
1449
  @media (min-width: 990px) {
1485
- ._PuckLayout_11o75_31 ._PuckLayout-inner_11o75_31 {
1450
+ ._PuckLayout_dnlfp_38 ._PuckLayout-inner_dnlfp_38 {
1486
1451
  --puck-side-bar-width: 256px;
1487
1452
  }
1488
1453
  }
1489
1454
  @media (min-width: 1198px) {
1490
- ._PuckLayout_11o75_31 ._PuckLayout-inner_11o75_31 {
1455
+ ._PuckLayout_dnlfp_38 ._PuckLayout-inner_dnlfp_38 {
1491
1456
  --puck-side-bar-width: 274px;
1492
1457
  }
1493
1458
  }
1494
1459
  @media (min-width: 1398px) {
1495
- ._PuckLayout_11o75_31 ._PuckLayout-inner_11o75_31 {
1460
+ ._PuckLayout_dnlfp_38 ._PuckLayout-inner_dnlfp_38 {
1496
1461
  --puck-side-bar-width: 290px;
1497
1462
  }
1498
1463
  }
1499
1464
  @media (min-width: 1598px) {
1500
- ._PuckLayout_11o75_31 ._PuckLayout-inner_11o75_31 {
1465
+ ._PuckLayout_dnlfp_38 ._PuckLayout-inner_dnlfp_38 {
1501
1466
  --puck-side-bar-width: 320px;
1502
1467
  }
1503
1468
  }
1504
- ._PuckLayout-header_11o75_108 {
1505
- background: var(--puck-color-white);
1506
- border-bottom: 1px solid var(--puck-color-grey-09);
1507
- color: var(--puck-color-black);
1508
- grid-area: header;
1509
- position: relative;
1510
- max-width: 100vw;
1511
- }
1512
- ._PuckLayout-headerInner_11o75_117 {
1513
- align-items: end;
1514
- display: grid;
1515
- gap: var(--puck-space-px);
1516
- grid-template-areas: "left middle right";
1517
- grid-template-columns: 1fr auto 1fr;
1518
- grid-template-rows: auto;
1519
- padding: var(--puck-space-px);
1520
- }
1521
- ._PuckLayout-headerToggle_11o75_127 {
1522
- color: var(--puck-color-grey-05);
1523
- display: flex;
1524
- margin-inline-start: -4px;
1525
- padding-top: 2px;
1526
- }
1527
- ._PuckLayout--rightSideBarVisible_11o75_53 ._PuckLayout-rightSideBarToggle_11o75_134,
1528
- ._PuckLayout--leftSideBarVisible_11o75_47 ._PuckLayout-leftSideBarToggle_11o75_135 {
1529
- color: var(--puck-color-black);
1530
- }
1531
- ._PuckLayout-headerTitle_11o75_139 {
1532
- align-self: center;
1533
- }
1534
- ._PuckLayout-headerPath_11o75_143 {
1535
- font-family: var(--puck-font-family-monospaced);
1536
- font-size: var(--puck-font-size-xxs);
1537
- font-weight: normal;
1538
- word-break: break-all;
1539
- }
1540
- ._PuckLayout-headerTools_11o75_150 {
1541
- display: flex;
1542
- gap: 16px;
1543
- justify-content: flex-end;
1544
- }
1545
- ._PuckLayout-menuButton_11o75_156 {
1546
- color: var(--puck-color-grey-05);
1547
- margin-inline-start: -4px;
1548
- }
1549
- ._PuckLayout--menuOpen_11o75_161 ._PuckLayout-menuButton_11o75_156 {
1550
- color: var(--puck-color-black);
1551
- }
1552
- @media (min-width: 638px) {
1553
- ._PuckLayout-menuButton_11o75_156 {
1554
- display: none;
1555
- }
1556
- }
1557
- ._PuckLayout-leftSideBar_11o75_135 {
1469
+ ._PuckLayout-leftSideBar_dnlfp_115 {
1558
1470
  background: var(--puck-color-grey-12);
1559
1471
  border-inline-end: 1px solid var(--puck-color-grey-09);
1560
1472
  display: flex;
@@ -1562,7 +1474,7 @@ body:has(._DropZone--isAnimating_kmkdc_70:empty) [data-puck-overlay] {
1562
1474
  grid-area: left;
1563
1475
  overflow-y: auto;
1564
1476
  }
1565
- ._PuckLayout-rightSideBar_11o75_134 {
1477
+ ._PuckLayout-rightSideBar_dnlfp_124 {
1566
1478
  background: var(--puck-color-white);
1567
1479
  border-inline-start: 1px solid var(--puck-color-grey-09);
1568
1480
  display: flex;
@@ -1882,3 +1794,102 @@ body:has(._DropZone--isAnimating_kmkdc_70:empty) [data-puck-overlay] {
1882
1794
  height: 0;
1883
1795
  transition: none;
1884
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
+ }