@measured/puck 0.17.0-canary.229cbdd → 0.17.0-canary.2d82115

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
@@ -135,6 +135,9 @@
135
135
  }
136
136
 
137
137
  /* styles.css */
138
+ #frame-root {
139
+ height: 100vh;
140
+ }
138
141
 
139
142
  /* css-module:/home/runner/work/puck/puck/packages/core/components/ActionBar/styles.module.css/#css-module-data */
140
143
  ._ActionBar_151w5_1 {
@@ -204,27 +207,27 @@
204
207
  }
205
208
 
206
209
  /* css-module:/home/runner/work/puck/puck/packages/core/components/AutoField/styles.module.css/#css-module-data */
207
- ._Input_3pq3z_1 {
210
+ ._InputWrapper_1l5m8_1 {
208
211
  color: var(--puck-color-grey-04);
209
212
  padding: 16px;
210
213
  padding-bottom: 12px;
211
214
  display: block;
212
215
  }
213
- ._Input_3pq3z_1 ._Input_3pq3z_1 {
216
+ ._InputWrapper_1l5m8_1 + ._InputWrapper_1l5m8_1 {
217
+ border-top: 1px solid var(--puck-color-grey-09);
218
+ margin-top: 8px;
219
+ }
220
+ ._Input_1l5m8_1 ._InputWrapper_1l5m8_1 {
214
221
  padding: 0px;
215
222
  }
216
- ._Input_3pq3z_1 * {
223
+ ._Input_1l5m8_1 * {
217
224
  box-sizing: border-box;
218
225
  }
219
- ._Input_3pq3z_1 + ._Input_3pq3z_1 {
220
- border-top: 1px solid var(--puck-color-grey-09);
221
- margin-top: 8px;
222
- }
223
- ._Input_3pq3z_1 ._Input_3pq3z_1 + ._Input_3pq3z_1 {
226
+ ._Input_1l5m8_1 ._InputWrapper_1l5m8_1 + ._InputWrapper_1l5m8_1 {
224
227
  border-top: 0px;
225
228
  margin-top: 12px;
226
229
  }
227
- ._Input-label_3pq3z_26 {
230
+ ._Input-label_1l5m8_26 {
228
231
  align-items: center;
229
232
  color: var(--puck-color-grey-04);
230
233
  display: flex;
@@ -232,17 +235,17 @@
232
235
  font-size: var(--puck-font-size-xxs);
233
236
  font-weight: 600;
234
237
  }
235
- ._Input-labelIcon_3pq3z_35 {
238
+ ._Input-labelIcon_1l5m8_35 {
236
239
  color: var(--puck-color-grey-07);
237
240
  display: flex;
238
241
  margin-right: 4px;
239
242
  padding-left: 4px;
240
243
  }
241
- ._Input-disabledIcon_3pq3z_42 {
244
+ ._Input-disabledIcon_1l5m8_42 {
242
245
  color: var(--puck-color-grey-05);
243
246
  margin-left: auto;
244
247
  }
245
- ._Input-input_3pq3z_47 {
248
+ ._Input-input_1l5m8_47 {
246
249
  background: var(--puck-color-white);
247
250
  border-width: 1px;
248
251
  border-style: solid;
@@ -254,7 +257,7 @@
254
257
  transition: border-color 50ms ease-in;
255
258
  width: 100%;
256
259
  }
257
- select._Input-input_3pq3z_47 {
260
+ select._Input-input_1l5m8_47 {
258
261
  appearance: none;
259
262
  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;
260
263
  background-size: 12px;
@@ -264,25 +267,25 @@ select._Input-input_3pq3z_47 {
264
267
  cursor: pointer;
265
268
  }
266
269
  @media (hover: hover) and (pointer: fine) {
267
- ._Input_3pq3z_1:has(> input):hover ._Input-input_3pq3z_47:not([readonly]),
268
- ._Input_3pq3z_1:has(> textarea):hover ._Input-input_3pq3z_47:not([readonly]) {
270
+ ._Input_1l5m8_1:has(> input):hover ._Input-input_1l5m8_47:not([readonly]),
271
+ ._Input_1l5m8_1:has(> textarea):hover ._Input-input_1l5m8_47:not([readonly]) {
269
272
  border-color: var(--puck-color-grey-05);
270
273
  transition: none;
271
274
  }
272
- ._Input_3pq3z_1:has(> select):hover ._Input-input_3pq3z_47:not([disabled]) {
275
+ ._Input_1l5m8_1:has(> select):hover ._Input-input_1l5m8_47:not([disabled]) {
273
276
  background-color: var(--puck-color-azure-12);
274
277
  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>");
275
278
  border-color: var(--puck-color-grey-05);
276
279
  transition: none;
277
280
  }
278
281
  }
279
- ._Input-input_3pq3z_47:focus {
282
+ ._Input-input_1l5m8_47:focus {
280
283
  border-color: var(--puck-color-grey-05);
281
284
  outline: 2px solid var(--puck-color-azure-05);
282
285
  transition: none;
283
286
  }
284
- ._Input--readOnly_3pq3z_91 > ._Input-input_3pq3z_47,
285
- ._Input--readOnly_3pq3z_91 > select._Input-input_3pq3z_47 {
287
+ ._Input--readOnly_1l5m8_91 > ._Input-input_1l5m8_47,
288
+ ._Input--readOnly_1l5m8_91 > select._Input-input_1l5m8_47 {
286
289
  background-color: var(--puck-color-grey-11);
287
290
  border-color: var(--puck-color-grey-09);
288
291
  color: var(--puck-color-grey-04);
@@ -291,34 +294,34 @@ select._Input-input_3pq3z_47 {
291
294
  outline: 0;
292
295
  transition: none;
293
296
  }
294
- ._Input-radioGroupItems_3pq3z_102 {
297
+ ._Input-radioGroupItems_1l5m8_102 {
295
298
  display: flex;
296
299
  border: 1px solid var(--puck-color-grey-09);
297
300
  border-radius: 4px;
298
301
  flex-wrap: wrap;
299
302
  }
300
- ._Input-radio_3pq3z_102 {
303
+ ._Input-radio_1l5m8_102 {
301
304
  border-right: 1px solid var(--puck-color-grey-09);
302
305
  flex-grow: 1;
303
306
  }
304
- ._Input-radio_3pq3z_102:first-of-type {
307
+ ._Input-radio_1l5m8_102:first-of-type {
305
308
  border-bottom-left-radius: 4px;
306
309
  border-top-left-radius: 4px;
307
310
  }
308
- ._Input-radio_3pq3z_102:first-of-type ._Input-radioInner_3pq3z_119 {
311
+ ._Input-radio_1l5m8_102:first-of-type ._Input-radioInner_1l5m8_119 {
309
312
  border-bottom-left-radius: 3px;
310
313
  border-top-left-radius: 3px;
311
314
  }
312
- ._Input-radio_3pq3z_102:last-of-type {
315
+ ._Input-radio_1l5m8_102:last-of-type {
313
316
  border-bottom-right-radius: 4px;
314
317
  border-right: 0;
315
318
  border-top-right-radius: 4px;
316
319
  }
317
- ._Input-radio_3pq3z_102:last-of-type ._Input-radioInner_3pq3z_119 {
320
+ ._Input-radio_1l5m8_102:last-of-type ._Input-radioInner_1l5m8_119 {
318
321
  border-bottom-right-radius: 3px;
319
322
  border-top-right-radius: 3px;
320
323
  }
321
- ._Input-radioInner_3pq3z_119 {
324
+ ._Input-radioInner_1l5m8_119 {
322
325
  background-color: var(--puck-color-white);
323
326
  color: var(--puck-color-grey-04);
324
327
  cursor: pointer;
@@ -327,32 +330,32 @@ select._Input-input_3pq3z_47 {
327
330
  text-align: center;
328
331
  transition: background-color 50ms ease-in;
329
332
  }
330
- ._Input-radio_3pq3z_102:has(:focus-visible) {
333
+ ._Input-radio_1l5m8_102:has(:focus-visible) {
331
334
  outline: 2px solid var(--puck-color-azure-05);
332
335
  outline-offset: 2px;
333
336
  position: relative;
334
337
  }
335
338
  @media (hover: hover) and (pointer: fine) {
336
- ._Input-radioInner_3pq3z_119:hover {
339
+ ._Input-radioInner_1l5m8_119:hover {
337
340
  background-color: var(--puck-color-azure-12);
338
341
  transition: none;
339
342
  }
340
343
  }
341
- ._Input--readOnly_3pq3z_91 ._Input-radioInner_3pq3z_119 {
344
+ ._Input--readOnly_1l5m8_91 ._Input-radioInner_1l5m8_119 {
342
345
  background-color: var(--puck-color-white);
343
346
  color: var(--puck-color-grey-04);
344
347
  cursor: default;
345
348
  }
346
- ._Input-radio_3pq3z_102 ._Input-radioInput_3pq3z_164:checked ~ ._Input-radioInner_3pq3z_119 {
349
+ ._Input-radio_1l5m8_102 ._Input-radioInput_1l5m8_164:checked ~ ._Input-radioInner_1l5m8_119 {
347
350
  background-color: var(--puck-color-azure-11);
348
351
  color: var(--puck-color-azure-04);
349
352
  font-weight: 500;
350
353
  }
351
- ._Input--readOnly_3pq3z_91 ._Input-radioInput_3pq3z_164:checked ~ ._Input-radioInner_3pq3z_119 {
354
+ ._Input--readOnly_1l5m8_91 ._Input-radioInput_1l5m8_164:checked ~ ._Input-radioInner_1l5m8_119 {
352
355
  background-color: var(--puck-color-grey-11);
353
356
  color: var(--puck-color-grey-04);
354
357
  }
355
- ._Input-radio_3pq3z_102 ._Input-radioInput_3pq3z_164 {
358
+ ._Input-radio_1l5m8_102 ._Input-radioInput_1l5m8_164 {
356
359
  clip: rect(0 0 0 0);
357
360
  clip-path: inset(100%);
358
361
  height: 1px;
@@ -361,7 +364,7 @@ select._Input-input_3pq3z_47 {
361
364
  white-space: nowrap;
362
365
  width: 1px;
363
366
  }
364
- textarea._Input-input_3pq3z_47 {
367
+ textarea._Input-input_1l5m8_47 {
365
368
  margin-bottom: -4px;
366
369
  }
367
370
 
@@ -1062,22 +1065,15 @@ textarea._Input-input_3pq3z_47 {
1062
1065
  }
1063
1066
 
1064
1067
  /* css-module:/home/runner/work/puck/puck/packages/core/components/Drawer/styles.module.css/#css-module-data */
1065
- ._Drawer_1oa7v_1 {
1068
+ ._Drawer_1ob9x_1 {
1069
+ display: flex;
1070
+ flex-direction: column;
1066
1071
  font-family: var(--puck-font-family);
1072
+ gap: 12px;
1067
1073
  }
1068
- ._DrawerItem--disabled_1oa7v_5 ._DrawerItem-draggable_1oa7v_5 {
1069
- background: var(--puck-color-grey-11);
1070
- color: var(--puck-color-grey-05);
1071
- cursor: not-allowed;
1072
- }
1073
- ._DrawerItem-default_1oa7v_11 ._DrawerItem-draggableWrapper_1oa7v_11 {
1074
- padding-bottom: 12px;
1075
- }
1076
- ._DrawerItem_1oa7v_5:last-of-type ._DrawerItem-default_1oa7v_11 ._DrawerItem-draggableWrapper_1oa7v_11 {
1077
- padding-bottom: 0;
1078
- }
1079
- ._DrawerItem-draggable_1oa7v_5 {
1074
+ ._DrawerItem-draggable_1ob9x_8 {
1080
1075
  background: var(--puck-color-white);
1076
+ cursor: grab;
1081
1077
  padding: 12px;
1082
1078
  display: flex;
1083
1079
  border: 1px var(--puck-color-grey-09) solid;
@@ -1087,64 +1083,54 @@ textarea._Input-input_3pq3z_47 {
1087
1083
  align-items: center;
1088
1084
  transition: background-color 50ms ease-in, color 50ms ease-in;
1089
1085
  }
1090
- ._DrawerItem_1oa7v_5:focus-visible {
1086
+ ._DrawerItem--disabled_1ob9x_21 ._DrawerItem-draggable_1ob9x_8 {
1087
+ background: var(--puck-color-grey-11);
1088
+ color: var(--puck-color-grey-05);
1089
+ cursor: not-allowed;
1090
+ }
1091
+ ._DrawerItem_1ob9x_8:focus-visible {
1091
1092
  outline: 0;
1092
1093
  }
1093
- ._Drawer_1oa7v_1:not(._Drawer--isDraggingFrom_1oa7v_36) ._DrawerItem_1oa7v_5:focus-visible ._DrawerItem-draggable_1oa7v_5 {
1094
+ ._Drawer_1ob9x_1:not(._Drawer--isDraggingFrom_1ob9x_31) ._DrawerItem_1ob9x_8:focus-visible ._DrawerItem-draggable_1ob9x_8 {
1094
1095
  border-radius: 4px;
1095
1096
  outline: 2px solid var(--puck-color-azure-05);
1096
1097
  outline-offset: 2px;
1097
1098
  }
1098
1099
  @media (hover: hover) and (pointer: fine) {
1099
- ._Drawer_1oa7v_1:not(._Drawer--isDraggingFrom_1oa7v_36) ._DrawerItem_1oa7v_5:not(._DrawerItem--disabled_1oa7v_5) ._DrawerItem-draggable_1oa7v_5:hover {
1100
+ ._Drawer_1ob9x_1:not(._Drawer--isDraggingFrom_1ob9x_31) ._DrawerItem_1ob9x_8:not(._DrawerItem--disabled_1ob9x_21) ._DrawerItem-draggable_1ob9x_8:hover {
1100
1101
  background-color: var(--puck-color-azure-12);
1101
1102
  color: var(--puck-color-azure-04);
1102
1103
  transition: none;
1103
1104
  }
1104
1105
  }
1105
- ._DrawerItem-name_1oa7v_54 {
1106
+ ._DrawerItem-name_1ob9x_49 {
1106
1107
  overflow-x: hidden;
1107
1108
  text-overflow: ellipsis;
1108
1109
  white-space: nowrap;
1109
1110
  }
1110
1111
 
1111
1112
  /* css-module:/home/runner/work/puck/puck/packages/core/components/DraggableComponent/styles.module.css/#css-module-data */
1112
- ._DraggableComponent_1bhad_1 {
1113
- pointer-events: auto;
1114
- --overlay-background: color-mix( in srgb, var(--puck-color-azure-08) 30%, transparent );
1115
- }
1116
- ._DraggableComponent--isDragging_1bhad_11 {
1117
- background: color-mix(in srgb, var(--puck-color-azure-08) 10%, transparent);
1118
- overflow: hidden;
1119
- }
1120
- ._DraggableComponent-contents_1bhad_16 {
1121
- position: relative;
1113
+ ._DraggableComponent_146qs_1 {
1114
+ position: absolute;
1122
1115
  pointer-events: none;
1123
- z-index: 0;
1124
- }
1125
- ._DraggableComponent-contents_1bhad_16::before,
1126
- ._DraggableComponent-contents_1bhad_16::after {
1127
- content: " ";
1128
- display: table;
1116
+ --overlay-background: color-mix( in srgb, var(--puck-color-azure-08) 30%, transparent );
1129
1117
  }
1130
- ._DraggableComponent-overlay_1bhad_29 {
1118
+ ._DraggableComponent-overlay_146qs_12 {
1131
1119
  cursor: pointer;
1132
1120
  height: 100%;
1133
1121
  width: 100%;
1134
1122
  top: 0;
1123
+ outline: 2px var(--puck-color-azure-09) solid;
1135
1124
  outline-offset: -2px;
1136
1125
  position: absolute;
1137
1126
  pointer-events: none;
1138
1127
  box-sizing: border-box;
1139
1128
  z-index: 1;
1140
1129
  }
1141
- ._DraggableComponent_1bhad_1:focus-visible > ._DraggableComponent-overlay_1bhad_29 {
1130
+ ._DraggableComponent_146qs_1:focus-visible > ._DraggableComponent-overlay_146qs_12 {
1142
1131
  outline: 1px solid var(--puck-color-azure-05);
1143
1132
  }
1144
- ._DraggableComponent--isDragging_1bhad_11 > ._DraggableComponent-overlay_1bhad_29 {
1145
- outline: 2px var(--puck-color-azure-09) solid !important;
1146
- }
1147
- ._DraggableComponent-loadingOverlay_1bhad_49 {
1133
+ ._DraggableComponent-loadingOverlay_146qs_29 {
1148
1134
  background: var(--puck-color-white);
1149
1135
  color: var(--puck-color-grey-03);
1150
1136
  border-radius: 4px;
@@ -1159,89 +1145,82 @@ textarea._Input-input_3pq3z_47 {
1159
1145
  opacity: 0.8;
1160
1146
  z-index: 1;
1161
1147
  }
1162
- ._DraggableComponent_1bhad_1:hover:not(._DraggableComponent--isLocked_1bhad_65) > ._DraggableComponent-overlay_1bhad_29 {
1163
- background: var(--overlay-background);
1164
- pointer-events: none;
1165
- }
1166
- ._DraggableComponent--forceHover_1bhad_71 > ._DraggableComponent-overlay_1bhad_29 {
1148
+ ._DraggableComponent--hover_146qs_45:not(._DraggableComponent--isLocked_146qs_45) > ._DraggableComponent-overlay_146qs_12 {
1167
1149
  background: var(--overlay-background);
1168
- pointer-events: none;
1169
1150
  }
1170
- ._DraggableComponent_1bhad_1:not(._DraggableComponent--isSelected_1bhad_76):hover > ._DraggableComponent-overlay_1bhad_29 {
1171
- outline: 2px var(--puck-color-azure-09) solid !important;
1151
+ ._DraggableComponent--hover_146qs_45 > ._DraggableComponent-overlay_146qs_12 {
1152
+ outline: 2px var(--puck-color-azure-09) solid;
1172
1153
  }
1173
- ._DraggableComponent--indicativeHover_1bhad_81 > ._DraggableComponent-overlay_1bhad_29 {
1174
- pointer-events: none;
1154
+ ._DraggableComponent--isSelected_146qs_54 > ._DraggableComponent-overlay_146qs_12 {
1155
+ outline-color: var(--puck-color-azure-07);
1175
1156
  }
1176
- ._DraggableComponent_1bhad_1:not(._DraggableComponent--isSelected_1bhad_76):has(._DraggableComponent_1bhad_1:hover > ._DraggableComponent-overlay_1bhad_29) > ._DraggableComponent-overlay_1bhad_29 {
1157
+ ._DraggableComponent_146qs_1:has(._DraggableComponent--hover_146qs_45 > ._DraggableComponent-overlay_146qs_12) > ._DraggableComponent-overlay_146qs_12 {
1177
1158
  display: none;
1178
1159
  }
1179
- ._DraggableComponent--isSelected_1bhad_76 > ._DraggableComponent-overlay_1bhad_29 {
1180
- outline: 2px var(--puck-color-azure-07) solid !important;
1181
- }
1182
- ._DraggableComponent--isSelected_1bhad_76 > ._DraggableComponent-actionsOverlay_1bhad_97 {
1183
- display: block;
1160
+ ._DraggableComponent-actionsOverlay_146qs_66 {
1184
1161
  position: sticky;
1185
1162
  z-index: 2;
1186
1163
  }
1187
- ._DraggableComponent-actions_1bhad_97 {
1164
+ ._DraggableComponent-actions_146qs_66 {
1188
1165
  position: absolute;
1189
1166
  width: auto;
1190
1167
  cursor: grab;
1191
- display: none;
1168
+ display: flex;
1192
1169
  pointer-events: auto;
1193
1170
  box-sizing: border-box;
1194
1171
  transform-origin: right top;
1195
1172
  }
1196
- ._DraggableComponent--isSelected_1bhad_76 > ._DraggableComponent-actionsOverlay_1bhad_97 > ._DraggableComponent-actions_1bhad_97 {
1197
- display: flex;
1198
- }
1199
1173
 
1200
1174
  /* css-module:/home/runner/work/puck/puck/packages/core/components/DropZone/styles.module.css/#css-module-data */
1201
- ._DropZone_djoti_1 {
1202
- margin-left: auto;
1203
- margin-right: auto;
1175
+ ._DropZone_q2ip3_1 {
1176
+ --drop-animation-ms: 250ms;
1177
+ --resize-animation-ms: 150ms;
1204
1178
  position: relative;
1205
- min-height: 100%;
1179
+ height: 100%;
1180
+ min-height: var(--min-empty-height);
1206
1181
  outline-offset: -2px;
1207
1182
  width: 100%;
1208
1183
  }
1209
- ._DropZone-content_djoti_10 {
1210
- min-height: 128px;
1211
- height: 100%;
1184
+ ._DropZone--hasChildren_q2ip3_12 {
1185
+ min-height: 0;
1212
1186
  }
1213
- ._DropZone--userIsDragging_djoti_15 ._DropZone-content_djoti_10 {
1214
- pointer-events: all;
1187
+ ._DropZone_q2ip3_1:empty {
1188
+ min-height: var(--min-empty-height);
1215
1189
  }
1216
- ._DropZone--userIsDragging_djoti_15:not(._DropZone--draggingOverArea_djoti_19):not(._DropZone--draggingNewComponent_djoti_20) > ._DropZone-content_djoti_10 {
1217
- pointer-events: none;
1190
+ ._DropZone--hasChildren_q2ip3_12:not(._DropZone--userIsDragging_q2ip3_20) {
1191
+ transition: min-height var(--resize-animation-ms) var(--drop-animation-ms) ease-in;
1192
+ }
1193
+ ._DropZone_q2ip3_1:empty:not(._DropZone--userIsDragging_q2ip3_20) {
1194
+ transition: min-height var(--resize-animation-ms) ease-in;
1218
1195
  }
1219
- ._DropZone--isAreaSelected_djoti_26,
1220
- ._DropZone--draggingOverArea_djoti_19:not(:has(._DropZone--hoveringOverArea_djoti_27)),
1221
- ._DropZone--hoveringOverArea_djoti_27:not(._DropZone--isDisabled_djoti_28):not(._DropZone--isRootZone_djoti_29):not(._DropZone--hasChildren_djoti_30) {
1196
+ ._DropZone--isAreaSelected_q2ip3_29,
1197
+ ._DropZone--hoveringOverArea_q2ip3_30:not(._DropZone--isRootZone_q2ip3_30) {
1222
1198
  background: color-mix(in srgb, var(--puck-color-azure-09) 30%, transparent);
1223
1199
  outline: 2px dashed var(--puck-color-azure-08);
1224
1200
  }
1225
- ._DropZone_djoti_1:not(._DropZone--hasChildren_djoti_30) {
1201
+ ._DropZone_q2ip3_1:empty {
1226
1202
  background: color-mix(in srgb, var(--puck-color-azure-09) 30%, transparent);
1227
1203
  outline: 2px dashed var(--puck-color-azure-08);
1228
1204
  }
1229
- ._DropZone--isDestination_djoti_40 {
1205
+ ._DropZone--isDestination_q2ip3_40 {
1230
1206
  outline: 2px dashed var(--puck-color-azure-04) !important;
1231
1207
  }
1232
- ._DropZone--isDestination_djoti_40:not(._DropZone--isRootZone_djoti_29) {
1208
+ ._DropZone--isDestination_q2ip3_40:not(._DropZone--isRootZone_q2ip3_30) {
1233
1209
  background: color-mix(in srgb, var(--puck-color-azure-09) 30%, transparent) !important;
1234
1210
  }
1235
- ._DropZone-item_djoti_52 {
1211
+ ._DropZone-item_q2ip3_52 {
1236
1212
  position: relative;
1237
1213
  }
1238
- ._DropZone-hitbox_djoti_56 {
1214
+ ._DropZone-hitbox_q2ip3_56 {
1239
1215
  position: absolute;
1240
1216
  bottom: -12px;
1241
1217
  height: 24px;
1242
1218
  width: 100%;
1243
1219
  z-index: 1;
1244
1220
  }
1221
+ ._DropZone--isEnabled_q2ip3_64._DropZone--userIsDragging_q2ip3_20 {
1222
+ outline: 2px dashed var(--puck-color-azure-06);
1223
+ }
1245
1224
 
1246
1225
  /* css-module:/home/runner/work/puck/puck/packages/core/components/SidebarSection/styles.module.css/#css-module-data */
1247
1226
  ._SidebarSection_125qe_1 {
@@ -1596,12 +1575,13 @@ textarea._Input-input_3pq3z_47 {
1596
1575
  }
1597
1576
 
1598
1577
  /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Preview/styles.module.css/#css-module-data */
1599
- ._PuckPreview_rxwlr_1 {
1578
+ ._PuckPreview_z2rgu_1 {
1579
+ position: relative;
1600
1580
  height: 100%;
1601
1581
  }
1602
- ._PuckPreview-frame_rxwlr_5 {
1582
+ ._PuckPreview-frame_z2rgu_6 {
1603
1583
  border: none;
1604
- min-height: 100%;
1584
+ height: 100%;
1605
1585
  width: 100%;
1606
1586
  }
1607
1587
 
@@ -1743,7 +1723,7 @@ textarea._Input-input_3pq3z_47 {
1743
1723
  }
1744
1724
 
1745
1725
  /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Canvas/styles.module.css/#css-module-data */
1746
- ._PuckCanvas_avf1c_1 {
1726
+ ._PuckCanvas_cf3je_1 {
1747
1727
  background: var(--puck-color-grey-11);
1748
1728
  display: flex;
1749
1729
  grid-area: editor;
@@ -1752,15 +1732,15 @@ textarea._Input-input_3pq3z_47 {
1752
1732
  overflow: auto;
1753
1733
  }
1754
1734
  @media (min-width: 1198px) {
1755
- ._PuckCanvas_avf1c_1 {
1735
+ ._PuckCanvas_cf3je_1 {
1756
1736
  padding: calc(var(--puck-space-px) * 1.5);
1757
1737
  padding-top: var(--puck-space-px);
1758
1738
  }
1759
- ._PuckCanvas_avf1c_1:not(._PuckCanvas_avf1c_1:has(._PuckCanvas-controls_avf1c_16)) {
1739
+ ._PuckCanvas_cf3je_1:not(._PuckCanvas_cf3je_1:has(._PuckCanvas-controls_cf3je_16)) {
1760
1740
  padding-top: calc(var(--puck-space-px) * 1.5);
1761
1741
  }
1762
1742
  }
1763
- ._PuckCanvas-inner_avf1c_21 {
1743
+ ._PuckCanvas-inner_cf3je_21 {
1764
1744
  box-sizing: border-box;
1765
1745
  display: flex;
1766
1746
  height: 100%;
@@ -1770,10 +1750,10 @@ textarea._Input-input_3pq3z_47 {
1770
1750
  position: relative;
1771
1751
  width: 100%;
1772
1752
  }
1773
- ._PuckCanvas-root_avf1c_32 {
1753
+ ._PuckCanvas-root_cf3je_32 {
1774
1754
  background: white;
1775
1755
  border: 1px solid var(--puck-color-grey-09);
1776
- box-sizing: border-box;
1756
+ box-sizing: content-box;
1777
1757
  min-width: 321px;
1778
1758
  position: absolute;
1779
1759
  pointer-events: none;
@@ -1783,20 +1763,20 @@ textarea._Input-input_3pq3z_47 {
1783
1763
  opacity: 0;
1784
1764
  }
1785
1765
  @media (min-width: 1198px) {
1786
- ._PuckCanvas-root_avf1c_32 {
1766
+ ._PuckCanvas-root_cf3je_32 {
1787
1767
  min-width: unset;
1788
1768
  }
1789
1769
  }
1790
1770
  @media (prefers-reduced-motion: reduce) {
1791
- ._PuckCanvas-root_avf1c_32 {
1771
+ ._PuckCanvas-root_cf3je_32 {
1792
1772
  transition: none !important;
1793
1773
  }
1794
1774
  }
1795
- ._PuckCanvas--ready_avf1c_57 ._PuckCanvas-root_avf1c_32 {
1775
+ ._PuckCanvas--ready_cf3je_57 ._PuckCanvas-root_cf3je_32 {
1796
1776
  pointer-events: unset;
1797
1777
  opacity: 1;
1798
1778
  }
1799
- ._PuckCanvas-loader_avf1c_62 {
1779
+ ._PuckCanvas-loader_cf3je_62 {
1800
1780
  align-items: center;
1801
1781
  color: var(--puck-color-grey-06);
1802
1782
  display: flex;
@@ -1805,10 +1785,10 @@ textarea._Input-input_3pq3z_47 {
1805
1785
  transition: opacity 250ms ease-out;
1806
1786
  opacity: 0;
1807
1787
  }
1808
- ._PuckCanvas--showLoader_avf1c_72 ._PuckCanvas-loader_avf1c_62 {
1788
+ ._PuckCanvas--showLoader_cf3je_72 ._PuckCanvas-loader_cf3je_62 {
1809
1789
  opacity: 1;
1810
1790
  }
1811
- ._PuckCanvas--showLoader_avf1c_72._PuckCanvas--ready_avf1c_57 ._PuckCanvas-loader_avf1c_62 {
1791
+ ._PuckCanvas--showLoader_cf3je_72._PuckCanvas--ready_cf3je_57 ._PuckCanvas-loader_cf3je_62 {
1812
1792
  opacity: 0;
1813
1793
  height: 0;
1814
1794
  transition: none;
package/dist/index.d.mts CHANGED
@@ -1,9 +1,10 @@
1
- import { F as FieldProps, a as Field, C as Config, D as Data, I as ItemSelector, P as PuckAction, b as DropZoneProps, U as UserGenerics, c as UiState, O as OnAction, d as Permissions, e as Plugin, f as Overrides, V as Viewports, g as IframeConfig, h as InitialHistory, i as DefaultComponentProps, j as DefaultRootFieldProps, H as History, A as AppState, E as ExtractPropsFromConfig, k as ExtractRootPropsFromConfig, l as ComponentDataMap } from './resolve-all-data-Bd3DnhYE.mjs';
2
- export { L as Adaptor, J as ArrayField, r as ArrayState, a2 as AsFieldProps, B as BaseData, y as BaseField, t as ComponentConfig, w as ComponentData, x as Content, X as CustomField, $ as DefaultRootProps, _ as DefaultRootRenderProps, W as ExternalField, Q as ExternalFieldWithAdaptor, p as FieldRenderFunctions, Y as Fields, q as ItemWithId, M as MappedItem, N as NumberField, K as ObjectField, n as OverrideKey, s as PuckComponent, Z as PuckContext, G as RadioField, v as RootData, R as RootDataWithProps, u as RootDataWithoutProps, S as SelectField, T as TextField, z as TextareaField, m as Viewport, a3 as WithChildren, a0 as WithId, a1 as WithPuckProps, o as overrideKeys, a4 as resolveAllData } from './resolve-all-data-Bd3DnhYE.mjs';
1
+ import { F as FieldProps, a as Field, C as Config, D as Data, I as ItemSelector, P as PuckAction, b as DropZoneProps, U as UserGenerics, c as UiState, O as OnAction, d as Permissions, e as Plugin, f as Overrides, V as Viewports, g as IframeConfig, h as InitialHistory, i as DefaultComponentProps, j as DefaultRootFieldProps, H as History, A as AppState, E as ExtractPropsFromConfig, k as ExtractRootPropsFromConfig, l as ComponentDataMap } from './resolve-all-data-Fx9YY5bj.mjs';
2
+ export { W as Adaptor, L as ArrayField, t as ArrayState, a4 as AsFieldProps, B as BaseData, G as BaseField, v as ComponentConfig, y as ComponentData, z as Content, Z as CustomField, a1 as DefaultRootProps, a0 as DefaultRootRenderProps, m as Direction, n as DragAxis, Y as ExternalField, X as ExternalFieldWithAdaptor, r as FieldRenderFunctions, _ as Fields, s as ItemWithId, M as MappedItem, N as NumberField, Q as ObjectField, q as OverrideKey, u as PuckComponent, $ as PuckContext, K as RadioField, x as RootData, R as RootDataWithProps, w as RootDataWithoutProps, S as SelectField, T as TextField, J as TextareaField, o as Viewport, a5 as WithChildren, a2 as WithId, a3 as WithPuckProps, p as overrideKeys, a6 as resolveAllData } from './resolve-all-data-Fx9YY5bj.mjs';
3
3
  import * as react_jsx_runtime from 'react/jsx-runtime';
4
4
  import * as react from 'react';
5
- import { ReactNode, SyntheticEvent, ReactElement, CSSProperties } from 'react';
6
- import { DragStart, DragUpdate } from '@measured/dnd';
5
+ import { ReactNode, SyntheticEvent, ReactElement } from 'react';
6
+ import { UniqueIdentifier } from '@dnd-kit/abstract';
7
+ import { Draggable } from '@dnd-kit/dom';
7
8
 
8
9
  declare const ActionBar: {
9
10
  ({ label, children, }: {
@@ -55,7 +56,7 @@ declare const Button: ({ children, href, onClick, variant, type, disabled, tabIn
55
56
  }) => react_jsx_runtime.JSX.Element;
56
57
 
57
58
  declare const Drawer: {
58
- ({ children, droppableId: _droppableId, direction, }: {
59
+ ({ children, droppableId, direction, }: {
59
60
  children: ReactNode;
60
61
  droppableId?: string;
61
62
  direction?: "vertical" | "horizontal";
@@ -68,7 +69,7 @@ declare const Drawer: {
68
69
  }) => ReactElement;
69
70
  id?: string;
70
71
  label?: string;
71
- index: number;
72
+ index?: number;
72
73
  isDragDisabled?: boolean;
73
74
  }) => react_jsx_runtime.JSX.Element;
74
75
  };
@@ -85,12 +86,9 @@ type DropZoneContext<UserConfig extends Config = Config> = {
85
86
  setItemSelector?: (newIndex: ItemSelector | null) => void;
86
87
  dispatch?: (action: PuckAction) => void;
87
88
  areaId?: string;
88
- draggedItem?: DragStart & Partial<DragUpdate>;
89
- placeholderStyle?: CSSProperties;
90
- hoveringArea?: string | null;
91
- setHoveringArea?: (area: string | null) => void;
92
- hoveringZone?: string | null;
93
- setHoveringZone?: (zone: string | null) => void;
89
+ zoneCompound?: string;
90
+ index?: number;
91
+ draggedItem?: Draggable | null;
94
92
  hoveringComponent?: string | null;
95
93
  setHoveringComponent?: (id: string | null) => void;
96
94
  registerZoneArea?: (areaId: string) => void;
@@ -101,8 +99,13 @@ type DropZoneContext<UserConfig extends Config = Config> = {
101
99
  pathData?: PathData;
102
100
  registerPath?: (selector: ItemSelector) => void;
103
101
  mode?: "edit" | "render";
104
- zoneWillDrag?: string;
105
- setZoneWillDrag?: (zone: string) => void;
102
+ depth: number;
103
+ registerLocalZone?: (zone: string, active: boolean) => void;
104
+ deepestZone?: string | null;
105
+ deepestArea?: string | null;
106
+ nextDeepestZone?: string | null;
107
+ nextDeepestArea?: string | null;
108
+ path: string[];
106
109
  } | null;
107
110
  declare const dropZoneContext: react.Context<DropZoneContext<Config>>;
108
111
  declare const DropZoneProvider: ({ children, value, }: {
@@ -110,6 +113,12 @@ declare const DropZoneProvider: ({ children, value, }: {
110
113
  value: DropZoneContext;
111
114
  }) => react_jsx_runtime.JSX.Element;
112
115
 
116
+ type DropZoneDndData = {
117
+ areaId?: string;
118
+ depth: number;
119
+ path: UniqueIdentifier[];
120
+ isDroppableTarget: boolean;
121
+ };
113
122
  declare function DropZone(props: DropZoneProps): react_jsx_runtime.JSX.Element;
114
123
 
115
124
  declare const IconButton: ({ children, href, onClick, variant, type, disabled, tabIndex, newTab, fullWidth, title, }: {
@@ -224,4 +233,4 @@ declare const usePuck: <UserConfig extends Config = Config>() => {
224
233
  selectedItem: ComponentDataMap<ExtractPropsFromConfig<UserConfig>> | null;
225
234
  };
226
235
 
227
- export { Action, ActionBar, AppState, AutoField, Button, ComponentDataMap, Config, Data, DefaultComponentProps, DefaultRootFieldProps, Drawer, DropZone, DropZoneProvider, ExtractPropsFromConfig, ExtractRootPropsFromConfig, Field, FieldLabel, FieldProps, Group, History, IconButton, IframeConfig, InitialHistory, OnAction, Overrides, Permissions, Plugin, Puck, PuckAction, Render, UiState, UserGenerics, Viewports, dropZoneContext, migrate, transformProps, usePuck };
236
+ export { Action, ActionBar, AppState, AutoField, Button, ComponentDataMap, Config, Data, DefaultComponentProps, DefaultRootFieldProps, Drawer, DropZone, type DropZoneDndData, DropZoneProvider, ExtractPropsFromConfig, ExtractRootPropsFromConfig, Field, FieldLabel, FieldProps, Group, History, IconButton, IframeConfig, InitialHistory, OnAction, Overrides, Permissions, Plugin, Puck, PuckAction, Render, UiState, UserGenerics, Viewports, dropZoneContext, migrate, transformProps, usePuck };