@measured/puck 0.14.0-canary.55740c4 → 0.14.0-canary.70cf177

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.
Files changed (6) hide show
  1. package/dist/{Config-1444273f.d.ts → Config-29dc2731.d.ts} +27 -3
  2. package/dist/index.css +879 -562
  3. package/dist/index.d.ts +39 -8
  4. package/dist/index.js +1303 -595
  5. package/dist/rsc.d.ts +1 -1
  6. package/package.json +4 -2
package/dist/index.css CHANGED
@@ -2,78 +2,78 @@
2
2
 
3
3
  /* styles/color.css */
4
4
  :root {
5
- --puck-color-neutral-0: #fafafa;
6
- --puck-color-neutral-1: #f3f3f3;
7
- --puck-color-neutral-2: #e7e5e5;
8
- --puck-color-neutral-3: #9e9e9e;
9
- --puck-color-neutral-4: #2d2d2d;
10
- --puck-color-neutral-blue: #10131c;
11
- --puck-color-blue: var(--puck-color-azure-3);
12
- --puck-color-rose: var(--puck-color-rose-3);
13
- --puck-color-red: var(--puck-color-red-3);
14
- --puck-color-rose-0: #4a001c;
15
- --puck-color-rose-1: #670833;
16
- --puck-color-rose-2: #87114c;
17
- --puck-color-rose-3: #a81a66;
18
- --puck-color-rose-4: #bc5089;
19
- --puck-color-rose-5: #cc7ca5;
20
- --puck-color-rose-6: #d89aba;
21
- --puck-color-rose-7: #e3b8cf;
22
- --puck-color-rose-8: #efd6e3;
23
- --puck-color-rose-9: #faf4f8;
24
- --puck-color-azure-0: #00175d;
25
- --puck-color-azure-1: #002c77;
26
- --puck-color-azure-2: #014292;
27
- --puck-color-azure-3: #0158ad;
28
- --puck-color-azure-4: #3479be;
29
- --puck-color-azure-5: #6499cf;
30
- --puck-color-azure-6: #88b0da;
31
- --puck-color-azure-7: #abc7e5;
32
- --puck-color-azure-8: #cfdff0;
33
- --puck-color-azure-85: #e1eaf6;
34
- --puck-color-azure-9: #f3f6fb;
35
- --puck-color-green-0: #002000;
36
- --puck-color-green-1: #043604;
37
- --puck-color-green-2: #084e08;
38
- --puck-color-green-3: #0c680c;
39
- --puck-color-green-4: #1d882f;
40
- --puck-color-green-5: #2faa53;
41
- --puck-color-green-6: #56c16f;
42
- --puck-color-green-7: #7dd78b;
43
- --puck-color-green-8: #b8e8bf;
44
- --puck-color-green-9: #eff8f0;
45
- --puck-color-yellow-0: #211000;
46
- --puck-color-yellow-1: #362700;
47
- --puck-color-yellow-2: #4c4000;
48
- --puck-color-yellow-3: #645a00;
49
- --puck-color-yellow-4: #877614;
50
- --puck-color-yellow-5: #ab9429;
51
- --puck-color-yellow-6: #bfac4e;
52
- --puck-color-yellow-7: #d4c474;
53
- --puck-color-yellow-8: #e6deb1;
54
- --puck-color-yellow-9: #f9f7ed;
55
- --puck-color-red-0: #4c0000;
56
- --puck-color-red-1: #6a0a10;
57
- --puck-color-red-2: #8a1422;
58
- --puck-color-red-3: #ac1f35;
59
- --puck-color-red-4: #bf5366;
60
- --puck-color-red-5: #ce7e8e;
61
- --puck-color-red-6: #d99ca8;
62
- --puck-color-red-7: #e4b9c2;
63
- --puck-color-red-8: #efd7db;
64
- --puck-color-red-9: #faf4f5;
65
- --puck-color-grey-0: #111111;
66
- --puck-color-grey-1: #282828;
67
- --puck-color-grey-2: #404040;
68
- --puck-color-grey-3: #5a5a5a;
69
- --puck-color-grey-4: #767676;
70
- --puck-color-grey-5: #949494;
71
- --puck-color-grey-6: #ababab;
72
- --puck-color-grey-7: #c3c3c3;
73
- --puck-color-grey-8: #dcdcdc;
74
- --puck-color-grey-9: #efefef;
75
- --puck-color-grey-10: #f5f5f5;
76
- --puck-color-grey-11: #fafafa;
5
+ --puck-color-rose-01: #4a001c;
6
+ --puck-color-rose-02: #670833;
7
+ --puck-color-rose-03: #87114c;
8
+ --puck-color-rose-04: #a81a66;
9
+ --puck-color-rose-05: #bc5089;
10
+ --puck-color-rose-06: #cc7ca5;
11
+ --puck-color-rose-07: #d89aba;
12
+ --puck-color-rose-08: #e3b8cf;
13
+ --puck-color-rose-09: #efd6e3;
14
+ --puck-color-rose-10: #f6eaf1;
15
+ --puck-color-rose-11: #faf4f8;
16
+ --puck-color-rose-12: #fef8fc;
17
+ --puck-color-azure-01: #00175d;
18
+ --puck-color-azure-02: #002c77;
19
+ --puck-color-azure-03: #014292;
20
+ --puck-color-azure-04: #0158ad;
21
+ --puck-color-azure-05: #3479be;
22
+ --puck-color-azure-06: #6499cf;
23
+ --puck-color-azure-07: #88b0da;
24
+ --puck-color-azure-08: #abc7e5;
25
+ --puck-color-azure-09: #cfdff0;
26
+ --puck-color-azure-10: #e7eef7;
27
+ --puck-color-azure-11: #f3f6fb;
28
+ --puck-color-azure-12: #f7faff;
29
+ --puck-color-green-01: #002000;
30
+ --puck-color-green-02: #043604;
31
+ --puck-color-green-03: #084e08;
32
+ --puck-color-green-04: #0c680c;
33
+ --puck-color-green-05: #1d882f;
34
+ --puck-color-green-06: #2faa53;
35
+ --puck-color-green-07: #56c16f;
36
+ --puck-color-green-08: #7dd78b;
37
+ --puck-color-green-09: #b8e8bf;
38
+ --puck-color-green-10: #ddf3e0;
39
+ --puck-color-green-11: #eff8f0;
40
+ --puck-color-green-12: #f3fcf4;
41
+ --puck-color-yellow-01: #211000;
42
+ --puck-color-yellow-02: #362700;
43
+ --puck-color-yellow-03: #4c4000;
44
+ --puck-color-yellow-04: #645a00;
45
+ --puck-color-yellow-05: #877614;
46
+ --puck-color-yellow-06: #ab9429;
47
+ --puck-color-yellow-07: #bfac4e;
48
+ --puck-color-yellow-08: #d4c474;
49
+ --puck-color-yellow-09: #e6deb1;
50
+ --puck-color-yellow-10: #f3efd9;
51
+ --puck-color-yellow-11: #f9f7ed;
52
+ --puck-color-yellow-12: #fcfaf0;
53
+ --puck-color-red-01: #4c0000;
54
+ --puck-color-red-02: #6a0a10;
55
+ --puck-color-red-03: #8a1422;
56
+ --puck-color-red-04: #ac1f35;
57
+ --puck-color-red-05: #bf5366;
58
+ --puck-color-red-06: #ce7e8e;
59
+ --puck-color-red-07: #d99ca8;
60
+ --puck-color-red-08: #e4b9c2;
61
+ --puck-color-red-09: #efd7db;
62
+ --puck-color-red-10: #f6eaec;
63
+ --puck-color-red-11: #faf4f5;
64
+ --puck-color-red-12: #fff9fa;
65
+ --puck-color-grey-01: #181818;
66
+ --puck-color-grey-02: #292929;
67
+ --puck-color-grey-03: #404040;
68
+ --puck-color-grey-04: #5a5a5a;
69
+ --puck-color-grey-05: #767676;
70
+ --puck-color-grey-06: #949494;
71
+ --puck-color-grey-07: #ababab;
72
+ --puck-color-grey-08: #c3c3c3;
73
+ --puck-color-grey-09: #dcdcdc;
74
+ --puck-color-grey-10: #efefef;
75
+ --puck-color-grey-11: #f5f5f5;
76
+ --puck-color-grey-12: #fafafa;
77
77
  --puck-color-black: #000000;
78
78
  --puck-color-white: #ffffff;
79
79
  }
@@ -109,18 +109,7 @@
109
109
  --line-height-l: calc( var(--space-m-unitless) / var(--puck-font-size-xxs-unitless) );
110
110
  --line-height-xl: calc( var(--space-m-unitless) / var(--puck-font-size-scale-base-unitless) );
111
111
  --line-height-base: var(--line-height-m);
112
- --puck-font-stack:
113
- Inter,
114
- -apple-system,
115
- BlinkMacSystemFont,
116
- Segoe UI,
117
- Helvetica Neue,
118
- sans-serif,
119
- Apple Color Emoji,
120
- Segoe UI Emoji,
121
- Segoe UI Symbol;
122
- --puck-font-stack-variable:
123
- "Inter var",
112
+ --fallback-font-stack:
124
113
  -apple-system,
125
114
  BlinkMacSystemFont,
126
115
  Segoe UI,
@@ -129,6 +118,7 @@
129
118
  Apple Color Emoji,
130
119
  Segoe UI Emoji,
131
120
  Segoe UI Symbol;
121
+ --puck-font-family: Inter, var(--fallback-font-stack);
132
122
  --puck-font-family-monospaced:
133
123
  ui-monospace,
134
124
  "Cascadia Code",
@@ -137,156 +127,198 @@
137
127
  Consolas,
138
128
  "DejaVu Sans Mono",
139
129
  monospace;
140
- --puck-font-family-proportional: var(--puck-font-stack), sans-serif;
130
+ }
131
+ @supports (font-variation-settings: normal) {
132
+ :root {
133
+ --puck-font-family: InterVariable, var(--fallback-font-stack);
134
+ }
141
135
  }
142
136
 
143
- /* styles/global.css */
137
+ /* styles.css */
144
138
 
145
139
  /* css-module:/home/runner/work/puck/puck/packages/core/components/Button/Button.module.css/#css-module-data */
