@measured/puck 0.17.0-canary.5e57623 → 0.17.0-canary.6e5864a

Sign up to get free protection for your applications and to get access to all the features.
@@ -8,9 +8,6 @@ var __getOwnPropSymbols = Object.getOwnPropertySymbols;
8
8
  var __getProtoOf = Object.getPrototypeOf;
9
9
  var __hasOwnProp = Object.prototype.hasOwnProperty;
10
10
  var __propIsEnum = Object.prototype.propertyIsEnumerable;
11
- var __typeError = (msg) => {
12
- throw TypeError(msg);
13
- };
14
11
  var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
15
12
  var __spreadValues = (a, b) => {
16
13
  for (var prop in b || (b = {}))
@@ -58,10 +55,6 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
58
55
  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
59
56
  mod
60
57
  ));
61
- var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
62
- var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
63
- var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
64
- var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
65
58
  var __async = (__this, __arguments, generator) => {
66
59
  return new Promise((resolve, reject) => {
67
60
  var fulfilled = (value) => {
@@ -243,9 +236,6 @@ export {
243
236
  __objRest,
244
237
  __commonJS,
245
238
  __toESM,
246
- __privateGet,
247
- __privateAdd,
248
- __privateSet,
249
239
  __async,
250
240
  init_react_import,
251
241
  rootDroppableId,
package/dist/index.css CHANGED
@@ -135,66 +135,52 @@
135
135
  }
136
136
 
137
137
  /* styles.css */
138
- #frame-root {
139
- min-height: 100vh;
140
- }
141
138
 
142
139
  /* css-module:/home/runner/work/puck/puck/packages/core/components/ActionBar/styles.module.css/#css-module-data */
143
- ._ActionBar_1lbm7_1 {
144
- align-items: center;
145
- cursor: default;
140
+ ._ActionBar_151w5_1 {
146
141
  display: flex;
147
142
  width: auto;
148
143
  padding: 4px;
149
- padding-left: 0;
150
- padding-right: 0;
144
+ padding-right: 4px;
151
145
  border-top-left-radius: 8px;
152
146
  border-top-right-radius: 8px;
153
147
  border-radius: 8px;
154
148
  background: var(--puck-color-grey-01);
155
149
  color: var(--puck-color-white);
156
150
  font-family: var(--puck-font-family);
151
+ gap: 4px;
157
152
  min-height: 26px;
158
153
  }
159
- ._ActionBar-label_1lbm7_18 {
154
+ ._ActionBar-actionsLabel_151w5_16 {
160
155
  color: var(--puck-color-grey-08);
156
+ display: flex;
161
157
  font-size: var(--puck-font-size-xxxs);
162
158
  font-weight: 500;
159
+ justify-content: center;
160
+ align-items: center;
163
161
  padding-left: 8px;
164
162
  padding-right: 8px;
165
- margin-left: 4px;
166
- margin-right: 4px;
167
163
  text-overflow: ellipsis;
168
164
  white-space: nowrap;
169
165
  }
170
- ._ActionBar-action_1lbm7_30 + ._ActionBar-label_1lbm7_18 {
171
- padding-left: 0;
172
- }
173
- ._ActionBar-label_1lbm7_18 + ._ActionBar-action_1lbm7_30 {
174
- margin-left: -4px;
175
- }
176
- ._ActionBar-group_1lbm7_38 {
177
- align-items: center;
166
+ ._ActionBar-group_151w5_29 {
178
167
  border-inline-start: 0.5px solid var(--puck-color-grey-05);
179
168
  display: flex;
180
- height: 100%;
181
169
  padding-left: 4px;
182
170
  padding-right: 4px;
183
171
  }
184
- ._ActionBar-group_1lbm7_38:first-of-type {
185
- border-inline-start: 0;
172
+ ._ActionBar-group_151w5_29:last-of-type {
173
+ padding-right: 0;
186
174
  }
187
- ._ActionBar-group_1lbm7_38:empty {
175
+ ._ActionBar-group_151w5_29:empty {
188
176
  display: none;
189
177
  }
190
- ._ActionBar-action_1lbm7_30 {
178
+ ._ActionBar-action_151w5_16 {
191
179
  background: transparent;
192
180
  border: none;
193
181
  color: var(--puck-color-grey-08);
194
182
  cursor: pointer;
195
183
  padding: 6px 8px;
196
- margin-left: 4px;
197
- margin-right: 4px;
198
184
  border-radius: 4px;
199
185
  overflow: hidden;
200
186
  display: flex;
@@ -202,23 +188,20 @@
202
188
  justify-content: center;
203
189
  transition: color 50ms ease-in;
204
190
  }
205
- ._ActionBar-action_1lbm7_30:focus-visible {
191
+ ._ActionBar-action_151w5_16:focus-visible {
206
192
  outline: 2px solid var(--puck-color-azure-05);
207
193
  outline-offset: -2px;
208
194
  }
209
195
  @media (hover: hover) and (pointer: fine) {
210
- ._ActionBar-action_1lbm7_30:hover {
196
+ ._ActionBar-action_151w5_16:hover {
211
197
  color: var(--puck-color-azure-06);
212
198
  transition: none;
213
199
  }
214
200
  }
215
- ._ActionBar-action_1lbm7_30:active {
201
+ ._ActionBar-action_151w5_16:active {
216
202
  color: var(--puck-color-azure-07);
217
203
  transition: none;
218
204
  }
219
- ._ActionBar-group_1lbm7_38 * {
220
- margin: 0;
221
- }
222
205
 
223
206
  /* css-module:/home/runner/work/puck/puck/packages/core/components/AutoField/styles.module.css/#css-module-data */
224
207
  ._InputWrapper_1l5m8_1 {
@@ -1079,15 +1062,22 @@ textarea._Input-input_1l5m8_47 {
1079
1062
  }
1080
1063
 
1081
1064
  /* css-module:/home/runner/work/puck/puck/packages/core/components/Drawer/styles.module.css/#css-module-data */
1082
- ._Drawer_1ob9x_1 {
1083
- display: flex;
1084
- flex-direction: column;
1065
+ ._Drawer_1oa7v_1 {
1085
1066
  font-family: var(--puck-font-family);
1086
- gap: 12px;
1087
1067
  }
1088
- ._DrawerItem-draggable_1ob9x_8 {
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 {
1089
1080
  background: var(--puck-color-white);
1090
- cursor: grab;
1091
1081
  padding: 12px;
1092
1082
  display: flex;
1093
1083
  border: 1px var(--puck-color-grey-09) solid;
@@ -1097,54 +1087,64 @@ textarea._Input-input_1l5m8_47 {
1097
1087
  align-items: center;
1098
1088
  transition: background-color 50ms ease-in, color 50ms ease-in;
1099
1089
  }
1100
- ._DrawerItem--disabled_1ob9x_21 ._DrawerItem-draggable_1ob9x_8 {
1101
- background: var(--puck-color-grey-11);
1102
- color: var(--puck-color-grey-05);
1103
- cursor: not-allowed;
1104
- }
1105
- ._DrawerItem_1ob9x_8:focus-visible {
1090
+ ._DrawerItem_1oa7v_5:focus-visible {
1106
1091
  outline: 0;
1107
1092
  }
1108
- ._Drawer_1ob9x_1:not(._Drawer--isDraggingFrom_1ob9x_31) ._DrawerItem_1ob9x_8:focus-visible ._DrawerItem-draggable_1ob9x_8 {
1093
+ ._Drawer_1oa7v_1:not(._Drawer--isDraggingFrom_1oa7v_36) ._DrawerItem_1oa7v_5:focus-visible ._DrawerItem-draggable_1oa7v_5 {
1109
1094
  border-radius: 4px;
1110
1095
  outline: 2px solid var(--puck-color-azure-05);
1111
1096
  outline-offset: 2px;
1112
1097
  }
1113
1098
  @media (hover: hover) and (pointer: fine) {
1114
- ._Drawer_1ob9x_1:not(._Drawer--isDraggingFrom_1ob9x_31) ._DrawerItem_1ob9x_8:not(._DrawerItem--disabled_1ob9x_21) ._DrawerItem-draggable_1ob9x_8:hover {
1099
+ ._Drawer_1oa7v_1:not(._Drawer--isDraggingFrom_1oa7v_36) ._DrawerItem_1oa7v_5:not(._DrawerItem--disabled_1oa7v_5) ._DrawerItem-draggable_1oa7v_5:hover {
1115
1100
  background-color: var(--puck-color-azure-12);
1116
1101
  color: var(--puck-color-azure-04);
1117
1102
  transition: none;
1118
1103
  }
1119
1104
  }
1120
- ._DrawerItem-name_1ob9x_49 {
1105
+ ._DrawerItem-name_1oa7v_54 {
1121
1106
  overflow-x: hidden;
1122
1107
  text-overflow: ellipsis;
1123
1108
  white-space: nowrap;
1124
1109
  }
1125
1110
 
1126
1111
  /* css-module:/home/runner/work/puck/puck/packages/core/components/DraggableComponent/styles.module.css/#css-module-data */
1127
- ._DraggableComponent_1uqah_1 {
1128
- position: absolute;
1129
- pointer-events: none;
1112
+ ._DraggableComponent_1bhad_1 {
1113
+ pointer-events: auto;
1130
1114
  --overlay-background: color-mix( in srgb, var(--puck-color-azure-08) 30%, transparent );
1131
1115
  }
1132
- ._DraggableComponent-overlay_1uqah_12 {
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;
1122
+ 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;
1129
+ }
1130
+ ._DraggableComponent-overlay_1bhad_29 {
1133
1131
  cursor: pointer;
1134
1132
  height: 100%;
1135
1133
  width: 100%;
1136
1134
  top: 0;
1137
- outline: 2px var(--puck-color-azure-09) solid;
1138
1135
  outline-offset: -2px;
1139
1136
  position: absolute;
1140
1137
  pointer-events: none;
1141
1138
  box-sizing: border-box;
1142
1139
  z-index: 1;
1143
1140
  }
1144
- ._DraggableComponent_1uqah_1:focus-visible > ._DraggableComponent-overlay_1uqah_12 {
1141
+ ._DraggableComponent_1bhad_1:focus-visible > ._DraggableComponent-overlay_1bhad_29 {
1145
1142
  outline: 1px solid var(--puck-color-azure-05);
1146
1143
  }
1147
- ._DraggableComponent-loadingOverlay_1uqah_29 {
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 {
1148
1148
  background: var(--puck-color-white);
1149
1149
  color: var(--puck-color-grey-03);
1150
1150
  border-radius: 4px;
@@ -1159,125 +1159,89 @@ textarea._Input-input_1l5m8_47 {
1159
1159
  opacity: 0.8;
1160
1160
  z-index: 1;
1161
1161
  }
1162
- ._DraggableComponent--hover_1uqah_45:not(._DraggableComponent--isLocked_1uqah_45) > ._DraggableComponent-overlay_1uqah_12 {
1162
+ ._DraggableComponent_1bhad_1:hover:not(._DraggableComponent--isLocked_1bhad_65) > ._DraggableComponent-overlay_1bhad_29 {
1163
1163
  background: var(--overlay-background);
1164
+ pointer-events: none;
1164
1165
  }
1165
- ._DraggableComponent--hover_1uqah_45 > ._DraggableComponent-overlay_1uqah_12 {
1166
- outline: 2px var(--puck-color-azure-09) solid;
1166
+ ._DraggableComponent--forceHover_1bhad_71 > ._DraggableComponent-overlay_1bhad_29 {
1167
+ background: var(--overlay-background);
1168
+ pointer-events: none;
1167
1169
  }
1168
- ._DraggableComponent--isSelected_1uqah_54 > ._DraggableComponent-overlay_1uqah_12 {
1169
- outline-color: var(--puck-color-azure-07);
1170
+ ._DraggableComponent_1bhad_1:not(._DraggableComponent--isSelected_1bhad_76):hover > ._DraggableComponent-overlay_1bhad_29 {
1171
+ outline: 2px var(--puck-color-azure-09) solid !important;
1172
+ }
1173
+ ._DraggableComponent--indicativeHover_1bhad_81 > ._DraggableComponent-overlay_1bhad_29 {
1174
+ pointer-events: none;
1170
1175
  }
1171
- ._DraggableComponent_1uqah_1:has(._DraggableComponent--hover_1uqah_45 > ._DraggableComponent-overlay_1uqah_12) > ._DraggableComponent-overlay_1uqah_12 {
1176
+ ._DraggableComponent_1bhad_1:not(._DraggableComponent--isSelected_1bhad_76):has(._DraggableComponent_1bhad_1:hover > ._DraggableComponent-overlay_1bhad_29) > ._DraggableComponent-overlay_1bhad_29 {
1172
1177
  display: none;
1173
1178
  }
1174
- ._DraggableComponent-actionsOverlay_1uqah_66 {
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;
1175
1184
  position: sticky;
1176
- opacity: 0;
1177
- pointer-events: none;
1178
1185
  z-index: 2;
1179
1186
  }
1180
- ._DraggableComponent--isSelected_1uqah_54 ._DraggableComponent-actionsOverlay_1uqah_66 {
1181
- opacity: 1;
1182
- pointer-events: auto;
1183
- }
1184
- ._DraggableComponent-actions_1uqah_66 {
1187
+ ._DraggableComponent-actions_1bhad_97 {
1185
1188
  position: absolute;
1186
1189
  width: auto;
1187
1190
  cursor: grab;
1188
- display: flex;
1191
+ display: none;
1189
1192
  pointer-events: auto;
1190
1193
  box-sizing: border-box;
1191
1194
  transform-origin: right top;
1192
1195
  }
1193
-
1194
- /* components/DraggableComponent/styles.css */
1195
- [data-puck-component] * {
1196
- pointer-events: none;
1197
- user-select: none;
1198
- -webkit-user-select: none;
1199
- }
1200
- [data-puck-component] {
1201
- cursor: grab;
1202
- pointer-events: auto !important;
1203
- user-select: none;
1204
- -webkit-user-select: none;
1205
- }
1206
- [data-puck-disabled] {
1207
- cursor: pointer;
1208
- }
1209
- [data-puck-dragging]:not([data-dnd-dragging]) {
1210
- background: var(--puck-color-azure-06) !important;
1211
- border: none !important;
1212
- color: #00000000 !important;
1213
- opacity: 0.3 !important;
1214
- outline: none !important;
1215
- transition: none !important;
1216
- }
1217
- [data-puck-dragging]:not([data-dnd-dragging]) *,
1218
- [data-puck-dragging]:not([data-dnd-dragging])::after,
1219
- [data-puck-dragging]:not([data-dnd-dragging])::before {
1220
- opacity: 0 !important;
1221
- }
1222
- [data-dnd-dragging] {
1223
- pointer-events: none !important;
1224
- outline: 2px var(--puck-color-azure-09) solid !important;
1225
- outline-offset: -2px !important;
1196
+ ._DraggableComponent--isSelected_1bhad_76 > ._DraggableComponent-actionsOverlay_1bhad_97 > ._DraggableComponent-actions_1bhad_97 {
1197
+ display: flex;
1226
1198
  }
1227
1199
 
1228
1200
  /* css-module:/home/runner/work/puck/puck/packages/core/components/DropZone/styles.module.css/#css-module-data */
1229
- ._DropZone_74ebh_1 {
1230
- --drop-animation-ms: 250ms;
1231
- --resize-animation-ms: 150ms;
1201
+ ._DropZone_djoti_1 {
1202
+ margin-left: auto;
1203
+ margin-right: auto;
1232
1204
  position: relative;
1233
- height: 100%;
1234
- min-height: var(--min-empty-height);
1205
+ min-height: 100%;
1235
1206
  outline-offset: -2px;
1236
1207
  width: 100%;
1237
1208
  }
1238
- ._DropZone--hasChildren_74ebh_12 {
1239
- min-height: 0;
1240
- }
1241
- ._DropZone_74ebh_1:empty {
1242
- min-height: var(--min-empty-height);
1209
+ ._DropZone-content_djoti_10 {
1210
+ min-height: 128px;
1211
+ height: 100%;
1243
1212
  }
1244
- ._DropZone--hasChildren_74ebh_12:not(._DropZone--userIsDragging_74ebh_20) {
1245
- transition: min-height var(--resize-animation-ms) var(--drop-animation-ms) ease-in;
1213
+ ._DropZone--userIsDragging_djoti_15 ._DropZone-content_djoti_10 {
1214
+ pointer-events: all;
1246
1215
  }
1247
- ._DropZone_74ebh_1:empty:not(._DropZone--userIsDragging_74ebh_20) {
1248
- transition: min-height var(--resize-animation-ms) ease-in;
1216
+ ._DropZone--userIsDragging_djoti_15:not(._DropZone--draggingOverArea_djoti_19):not(._DropZone--draggingNewComponent_djoti_20) > ._DropZone-content_djoti_10 {
1217
+ pointer-events: none;
1249
1218
  }
1250
- ._DropZone--isAreaSelected_74ebh_29,
1251
- ._DropZone--hoveringOverArea_74ebh_30:not(._DropZone--isRootZone_74ebh_30) {
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) {
1252
1222
  background: color-mix(in srgb, var(--puck-color-azure-09) 30%, transparent);
1253
1223
  outline: 2px dashed var(--puck-color-azure-08);
1254
1224
  }
1255
- ._DropZone_74ebh_1:empty {
1225
+ ._DropZone_djoti_1:not(._DropZone--hasChildren_djoti_30) {
1256
1226
  background: color-mix(in srgb, var(--puck-color-azure-09) 30%, transparent);
1257
1227
  outline: 2px dashed var(--puck-color-azure-08);
1258
1228
  }
1259
- ._DropZone--isDestination_74ebh_40 {
1229
+ ._DropZone--isDestination_djoti_40 {
1260
1230
  outline: 2px dashed var(--puck-color-azure-04) !important;
1261
1231
  }
1262
- ._DropZone--isDestination_74ebh_40:not(._DropZone--isRootZone_74ebh_30) {
1232
+ ._DropZone--isDestination_djoti_40:not(._DropZone--isRootZone_djoti_29) {
1263
1233
  background: color-mix(in srgb, var(--puck-color-azure-09) 30%, transparent) !important;
1264
1234
  }
1265
- ._DropZone-item_74ebh_52 {
1235
+ ._DropZone-item_djoti_52 {
1266
1236
  position: relative;
1267
1237
  }
1268
- ._DropZone-hitbox_74ebh_56 {
1238
+ ._DropZone-hitbox_djoti_56 {
1269
1239
  position: absolute;
1270
1240
  bottom: -12px;
1271
1241
  height: 24px;
1272
1242
  width: 100%;
1273
1243
  z-index: 1;
1274
1244
  }
1275
- ._DropZone--isEnabled_74ebh_64._DropZone--userIsDragging_74ebh_20 {
1276
- outline: 2px dashed var(--puck-color-azure-06);
1277
- }
1278
- ._DropZone_74ebh_1 > *:not([data-puck-component]) {
1279
- opacity: 0;
1280
- }
1281
1245
 
1282
1246
  /* css-module:/home/runner/work/puck/puck/packages/core/components/SidebarSection/styles.module.css/#css-module-data */
1283
1247
  ._SidebarSection_125qe_1 {
@@ -1632,13 +1596,12 @@ textarea._Input-input_1l5m8_47 {
1632
1596
  }
1633
1597
 
1634
1598
  /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Preview/styles.module.css/#css-module-data */
1635
- ._PuckPreview_z2rgu_1 {
1636
- position: relative;
1599
+ ._PuckPreview_rxwlr_1 {
1637
1600
  height: 100%;
1638
1601
  }
1639
- ._PuckPreview-frame_z2rgu_6 {
1602
+ ._PuckPreview-frame_rxwlr_5 {
1640
1603
  border: none;
1641
- height: 100%;
1604
+ min-height: 100%;
1642
1605
  width: 100%;
1643
1606
  }
1644
1607
 
@@ -1780,7 +1743,7 @@ textarea._Input-input_1l5m8_47 {
1780
1743
  }
1781
1744
 
1782
1745
  /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Canvas/styles.module.css/#css-module-data */
1783
- ._PuckCanvas_18jay_1 {
1746
+ ._PuckCanvas_avf1c_1 {
1784
1747
  background: var(--puck-color-grey-11);
1785
1748
  display: flex;
1786
1749
  grid-area: editor;
@@ -1789,26 +1752,28 @@ textarea._Input-input_1l5m8_47 {
1789
1752
  overflow: auto;
1790
1753
  }
1791
1754
  @media (min-width: 1198px) {
1792
- ._PuckCanvas_18jay_1 {
1755
+ ._PuckCanvas_avf1c_1 {
1793
1756
  padding: calc(var(--puck-space-px) * 1.5);
1794
1757
  padding-top: var(--puck-space-px);
1795
1758
  }
1796
- ._PuckCanvas_18jay_1:not(._PuckCanvas_18jay_1:has(._PuckCanvas-controls_18jay_16)) {
1759
+ ._PuckCanvas_avf1c_1:not(._PuckCanvas_avf1c_1:has(._PuckCanvas-controls_avf1c_16)) {
1797
1760
  padding-top: calc(var(--puck-space-px) * 1.5);
1798
1761
  }
1799
1762
  }
1800
- ._PuckCanvas-inner_18jay_21 {
1763
+ ._PuckCanvas-inner_avf1c_21 {
1764
+ box-sizing: border-box;
1801
1765
  display: flex;
1802
1766
  height: 100%;
1803
1767
  justify-content: center;
1804
1768
  min-width: 358px;
1769
+ overflow: hidden;
1805
1770
  position: relative;
1806
1771
  width: 100%;
1807
1772
  }
1808
- ._PuckCanvas-root_18jay_30 {
1773
+ ._PuckCanvas-root_avf1c_32 {
1809
1774
  background: white;
1810
1775
  border: 1px solid var(--puck-color-grey-09);
1811
- box-sizing: content-box;
1776
+ box-sizing: border-box;
1812
1777
  min-width: 321px;
1813
1778
  position: absolute;
1814
1779
  pointer-events: none;
@@ -1818,20 +1783,20 @@ textarea._Input-input_1l5m8_47 {
1818
1783
  opacity: 0;
1819
1784
  }
1820
1785
  @media (min-width: 1198px) {
1821
- ._PuckCanvas-root_18jay_30 {
1786
+ ._PuckCanvas-root_avf1c_32 {
1822
1787
  min-width: unset;
1823
1788
  }
1824
1789
  }
1825
1790
  @media (prefers-reduced-motion: reduce) {
1826
- ._PuckCanvas-root_18jay_30 {
1791
+ ._PuckCanvas-root_avf1c_32 {
1827
1792
  transition: none !important;
1828
1793
  }
1829
1794
  }
1830
- ._PuckCanvas--ready_18jay_55 ._PuckCanvas-root_18jay_30 {
1795
+ ._PuckCanvas--ready_avf1c_57 ._PuckCanvas-root_avf1c_32 {
1831
1796
  pointer-events: unset;
1832
1797
  opacity: 1;
1833
1798
  }
1834
- ._PuckCanvas-loader_18jay_60 {
1799
+ ._PuckCanvas-loader_avf1c_62 {
1835
1800
  align-items: center;
1836
1801
  color: var(--puck-color-grey-06);
1837
1802
  display: flex;
@@ -1840,10 +1805,10 @@ textarea._Input-input_1l5m8_47 {
1840
1805
  transition: opacity 250ms ease-out;
1841
1806
  opacity: 0;
1842
1807
  }
1843
- ._PuckCanvas--showLoader_18jay_70 ._PuckCanvas-loader_18jay_60 {
1808
+ ._PuckCanvas--showLoader_avf1c_72 ._PuckCanvas-loader_avf1c_62 {
1844
1809
  opacity: 1;
1845
1810
  }
1846
- ._PuckCanvas--showLoader_18jay_70._PuckCanvas--ready_18jay_55 ._PuckCanvas-loader_18jay_60 {
1811
+ ._PuckCanvas--showLoader_avf1c_72._PuckCanvas--ready_avf1c_57 ._PuckCanvas-loader_avf1c_62 {
1847
1812
  opacity: 0;
1848
1813
  height: 0;
1849
1814
  transition: none;
package/dist/index.d.mts CHANGED
@@ -1,10 +1,9 @@
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-ZKVfUAQq.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-ZKVfUAQq.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-C7aAQCY3.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-C7aAQCY3.mjs';
3
3
  import * as react_jsx_runtime from 'react/jsx-runtime';
4
4
  import * as react from 'react';
5
- import { ReactNode, SyntheticEvent, ReactElement } from 'react';
6
- import { UniqueIdentifier } from '@dnd-kit/abstract';
7
- import { Draggable } from '@dnd-kit/dom';
5
+ import { ReactNode, SyntheticEvent, ReactElement, CSSProperties } from 'react';
6
+ import { DragStart, DragUpdate } from '@measured/dnd';
8
7
 
9
8
  declare const ActionBar: {
10
9
  ({ label, children, }: {
@@ -16,9 +15,6 @@ declare const ActionBar: {
16
15
  label?: string;
17
16
  onClick: (e: SyntheticEvent) => void;
18
17
  }) => react_jsx_runtime.JSX.Element;
19
- Label: ({ label }: {
20
- label: string;
21
- }) => react_jsx_runtime.JSX.Element;
22
18
  Group: ({ children }: {
23
19
  children: ReactNode;
24
20
  }) => react_jsx_runtime.JSX.Element;
@@ -31,9 +27,6 @@ declare const Action: ({ children, label, onClick, }: {
31
27
  declare const Group: ({ children }: {
32
28
  children: ReactNode;
33
29
  }) => react_jsx_runtime.JSX.Element;
34
- declare const Label: ({ label }: {
35
- label: string;
36
- }) => react_jsx_runtime.JSX.Element;
37
30
 
38
31
  declare const FieldLabel: ({ children, icon, label, el, readOnly, className, }: {
39
32
  children?: ReactNode;
@@ -62,7 +55,7 @@ declare const Button: ({ children, href, onClick, variant, type, disabled, tabIn
62
55
  }) => react_jsx_runtime.JSX.Element;
63
56
 
64
57
  declare const Drawer: {
65
- ({ children, droppableId, direction, }: {
58
+ ({ children, droppableId: _droppableId, direction, }: {
66
59
  children: ReactNode;
67
60
  droppableId?: string;
68
61
  direction?: "vertical" | "horizontal";
@@ -75,7 +68,7 @@ declare const Drawer: {
75
68
  }) => ReactElement;
76
69
  id?: string;
77
70
  label?: string;
78
- index?: number;
71
+ index: number;
79
72
  isDragDisabled?: boolean;
80
73
  }) => react_jsx_runtime.JSX.Element;
81
74
  };
@@ -92,9 +85,12 @@ type DropZoneContext<UserConfig extends Config = Config> = {
92
85
  setItemSelector?: (newIndex: ItemSelector | null) => void;
93
86
  dispatch?: (action: PuckAction) => void;
94
87
  areaId?: string;
95
- zoneCompound?: string;
96
- index?: number;
97
- draggedItem?: Draggable | null;
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;
98
94
  hoveringComponent?: string | null;
99
95
  setHoveringComponent?: (id: string | null) => void;
100
96
  registerZoneArea?: (areaId: string) => void;
@@ -105,13 +101,8 @@ type DropZoneContext<UserConfig extends Config = Config> = {
105
101
  pathData?: PathData;
106
102
  registerPath?: (selector: ItemSelector) => void;
107
103
  mode?: "edit" | "render";
108
- depth: number;
109
- registerLocalZone?: (zone: string, active: boolean) => void;
110
- deepestZone?: string | null;
111
- deepestArea?: string | null;
112
- nextDeepestZone?: string | null;
113
- nextDeepestArea?: string | null;
114
- path: string[];
104
+ zoneWillDrag?: string;
105
+ setZoneWillDrag?: (zone: string) => void;
115
106
  } | null;
116
107
  declare const dropZoneContext: react.Context<DropZoneContext<Config>>;
117
108
  declare const DropZoneProvider: ({ children, value, }: {
@@ -119,12 +110,6 @@ declare const DropZoneProvider: ({ children, value, }: {
119
110
  value: DropZoneContext;
120
111
  }) => react_jsx_runtime.JSX.Element;
121
112
 
122
- type DropZoneDndData = {
123
- areaId?: string;
124
- depth: number;
125
- path: UniqueIdentifier[];
126
- isDroppableTarget: boolean;
127
- };
128
113
  declare function DropZone(props: DropZoneProps): react_jsx_runtime.JSX.Element;
129
114
 
130
115
  declare const IconButton: ({ children, href, onClick, variant, type, disabled, tabIndex, newTab, fullWidth, title, }: {
@@ -239,4 +224,4 @@ declare const usePuck: <UserConfig extends Config = Config>() => {
239
224
  selectedItem: ComponentDataMap<ExtractPropsFromConfig<UserConfig>> | null;
240
225
  };
241
226
 
242
- 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, Label, OnAction, Overrides, Permissions, Plugin, Puck, PuckAction, Render, UiState, UserGenerics, Viewports, dropZoneContext, migrate, transformProps, usePuck };
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 };