@measured/puck 0.19.0-canary.706ea0c1 → 0.19.0-canary.75340804

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,57 +1254,55 @@ 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_kmkdc_1 {
1257
+ ._DropZone_3dmev_1 {
1254
1258
  --resize-animation-ms: 150ms;
1255
1259
  position: relative;
1256
1260
  height: 100%;
1261
+ min-height: var(--min-empty-height);
1257
1262
  outline-offset: -2px;
1258
1263
  width: 100%;
1259
1264
  }
1260
- ._DropZone--isActive_kmkdc_10 {
1261
- min-height: var(--min-empty-height);
1262
- }
1263
- ._DropZone--hasChildren_kmkdc_14 {
1265
+ ._DropZone--hasChildren_3dmev_11 {
1264
1266
  min-height: 0;
1265
1267
  }
1266
- ._DropZone--isActive_kmkdc_10._DropZone_kmkdc_1:empty {
1268
+ ._DropZone_3dmev_1:empty {
1267
1269
  min-height: var(--min-empty-height);
1268
1270
  }
1269
- ._DropZone_kmkdc_1:not(._DropZone--userIsDragging_kmkdc_22) {
1271
+ ._DropZone_3dmev_1:not(._DropZone--userIsDragging_3dmev_19) {
1270
1272
  transition: min-height var(--resize-animation-ms) ease-in;
1271
1273
  }
1272
- ._DropZone--isAreaSelected_kmkdc_26,
1273
- ._DropZone--hoveringOverArea_kmkdc_27:not(._DropZone--isRootZone_kmkdc_27) {
1274
+ ._DropZone--isAreaSelected_3dmev_23,
1275
+ ._DropZone--hoveringOverArea_3dmev_24:not(._DropZone--isRootZone_3dmev_24) {
1274
1276
  background: color-mix(in srgb, var(--puck-color-azure-09) 30%, transparent);
1275
1277
  outline: 2px dashed var(--puck-color-azure-08);
1276
1278
  }
1277
- ._DropZone_kmkdc_1:empty {
1279
+ ._DropZone_3dmev_1:empty {
1278
1280
  background: color-mix(in srgb, var(--puck-color-azure-09) 30%, transparent);
1279
1281
  outline: 2px dashed var(--puck-color-azure-08);
1280
1282
  }
1281
- ._DropZone--isDestination_kmkdc_37 {
1283
+ ._DropZone--isDestination_3dmev_34 {
1282
1284
  outline: 2px dashed var(--puck-color-azure-04) !important;
1283
1285
  }
1284
- ._DropZone--isDestination_kmkdc_37:not(._DropZone--isRootZone_kmkdc_27) {
1286
+ ._DropZone--isDestination_3dmev_34:not(._DropZone--isRootZone_3dmev_24) {
1285
1287
  background: color-mix(in srgb, var(--puck-color-azure-09) 30%, transparent) !important;
1286
1288
  }
1287
- ._DropZone-item_kmkdc_49 {
1289
+ ._DropZone-item_3dmev_46 {
1288
1290
  position: relative;
1289
1291
  }
1290
- ._DropZone-hitbox_kmkdc_53 {
1292
+ ._DropZone-hitbox_3dmev_50 {
1291
1293
  position: absolute;
1292
1294
  bottom: -12px;
1293
1295
  height: 24px;
1294
1296
  width: 100%;
1295
1297
  z-index: 1;
1296
1298
  }
1297
- ._DropZone--isEnabled_kmkdc_61._DropZone--userIsDragging_kmkdc_22 {
1299
+ ._DropZone--isEnabled_3dmev_58._DropZone--userIsDragging_3dmev_19 {
1298
1300
  outline: 2px dashed var(--puck-color-azure-06);
1299
1301
  }
1300
- ._DropZone_kmkdc_1 > *:not([data-puck-component]) {
1302
+ ._DropZone_3dmev_1 > *:not([data-puck-component]) {
1301
1303
  opacity: 0;
1302
1304
  }
1303
- body:has(._DropZone--isAnimating_kmkdc_70:empty) [data-puck-overlay] {
1305
+ body:has(._DropZone--isAnimating_3dmev_67:empty) [data-puck-overlay] {
1304
1306
  opacity: 0 !important;
1305
1307
  }
1306
1308