@measured/puck 0.13.2-canary.7d861f5 → 0.14.0-canary.03dd90b

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-5804f327.d.ts → Config-29dc2731.d.ts} +36 -11
  2. package/dist/index.css +894 -570
  3. package/dist/index.d.ts +44 -8
  4. package/dist/index.js +1406 -655
  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);
183
184
  }
184
- ._Button--primary_1brfa_44 {
185
- background: var(--puck-color-blue);
185
+ ._Button_8fn3a_1:focus-visible {
186
+ outline: 2px solid var(--puck-color-azure-05);
187
+ outline-offset: 2px;
186
188
  }
187
- ._Button--primary_1brfa_44:hover {
188
- opacity: 0.7;
189
- transition: opacity 50ms ease-in;
189
+ @media (hover: hover) and (pointer: fine) {
190
+ ._Button--primary_8fn3a_48:hover {
191
+ background-color: var(--puck-color-azure-03);
192
+ }
190
193
  }
191
- ._Button--secondary_1brfa_53 {
192
- color: currentColor;
193
- border: 1px solid currentColor;
194
+ ._Button--primary_8fn3a_48:active {
195
+ background-color: var(--puck-color-azure-02);
196
+ }
197
+ ._Button--secondary_8fn3a_67 {
198
+ border: 1px solid var(--puck-color-grey-01);
199
+ color: var(--puck-color-black);
194
200
  }
195
- ._Button--secondary_1brfa_53:hover {
196
- background-color: var(--puck-color-grey-10);
197
- color: black;
198
- opacity: 0.7;
201
+ @media (hover: hover) and (pointer: fine) {
202
+ ._Button--secondary_8fn3a_67:hover {
203
+ background-color: var(--puck-color-azure-12);
204
+ }
205
+ }
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_1542z_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_1542z_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_1542z_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_1542z_16::before,
298
+ ._DraggableComponent-contents_1542z_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_1542z_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;
286
312
  }
287
- ._DraggableComponent-loadingOverlay_foluk_39 {
313
+ ._DraggableComponent_1542z_1:focus-visible > ._DraggableComponent-overlay_1542z_29 {
314
+ outline: 1px solid var(--puck-color-azure-05);
315
+ }
316
+ ._DraggableComponent--isDragging_1542z_11 > ._DraggableComponent-overlay_1542z_29 {
317
+ outline: 1px var(--puck-color-azure-09) solid !important;
318
+ }
319
+ ._DraggableComponent-loadingOverlay_1542z_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_1542z_1:hover:not(._DraggableComponent--isLocked_1542z_65) > ._DraggableComponent-overlay_1542z_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_1542z_71 > ._DraggableComponent-overlay_1542z_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_1542z_1:not(._DraggableComponent--isSelected_1542z_76):hover > ._DraggableComponent-overlay_1542z_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_1542z_81 > ._DraggableComponent-overlay_1542z_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_1542z_1:not(._DraggableComponent--isSelected_1542z_76):has(._DraggableComponent_1542z_1:hover > ._DraggableComponent-overlay_1542z_29) > ._DraggableComponent-overlay_1542z_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_1542z_76 > ._DraggableComponent-overlay_1542z_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_1542z_76 > ._DraggableComponent-actionsOverlay_1542z_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_1542z_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_1542z_76 > ._DraggableComponent-actionsOverlay_1542z_97 > ._DraggableComponent-actions_1542z_97 {
348
377
  display: flex;
349
378
  }
350
- ._DraggableComponent-actionsLabel_foluk_120 {
351
- color: var(--puck-color-grey-7);
379
+ ._DraggableComponent-actionsLabel_1542z_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_1542z_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_1542z_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_1542z_97:hover {
412
+ color: var(--puck-color-azure-06);
413
+ transition: none;
414
+ }
415
+ }
416
+ ._DraggableComponent-action_1542z_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_1lfcm_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_1lfcm_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_1lfcm_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_1lfcm_36._Puck--rightSideBarVisible_1lfcm_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_1lfcm_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_1lfcm_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_1lfcm_19 {
645
714
  --puck-frame-width: auto;
646
715
  }
647
716
  }
648
717
  @media (min-width: 990px) {
649
- ._Puck_17hk3_19 {
718
+ ._Puck_1lfcm_19 {
650
719
  --puck-side-bar-width: 256px;
651
720
  }
652
721
  }
653
722
  @media (min-width: 1198px) {
654
- ._Puck_17hk3_19 {
723
+ ._Puck_1lfcm_19 {
655
724
  --puck-side-bar-width: 274px;
656
725
  }
657
726
  }
658
727
  @media (min-width: 1398px) {
659
- ._Puck_17hk3_19 {
728
+ ._Puck_1lfcm_19 {
660
729
  --puck-side-bar-width: 290px;
661
730
  }
662
731
  }
663
732
  @media (min-width: 1598px) {
664
- ._Puck_17hk3_19 {
733
+ ._Puck_1lfcm_19 {
665
734
  --puck-side-bar-width: 320px;
666
735
  }
667
736
  }
668
- ._Puck-header_17hk3_95 {
737
+ ._Puck-header_1lfcm_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_1lfcm_105 {
677
746
  align-items: end;
678
747
  display: grid;
679
748
  gap: var(--puck-space-px);
@@ -682,255 +751,295 @@
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_1lfcm_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_1lfcm_42 ._Puck-rightSideBarToggle_1lfcm_122,
761
+ ._Puck--leftSideBarVisible_1lfcm_36 ._Puck-leftSideBarToggle_1lfcm_123 {
693
762
  color: var(--puck-color-black);
694
763
  }
695
- ._Puck-headerTitle_17hk3_126 {
764
+ ._Puck-headerTitle_1lfcm_127 {
696
765
  align-self: center;
697
766
  }
698
- ._Puck-headerPath_17hk3_130 {
767
+ ._Puck-headerPath_1lfcm_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_1lfcm_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_1lfcm_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_1lfcm_149 ._Puck-menuButton_1lfcm_144 {
714
783
  color: var(--puck-color-black);
715
784
  }
716
785
  @media (min-width: 638px) {
717
- ._Puck-menuButton_17hk3_143 {
786
+ ._Puck-menuButton_1lfcm_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_1lfcm_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 {
730
- display: flex;
731
- flex-direction: column;
732
- grid-area: editor;
733
- overflow: auto;
734
- position: relative;
735
- }
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);
740
- min-width: 321px;
741
- }
742
- @media (min-width: 1198px) {
743
- ._Puck-root_17hk3_175 {
744
- margin: calc(var(--puck-space-px) * 1.5);
745
- }
746
- }
747
- ._Puck-rightSideBar_17hk3_121 {
798
+ ._Puck-rightSideBar_1lfcm_122 {
748
799
  background: var(--puck-color-white);
749
- border-left: 1px solid var(--puck-color-grey-8);
800
+ border-left: 1px solid var(--puck-color-grey-09);
750
801
  display: flex;
751
802
  flex-direction: column;
752
- font-family: var(--puck-font-stack);
753
803
  grid-area: right;
754
804
  overflow-y: auto;
755
805
  }
756
806
 
757
807
  /* 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);
808
+ ._Input_1qi5b_1 {
809
+ color: var(--puck-color-grey-04);
760
810
  padding: 16px;
761
811
  padding-bottom: 12px;
762
812
  display: block;
763
- font-family: var(--puck-font-stack);
764
813
  }
765
- ._Input_1v7zr_1 ._Input_1v7zr_1 {
814
+ ._Input_1qi5b_1 ._Input_1qi5b_1 {
766
815
  padding: 0px;
767
816
  }
768
- ._Input_1v7zr_1 * {
817
+ ._Input_1qi5b_1 * {
769
818
  box-sizing: border-box;
770
819
  }
771
- ._Input_1v7zr_1 + ._Input_1v7zr_1 {
772
- border-top: 1px solid var(--puck-color-grey-8);
820
+ ._Input_1qi5b_1 + ._Input_1qi5b_1 {
821
+ border-top: 1px solid var(--puck-color-grey-09);
773
822
  margin-top: 8px;
774
823
  }
775
- ._Input_1v7zr_1 ._Input_1v7zr_1 + ._Input_1v7zr_1 {
824
+ ._Input_1qi5b_1 ._Input_1qi5b_1 + ._Input_1qi5b_1 {
776
825
  border-top: 0px;
777
826
  margin-top: 12px;
778
827
  }
779
- ._Input-label_1v7zr_27 {
828
+ ._Input-label_1qi5b_26 {
780
829
  align-items: center;
781
830
  display: flex;
782
831
  padding-bottom: 12px;
783
832
  font-size: var(--puck-font-size-xxs);
784
833
  font-weight: 600;
785
834
  }
786
- ._Input-labelIcon_1v7zr_35 {
787
- color: var(--puck-color-grey-6);
835
+ ._Input-labelIcon_1qi5b_34 {
836
+ color: var(--puck-color-grey-07);
837
+ display: flex;
788
838
  margin-right: 4px;
789
839
  padding-left: 4px;
790
840
  }
791
- ._Input-disabledIcon_1v7zr_41 {
792
- color: var(--puck-color-grey-4);
841
+ ._Input-disabledIcon_1qi5b_41 {
842
+ color: var(--puck-color-grey-05);
793
843
  margin-left: auto;
794
844
  }
795
- ._Input-input_1v7zr_46 {
796
- background: white;
845
+ ._Input-input_1qi5b_46 {
846
+ background: var(--puck-color-white);
797
847
  border-width: 1px;
798
848
  border-style: solid;
799
- border-color: var(--puck-color-grey-8);
849
+ border-color: var(--puck-color-grey-09);
800
850
  border-radius: 4px;
801
851
  font-family: inherit;
802
852
  font-size: 14px;
803
853
  padding: 12px 15px;
854
+ transition: border-color 50ms ease-in;
804
855
  width: 100%;
805
856
  }
806
- select._Input-input_1v7zr_46 {
857
+ select._Input-input_1qi5b_46 {
807
858
  appearance: none;
808
859
  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
860
  background-size: 12px;
810
861
  background-position: calc(100% - 12px) calc(50% + 3px);
811
862
  background-repeat: no-repeat;
812
- background-color: white;
863
+ background-color: var(--puck-color-white);
864
+ cursor: pointer;
813
865
  }
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;
866
+ @media (hover: hover) and (pointer: fine) {
867
+ ._Input_1qi5b_1:has(> input):hover ._Input-input_1qi5b_46:not([readonly]),
868
+ ._Input_1qi5b_1:has(> textarea):hover ._Input-input_1qi5b_46:not([readonly]) {
869
+ border-color: var(--puck-color-grey-05);
870
+ transition: none;
871
+ }
872
+ ._Input_1qi5b_1:has(> select):hover ._Input-input_1qi5b_46:not([disabled]) {
873
+ background-color: var(--puck-color-azure-12);
874
+ 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>");
875
+ border-color: var(--puck-color-grey-05);
876
+ transition: none;
877
+ }
820
878
  }
821
- ._Input-input_1v7zr_46:hover {
822
- border-color: var(--puck-color-neutral-3);
879
+ ._Input-input_1qi5b_46:focus {
880
+ border-color: var(--puck-color-grey-05);
881
+ outline: 2px solid var(--puck-color-azure-05);
882
+ transition: none;
823
883
  }
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;
884
+ ._Input--readOnly_1qi5b_90 > ._Input-input_1qi5b_46,
885
+ ._Input--readOnly_1qi5b_90 > select._Input-input_1qi5b_46 {
886
+ background-color: var(--puck-color-grey-11);
887
+ border-color: var(--puck-color-grey-09);
888
+ color: var(--puck-color-grey-04);
889
+ cursor: default;
890
+ opacity: 1;
891
+ outline: 0;
892
+ transition: none;
828
893
  }
829
- ._Input-radioGroupItems_1v7zr_87 {
894
+ ._Input-radioGroupItems_1qi5b_101 {
830
895
  display: flex;
831
- border: 1px solid var(--puck-color-grey-7);
896
+ border: 1px solid var(--puck-color-grey-09);
832
897
  border-radius: 4px;
833
898
  flex-wrap: wrap;
834
- overflow: hidden;
835
899
  }
836
- ._Input-radio_1v7zr_87 {
837
- border-right: 1px solid var(--puck-color-grey-7);
900
+ ._Input-radio_1qi5b_101 {
901
+ border-right: 1px solid var(--puck-color-grey-09);
838
902
  flex-grow: 1;
839
903
  }
840
- ._Input-radio_1v7zr_87:last-of-type {
841
- border-right: none;
904
+ ._Input-radio_1qi5b_101:first-of-type {
905
+ border-bottom-left-radius: 4px;
906
+ border-top-left-radius: 4px;
907
+ }
908
+ ._Input-radio_1qi5b_101:first-of-type ._Input-radioInner_1qi5b_118 {
909
+ border-bottom-left-radius: 3px;
910
+ border-top-left-radius: 3px;
911
+ }
912
+ ._Input-radio_1qi5b_101:last-of-type {
913
+ border-bottom-right-radius: 4px;
914
+ border-right: 0;
915
+ border-top-right-radius: 4px;
916
+ }
917
+ ._Input-radio_1qi5b_101:last-of-type ._Input-radioInner_1qi5b_118 {
918
+ border-bottom-right-radius: 3px;
919
+ border-top-right-radius: 3px;
842
920
  }
843
- ._Input-radioInner_1v7zr_104 {
844
- background-color: white;
845
- color: var(--puck-color-grey-4);
921
+ ._Input-radioInner_1qi5b_118 {
922
+ background-color: var(--puck-color-white);
923
+ color: var(--puck-color-grey-04);
924
+ cursor: pointer;
846
925
  font-size: var(--puck-font-size-xxxs);
847
926
  padding: 8px 12px;
848
927
  text-align: center;
928
+ transition: background-color 50ms ease-in;
849
929
  }
850
- ._Input-radioInner_1v7zr_104:hover {
851
- background-color: var(--puck-color-azure-9);
852
- cursor: pointer;
930
+ ._Input-radio_1qi5b_101:has(:focus-visible) {
931
+ outline: 2px solid var(--puck-color-azure-05);
932
+ outline-offset: 2px;
933
+ position: relative;
853
934
  }
854
- ._Input--readOnly_1v7zr_69 ._Input-radioGroupItems_1v7zr_87 {
855
- border-color: var(--puck-color-grey-8);
935
+ @media (hover: hover) and (pointer: fine) {
936
+ ._Input-radioInner_1qi5b_118:hover {
937
+ background-color: var(--puck-color-azure-12);
938
+ transition: none;
939
+ }
856
940
  }
857
- ._Input--readOnly_1v7zr_69 ._Input-radioInner_1v7zr_104 {
858
- background-color: var(--puck-color-grey-11);
859
- color: var(--puck-color-grey-5);
941
+ ._Input--readOnly_1qi5b_90 ._Input-radioInner_1qi5b_118 {
942
+ background-color: var(--puck-color-white);
943
+ color: var(--puck-color-grey-04);
944
+ cursor: default;
860
945
  }
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);
946
+ ._Input-radio_1qi5b_101 ._Input-radioInput_1qi5b_163:checked ~ ._Input-radioInner_1qi5b_118 {
947
+ background-color: var(--puck-color-azure-11);
948
+ color: var(--puck-color-azure-04);
864
949
  font-weight: 500;
865
950
  }
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);
951
+ ._Input--readOnly_1qi5b_90 ._Input-radioInput_1qi5b_163:checked ~ ._Input-radioInner_1qi5b_118 {
952
+ background-color: var(--puck-color-grey-11);
953
+ color: var(--puck-color-grey-04);
869
954
  }
870
- ._Input-radio_1v7zr_87 ._Input-radioInput_1v7zr_126 {
871
- display: none;
955
+ ._Input-radio_1qi5b_101 ._Input-radioInput_1qi5b_163 {
956
+ clip: rect(0 0 0 0);
957
+ clip-path: inset(100%);
958
+ height: 1px;
959
+ overflow: hidden;
960
+ position: absolute;
961
+ white-space: nowrap;
962
+ width: 1px;
872
963
  }
873
- textarea._Input-input_1v7zr_46 {
964
+ textarea._Input-input_1qi5b_46 {
874
965
  margin-bottom: -4px;
875
966
  }
876
967
 
877
968
  /* css-module:/home/runner/work/puck/puck/packages/core/components/InputOrGroup/fields/ArrayField/styles.module.css/#css-module-data */
878
- ._ArrayField_1auyc_5 {
969
+ ._ArrayField_1txra_5 {
879
970
  display: flex;
880
971
  flex-direction: column;
881
- background-color: var(--puck-color-grey-8);
882
- border: 1px solid var(--puck-color-grey-8);
972
+ background-color: var(--puck-color-grey-09);
973
+ border: 1px solid var(--puck-color-grey-09);
883
974
  border-radius: 4px;
884
975
  }
885
- ._ArrayField--isDraggingFrom_1auyc_13 {
886
- background-color: var(--puck-color-azure-9);
976
+ ._ArrayField--isDraggingFrom_1txra_13 {
977
+ background-color: var(--puck-color-azure-11);
887
978
  }
888
- ._ArrayField-addButton_1auyc_17 {
889
- background-color: white;
979
+ ._ArrayField-addButton_1txra_17 {
980
+ background-color: var(--puck-color-white);
890
981
  border: none;
891
982
  border-radius: 4px;
892
983
  display: flex;
893
- color: var(--puck-color-azure-4);
984
+ color: var(--puck-color-azure-05);
894
985
  justify-content: center;
895
986
  cursor: pointer;
896
987
  width: 100%;
897
988
  margin: 0;
898
989
  padding: 16px;
899
990
  text-align: left;
991
+ transition: background-color 50ms ease-in;
900
992
  }
901
- ._ArrayField--hasItems_1auyc_31 > ._ArrayField-addButton_1auyc_17 {
993
+ ._ArrayField--hasItems_1txra_32 > ._ArrayField-addButton_1txra_17 {
902
994
  border-top-left-radius: 0;
903
995
  border-top-right-radius: 0;
904
996
  }
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);
997
+ ._ArrayField-addButton_1txra_17:focus-visible {
998
+ outline: 2px solid var(--puck-color-azure-05);
999
+ outline-offset: 2px;
1000
+ position: relative;
908
1001
  }
909
- ._ArrayFieldItem_1auyc_45 {
910
- background: white;
1002
+ @media (hover: hover) and (pointer: fine) {
1003
+ ._ArrayField_1txra_5:not(._ArrayField--isDraggingFrom_1txra_13) > ._ArrayField-addButton_1txra_17:hover {
1004
+ background: var(--puck-color-azure-12);
1005
+ color: var(--puck-color-azure-04);
1006
+ transition: none;
1007
+ }
1008
+ }
1009
+ ._ArrayField_1txra_5:not(._ArrayField--isDraggingFrom_1txra_13) > ._ArrayField-addButton_1txra_17:active {
1010
+ background: var(--puck-color-azure-11);
1011
+ color: var(--puck-color-azure-04);
1012
+ transition: none;
1013
+ }
1014
+ ._ArrayFieldItem_1txra_61 {
1015
+ background: var(--puck-color-white);
911
1016
  border-top-left-radius: 4px;
912
1017
  border-top-right-radius: 4px;
913
1018
  display: block;
914
1019
  margin-bottom: 1px;
915
1020
  }
916
- ._ArrayField--isDraggingFrom_1auyc_13 > ._ArrayFieldItem_1auyc_45:not(._ArrayFieldItem--isDragging_1auyc_53) {
917
- border-bottom: 1px solid var(--puck-color-grey-8);
1021
+ ._ArrayField--isDraggingFrom_1txra_13 > ._ArrayFieldItem_1txra_61:not(._ArrayFieldItem--isDragging_1txra_69) {
1022
+ border-bottom: 1px solid var(--puck-color-grey-09);
918
1023
  margin-bottom: 0;
919
1024
  }
920
- ._ArrayFieldItem--isExpanded_1auyc_58 {
1025
+ ._ArrayFieldItem--isExpanded_1txra_74 {
921
1026
  border-bottom: 0;
922
1027
  outline-offset: 0px !important;
923
- outline: 1px solid var(--puck-color-azure-6) !important;
1028
+ outline: 1px solid var(--puck-color-azure-07) !important;
1029
+ }
1030
+ ._ArrayFieldItem--isDragging_1txra_69 {
1031
+ box-shadow: color-mix(in srgb, var(--puck-color-grey-06) 25%, transparent) 0 3px 6px 0;
924
1032
  }
925
- ._ArrayFieldItem--isDragging_1auyc_53 {
926
- box-shadow: rgba(140, 152, 164, 0.25) 0 3px 6px 0;
1033
+ ._ArrayFieldItem--isDragging_1txra_69 ._ArrayFieldItem-summary_1txra_84:active {
1034
+ background-color: var(--puck-color-white);
927
1035
  }
928
- ._ArrayFieldItem_1auyc_45 + ._ArrayFieldItem_1auyc_45 {
1036
+ ._ArrayFieldItem_1txra_61 + ._ArrayFieldItem_1txra_61 {
929
1037
  border-top-left-radius: 0;
930
1038
  border-top-right-radius: 0;
931
1039
  }
932
- ._ArrayFieldItem-summary_1auyc_73 {
933
- color: var(--puck-color-grey-3);
1040
+ ._ArrayFieldItem-summary_1txra_84 {
1041
+ color: var(--puck-color-grey-04);
1042
+ cursor: pointer;
934
1043
  display: flex;
935
1044
  align-items: center;
936
1045
  gap: 2px;
@@ -940,179 +1049,236 @@ textarea._Input-input_1v7zr_46 {
940
1049
  padding: 12px 15px;
941
1050
  position: relative;
942
1051
  overflow: hidden;
1052
+ transition: background-color 50ms ease-in;
943
1053
  }
944
- ._ArrayFieldItem--readOnly_1auyc_86 > ._ArrayFieldItem-summary_1auyc_73 {
945
- background-color: var(--puck-color-grey-11);
946
- color: var(--puck-color-grey-5);
947
- }
948
- ._ArrayFieldItem--isExpanded_1auyc_58 > ._ArrayFieldItem-summary_1auyc_73 {
949
- font-weight: 600;
1054
+ ._ArrayFieldItem--readOnly_1txra_108 > ._ArrayFieldItem-summary_1txra_84 {
1055
+ background-color: var(--puck-color-grey-12);
1056
+ color: var(--puck-color-grey-06);
950
1057
  }
951
- ._ArrayFieldItem_1auyc_45:first-of-type > ._ArrayFieldItem-summary_1auyc_73 {
1058
+ ._ArrayFieldItem_1txra_61:first-of-type > ._ArrayFieldItem-summary_1txra_84 {
952
1059
  border-top-left-radius: 4px;
953
1060
  border-top-right-radius: 4px;
954
1061
  }
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);
1062
+ ._ArrayFieldItem-summary_1txra_84:focus-visible {
1063
+ outline: 2px solid var(--puck-color-azure-05);
1064
+ outline-offset: 2px;
1065
+ }
1066
+ @media (hover: hover) and (pointer: fine) {
1067
+ ._ArrayFieldItem-summary_1txra_84:hover {
1068
+ background-color: var(--puck-color-azure-12);
1069
+ transition: none;
1070
+ }
960
1071
  }
961
- ._ArrayFieldItem-body_1auyc_107 {
1072
+ ._ArrayFieldItem-summary_1txra_84:active {
1073
+ background-color: var(--puck-color-azure-11);
1074
+ transition: none;
1075
+ }
1076
+ ._ArrayFieldItem--isExpanded_1txra_74 > ._ArrayFieldItem-summary_1txra_84 {
1077
+ background: var(--puck-color-azure-11);
1078
+ color: var(--puck-color-azure-04);
1079
+ font-weight: 600;
1080
+ transition: none;
1081
+ }
1082
+ ._ArrayFieldItem-body_1txra_142 {
962
1083
  display: none;
963
1084
  }
964
- ._ArrayFieldItem--isExpanded_1auyc_58 > ._ArrayFieldItem-body_1auyc_107 {
1085
+ ._ArrayFieldItem--isExpanded_1txra_74 > ._ArrayFieldItem-body_1txra_142 {
965
1086
  display: block;
966
1087
  }
967
- ._ArrayFieldItem-fieldset_1auyc_115 {
1088
+ ._ArrayFieldItem-fieldset_1txra_150 {
968
1089
  border: none;
969
- border-top: 1px solid var(--puck-color-grey-8);
1090
+ border-top: 1px solid var(--puck-color-grey-09);
970
1091
  margin: 0;
971
1092
  padding: 16px 15px;
972
1093
  }
973
- ._ArrayFieldItem-rhs_1auyc_122 {
1094
+ ._ArrayFieldItem-rhs_1txra_157 {
974
1095
  display: flex;
975
1096
  gap: 4px;
976
1097
  align-items: center;
977
1098
  }
978
- ._ArrayFieldItem-actions_1auyc_128 {
979
- color: var(--puck-color-grey-3);
1099
+ ._ArrayFieldItem-actions_1txra_163 {
1100
+ color: var(--puck-color-grey-04);
980
1101
  display: flex;
981
1102
  gap: 4px;
982
1103
  opacity: 0;
983
1104
  }
984
- ._ArrayFieldItem-summary_1auyc_73:hover > ._ArrayFieldItem-rhs_1auyc_122 > ._ArrayFieldItem-actions_1auyc_128 {
1105
+ ._ArrayFieldItem-summary_1txra_84:focus-within > ._ArrayFieldItem-rhs_1txra_157 > ._ArrayFieldItem-actions_1txra_163,
1106
+ ._ArrayFieldItem-summary_1txra_84:hover > ._ArrayFieldItem-rhs_1txra_157 > ._ArrayFieldItem-actions_1txra_163 {
985
1107
  opacity: 1;
986
1108
  }
987
- ._ArrayFieldItem-action_1auyc_128:hover {
988
- background: var(--puck-color-grey-9);
989
- border-radius: 4px;
990
- cursor: pointer;
991
- }
992
1109
 
993
1110
  /* 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 {
1111
+ ._ExternalInput-actions_19obq_1 {
998
1112
  display: flex;
999
1113
  }
1000
- ._ExternalInput-button_s6fxy_9 {
1114
+ ._ExternalInput-button_19obq_5 {
1001
1115
  display: flex;
1002
1116
  gap: 8px;
1003
1117
  align-items: center;
1004
1118
  justify-content: center;
1005
- background-color: white;
1006
- border: 1px solid var(--puck-color-grey-8);
1119
+ background-color: var(--puck-color-white);
1120
+ border: 1px solid var(--puck-color-grey-09);
1007
1121
  border-radius: 4px;
1008
- color: var(--puck-color-azure-4);
1122
+ color: var(--puck-color-azure-04);
1123
+ cursor: pointer;
1009
1124
  padding: 12px 16px;
1010
1125
  font-weight: 500;
1011
1126
  white-space: nowrap;
1012
1127
  text-overflow: ellipsis;
1128
+ transition: background-color 50ms ease-in;
1013
1129
  position: relative;
1014
1130
  overflow: hidden;
1015
1131
  flex-grow: 1;
1016
1132
  }
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);
1133
+ ._ExternalInput--dataSelected_19obq_25 ._ExternalInput-button_19obq_5 {
1134
+ color: var(--puck-color-grey-03);
1026
1135
  display: block;
1027
1136
  border-top-right-radius: 0px;
1028
1137
  border-bottom-right-radius: 0px;
1029
1138
  }
1030
- ._ExternalInput-detachButton_s6fxy_28 {
1031
- border: 1px solid var(--puck-color-grey-8);
1139
+ ._ExternalInput-detachButton_19obq_32 {
1140
+ border: 1px solid var(--puck-color-grey-09);
1032
1141
  border-top-right-radius: 4px;
1033
1142
  border-bottom-right-radius: 4px;
1034
- background-color: var(--puck-color-grey-11);
1035
- color: var(--puck-color-grey-4);
1143
+ background-color: var(--puck-color-grey-12);
1144
+ color: var(--puck-color-grey-05);
1145
+ cursor: pointer;
1036
1146
  display: flex;
1037
1147
  gap: 8px;
1038
1148
  align-items: center;
1039
1149
  justify-content: center;
1040
1150
  padding: 8px 12px;
1151
+ position: relative;
1152
+ transition: background-color 50ms ease-in, color 50ms ease-in;
1041
1153
  margin-left: -1px;
1042
1154
  }
1043
- ._ExternalInputModal_s6fxy_56 {
1044
- color: black;
1155
+ ._ExternalInput-button_19obq_5:focus-visible,
1156
+ ._ExternalInput-detachButton_19obq_32:focus-visible {
1157
+ outline: 2px solid var(--puck-color-azure-05);
1158
+ outline-offset: 2px;
1159
+ z-index: 1;
1160
+ }
1161
+ @media (hover: hover) and (pointer: fine) {
1162
+ ._ExternalInput-button_19obq_5:hover,
1163
+ ._ExternalInput-detachButton_19obq_32:hover {
1164
+ background: var(--puck-color-azure-12);
1165
+ transition: none;
1166
+ }
1167
+ ._ExternalInput-detachButton_19obq_32:hover {
1168
+ color: var(--puck-color-azure-04);
1169
+ }
1170
+ }
1171
+ ._ExternalInput-button_19obq_5:active,
1172
+ ._ExternalInput-detachButton_19obq_32:active {
1173
+ background: var(--puck-color-azure-11);
1174
+ transition: none;
1175
+ }
1176
+ ._ExternalInputModal_19obq_74 {
1177
+ color: var(--puck-color-black);
1178
+ display: grid;
1179
+ grid-template-rows: min-content minmax(128px, 100%) min-content;
1180
+ grid-template-columns: 100%;
1181
+ position: relative;
1182
+ min-height: 50dvh;
1183
+ max-height: 90dvh;
1184
+ }
1185
+ ._ExternalInputModal-grid_19obq_84 {
1045
1186
  display: flex;
1046
1187
  flex-direction: column;
1047
- position: relative;
1048
- max-height: 90vh;
1049
1188
  }
1050
- ._ExternalInputModal-masthead_s6fxy_64 {
1051
- background-color: white;
1189
+ @media (min-width: 458px) {
1190
+ ._ExternalInputModal-grid_19obq_84 {
1191
+ display: grid;
1192
+ grid-template-columns: 100%;
1193
+ }
1194
+ ._ExternalInputModal--filtersToggled_19obq_95 ._ExternalInputModal-grid_19obq_84 {
1195
+ grid-template-columns: 25% 75%;
1196
+ }
1197
+ }
1198
+ ._ExternalInputModal-filters_19obq_100 {
1199
+ border-bottom: 1px solid var(--puck-color-grey-09);
1200
+ }
1201
+ ._ExternalInputModal--filtersToggled_19obq_95 ._ExternalInputModal-filters_19obq_100 {
1202
+ display: none;
1203
+ }
1204
+ @media (min-width: 458px) {
1205
+ ._ExternalInputModal-filters_19obq_100 {
1206
+ border-right: 1px solid var(--puck-color-grey-09);
1207
+ display: none;
1208
+ }
1209
+ ._ExternalInputModal--filtersToggled_19obq_95 ._ExternalInputModal-filters_19obq_100 {
1210
+ display: block;
1211
+ }
1212
+ }
1213
+ ._ExternalInputModal-masthead_19obq_119 {
1214
+ background-color: var(--puck-color-grey-12);
1215
+ border-bottom: 1px solid var(--puck-color-grey-09);
1052
1216
  display: flex;
1053
1217
  flex-wrap: wrap;
1054
1218
  gap: 24px;
1055
- padding: 32px 24px;
1219
+ padding: 24px;
1056
1220
  }
1057
- ._ExternalInputModal-tableWrapper_s6fxy_72 {
1221
+ ._ExternalInputModal-tableWrapper_19obq_128 {
1058
1222
  position: relative;
1059
1223
  overflow-x: auto;
1060
1224
  overflow-y: auto;
1061
1225
  flex-grow: 1;
1062
1226
  }
1063
- ._ExternalInputModal-table_s6fxy_72 {
1227
+ ._ExternalInputModal-table_19obq_128 {
1064
1228
  border-collapse: unset;
1065
1229
  border-spacing: 0px;
1066
- color: var(--puck-color-neutral-4);
1230
+ color: var(--puck-color-grey-02);
1067
1231
  position: relative;
1068
1232
  z-index: 0;
1069
1233
  min-width: 100%;
1070
1234
  }
1071
- ._ExternalInputModal-thead_s6fxy_88 {
1235
+ ._ExternalInputModal-thead_19obq_144 {
1236
+ background-color: var(--puck-color-white);
1072
1237
  position: sticky;
1073
1238
  top: 0;
1074
1239
  z-index: 1;
1075
1240
  }
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;
1241
+ ._ExternalInputModal-th_19obq_144 {
1242
+ border-bottom: 1px solid var(--puck-color-grey-09);
1243
+ color: var(--puck-color-grey-04);
1244
+ font-weight: 500;
1245
+ font-size: 14px;
1080
1246
  padding: 16px 24px;
1081
- opacity: 0.9;
1082
1247
  }
1083
- ._ExternalInputModal-td_s6fxy_102 {
1084
- font-family: var(--puck-font-stack);
1248
+ ._ExternalInputModal-td_19obq_159 {
1249
+ border-bottom: 1px solid var(--puck-color-grey-10);
1085
1250
  padding: 16px 24px;
1086
1251
  }
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 {
1252
+ ._ExternalInputModal-tr_19obq_164 ._ExternalInputModal-td_19obq_159:first-of-type {
1094
1253
  font-weight: 500;
1254
+ width: 1%;
1255
+ white-space: nowrap;
1095
1256
  }
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;
1257
+ @media (hover: hover) and (pointer: fine) {
1258
+ ._ExternalInputModal-tbody_19obq_171 ._ExternalInputModal-tr_19obq_164:hover {
1259
+ background: var(--puck-color-azure-12);
1260
+ color: var(--puck-color-azure-04);
1261
+ cursor: pointer;
1262
+ position: relative;
1263
+ margin-left: -5px;
1264
+ }
1265
+ ._ExternalInputModal-tbody_19obq_171 ._ExternalInputModal-tr_19obq_164:hover ._ExternalInputModal-td_19obq_159:first-of-type {
1266
+ border-left: 4px solid var(--puck-color-azure-04);
1267
+ padding-left: 20px;
1268
+ }
1102
1269
  }
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;
1270
+ ._ExternalInputModal-tbody_19obq_171 ._ExternalInputModal-tr_19obq_164:last-of-type ._ExternalInputModal-td_19obq_159 {
1271
+ border-bottom: none;
1106
1272
  }
1107
- ._ExternalInputModal-tableWrapper_s6fxy_72 {
1273
+ ._ExternalInputModal-tableWrapper_19obq_128 {
1108
1274
  display: none;
1109
1275
  }
1110
- ._ExternalInputModal--hasData_s6fxy_138 ._ExternalInputModal-tableWrapper_s6fxy_72 {
1276
+ ._ExternalInputModal--hasData_19obq_197 ._ExternalInputModal-tableWrapper_19obq_128 {
1111
1277
  display: block;
1112
1278
  }
1113
- ._ExternalInputModal-loadingBanner_s6fxy_142 {
1279
+ ._ExternalInputModal-loadingBanner_19obq_201 {
1114
1280
  display: none;
1115
- background-color: #ffffff90;
1281
+ background-color: color-mix(in srgb, var(--puck-color-white) 90%, transparent);
1116
1282
  padding: 64px;
1117
1283
  align-items: center;
1118
1284
  justify-content: center;
@@ -1122,50 +1288,64 @@ textarea._Input-input_1v7zr_46 {
1122
1288
  right: 0;
1123
1289
  bottom: 0;
1124
1290
  }
1125
- ._ExternalInputModal--isLoading_s6fxy_155 ._ExternalInputModal-loadingBanner_s6fxy_142 {
1291
+ ._ExternalInputModal--isLoading_19obq_218 ._ExternalInputModal-loadingBanner_19obq_201 {
1126
1292
  display: flex;
1127
1293
  }
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 {
1294
+ ._ExternalInputModal-searchForm_19obq_222 {
1138
1295
  display: flex;
1139
- margin-left: auto;
1140
- height: 43px;
1296
+ flex-wrap: wrap;
1141
1297
  gap: 12px;
1298
+ flex-grow: 1;
1299
+ }
1300
+ @media (min-width: 458px) {
1301
+ ._ExternalInputModal-searchForm_19obq_222 {
1302
+ flex-wrap: nowrap;
1303
+ }
1142
1304
  }
1143
- ._ExternalInputModal-search_s6fxy_171 {
1305
+ ._ExternalInputModal-search_19obq_222 {
1144
1306
  display: flex;
1145
- background: white;
1307
+ background: var(--puck-color-white);
1146
1308
  border-width: 1px;
1147
1309
  border-style: solid;
1148
- border-color: var(--puck-color-grey-8);
1310
+ border-color: var(--puck-color-grey-09);
1149
1311
  border-radius: 4px;
1150
- width: 100%;
1312
+ flex-grow: 1;
1313
+ transition: border-color 50ms ease-in;
1314
+ }
1315
+ ._ExternalInputModal-search_19obq_222:focus-within {
1316
+ border-color: var(--puck-color-grey-05);
1317
+ outline: 2px solid var(--puck-color-azure-05);
1318
+ transition: none;
1151
1319
  }
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;
1320
+ @media (hover: hover) and (pointer: fine) {
1321
+ ._ExternalInputModal-search_19obq_222:hover {
1322
+ border-color: var(--puck-color-grey-05);
1323
+ transition: none;
1324
+ }
1156
1325
  }
1157
- ._ExternalInputModal-searchIcon_s6fxy_194 {
1326
+ ._ExternalInputModal-searchIcon_19obq_259 {
1158
1327
  align-items: center;
1159
- background: var(--puck-color-grey-11);
1328
+ background: var(--puck-color-grey-12);
1160
1329
  border-bottom-left-radius: 4px;
1161
1330
  border-top-left-radius: 4px;
1162
- border-right: 1px solid var(--puck-color-grey-8);
1163
- color: var(--puck-color-grey-6);
1331
+ border-right: 1px solid var(--puck-color-grey-09);
1332
+ color: var(--puck-color-grey-07);
1164
1333
  display: flex;
1165
1334
  justify-content: center;
1166
1335
  padding: 12px 15px;
1336
+ transition: color 50ms ease-in;
1337
+ }
1338
+ ._ExternalInputModal-search_19obq_222:focus-within ._ExternalInputModal-searchIcon_19obq_259 {
1339
+ color: var(--puck-color-grey-04);
1340
+ transition: none;
1341
+ }
1342
+ @media (hover: hover) and (pointer: fine) {
1343
+ ._ExternalInputModal-search_19obq_222:hover ._ExternalInputModal-searchIcon_19obq_259 {
1344
+ color: var(--puck-color-grey-04);
1345
+ transition: none;
1346
+ }
1167
1347
  }
1168
- ._ExternalInputModal-searchIconText_s6fxy_206 {
1348
+ ._ExternalInputModal-searchIconText_19obq_284 {
1169
1349
  clip: rect(0 0 0 0);
1170
1350
  clip-path: inset(100%);
1171
1351
  height: 1px;
@@ -1174,24 +1354,45 @@ textarea._Input-input_1v7zr_46 {
1174
1354
  white-space: nowrap;
1175
1355
  width: 1px;
1176
1356
  }
1177
- ._ExternalInputModal-searchInput_s6fxy_216 {
1357
+ ._ExternalInputModal-searchInput_19obq_294 {
1178
1358
  border: none;
1179
1359
  border-radius: 4px;
1180
- background: white;
1360
+ background: var(--puck-color-white);
1181
1361
  font-family: inherit;
1182
1362
  font-size: 14px;
1183
1363
  padding: 12px 15px;
1184
1364
  width: 100%;
1185
1365
  }
1186
- ._ExternalInputModal-searchInput_s6fxy_216:focus {
1187
- border: none;
1188
- outline: none;
1189
- box-shadow: none;
1366
+ ._ExternalInputModal-searchInput_19obq_294:focus {
1367
+ outline: 0;
1368
+ }
1369
+ ._ExternalInputModal-searchActions_19obq_308 {
1370
+ display: flex;
1371
+ gap: 8px;
1372
+ height: 44px;
1373
+ width: 100%;
1374
+ }
1375
+ @media (min-width: 458px) {
1376
+ ._ExternalInputModal-searchActions_19obq_308 {
1377
+ width: auto;
1378
+ }
1379
+ }
1380
+ ._ExternalInputModal-searchActionIcon_19obq_321 {
1381
+ align-self: center;
1382
+ }
1383
+ ._ExternalInputModal-footer_19obq_325 {
1384
+ background-color: var(--puck-color-grey-12);
1385
+ border-top: 1px solid var(--puck-color-grey-09);
1386
+ color: var(--puck-color-grey-04);
1387
+ font-weight: 500;
1388
+ font-size: 14px;
1389
+ padding: 16px;
1390
+ text-align: right;
1190
1391
  }
1191
1392
 
1192
1393
  /* css-module:/home/runner/work/puck/puck/packages/core/components/Modal/styles.module.css/#css-module-data */
1193
- ._Modal_hx2u6_1 {
1194
- background: #00000099;
1394
+ ._Modal_ikbaj_1 {
1395
+ background: color-mix(in srgb, var(--puck-color-black) 75%, transparent);
1195
1396
  display: none;
1196
1397
  justify-content: center;
1197
1398
  align-items: center;
@@ -1201,42 +1402,43 @@ textarea._Input-input_1v7zr_46 {
1201
1402
  bottom: 0;
1202
1403
  right: 0;
1203
1404
  z-index: 1;
1204
- padding: 64px;
1405
+ padding: 32px;
1205
1406
  }
1206
- ._Modal--isOpen_hx2u6_15 {
1407
+ ._Modal--isOpen_ikbaj_15 {
1207
1408
  display: flex;
1208
1409
  }
1209
- ._Modal-inner_hx2u6_19 {
1410
+ ._Modal-inner_ikbaj_19 {
1210
1411
  width: 100%;
1211
1412
  max-width: 1024px;
1212
- border-radius: 16px;
1413
+ border-radius: 8px;
1213
1414
  overflow: hidden;
1214
- background: white;
1415
+ background: var(--puck-color-white);
1215
1416
  display: flex;
1216
1417
  flex-direction: column;
1217
- max-height: 90vh;
1418
+ max-height: 90dvh;
1218
1419
  }
1219
1420
 
1220
1421
  /* css-module:/home/runner/work/puck/puck/packages/core/components/InputOrGroup/fields/ObjectField/styles.module.css/#css-module-data */
1221
- ._ObjectField_56z4t_5 {
1422
+ ._ObjectField_15j63_5 {
1222
1423
  display: flex;
1223
1424
  flex-direction: column;
1224
- background-color: white;
1225
- border: 1px solid var(--puck-color-grey-8);
1425
+ background-color: var(--puck-color-white);
1426
+ border: 1px solid var(--puck-color-grey-09);
1226
1427
  border-radius: 4px;
1227
1428
  }
1228
- ._ObjectField-fieldset_56z4t_13 {
1429
+ ._ObjectField-fieldset_15j63_13 {
1229
1430
  border: none;
1230
1431
  margin: 0;
1231
1432
  padding: 16px 15px;
1232
1433
  }
1233
1434
 
1234
1435
  /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Fields/styles.module.css/#css-module-data */
1235
- ._PuckFields_1276r_1 {
1436
+ ._PuckFields_17k3p_1 {
1236
1437
  position: relative;
1438
+ font-family: var(--puck-font-family);
1237
1439
  }
1238
- ._PuckFields-loadingOverlay_1276r_5 {
1239
- background: white;
1440
+ ._PuckFields-loadingOverlay_17k3p_6 {
1441
+ background: var(--puck-color-white);
1240
1442
  display: flex;
1241
1443
  justify-content: center;
1242
1444
  align-items: center;
@@ -1251,128 +1453,250 @@ textarea._Input-input_1v7zr_46 {
1251
1453
  }
1252
1454
 
1253
1455
  /* 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);
1456
+ ._ComponentList_odh9d_1 {
1256
1457
  max-width: 100%;
1257
1458
  }
1258
- ._ComponentList--isExpanded_1di93_6 + ._ComponentList_1di93_1 {
1459
+ ._ComponentList--isExpanded_odh9d_5 + ._ComponentList_odh9d_1 {
1259
1460
  margin-top: 12px;
1260
1461
  }
1261
- ._ComponentList-content_1di93_10 {
1462
+ ._ComponentList-content_odh9d_9 {
1262
1463
  display: none;
1263
1464
  }
1264
- ._ComponentList--isExpanded_1di93_6 > ._ComponentList-content_1di93_10 {
1465
+ ._ComponentList--isExpanded_odh9d_5 > ._ComponentList-content_odh9d_9 {
1265
1466
  display: block;
1266
1467
  }
1267
- ._ComponentList-title_1di93_18 {
1268
- color: var(--puck-color-grey-4);
1468
+ ._ComponentList-title_odh9d_17 {
1469
+ background-color: transparent;
1470
+ border: 0;
1471
+ color: var(--puck-color-grey-05);
1472
+ cursor: pointer;
1269
1473
  display: flex;
1474
+ font: inherit;
1270
1475
  font-size: var(--puck-font-size-xxxs);
1271
1476
  list-style: none;
1477
+ margin-bottom: 6px;
1272
1478
  padding: 8px;
1273
1479
  text-transform: uppercase;
1480
+ transition: background-color 50ms ease-in, color 50ms ease-in;
1274
1481
  gap: 4px;
1275
1482
  border-radius: 4px;
1483
+ width: 100%;
1276
1484
  }
1277
- ._ComponentList--isExpanded_1di93_6 ._ComponentList-title_1di93_18 {
1278
- margin-bottom: 4px;
1485
+ ._ComponentList-title_odh9d_17:focus-visible {
1486
+ outline: 2px solid var(--puck-color-azure-05);
1487
+ outline-offset: 2px;
1279
1488
  }
1280
- ._ComponentList-title_1di93_18:hover {
1281
- background-color: var(--puck-color-azure-9);
1282
- color: var(--puck-color-azure-4);
1283
- cursor: pointer;
1489
+ @media (hover: hover) and (pointer: fine) {
1490
+ ._ComponentList-title_odh9d_17:hover {
1491
+ background-color: var(--puck-color-azure-11);
1492
+ color: var(--puck-color-azure-04);
1493
+ transition: none;
1494
+ }
1284
1495
  }
1285
- ._ComponentList-titleIcon_1di93_39 {
1496
+ ._ComponentList-title_odh9d_17:active {
1497
+ background-color: var(--puck-color-azure-10);
1498
+ transition: none;
1499
+ }
1500
+ ._ComponentList-titleIcon_odh9d_53 {
1286
1501
  margin-left: auto;
1287
1502
  }
1288
1503
 
1504
+ /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Preview/styles.module.css/#css-module-data */
1505
+ ._PuckPreview_1mia0_1 {
1506
+ height: 100%;
1507
+ }
1508
+ ._PuckPreview-frame_1mia0_5 {
1509
+ border: none;
1510
+ height: 100%;
1511
+ width: 100%;
1512
+ }
1513
+
1289
1514
  /* 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);
1515
+ ._LayerTree_1pgw8_1 {
1516
+ color: var(--puck-color-grey-03);
1517
+ font-family: var(--puck-font-family);
1293
1518
  font-size: var(--puck-font-size-xxs);
1294
1519
  margin: 0;
1295
1520
  position: relative;
1296
1521
  list-style: none;
1297
1522
  padding: 0;
1298
1523
  }
1299
- ._LayerTree-zoneTitle_o89yt_11 {
1300
- color: var(--puck-color-grey-4);
1524
+ ._LayerTree-zoneTitle_1pgw8_11 {
1525
+ color: var(--puck-color-grey-05);
1301
1526
  font-size: var(--puck-font-size-xxxs);
1302
1527
  text-transform: uppercase;
1303
1528
  }
1304
- ._LayerTree-helper_o89yt_17 {
1529
+ ._LayerTree-helper_1pgw8_17 {
1305
1530
  text-align: center;
1306
- color: var(--puck-color-grey-6);
1307
- font-family: var(--puck-font-stack);
1531
+ color: var(--puck-color-grey-07);
1308
1532
  margin: 8px 4px;
1309
1533
  }
1310
- ._Layer_o89yt_1 {
1534
+ ._Layer_1pgw8_1 {
1311
1535
  position: relative;
1312
1536
  border: 1px solid transparent;
1537
+ border-radius: 4px;
1313
1538
  }
1314
- ._Layer-inner_o89yt_29 {
1315
- padding-left: 12px;
1316
- padding-right: 4px;
1539
+ ._Layer-inner_1pgw8_29 {
1540
+ border: 1px solid transparent;
1317
1541
  border-radius: 4px;
1542
+ transition: color 50ms ease-in;
1318
1543
  }
1319
- ._Layer--containsZone_o89yt_35 > ._Layer-inner_o89yt_29 {
1544
+ ._Layer--containsZone_1pgw8_35 > ._Layer-inner_1pgw8_29 {
1320
1545
  padding-left: 0;
1321
1546
  }
1322
- ._Layer-clickable_o89yt_39 {
1547
+ ._Layer-clickable_1pgw8_39 {
1323
1548
  align-items: center;
1549
+ background: none;
1550
+ border: 0;
1551
+ border-radius: 4px;
1552
+ color: inherit;
1553
+ cursor: pointer;
1324
1554
  display: flex;
1555
+ font: inherit;
1556
+ padding-left: 12px;
1557
+ padding-right: 4px;
1558
+ width: 100%;
1325
1559
  }
1326
- ._Layer-inner_o89yt_29:hover {
1327
- cursor: pointer;
1560
+ ._Layer-clickable_1pgw8_39:focus-visible {
1561
+ outline: 2px solid var(--puck-color-azure-05);
1562
+ outline-offset: 2px;
1563
+ position: relative;
1564
+ z-index: 1;
1328
1565
  }
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);
1566
+ @media (hover: hover) and (pointer: fine) {
1567
+ ._Layer_1pgw8_1:not(._Layer--isSelected_1pgw8_61) > ._Layer-inner_1pgw8_29:hover {
1568
+ border-color: var(--puck-color-azure-10);
1569
+ background: var(--puck-color-azure-11);
1570
+ color: var(--puck-color-azure-04);
1571
+ transition: none;
1572
+ }
1333
1573
  }
1334
- ._Layer--isSelected_o89yt_48 {
1335
- background: var(--puck-color-azure-9);
1336
- border-color: var(--puck-color-azure-7);
1337
- border-radius: 4px;
1574
+ ._Layer--isSelected_1pgw8_61 {
1575
+ border-color: var(--puck-color-azure-08);
1338
1576
  }
1339
- ._Layer--isSelected_o89yt_48 > ._Layer-inner_o89yt_29 {
1340
- background: var(--puck-color-azure-85);
1341
- font-weight: 600;
1577
+ ._Layer--isSelected_1pgw8_61 > ._Layer-inner_1pgw8_29 {
1578
+ background: var(--puck-color-azure-10);
1342
1579
  }
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 {
1580
+ ._Layer--isSelected_1pgw8_61 > ._Layer-inner_1pgw8_29 > ._Layer-clickable_1pgw8_39 > ._Layer-chevron_1pgw8_77,
1581
+ ._Layer--childIsSelected_1pgw8_78 > ._Layer-inner_1pgw8_29 > ._Layer-clickable_1pgw8_39 > ._Layer-chevron_1pgw8_77 {
1345
1582
  transform: scaleY(-1);
1346
1583
  }
1347
- ._Layer-zones_o89yt_70 {
1584
+ ._Layer-zones_1pgw8_82 {
1348
1585
  display: none;
1349
1586
  margin-left: 12px;
1350
1587
  }
1351
- ._Layer--isSelected_o89yt_48 > ._Layer-zones_o89yt_70,
1352
- ._Layer--childIsSelected_o89yt_66 > ._Layer-zones_o89yt_70 {
1588
+ ._Layer--isSelected_1pgw8_61 > ._Layer-zones_1pgw8_82,
1589
+ ._Layer--childIsSelected_1pgw8_78 > ._Layer-zones_1pgw8_82 {
1353
1590
  display: block;
1354
1591
  }
1355
- ._Layer-zones_o89yt_70 > ._LayerTree_o89yt_1 {
1592
+ ._Layer-zones_1pgw8_82 > ._LayerTree_1pgw8_1 {
1356
1593
  margin-left: 12px;
1357
1594
  }
1358
- ._Layer-title_o89yt_84,
1359
- ._LayerTree-zoneTitle_o89yt_11 {
1595
+ ._Layer-title_1pgw8_96,
1596
+ ._LayerTree-zoneTitle_1pgw8_11 {
1360
1597
  display: flex;
1361
1598
  gap: 8px;
1362
1599
  align-items: center;
1363
1600
  margin: 8px 4px;
1364
1601
  overflow-x: hidden;
1365
1602
  }
1366
- ._Layer-name_o89yt_93 {
1603
+ ._Layer-name_1pgw8_105 {
1367
1604
  overflow-x: hidden;
1368
1605
  text-overflow: ellipsis;
1369
1606
  white-space: nowrap;
1370
1607
  }
1371
- ._Layer-icon_o89yt_99 {
1372
- color: var(--puck-color-rose-6);
1608
+ ._Layer-icon_1pgw8_111 {
1609
+ color: var(--puck-color-rose-07);
1373
1610
  margin-top: 4px;
1374
1611
  }
1375
- ._Layer-zoneIcon_o89yt_104 {
1376
- color: var(--puck-color-grey-7);
1612
+ ._Layer-zoneIcon_1pgw8_116 {
1613
+ color: var(--puck-color-grey-08);
1377
1614
  margin-top: 4px;
1378
1615
  }
1616
+
1617
+ /* css-module:/home/runner/work/puck/puck/packages/core/components/ViewportControls/styles.module.css/#css-module-data */
1618
+ ._ViewportControls_14bhf_1 {
1619
+ display: flex;
1620
+ background: var(--puck-color-grey-11);
1621
+ box-sizing: border-box;
1622
+ border-left: 2px solid var(--puck-color-grey-11);
1623
+ justify-content: center;
1624
+ gap: 8px;
1625
+ min-width: 392px;
1626
+ padding-bottom: 16px;
1627
+ padding-left: var(--puck-space-px);
1628
+ padding-right: var(--puck-space-px);
1629
+ z-index: 1;
1630
+ }
1631
+ ._ViewportControls-divider_14bhf_15 {
1632
+ border-right: 1px solid var(--puck-color-grey-09);
1633
+ margin-left: 8px;
1634
+ margin-right: 8px;
1635
+ }
1636
+ ._ViewportControls-zoomSelect_14bhf_21 {
1637
+ appearance: none;
1638
+ 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;
1639
+ background-size: 10px;
1640
+ background-position: calc(100% - 12px) calc(50% + 3px);
1641
+ background-repeat: no-repeat;
1642
+ border: 0;
1643
+ font-size: var(--puck-font-size-xxxs);
1644
+ width: 96px;
1645
+ }
1646
+ ._ViewportButton--isActive_14bhf_33 ._ViewportButton-inner_14bhf_33 {
1647
+ color: var(--puck-color-azure-04);
1648
+ }
1649
+
1650
+ /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Canvas/styles.module.css/#css-module-data */
1651
+ ._PuckCanvas_1i5ph_1 {
1652
+ background: var(--puck-color-grey-11);
1653
+ display: flex;
1654
+ grid-area: editor;
1655
+ flex-direction: column;
1656
+ padding: var(--puck-space-px);
1657
+ overflow: auto;
1658
+ }
1659
+ @media (min-width: 1198px) {
1660
+ ._PuckCanvas_1i5ph_1 {
1661
+ padding: calc(var(--puck-space-px) * 1.5);
1662
+ padding-top: var(--puck-space-px);
1663
+ }
1664
+ ._PuckCanvas_1i5ph_1:not(._PuckCanvas_1i5ph_1:has(._PuckCanvas-controls_1i5ph_16)) {
1665
+ padding-top: calc(var(--puck-space-px) * 1.5);
1666
+ }
1667
+ }
1668
+ ._PuckCanvas-inner_1i5ph_21 {
1669
+ box-sizing: border-box;
1670
+ display: flex;
1671
+ height: 100%;
1672
+ justify-content: center;
1673
+ min-width: 392px;
1674
+ overflow: hidden;
1675
+ position: relative;
1676
+ width: 100%;
1677
+ }
1678
+ ._PuckCanvas-root_1i5ph_32 {
1679
+ background: white;
1680
+ border: 1px solid var(--puck-color-grey-09);
1681
+ box-sizing: border-box;
1682
+ min-width: 321px;
1683
+ position: absolute;
1684
+ transform-origin: top;
1685
+ top: 0;
1686
+ bottom: 0;
1687
+ opacity: 0;
1688
+ }
1689
+ @media (min-width: 1198px) {
1690
+ ._PuckCanvas-root_1i5ph_32 {
1691
+ min-width: unset;
1692
+ }
1693
+ }
1694
+ @media (prefers-reduced-motion: reduce) {
1695
+ ._PuckCanvas-root_1i5ph_32 {
1696
+ transition: none !important;
1697
+ }
1698
+ }
1699
+ ._PuckCanvas--ready_1i5ph_56 ._PuckCanvas-root_1i5ph_32 {
1700
+ opacity: 1;
1701
+ transition: opacity 150ms ease-out;
1702
+ }