146
- ._Button_1brfa_1 {
140
+ ._Button_8fn3a_1 {
147
141
  appearance: none;
148
142
  background: none;
149
- border: none;
143
+ border: 1px solid transparent;
150
144
  border-radius: 4px;
151
- color: white;
145
+ color: var(--puck-color-white);
152
146
  display: inline-flex;
153
147
  align-items: center;
154
148
  gap: 8px;
155
149
  letter-spacing: 0.05ch;
156
- font-family: var(--puck-font-family-proportional);
150
+ font-family: var(--puck-font-family);
157
151
  font-size: 14px;
158
152
  font-weight: 400;
153
+ box-sizing: border-box;
159
154
  line-height: 1;
160
155
  text-align: center;
161
156
  text-decoration: none;
157
+ transition: background-color 50ms ease-in;
162
158
  cursor: pointer;
163
159
  white-space: nowrap;
164
160
  margin: 0;
165
161
  }
166
- ._Button--medium_1brfa_22 {
167
- padding-bottom: 8px;
168
- padding-left: 20px;
169
- padding-right: 20px;
170
- padding-top: 8px;
162
+ ._Button_8fn3a_1:hover,
163
+ ._Button_8fn3a_1:active {
164
+ transition: none;
171
165
  }
172
- ._Button--large_1brfa_29 {
173
- padding-bottom: 12px;
174
- padding-left: 20px;
175
- padding-right: 20px;
176
- padding-top: 12px;
166
+ ._Button--medium_8fn3a_29 {
167
+ min-height: 34px;
168
+ padding-bottom: 7px;
169
+ padding-left: 19px;
170
+ padding-right: 19px;
171
+ padding-top: 7px;
172
+ }
173
+ ._Button--large_8fn3a_37 {
174
+ padding-bottom: 11px;
175
+ padding-left: 19px;
176
+ padding-right: 19px;
177
+ padding-top: 11px;
177
178
  }
178
- ._Button-icon_1brfa_36 {
179
+ ._Button-icon_8fn3a_44 {
179
180
  margin-top: 2px;
180
181
  }
181
- ._Button_1brfa_1:hover {
182
- text-decoration: none;
182
+ ._Button--primary_8fn3a_48 {
183
+ background: var(--puck-color-azure-04);
184
+ }
185
+ ._Button_8fn3a_1:focus-visible {
186
+ outline: 2px solid var(--puck-color-azure-05);
187
+ outline-offset: 2px;
183
188
  }
184
- ._Button--primary_1brfa_44 {
185
- background: var(--puck-color-blue);
189
+ @media (hover: hover) and (pointer: fine) {
190
+ ._Button--primary_8fn3a_48:hover {
191
+ background-color: var(--puck-color-azure-03);
192
+ }
186
193
  }
187
- ._Button--primary_1brfa_44:hover {
188
- opacity: 0.7;
189
- transition: opacity 50ms ease-in;
194
+ ._Button--primary_8fn3a_48:active {
195
+ background-color: var(--puck-color-azure-02);
190
196
  }
191
- ._Button--secondary_1brfa_53 {
192
- color: currentColor;
193
- border: 1px solid currentColor;
197
+ ._Button--secondary_8fn3a_67 {
198
+ border: 1px solid var(--puck-color-grey-01);
199
+ color: var(--puck-color-black);
200
+ }
201
+ @media (hover: hover) and (pointer: fine) {
202
+ ._Button--secondary_8fn3a_67:hover {
203
+ background-color: var(--puck-color-azure-12);
204
+ }
194
205
  }
195
- ._Button--secondary_1brfa_53:hover {
196
- background-color: var(--puck-color-grey-10);
197
- color: black;
198
- opacity: 0.7;
206
+ ._Button--secondary_8fn3a_67:active {
207
+ background-color: var(--puck-color-azure-11);
199
208
  }
200
- ._Button--flush_1brfa_64 {
209
+ ._Button--flush_8fn3a_82 {
201
210
  border-radius: 0;
202
211
  }
203
- ._Button--disabled_1brfa_68 {
204
- background: var(--puck-color-grey-10);
205
- color: black;
212
+ ._Button--disabled_8fn3a_86,
213
+ ._Button--disabled_8fn3a_86:hover {
214
+ background-color: var(--puck-color-grey-07);
215
+ color: var(--puck-color-grey-03);
206
216
  cursor: not-allowed;
207
217
  }
208
- ._Button--disabled_1brfa_68:hover {
209
- opacity: 1;
210
- }
211
- ._Button--fullWidth_1brfa_78 {
218
+ ._Button--fullWidth_8fn3a_93 {
219
+ justify-content: center;
212
220
  width: 100%;
213
221
  }
222
+ ._Button-spinner_8fn3a_98 {
223
+ padding-left: 8px;
224
+ }
214
225
 
215
226
  /* css-module:/home/runner/work/puck/puck/packages/core/components/Drawer/styles.module.css/#css-module-data */
216
- ._DrawerItem_1qydx_1:last-of-type ._DrawerItem-default_1qydx_1 ._DrawerItem-draggableWrapper_1qydx_1 {
217
- padding-bottom: 0px;
227
+ ._Drawer_6zh0b_1 {
228
+ font-family: var(--puck-font-family);
218
229
  }
219
- ._DrawerItem-default_1qydx_1 ._DrawerItem-draggableWrapper_1qydx_1 {
230
+ ._DrawerItem-default_6zh0b_5 ._DrawerItem-draggableWrapper_6zh0b_5 {
220
231
  padding-bottom: 12px;
221
232
  }
222
- ._DrawerItem-draggable_1qydx_1 {
223
- background: white;
233
+ ._DrawerItem_6zh0b_5:last-of-type ._DrawerItem-default_6zh0b_5 ._DrawerItem-draggableWrapper_6zh0b_5 {
234
+ padding-bottom: 0;
235
+ }
236
+ ._DrawerItem-draggable_6zh0b_5 {
237
+ background: var(--puck-color-white);
224
238
  padding: 12px;
225
239
  display: flex;
226
- border: 1px var(--puck-color-grey-8) solid;
240
+ border: 1px var(--puck-color-grey-09) solid;
227
241
  border-radius: 4px;
228
242
  font-size: var(--puck-font-size-xxs);
229
243
  justify-content: space-between;
230
244
  align-items: center;
231
245
  cursor: grab;
246
+ transition: background-color 50ms ease-in, color 50ms ease-in;
232
247
  }
233
- ._Drawer_1qydx_1:not(._Drawer--isDraggingFrom_1qydx_21) ._DrawerItem-draggable_1qydx_1:hover {
234
- background-color: var(--puck-color-azure-9);
235
- color: var(--puck-color-azure-4);
248
+ ._DrawerItem_6zh0b_5:focus-visible {
249
+ outline: 0;
236
250
  }
237
- ._DrawerItem-name_1qydx_26 {
251
+ ._Drawer_6zh0b_1:not(._Drawer--isDraggingFrom_6zh0b_31) ._DrawerItem_6zh0b_5:focus-visible ._DrawerItem-draggable_6zh0b_5 {
252
+ border-radius: 4px;
253
+ outline: 2px solid var(--puck-color-azure-05);
254
+ outline-offset: 2px;
255
+ }
256
+ @media (hover: hover) and (pointer: fine) {
257
+ ._Drawer_6zh0b_1:not(._Drawer--isDraggingFrom_6zh0b_31) ._DrawerItem-draggable_6zh0b_5:hover {
258
+ background-color: var(--puck-color-azure-12);
259
+ color: var(--puck-color-azure-04);
260
+ transition: none;
261
+ }
262
+ }
263
+ ._DrawerItem-name_6zh0b_47 {
238
264
  overflow-x: hidden;
239
265
  text-overflow: ellipsis;
240
266
  white-space: nowrap;
241
267
  }
242
268
 
243
269
  /* css-module:/home/runner/work/puck/puck/packages/core/components/DragIcon/styles.module.css/#css-module-data */
244
- ._DragIcon_o29on_1 {
245
- color: var(--puck-color-grey-4);
270
+ ._DragIcon_1p5wn_1 {
271
+ color: var(--puck-color-grey-05);
272
+ cursor: grab;
246
273
  padding: 4px;
247
274
  border-radius: 4px;
248
275
  }
249
- ._DragIcon_o29on_1:hover {
250
- cursor: grab;
251
- background: var(--puck-color-grey-9);
276
+ @media (hover: hover) and (pointer: fine) {
277
+ ._DragIcon_1p5wn_1:hover {
278
+ color: var(--puck-color-azure-05);
279
+ background-color: var(--puck-color-azure-12);
280
+ }
252
281
  }
253
282
 
254
283
  /* css-module:/home/runner/work/puck/puck/packages/core/components/DraggableComponent/styles.module.css/#css-module-data */
255
- ._DraggableComponent_foluk_1 {
256
- outline-offset: 0px !important;
284
+ ._DraggableComponent_175tf_1 {
257
285
  pointer-events: auto;
286
+ --overlay-background: color-mix( in srgb, var(--puck-color-azure-08) 30%, transparent );
258
287
  }
259
- ._DraggableComponent--isDragging_foluk_6 {
260
- background: #abc7e510;
261
- outline: 2px var(--puck-color-azure-8) solid !important;
288
+ ._DraggableComponent--isDragging_175tf_11 {
289
+ background: color-mix(in srgb, var(--puck-color-azure-08) 10%, transparent);
262
290
  overflow: hidden;
263
291
  }
264
- ._DraggableComponent-contents_foluk_12 {
292
+ ._DraggableComponent-contents_175tf_16 {
265
293
  position: relative;
266
294
  pointer-events: none;
267
295
  z-index: 0;
268
296
  }
269
- ._DraggableComponent-contents_foluk_12::before,
270
- ._DraggableComponent-contents_foluk_12::after {
297
+ ._DraggableComponent-contents_175tf_16::before,
298
+ ._DraggableComponent-contents_175tf_16::after {
271
299
  content: " ";
272
300
  display: table;
273
301
  }
274
- ._DraggableComponent-overlay_foluk_25 {
275
- display: none;
276
- background: #abc7e530;
302
+ ._DraggableComponent-overlay_175tf_29 {
277
303
  cursor: pointer;
278
304
  height: 100%;
279
305
  width: 100%;
280
306
  top: 0;
307
+ outline-offset: -2px;
281
308
  position: absolute;
282
- z-index: 0;
283
- font-family: var(--puck-font-stack);
284
309
  pointer-events: none;
285
310
  box-sizing: border-box;
311
+ z-index: 1;
312
+ }
313
+ ._DraggableComponent_175tf_1:focus-visible ._DraggableComponent-overlay_175tf_29 {
314
+ outline: 1px solid var(--puck-color-azure-05);
286
315
  }
287
- ._DraggableComponent-loadingOverlay_foluk_39 {
316
+ ._DraggableComponent--isDragging_175tf_11 ._DraggableComponent-overlay_175tf_29 {
317
+ outline: 1px var(--puck-color-azure-09) solid !important;
318
+ }
319
+ ._DraggableComponent-loadingOverlay_175tf_49 {
288
320
  background: var(--puck-color-white);
289
- color: var(--puck-color-grey-2);
321
+ color: var(--puck-color-grey-03);
290
322
  border-radius: 4px;
291
323
  display: flex;
292
324
  padding: 8px;
@@ -299,56 +331,53 @@
299
331
  opacity: 0.8;
300
332
  z-index: 1;
301
333
  }
302
- ._DraggableComponent_foluk_1:hover:not(._DraggableComponent--isLocked_foluk_55) > ._DraggableComponent-overlay_foluk_25 {
303
- display: block;
334
+ ._DraggableComponent_175tf_1:hover:not(._DraggableComponent--isLocked_175tf_65) > ._DraggableComponent-overlay_175tf_29 {
335
+ background: var(--overlay-background);
304
336
  pointer-events: none;
305
337
  }
306
- ._DraggableComponent--forceHover_foluk_61 > ._DraggableComponent-overlay_foluk_25 {
307
- display: block;
338
+ ._DraggableComponent--forceHover_175tf_71 > ._DraggableComponent-overlay_175tf_29 {
339
+ background: var(--overlay-background);
308
340
  pointer-events: none;
309
341
  }
310
- ._DraggableComponent_foluk_1:not(._DraggableComponent--isSelected_foluk_66) > ._DraggableComponent-overlay_foluk_25 {
311
- outline: 2px var(--puck-color-azure-8) solid !important;
342
+ ._DraggableComponent_175tf_1:not(._DraggableComponent--isSelected_175tf_76):hover > ._DraggableComponent-overlay_175tf_29 {
343
+ outline: 2px var(--puck-color-azure-09) solid !important;
312
344
  }
313
- ._DraggableComponent--indicativeHover_foluk_71 > ._DraggableComponent-overlay_foluk_25 {
314
- display: block;
315
- background: transparent;
345
+ ._DraggableComponent--indicativeHover_175tf_81 > ._DraggableComponent-overlay_175tf_29 {
316
346
  pointer-events: none;
317
347
  }
318
- ._DraggableComponent_foluk_1:not(._DraggableComponent--isSelected_foluk_66):has(._DraggableComponent_foluk_1:hover > ._DraggableComponent-overlay_foluk_25) > ._DraggableComponent-overlay_foluk_25 {
348
+ ._DraggableComponent_175tf_1:not(._DraggableComponent--isSelected_175tf_76):has(._DraggableComponent_175tf_1:hover > ._DraggableComponent-overlay_175tf_29) > ._DraggableComponent-overlay_175tf_29 {
319
349
  display: none;
320
350
  }
321
- ._DraggableComponent--isSelected_foluk_66 {
322
- outline: 2px var(--puck-color-azure-6) solid !important;
351
+ ._DraggableComponent--isSelected_175tf_76 ._DraggableComponent-overlay_175tf_29 {
352
+ outline: 2px var(--puck-color-azure-07) solid !important;
323
353
  }
324
- ._DraggableComponent--isSelected_foluk_66 > ._DraggableComponent-overlay_foluk_25 {
325
- background: none;
354
+ ._DraggableComponent--isSelected_175tf_76 > ._DraggableComponent-actionsOverlay_175tf_97 {
326
355
  display: block;
327
356
  position: sticky;
328
- top: 56px;
329
- z-index: 1;
357
+ z-index: 2;
330
358
  }
331
- ._DraggableComponent-actions_foluk_97 {
359
+ ._DraggableComponent-actions_175tf_97 {
332
360
  position: absolute;
333
- right: 6.5px;
334
361
  width: auto;
335
- top: -48px;
336
362
  padding: 4px;
337
363
  border-top-left-radius: 8px;
338
364
  border-top-right-radius: 8px;
339
365
  border-radius: 8px;
340
- background: var(--puck-color-grey-0);
341
- color: white;
366
+ background: var(--puck-color-grey-01);
367
+ color: var(--puck-color-white);
368
+ cursor: grab;
342
369
  display: none;
370
+ font-family: var(--puck-font-family);
343
371
  gap: 4px;
344
372
  pointer-events: auto;
345
373
  box-sizing: border-box;
374
+ transform-origin: right top;
346
375
  }
347
- ._DraggableComponent--isSelected_foluk_66 > ._DraggableComponent-overlay_foluk_25 > ._DraggableComponent-actions_foluk_97 {
376
+ ._DraggableComponent--isSelected_175tf_76 > ._DraggableComponent-actionsOverlay_175tf_97 > ._DraggableComponent-actions_175tf_97 {
348
377
  display: flex;
349
378
  }
350
- ._DraggableComponent-actionsLabel_foluk_120 {
351
- color: var(--puck-color-grey-7);
379
+ ._DraggableComponent-actionsLabel_175tf_127 {
380
+ color: var(--puck-color-grey-08);
352
381
  display: flex;
353
382
  font-size: var(--puck-font-size-xxxs);
354
383
  font-weight: 500;
@@ -357,26 +386,40 @@
357
386
  padding-left: 8px;
358
387
  padding-right: 16px;
359
388
  margin-right: 8px;
360
- border-right: 1px solid var(--puck-color-grey-4);
389
+ border-right: 0.5px solid var(--puck-color-grey-05);
361
390
  text-overflow: ellipsis;
362
391
  white-space: nowrap;
363
392
  }
364
- ._DraggableComponent-action_foluk_97 {
393
+ ._DraggableComponent-action_175tf_97 {
365
394
  background: transparent;
366
395
  border: none;
367
- color: var(--puck-color-grey-7);
396
+ color: var(--puck-color-grey-08);
397
+ cursor: pointer;
368
398
  padding: 6px 8px;
369
399
  border-radius: 4px;
370
400
  overflow: hidden;
401
+ display: flex;
402
+ align-items: center;
403
+ justify-content: center;
404
+ transition: color 50ms ease-in;
371
405
  }
372
- ._DraggableComponent-action_foluk_97:hover {
373
- background: var(--puck-color-grey-2);
374
- color: var(--puck-color-azure-5);
375
- cursor: pointer;
406
+ ._DraggableComponent-action_175tf_97:focus-visible {
407
+ outline: 2px solid var(--puck-color-azure-05);
408
+ outline-offset: -2px;
409
+ }
410
+ @media (hover: hover) and (pointer: fine) {
411
+ ._DraggableComponent-action_175tf_97:hover {
412
+ color: var(--puck-color-azure-06);
413
+ transition: none;
414
+ }
415
+ }
416
+ ._DraggableComponent-action_175tf_97:active {
417
+ color: var(--puck-color-azure-07);
418
+ transition: none;
376
419
  }
377
420
 
378
421
  /* css-module:/home/runner/work/puck/puck/packages/core/components/DropZone/styles.module.css/#css-module-data */
379
- ._DropZone_i675d_1 {
422
+ ._DropZone_jtf9d_1 {
380
423
  margin-left: auto;
381
424
  margin-right: auto;
382
425
  position: relative;
@@ -384,42 +427,36 @@
384
427
  outline-offset: -1px;
385
428
  width: 100%;
386
429
  }
387
- ._DropZone--zoomEnabled_i675d_10 {
388
- zoom: 1.33;
389
- }
390
- ._DropZone--zoomEnabled_i675d_10 ._DropZone-renderWrapper_i675d_14 {
391
- zoom: 0.75;
392
- }
393
- ._DropZone-content_i675d_18 {
430
+ ._DropZone-content_jtf9d_10 {
394
431
  min-height: 128px;
395
432
  height: 100%;
396
433
  }
397
- ._DropZone--userIsDragging_i675d_23 ._DropZone-content_i675d_18 {
434
+ ._DropZone--userIsDragging_jtf9d_15 ._DropZone-content_jtf9d_10 {
398
435
  pointer-events: all;
399
436
  }
400
- ._DropZone--userIsDragging_i675d_23:not(._DropZone--draggingOverArea_i675d_27):not(._DropZone--draggingNewComponent_i675d_28) > ._DropZone-content_i675d_18 {
437
+ ._DropZone--userIsDragging_jtf9d_15:not(._DropZone--draggingOverArea_jtf9d_19):not(._DropZone--draggingNewComponent_jtf9d_20) > ._DropZone-content_jtf9d_10 {
401
438
  pointer-events: none;
402
439
  }
403
- ._DropZone--isAreaSelected_i675d_34,
404
- ._DropZone--draggingOverArea_i675d_27:not(:has(._DropZone--hoveringOverArea_i675d_35)),
405
- ._DropZone--hoveringOverArea_i675d_35:not(._DropZone--isDisabled_i675d_36):not(._DropZone--isRootZone_i675d_37) {
406
- background: var(--puck-color-azure-9);
407
- outline: 2px dashed var(--puck-color-azure-7);
440
+ ._DropZone--isAreaSelected_jtf9d_26,
441
+ ._DropZone--draggingOverArea_jtf9d_19:not(:has(._DropZone--hoveringOverArea_jtf9d_27)),
442
+ ._DropZone--hoveringOverArea_jtf9d_27:not(._DropZone--isDisabled_jtf9d_28):not(._DropZone--isRootZone_jtf9d_29):not(._DropZone--hasChildren_jtf9d_30) {
443
+ background: color-mix(in srgb, var(--puck-color-azure-09) 30%, transparent);
444
+ outline: 2px dashed var(--puck-color-azure-08);
408
445
  }
409
- ._DropZone_i675d_1:not(._DropZone--hasChildren_i675d_43) {
410
- background: var(--puck-color-azure-9);
411
- outline: 2px dashed var(--puck-color-azure-7);
446
+ ._DropZone_jtf9d_1:not(._DropZone--hasChildren_jtf9d_30) {
447
+ background: color-mix(in srgb, var(--puck-color-azure-09) 30%, transparent);
448
+ outline: 2px dashed var(--puck-color-azure-08);
412
449
  }
413
- ._DropZone--isDestination_i675d_48 {
414
- outline: 2px dashed var(--puck-color-azure-3) !important;
450
+ ._DropZone--isDestination_jtf9d_40 {
451
+ outline: 2px dashed var(--puck-color-azure-04) !important;
415
452
  }
416
- ._DropZone--isDestination_i675d_48:not(._DropZone--isRootZone_i675d_37) {
417
- background: var(--puck-color-azure-85) !important;
453
+ ._DropZone--isDestination_jtf9d_40:not(._DropZone--isRootZone_jtf9d_29) {
454
+ background: var(--puck-color-azure-10) !important;
418
455
  }
419
- ._DropZone-item_i675d_56 {
456
+ ._DropZone-item_jtf9d_48 {
420
457
  position: relative;
421
458
  }
422
- ._DropZone-hitbox_i675d_60 {
459
+ ._DropZone-hitbox_jtf9d_52 {
423
460
  position: absolute;
424
461
  bottom: -12px;
425
462
  height: 24px;
@@ -428,22 +465,35 @@
428
465
  }
429
466
 
430
467
  /* css-module:/home/runner/work/puck/puck/packages/core/components/IconButton/IconButton.module.css/#css-module-data */
431
- ._IconButton_38xdr_1 {
468
+ ._IconButton_swpni_1 {
432
469
  align-items: center;
433
470
  background: transparent;
434
471
  border: none;
435
472
  border-radius: 4px;
436
473
  color: currentColor;
437
474
  display: flex;
475
+ font-family: var(--puck-font-family);
438
476
  justify-content: center;
439
477
  padding: 4px;
478
+ transition: background-color 50ms ease-in, color 50ms ease-in;
479
+ }
480
+ ._IconButton_swpni_1:focus-visible {
481
+ outline: 2px solid var(--puck-color-azure-05);
482
+ outline-offset: -2px;
483
+ }
484
+ @media (hover: hover) and (pointer: fine) {
485
+ ._IconButton_swpni_1:hover:not(._IconButton--disabled_swpni_20) {
486
+ background: var(--puck-color-azure-12);
487
+ color: var(--puck-color-azure-04);
488
+ cursor: pointer;
489
+ transition: none;
490
+ }
440
491
  }
441
- ._IconButton_38xdr_1:hover {
442
- background: var(--puck-color-grey-9);
443
- color: var(--puck-color-blue);
444
- cursor: pointer;
492
+ ._IconButton_swpni_1:active {
493
+ background: var(--puck-color-azure-11);
494
+ transition: none;
445
495
  }
446
- ._IconButton-title_38xdr_18 {
496
+ ._IconButton-title_swpni_33 {
447
497
  clip: rect(0 0 0 0);
448
498
  clip-path: inset(100%);
449
499
  height: 1px;
@@ -452,64 +502,83 @@
452
502
  white-space: nowrap;
453
503
  width: 1px;
454
504
  }
505
+ ._IconButton--disabled_swpni_20 {
506
+ color: var(--puck-color-grey-07);
507
+ }
455
508
 
456
509
  /* css-module:/home/runner/work/puck/puck/packages/core/components/SidebarSection/styles.module.css/#css-module-data */
457
- ._SidebarSection_170gs_1 {
510
+ ._SidebarSection_125qe_1 {
458
511
  display: flex;
459
512
  position: relative;
460
513
  flex-direction: column;
461
- color: black;
514
+ color: var(--puck-color-black);
462
515
  }
463
- ._SidebarSection_170gs_1:last-of-type {
516
+ ._SidebarSection_125qe_1:last-of-type {
464
517
  flex-grow: 1;
465
518
  }
466
- ._SidebarSection-title_170gs_12 {
467
- background: white;
519
+ ._SidebarSection-title_125qe_12 {
520
+ background: var(--puck-color-white);
468
521
  padding: 16px;
469
- border-bottom: 1px solid var(--puck-color-grey-8);
470
- border-top: 1px solid var(--puck-color-grey-8);
522
+ border-bottom: 1px solid var(--puck-color-grey-09);
523
+ border-top: 1px solid var(--puck-color-grey-09);
471
524
  overflow-x: auto;
472
525
  }
473
- ._SidebarSection--noBorderTop_170gs_20 > ._SidebarSection-title_170gs_12 {
526
+ ._SidebarSection--noBorderTop_125qe_20 > ._SidebarSection-title_125qe_12 {
474
527
  border-top: 0px;
475
528
  }
476
- ._SidebarSection-content_170gs_24 {
529
+ ._SidebarSection-content_125qe_24 {
477
530
  padding: 16px;
478
531
  }
479
- ._SidebarSection--noPadding_170gs_28 > ._SidebarSection-content_170gs_24 {
532
+ ._SidebarSection--noPadding_125qe_28 > ._SidebarSection-content_125qe_24 {
480
533
  padding: 0px;
481
534
  }
482
- ._SidebarSection--noPadding_170gs_28 > ._SidebarSection-content_170gs_24:last-child {
535
+ ._SidebarSection--noPadding_125qe_28 > ._SidebarSection-content_125qe_24:last-child {
483
536
  padding-bottom: 4px;
484
537
  }
485
- ._SidebarSection_170gs_1:last-of-type ._SidebarSection-content_170gs_24 {
538
+ ._SidebarSection_125qe_1:last-of-type ._SidebarSection-content_125qe_24 {
486
539
  border-bottom: none;
487
540
  flex-grow: 1;
488
541
  }
489
- ._SidebarSection-breadcrumbLabel_170gs_41 {
490
- color: var(--puck-color-azure-3);
542
+ ._SidebarSection-breadcrumbLabel_125qe_41 {
543
+ background: none;
544
+ border: 0;
545
+ border-radius: 2px;
546
+ color: var(--puck-color-azure-04);
547
+ cursor: pointer;
548
+ font: inherit;
491
549
  flex-shrink: 0;
550
+ padding: 0;
551
+ transition: color 50ms ease-in;
492
552
  }
493
- ._SidebarSection-breadcrumbLabel_170gs_41:hover {
494
- color: var(--puck-color-azure-4);
495
- cursor: pointer;
496
- text-decoration: underline;
553
+ ._SidebarSection-breadcrumbLabel_125qe_41:focus-visible {
554
+ outline: 2px solid var(--puck-color-azure-05);
555
+ outline-offset: 2px;
497
556
  }
498
- ._SidebarSection-breadcrumbs_170gs_52 {
557
+ @media (hover: hover) and (pointer: fine) {
558
+ ._SidebarSection-breadcrumbLabel_125qe_41:hover {
559
+ color: var(--puck-color-azure-03);
560
+ transition: none;
561
+ }
562
+ }
563
+ ._SidebarSection-breadcrumbLabel_125qe_41:active {
564
+ color: var(--puck-color-azure-02);
565
+ transition: none;
566
+ }
567
+ ._SidebarSection-breadcrumbs_125qe_70 {
499
568
  align-items: center;
500
569
  display: flex;
501
570
  gap: 4px;
502
571
  }
503
- ._SidebarSection-breadcrumb_170gs_41 {
572
+ ._SidebarSection-breadcrumb_125qe_41 {
504
573
  align-items: center;
505
574
  display: flex;
506
575
  gap: 4px;
507
576
  }
508
- ._SidebarSection-heading_170gs_64 {
577
+ ._SidebarSection-heading_125qe_82 {
509
578
  padding-right: 16px;
510
579
  }
511
- ._SidebarSection-loadingOverlay_170gs_68 {
512
- background: white;
580
+ ._SidebarSection-loadingOverlay_125qe_86 {
581
+ background: var(--puck-color-white);
513
582
  display: flex;
514
583
  justify-content: center;
515
584
  align-items: center;
@@ -524,47 +593,46 @@
524
593
  }
525
594
 
526
595
  /* css-module:/home/runner/work/puck/puck/packages/core/components/Heading/styles.module.css/#css-module-data */
527
- ._Heading_1bvy5_1 {
596
+ ._Heading_qxrry_1 {
528
597
  display: block;
529
598
  color: var(--puck-color-black);
530
- font-family: var(--puck-font-stack);
531
599
  font-weight: 700;
532
600
  margin: 0;
533
601
  }
534
- ._Heading_1bvy5_1 b {
602
+ ._Heading_qxrry_1 b {
535
603
  font-weight: 700;
536
604
  }
537
- ._Heading--xxxxl_1bvy5_13 {
605
+ ._Heading--xxxxl_qxrry_12 {
538
606
  font-size: var(--puck-font-size-xxxxl);
539
607
  letter-spacing: 0.08ch;
540
608
  font-weight: 800;
541
609
  }
542
- ._Heading--xxxl_1bvy5_19 {
610
+ ._Heading--xxxl_qxrry_18 {
543
611
  font-size: var(--puck-font-size-xxxl);
544
612
  }
545
- ._Heading--xxl_1bvy5_23 {
613
+ ._Heading--xxl_qxrry_22 {
546
614
  font-size: var(--puck-font-size-xxl);
547
615
  }
548
- ._Heading--xl_1bvy5_27 {
616
+ ._Heading--xl_qxrry_26 {
549
617
  font-size: var(--puck-font-size-xl);
550
618
  }
551
- ._Heading--l_1bvy5_31 {
619
+ ._Heading--l_qxrry_30 {
552
620
  font-size: var(--puck-font-size-l);
553
621
  }
554
- ._Heading--m_1bvy5_35 {
622
+ ._Heading--m_qxrry_34 {
555
623
  font-size: var(--puck-font-size-m);
556
624
  }
557
- ._Heading--s_1bvy5_39 {
625
+ ._Heading--s_qxrry_38 {
558
626
  font-size: var(--puck-font-size-s);
559
627
  }
560
- ._Heading--xs_1bvy5_43 {
628
+ ._Heading--xs_qxrry_42 {
561
629
  font-size: var(--puck-font-size-xs);
562
630
  }
563
631
 
564
632
  /* css-module:/home/runner/work/puck/puck/packages/core/components/MenuBar/styles.module.css/#css-module-data */
565
- ._MenuBar_12sp7_1 {
633
+ ._MenuBar_8pf8c_1 {
566
634
  background-color: var(--puck-color-white);
567
- border-bottom: 1px solid var(--puck-color-grey-8);
635
+ border-bottom: 1px solid var(--puck-color-grey-09);
568
636
  display: none;
569
637
  left: 0;
570
638
  margin-top: 1px;
@@ -574,11 +642,11 @@
574
642
  top: 100%;
575
643
  z-index: 2;
576
644
  }
577
- ._MenuBar--menuOpen_12sp7_14 {
645
+ ._MenuBar--menuOpen_8pf8c_14 {
578
646
  display: block;
579
647
  }
580
648
  @media (min-width: 638px) {
581
- ._MenuBar_12sp7_1 {
649
+ ._MenuBar_8pf8c_1 {
582
650
  border: none;
583
651
  display: block;
584
652
  margin-top: 0;
@@ -587,7 +655,7 @@
587
655
  position: static;
588
656
  }
589
657
  }
590
- ._MenuBar-inner_12sp7_29 {
658
+ ._MenuBar-inner_8pf8c_29 {
591
659
  align-items: center;
592
660
  display: flex;
593
661
  flex-wrap: wrap;
@@ -595,85 +663,86 @@
595
663
  justify-content: flex-end;
596
664
  }
597
665
  @media (min-width: 638px) {
598
- ._MenuBar-inner_12sp7_29 {
666
+ ._MenuBar-inner_8pf8c_29 {
599
667
  display: flex;
600
668
  flex-direction: row;
601
669
  flex-wrap: nowrap;
602
670
  }
603
671
  }
604
- ._MenuBar-history_12sp7_45 {
672
+ ._MenuBar-history_8pf8c_45 {
605
673
  display: flex;
606
674
  }
607
675
 
608
676
  /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/styles.module.css/#css-module-data */
609
- ._Puck_17hk3_19 {
677
+ ._Puck_3qn7l_19 {
610
678
  --puck-frame-width: auto;
611
679
  --puck-side-bar-width: 186px;
612
680
  --puck-space-px: 16px;
613
681
  bottom: 0;
614
682
  display: grid;
683
+ font-family: var(--puck-font-family);
615
684
  grid-template-areas: "header header header" "left editor right";
616
685
  grid-template-columns: 0 var(--puck-frame-width) 0;
617
686
  grid-template-rows: min-content auto;
618
- height: 100vh;
687
+ height: 100dvh;
619
688
  left: 0;
620
689
  position: fixed;
621
690
  right: 0;
622
691
  top: 0;
623
692
  }
624
- ._Puck--leftSideBarVisible_17hk3_35 {
693
+ ._Puck--leftSideBarVisible_3qn7l_36 {
625
694
  grid-template-columns: var(--puck-side-bar-width) var(--puck-frame-width) 0;
626
695
  }
627
- ._Puck--rightSideBarVisible_17hk3_41 {
696
+ ._Puck--rightSideBarVisible_3qn7l_42 {
628
697
  grid-template-columns: 0 var(--puck-frame-width) var(--puck-side-bar-width);
629
698
  }
630
- ._Puck--leftSideBarVisible_17hk3_35._Puck--rightSideBarVisible_17hk3_41 {
699
+ ._Puck--leftSideBarVisible_3qn7l_36._Puck--rightSideBarVisible_3qn7l_42 {
631
700
  grid-template-columns: var(--puck-side-bar-width) var(--puck-frame-width) var(--puck-side-bar-width);
632
701
  }
633
702
  @media (min-width: 458px) {
634
- ._Puck_17hk3_19 {
703
+ ._Puck_3qn7l_19 {
635
704
  --puck-frame-width: minmax(266px, auto);
636
705
  }
637
706
  }
638
707
  @media (min-width: 638px) {
639
- ._Puck_17hk3_19 {
708
+ ._Puck_3qn7l_19 {
640
709
  --puck-side-bar-width: minmax(186px, 250px);
641
710
  }
642
711
  }
643
712
  @media (min-width: 766px) {
644
- ._Puck_17hk3_19 {
713
+ ._Puck_3qn7l_19 {
645
714
  --puck-frame-width: auto;
646
715
  }
647
716
  }
648
717
  @media (min-width: 990px) {
649
- ._Puck_17hk3_19 {
718
+ ._Puck_3qn7l_19 {
650
719
  --puck-side-bar-width: 256px;
651
720
  }
652
721
  }
653
722
  @media (min-width: 1198px) {
654
- ._Puck_17hk3_19 {
723
+ ._Puck_3qn7l_19 {
655
724
  --puck-side-bar-width: 274px;
656
725
  }
657
726
  }
658
727
  @media (min-width: 1398px) {
659
- ._Puck_17hk3_19 {
728
+ ._Puck_3qn7l_19 {
660
729
  --puck-side-bar-width: 290px;
661
730
  }
662
731
  }
663
732
  @media (min-width: 1598px) {
664
- ._Puck_17hk3_19 {
733
+ ._Puck_3qn7l_19 {
665
734
  --puck-side-bar-width: 320px;
666
735
  }
667
736
  }
668
- ._Puck-header_17hk3_95 {
737
+ ._Puck-header_3qn7l_96 {
669
738
  background: var(--puck-color-white);
670
- border-bottom: 1px solid var(--puck-color-grey-8);
739
+ border-bottom: 1px solid var(--puck-color-grey-09);
671
740
  color: var(--puck-color-black);
672
741
  grid-area: header;
673
742
  position: relative;
674
743
  max-width: 100vw;
675
744
  }
676
- ._Puck-headerInner_17hk3_104 {
745
+ ._Puck-headerInner_3qn7l_105 {
677
746
  align-items: end;
678
747
  display: grid;
679
748
  gap: var(--puck-space-px);
@@ -682,255 +751,342 @@
682
751
  grid-template-rows: auto;
683
752
  padding: var(--puck-space-px);
684
753
  }
685
- ._Puck-headerToggle_17hk3_114 {
686
- color: var(--puck-color-grey-4);
754
+ ._Puck-headerToggle_3qn7l_115 {
755
+ color: var(--puck-color-grey-05);
687
756
  display: flex;
688
757
  margin-left: -4px;
689
758
  padding-top: 2px;
690
759
  }
691
- ._Puck--rightSideBarVisible_17hk3_41 ._Puck-rightSideBarToggle_17hk3_121,
692
- ._Puck--leftSideBarVisible_17hk3_35 ._Puck-leftSideBarToggle_17hk3_122 {
760
+ ._Puck--rightSideBarVisible_3qn7l_42 ._Puck-rightSideBarToggle_3qn7l_122,
761
+ ._Puck--leftSideBarVisible_3qn7l_36 ._Puck-leftSideBarToggle_3qn7l_123 {
693
762
  color: var(--puck-color-black);
694
763
  }
695
- ._Puck-headerTitle_17hk3_126 {
764
+ ._Puck-headerTitle_3qn7l_127 {
696
765
  align-self: center;
697
766
  }
698
- ._Puck-headerPath_17hk3_130 {
767
+ ._Puck-headerPath_3qn7l_131 {
699
768
  font-family: var(--puck-font-family-monospaced);
700
769
  font-size: var(--puck-font-size-xxs);
701
770
  font-weight: normal;
702
771
  word-break: break-all;
703
772
  }
704
- ._Puck-headerTools_17hk3_137 {
773
+ ._Puck-headerTools_3qn7l_138 {
705
774
  display: flex;
706
775
  gap: 16px;
707
776
  justify-content: flex-end;
708
777
  }
709
- ._Puck-menuButton_17hk3_143 {
710
- color: var(--puck-color-grey-4);
778
+ ._Puck-menuButton_3qn7l_144 {
779
+ color: var(--puck-color-grey-05);
711
780
  margin-left: -4px;
712
781
  }
713
- ._Puck--menuOpen_17hk3_148 ._Puck-menuButton_17hk3_143 {
782
+ ._Puck--menuOpen_3qn7l_149 ._Puck-menuButton_3qn7l_144 {
714
783
  color: var(--puck-color-black);
715
784
  }
716
785
  @media (min-width: 638px) {
717
- ._Puck-menuButton_17hk3_143 {
786
+ ._Puck-menuButton_3qn7l_144 {
718
787
  display: none;
719
788
  }
720
789
  }
721
- ._Puck-leftSideBar_17hk3_122 {
722
- background: var(--puck-color-grey-11);
723
- border-right: 1px solid var(--puck-color-grey-8);
790
+ ._Puck-leftSideBar_3qn7l_123 {
791
+ background: var(--puck-color-grey-12);
792
+ border-right: 1px solid var(--puck-color-grey-09);
724
793
  display: flex;
725
794
  flex-direction: column;
726
795
  grid-area: left;
727
796
  overflow-y: auto;
728
797
  }
729
- ._Puck-frame_17hk3_167 {
798
+ ._Puck-frame_3qn7l_168 {
799
+ box-sizing: border-box;
730
800
  display: flex;
731
- flex-direction: column;
732
- grid-area: editor;
733
- overflow: auto;
801
+ height: 100%;
802
+ justify-content: center;
803
+ min-width: 392px;
804
+ overflow: hidden;
734
805
  position: relative;
806
+ width: 100%;
735
807
  }
736
- ._Puck-root_17hk3_175 {
737
- border: 1px solid var(--puck-color-grey-8);
738
- box-shadow: 0 0 0 calc(var(--puck-space-px) * 1.5) var(--puck-color-grey-10);
739
- margin: var(--puck-space-px);
808
+ ._Puck-root_3qn7l_179 {
809
+ background: white;
810
+ border: 1px solid var(--puck-color-grey-09);
811
+ box-sizing: border-box;
740
812
  min-width: 321px;
813
+ position: absolute;
814
+ transform-origin: top;
815
+ top: 0;
816
+ bottom: 0;
741
817
  }
742
818
  @media (min-width: 1198px) {
743
- ._Puck-root_17hk3_175 {
744
- margin: calc(var(--puck-space-px) * 1.5);
819
+ ._Puck-root_3qn7l_179 {
820
+ min-width: unset;
745
821
  }
746
822
  }
747
- ._Puck-rightSideBar_17hk3_121 {
823
+ @media (prefers-reduced-motion: reduce) {
824
+ ._Puck-root_3qn7l_179 {
825
+ transition: none !important;
826
+ }
827
+ }
828
+ ._Puck-rightSideBar_3qn7l_122 {
748
829
  background: var(--puck-color-white);
749
- border-left: 1px solid var(--puck-color-grey-8);
830
+ border-left: 1px solid var(--puck-color-grey-09);
750
831
  display: flex;
751
832
  flex-direction: column;
752
- font-family: var(--puck-font-stack);
753
833
  grid-area: right;
754
834
  overflow-y: auto;
755
835
  }
836
+ ._Puck-canvas_3qn7l_211 {
837
+ background: var(--puck-color-grey-11);
838
+ display: flex;
839
+ grid-area: editor;
840
+ flex-direction: column;
841
+ padding: var(--puck-space-px);
842
+ overflow: auto;
843
+ }
844
+ @media (min-width: 1198px) {
845
+ ._Puck-canvas_3qn7l_211 {
846
+ padding: calc(var(--puck-space-px) * 1.5);
847
+ padding-top: var(--puck-space-px);
848
+ }
849
+ ._Puck-canvas_3qn7l_211:not(._Puck-canvas_3qn7l_211:has(._Puck-canvasControls_3qn7l_226)) {
850
+ padding-top: calc(var(--puck-space-px) * 1.5);
851
+ }
852
+ }
756
853
 
757
854
  /* css-module:/home/runner/work/puck/puck/packages/core/components/InputOrGroup/styles.module.css/#css-module-data */
758
- ._Input_1v7zr_1 {
759
- color: var(--puck-color-grey-3);
855
+ ._Input_1qi5b_1 {
856
+ color: var(--puck-color-grey-04);
760
857
  padding: 16px;
761
858
  padding-bottom: 12px;
762
859
  display: block;
763
- font-family: var(--puck-font-stack);
764
860
  }
765
- ._Input_1v7zr_1 ._Input_1v7zr_1 {
861
+ ._Input_1qi5b_1 ._Input_1qi5b_1 {
766
862
  padding: 0px;
767
863
  }
768
- ._Input_1v7zr_1 * {
864
+ ._Input_1qi5b_1 * {
769
865
  box-sizing: border-box;
770
866
  }
771
- ._Input_1v7zr_1 + ._Input_1v7zr_1 {
772
- border-top: 1px solid var(--puck-color-grey-8);
867
+ ._Input_1qi5b_1 + ._Input_1qi5b_1 {
868
+ border-top: 1px solid var(--puck-color-grey-09);
773
869
  margin-top: 8px;
774
870
  }
775
- ._Input_1v7zr_1 ._Input_1v7zr_1 + ._Input_1v7zr_1 {
871
+ ._Input_1qi5b_1 ._Input_1qi5b_1 + ._Input_1qi5b_1 {
776
872
  border-top: 0px;
777
873
  margin-top: 12px;
778
874
  }
779
- ._Input-label_1v7zr_27 {
875
+ ._Input-label_1qi5b_26 {
780
876
  align-items: center;
781
877
  display: flex;
782
878
  padding-bottom: 12px;
783
879
  font-size: var(--puck-font-size-xxs);
784
880
  font-weight: 600;
785
881
  }
786
- ._Input-labelIcon_1v7zr_35 {
787
- color: var(--puck-color-grey-6);
882
+ ._Input-labelIcon_1qi5b_34 {
883
+ color: var(--puck-color-grey-07);
884
+ display: flex;
788
885
  margin-right: 4px;
789
886
  padding-left: 4px;
790
887
  }
791
- ._Input-disabledIcon_1v7zr_41 {
792
- color: var(--puck-color-grey-4);
888
+ ._Input-disabledIcon_1qi5b_41 {
889
+ color: var(--puck-color-grey-05);
793
890
  margin-left: auto;
794
891
  }
795
- ._Input-input_1v7zr_46 {
796
- background: white;
892
+ ._Input-input_1qi5b_46 {
893
+ background: var(--puck-color-white);
797
894
  border-width: 1px;
798
895
  border-style: solid;
799
- border-color: var(--puck-color-grey-8);
896
+ border-color: var(--puck-color-grey-09);
800
897
  border-radius: 4px;
801
898
  font-family: inherit;
802
899
  font-size: 14px;
803
900
  padding: 12px 15px;
901
+ transition: border-color 50ms ease-in;
804
902
  width: 100%;
805
903
  }
806
- select._Input-input_1v7zr_46 {
904
+ select._Input-input_1qi5b_46 {
807
905
  appearance: none;
808
906
  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;
809
907
  background-size: 12px;
810
908
  background-position: calc(100% - 12px) calc(50% + 3px);
811
909
  background-repeat: no-repeat;
812
- background-color: white;
910
+ background-color: var(--puck-color-white);
911
+ cursor: pointer;
813
912
  }
814
- ._Input--readOnly_1v7zr_69 > ._Input-input_1v7zr_46,
815
- ._Input--readOnly_1v7zr_69 > select._Input-input_1v7zr_46 {
816
- background-color: var(--puck-color-grey-11);
817
- border-color: var(--puck-color-grey-8);
818
- color: var(--puck-color-grey-5);
819
- opacity: 1;
913
+ @media (hover: hover) and (pointer: fine) {
914
+ ._Input_1qi5b_1:has(> input):hover ._Input-input_1qi5b_46:not([readonly]),
915
+ ._Input_1qi5b_1:has(> textarea):hover ._Input-input_1qi5b_46:not([readonly]) {
916
+ border-color: var(--puck-color-grey-05);
917
+ transition: none;
918
+ }
919
+ ._Input_1qi5b_1:has(> select):hover ._Input-input_1qi5b_46:not([disabled]) {
920
+ background-color: var(--puck-color-azure-12);
921
+ 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>");
922
+ border-color: var(--puck-color-grey-05);
923
+ transition: none;
924
+ }
820
925
  }
821
- ._Input-input_1v7zr_46:hover {
822
- border-color: var(--puck-color-neutral-3);
926
+ ._Input-input_1qi5b_46:focus {
927
+ border-color: var(--puck-color-grey-05);
928
+ outline: 2px solid var(--puck-color-azure-05);
929
+ transition: none;
823
930
  }
824
- ._Input-input_1v7zr_46:focus {
825
- border-color: var(--puck-color-azure-4);
826
- outline: var(--puck-color-azure-8) 4px solid;
827
- outline-offset: 0;
931
+ ._Input--readOnly_1qi5b_90 > ._Input-input_1qi5b_46,
932
+ ._Input--readOnly_1qi5b_90 > select._Input-input_1qi5b_46 {
933
+ background-color: var(--puck-color-grey-11);
934
+ border-color: var(--puck-color-grey-09);
935
+ color: var(--puck-color-grey-04);
936
+ cursor: default;
937
+ opacity: 1;
938
+ outline: 0;
939
+ transition: none;
828
940
  }
829
- ._Input-radioGroupItems_1v7zr_87 {
941
+ ._Input-radioGroupItems_1qi5b_101 {
830
942
  display: flex;
831
- border: 1px solid var(--puck-color-grey-7);
943
+ border: 1px solid var(--puck-color-grey-09);
832
944
  border-radius: 4px;
833
945
  flex-wrap: wrap;
834
- overflow: hidden;
835
946
  }
836
- ._Input-radio_1v7zr_87 {
837
- border-right: 1px solid var(--puck-color-grey-7);
947
+ ._Input-radio_1qi5b_101 {
948
+ border-right: 1px solid var(--puck-color-grey-09);
838
949
  flex-grow: 1;
839
950
  }
840
- ._Input-radio_1v7zr_87:last-of-type {
841
- border-right: none;
951
+ ._Input-radio_1qi5b_101:first-of-type {
952
+ border-bottom-left-radius: 4px;
953
+ border-top-left-radius: 4px;
954
+ }
955
+ ._Input-radio_1qi5b_101:first-of-type ._Input-radioInner_1qi5b_118 {
956
+ border-bottom-left-radius: 3px;
957
+ border-top-left-radius: 3px;
842
958
  }
843
- ._Input-radioInner_1v7zr_104 {
844
- background-color: white;
845
- color: var(--puck-color-grey-4);
959
+ ._Input-radio_1qi5b_101:last-of-type {
960
+ border-bottom-right-radius: 4px;
961
+ border-right: 0;
962
+ border-top-right-radius: 4px;
963
+ }
964
+ ._Input-radio_1qi5b_101:last-of-type ._Input-radioInner_1qi5b_118 {
965
+ border-bottom-right-radius: 3px;
966
+ border-top-right-radius: 3px;
967
+ }
968
+ ._Input-radioInner_1qi5b_118 {
969
+ background-color: var(--puck-color-white);
970
+ color: var(--puck-color-grey-04);
971
+ cursor: pointer;
846
972
  font-size: var(--puck-font-size-xxxs);
847
973
  padding: 8px 12px;
848
974
  text-align: center;
975
+ transition: background-color 50ms ease-in;
849
976
  }
850
- ._Input-radioInner_1v7zr_104:hover {
851
- background-color: var(--puck-color-azure-9);
852
- cursor: pointer;
977
+ ._Input-radio_1qi5b_101:has(:focus-visible) {
978
+ outline: 2px solid var(--puck-color-azure-05);
979
+ outline-offset: 2px;
980
+ position: relative;
853
981
  }
854
- ._Input--readOnly_1v7zr_69 ._Input-radioGroupItems_1v7zr_87 {
855
- border-color: var(--puck-color-grey-8);
982
+ @media (hover: hover) and (pointer: fine) {
983
+ ._Input-radioInner_1qi5b_118:hover {
984
+ background-color: var(--puck-color-azure-12);
985
+ transition: none;
986
+ }
856
987
  }
857
- ._Input--readOnly_1v7zr_69 ._Input-radioInner_1v7zr_104 {
858
- background-color: var(--puck-color-grey-11);
859
- color: var(--puck-color-grey-5);
988
+ ._Input--readOnly_1qi5b_90 ._Input-radioInner_1qi5b_118 {
989
+ background-color: var(--puck-color-white);
990
+ color: var(--puck-color-grey-04);
991
+ cursor: default;
860
992
  }
861
- ._Input-radio_1v7zr_87 ._Input-radioInput_1v7zr_126:checked ~ ._Input-radioInner_1v7zr_104 {
862
- background-color: var(--puck-color-azure-9);
863
- color: var(--puck-color-grey-1);
993
+ ._Input-radio_1qi5b_101 ._Input-radioInput_1qi5b_163:checked ~ ._Input-radioInner_1qi5b_118 {
994
+ background-color: var(--puck-color-azure-11);
995
+ color: var(--puck-color-azure-04);
864
996
  font-weight: 500;
865
997
  }
866
- ._Input--readOnly_1v7zr_69 ._Input-radioInput_1v7zr_126:checked ~ ._Input-radioInner_1v7zr_104 {
867
- background-color: var(--puck-color-azure-9);
868
- color: var(--puck-color-grey-4);
998
+ ._Input--readOnly_1qi5b_90 ._Input-radioInput_1qi5b_163:checked ~ ._Input-radioInner_1qi5b_118 {
999
+ background-color: var(--puck-color-grey-11);
1000
+ color: var(--puck-color-grey-04);
869
1001
  }
870
- ._Input-radio_1v7zr_87 ._Input-radioInput_1v7zr_126 {
871
- display: none;
1002
+ ._Input-radio_1qi5b_101 ._Input-radioInput_1qi5b_163 {
1003
+ clip: rect(0 0 0 0);
1004
+ clip-path: inset(100%);
1005
+ height: 1px;
1006
+ overflow: hidden;
1007
+ position: absolute;
1008
+ white-space: nowrap;
1009
+ width: 1px;
872
1010
  }
873
- textarea._Input-input_1v7zr_46 {
1011
+ textarea._Input-input_1qi5b_46 {
874
1012
  margin-bottom: -4px;
875
1013
  }
876
1014
 
877
1015
  /* css-module:/home/runner/work/puck/puck/packages/core/components/InputOrGroup/fields/ArrayField/styles.module.css/#css-module-data */
878
- ._ArrayField_1auyc_5 {
1016
+ ._ArrayField_1txra_5 {
879
1017
  display: flex;
880
1018
  flex-direction: column;
881
- background-color: var(--puck-color-grey-8);
882
- border: 1px solid var(--puck-color-grey-8);
1019
+ background-color: var(--puck-color-grey-09);
1020
+ border: 1px solid var(--puck-color-grey-09);
883
1021
  border-radius: 4px;
884
1022
  }
885
- ._ArrayField--isDraggingFrom_1auyc_13 {
886
- background-color: var(--puck-color-azure-9);
1023
+ ._ArrayField--isDraggingFrom_1txra_13 {
1024
+ background-color: var(--puck-color-azure-11);
887
1025
  }
888
- ._ArrayField-addButton_1auyc_17 {
889
- background-color: white;
1026
+ ._ArrayField-addButton_1txra_17 {
1027
+ background-color: var(--puck-color-white);
890
1028
  border: none;
891
1029
  border-radius: 4px;
892
1030
  display: flex;
893
- color: var(--puck-color-azure-4);
1031
+ color: var(--puck-color-azure-05);
894
1032
  justify-content: center;
895
1033
  cursor: pointer;
896
1034
  width: 100%;
897
1035
  margin: 0;
898
1036
  padding: 16px;
899
1037
  text-align: left;
1038
+ transition: background-color 50ms ease-in;
900
1039
  }
901
- ._ArrayField--hasItems_1auyc_31 > ._ArrayField-addButton_1auyc_17 {
1040
+ ._ArrayField--hasItems_1txra_32 > ._ArrayField-addButton_1txra_17 {
902
1041
  border-top-left-radius: 0;
903
1042
  border-top-right-radius: 0;
904
1043
  }
905
- ._ArrayField_1auyc_5:not(._ArrayField--isDraggingFrom_1auyc_13) > ._ArrayField-addButton_1auyc_17:hover {
906
- background: var(--puck-color-azure-9);
907
- color: var(--puck-color-azure-4);
1044
+ ._ArrayField-addButton_1txra_17:focus-visible {
1045
+ outline: 2px solid var(--puck-color-azure-05);
1046
+ outline-offset: 2px;
1047
+ position: relative;
908
1048
  }
909
- ._ArrayFieldItem_1auyc_45 {
910
- background: white;
1049
+ @media (hover: hover) and (pointer: fine) {
1050
+ ._ArrayField_1txra_5:not(._ArrayField--isDraggingFrom_1txra_13) > ._ArrayField-addButton_1txra_17:hover {
1051
+ background: var(--puck-color-azure-12);
1052
+ color: var(--puck-color-azure-04);
1053
+ transition: none;
1054
+ }
1055
+ }
1056
+ ._ArrayField_1txra_5:not(._ArrayField--isDraggingFrom_1txra_13) > ._ArrayField-addButton_1txra_17:active {
1057
+ background: var(--puck-color-azure-11);
1058
+ color: var(--puck-color-azure-04);
1059
+ transition: none;
1060
+ }
1061
+ ._ArrayFieldItem_1txra_61 {
1062
+ background: var(--puck-color-white);
911
1063
  border-top-left-radius: 4px;
912
1064
  border-top-right-radius: 4px;
913
1065
  display: block;
914
1066
  margin-bottom: 1px;
915
1067
  }
916
- ._ArrayField--isDraggingFrom_1auyc_13 > ._ArrayFieldItem_1auyc_45:not(._ArrayFieldItem--isDragging_1auyc_53) {
917
- border-bottom: 1px solid var(--puck-color-grey-8);
1068
+ ._ArrayField--isDraggingFrom_1txra_13 > ._ArrayFieldItem_1txra_61:not(._ArrayFieldItem--isDragging_1txra_69) {
1069
+ border-bottom: 1px solid var(--puck-color-grey-09);
918
1070
  margin-bottom: 0;
919
1071
  }
920
- ._ArrayFieldItem--isExpanded_1auyc_58 {
1072
+ ._ArrayFieldItem--isExpanded_1txra_74 {
921
1073
  border-bottom: 0;
922
1074
  outline-offset: 0px !important;
923
- outline: 1px solid var(--puck-color-azure-6) !important;
1075
+ outline: 1px solid var(--puck-color-azure-07) !important;
924
1076
  }
925
- ._ArrayFieldItem--isDragging_1auyc_53 {
926
- box-shadow: rgba(140, 152, 164, 0.25) 0 3px 6px 0;
1077
+ ._ArrayFieldItem--isDragging_1txra_69 {
1078
+ box-shadow: color-mix(in srgb, var(--puck-color-grey-06) 25%, transparent) 0 3px 6px 0;
927
1079
  }
928
- ._ArrayFieldItem_1auyc_45 + ._ArrayFieldItem_1auyc_45 {
1080
+ ._ArrayFieldItem--isDragging_1txra_69 ._ArrayFieldItem-summary_1txra_84:active {
1081
+ background-color: var(--puck-color-white);
1082
+ }
1083
+ ._ArrayFieldItem_1txra_61 + ._ArrayFieldItem_1txra_61 {
929
1084
  border-top-left-radius: 0;
930
1085
  border-top-right-radius: 0;
931
1086
  }
932
- ._ArrayFieldItem-summary_1auyc_73 {
933
- color: var(--puck-color-grey-3);
1087
+ ._ArrayFieldItem-summary_1txra_84 {
1088
+ color: var(--puck-color-grey-04);
1089
+ cursor: pointer;
934
1090
  display: flex;
935
1091
  align-items: center;
936
1092
  gap: 2px;
@@ -940,179 +1096,236 @@ textarea._Input-input_1v7zr_46 {
940
1096
  padding: 12px 15px;
941
1097
  position: relative;
942
1098
  overflow: hidden;
1099
+ transition: background-color 50ms ease-in;
943
1100
  }
944
- ._ArrayFieldItem--readOnly_1auyc_86 > ._ArrayFieldItem-summary_1auyc_73 {
945
- background-color: var(--puck-color-grey-11);
946
- color: var(--puck-color-grey-5);
1101
+ ._ArrayFieldItem--readOnly_1txra_108 > ._ArrayFieldItem-summary_1txra_84 {
1102
+ background-color: var(--puck-color-grey-12);
1103
+ color: var(--puck-color-grey-06);
947
1104
  }
948
- ._ArrayFieldItem--isExpanded_1auyc_58 > ._ArrayFieldItem-summary_1auyc_73 {
949
- font-weight: 600;
950
- }
951
- ._ArrayFieldItem_1auyc_45:first-of-type > ._ArrayFieldItem-summary_1auyc_73 {
1105
+ ._ArrayFieldItem_1txra_61:first-of-type > ._ArrayFieldItem-summary_1txra_84 {
952
1106
  border-top-left-radius: 4px;
953
1107
  border-top-right-radius: 4px;
954
1108
  }
955
- ._ArrayFieldItem-summary_1auyc_73:hover,
956
- ._ArrayFieldItem--isExpanded_1auyc_58 > ._ArrayFieldItem-summary_1auyc_73 {
957
- background: var(--puck-color-azure-9);
958
- cursor: pointer;
959
- color: var(--puck-color-azure-4);
1109
+ ._ArrayFieldItem-summary_1txra_84:focus-visible {
1110
+ outline: 2px solid var(--puck-color-azure-05);
1111
+ outline-offset: 2px;
1112
+ }
1113
+ @media (hover: hover) and (pointer: fine) {
1114
+ ._ArrayFieldItem-summary_1txra_84:hover {
1115
+ background-color: var(--puck-color-azure-12);
1116
+ transition: none;
1117
+ }
1118
+ }
1119
+ ._ArrayFieldItem-summary_1txra_84:active {
1120
+ background-color: var(--puck-color-azure-11);
1121
+ transition: none;
960
1122
  }
961
- ._ArrayFieldItem-body_1auyc_107 {
1123
+ ._ArrayFieldItem--isExpanded_1txra_74 > ._ArrayFieldItem-summary_1txra_84 {
1124
+ background: var(--puck-color-azure-11);
1125
+ color: var(--puck-color-azure-04);
1126
+ font-weight: 600;
1127
+ transition: none;
1128
+ }
1129
+ ._ArrayFieldItem-body_1txra_142 {
962
1130
  display: none;
963
1131
  }
964
- ._ArrayFieldItem--isExpanded_1auyc_58 > ._ArrayFieldItem-body_1auyc_107 {
1132
+ ._ArrayFieldItem--isExpanded_1txra_74 > ._ArrayFieldItem-body_1txra_142 {
965
1133
  display: block;
966
1134
  }
967
- ._ArrayFieldItem-fieldset_1auyc_115 {
1135
+ ._ArrayFieldItem-fieldset_1txra_150 {
968
1136
  border: none;
969
- border-top: 1px solid var(--puck-color-grey-8);
1137
+ border-top: 1px solid var(--puck-color-grey-09);
970
1138
  margin: 0;
971
1139
  padding: 16px 15px;
972
1140
  }
973
- ._ArrayFieldItem-rhs_1auyc_122 {
1141
+ ._ArrayFieldItem-rhs_1txra_157 {
974
1142
  display: flex;
975
1143
  gap: 4px;
976
1144
  align-items: center;
977
1145
  }
978
- ._ArrayFieldItem-actions_1auyc_128 {
979
- color: var(--puck-color-grey-3);
1146
+ ._ArrayFieldItem-actions_1txra_163 {
1147
+ color: var(--puck-color-grey-04);
980
1148
  display: flex;
981
1149
  gap: 4px;
982
1150
  opacity: 0;
983
1151
  }
984
- ._ArrayFieldItem-summary_1auyc_73:hover > ._ArrayFieldItem-rhs_1auyc_122 > ._ArrayFieldItem-actions_1auyc_128 {
1152
+ ._ArrayFieldItem-summary_1txra_84:focus-within > ._ArrayFieldItem-rhs_1txra_157 > ._ArrayFieldItem-actions_1txra_163,
1153
+ ._ArrayFieldItem-summary_1txra_84:hover > ._ArrayFieldItem-rhs_1txra_157 > ._ArrayFieldItem-actions_1txra_163 {
985
1154
  opacity: 1;
986
1155
  }
987
- ._ArrayFieldItem-action_1auyc_128:hover {
988
- background: var(--puck-color-grey-9);
989
- border-radius: 4px;
990
- cursor: pointer;
991
- }
992
1156
 
993
1157
  /* css-module:/home/runner/work/puck/puck/packages/core/components/ExternalInput/styles.module.css/#css-module-data */
994
- ._ExternalInput_s6fxy_1 {
995
- font-family: var(--puck-font-stack);
996
- }
997
- ._ExternalInput-actions_s6fxy_5 {
1158
+ ._ExternalInput-actions_19obq_1 {
998
1159
  display: flex;
999
1160
  }
1000
- ._ExternalInput-button_s6fxy_9 {
1161
+ ._ExternalInput-button_19obq_5 {
1001
1162
  display: flex;
1002
1163
  gap: 8px;
1003
1164
  align-items: center;
1004
1165
  justify-content: center;
1005
- background-color: white;
1006
- border: 1px solid var(--puck-color-grey-8);
1166
+ background-color: var(--puck-color-white);
1167
+ border: 1px solid var(--puck-color-grey-09);
1007
1168
  border-radius: 4px;
1008
- color: var(--puck-color-azure-4);
1169
+ color: var(--puck-color-azure-04);
1170
+ cursor: pointer;
1009
1171
  padding: 12px 16px;
1010
1172
  font-weight: 500;
1011
1173
  white-space: nowrap;
1012
1174
  text-overflow: ellipsis;
1175
+ transition: background-color 50ms ease-in;
1013
1176
  position: relative;
1014
1177
  overflow: hidden;
1015
1178
  flex-grow: 1;
1016
1179
  }
1017
- ._ExternalInput-button_s6fxy_9:hover,
1018
- ._ExternalInput-detachButton_s6fxy_28:hover {
1019
- cursor: pointer;
1020
- background: var(--puck-color-azure-9);
1021
- color: var(--puck-color-azure-4);
1022
- z-index: 1;
1023
- }
1024
- ._ExternalInput--dataSelected_s6fxy_35 ._ExternalInput-button_s6fxy_9 {
1025
- color: var(--puck-color-grey-2);
1180
+ ._ExternalInput--dataSelected_19obq_25 ._ExternalInput-button_19obq_5 {
1181
+ color: var(--puck-color-grey-03);
1026
1182
  display: block;
1027
1183
  border-top-right-radius: 0px;
1028
1184
  border-bottom-right-radius: 0px;
1029
1185
  }
1030
- ._ExternalInput-detachButton_s6fxy_28 {
1031
- border: 1px solid var(--puck-color-grey-8);
1186
+ ._ExternalInput-detachButton_19obq_32 {
1187
+ border: 1px solid var(--puck-color-grey-09);
1032
1188
  border-top-right-radius: 4px;
1033
1189
  border-bottom-right-radius: 4px;
1034
- background-color: var(--puck-color-grey-11);
1035
- color: var(--puck-color-grey-4);
1190
+ background-color: var(--puck-color-grey-12);
1191
+ color: var(--puck-color-grey-05);
1192
+ cursor: pointer;
1036
1193
  display: flex;
1037
1194
  gap: 8px;
1038
1195
  align-items: center;
1039
1196
  justify-content: center;
1040
1197
  padding: 8px 12px;
1198
+ position: relative;
1199
+ transition: background-color 50ms ease-in, color 50ms ease-in;
1041
1200
  margin-left: -1px;
1042
1201
  }
1043
- ._ExternalInputModal_s6fxy_56 {
1044
- color: black;
1202
+ ._ExternalInput-button_19obq_5:focus-visible,
1203
+ ._ExternalInput-detachButton_19obq_32:focus-visible {
1204
+ outline: 2px solid var(--puck-color-azure-05);
1205
+ outline-offset: 2px;
1206
+ z-index: 1;
1207
+ }
1208
+ @media (hover: hover) and (pointer: fine) {
1209
+ ._ExternalInput-button_19obq_5:hover,
1210
+ ._ExternalInput-detachButton_19obq_32:hover {
1211
+ background: var(--puck-color-azure-12);
1212
+ transition: none;
1213
+ }
1214
+ ._ExternalInput-detachButton_19obq_32:hover {
1215
+ color: var(--puck-color-azure-04);
1216
+ }
1217
+ }
1218
+ ._ExternalInput-button_19obq_5:active,
1219
+ ._ExternalInput-detachButton_19obq_32:active {
1220
+ background: var(--puck-color-azure-11);
1221
+ transition: none;
1222
+ }
1223
+ ._ExternalInputModal_19obq_74 {
1224
+ color: var(--puck-color-black);
1225
+ display: grid;
1226
+ grid-template-rows: min-content minmax(128px, 100%) min-content;
1227
+ grid-template-columns: 100%;
1228
+ position: relative;
1229
+ min-height: 50dvh;
1230
+ max-height: 90dvh;
1231
+ }
1232
+ ._ExternalInputModal-grid_19obq_84 {
1045
1233
  display: flex;
1046
1234
  flex-direction: column;
1047
- position: relative;
1048
- max-height: 90vh;
1049
1235
  }
1050
- ._ExternalInputModal-masthead_s6fxy_64 {
1051
- background-color: white;
1236
+ @media (min-width: 458px) {
1237
+ ._ExternalInputModal-grid_19obq_84 {
1238
+ display: grid;
1239
+ grid-template-columns: 100%;
1240
+ }
1241
+ ._ExternalInputModal--filtersToggled_19obq_95 ._ExternalInputModal-grid_19obq_84 {
1242
+ grid-template-columns: 25% 75%;
1243
+ }
1244
+ }
1245
+ ._ExternalInputModal-filters_19obq_100 {
1246
+ border-bottom: 1px solid var(--puck-color-grey-09);
1247
+ }
1248
+ ._ExternalInputModal--filtersToggled_19obq_95 ._ExternalInputModal-filters_19obq_100 {
1249
+ display: none;
1250
+ }
1251
+ @media (min-width: 458px) {
1252
+ ._ExternalInputModal-filters_19obq_100 {
1253
+ border-right: 1px solid var(--puck-color-grey-09);
1254
+ display: none;
1255
+ }
1256
+ ._ExternalInputModal--filtersToggled_19obq_95 ._ExternalInputModal-filters_19obq_100 {
1257
+ display: block;
1258
+ }
1259
+ }
1260
+ ._ExternalInputModal-masthead_19obq_119 {
1261
+ background-color: var(--puck-color-grey-12);
1262
+ border-bottom: 1px solid var(--puck-color-grey-09);
1052
1263
  display: flex;
1053
1264
  flex-wrap: wrap;
1054
1265
  gap: 24px;
1055
- padding: 32px 24px;
1266
+ padding: 24px;
1056
1267
  }
1057
- ._ExternalInputModal-tableWrapper_s6fxy_72 {
1268
+ ._ExternalInputModal-tableWrapper_19obq_128 {
1058
1269
  position: relative;
1059
1270
  overflow-x: auto;
1060
1271
  overflow-y: auto;
1061
1272
  flex-grow: 1;
1062
1273
  }
1063
- ._ExternalInputModal-table_s6fxy_72 {
1274
+ ._ExternalInputModal-table_19obq_128 {
1064
1275
  border-collapse: unset;
1065
1276
  border-spacing: 0px;
1066
- color: var(--puck-color-neutral-4);
1277
+ color: var(--puck-color-grey-02);
1067
1278
  position: relative;
1068
1279
  z-index: 0;
1069
1280
  min-width: 100%;
1070
1281
  }
1071
- ._ExternalInputModal-thead_s6fxy_88 {
1282
+ ._ExternalInputModal-thead_19obq_144 {
1283
+ background-color: var(--puck-color-white);
1072
1284
  position: sticky;
1073
1285
  top: 0;
1074
1286
  z-index: 1;
1075
1287
  }
1076
- ._ExternalInputModal-th_s6fxy_88 {
1077
- border-bottom: 1px solid var(--puck-color-grey-8);
1078
- border-top: 1px solid var(--puck-color-grey-8);
1079
- font-weight: 700;
1288
+ ._ExternalInputModal-th_19obq_144 {
1289
+ border-bottom: 1px solid var(--puck-color-grey-09);
1290
+ color: var(--puck-color-grey-04);
1291
+ font-weight: 500;
1292
+ font-size: 14px;
1080
1293
  padding: 16px 24px;
1081
- opacity: 0.9;
1082
1294
  }
1083
- ._ExternalInputModal-td_s6fxy_102 {
1084
- font-family: var(--puck-font-stack);
1295
+ ._ExternalInputModal-td_19obq_159 {
1296
+ border-bottom: 1px solid var(--puck-color-grey-10);
1085
1297
  padding: 16px 24px;
1086
1298
  }
1087
- ._ExternalInputModal-tr_s6fxy_107:nth-of-type(n) {
1088
- background-color: white;
1089
- }
1090
- ._ExternalInputModal-tr_s6fxy_107:nth-of-type(2n) {
1091
- background-color: var(--puck-color-grey-10);
1092
- }
1093
- ._ExternalInputModal-tr_s6fxy_107 ._ExternalInputModal-td_s6fxy_102:first-of-type {
1299
+ ._ExternalInputModal-tr_19obq_164 ._ExternalInputModal-td_19obq_159:first-of-type {
1094
1300
  font-weight: 500;
1301
+ width: 1%;
1302
+ white-space: nowrap;
1095
1303
  }
1096
- ._ExternalInputModal-tbody_s6fxy_119 ._ExternalInputModal-tr_s6fxy_107:hover {
1097
- background: var(--puck-color-grey-11);
1098
- color: var(--puck-color-azure-4);
1099
- cursor: pointer;
1100
- position: relative;
1101
- margin-left: -5px;
1304
+ @media (hover: hover) and (pointer: fine) {
1305
+ ._ExternalInputModal-tbody_19obq_171 ._ExternalInputModal-tr_19obq_164:hover {
1306
+ background: var(--puck-color-azure-12);
1307
+ color: var(--puck-color-azure-04);
1308
+ cursor: pointer;
1309
+ position: relative;
1310
+ margin-left: -5px;
1311
+ }
1312
+ ._ExternalInputModal-tbody_19obq_171 ._ExternalInputModal-tr_19obq_164:hover ._ExternalInputModal-td_19obq_159:first-of-type {
1313
+ border-left: 4px solid var(--puck-color-azure-04);
1314
+ padding-left: 20px;
1315
+ }
1102
1316
  }
1103
- ._ExternalInputModal-tbody_s6fxy_119 ._ExternalInputModal-tr_s6fxy_107:hover ._ExternalInputModal-td_s6fxy_102:first-of-type {
1104
- border-left: 4px solid var(--puck-color-azure-4);
1105
- padding-left: 20px;
1317
+ ._ExternalInputModal-tbody_19obq_171 ._ExternalInputModal-tr_19obq_164:last-of-type ._ExternalInputModal-td_19obq_159 {
1318
+ border-bottom: none;
1106
1319
  }
1107
- ._ExternalInputModal-tableWrapper_s6fxy_72 {
1320
+ ._ExternalInputModal-tableWrapper_19obq_128 {
1108
1321
  display: none;
1109
1322
  }
1110
- ._ExternalInputModal--hasData_s6fxy_138 ._ExternalInputModal-tableWrapper_s6fxy_72 {
1323
+ ._ExternalInputModal--hasData_19obq_197 ._ExternalInputModal-tableWrapper_19obq_128 {
1111
1324
  display: block;
1112
1325
  }
1113
- ._ExternalInputModal-loadingBanner_s6fxy_142 {
1326
+ ._ExternalInputModal-loadingBanner_19obq_201 {
1114
1327
  display: none;
1115
- background-color: #ffffff90;
1328
+ background-color: color-mix(in srgb, var(--puck-color-white) 90%, transparent);
1116
1329
  padding: 64px;
1117
1330
  align-items: center;
1118
1331
  justify-content: center;
@@ -1122,50 +1335,64 @@ textarea._Input-input_1v7zr_46 {
1122
1335
  right: 0;
1123
1336
  bottom: 0;
1124
1337
  }
1125
- ._ExternalInputModal--isLoading_s6fxy_155 ._ExternalInputModal-loadingBanner_s6fxy_142 {
1338
+ ._ExternalInputModal--isLoading_19obq_218 ._ExternalInputModal-loadingBanner_19obq_201 {
1126
1339
  display: flex;
1127
1340
  }
1128
- ._ExternalInputModal-noContentBanner_s6fxy_159 {
1129
- display: none;
1130
- border-top: 1px solid var(--puck-color-grey-8);
1131
- padding: 24px;
1132
- text-align: center;
1133
- }
1134
- ._ExternalInputModal--loaded_s6fxy_166:not(._ExternalInputModal--hasData_s6fxy_138) ._ExternalInputModal-noContentBanner_s6fxy_159 {
1135
- display: block;
1136
- }
1137
- ._ExternalInputModal-searchForm_s6fxy_171 {
1341
+ ._ExternalInputModal-searchForm_19obq_222 {
1138
1342
  display: flex;
1139
- margin-left: auto;
1140
- height: 43px;
1343
+ flex-wrap: wrap;
1141
1344
  gap: 12px;
1345
+ flex-grow: 1;
1346
+ }
1347
+ @media (min-width: 458px) {
1348
+ ._ExternalInputModal-searchForm_19obq_222 {
1349
+ flex-wrap: nowrap;
1350
+ }
1142
1351
  }
1143
- ._ExternalInputModal-search_s6fxy_171 {
1352
+ ._ExternalInputModal-search_19obq_222 {
1144
1353
  display: flex;
1145
- background: white;
1354
+ background: var(--puck-color-white);
1146
1355
  border-width: 1px;
1147
1356
  border-style: solid;
1148
- border-color: var(--puck-color-grey-8);
1357
+ border-color: var(--puck-color-grey-09);
1149
1358
  border-radius: 4px;
1150
- width: 100%;
1359
+ flex-grow: 1;
1360
+ transition: border-color 50ms ease-in;
1151
1361
  }
1152
- ._ExternalInputModal-search_s6fxy_171:focus-within {
1153
- border-color: var(--puck-color-azure-4);
1154
- outline: var(--puck-color-azure-8) 4px solid;
1155
- outline-offset: 0;
1362
+ ._ExternalInputModal-search_19obq_222:focus-within {
1363
+ border-color: var(--puck-color-grey-05);
1364
+ outline: 2px solid var(--puck-color-azure-05);
1365
+ transition: none;
1156
1366
  }
1157
- ._ExternalInputModal-searchIcon_s6fxy_194 {
1367
+ @media (hover: hover) and (pointer: fine) {
1368
+ ._ExternalInputModal-search_19obq_222:hover {
1369
+ border-color: var(--puck-color-grey-05);
1370
+ transition: none;
1371
+ }
1372
+ }
1373
+ ._ExternalInputModal-searchIcon_19obq_259 {
1158
1374
  align-items: center;
1159
- background: var(--puck-color-grey-11);
1375
+ background: var(--puck-color-grey-12);
1160
1376
  border-bottom-left-radius: 4px;
1161
1377
  border-top-left-radius: 4px;
1162
- border-right: 1px solid var(--puck-color-grey-8);
1163
- color: var(--puck-color-grey-6);
1378
+ border-right: 1px solid var(--puck-color-grey-09);
1379
+ color: var(--puck-color-grey-07);
1164
1380
  display: flex;
1165
1381
  justify-content: center;
1166
1382
  padding: 12px 15px;
1383
+ transition: color 50ms ease-in;
1384
+ }
1385
+ ._ExternalInputModal-search_19obq_222:focus-within ._ExternalInputModal-searchIcon_19obq_259 {
1386
+ color: var(--puck-color-grey-04);
1387
+ transition: none;
1388
+ }
1389
+ @media (hover: hover) and (pointer: fine) {
1390
+ ._ExternalInputModal-search_19obq_222:hover ._ExternalInputModal-searchIcon_19obq_259 {
1391
+ color: var(--puck-color-grey-04);
1392
+ transition: none;
1393
+ }
1167
1394
  }
1168
- ._ExternalInputModal-searchIconText_s6fxy_206 {
1395
+ ._ExternalInputModal-searchIconText_19obq_284 {
1169
1396
  clip: rect(0 0 0 0);
1170
1397
  clip-path: inset(100%);
1171
1398
  height: 1px;
@@ -1174,24 +1401,45 @@ textarea._Input-input_1v7zr_46 {
1174
1401
  white-space: nowrap;
1175
1402
  width: 1px;
1176
1403
  }
1177
- ._ExternalInputModal-searchInput_s6fxy_216 {
1404
+ ._ExternalInputModal-searchInput_19obq_294 {
1178
1405
  border: none;
1179
1406
  border-radius: 4px;
1180
- background: white;
1407
+ background: var(--puck-color-white);
1181
1408
  font-family: inherit;
1182
1409
  font-size: 14px;
1183
1410
  padding: 12px 15px;
1184
1411
  width: 100%;
1185
1412
  }
1186
- ._ExternalInputModal-searchInput_s6fxy_216:focus {
1187
- border: none;
1188
- outline: none;
1189
- box-shadow: none;
1413
+ ._ExternalInputModal-searchInput_19obq_294:focus {
1414
+ outline: 0;
1415
+ }
1416
+ ._ExternalInputModal-searchActions_19obq_308 {
1417
+ display: flex;
1418
+ gap: 8px;
1419
+ height: 44px;
1420
+ width: 100%;
1421
+ }
1422
+ @media (min-width: 458px) {
1423
+ ._ExternalInputModal-searchActions_19obq_308 {
1424
+ width: auto;
1425
+ }
1426
+ }
1427
+ ._ExternalInputModal-searchActionIcon_19obq_321 {
1428
+ align-self: center;
1429
+ }
1430
+ ._ExternalInputModal-footer_19obq_325 {
1431
+ background-color: var(--puck-color-grey-12);
1432
+ border-top: 1px solid var(--puck-color-grey-09);
1433
+ color: var(--puck-color-grey-04);
1434
+ font-weight: 500;
1435
+ font-size: 14px;
1436
+ padding: 16px;
1437
+ text-align: right;
1190
1438
  }
1191
1439
 
1192
1440
  /* css-module:/home/runner/work/puck/puck/packages/core/components/Modal/styles.module.css/#css-module-data */
1193
- ._Modal_hx2u6_1 {
1194
- background: #00000099;
1441
+ ._Modal_ikbaj_1 {
1442
+ background: color-mix(in srgb, var(--puck-color-black) 75%, transparent);
1195
1443
  display: none;
1196
1444
  justify-content: center;
1197
1445
  align-items: center;
@@ -1201,42 +1449,43 @@ textarea._Input-input_1v7zr_46 {
1201
1449
  bottom: 0;
1202
1450
  right: 0;
1203
1451
  z-index: 1;
1204
- padding: 64px;
1452
+ padding: 32px;
1205
1453
  }
1206
- ._Modal--isOpen_hx2u6_15 {
1454
+ ._Modal--isOpen_ikbaj_15 {
1207
1455
  display: flex;
1208
1456
  }
1209
- ._Modal-inner_hx2u6_19 {
1457
+ ._Modal-inner_ikbaj_19 {
1210
1458
  width: 100%;
1211
1459
  max-width: 1024px;
1212
- border-radius: 16px;
1460
+ border-radius: 8px;
1213
1461
  overflow: hidden;
1214
- background: white;
1462
+ background: var(--puck-color-white);
1215
1463
  display: flex;
1216
1464
  flex-direction: column;
1217
- max-height: 90vh;
1465
+ max-height: 90dvh;
1218
1466
  }
1219
1467
 
1220
1468
  /* css-module:/home/runner/work/puck/puck/packages/core/components/InputOrGroup/fields/ObjectField/styles.module.css/#css-module-data */
1221
- ._ObjectField_56z4t_5 {
1469
+ ._ObjectField_15j63_5 {
1222
1470
  display: flex;
1223
1471
  flex-direction: column;
1224
- background-color: white;
1225
- border: 1px solid var(--puck-color-grey-8);
1472
+ background-color: var(--puck-color-white);
1473
+ border: 1px solid var(--puck-color-grey-09);
1226
1474
  border-radius: 4px;
1227
1475
  }
1228
- ._ObjectField-fieldset_56z4t_13 {
1476
+ ._ObjectField-fieldset_15j63_13 {
1229
1477
  border: none;
1230
1478
  margin: 0;
1231
1479
  padding: 16px 15px;
1232
1480
  }
1233
1481
 
1234
1482
  /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Fields/styles.module.css/#css-module-data */
1235
- ._PuckFields_1276r_1 {
1483
+ ._PuckFields_17k3p_1 {
1236
1484
  position: relative;
1485
+ font-family: var(--puck-font-family);
1237
1486
  }
1238
- ._PuckFields-loadingOverlay_1276r_5 {
1239
- background: white;
1487
+ ._PuckFields-loadingOverlay_17k3p_6 {
1488
+ background: var(--puck-color-white);
1240
1489
  display: flex;
1241
1490
  justify-content: center;
1242
1491
  align-items: center;
@@ -1251,128 +1500,196 @@ textarea._Input-input_1v7zr_46 {
1251
1500
  }
1252
1501
 
1253
1502
  /* css-module:/home/runner/work/puck/puck/packages/core/components/ComponentList/styles.module.css/#css-module-data */
1254
- ._ComponentList_1di93_1 {
1255
- font-family: var(--puck-font-stack);
1503
+ ._ComponentList_odh9d_1 {
1256
1504
  max-width: 100%;
1257
1505
  }
1258
- ._ComponentList--isExpanded_1di93_6 + ._ComponentList_1di93_1 {
1506
+ ._ComponentList--isExpanded_odh9d_5 + ._ComponentList_odh9d_1 {
1259
1507
  margin-top: 12px;
1260
1508
  }
1261
- ._ComponentList-content_1di93_10 {
1509
+ ._ComponentList-content_odh9d_9 {
1262
1510
  display: none;
1263
1511
  }
1264
- ._ComponentList--isExpanded_1di93_6 > ._ComponentList-content_1di93_10 {
1512
+ ._ComponentList--isExpanded_odh9d_5 > ._ComponentList-content_odh9d_9 {
1265
1513
  display: block;
1266
1514
  }
1267
- ._ComponentList-title_1di93_18 {
1268
- color: var(--puck-color-grey-4);
1515
+ ._ComponentList-title_odh9d_17 {
1516
+ background-color: transparent;
1517
+ border: 0;
1518
+ color: var(--puck-color-grey-05);
1519
+ cursor: pointer;
1269
1520
  display: flex;
1521
+ font: inherit;
1270
1522
  font-size: var(--puck-font-size-xxxs);
1271
1523
  list-style: none;
1524
+ margin-bottom: 6px;
1272
1525
  padding: 8px;
1273
1526
  text-transform: uppercase;
1527
+ transition: background-color 50ms ease-in, color 50ms ease-in;
1274
1528
  gap: 4px;
1275
1529
  border-radius: 4px;
1530
+ width: 100%;
1276
1531
  }
1277
- ._ComponentList--isExpanded_1di93_6 ._ComponentList-title_1di93_18 {
1278
- margin-bottom: 4px;
1532
+ ._ComponentList-title_odh9d_17:focus-visible {
1533
+ outline: 2px solid var(--puck-color-azure-05);
1534
+ outline-offset: 2px;
1279
1535
  }
1280
- ._ComponentList-title_1di93_18:hover {
1281
- background-color: var(--puck-color-azure-9);
1282
- color: var(--puck-color-azure-4);
1283
- cursor: pointer;
1536
+ @media (hover: hover) and (pointer: fine) {
1537
+ ._ComponentList-title_odh9d_17:hover {
1538
+ background-color: var(--puck-color-azure-11);
1539
+ color: var(--puck-color-azure-04);
1540
+ transition: none;
1541
+ }
1284
1542
  }
1285
- ._ComponentList-titleIcon_1di93_39 {
1543
+ ._ComponentList-title_odh9d_17:active {
1544
+ background-color: var(--puck-color-azure-10);
1545
+ transition: none;
1546
+ }
1547
+ ._ComponentList-titleIcon_odh9d_53 {
1286
1548
  margin-left: auto;
1287
1549
  }
1288
1550
 
1551
+ /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Preview/styles.module.css/#css-module-data */
1552
+ ._PuckPreview_29rm6_1 {
1553
+ height: 100%;
1554
+ }
1555
+ ._PuckPreview-iframe_29rm6_5 {
1556
+ border: none;
1557
+ height: 100%;
1558
+ width: 100%;
1559
+ }
1560
+
1289
1561
  /* css-module:/home/runner/work/puck/puck/packages/core/components/LayerTree/styles.module.css/#css-module-data */
1290
- ._LayerTree_o89yt_1 {
1291
- color: var(--puck-color-grey-2);
1292
- font-family: var(--puck-font-stack);
1562
+ ._LayerTree_1pgw8_1 {
1563
+ color: var(--puck-color-grey-03);
1564
+ font-family: var(--puck-font-family);
1293
1565
  font-size: var(--puck-font-size-xxs);
1294
1566
  margin: 0;
1295
1567
  position: relative;
1296
1568
  list-style: none;
1297
1569
  padding: 0;
1298
1570
  }
1299
- ._LayerTree-zoneTitle_o89yt_11 {
1300
- color: var(--puck-color-grey-4);
1571
+ ._LayerTree-zoneTitle_1pgw8_11 {
1572
+ color: var(--puck-color-grey-05);
1301
1573
  font-size: var(--puck-font-size-xxxs);
1302
1574
  text-transform: uppercase;
1303
1575
  }
1304
- ._LayerTree-helper_o89yt_17 {
1576
+ ._LayerTree-helper_1pgw8_17 {
1305
1577
  text-align: center;
1306
- color: var(--puck-color-grey-6);
1307
- font-family: var(--puck-font-stack);
1578
+ color: var(--puck-color-grey-07);
1308
1579
  margin: 8px 4px;
1309
1580
  }
1310
- ._Layer_o89yt_1 {
1581
+ ._Layer_1pgw8_1 {
1311
1582
  position: relative;
1312
1583
  border: 1px solid transparent;
1584
+ border-radius: 4px;
1313
1585
  }
1314
- ._Layer-inner_o89yt_29 {
1315
- padding-left: 12px;
1316
- padding-right: 4px;
1586
+ ._Layer-inner_1pgw8_29 {
1587
+ border: 1px solid transparent;
1317
1588
  border-radius: 4px;
1589
+ transition: color 50ms ease-in;
1318
1590
  }
1319
- ._Layer--containsZone_o89yt_35 > ._Layer-inner_o89yt_29 {
1591
+ ._Layer--containsZone_1pgw8_35 > ._Layer-inner_1pgw8_29 {
1320
1592
  padding-left: 0;
1321
1593
  }
1322
- ._Layer-clickable_o89yt_39 {
1594
+ ._Layer-clickable_1pgw8_39 {
1323
1595
  align-items: center;
1596
+ background: none;
1597
+ border: 0;
1598
+ border-radius: 4px;
1599
+ color: inherit;
1600
+ cursor: pointer;
1324
1601
  display: flex;
1602
+ font: inherit;
1603
+ padding-left: 12px;
1604
+ padding-right: 4px;
1605
+ width: 100%;
1325
1606
  }
1326
- ._Layer-inner_o89yt_29:hover {
1327
- cursor: pointer;
1607
+ ._Layer-clickable_1pgw8_39:focus-visible {
1608
+ outline: 2px solid var(--puck-color-azure-05);
1609
+ outline-offset: 2px;
1610
+ position: relative;
1611
+ z-index: 1;
1328
1612
  }
1329
- ._Layer_o89yt_1:not(._Layer--isSelected_o89yt_48) > ._Layer-inner_o89yt_29:hover,
1330
- ._Layer--isHovering_o89yt_49 > ._Layer-inner_o89yt_29 {
1331
- color: var(--puck-color-blue);
1332
- background: var(--puck-color-azure-85);
1613
+ @media (hover: hover) and (pointer: fine) {
1614
+ ._Layer_1pgw8_1:not(._Layer--isSelected_1pgw8_61) > ._Layer-inner_1pgw8_29:hover {
1615
+ border-color: var(--puck-color-azure-10);
1616
+ background: var(--puck-color-azure-11);
1617
+ color: var(--puck-color-azure-04);
1618
+ transition: none;
1619
+ }
1333
1620
  }
1334
- ._Layer--isSelected_o89yt_48 {
1335
- background: var(--puck-color-azure-9);
1336
- border-color: var(--puck-color-azure-7);
1337
- border-radius: 4px;
1621
+ ._Layer--isSelected_1pgw8_61 {
1622
+ border-color: var(--puck-color-azure-08);
1338
1623
  }
1339
- ._Layer--isSelected_o89yt_48 > ._Layer-inner_o89yt_29 {
1340
- background: var(--puck-color-azure-85);
1341
- font-weight: 600;
1624
+ ._Layer--isSelected_1pgw8_61 > ._Layer-inner_1pgw8_29 {
1625
+ background: var(--puck-color-azure-10);
1342
1626
  }
1343
- ._Layer--isSelected_o89yt_48 > ._Layer-inner_o89yt_29 > ._Layer-clickable_o89yt_39 > ._Layer-chevron_o89yt_65,
1344
- ._Layer--childIsSelected_o89yt_66 > ._Layer-inner_o89yt_29 > ._Layer-clickable_o89yt_39 > ._Layer-chevron_o89yt_65 {
1627
+ ._Layer--isSelected_1pgw8_61 > ._Layer-inner_1pgw8_29 > ._Layer-clickable_1pgw8_39 > ._Layer-chevron_1pgw8_77,
1628
+ ._Layer--childIsSelected_1pgw8_78 > ._Layer-inner_1pgw8_29 > ._Layer-clickable_1pgw8_39 > ._Layer-chevron_1pgw8_77 {
1345
1629
  transform: scaleY(-1);
1346
1630
  }
1347
- ._Layer-zones_o89yt_70 {
1631
+ ._Layer-zones_1pgw8_82 {
1348
1632
  display: none;
1349
1633
  margin-left: 12px;
1350
1634
  }
1351
- ._Layer--isSelected_o89yt_48 > ._Layer-zones_o89yt_70,
1352
- ._Layer--childIsSelected_o89yt_66 > ._Layer-zones_o89yt_70 {
1635
+ ._Layer--isSelected_1pgw8_61 > ._Layer-zones_1pgw8_82,
1636
+ ._Layer--childIsSelected_1pgw8_78 > ._Layer-zones_1pgw8_82 {
1353
1637
  display: block;
1354
1638
  }
1355
- ._Layer-zones_o89yt_70 > ._LayerTree_o89yt_1 {
1639
+ ._Layer-zones_1pgw8_82 > ._LayerTree_1pgw8_1 {
1356
1640
  margin-left: 12px;
1357
1641
  }
1358
- ._Layer-title_o89yt_84,
1359
- ._LayerTree-zoneTitle_o89yt_11 {
1642
+ ._Layer-title_1pgw8_96,
1643
+ ._LayerTree-zoneTitle_1pgw8_11 {
1360
1644
  display: flex;
1361
1645
  gap: 8px;
1362
1646
  align-items: center;
1363
1647
  margin: 8px 4px;
1364
1648
  overflow-x: hidden;
1365
1649
  }
1366
- ._Layer-name_o89yt_93 {
1650
+ ._Layer-name_1pgw8_105 {
1367
1651
  overflow-x: hidden;
1368
1652
  text-overflow: ellipsis;
1369
1653
  white-space: nowrap;
1370
1654
  }
1371
- ._Layer-icon_o89yt_99 {
1372
- color: var(--puck-color-rose-6);
1655
+ ._Layer-icon_1pgw8_111 {
1656
+ color: var(--puck-color-rose-07);
1373
1657
  margin-top: 4px;
1374
1658
  }
1375
- ._Layer-zoneIcon_o89yt_104 {
1376
- color: var(--puck-color-grey-7);
1659
+ ._Layer-zoneIcon_1pgw8_116 {
1660
+ color: var(--puck-color-grey-08);
1377
1661
  margin-top: 4px;
1378
1662
  }
1663
+
1664
+ /* css-module:/home/runner/work/puck/puck/packages/core/components/ViewportControls/styles.module.css/#css-module-data */
1665
+ ._ViewportControls_14bhf_1 {
1666
+ display: flex;
1667
+ background: var(--puck-color-grey-11);
1668
+ box-sizing: border-box;
1669
+ border-left: 2px solid var(--puck-color-grey-11);
1670
+ justify-content: center;
1671
+ gap: 8px;
1672
+ min-width: 392px;
1673
+ padding-bottom: 16px;
1674
+ padding-left: var(--puck-space-px);
1675
+ padding-right: var(--puck-space-px);
1676
+ z-index: 1;
1677
+ }
1678
+ ._ViewportControls-divider_14bhf_15 {
1679
+ border-right: 1px solid var(--puck-color-grey-09);
1680
+ margin-left: 8px;
1681
+ margin-right: 8px;
1682
+ }
1683
+ ._ViewportControls-zoomSelect_14bhf_21 {
1684
+ appearance: none;
1685
+ 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;
1686
+ background-size: 10px;
1687
+ background-position: calc(100% - 12px) calc(50% + 3px);
1688
+ background-repeat: no-repeat;
1689
+ border: 0;
1690
+ font-size: var(--puck-font-size-xxxs);
1691
+ width: 96px;
1692
+ }
1693
+ ._ViewportButton--isActive_14bhf_33 ._ViewportButton-inner_14bhf_33 {
1694
+ color: var(--puck-color-azure-04);
1695
+ }