@measured/puck 0.19.0-canary.a281c342 → 0.19.0-canary.a60c81eb

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_4xor1_1 + ._InputWrapper_4xor1_1 {
229
233
  margin-top: 12px;
230
234
  }
231
- ._Input-label_g5w3n_5 {
235
+ ._Input-label_4xor1_5 {
232
236
  align-items: center;
233
237
  color: var(--puck-color-grey-04);
234
238
  display: flex;
@@ -236,29 +240,30 @@
236
240
  font-size: var(--puck-font-size-xxs);
237
241
  font-weight: 600;
238
242
  }
239
- ._Input-labelIcon_g5w3n_14 {
243
+ ._Input-labelIcon_4xor1_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_4xor1_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_4xor1_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%;
260
265
  }
261
- select._Input-input_g5w3n_26 {
266
+ select._Input-input_4xor1_26 {
262
267
  appearance: none;
263
268
  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
269
  background-size: 12px;
@@ -267,29 +272,29 @@ select._Input-input_g5w3n_26 {
267
272
  background-color: var(--puck-color-white);
268
273
  cursor: pointer;
269
274
  }
270
- select._Input-input_g5w3n_26:dir(rtl) {
275
+ select._Input-input_4xor1_26:dir(rtl) {
271
276
  background-position: 12px calc(50% + 3px);
272
277
  }
273
278
  @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]) {
279
+ ._Input_4xor1_1:has(> input):hover ._Input-input_4xor1_26:not([readonly]),
280
+ ._Input_4xor1_1:has(> textarea):hover ._Input-input_4xor1_26:not([readonly]) {
276
281
  border-color: var(--puck-color-grey-05);
277
282
  transition: none;
278
283
  }
279
- ._Input_g5w3n_1:has(> select):hover ._Input-input_g5w3n_26:not([disabled]) {
284
+ ._Input_4xor1_1:has(> select):hover ._Input-input_4xor1_26:not([disabled]) {
280
285
  background-color: var(--puck-color-azure-12);
281
286
  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
287
  border-color: var(--puck-color-grey-05);
283
288
  transition: none;
284
289
  }
285
290
  }
286
- ._Input-input_g5w3n_26:focus {
291
+ ._Input-input_4xor1_26:focus {
287
292
  border-color: var(--puck-color-grey-05);
288
293
  outline: 2px solid var(--puck-color-azure-05);
289
294
  transition: none;
290
295
  }
291
- ._Input--readOnly_g5w3n_74 > ._Input-input_g5w3n_26,
292
- ._Input--readOnly_g5w3n_74 > select._Input-input_g5w3n_26 {
296
+ ._Input--readOnly_4xor1_75 > ._Input-input_4xor1_26,
297
+ ._Input--readOnly_4xor1_75 > select._Input-input_4xor1_26 {
293
298
  background-color: var(--puck-color-grey-11);
294
299
  border-color: var(--puck-color-grey-09);
295
300
  color: var(--puck-color-grey-04);
@@ -298,34 +303,34 @@ select._Input-input_g5w3n_26:dir(rtl) {
298
303
  outline: 0;
299
304
  transition: none;
300
305
  }
301
- ._Input-radioGroupItems_g5w3n_85 {
306
+ ._Input-radioGroupItems_4xor1_86 {
302
307
  display: flex;
303
308
  border: 1px solid var(--puck-color-grey-09);
304
309
  border-radius: 4px;
305
310
  flex-wrap: wrap;
306
311
  }
307
- ._Input-radio_g5w3n_85 {
312
+ ._Input-radio_4xor1_86 {
308
313
  border-inline-end: 1px solid var(--puck-color-grey-09);
309
314
  flex-grow: 1;
310
315
  }
311
- ._Input-radio_g5w3n_85:first-of-type {
316
+ ._Input-radio_4xor1_86:first-of-type {
312
317
  border-bottom-left-radius: 4px;
313
318
  border-top-left-radius: 4px;
314
319
  }
315
- ._Input-radio_g5w3n_85:first-of-type ._Input-radioInner_g5w3n_102 {
320
+ ._Input-radio_4xor1_86:first-of-type ._Input-radioInner_4xor1_103 {
316
321
  border-bottom-left-radius: 3px;
317
322
  border-top-left-radius: 3px;
318
323
  }
319
- ._Input-radio_g5w3n_85:last-of-type {
324
+ ._Input-radio_4xor1_86:last-of-type {
320
325
  border-bottom-right-radius: 4px;
321
326
  border-inline-end: 0;
322
327
  border-top-right-radius: 4px;
323
328
  }
324
- ._Input-radio_g5w3n_85:last-of-type ._Input-radioInner_g5w3n_102 {
329
+ ._Input-radio_4xor1_86:last-of-type ._Input-radioInner_4xor1_103 {
325
330
  border-bottom-right-radius: 3px;
326
331
  border-top-right-radius: 3px;
327
332
  }
328
- ._Input-radioInner_g5w3n_102 {
333
+ ._Input-radioInner_4xor1_103 {
329
334
  background-color: var(--puck-color-white);
330
335
  color: var(--puck-color-grey-04);
331
336
  cursor: pointer;
@@ -334,32 +339,32 @@ select._Input-input_g5w3n_26:dir(rtl) {
334
339
  text-align: center;
335
340
  transition: background-color 50ms ease-in;
336
341
  }
337
- ._Input-radio_g5w3n_85:has(:focus-visible) {
342
+ ._Input-radio_4xor1_86:has(:focus-visible) {
338
343
  outline: 2px solid var(--puck-color-azure-05);
339
344
  outline-offset: 2px;
340
345
  position: relative;
341
346
  }
342
347
  @media (hover: hover) and (pointer: fine) {
343
- ._Input-radioInner_g5w3n_102:hover {
348
+ ._Input-radioInner_4xor1_103:hover {
344
349
  background-color: var(--puck-color-azure-12);
345
350
  transition: none;
346
351
  }
347
352
  }
348
- ._Input--readOnly_g5w3n_74 ._Input-radioInner_g5w3n_102 {
353
+ ._Input--readOnly_4xor1_75 ._Input-radioInner_4xor1_103 {
349
354
  background-color: var(--puck-color-white);
350
355
  color: var(--puck-color-grey-04);
351
356
  cursor: default;
352
357
  }
353
- ._Input-radio_g5w3n_85 ._Input-radioInput_g5w3n_147:checked ~ ._Input-radioInner_g5w3n_102 {
358
+ ._Input-radio_4xor1_86 ._Input-radioInput_4xor1_148:checked ~ ._Input-radioInner_4xor1_103 {
354
359
  background-color: var(--puck-color-azure-11);
355
360
  color: var(--puck-color-azure-04);
356
361
  font-weight: 500;
357
362
  }
358
- ._Input--readOnly_g5w3n_74 ._Input-radioInput_g5w3n_147:checked ~ ._Input-radioInner_g5w3n_102 {
363
+ ._Input--readOnly_4xor1_75 ._Input-radioInput_4xor1_148:checked ~ ._Input-radioInner_4xor1_103 {
359
364
  background-color: var(--puck-color-grey-11);
360
365
  color: var(--puck-color-grey-04);
361
366
  }
362
- ._Input-radio_g5w3n_85 ._Input-radioInput_g5w3n_147 {
367
+ ._Input-radio_4xor1_86 ._Input-radioInput_4xor1_148 {
363
368
  clip: rect(0 0 0 0);
364
369
  clip-path: inset(100%);
365
370
  height: 1px;
@@ -368,7 +373,7 @@ select._Input-input_g5w3n_26:dir(rtl) {
368
373
  white-space: nowrap;
369
374
  width: 1px;
370
375
  }
371
- textarea._Input-input_g5w3n_26 {
376
+ textarea._Input-input_4xor1_26 {
372
377
  margin-bottom: -4px;
373
378
  }
374
379
 
@@ -1087,27 +1092,25 @@ textarea._Input-input_g5w3n_26 {
1087
1092
  }
1088
1093
 
1089
1094
  /* css-module:/home/runner/work/puck/puck/packages/core/components/Drawer/styles.module.css/#css-module-data */
1090
- ._Drawer_fkqfo_1 {
1095
+ ._Drawer_pl7z0_1 {
1091
1096
  display: flex;
1092
1097
  flex-direction: column;
1093
1098
  font-family: var(--puck-font-family);
1094
1099
  gap: 12px;
1095
1100
  }
1096
- ._Drawer-draggable_fkqfo_8 {
1101
+ ._Drawer-draggable_pl7z0_8 {
1097
1102
  position: relative;
1098
1103
  }
1099
- ._Drawer-draggableBg_fkqfo_12 {
1104
+ ._Drawer-draggableBg_pl7z0_12 {
1100
1105
  position: absolute;
1101
1106
  top: 0;
1102
1107
  right: 0;
1103
1108
  bottom: 0;
1104
1109
  left: 0;
1105
1110
  pointer-events: none;
1111
+ z-index: -1;
1106
1112
  }
1107
- ._Drawer-draggableFg_fkqfo_21 {
1108
- z-index: 1;
1109
- }
1110
- ._DrawerItem-draggable_fkqfo_25 {
1113
+ ._DrawerItem-draggable_pl7z0_22 {
1111
1114
  background: var(--puck-color-white);
1112
1115
  cursor: grab;
1113
1116
  padding: 12px;
@@ -1119,39 +1122,39 @@ textarea._Input-input_g5w3n_26 {
1119
1122
  align-items: center;
1120
1123
  transition: background-color 50ms ease-in, color 50ms ease-in;
1121
1124
  }
1122
- ._DrawerItem--disabled_fkqfo_38 ._DrawerItem-draggable_fkqfo_25 {
1125
+ ._DrawerItem--disabled_pl7z0_35 ._DrawerItem-draggable_pl7z0_22 {
1123
1126
  background: var(--puck-color-grey-11);
1124
1127
  color: var(--puck-color-grey-05);
1125
1128
  cursor: not-allowed;
1126
1129
  }
1127
- ._DrawerItem_fkqfo_25:focus-visible {
1130
+ ._DrawerItem_pl7z0_22:focus-visible {
1128
1131
  outline: 0;
1129
1132
  }
1130
- ._Drawer_fkqfo_1:not(._Drawer--isDraggingFrom_fkqfo_48) ._DrawerItem_fkqfo_25:focus-visible ._DrawerItem-draggable_fkqfo_25 {
1133
+ ._Drawer_pl7z0_1:not(._Drawer--isDraggingFrom_pl7z0_45) ._DrawerItem_pl7z0_22:focus-visible ._DrawerItem-draggable_pl7z0_22 {
1131
1134
  border-radius: 4px;
1132
1135
  outline: 2px solid var(--puck-color-azure-05);
1133
1136
  outline-offset: 2px;
1134
1137
  }
1135
1138
  @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 {
1139
+ ._Drawer_pl7z0_1:not(._Drawer--isDraggingFrom_pl7z0_45) ._DrawerItem_pl7z0_22:not(._DrawerItem--disabled_pl7z0_35) ._DrawerItem-draggable_pl7z0_22:hover {
1137
1140
  background-color: var(--puck-color-azure-12);
1138
1141
  color: var(--puck-color-azure-04);
1139
1142
  transition: none;
1140
1143
  }
1141
1144
  }
1142
- ._DrawerItem-name_fkqfo_66 {
1145
+ ._DrawerItem-name_pl7z0_63 {
1143
1146
  overflow-x: hidden;
1144
1147
  text-overflow: ellipsis;
1145
1148
  white-space: nowrap;
1146
1149
  }
1147
1150
 
1148
1151
  /* css-module:/home/runner/work/puck/puck/packages/core/components/DraggableComponent/styles.module.css/#css-module-data */
1149
- ._DraggableComponent_1ukn8_1 {
1152
+ ._DraggableComponent_qzbgx_1 {
1150
1153
  position: absolute;
1151
1154
  pointer-events: none;
1152
1155
  --overlay-background: color-mix( in srgb, var(--puck-color-azure-08) 30%, transparent );
1153
1156
  }
1154
- ._DraggableComponent-overlay_1ukn8_12 {
1157
+ ._DraggableComponent-overlay_qzbgx_12 {
1155
1158
  cursor: pointer;
1156
1159
  height: 100%;
1157
1160
  width: 100%;
@@ -1163,10 +1166,10 @@ textarea._Input-input_g5w3n_26 {
1163
1166
  box-sizing: border-box;
1164
1167
  z-index: 1;
1165
1168
  }
1166
- ._DraggableComponent_1ukn8_1:focus-visible > ._DraggableComponent-overlay_1ukn8_12 {
1169
+ ._DraggableComponent_qzbgx_1:focus-visible > ._DraggableComponent-overlay_qzbgx_12 {
1167
1170
  outline: 1px solid var(--puck-color-azure-05);
1168
1171
  }
1169
- ._DraggableComponent-loadingOverlay_1ukn8_29 {
1172
+ ._DraggableComponent-loadingOverlay_qzbgx_29 {
1170
1173
  background: var(--puck-color-white);
1171
1174
  color: var(--puck-color-grey-03);
1172
1175
  border-radius: 4px;
@@ -1181,35 +1184,36 @@ textarea._Input-input_g5w3n_26 {
1181
1184
  opacity: 0.8;
1182
1185
  z-index: 1;
1183
1186
  }
1184
- ._DraggableComponent--hover_1ukn8_45:not(._DraggableComponent--isLocked_1ukn8_45) > ._DraggableComponent-overlay_1ukn8_12 {
1187
+ ._DraggableComponent--hover_qzbgx_45:not(._DraggableComponent--isLocked_qzbgx_45) > ._DraggableComponent-overlay_qzbgx_12 {
1185
1188
  background: var(--overlay-background);
1186
1189
  }
1187
- ._DraggableComponent--hover_1ukn8_45 > ._DraggableComponent-overlay_1ukn8_12 {
1190
+ ._DraggableComponent--hover_qzbgx_45 > ._DraggableComponent-overlay_qzbgx_12 {
1188
1191
  outline: 2px var(--puck-color-azure-09) solid;
1189
1192
  }
1190
- ._DraggableComponent--isSelected_1ukn8_54 > ._DraggableComponent-overlay_1ukn8_12 {
1193
+ ._DraggableComponent--isSelected_qzbgx_54 > ._DraggableComponent-overlay_qzbgx_12 {
1191
1194
  outline-color: var(--puck-color-azure-07);
1192
1195
  }
1193
- ._DraggableComponent_1ukn8_1:has(._DraggableComponent--hover_1ukn8_45 > ._DraggableComponent-overlay_1ukn8_12) > ._DraggableComponent-overlay_1ukn8_12 {
1196
+ ._DraggableComponent_qzbgx_1:has(._DraggableComponent--hover_qzbgx_45 > ._DraggableComponent-overlay_qzbgx_12) > ._DraggableComponent-overlay_qzbgx_12 {
1194
1197
  display: none;
1195
1198
  }
1196
- ._DraggableComponent-actionsOverlay_1ukn8_66 {
1199
+ ._DraggableComponent-actionsOverlay_qzbgx_66 {
1197
1200
  position: sticky;
1198
1201
  opacity: 0;
1199
1202
  pointer-events: none;
1200
1203
  z-index: 2;
1201
1204
  }
1202
- ._DraggableComponent--isSelected_1ukn8_54 ._DraggableComponent-actionsOverlay_1ukn8_66 {
1205
+ ._DraggableComponent--isSelected_qzbgx_54 ._DraggableComponent-actionsOverlay_qzbgx_66 {
1203
1206
  opacity: 1;
1204
1207
  pointer-events: auto;
1205
1208
  }
1206
- ._DraggableComponent-actions_1ukn8_66 {
1209
+ ._DraggableComponent-actions_qzbgx_66 {
1207
1210
  position: absolute;
1208
1211
  width: auto;
1209
1212
  cursor: grab;
1210
1213
  display: flex;
1211
1214
  box-sizing: border-box;
1212
1215
  transform-origin: right top;
1216
+ min-height: 36px;
1213
1217
  }
1214
1218
 
1215
1219
  /* components/DraggableComponent/styles.css */
@@ -1230,7 +1234,7 @@ textarea._Input-input_g5w3n_26 {
1230
1234
  [data-puck-disabled] {
1231
1235
  cursor: pointer;
1232
1236
  }
1233
- [data-puck-dragging]:not([data-dnd-dragging]) {
1237
+ [data-dnd-placeholder] {
1234
1238
  background: var(--puck-color-azure-06) !important;
1235
1239
  border: none !important;
1236
1240
  color: #00000000 !important;
@@ -1238,9 +1242,9 @@ textarea._Input-input_g5w3n_26 {
1238
1242
  outline: none !important;
1239
1243
  transition: none !important;
1240
1244
  }
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 {
1245
+ [data-dnd-placeholder] *,
1246
+ [data-dnd-placeholder]::after,
1247
+ [data-dnd-placeholder]::before {
1244
1248
  opacity: 0 !important;
1245
1249
  }
1246
1250
  [data-dnd-dragging][data-puck-component] {
@@ -1250,7 +1254,7 @@ textarea._Input-input_g5w3n_26 {
1250
1254
  }
1251
1255
 
1252
1256
  /* css-module:/home/runner/work/puck/puck/packages/core/components/DropZone/styles.module.css/#css-module-data */
1253
- ._DropZone_3dmev_1 {
1257
+ ._DropZone_1i2sv_1 {
1254
1258
  --resize-animation-ms: 150ms;
1255
1259
  position: relative;
1256
1260
  height: 100%;
@@ -1258,47 +1262,47 @@ textarea._Input-input_g5w3n_26 {
1258
1262
  outline-offset: -2px;
1259
1263
  width: 100%;
1260
1264
  }
1261
- ._DropZone--hasChildren_3dmev_11 {
1265
+ ._DropZone--hasChildren_1i2sv_11 {
1262
1266
  min-height: 0;
1263
1267
  }
1264
- ._DropZone_3dmev_1:empty {
1268
+ ._DropZone_1i2sv_1:empty {
1265
1269
  min-height: var(--min-empty-height);
1266
1270
  }
1267
- ._DropZone_3dmev_1:not(._DropZone--userIsDragging_3dmev_19) {
1271
+ [data-puck-entry]:not([data-puck-dragging]) ._DropZone_1i2sv_1 {
1268
1272
  transition: min-height var(--resize-animation-ms) ease-in;
1269
1273
  }
1270
- ._DropZone--isAreaSelected_3dmev_23,
1271
- ._DropZone--hoveringOverArea_3dmev_24:not(._DropZone--isRootZone_3dmev_24) {
1274
+ ._DropZone--isAreaSelected_1i2sv_24,
1275
+ ._DropZone--hoveringOverArea_1i2sv_25:not(._DropZone--isRootZone_1i2sv_25) {
1272
1276
  background: color-mix(in srgb, var(--puck-color-azure-09) 30%, transparent);
1273
1277
  outline: 2px dashed var(--puck-color-azure-08);
1274
1278
  }
1275
- ._DropZone_3dmev_1:empty {
1279
+ ._DropZone_1i2sv_1:empty {
1276
1280
  background: color-mix(in srgb, var(--puck-color-azure-09) 30%, transparent);
1277
1281
  outline: 2px dashed var(--puck-color-azure-08);
1278
1282
  }
1279
- ._DropZone--isDestination_3dmev_34 {
1283
+ ._DropZone--isDestination_1i2sv_35 {
1280
1284
  outline: 2px dashed var(--puck-color-azure-04) !important;
1281
1285
  }
1282
- ._DropZone--isDestination_3dmev_34:not(._DropZone--isRootZone_3dmev_24) {
1286
+ ._DropZone--isDestination_1i2sv_35:not(._DropZone--isRootZone_1i2sv_25) {
1283
1287
  background: color-mix(in srgb, var(--puck-color-azure-09) 30%, transparent) !important;
1284
1288
  }
1285
- ._DropZone-item_3dmev_46 {
1289
+ ._DropZone-item_1i2sv_47 {
1286
1290
  position: relative;
1287
1291
  }
1288
- ._DropZone-hitbox_3dmev_50 {
1292
+ ._DropZone-hitbox_1i2sv_51 {
1289
1293
  position: absolute;
1290
1294
  bottom: -12px;
1291
1295
  height: 24px;
1292
1296
  width: 100%;
1293
1297
  z-index: 1;
1294
1298
  }
1295
- ._DropZone--isEnabled_3dmev_58._DropZone--userIsDragging_3dmev_19 {
1299
+ [data-puck-dragging] ._DropZone--isEnabled_1i2sv_59 {
1296
1300
  outline: 2px dashed var(--puck-color-azure-06);
1297
1301
  }
1298
- ._DropZone_3dmev_1 > *:not([data-puck-component]) {
1302
+ ._DropZone_1i2sv_1 > *:not([data-puck-component]) {
1299
1303
  opacity: 0;
1300
1304
  }
1301
- body:has(._DropZone--isAnimating_3dmev_67:empty) [data-puck-overlay] {
1305
+ body:has(._DropZone--isAnimating_1i2sv_68:empty) [data-puck-overlay] {
1302
1306
  opacity: 0 !important;
1303
1307
  }
1304
1308
 
@@ -1388,60 +1392,16 @@ body:has(._DropZone--isAnimating_3dmev_67:empty) [data-puck-overlay] {
1388
1392
  opacity: 0.8;
1389
1393
  }
1390
1394
 
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
1395
  /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/styles.module.css/#css-module-data */
1436
- ._Puck_11o75_19 {
1396
+ ._Puck_mc1k2_19 {
1437
1397
  --puck-space-px: 16px;
1438
1398
  font-family: var(--puck-font-family);
1439
1399
  }
1440
- ._Puck-portal_11o75_24 {
1400
+ ._Puck-portal_mc1k2_24 {
1441
1401
  position: relative;
1442
1402
  z-index: 2;
1443
1403
  }
1444
- ._PuckLayout-inner_11o75_31 {
1404
+ ._PuckLayout-inner_mc1k2_31 {
1445
1405
  --puck-frame-width: auto;
1446
1406
  --puck-side-bar-width: 0px;
1447
1407
  display: grid;
@@ -1452,107 +1412,54 @@ body:has(._DropZone--isAnimating_3dmev_67:empty) [data-puck-overlay] {
1452
1412
  position: relative;
1453
1413
  z-index: 0;
1454
1414
  }
1455
- ._PuckLayout--mounted_11o75_43 ._PuckLayout-inner_11o75_31 {
1415
+ ._PuckLayout--mounted_mc1k2_43 ._PuckLayout-inner_mc1k2_31 {
1456
1416
  --puck-side-bar-width: 186px;
1457
1417
  }
1458
- ._PuckLayout--leftSideBarVisible_11o75_47 ._PuckLayout-inner_11o75_31 {
1418
+ ._PuckLayout--leftSideBarVisible_mc1k2_47 ._PuckLayout-inner_mc1k2_31 {
1459
1419
  grid-template-columns: var(--puck-side-bar-width) var(--puck-frame-width) 0;
1460
1420
  }
1461
- ._PuckLayout--rightSideBarVisible_11o75_53 ._PuckLayout-inner_11o75_31 {
1421
+ ._PuckLayout--rightSideBarVisible_mc1k2_53 ._PuckLayout-inner_mc1k2_31 {
1462
1422
  grid-template-columns: 0 var(--puck-frame-width) var(--puck-side-bar-width);
1463
1423
  }
1464
- ._PuckLayout--leftSideBarVisible_11o75_47._PuckLayout--rightSideBarVisible_11o75_53 ._PuckLayout-inner_11o75_31 {
1424
+ ._PuckLayout--leftSideBarVisible_mc1k2_47._PuckLayout--rightSideBarVisible_mc1k2_53 ._PuckLayout-inner_mc1k2_31 {
1465
1425
  grid-template-columns: var(--puck-side-bar-width) var(--puck-frame-width) var(--puck-side-bar-width);
1466
1426
  }
1467
1427
  @media (min-width: 458px) {
1468
- ._PuckLayout-mounted_11o75_67 ._PuckLayout-inner_11o75_31 {
1428
+ ._PuckLayout-mounted_mc1k2_67 ._PuckLayout-inner_mc1k2_31 {
1469
1429
  --puck-frame-width: minmax(266px, auto);
1470
1430
  }
1471
1431
  }
1472
1432
  @media (min-width: 638px) {
1473
- ._PuckLayout_11o75_31 ._PuckLayout-inner_11o75_31 {
1433
+ ._PuckLayout_mc1k2_31 ._PuckLayout-inner_mc1k2_31 {
1474
1434
  --puck-side-bar-width: minmax(186px, 250px);
1475
1435
  }
1476
1436
  }
1477
1437
  @media (min-width: 766px) {
1478
- ._PuckLayout_11o75_31 ._PuckLayout-inner_11o75_31 {
1438
+ ._PuckLayout_mc1k2_31 ._PuckLayout-inner_mc1k2_31 {
1479
1439
  --puck-frame-width: auto;
1480
1440
  }
1481
1441
  }
1482
1442
  @media (min-width: 990px) {
1483
- ._PuckLayout_11o75_31 ._PuckLayout-inner_11o75_31 {
1443
+ ._PuckLayout_mc1k2_31 ._PuckLayout-inner_mc1k2_31 {
1484
1444
  --puck-side-bar-width: 256px;
1485
1445
  }
1486
1446
  }
1487
1447
  @media (min-width: 1198px) {
1488
- ._PuckLayout_11o75_31 ._PuckLayout-inner_11o75_31 {
1448
+ ._PuckLayout_mc1k2_31 ._PuckLayout-inner_mc1k2_31 {
1489
1449
  --puck-side-bar-width: 274px;
1490
1450
  }
1491
1451
  }
1492
1452
  @media (min-width: 1398px) {
1493
- ._PuckLayout_11o75_31 ._PuckLayout-inner_11o75_31 {
1453
+ ._PuckLayout_mc1k2_31 ._PuckLayout-inner_mc1k2_31 {
1494
1454
  --puck-side-bar-width: 290px;
1495
1455
  }
1496
1456
  }
1497
1457
  @media (min-width: 1598px) {
1498
- ._PuckLayout_11o75_31 ._PuckLayout-inner_11o75_31 {
1458
+ ._PuckLayout_mc1k2_31 ._PuckLayout-inner_mc1k2_31 {
1499
1459
  --puck-side-bar-width: 320px;
1500
1460
  }
1501
1461
  }
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 {
1462
+ ._PuckLayout-leftSideBar_mc1k2_108 {
1556
1463
  background: var(--puck-color-grey-12);
1557
1464
  border-inline-end: 1px solid var(--puck-color-grey-09);
1558
1465
  display: flex;
@@ -1560,7 +1467,7 @@ body:has(._DropZone--isAnimating_3dmev_67:empty) [data-puck-overlay] {
1560
1467
  grid-area: left;
1561
1468
  overflow-y: auto;
1562
1469
  }
1563
- ._PuckLayout-rightSideBar_11o75_134 {
1470
+ ._PuckLayout-rightSideBar_mc1k2_117 {
1564
1471
  background: var(--puck-color-white);
1565
1472
  border-inline-start: 1px solid var(--puck-color-grey-09);
1566
1473
  display: flex;
@@ -1880,3 +1787,102 @@ body:has(._DropZone--isAnimating_3dmev_67:empty) [data-puck-overlay] {
1880
1787
  height: 0;
1881
1788
  transition: none;
1882
1789
  }
1790
+
1791
+ /* css-module:/home/runner/work/puck/puck/packages/core/components/MenuBar/styles.module.css/#css-module-data */
1792
+ ._MenuBar_8pf8c_1 {
1793
+ background-color: var(--puck-color-white);
1794
+ border-bottom: 1px solid var(--puck-color-grey-09);
1795
+ display: none;
1796
+ left: 0;
1797
+ margin-top: 1px;
1798
+ padding: 8px 16px;
1799
+ position: absolute;
1800
+ right: 0;
1801
+ top: 100%;
1802
+ z-index: 2;
1803
+ }
1804
+ ._MenuBar--menuOpen_8pf8c_14 {
1805
+ display: block;
1806
+ }
1807
+ @media (min-width: 638px) {
1808
+ ._MenuBar_8pf8c_1 {
1809
+ border: none;
1810
+ display: block;
1811
+ margin-top: 0;
1812
+ overflow-y: visible;
1813
+ padding: 0;
1814
+ position: static;
1815
+ }
1816
+ }
1817
+ ._MenuBar-inner_8pf8c_29 {
1818
+ align-items: center;
1819
+ display: flex;
1820
+ flex-wrap: wrap;
1821
+ gap: 8px 16px;
1822
+ justify-content: flex-end;
1823
+ }
1824
+ @media (min-width: 638px) {
1825
+ ._MenuBar-inner_8pf8c_29 {
1826
+ display: flex;
1827
+ flex-direction: row;
1828
+ flex-wrap: nowrap;
1829
+ }
1830
+ }
1831
+ ._MenuBar-history_8pf8c_45 {
1832
+ display: flex;
1833
+ }
1834
+
1835
+ /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Header/styles.module.css/#css-module-data */
1836
+ ._PuckHeader_15xnq_1 {
1837
+ background: var(--puck-color-white);
1838
+ border-bottom: 1px solid var(--puck-color-grey-09);
1839
+ color: var(--puck-color-black);
1840
+ grid-area: header;
1841
+ position: relative;
1842
+ max-width: 100vw;
1843
+ }
1844
+ ._PuckHeader-inner_15xnq_10 {
1845
+ align-items: end;
1846
+ display: grid;
1847
+ gap: var(--puck-space-px);
1848
+ grid-template-areas: "left middle right";
1849
+ grid-template-columns: 1fr auto 1fr;
1850
+ grid-template-rows: auto;
1851
+ padding: var(--puck-space-px);
1852
+ }
1853
+ ._PuckHeader-toggle_15xnq_20 {
1854
+ color: var(--puck-color-grey-05);
1855
+ display: flex;
1856
+ margin-inline-start: -4px;
1857
+ padding-top: 2px;
1858
+ }
1859
+ ._PuckHeader--rightSideBarVisible_15xnq_27 ._PuckHeader-rightSideBarToggle_15xnq_27,
1860
+ ._PuckHeader--leftSideBarVisible_15xnq_28 ._PuckHeader-leftSideBarToggle_15xnq_28 {
1861
+ color: var(--puck-color-black);
1862
+ }
1863
+ ._PuckHeader-title_15xnq_32 {
1864
+ align-self: center;
1865
+ }
1866
+ ._PuckHeader-path_15xnq_36 {
1867
+ font-family: var(--puck-font-family-monospaced);
1868
+ font-size: var(--puck-font-size-xxs);
1869
+ font-weight: normal;
1870
+ word-break: break-all;
1871
+ }
1872
+ ._PuckHeader-tools_15xnq_43 {
1873
+ display: flex;
1874
+ gap: 16px;
1875
+ justify-content: flex-end;
1876
+ }
1877
+ ._PuckHeader-menuButton_15xnq_49 {
1878
+ color: var(--puck-color-grey-05);
1879
+ margin-inline-start: -4px;
1880
+ }
1881
+ ._PuckHeader--menuOpen_15xnq_54 ._PuckHeader-menuButton_15xnq_49 {
1882
+ color: var(--puck-color-black);
1883
+ }
1884
+ @media (min-width: 638px) {
1885
+ ._PuckHeader-menuButton_15xnq_49 {
1886
+ display: none;
1887
+ }
1888
+ }