@measured/puck 0.15.0-canary.e0448f0 → 0.15.0-canary.e2cd445

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.
@@ -159,6 +159,7 @@ type PuckComponent<Props> = (props: WithPuckProps<Props & {
159
159
  }>) => JSX.Element;
160
160
  type PuckContext = {
161
161
  renderDropZone: React.FC<DropZoneProps>;
162
+ isEditing: boolean;
162
163
  };
163
164
  type ComponentConfig<ComponentProps extends DefaultComponentProps = DefaultComponentProps, DefaultProps = ComponentProps, DataShape = Omit<ComponentData<ComponentProps>, "type">> = {
164
165
  render: PuckComponent<ComponentProps>;
package/dist/index.css CHANGED
@@ -137,44 +137,44 @@
137
137
  /* styles.css */
138
138
 
139
139
  /* css-module:/home/runner/work/puck/puck/packages/core/components/AutoField/styles.module.css/#css-module-data */
140
- ._Input_1t4qc_1 {
140
+ ._Input_1qi5b_1 {
141
141
  color: var(--puck-color-grey-04);
142
142
  padding: 16px;
143
143
  padding-bottom: 12px;
144
144
  display: block;
145
145
  }
146
- ._Input_1t4qc_1 ._Input_1t4qc_1 {
146
+ ._Input_1qi5b_1 ._Input_1qi5b_1 {
147
147
  padding: 0px;
148
148
  }
149
- ._Input_1t4qc_1 * {
149
+ ._Input_1qi5b_1 * {
150
150
  box-sizing: border-box;
151
151
  }
152
- ._Input_1t4qc_1 + ._Input_1t4qc_1 {
152
+ ._Input_1qi5b_1 + ._Input_1qi5b_1 {
153
153
  border-top: 1px solid var(--puck-color-grey-09);
154
154
  margin-top: 8px;
155
155
  }
156
- ._Input_1t4qc_1 ._Input_1t4qc_1 + ._Input_1t4qc_1 {
156
+ ._Input_1qi5b_1 ._Input_1qi5b_1 + ._Input_1qi5b_1 {
157
157
  border-top: 0px;
158
158
  margin-top: 12px;
159
159
  }
160
- ._Input-label_1t4qc_26 {
160
+ ._Input-label_1qi5b_26 {
161
161
  align-items: center;
162
162
  display: flex;
163
163
  padding-bottom: 12px;
164
164
  font-size: var(--puck-font-size-xxs);
165
165
  font-weight: 600;
166
166
  }
167
- ._Input-labelIcon_1t4qc_34 {
167
+ ._Input-labelIcon_1qi5b_34 {
168
168
  color: var(--puck-color-grey-07);
169
169
  display: flex;
170
170
  margin-right: 4px;
171
171
  padding-left: 4px;
172
172
  }
173
- ._Input-disabledIcon_1t4qc_41 {
173
+ ._Input-disabledIcon_1qi5b_41 {
174
174
  color: var(--puck-color-grey-05);
175
175
  margin-left: auto;
176
176
  }
177
- ._Input-input_1t4qc_46 {
177
+ ._Input-input_1qi5b_46 {
178
178
  background: var(--puck-color-white);
179
179
  border-width: 1px;
180
180
  border-style: solid;
@@ -186,7 +186,7 @@
186
186
  transition: border-color 50ms ease-in;
187
187
  width: 100%;
188
188
  }
189
- select._Input-input_1t4qc_46 {
189
+ select._Input-input_1qi5b_46 {
190
190
  appearance: none;
191
191
  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;
192
192
  background-size: 12px;
@@ -196,26 +196,25 @@ select._Input-input_1t4qc_46 {
196
196
  cursor: pointer;
197
197
  }
198
198
  @media (hover: hover) and (pointer: fine) {
199
- ._Input_1t4qc_1:has(> input):hover ._Input-input_1t4qc_46:not([readonly]),
200
- ._Input_1t4qc_1:has(> textarea):hover ._Input-input_1t4qc_46:not([readonly]) {
199
+ ._Input_1qi5b_1:has(> input):hover ._Input-input_1qi5b_46:not([readonly]),
200
+ ._Input_1qi5b_1:has(> textarea):hover ._Input-input_1qi5b_46:not([readonly]) {
201
201
  border-color: var(--puck-color-grey-05);
202
202
  transition: none;
203
203
  }
204
- ._Input_1t4qc_1:has(> select):hover ._Input-input_1t4qc_46:not([disabled]) {
204
+ ._Input_1qi5b_1:has(> select):hover ._Input-input_1qi5b_46:not([disabled]) {
205
205
  background-color: var(--puck-color-azure-12);
206
206
  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>");
207
207
  border-color: var(--puck-color-grey-05);
208
208
  transition: none;
209
209
  }
210
210
  }
211
- ._Input-input_1t4qc_46:focus {
211
+ ._Input-input_1qi5b_46:focus {
212
212
  border-color: var(--puck-color-grey-05);
213
213
  outline: 2px solid var(--puck-color-azure-05);
214
214
  transition: none;
215
215
  }
216
- ._Input--readOnly_1t4qc_90 > ._Input-input_1t4qc_46,
217
- ._Input--readOnly_1t4qc_90 > select._Input-input_1t4qc_46,
218
- ._Input-input_1t4qc_46:read-only {
216
+ ._Input--readOnly_1qi5b_90 > ._Input-input_1qi5b_46,
217
+ ._Input--readOnly_1qi5b_90 > select._Input-input_1qi5b_46 {
219
218
  background-color: var(--puck-color-grey-11);
220
219
  border-color: var(--puck-color-grey-09);
221
220
  color: var(--puck-color-grey-04);
@@ -224,34 +223,34 @@ select._Input-input_1t4qc_46 {
224
223
  outline: 0;
225
224
  transition: none;
226
225
  }
227
- ._Input-radioGroupItems_1t4qc_102 {
226
+ ._Input-radioGroupItems_1qi5b_101 {
228
227
  display: flex;
229
228
  border: 1px solid var(--puck-color-grey-09);
230
229
  border-radius: 4px;
231
230
  flex-wrap: wrap;
232
231
  }
233
- ._Input-radio_1t4qc_102 {
232
+ ._Input-radio_1qi5b_101 {
234
233
  border-right: 1px solid var(--puck-color-grey-09);
235
234
  flex-grow: 1;
236
235
  }
237
- ._Input-radio_1t4qc_102:first-of-type {
236
+ ._Input-radio_1qi5b_101:first-of-type {
238
237
  border-bottom-left-radius: 4px;
239
238
  border-top-left-radius: 4px;
240
239
  }
241
- ._Input-radio_1t4qc_102:first-of-type ._Input-radioInner_1t4qc_119 {
240
+ ._Input-radio_1qi5b_101:first-of-type ._Input-radioInner_1qi5b_118 {
242
241
  border-bottom-left-radius: 3px;
243
242
  border-top-left-radius: 3px;
244
243
  }
245
- ._Input-radio_1t4qc_102:last-of-type {
244
+ ._Input-radio_1qi5b_101:last-of-type {
246
245
  border-bottom-right-radius: 4px;
247
246
  border-right: 0;
248
247
  border-top-right-radius: 4px;
249
248
  }
250
- ._Input-radio_1t4qc_102:last-of-type ._Input-radioInner_1t4qc_119 {
249
+ ._Input-radio_1qi5b_101:last-of-type ._Input-radioInner_1qi5b_118 {
251
250
  border-bottom-right-radius: 3px;
252
251
  border-top-right-radius: 3px;
253
252
  }
254
- ._Input-radioInner_1t4qc_119 {
253
+ ._Input-radioInner_1qi5b_118 {
255
254
  background-color: var(--puck-color-white);
256
255
  color: var(--puck-color-grey-04);
257
256
  cursor: pointer;
@@ -260,32 +259,32 @@ select._Input-input_1t4qc_46 {
260
259
  text-align: center;
261
260
  transition: background-color 50ms ease-in;
262
261
  }
263
- ._Input-radio_1t4qc_102:has(:focus-visible) {
262
+ ._Input-radio_1qi5b_101:has(:focus-visible) {
264
263
  outline: 2px solid var(--puck-color-azure-05);
265
264
  outline-offset: 2px;
266
265
  position: relative;
267
266
  }
268
267
  @media (hover: hover) and (pointer: fine) {
269
- ._Input-radioInner_1t4qc_119:hover {
268
+ ._Input-radioInner_1qi5b_118:hover {
270
269
  background-color: var(--puck-color-azure-12);
271
270
  transition: none;
272
271
  }
273
272
  }
274
- ._Input--readOnly_1t4qc_90 ._Input-radioInner_1t4qc_119 {
273
+ ._Input--readOnly_1qi5b_90 ._Input-radioInner_1qi5b_118 {
275
274
  background-color: var(--puck-color-white);
276
275
  color: var(--puck-color-grey-04);
277
276
  cursor: default;
278
277
  }
279
- ._Input-radio_1t4qc_102 ._Input-radioInput_1t4qc_164:checked ~ ._Input-radioInner_1t4qc_119 {
278
+ ._Input-radio_1qi5b_101 ._Input-radioInput_1qi5b_163:checked ~ ._Input-radioInner_1qi5b_118 {
280
279
  background-color: var(--puck-color-azure-11);
281
280
  color: var(--puck-color-azure-04);
282
281
  font-weight: 500;
283
282
  }
284
- ._Input--readOnly_1t4qc_90 ._Input-radioInput_1t4qc_164:checked ~ ._Input-radioInner_1t4qc_119 {
283
+ ._Input--readOnly_1qi5b_90 ._Input-radioInput_1qi5b_163:checked ~ ._Input-radioInner_1qi5b_118 {
285
284
  background-color: var(--puck-color-grey-11);
286
285
  color: var(--puck-color-grey-04);
287
286
  }
288
- ._Input-radio_1t4qc_102 ._Input-radioInput_1t4qc_164 {
287
+ ._Input-radio_1qi5b_101 ._Input-radioInput_1qi5b_163 {
289
288
  clip: rect(0 0 0 0);
290
289
  clip-path: inset(100%);
291
290
  height: 1px;
@@ -294,23 +293,23 @@ select._Input-input_1t4qc_46 {
294
293
  white-space: nowrap;
295
294
  width: 1px;
296
295
  }
297
- textarea._Input-input_1t4qc_46 {
296
+ textarea._Input-input_1qi5b_46 {
298
297
  margin-bottom: -4px;
299
298
  }
300
299
 
301
300
  /* css-module:/home/runner/work/puck/puck/packages/core/components/AutoField/fields/ArrayField/styles.module.css/#css-module-data */
302
- ._ArrayField_1lr58_5 {
301
+ ._ArrayField_1go19_5 {
303
302
  display: flex;
304
303
  flex-direction: column;
305
304
  background-color: var(--puck-color-grey-09);
306
305
  border: 1px solid var(--puck-color-grey-09);
307
306
  border-radius: 4px;
308
307
  }
309
- ._ArrayField--isDraggingFrom_1lr58_13 {
308
+ ._ArrayField--isDraggingFrom_1go19_13 {
310
309
  background-color: var(--puck-color-azure-11);
311
310
  overflow: hidden;
312
311
  }
313
- ._ArrayField-addButton_1lr58_18 {
312
+ ._ArrayField-addButton_1go19_18 {
314
313
  background-color: var(--puck-color-white);
315
314
  border: none;
316
315
  border-radius: 3px;
@@ -324,35 +323,35 @@ textarea._Input-input_1t4qc_46 {
324
323
  text-align: left;
325
324
  transition: background-color 50ms ease-in;
326
325
  }
327
- ._ArrayField--hasItems_1lr58_33 > ._ArrayField-addButton_1lr58_18 {
326
+ ._ArrayField--hasItems_1go19_33 > ._ArrayField-addButton_1go19_18 {
328
327
  border-top: 1px solid var(--puck-color-grey-09);
329
328
  border-top-left-radius: 0;
330
329
  border-top-right-radius: 0;
331
330
  }
332
- ._ArrayField-addButton_1lr58_18:focus-visible {
331
+ ._ArrayField-addButton_1go19_18:focus-visible {
333
332
  outline: 2px solid var(--puck-color-azure-05);
334
333
  outline-offset: 2px;
335
334
  position: relative;
336
335
  }
337
336
  @media (hover: hover) and (pointer: fine) {
338
- ._ArrayField_1lr58_5:not(._ArrayField--isDraggingFrom_1lr58_13) > ._ArrayField-addButton_1lr58_18:hover {
337
+ ._ArrayField_1go19_5:not(._ArrayField--isDraggingFrom_1go19_13) > ._ArrayField-addButton_1go19_18:hover {
339
338
  background: var(--puck-color-azure-12);
340
339
  color: var(--puck-color-azure-04);
341
340
  transition: none;
342
341
  }
343
342
  }
344
- ._ArrayField_1lr58_5:not(._ArrayField--isDraggingFrom_1lr58_13) > ._ArrayField-addButton_1lr58_18:active {
343
+ ._ArrayField_1go19_5:not(._ArrayField--isDraggingFrom_1go19_13) > ._ArrayField-addButton_1go19_18:active {
345
344
  background: var(--puck-color-azure-11);
346
345
  color: var(--puck-color-azure-04);
347
346
  transition: none;
348
347
  }
349
- ._ArrayFieldItem_1lr58_63 {
348
+ ._ArrayFieldItem_1go19_63 {
350
349
  border-top-left-radius: 3px;
351
350
  border-top-right-radius: 3px;
352
351
  display: block;
353
352
  position: relative;
354
353
  }
355
- ._ArrayFieldItem_1lr58_63:not(._ArrayFieldItem--isDragging_1lr58_71):not(:first-of-type)::before {
354
+ ._ArrayFieldItem_1go19_63:not(._ArrayFieldItem--isDragging_1go19_71):not(:first-of-type)::before {
356
355
  background-color: var(--puck-color-grey-09);
357
356
  position: absolute;
358
357
  width: 100%;
@@ -361,26 +360,26 @@ textarea._Input-input_1t4qc_46 {
361
360
  z-index: 1;
362
361
  top: -1px;
363
362
  }
364
- ._ArrayFieldItem--isExpanded_1lr58_81::before {
363
+ ._ArrayFieldItem--isExpanded_1go19_81::before {
365
364
  display: none;
366
365
  }
367
- ._ArrayFieldItem--isExpanded_1lr58_81 {
366
+ ._ArrayFieldItem--isExpanded_1go19_81 {
368
367
  border-bottom: 0;
369
368
  outline-offset: 0px !important;
370
369
  outline: 1px solid var(--puck-color-azure-07) !important;
371
370
  z-index: 2;
372
371
  }
373
- ._ArrayFieldItem--isDragging_1lr58_71 {
372
+ ._ArrayFieldItem--isDragging_1go19_71 {
374
373
  box-shadow: color-mix(in srgb, var(--puck-color-grey-06) 25%, transparent) 0 3px 6px 0;
375
374
  }
376
- ._ArrayFieldItem--isDragging_1lr58_71 ._ArrayFieldItem-summary_1lr58_97:active {
375
+ ._ArrayFieldItem--isDragging_1go19_71 ._ArrayFieldItem-summary_1go19_97:active {
377
376
  background-color: var(--puck-color-white);
378
377
  }
379
- ._ArrayFieldItem_1lr58_63 + ._ArrayFieldItem_1lr58_63 {
378
+ ._ArrayFieldItem_1go19_63 + ._ArrayFieldItem_1go19_63 {
380
379
  border-top-left-radius: 0;
381
380
  border-top-right-radius: 0;
382
381
  }
383
- ._ArrayFieldItem-summary_1lr58_97 {
382
+ ._ArrayFieldItem-summary_1go19_97 {
384
383
  background: var(--puck-color-white);
385
384
  color: var(--puck-color-grey-04);
386
385
  cursor: pointer;
@@ -396,64 +395,65 @@ textarea._Input-input_1t4qc_46 {
396
395
  overflow: hidden;
397
396
  transition: background-color 50ms ease-in;
398
397
  }
399
- ._ArrayFieldItem_1lr58_63:first-of-type > ._ArrayFieldItem-summary_1lr58_97 {
398
+ ._ArrayFieldItem_1go19_63:first-of-type > ._ArrayFieldItem-summary_1go19_97 {
400
399
  border-top-left-radius: 3px;
401
400
  border-top-right-radius: 3px;
402
401
  }
403
- ._ArrayField--addDisabled_1lr58_128 > ._ArrayFieldItem_1lr58_63:last-of-type:not(._ArrayFieldItem--isExpanded_1lr58_81) > ._ArrayFieldItem-summary_1lr58_97 {
402
+ ._ArrayField--addDisabled_1go19_128 > ._ArrayFieldItem_1go19_63:last-of-type:not(._ArrayFieldItem--isExpanded_1go19_81) > ._ArrayFieldItem-summary_1go19_97 {
404
403
  border-bottom-left-radius: 3px;
405
404
  border-bottom-right-radius: 3px;
406
405
  }
407
- ._ArrayField--addDisabled_1lr58_128 > ._ArrayFieldItem--isExpanded_1lr58_81:last-of-type {
406
+ ._ArrayField--addDisabled_1go19_128 > ._ArrayFieldItem--isExpanded_1go19_81:last-of-type {
408
407
  border-bottom-left-radius: 3px;
409
408
  border-bottom-right-radius: 3px;
410
409
  }
411
- ._ArrayFieldItem-summary_1lr58_97:focus-visible {
410
+ ._ArrayFieldItem-summary_1go19_97:focus-visible {
412
411
  outline: 2px solid var(--puck-color-azure-05);
413
412
  outline-offset: 2px;
414
413
  }
415
414
  @media (hover: hover) and (pointer: fine) {
416
- ._ArrayFieldItem-summary_1lr58_97:hover {
415
+ ._ArrayFieldItem-summary_1go19_97:hover {
417
416
  background-color: var(--puck-color-azure-12);
418
417
  transition: none;
419
418
  }
420
419
  }
421
- ._ArrayFieldItem-summary_1lr58_97:active {
420
+ ._ArrayFieldItem-summary_1go19_97:active {
422
421
  background-color: var(--puck-color-azure-11);
423
422
  transition: none;
424
423
  }
425
- ._ArrayFieldItem--isExpanded_1lr58_81 > ._ArrayFieldItem-summary_1lr58_97 {
424
+ ._ArrayFieldItem--isExpanded_1go19_81 > ._ArrayFieldItem-summary_1go19_97 {
426
425
  background: var(--puck-color-azure-11);
427
426
  color: var(--puck-color-azure-04);
428
427
  font-weight: 600;
429
428
  transition: none;
430
429
  }
431
- ._ArrayFieldItem-body_1lr58_164 {
430
+ ._ArrayFieldItem-body_1go19_164 {
432
431
  background: var(--puck-color-white);
433
432
  display: none;
434
433
  }
435
- ._ArrayFieldItem--isExpanded_1lr58_81 > ._ArrayFieldItem-body_1lr58_164 {
434
+ ._ArrayFieldItem--isExpanded_1go19_81 > ._ArrayFieldItem-body_1go19_164 {
436
435
  display: block;
437
436
  }
438
- ._ArrayFieldItem-fieldset_1lr58_173 {
437
+ ._ArrayFieldItem-fieldset_1go19_173 {
439
438
  border: none;
440
439
  border-top: 1px solid var(--puck-color-grey-09);
441
440
  margin: 0;
441
+ min-width: 0;
442
442
  padding: 16px 15px;
443
443
  }
444
- ._ArrayFieldItem-rhs_1lr58_180 {
444
+ ._ArrayFieldItem-rhs_1go19_181 {
445
445
  display: flex;
446
446
  gap: 4px;
447
447
  align-items: center;
448
448
  }
449
- ._ArrayFieldItem-actions_1lr58_186 {
449
+ ._ArrayFieldItem-actions_1go19_187 {
450
450
  color: var(--puck-color-grey-04);
451
451
  display: flex;
452
452
  gap: 4px;
453
453
  opacity: 0;
454
454
  }
455
- ._ArrayFieldItem-summary_1lr58_97:focus-within > ._ArrayFieldItem-rhs_1lr58_180 > ._ArrayFieldItem-actions_1lr58_186,
456
- ._ArrayFieldItem-summary_1lr58_97:hover > ._ArrayFieldItem-rhs_1lr58_180 > ._ArrayFieldItem-actions_1lr58_186 {
455
+ ._ArrayFieldItem-summary_1go19_97:focus-within > ._ArrayFieldItem-rhs_1go19_181 > ._ArrayFieldItem-actions_1go19_187,
456
+ ._ArrayFieldItem-summary_1go19_97:hover > ._ArrayFieldItem-rhs_1go19_181 > ._ArrayFieldItem-actions_1go19_187 {
457
457
  opacity: 1;
458
458
  }
459
459
 
@@ -499,6 +499,28 @@ textarea._Input-input_1t4qc_46 {
499
499
  color: var(--puck-color-grey-07);
500
500
  }
501
501
 
502
+ /* css-module:/home/runner/work/puck/puck/packages/core/components/Loader/styles.module.css/#css-module-data */
503
+ @keyframes _loader-animation_nacdm_1 {
504
+ 0% {
505
+ transform: rotate(0deg) scale(1);
506
+ }
507
+ 50% {
508
+ transform: rotate(180deg) scale(0.8);
509
+ }
510
+ 100% {
511
+ transform: rotate(360deg) scale(1);
512
+ }
513
+ }
514
+ ._Loader_nacdm_13 {
515
+ background: transparent;
516
+ border-radius: 100%;
517
+ border: 2px solid currentColor;
518
+ border-bottom-color: transparent;
519
+ display: inline-block;
520
+ animation: _loader-animation_nacdm_1 1s 0s infinite linear;
521
+ animation-fill-mode: both;
522
+ }
523
+
502
524
  /* css-module:/home/runner/work/puck/puck/packages/core/components/DragIcon/styles.module.css/#css-module-data */
503
525
  ._DragIcon_1p5wn_1 {
504
526
  color: var(--puck-color-grey-05);
@@ -951,16 +973,17 @@ textarea._Input-input_1t4qc_46 {
951
973
  }
952
974
 
953
975
  /* css-module:/home/runner/work/puck/puck/packages/core/components/AutoField/fields/ObjectField/styles.module.css/#css-module-data */
954
- ._ObjectField_15j63_5 {
976
+ ._ObjectField_1ua3y_5 {
955
977
  display: flex;
956
978
  flex-direction: column;
957
979
  background-color: var(--puck-color-white);
958
980
  border: 1px solid var(--puck-color-grey-09);
959
981
  border-radius: 4px;
960
982
  }
961
- ._ObjectField-fieldset_15j63_13 {
983
+ ._ObjectField-fieldset_1ua3y_13 {
962
984
  border: none;
963
985
  margin: 0;
986
+ min-width: 0;
964
987
  padding: 16px 15px;
965
988
  }
966
989
 
@@ -1322,16 +1345,22 @@ textarea._Input-input_1t4qc_46 {
1322
1345
  }
1323
1346
 
1324
1347
  /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/styles.module.css/#css-module-data */
1325
- ._Puck_mowzv_19 {
1348
+ ._Puck_1g88c_19 {
1326
1349
  --puck-space-px: 16px;
1327
- bottom: 0;
1328
1350
  font-family: var(--puck-font-family);
1351
+ }
1352
+ ._Puck-portal_1g88c_24 {
1353
+ position: relative;
1354
+ z-index: 2;
1355
+ }
1356
+ ._PuckLayout_1g88c_31 {
1357
+ bottom: 0;
1329
1358
  left: 0;
1330
1359
  position: fixed;
1331
1360
  right: 0;
1332
1361
  top: 0;
1333
1362
  }
1334
- ._Puck-layout_mowzv_29 {
1363
+ ._PuckLayout-inner_1g88c_39 {
1335
1364
  --puck-frame-width: auto;
1336
1365
  --puck-side-bar-width: 0px;
1337
1366
  display: grid;
@@ -1342,54 +1371,54 @@ textarea._Input-input_1t4qc_46 {
1342
1371
  position: relative;
1343
1372
  z-index: 0;
1344
1373
  }
1345
- ._Puck--mounted_mowzv_41 ._Puck-layout_mowzv_29 {
1374
+ ._PuckLayout--mounted_1g88c_51 ._PuckLayout-inner_1g88c_39 {
1346
1375
  --puck-side-bar-width: 186px;
1347
1376
  }
1348
- ._Puck--leftSideBarVisible_mowzv_45 ._Puck-layout_mowzv_29 {
1377
+ ._PuckLayout--leftSideBarVisible_1g88c_55 ._PuckLayout-inner_1g88c_39 {
1349
1378
  grid-template-columns: var(--puck-side-bar-width) var(--puck-frame-width) 0;
1350
1379
  }
1351
- ._Puck--rightSideBarVisible_mowzv_51 ._Puck-layout_mowzv_29 {
1380
+ ._PuckLayout--rightSideBarVisible_1g88c_61 ._PuckLayout-inner_1g88c_39 {
1352
1381
  grid-template-columns: 0 var(--puck-frame-width) var(--puck-side-bar-width);
1353
1382
  }
1354
- ._Puck--leftSideBarVisible_mowzv_45._Puck--rightSideBarVisible_mowzv_51 ._Puck-layout_mowzv_29 {
1383
+ ._PuckLayout--leftSideBarVisible_1g88c_55._PuckLayout--rightSideBarVisible_1g88c_61 ._PuckLayout-inner_1g88c_39 {
1355
1384
  grid-template-columns: var(--puck-side-bar-width) var(--puck-frame-width) var(--puck-side-bar-width);
1356
1385
  }
1357
1386
  @media (min-width: 458px) {
1358
- ._Puck-mounted_mowzv_64 ._Puck-layout_mowzv_29 {
1387
+ ._PuckLayout-mounted_1g88c_75 ._PuckLayout-inner_1g88c_39 {
1359
1388
  --puck-frame-width: minmax(266px, auto);
1360
1389
  }
1361
1390
  }
1362
1391
  @media (min-width: 638px) {
1363
- ._Puck_mowzv_19 ._Puck-layout_mowzv_29 {
1392
+ ._PuckLayout_1g88c_31 ._PuckLayout-inner_1g88c_39 {
1364
1393
  --puck-side-bar-width: minmax(186px, 250px);
1365
1394
  }
1366
1395
  }
1367
1396
  @media (min-width: 766px) {
1368
- ._Puck_mowzv_19 ._Puck-layout_mowzv_29 {
1397
+ ._PuckLayout_1g88c_31 ._PuckLayout-inner_1g88c_39 {
1369
1398
  --puck-frame-width: auto;
1370
1399
  }
1371
1400
  }
1372
1401
  @media (min-width: 990px) {
1373
- ._Puck_mowzv_19 ._Puck-layout_mowzv_29 {
1402
+ ._PuckLayout_1g88c_31 ._PuckLayout-inner_1g88c_39 {
1374
1403
  --puck-side-bar-width: 256px;
1375
1404
  }
1376
1405
  }
1377
1406
  @media (min-width: 1198px) {
1378
- ._Puck_mowzv_19 ._Puck-layout_mowzv_29 {
1407
+ ._PuckLayout_1g88c_31 ._PuckLayout-inner_1g88c_39 {
1379
1408
  --puck-side-bar-width: 274px;
1380
1409
  }
1381
1410
  }
1382
1411
  @media (min-width: 1398px) {
1383
- ._Puck_mowzv_19 ._Puck-layout_mowzv_29 {
1412
+ ._PuckLayout_1g88c_31 ._PuckLayout-inner_1g88c_39 {
1384
1413
  --puck-side-bar-width: 290px;
1385
1414
  }
1386
1415
  }
1387
1416
  @media (min-width: 1598px) {
1388
- ._Puck_mowzv_19 ._Puck-layout_mowzv_29 {
1417
+ ._PuckLayout_1g88c_31 ._PuckLayout-inner_1g88c_39 {
1389
1418
  --puck-side-bar-width: 320px;
1390
1419
  }
1391
1420
  }
1392
- ._Puck-header_mowzv_105 {
1421
+ ._PuckLayout-header_1g88c_116 {
1393
1422
  background: var(--puck-color-white);
1394
1423
  border-bottom: 1px solid var(--puck-color-grey-09);
1395
1424
  color: var(--puck-color-black);
@@ -1397,7 +1426,7 @@ textarea._Input-input_1t4qc_46 {
1397
1426
  position: relative;
1398
1427
  max-width: 100vw;
1399
1428
  }
1400
- ._Puck-headerInner_mowzv_114 {
1429
+ ._PuckLayout-headerInner_1g88c_125 {
1401
1430
  align-items: end;
1402
1431
  display: grid;
1403
1432
  gap: var(--puck-space-px);
@@ -1406,43 +1435,43 @@ textarea._Input-input_1t4qc_46 {
1406
1435
  grid-template-rows: auto;
1407
1436
  padding: var(--puck-space-px);
1408
1437
  }
1409
- ._Puck-headerToggle_mowzv_124 {
1438
+ ._PuckLayout-headerToggle_1g88c_135 {
1410
1439
  color: var(--puck-color-grey-05);
1411
1440
  display: flex;
1412
1441
  margin-left: -4px;
1413
1442
  padding-top: 2px;
1414
1443
  }
1415
- ._Puck--rightSideBarVisible_mowzv_51 ._Puck-rightSideBarToggle_mowzv_131,
1416
- ._Puck--leftSideBarVisible_mowzv_45 ._Puck-leftSideBarToggle_mowzv_132 {
1444
+ ._PuckLayout--rightSideBarVisible_1g88c_61 ._PuckLayout-rightSideBarToggle_1g88c_142,
1445
+ ._PuckLayout--leftSideBarVisible_1g88c_55 ._PuckLayout-leftSideBarToggle_1g88c_143 {
1417
1446
  color: var(--puck-color-black);
1418
1447
  }
1419
- ._Puck-headerTitle_mowzv_136 {
1448
+ ._PuckLayout-headerTitle_1g88c_147 {
1420
1449
  align-self: center;
1421
1450
  }
1422
- ._Puck-headerPath_mowzv_140 {
1451
+ ._PuckLayout-headerPath_1g88c_151 {
1423
1452
  font-family: var(--puck-font-family-monospaced);
1424
1453
  font-size: var(--puck-font-size-xxs);
1425
1454
  font-weight: normal;
1426
1455
  word-break: break-all;
1427
1456
  }
1428
- ._Puck-headerTools_mowzv_147 {
1457
+ ._PuckLayout-headerTools_1g88c_158 {
1429
1458
  display: flex;
1430
1459
  gap: 16px;
1431
1460
  justify-content: flex-end;
1432
1461
  }
1433
- ._Puck-menuButton_mowzv_153 {
1462
+ ._PuckLayout-menuButton_1g88c_164 {
1434
1463
  color: var(--puck-color-grey-05);
1435
1464
  margin-left: -4px;
1436
1465
  }
1437
- ._Puck--menuOpen_mowzv_158 ._Puck-menuButton_mowzv_153 {
1466
+ ._PuckLayout--menuOpen_1g88c_169 ._PuckLayout-menuButton_1g88c_164 {
1438
1467
  color: var(--puck-color-black);
1439
1468
  }
1440
1469
  @media (min-width: 638px) {
1441
- ._Puck-menuButton_mowzv_153 {
1470
+ ._PuckLayout-menuButton_1g88c_164 {
1442
1471
  display: none;
1443
1472
  }
1444
1473
  }
1445
- ._Puck-leftSideBar_mowzv_132 {
1474
+ ._PuckLayout-leftSideBar_1g88c_143 {
1446
1475
  background: var(--puck-color-grey-12);
1447
1476
  border-right: 1px solid var(--puck-color-grey-09);
1448
1477
  display: flex;
@@ -1450,7 +1479,7 @@ textarea._Input-input_1t4qc_46 {
1450
1479
  grid-area: left;
1451
1480
  overflow-y: auto;
1452
1481
  }
1453
- ._Puck-rightSideBar_mowzv_131 {
1482
+ ._PuckLayout-rightSideBar_1g88c_142 {
1454
1483
  background: var(--puck-color-white);
1455
1484
  border-left: 1px solid var(--puck-color-grey-09);
1456
1485
  display: flex;
@@ -1458,32 +1487,34 @@ textarea._Input-input_1t4qc_46 {
1458
1487
  grid-area: right;
1459
1488
  overflow-y: auto;
1460
1489
  }
1461
- ._Puck-portal_mowzv_186 {
1462
- z-index: 2;
1463
- }
1464
1490
 
1465
1491
  /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Fields/styles.module.css/#css-module-data */
1466
- ._PuckFields_1o0if_1 {
1467
- position: relative;
1492
+ ._PuckFields_gmb17_1 {
1468
1493
  font-family: var(--puck-font-family);
1469
1494
  }
1470
- ._PuckFields--isLoading_1o0if_6 {
1495
+ ._PuckFields--isLoading_gmb17_5 {
1471
1496
  min-height: 48px;
1472
1497
  }
1473
- ._PuckFields-loadingOverlay_1o0if_10 {
1498
+ ._PuckFields-loadingOverlay_gmb17_9 {
1474
1499
  background: var(--puck-color-white);
1475
1500
  display: flex;
1476
- justify-content: center;
1477
- align-items: center;
1501
+ justify-content: flex-end;
1502
+ align-items: flex-start;
1478
1503
  height: 100%;
1479
1504
  width: 100%;
1480
- top: 0;
1505
+ top: 0px;
1481
1506
  position: absolute;
1482
1507
  z-index: 1;
1483
1508
  pointer-events: all;
1484
1509
  box-sizing: border-box;
1485
1510
  opacity: 0.8;
1486
1511
  }
1512
+ ._PuckFields-loadingOverlayInner_gmb17_24 {
1513
+ display: flex;
1514
+ padding: 16px;
1515
+ position: sticky;
1516
+ top: 0;
1517
+ }
1487
1518
 
1488
1519
  /* css-module:/home/runner/work/puck/puck/packages/core/components/ComponentList/styles.module.css/#css-module-data */
1489
1520
  ._ComponentList_odh9d_1 {
package/dist/index.d.ts CHANGED
@@ -1,5 +1,5 @@
1
- import { U as UiState, D as Data, A as AppState, F as Field, a as FieldProps, C as Config, b as DefaultRootProps, I as ItemSelector, c as DropZoneProps, V as Viewports, d as DefaultComponentProps, M as MappedItem, R as RootDataWithProps, e as RootData, f as ComponentData } from './Config-6344ec1b.js';
2
- export { q as Adaptor, p as ArrayField, l as ArrayState, B as BaseData, m as BaseField, i as ComponentConfig, g as Content, s as CustomField, r as ExternalField, E as ExternalFieldWithAdaptor, t as Fields, k as ItemWithId, N as NumberField, O as ObjectField, P as PuckComponent, h as PuckContext, o as RadioField, j as RootDataWithoutProps, S as SelectField, T as TextField, n as TextareaField } from './Config-6344ec1b.js';
1
+ import { U as UiState, D as Data, A as AppState, F as Field, a as FieldProps, C as Config, b as DefaultRootProps, I as ItemSelector, c as DropZoneProps, V as Viewports, d as DefaultComponentProps, M as MappedItem, R as RootDataWithProps, e as RootData, f as ComponentData } from './Config-a4123ba2.js';
2
+ export { q as Adaptor, p as ArrayField, l as ArrayState, B as BaseData, m as BaseField, i as ComponentConfig, g as Content, s as CustomField, r as ExternalField, E as ExternalFieldWithAdaptor, t as Fields, k as ItemWithId, N as NumberField, O as ObjectField, P as PuckComponent, h as PuckContext, o as RadioField, j as RootDataWithoutProps, S as SelectField, T as TextField, n as TextareaField } from './Config-a4123ba2.js';
3
3
  import * as react_jsx_runtime from 'react/jsx-runtime';
4
4
  import * as react from 'react';
5
5
  import { ReactNode, ReactElement, CSSProperties, SyntheticEvent } from 'react';
@@ -112,7 +112,7 @@ declare const Button: ({ children, href, onClick, variant, type, disabled, tabIn
112
112
  }) => react_jsx_runtime.JSX.Element;
113
113
 
114
114
  declare const Drawer: {
115
- ({ children, droppableId, direction, }: {
115
+ ({ children, droppableId: _droppableId, direction, }: {
116
116
  children: ReactNode;
117
117
  droppableId?: string | undefined;
118
118
  direction?: "vertical" | "horizontal" | undefined;