@measured/puck 0.19.0-canary.1918ad70 → 0.19.0-canary.1e8a3ae2

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,7 +1255,7 @@ 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_3dmev_1 {
1258
+ ._DropZone_1i2sv_1 {
1254
1259
  --resize-animation-ms: 150ms;
1255
1260
  position: relative;
1256
1261
  height: 100%;
@@ -1258,47 +1263,47 @@ textarea._Input-input_g5w3n_26 {
1258
1263
  outline-offset: -2px;
1259
1264
  width: 100%;
1260
1265
  }
1261
- ._DropZone--hasChildren_3dmev_11 {
1266
+ ._DropZone--hasChildren_1i2sv_11 {
1262
1267
  min-height: 0;
1263
1268
  }
1264
- ._DropZone_3dmev_1:empty {
1269
+ ._DropZone_1i2sv_1:empty {
1265
1270
  min-height: var(--min-empty-height);
1266
1271
  }
1267
- ._DropZone_3dmev_1:not(._DropZone--userIsDragging_3dmev_19) {
1272
+ [data-puck-entry]:not([data-puck-dragging]) ._DropZone_1i2sv_1 {
1268
1273
  transition: min-height var(--resize-animation-ms) ease-in;
1269
1274
  }
1270
- ._DropZone--isAreaSelected_3dmev_23,
1271
- ._DropZone--hoveringOverArea_3dmev_24:not(._DropZone--isRootZone_3dmev_24) {
1275
+ ._DropZone--isAreaSelected_1i2sv_24,
1276
+ ._DropZone--hoveringOverArea_1i2sv_25:not(._DropZone--isRootZone_1i2sv_25) {
1272
1277
  background: color-mix(in srgb, var(--puck-color-azure-09) 30%, transparent);
1273
1278
  outline: 2px dashed var(--puck-color-azure-08);
1274
1279
  }
1275
- ._DropZone_3dmev_1:empty {
1280
+ ._DropZone_1i2sv_1:empty {
1276
1281
  background: color-mix(in srgb, var(--puck-color-azure-09) 30%, transparent);
1277
1282
  outline: 2px dashed var(--puck-color-azure-08);
1278
1283
  }
1279
- ._DropZone--isDestination_3dmev_34 {
1284
+ ._DropZone--isDestination_1i2sv_35 {
1280
1285
  outline: 2px dashed var(--puck-color-azure-04) !important;
1281
1286
  }
1282
- ._DropZone--isDestination_3dmev_34:not(._DropZone--isRootZone_3dmev_24) {
1287
+ ._DropZone--isDestination_1i2sv_35:not(._DropZone--isRootZone_1i2sv_25) {
1283
1288
  background: color-mix(in srgb, var(--puck-color-azure-09) 30%, transparent) !important;
1284
1289
  }
1285
- ._DropZone-item_3dmev_46 {
1290
+ ._DropZone-item_1i2sv_47 {
1286
1291
  position: relative;
1287
1292
  }
1288
- ._DropZone-hitbox_3dmev_50 {
1293
+ ._DropZone-hitbox_1i2sv_51 {
1289
1294
  position: absolute;
1290
1295
  bottom: -12px;
1291
1296
  height: 24px;
1292
1297
  width: 100%;
1293
1298
  z-index: 1;
1294
1299
  }
1295
- ._DropZone--isEnabled_3dmev_58._DropZone--userIsDragging_3dmev_19 {
1300
+ [data-puck-dragging] ._DropZone--isEnabled_1i2sv_59 {
1296
1301
  outline: 2px dashed var(--puck-color-azure-06);
1297
1302
  }
1298
- ._DropZone_3dmev_1 > *:not([data-puck-component]) {
1303
+ ._DropZone_1i2sv_1 > *:not([data-puck-component]) {
1299
1304
  opacity: 0;
1300
1305
  }
1301
- body:has(._DropZone--isAnimating_3dmev_67:empty) [data-puck-overlay] {
1306
+ body:has(._DropZone--isAnimating_1i2sv_68:empty) [data-puck-overlay] {
1302
1307
  opacity: 0 !important;
1303
1308
  }
1304
1309
 
@@ -1388,60 +1393,22 @@ body:has(._DropZone--isAnimating_3dmev_67:empty) [data-puck-overlay] {
1388
1393
  opacity: 0.8;
1389
1394
  }
1390
1395
 
1391
- /* css-module:/home/runner/work/puck/puck/packages/core/components/MenuBar/styles.module.css/#css-module-data */
1392
- ._MenuBar_8pf8c_1 {
1393
- background-color: var(--puck-color-white);
1394
- border-bottom: 1px solid var(--puck-color-grey-09);
1395
- display: none;
1396
- left: 0;
1397
- margin-top: 1px;
1398
- padding: 8px 16px;
1399
- position: absolute;
1400
- right: 0;
1401
- top: 100%;
1402
- z-index: 2;
1403
- }
1404
- ._MenuBar--menuOpen_8pf8c_14 {
1405
- display: block;
1406
- }
1407
- @media (min-width: 638px) {
1408
- ._MenuBar_8pf8c_1 {
1409
- border: none;
1410
- display: block;
1411
- margin-top: 0;
1412
- overflow-y: visible;
1413
- padding: 0;
1414
- position: static;
1415
- }
1416
- }
1417
- ._MenuBar-inner_8pf8c_29 {
1418
- align-items: center;
1419
- display: flex;
1420
- flex-wrap: wrap;
1421
- gap: 8px 16px;
1422
- justify-content: flex-end;
1423
- }
1424
- @media (min-width: 638px) {
1425
- ._MenuBar-inner_8pf8c_29 {
1426
- display: flex;
1427
- flex-direction: row;
1428
- flex-wrap: nowrap;
1429
- }
1430
- }
1431
- ._MenuBar-history_8pf8c_45 {
1432
- display: flex;
1433
- }
1434
-
1435
1396
  /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/styles.module.css/#css-module-data */
1436
- ._Puck_11o75_19 {
1397
+ ._Puck_dnlfp_19 {
1437
1398
  --puck-space-px: 16px;
1438
1399
  font-family: var(--puck-font-family);
1400
+ overflow-x: hidden;
1439
1401
  }
1440
- ._Puck-portal_11o75_24 {
1402
+ @media (min-width: 766px) {
1403
+ ._Puck_dnlfp_19 {
1404
+ overflow-x: auto;
1405
+ }
1406
+ }
1407
+ ._Puck-portal_dnlfp_31 {
1441
1408
  position: relative;
1442
1409
  z-index: 2;
1443
1410
  }
1444
- ._PuckLayout-inner_11o75_31 {
1411
+ ._PuckLayout-inner_dnlfp_38 {
1445
1412
  --puck-frame-width: auto;
1446
1413
  --puck-side-bar-width: 0px;
1447
1414
  display: grid;
@@ -1452,107 +1419,54 @@ body:has(._DropZone--isAnimating_3dmev_67:empty) [data-puck-overlay] {
1452
1419
  position: relative;
1453
1420
  z-index: 0;
1454
1421
  }
1455
- ._PuckLayout--mounted_11o75_43 ._PuckLayout-inner_11o75_31 {
1422
+ ._PuckLayout--mounted_dnlfp_50 ._PuckLayout-inner_dnlfp_38 {
1456
1423
  --puck-side-bar-width: 186px;
1457
1424
  }
1458
- ._PuckLayout--leftSideBarVisible_11o75_47 ._PuckLayout-inner_11o75_31 {
1425
+ ._PuckLayout--leftSideBarVisible_dnlfp_54 ._PuckLayout-inner_dnlfp_38 {
1459
1426
  grid-template-columns: var(--puck-side-bar-width) var(--puck-frame-width) 0;
1460
1427
  }
1461
- ._PuckLayout--rightSideBarVisible_11o75_53 ._PuckLayout-inner_11o75_31 {
1428
+ ._PuckLayout--rightSideBarVisible_dnlfp_60 ._PuckLayout-inner_dnlfp_38 {
1462
1429
  grid-template-columns: 0 var(--puck-frame-width) var(--puck-side-bar-width);
1463
1430
  }
1464
- ._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 {
1465
1432
  grid-template-columns: var(--puck-side-bar-width) var(--puck-frame-width) var(--puck-side-bar-width);
1466
1433
  }
1467
1434
  @media (min-width: 458px) {
1468
- ._PuckLayout-mounted_11o75_67 ._PuckLayout-inner_11o75_31 {
1435
+ ._PuckLayout-mounted_dnlfp_74 ._PuckLayout-inner_dnlfp_38 {
1469
1436
  --puck-frame-width: minmax(266px, auto);
1470
1437
  }
1471
1438
  }
1472
1439
  @media (min-width: 638px) {
1473
- ._PuckLayout_11o75_31 ._PuckLayout-inner_11o75_31 {
1440
+ ._PuckLayout_dnlfp_38 ._PuckLayout-inner_dnlfp_38 {
1474
1441
  --puck-side-bar-width: minmax(186px, 250px);
1475
1442
  }
1476
1443
  }
1477
1444
  @media (min-width: 766px) {
1478
- ._PuckLayout_11o75_31 ._PuckLayout-inner_11o75_31 {
1445
+ ._PuckLayout_dnlfp_38 ._PuckLayout-inner_dnlfp_38 {
1479
1446
  --puck-frame-width: auto;
1480
1447
  }
1481
1448
  }
1482
1449
  @media (min-width: 990px) {
1483
- ._PuckLayout_11o75_31 ._PuckLayout-inner_11o75_31 {
1450
+ ._PuckLayout_dnlfp_38 ._PuckLayout-inner_dnlfp_38 {
1484
1451
  --puck-side-bar-width: 256px;
1485
1452
  }
1486
1453
  }
1487
1454
  @media (min-width: 1198px) {
1488
- ._PuckLayout_11o75_31 ._PuckLayout-inner_11o75_31 {
1455
+ ._PuckLayout_dnlfp_38 ._PuckLayout-inner_dnlfp_38 {
1489
1456
  --puck-side-bar-width: 274px;
1490
1457
  }
1491
1458
  }
1492
1459
  @media (min-width: 1398px) {
1493
- ._PuckLayout_11o75_31 ._PuckLayout-inner_11o75_31 {
1460
+ ._PuckLayout_dnlfp_38 ._PuckLayout-inner_dnlfp_38 {
1494
1461
  --puck-side-bar-width: 290px;
1495
1462
  }
1496
1463
  }
1497
1464
  @media (min-width: 1598px) {
1498
- ._PuckLayout_11o75_31 ._PuckLayout-inner_11o75_31 {
1465
+ ._PuckLayout_dnlfp_38 ._PuckLayout-inner_dnlfp_38 {
1499
1466
  --puck-side-bar-width: 320px;
1500
1467
  }
1501
1468
  }
1502
- ._PuckLayout-header_11o75_108 {
1503
- background: var(--puck-color-white);
1504
- border-bottom: 1px solid var(--puck-color-grey-09);
1505
- color: var(--puck-color-black);
1506
- grid-area: header;
1507
- position: relative;
1508
- max-width: 100vw;
1509
- }
1510
- ._PuckLayout-headerInner_11o75_117 {
1511
- align-items: end;
1512
- display: grid;
1513
- gap: var(--puck-space-px);
1514
- grid-template-areas: "left middle right";
1515
- grid-template-columns: 1fr auto 1fr;
1516
- grid-template-rows: auto;
1517
- padding: var(--puck-space-px);
1518
- }
1519
- ._PuckLayout-headerToggle_11o75_127 {
1520
- color: var(--puck-color-grey-05);
1521
- display: flex;
1522
- margin-inline-start: -4px;
1523
- padding-top: 2px;
1524
- }
1525
- ._PuckLayout--rightSideBarVisible_11o75_53 ._PuckLayout-rightSideBarToggle_11o75_134,
1526
- ._PuckLayout--leftSideBarVisible_11o75_47 ._PuckLayout-leftSideBarToggle_11o75_135 {
1527
- color: var(--puck-color-black);
1528
- }
1529
- ._PuckLayout-headerTitle_11o75_139 {
1530
- align-self: center;
1531
- }
1532
- ._PuckLayout-headerPath_11o75_143 {
1533
- font-family: var(--puck-font-family-monospaced);
1534
- font-size: var(--puck-font-size-xxs);
1535
- font-weight: normal;
1536
- word-break: break-all;
1537
- }
1538
- ._PuckLayout-headerTools_11o75_150 {
1539
- display: flex;
1540
- gap: 16px;
1541
- justify-content: flex-end;
1542
- }
1543
- ._PuckLayout-menuButton_11o75_156 {
1544
- color: var(--puck-color-grey-05);
1545
- margin-inline-start: -4px;
1546
- }
1547
- ._PuckLayout--menuOpen_11o75_161 ._PuckLayout-menuButton_11o75_156 {
1548
- color: var(--puck-color-black);
1549
- }
1550
- @media (min-width: 638px) {
1551
- ._PuckLayout-menuButton_11o75_156 {
1552
- display: none;
1553
- }
1554
- }
1555
- ._PuckLayout-leftSideBar_11o75_135 {
1469
+ ._PuckLayout-leftSideBar_dnlfp_115 {
1556
1470
  background: var(--puck-color-grey-12);
1557
1471
  border-inline-end: 1px solid var(--puck-color-grey-09);
1558
1472
  display: flex;
@@ -1560,7 +1474,7 @@ body:has(._DropZone--isAnimating_3dmev_67:empty) [data-puck-overlay] {
1560
1474
  grid-area: left;
1561
1475
  overflow-y: auto;
1562
1476
  }
1563
- ._PuckLayout-rightSideBar_11o75_134 {
1477
+ ._PuckLayout-rightSideBar_dnlfp_124 {
1564
1478
  background: var(--puck-color-white);
1565
1479
  border-inline-start: 1px solid var(--puck-color-grey-09);
1566
1480
  display: flex;
@@ -1880,3 +1794,102 @@ body:has(._DropZone--isAnimating_3dmev_67:empty) [data-puck-overlay] {
1880
1794
  height: 0;
1881
1795
  transition: none;
1882
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
+ }