@measured/puck 0.14.0-canary.55740c4 → 0.14.0-canary.712fb8e

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-487c2755.d.ts} +8 -1
  2. package/dist/index.css +791 -539
  3. package/dist/index.d.ts +34 -5
  4. package/dist/index.js +204 -122
  5. package/dist/rsc.d.ts +1 -1
  6. package/package.json +1 -1
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,197 @@
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 {
284
+ ._DraggableComponent_1vpvt_1 {
256
285
  outline-offset: 0px !important;
257
286
  pointer-events: auto;
258
287
  }
259
- ._DraggableComponent--isDragging_foluk_6 {
260
- background: #abc7e510;
261
- outline: 2px var(--puck-color-azure-8) solid !important;
288
+ ._DraggableComponent_1vpvt_1:focus-visible {
289
+ outline: 2px solid var(--puck-color-azure-05);
290
+ }
291
+ ._DraggableComponent--isDragging_1vpvt_10 {
292
+ background: color-mix(in srgb, var(--puck-color-azure-08) 10%, transparent);
293
+ outline: 2px var(--puck-color-azure-09) solid !important;
262
294
  overflow: hidden;
263
295
  }
264
- ._DraggableComponent-contents_foluk_12 {
296
+ ._DraggableComponent-contents_1vpvt_16 {
265
297
  position: relative;
266
298
  pointer-events: none;
267
299
  z-index: 0;
268
300
  }
269
- ._DraggableComponent-contents_foluk_12::before,
270
- ._DraggableComponent-contents_foluk_12::after {
301
+ ._DraggableComponent-contents_1vpvt_16::before,
302
+ ._DraggableComponent-contents_1vpvt_16::after {
271
303
  content: " ";
272
304
  display: table;
273
305
  }
274
- ._DraggableComponent-overlay_foluk_25 {
306
+ ._DraggableComponent-overlay_1vpvt_29 {
275
307
  display: none;
276
- background: #abc7e530;
308
+ background: color-mix(in srgb, var(--puck-color-azure-08) 30%, transparent);
277
309
  cursor: pointer;
278
310
  height: 100%;
279
311
  width: 100%;
280
312
  top: 0;
281
313
  position: absolute;
282
314
  z-index: 0;
283
- font-family: var(--puck-font-stack);
284
315
  pointer-events: none;
285
316
  box-sizing: border-box;
286
317
  }
287
- ._DraggableComponent-loadingOverlay_foluk_39 {
318
+ ._DraggableComponent-loadingOverlay_1vpvt_42 {
288
319
  background: var(--puck-color-white);
289
- color: var(--puck-color-grey-2);
320
+ color: var(--puck-color-grey-03);
290
321
  border-radius: 4px;
291
322
  display: flex;
292
323
  padding: 8px;
@@ -299,36 +330,36 @@
299
330
  opacity: 0.8;
300
331
  z-index: 1;
301
332
  }
302
- ._DraggableComponent_foluk_1:hover:not(._DraggableComponent--isLocked_foluk_55) > ._DraggableComponent-overlay_foluk_25 {
333
+ ._DraggableComponent_1vpvt_1:hover:not(._DraggableComponent--isLocked_1vpvt_58) > ._DraggableComponent-overlay_1vpvt_29 {
303
334
  display: block;
304
335
  pointer-events: none;
305
336
  }
306
- ._DraggableComponent--forceHover_foluk_61 > ._DraggableComponent-overlay_foluk_25 {
337
+ ._DraggableComponent--forceHover_1vpvt_64 > ._DraggableComponent-overlay_1vpvt_29 {
307
338
  display: block;
308
339
  pointer-events: none;
309
340
  }
310
- ._DraggableComponent_foluk_1:not(._DraggableComponent--isSelected_foluk_66) > ._DraggableComponent-overlay_foluk_25 {
311
- outline: 2px var(--puck-color-azure-8) solid !important;
341
+ ._DraggableComponent_1vpvt_1:not(._DraggableComponent--isSelected_1vpvt_69) > ._DraggableComponent-overlay_1vpvt_29 {
342
+ outline: 2px var(--puck-color-azure-09) solid !important;
312
343
  }
313
- ._DraggableComponent--indicativeHover_foluk_71 > ._DraggableComponent-overlay_foluk_25 {
344
+ ._DraggableComponent--indicativeHover_1vpvt_74 > ._DraggableComponent-overlay_1vpvt_29 {
314
345
  display: block;
315
346
  background: transparent;
316
347
  pointer-events: none;
317
348
  }
318
- ._DraggableComponent_foluk_1:not(._DraggableComponent--isSelected_foluk_66):has(._DraggableComponent_foluk_1:hover > ._DraggableComponent-overlay_foluk_25) > ._DraggableComponent-overlay_foluk_25 {
349
+ ._DraggableComponent_1vpvt_1:not(._DraggableComponent--isSelected_1vpvt_69):has(._DraggableComponent_1vpvt_1:hover > ._DraggableComponent-overlay_1vpvt_29) > ._DraggableComponent-overlay_1vpvt_29 {
319
350
  display: none;
320
351
  }
321
- ._DraggableComponent--isSelected_foluk_66 {
322
- outline: 2px var(--puck-color-azure-6) solid !important;
352
+ ._DraggableComponent--isSelected_1vpvt_69 {
353
+ outline: 2px var(--puck-color-azure-07) solid !important;
323
354
  }
324
- ._DraggableComponent--isSelected_foluk_66 > ._DraggableComponent-overlay_foluk_25 {
355
+ ._DraggableComponent--isSelected_1vpvt_69 > ._DraggableComponent-overlay_1vpvt_29 {
325
356
  background: none;
326
357
  display: block;
327
358
  position: sticky;
328
359
  top: 56px;
329
360
  z-index: 1;
330
361
  }
331
- ._DraggableComponent-actions_foluk_97 {
362
+ ._DraggableComponent-actions_1vpvt_100 {
332
363
  position: absolute;
333
364
  right: 6.5px;
334
365
  width: auto;
@@ -337,18 +368,20 @@
337
368
  border-top-left-radius: 8px;
338
369
  border-top-right-radius: 8px;
339
370
  border-radius: 8px;
340
- background: var(--puck-color-grey-0);
341
- color: white;
371
+ background: var(--puck-color-grey-01);
372
+ color: var(--puck-color-white);
373
+ cursor: grab;
342
374
  display: none;
375
+ font-family: var(--puck-font-family);
343
376
  gap: 4px;
344
377
  pointer-events: auto;
345
378
  box-sizing: border-box;
346
379
  }
347
- ._DraggableComponent--isSelected_foluk_66 > ._DraggableComponent-overlay_foluk_25 > ._DraggableComponent-actions_foluk_97 {
380
+ ._DraggableComponent--isSelected_1vpvt_69 > ._DraggableComponent-overlay_1vpvt_29 > ._DraggableComponent-actions_1vpvt_100 {
348
381
  display: flex;
349
382
  }
350
- ._DraggableComponent-actionsLabel_foluk_120 {
351
- color: var(--puck-color-grey-7);
383
+ ._DraggableComponent-actionsLabel_1vpvt_125 {
384
+ color: var(--puck-color-grey-08);
352
385
  display: flex;
353
386
  font-size: var(--puck-font-size-xxxs);
354
387
  font-weight: 500;
@@ -357,26 +390,40 @@
357
390
  padding-left: 8px;
358
391
  padding-right: 16px;
359
392
  margin-right: 8px;
360
- border-right: 1px solid var(--puck-color-grey-4);
393
+ border-right: 1px solid var(--puck-color-grey-05);
361
394
  text-overflow: ellipsis;
362
395
  white-space: nowrap;
363
396
  }
364
- ._DraggableComponent-action_foluk_97 {
397
+ ._DraggableComponent-action_1vpvt_100 {
365
398
  background: transparent;
366
399
  border: none;
367
- color: var(--puck-color-grey-7);
400
+ color: var(--puck-color-grey-08);
401
+ cursor: pointer;
368
402
  padding: 6px 8px;
369
403
  border-radius: 4px;
370
404
  overflow: hidden;
405
+ display: flex;
406
+ align-items: center;
407
+ justify-content: center;
408
+ transition: color 50ms ease-in;
371
409
  }
372
- ._DraggableComponent-action_foluk_97:hover {
373
- background: var(--puck-color-grey-2);
374
- color: var(--puck-color-azure-5);
375
- cursor: pointer;
410
+ ._DraggableComponent-action_1vpvt_100:focus-visible {
411
+ outline: 2px solid var(--puck-color-azure-05);
412
+ outline-offset: -2px;
413
+ }
414
+ @media (hover: hover) and (pointer: fine) {
415
+ ._DraggableComponent-action_1vpvt_100:hover {
416
+ color: var(--puck-color-azure-06);
417
+ transition: none;
418
+ }
419
+ }
420
+ ._DraggableComponent-action_1vpvt_100:active {
421
+ color: var(--puck-color-azure-07);
422
+ transition: none;
376
423
  }
377
424
 
378
425
  /* css-module:/home/runner/work/puck/puck/packages/core/components/DropZone/styles.module.css/#css-module-data */
379
- ._DropZone_i675d_1 {
426
+ ._DropZone_utidm_1 {
380
427
  margin-left: auto;
381
428
  margin-right: auto;
382
429
  position: relative;
@@ -384,42 +431,42 @@
384
431
  outline-offset: -1px;
385
432
  width: 100%;
386
433
  }
387
- ._DropZone--zoomEnabled_i675d_10 {
434
+ ._DropZone--zoomEnabled_utidm_10 {
388
435
  zoom: 1.33;
389
436
  }
390
- ._DropZone--zoomEnabled_i675d_10 ._DropZone-renderWrapper_i675d_14 {
437
+ ._DropZone--zoomEnabled_utidm_10 ._DropZone-renderWrapper_utidm_14 {
391
438
  zoom: 0.75;
392
439
  }
393
- ._DropZone-content_i675d_18 {
440
+ ._DropZone-content_utidm_18 {
394
441
  min-height: 128px;
395
442
  height: 100%;
396
443
  }
397
- ._DropZone--userIsDragging_i675d_23 ._DropZone-content_i675d_18 {
444
+ ._DropZone--userIsDragging_utidm_23 ._DropZone-content_utidm_18 {
398
445
  pointer-events: all;
399
446
  }
400
- ._DropZone--userIsDragging_i675d_23:not(._DropZone--draggingOverArea_i675d_27):not(._DropZone--draggingNewComponent_i675d_28) > ._DropZone-content_i675d_18 {
447
+ ._DropZone--userIsDragging_utidm_23:not(._DropZone--draggingOverArea_utidm_27):not(._DropZone--draggingNewComponent_utidm_28) > ._DropZone-content_utidm_18 {
401
448
  pointer-events: none;
402
449
  }
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);
450
+ ._DropZone--isAreaSelected_utidm_34,
451
+ ._DropZone--draggingOverArea_utidm_27:not(:has(._DropZone--hoveringOverArea_utidm_35)),
452
+ ._DropZone--hoveringOverArea_utidm_35:not(._DropZone--isDisabled_utidm_36):not(._DropZone--isRootZone_utidm_37) {
453
+ background: var(--puck-color-azure-11);
454
+ outline: 2px dashed var(--puck-color-azure-08);
408
455
  }
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);
456
+ ._DropZone_utidm_1:not(._DropZone--hasChildren_utidm_43) {
457
+ background: var(--puck-color-azure-11);
458
+ outline: 2px dashed var(--puck-color-azure-08);
412
459
  }
413
- ._DropZone--isDestination_i675d_48 {
414
- outline: 2px dashed var(--puck-color-azure-3) !important;
460
+ ._DropZone--isDestination_utidm_48 {
461
+ outline: 2px dashed var(--puck-color-azure-04) !important;
415
462
  }
416
- ._DropZone--isDestination_i675d_48:not(._DropZone--isRootZone_i675d_37) {
417
- background: var(--puck-color-azure-85) !important;
463
+ ._DropZone--isDestination_utidm_48:not(._DropZone--isRootZone_utidm_37) {
464
+ background: var(--puck-color-azure-10) !important;
418
465
  }
419
- ._DropZone-item_i675d_56 {
466
+ ._DropZone-item_utidm_56 {
420
467
  position: relative;
421
468
  }
422
- ._DropZone-hitbox_i675d_60 {
469
+ ._DropZone-hitbox_utidm_60 {
423
470
  position: absolute;
424
471
  bottom: -12px;
425
472
  height: 24px;
@@ -428,22 +475,35 @@
428
475
  }
429
476
 
430
477
  /* css-module:/home/runner/work/puck/puck/packages/core/components/IconButton/IconButton.module.css/#css-module-data */
431
- ._IconButton_38xdr_1 {
478
+ ._IconButton_1xqlg_1 {
432
479
  align-items: center;
433
480
  background: transparent;
434
481
  border: none;
435
482
  border-radius: 4px;
436
483
  color: currentColor;
484
+ cursor: pointer;
437
485
  display: flex;
486
+ font-family: var(--puck-font-family);
438
487
  justify-content: center;
439
488
  padding: 4px;
489
+ transition: background-color 50ms ease-in, color 50ms ease-in;
440
490
  }
441
- ._IconButton_38xdr_1:hover {
442
- background: var(--puck-color-grey-9);
443
- color: var(--puck-color-blue);
444
- cursor: pointer;
491
+ ._IconButton_1xqlg_1:focus-visible {
492
+ outline: 2px solid var(--puck-color-azure-05);
493
+ outline-offset: -2px;
494
+ }
495
+ @media (hover: hover) and (pointer: fine) {
496
+ ._IconButton_1xqlg_1:hover {
497
+ background: var(--puck-color-azure-12);
498
+ color: var(--puck-color-azure-04);
499
+ transition: none;
500
+ }
501
+ }
502
+ ._IconButton_1xqlg_1:active {
503
+ background: var(--puck-color-azure-11);
504
+ transition: none;
445
505
  }
446
- ._IconButton-title_38xdr_18 {
506
+ ._IconButton-title_1xqlg_33 {
447
507
  clip: rect(0 0 0 0);
448
508
  clip-path: inset(100%);
449
509
  height: 1px;
@@ -454,62 +514,78 @@
454
514
  }
455
515
 
456
516
  /* css-module:/home/runner/work/puck/puck/packages/core/components/SidebarSection/styles.module.css/#css-module-data */
457
- ._SidebarSection_170gs_1 {
517
+ ._SidebarSection_125qe_1 {
458
518
  display: flex;
459
519
  position: relative;
460
520
  flex-direction: column;
461
- color: black;
521
+ color: var(--puck-color-black);
462
522
  }
463
- ._SidebarSection_170gs_1:last-of-type {
523
+ ._SidebarSection_125qe_1:last-of-type {
464
524
  flex-grow: 1;
465
525
  }
466
- ._SidebarSection-title_170gs_12 {
467
- background: white;
526
+ ._SidebarSection-title_125qe_12 {
527
+ background: var(--puck-color-white);
468
528
  padding: 16px;
469
- border-bottom: 1px solid var(--puck-color-grey-8);
470
- border-top: 1px solid var(--puck-color-grey-8);
529
+ border-bottom: 1px solid var(--puck-color-grey-09);
530
+ border-top: 1px solid var(--puck-color-grey-09);
471
531
  overflow-x: auto;
472
532
  }
473
- ._SidebarSection--noBorderTop_170gs_20 > ._SidebarSection-title_170gs_12 {
533
+ ._SidebarSection--noBorderTop_125qe_20 > ._SidebarSection-title_125qe_12 {
474
534
  border-top: 0px;
475
535
  }
476
- ._SidebarSection-content_170gs_24 {
536
+ ._SidebarSection-content_125qe_24 {
477
537
  padding: 16px;
478
538
  }
479
- ._SidebarSection--noPadding_170gs_28 > ._SidebarSection-content_170gs_24 {
539
+ ._SidebarSection--noPadding_125qe_28 > ._SidebarSection-content_125qe_24 {
480
540
  padding: 0px;
481
541
  }
482
- ._SidebarSection--noPadding_170gs_28 > ._SidebarSection-content_170gs_24:last-child {
542
+ ._SidebarSection--noPadding_125qe_28 > ._SidebarSection-content_125qe_24:last-child {
483
543
  padding-bottom: 4px;
484
544
  }
485
- ._SidebarSection_170gs_1:last-of-type ._SidebarSection-content_170gs_24 {
545
+ ._SidebarSection_125qe_1:last-of-type ._SidebarSection-content_125qe_24 {
486
546
  border-bottom: none;
487
547
  flex-grow: 1;
488
548
  }
489
- ._SidebarSection-breadcrumbLabel_170gs_41 {
490
- color: var(--puck-color-azure-3);
549
+ ._SidebarSection-breadcrumbLabel_125qe_41 {
550
+ background: none;
551
+ border: 0;
552
+ border-radius: 2px;
553
+ color: var(--puck-color-azure-04);
554
+ cursor: pointer;
555
+ font: inherit;
491
556
  flex-shrink: 0;
557
+ padding: 0;
558
+ transition: color 50ms ease-in;
492
559
  }
493
- ._SidebarSection-breadcrumbLabel_170gs_41:hover {
494
- color: var(--puck-color-azure-4);
495
- cursor: pointer;
496
- text-decoration: underline;
560
+ ._SidebarSection-breadcrumbLabel_125qe_41:focus-visible {
561
+ outline: 2px solid var(--puck-color-azure-05);
562
+ outline-offset: 2px;
497
563
  }
498
- ._SidebarSection-breadcrumbs_170gs_52 {
564
+ @media (hover: hover) and (pointer: fine) {
565
+ ._SidebarSection-breadcrumbLabel_125qe_41:hover {
566
+ color: var(--puck-color-azure-03);
567
+ transition: none;
568
+ }
569
+ }
570
+ ._SidebarSection-breadcrumbLabel_125qe_41:active {
571
+ color: var(--puck-color-azure-02);
572
+ transition: none;
573
+ }
574
+ ._SidebarSection-breadcrumbs_125qe_70 {
499
575
  align-items: center;
500
576
  display: flex;
501
577
  gap: 4px;
502
578
  }
503
- ._SidebarSection-breadcrumb_170gs_41 {
579
+ ._SidebarSection-breadcrumb_125qe_41 {
504
580
  align-items: center;
505
581
  display: flex;
506
582
  gap: 4px;
507
583
  }
508
- ._SidebarSection-heading_170gs_64 {
584
+ ._SidebarSection-heading_125qe_82 {
509
585
  padding-right: 16px;
510
586
  }
511
- ._SidebarSection-loadingOverlay_170gs_68 {
512
- background: white;
587
+ ._SidebarSection-loadingOverlay_125qe_86 {
588
+ background: var(--puck-color-white);
513
589
  display: flex;
514
590
  justify-content: center;
515
591
  align-items: center;
@@ -524,47 +600,46 @@
524
600
  }
525
601
 
526
602
  /* css-module:/home/runner/work/puck/puck/packages/core/components/Heading/styles.module.css/#css-module-data */
527
- ._Heading_1bvy5_1 {
603
+ ._Heading_qxrry_1 {
528
604
  display: block;
529
605
  color: var(--puck-color-black);
530
- font-family: var(--puck-font-stack);
531
606
  font-weight: 700;
532
607
  margin: 0;
533
608
  }
534
- ._Heading_1bvy5_1 b {
609
+ ._Heading_qxrry_1 b {
535
610
  font-weight: 700;
536
611
  }
537
- ._Heading--xxxxl_1bvy5_13 {
612
+ ._Heading--xxxxl_qxrry_12 {
538
613
  font-size: var(--puck-font-size-xxxxl);
539
614
  letter-spacing: 0.08ch;
540
615
  font-weight: 800;
541
616
  }
542
- ._Heading--xxxl_1bvy5_19 {
617
+ ._Heading--xxxl_qxrry_18 {
543
618
  font-size: var(--puck-font-size-xxxl);
544
619
  }
545
- ._Heading--xxl_1bvy5_23 {
620
+ ._Heading--xxl_qxrry_22 {
546
621
  font-size: var(--puck-font-size-xxl);
547
622
  }
548
- ._Heading--xl_1bvy5_27 {
623
+ ._Heading--xl_qxrry_26 {
549
624
  font-size: var(--puck-font-size-xl);
550
625
  }
551
- ._Heading--l_1bvy5_31 {
626
+ ._Heading--l_qxrry_30 {
552
627
  font-size: var(--puck-font-size-l);
553
628
  }
554
- ._Heading--m_1bvy5_35 {
629
+ ._Heading--m_qxrry_34 {
555
630
  font-size: var(--puck-font-size-m);
556
631
  }
557
- ._Heading--s_1bvy5_39 {
632
+ ._Heading--s_qxrry_38 {
558
633
  font-size: var(--puck-font-size-s);
559
634
  }
560
- ._Heading--xs_1bvy5_43 {
635
+ ._Heading--xs_qxrry_42 {
561
636
  font-size: var(--puck-font-size-xs);
562
637
  }
563
638
 
564
639
  /* css-module:/home/runner/work/puck/puck/packages/core/components/MenuBar/styles.module.css/#css-module-data */
565
- ._MenuBar_12sp7_1 {
640
+ ._MenuBar_8pf8c_1 {
566
641
  background-color: var(--puck-color-white);
567
- border-bottom: 1px solid var(--puck-color-grey-8);
642
+ border-bottom: 1px solid var(--puck-color-grey-09);
568
643
  display: none;
569
644
  left: 0;
570
645
  margin-top: 1px;
@@ -574,11 +649,11 @@
574
649
  top: 100%;
575
650
  z-index: 2;
576
651
  }
577
- ._MenuBar--menuOpen_12sp7_14 {
652
+ ._MenuBar--menuOpen_8pf8c_14 {
578
653
  display: block;
579
654
  }
580
655
  @media (min-width: 638px) {
581
- ._MenuBar_12sp7_1 {
656
+ ._MenuBar_8pf8c_1 {
582
657
  border: none;
583
658
  display: block;
584
659
  margin-top: 0;
@@ -587,7 +662,7 @@
587
662
  position: static;
588
663
  }
589
664
  }
590
- ._MenuBar-inner_12sp7_29 {
665
+ ._MenuBar-inner_8pf8c_29 {
591
666
  align-items: center;
592
667
  display: flex;
593
668
  flex-wrap: wrap;
@@ -595,23 +670,24 @@
595
670
  justify-content: flex-end;
596
671
  }
597
672
  @media (min-width: 638px) {
598
- ._MenuBar-inner_12sp7_29 {
673
+ ._MenuBar-inner_8pf8c_29 {
599
674
  display: flex;
600
675
  flex-direction: row;
601
676
  flex-wrap: nowrap;
602
677
  }
603
678
  }
604
- ._MenuBar-history_12sp7_45 {
679
+ ._MenuBar-history_8pf8c_45 {
605
680
  display: flex;
606
681
  }
607
682
 
608
683
  /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/styles.module.css/#css-module-data */
609
- ._Puck_17hk3_19 {
684
+ ._Puck_1mnww_19 {
610
685
  --puck-frame-width: auto;
611
686
  --puck-side-bar-width: 186px;
612
687
  --puck-space-px: 16px;
613
688
  bottom: 0;
614
689
  display: grid;
690
+ font-family: var(--puck-font-family);
615
691
  grid-template-areas: "header header header" "left editor right";
616
692
  grid-template-columns: 0 var(--puck-frame-width) 0;
617
693
  grid-template-rows: min-content auto;
@@ -621,59 +697,59 @@
621
697
  right: 0;
622
698
  top: 0;
623
699
  }
624
- ._Puck--leftSideBarVisible_17hk3_35 {
700
+ ._Puck--leftSideBarVisible_1mnww_36 {
625
701
  grid-template-columns: var(--puck-side-bar-width) var(--puck-frame-width) 0;
626
702
  }
627
- ._Puck--rightSideBarVisible_17hk3_41 {
703
+ ._Puck--rightSideBarVisible_1mnww_42 {
628
704
  grid-template-columns: 0 var(--puck-frame-width) var(--puck-side-bar-width);
629
705
  }
630
- ._Puck--leftSideBarVisible_17hk3_35._Puck--rightSideBarVisible_17hk3_41 {
706
+ ._Puck--leftSideBarVisible_1mnww_36._Puck--rightSideBarVisible_1mnww_42 {
631
707
  grid-template-columns: var(--puck-side-bar-width) var(--puck-frame-width) var(--puck-side-bar-width);
632
708
  }
633
709
  @media (min-width: 458px) {
634
- ._Puck_17hk3_19 {
710
+ ._Puck_1mnww_19 {
635
711
  --puck-frame-width: minmax(266px, auto);
636
712
  }
637
713
  }
638
714
  @media (min-width: 638px) {
639
- ._Puck_17hk3_19 {
715
+ ._Puck_1mnww_19 {
640
716
  --puck-side-bar-width: minmax(186px, 250px);
641
717
  }
642
718
  }
643
719
  @media (min-width: 766px) {
644
- ._Puck_17hk3_19 {
720
+ ._Puck_1mnww_19 {
645
721
  --puck-frame-width: auto;
646
722
  }
647
723
  }
648
724
  @media (min-width: 990px) {
649
- ._Puck_17hk3_19 {
725
+ ._Puck_1mnww_19 {
650
726
  --puck-side-bar-width: 256px;
651
727
  }
652
728
  }
653
729
  @media (min-width: 1198px) {
654
- ._Puck_17hk3_19 {
730
+ ._Puck_1mnww_19 {
655
731
  --puck-side-bar-width: 274px;
656
732
  }
657
733
  }
658
734
  @media (min-width: 1398px) {
659
- ._Puck_17hk3_19 {
735
+ ._Puck_1mnww_19 {
660
736
  --puck-side-bar-width: 290px;
661
737
  }
662
738
  }
663
739
  @media (min-width: 1598px) {
664
- ._Puck_17hk3_19 {
740
+ ._Puck_1mnww_19 {
665
741
  --puck-side-bar-width: 320px;
666
742
  }
667
743
  }
668
- ._Puck-header_17hk3_95 {
744
+ ._Puck-header_1mnww_96 {
669
745
  background: var(--puck-color-white);
670
- border-bottom: 1px solid var(--puck-color-grey-8);
746
+ border-bottom: 1px solid var(--puck-color-grey-09);
671
747
  color: var(--puck-color-black);
672
748
  grid-area: header;
673
749
  position: relative;
674
750
  max-width: 100vw;
675
751
  }
676
- ._Puck-headerInner_17hk3_104 {
752
+ ._Puck-headerInner_1mnww_105 {
677
753
  align-items: end;
678
754
  display: grid;
679
755
  gap: var(--puck-space-px);
@@ -682,255 +758,313 @@
682
758
  grid-template-rows: auto;
683
759
  padding: var(--puck-space-px);
684
760
  }
685
- ._Puck-headerToggle_17hk3_114 {
686
- color: var(--puck-color-grey-4);
761
+ ._Puck-headerToggle_1mnww_115 {
762
+ color: var(--puck-color-grey-05);
687
763
  display: flex;
688
764
  margin-left: -4px;
689
765
  padding-top: 2px;
690
766
  }
691
- ._Puck--rightSideBarVisible_17hk3_41 ._Puck-rightSideBarToggle_17hk3_121,
692
- ._Puck--leftSideBarVisible_17hk3_35 ._Puck-leftSideBarToggle_17hk3_122 {
767
+ ._Puck--rightSideBarVisible_1mnww_42 ._Puck-rightSideBarToggle_1mnww_122,
768
+ ._Puck--leftSideBarVisible_1mnww_36 ._Puck-leftSideBarToggle_1mnww_123 {
693
769
  color: var(--puck-color-black);
694
770
  }
695
- ._Puck-headerTitle_17hk3_126 {
771
+ ._Puck-headerTitle_1mnww_127 {
696
772
  align-self: center;
697
773
  }
698
- ._Puck-headerPath_17hk3_130 {
774
+ ._Puck-headerPath_1mnww_131 {
699
775
  font-family: var(--puck-font-family-monospaced);
700
776
  font-size: var(--puck-font-size-xxs);
701
777
  font-weight: normal;
702
778
  word-break: break-all;
703
779
  }
704
- ._Puck-headerTools_17hk3_137 {
780
+ ._Puck-headerTools_1mnww_138 {
705
781
  display: flex;
706
782
  gap: 16px;
707
783
  justify-content: flex-end;
708
784
  }
709
- ._Puck-menuButton_17hk3_143 {
710
- color: var(--puck-color-grey-4);
785
+ ._Puck-menuButton_1mnww_144 {
786
+ color: var(--puck-color-grey-05);
711
787
  margin-left: -4px;
712
788
  }
713
- ._Puck--menuOpen_17hk3_148 ._Puck-menuButton_17hk3_143 {
789
+ ._Puck--menuOpen_1mnww_149 ._Puck-menuButton_1mnww_144 {
714
790
  color: var(--puck-color-black);
715
791
  }
716
792
  @media (min-width: 638px) {
717
- ._Puck-menuButton_17hk3_143 {
793
+ ._Puck-menuButton_1mnww_144 {
718
794
  display: none;
719
795
  }
720
796
  }
721
- ._Puck-leftSideBar_17hk3_122 {
722
- background: var(--puck-color-grey-11);
723
- border-right: 1px solid var(--puck-color-grey-8);
797
+ ._Puck-leftSideBar_1mnww_123 {
798
+ background: var(--puck-color-grey-12);
799
+ border-right: 1px solid var(--puck-color-grey-09);
724
800
  display: flex;
725
801
  flex-direction: column;
726
802
  grid-area: left;
727
803
  overflow-y: auto;
728
804
  }
729
- ._Puck-frame_17hk3_167 {
805
+ ._Puck-frame_1mnww_168 {
730
806
  display: flex;
731
807
  flex-direction: column;
732
808
  grid-area: editor;
733
809
  overflow: auto;
734
810
  position: relative;
735
811
  }
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);
812
+ ._Puck-root_1mnww_176 {
813
+ border: 1px solid var(--puck-color-grey-09);
814
+ box-shadow: 0 0 0 calc(var(--puck-space-px) * 1.5) var(--puck-color-grey-11);
739
815
  margin: var(--puck-space-px);
740
816
  min-width: 321px;
741
817
  }
742
818
  @media (min-width: 1198px) {
743
- ._Puck-root_17hk3_175 {
819
+ ._Puck-root_1mnww_176 {
744
820
  margin: calc(var(--puck-space-px) * 1.5);
745
821
  }
746
822
  }
747
- ._Puck-rightSideBar_17hk3_121 {
823
+ ._Puck-rightSideBar_1mnww_122 {
748
824
  background: var(--puck-color-white);
749
- border-left: 1px solid var(--puck-color-grey-8);
825
+ border-left: 1px solid var(--puck-color-grey-09);
750
826
  display: flex;
751
827
  flex-direction: column;
752
- font-family: var(--puck-font-stack);
753
828
  grid-area: right;
754
829
  overflow-y: auto;
755
830
  }
756
831
 
757
832
  /* 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);
833
+ ._Input_1qi5b_1 {
834
+ color: var(--puck-color-grey-04);
760
835
  padding: 16px;
761
836
  padding-bottom: 12px;
762
837
  display: block;
763
- font-family: var(--puck-font-stack);
764
838
  }
765
- ._Input_1v7zr_1 ._Input_1v7zr_1 {
839
+ ._Input_1qi5b_1 ._Input_1qi5b_1 {
766
840
  padding: 0px;
767
841
  }
768
- ._Input_1v7zr_1 * {
842
+ ._Input_1qi5b_1 * {
769
843
  box-sizing: border-box;
770
844
  }
771
- ._Input_1v7zr_1 + ._Input_1v7zr_1 {
772
- border-top: 1px solid var(--puck-color-grey-8);
845
+ ._Input_1qi5b_1 + ._Input_1qi5b_1 {
846
+ border-top: 1px solid var(--puck-color-grey-09);
773
847
  margin-top: 8px;
774
848
  }
775
- ._Input_1v7zr_1 ._Input_1v7zr_1 + ._Input_1v7zr_1 {
849
+ ._Input_1qi5b_1 ._Input_1qi5b_1 + ._Input_1qi5b_1 {
776
850
  border-top: 0px;
777
851
  margin-top: 12px;
778
852
  }
779
- ._Input-label_1v7zr_27 {
853
+ ._Input-label_1qi5b_26 {
780
854
  align-items: center;
781
855
  display: flex;
782
856
  padding-bottom: 12px;
783
857
  font-size: var(--puck-font-size-xxs);
784
858
  font-weight: 600;
785
859
  }
786
- ._Input-labelIcon_1v7zr_35 {
787
- color: var(--puck-color-grey-6);
860
+ ._Input-labelIcon_1qi5b_34 {
861
+ color: var(--puck-color-grey-07);
862
+ display: flex;
788
863
  margin-right: 4px;
789
864
  padding-left: 4px;
790
865
  }
791
- ._Input-disabledIcon_1v7zr_41 {
792
- color: var(--puck-color-grey-4);
866
+ ._Input-disabledIcon_1qi5b_41 {
867
+ color: var(--puck-color-grey-05);
793
868
  margin-left: auto;
794
869
  }
795
- ._Input-input_1v7zr_46 {
796
- background: white;
870
+ ._Input-input_1qi5b_46 {
871
+ background: var(--puck-color-white);
797
872
  border-width: 1px;
798
873
  border-style: solid;
799
- border-color: var(--puck-color-grey-8);
874
+ border-color: var(--puck-color-grey-09);
800
875
  border-radius: 4px;
801
876
  font-family: inherit;
802
877
  font-size: 14px;
803
878
  padding: 12px 15px;
879
+ transition: border-color 50ms ease-in;
804
880
  width: 100%;
805
881
  }
806
- select._Input-input_1v7zr_46 {
882
+ select._Input-input_1qi5b_46 {
807
883
  appearance: none;
808
884
  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
885
  background-size: 12px;
810
886
  background-position: calc(100% - 12px) calc(50% + 3px);
811
887
  background-repeat: no-repeat;
812
- background-color: white;
888
+ background-color: var(--puck-color-white);
889
+ cursor: pointer;
813
890
  }
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;
891
+ @media (hover: hover) and (pointer: fine) {
892
+ ._Input_1qi5b_1:has(> input):hover ._Input-input_1qi5b_46:not([readonly]),
893
+ ._Input_1qi5b_1:has(> textarea):hover ._Input-input_1qi5b_46:not([readonly]) {
894
+ border-color: var(--puck-color-grey-05);
895
+ transition: none;
896
+ }
897
+ ._Input_1qi5b_1:has(> select):hover ._Input-input_1qi5b_46:not([disabled]) {
898
+ background-color: var(--puck-color-azure-12);
899
+ 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>");
900
+ border-color: var(--puck-color-grey-05);
901
+ transition: none;
902
+ }
820
903
  }
821
- ._Input-input_1v7zr_46:hover {
822
- border-color: var(--puck-color-neutral-3);
904
+ ._Input-input_1qi5b_46:focus {
905
+ border-color: var(--puck-color-grey-05);
906
+ outline: 2px solid var(--puck-color-azure-05);
907
+ transition: none;
823
908
  }
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;
909
+ ._Input--readOnly_1qi5b_90 > ._Input-input_1qi5b_46,
910
+ ._Input--readOnly_1qi5b_90 > select._Input-input_1qi5b_46 {
911
+ background-color: var(--puck-color-grey-11);
912
+ border-color: var(--puck-color-grey-09);
913
+ color: var(--puck-color-grey-04);
914
+ cursor: default;
915
+ opacity: 1;
916
+ outline: 0;
917
+ transition: none;
828
918
  }
829
- ._Input-radioGroupItems_1v7zr_87 {
919
+ ._Input-radioGroupItems_1qi5b_101 {
830
920
  display: flex;
831
- border: 1px solid var(--puck-color-grey-7);
921
+ border: 1px solid var(--puck-color-grey-09);
832
922
  border-radius: 4px;
833
923
  flex-wrap: wrap;
834
- overflow: hidden;
835
924
  }
836
- ._Input-radio_1v7zr_87 {
837
- border-right: 1px solid var(--puck-color-grey-7);
925
+ ._Input-radio_1qi5b_101 {
926
+ border-right: 1px solid var(--puck-color-grey-09);
838
927
  flex-grow: 1;
839
928
  }
840
- ._Input-radio_1v7zr_87:last-of-type {
841
- border-right: none;
929
+ ._Input-radio_1qi5b_101:first-of-type {
930
+ border-bottom-left-radius: 4px;
931
+ border-top-left-radius: 4px;
932
+ }
933
+ ._Input-radio_1qi5b_101:first-of-type ._Input-radioInner_1qi5b_118 {
934
+ border-bottom-left-radius: 3px;
935
+ border-top-left-radius: 3px;
936
+ }
937
+ ._Input-radio_1qi5b_101:last-of-type {
938
+ border-bottom-right-radius: 4px;
939
+ border-right: 0;
940
+ border-top-right-radius: 4px;
941
+ }
942
+ ._Input-radio_1qi5b_101:last-of-type ._Input-radioInner_1qi5b_118 {
943
+ border-bottom-right-radius: 3px;
944
+ border-top-right-radius: 3px;
842
945
  }
843
- ._Input-radioInner_1v7zr_104 {
844
- background-color: white;
845
- color: var(--puck-color-grey-4);
946
+ ._Input-radioInner_1qi5b_118 {
947
+ background-color: var(--puck-color-white);
948
+ color: var(--puck-color-grey-04);
949
+ cursor: pointer;
846
950
  font-size: var(--puck-font-size-xxxs);
847
951
  padding: 8px 12px;
848
952
  text-align: center;
953
+ transition: background-color 50ms ease-in;
849
954
  }
850
- ._Input-radioInner_1v7zr_104:hover {
851
- background-color: var(--puck-color-azure-9);
852
- cursor: pointer;
955
+ ._Input-radio_1qi5b_101:has(:focus-visible) {
956
+ outline: 2px solid var(--puck-color-azure-05);
957
+ outline-offset: 2px;
958
+ position: relative;
853
959
  }
854
- ._Input--readOnly_1v7zr_69 ._Input-radioGroupItems_1v7zr_87 {
855
- border-color: var(--puck-color-grey-8);
960
+ @media (hover: hover) and (pointer: fine) {
961
+ ._Input-radioInner_1qi5b_118:hover {
962
+ background-color: var(--puck-color-azure-12);
963
+ transition: none;
964
+ }
856
965
  }
857
- ._Input--readOnly_1v7zr_69 ._Input-radioInner_1v7zr_104 {
858
- background-color: var(--puck-color-grey-11);
859
- color: var(--puck-color-grey-5);
966
+ ._Input--readOnly_1qi5b_90 ._Input-radioInner_1qi5b_118 {
967
+ background-color: var(--puck-color-white);
968
+ color: var(--puck-color-grey-04);
969
+ cursor: default;
860
970
  }
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);
971
+ ._Input-radio_1qi5b_101 ._Input-radioInput_1qi5b_163:checked ~ ._Input-radioInner_1qi5b_118 {
972
+ background-color: var(--puck-color-azure-11);
973
+ color: var(--puck-color-azure-04);
864
974
  font-weight: 500;
865
975
  }
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);
976
+ ._Input--readOnly_1qi5b_90 ._Input-radioInput_1qi5b_163:checked ~ ._Input-radioInner_1qi5b_118 {
977
+ background-color: var(--puck-color-grey-11);
978
+ color: var(--puck-color-grey-04);
869
979
  }
870
- ._Input-radio_1v7zr_87 ._Input-radioInput_1v7zr_126 {
871
- display: none;
980
+ ._Input-radio_1qi5b_101 ._Input-radioInput_1qi5b_163 {
981
+ clip: rect(0 0 0 0);
982
+ clip-path: inset(100%);
983
+ height: 1px;
984
+ overflow: hidden;
985
+ position: absolute;
986
+ white-space: nowrap;
987
+ width: 1px;
872
988
  }
873
- textarea._Input-input_1v7zr_46 {
989
+ textarea._Input-input_1qi5b_46 {
874
990
  margin-bottom: -4px;
875
991
  }
876
992
 
877
993
  /* css-module:/home/runner/work/puck/puck/packages/core/components/InputOrGroup/fields/ArrayField/styles.module.css/#css-module-data */
878
- ._ArrayField_1auyc_5 {
994
+ ._ArrayField_1txra_5 {
879
995
  display: flex;
880
996
  flex-direction: column;
881
- background-color: var(--puck-color-grey-8);
882
- border: 1px solid var(--puck-color-grey-8);
997
+ background-color: var(--puck-color-grey-09);
998
+ border: 1px solid var(--puck-color-grey-09);
883
999
  border-radius: 4px;
884
1000
  }
885
- ._ArrayField--isDraggingFrom_1auyc_13 {
886
- background-color: var(--puck-color-azure-9);
1001
+ ._ArrayField--isDraggingFrom_1txra_13 {
1002
+ background-color: var(--puck-color-azure-11);
887
1003
  }
888
- ._ArrayField-addButton_1auyc_17 {
889
- background-color: white;
1004
+ ._ArrayField-addButton_1txra_17 {
1005
+ background-color: var(--puck-color-white);
890
1006
  border: none;
891
1007
  border-radius: 4px;
892
1008
  display: flex;
893
- color: var(--puck-color-azure-4);
1009
+ color: var(--puck-color-azure-05);
894
1010
  justify-content: center;
895
1011
  cursor: pointer;
896
1012
  width: 100%;
897
1013
  margin: 0;
898
1014
  padding: 16px;
899
1015
  text-align: left;
1016
+ transition: background-color 50ms ease-in;
900
1017
  }
901
- ._ArrayField--hasItems_1auyc_31 > ._ArrayField-addButton_1auyc_17 {
1018
+ ._ArrayField--hasItems_1txra_32 > ._ArrayField-addButton_1txra_17 {
902
1019
  border-top-left-radius: 0;
903
1020
  border-top-right-radius: 0;
904
1021
  }
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);
1022
+ ._ArrayField-addButton_1txra_17:focus-visible {
1023
+ outline: 2px solid var(--puck-color-azure-05);
1024
+ outline-offset: 2px;
1025
+ position: relative;
1026
+ }
1027
+ @media (hover: hover) and (pointer: fine) {
1028
+ ._ArrayField_1txra_5:not(._ArrayField--isDraggingFrom_1txra_13) > ._ArrayField-addButton_1txra_17:hover {
1029
+ background: var(--puck-color-azure-12);
1030
+ color: var(--puck-color-azure-04);
1031
+ transition: none;
1032
+ }
1033
+ }
1034
+ ._ArrayField_1txra_5:not(._ArrayField--isDraggingFrom_1txra_13) > ._ArrayField-addButton_1txra_17:active {
1035
+ background: var(--puck-color-azure-11);
1036
+ color: var(--puck-color-azure-04);
1037
+ transition: none;
908
1038
  }
909
- ._ArrayFieldItem_1auyc_45 {
910
- background: white;
1039
+ ._ArrayFieldItem_1txra_61 {
1040
+ background: var(--puck-color-white);
911
1041
  border-top-left-radius: 4px;
912
1042
  border-top-right-radius: 4px;
913
1043
  display: block;
914
1044
  margin-bottom: 1px;
915
1045
  }
916
- ._ArrayField--isDraggingFrom_1auyc_13 > ._ArrayFieldItem_1auyc_45:not(._ArrayFieldItem--isDragging_1auyc_53) {
917
- border-bottom: 1px solid var(--puck-color-grey-8);
1046
+ ._ArrayField--isDraggingFrom_1txra_13 > ._ArrayFieldItem_1txra_61:not(._ArrayFieldItem--isDragging_1txra_69) {
1047
+ border-bottom: 1px solid var(--puck-color-grey-09);
918
1048
  margin-bottom: 0;
919
1049
  }
920
- ._ArrayFieldItem--isExpanded_1auyc_58 {
1050
+ ._ArrayFieldItem--isExpanded_1txra_74 {
921
1051
  border-bottom: 0;
922
1052
  outline-offset: 0px !important;
923
- outline: 1px solid var(--puck-color-azure-6) !important;
1053
+ outline: 1px solid var(--puck-color-azure-07) !important;
1054
+ }
1055
+ ._ArrayFieldItem--isDragging_1txra_69 {
1056
+ box-shadow: color-mix(in srgb, var(--puck-color-grey-06) 25%, transparent) 0 3px 6px 0;
924
1057
  }
925
- ._ArrayFieldItem--isDragging_1auyc_53 {
926
- box-shadow: rgba(140, 152, 164, 0.25) 0 3px 6px 0;
1058
+ ._ArrayFieldItem--isDragging_1txra_69 ._ArrayFieldItem-summary_1txra_84:active {
1059
+ background-color: var(--puck-color-white);
927
1060
  }
928
- ._ArrayFieldItem_1auyc_45 + ._ArrayFieldItem_1auyc_45 {
1061
+ ._ArrayFieldItem_1txra_61 + ._ArrayFieldItem_1txra_61 {
929
1062
  border-top-left-radius: 0;
930
1063
  border-top-right-radius: 0;
931
1064
  }
932
- ._ArrayFieldItem-summary_1auyc_73 {
933
- color: var(--puck-color-grey-3);
1065
+ ._ArrayFieldItem-summary_1txra_84 {
1066
+ color: var(--puck-color-grey-04);
1067
+ cursor: pointer;
934
1068
  display: flex;
935
1069
  align-items: center;
936
1070
  gap: 2px;
@@ -940,179 +1074,236 @@ textarea._Input-input_1v7zr_46 {
940
1074
  padding: 12px 15px;
941
1075
  position: relative;
942
1076
  overflow: hidden;
1077
+ transition: background-color 50ms ease-in;
943
1078
  }
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;
1079
+ ._ArrayFieldItem--readOnly_1txra_108 > ._ArrayFieldItem-summary_1txra_84 {
1080
+ background-color: var(--puck-color-grey-12);
1081
+ color: var(--puck-color-grey-06);
950
1082
  }
951
- ._ArrayFieldItem_1auyc_45:first-of-type > ._ArrayFieldItem-summary_1auyc_73 {
1083
+ ._ArrayFieldItem_1txra_61:first-of-type > ._ArrayFieldItem-summary_1txra_84 {
952
1084
  border-top-left-radius: 4px;
953
1085
  border-top-right-radius: 4px;
954
1086
  }
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);
1087
+ ._ArrayFieldItem-summary_1txra_84:focus-visible {
1088
+ outline: 2px solid var(--puck-color-azure-05);
1089
+ outline-offset: 2px;
1090
+ }
1091
+ @media (hover: hover) and (pointer: fine) {
1092
+ ._ArrayFieldItem-summary_1txra_84:hover {
1093
+ background-color: var(--puck-color-azure-12);
1094
+ transition: none;
1095
+ }
1096
+ }
1097
+ ._ArrayFieldItem-summary_1txra_84:active {
1098
+ background-color: var(--puck-color-azure-11);
1099
+ transition: none;
960
1100
  }
961
- ._ArrayFieldItem-body_1auyc_107 {
1101
+ ._ArrayFieldItem--isExpanded_1txra_74 > ._ArrayFieldItem-summary_1txra_84 {
1102
+ background: var(--puck-color-azure-11);
1103
+ color: var(--puck-color-azure-04);
1104
+ font-weight: 600;
1105
+ transition: none;
1106
+ }
1107
+ ._ArrayFieldItem-body_1txra_142 {
962
1108
  display: none;
963
1109
  }
964
- ._ArrayFieldItem--isExpanded_1auyc_58 > ._ArrayFieldItem-body_1auyc_107 {
1110
+ ._ArrayFieldItem--isExpanded_1txra_74 > ._ArrayFieldItem-body_1txra_142 {
965
1111
  display: block;
966
1112
  }
967
- ._ArrayFieldItem-fieldset_1auyc_115 {
1113
+ ._ArrayFieldItem-fieldset_1txra_150 {
968
1114
  border: none;
969
- border-top: 1px solid var(--puck-color-grey-8);
1115
+ border-top: 1px solid var(--puck-color-grey-09);
970
1116
  margin: 0;
971
1117
  padding: 16px 15px;
972
1118
  }
973
- ._ArrayFieldItem-rhs_1auyc_122 {
1119
+ ._ArrayFieldItem-rhs_1txra_157 {
974
1120
  display: flex;
975
1121
  gap: 4px;
976
1122
  align-items: center;
977
1123
  }
978
- ._ArrayFieldItem-actions_1auyc_128 {
979
- color: var(--puck-color-grey-3);
1124
+ ._ArrayFieldItem-actions_1txra_163 {
1125
+ color: var(--puck-color-grey-04);
980
1126
  display: flex;
981
1127
  gap: 4px;
982
1128
  opacity: 0;
983
1129
  }
984
- ._ArrayFieldItem-summary_1auyc_73:hover > ._ArrayFieldItem-rhs_1auyc_122 > ._ArrayFieldItem-actions_1auyc_128 {
1130
+ ._ArrayFieldItem-summary_1txra_84:focus-within > ._ArrayFieldItem-rhs_1txra_157 > ._ArrayFieldItem-actions_1txra_163,
1131
+ ._ArrayFieldItem-summary_1txra_84:hover > ._ArrayFieldItem-rhs_1txra_157 > ._ArrayFieldItem-actions_1txra_163 {
985
1132
  opacity: 1;
986
1133
  }
987
- ._ArrayFieldItem-action_1auyc_128:hover {
988
- background: var(--puck-color-grey-9);
989
- border-radius: 4px;
990
- cursor: pointer;
991
- }
992
1134
 
993
1135
  /* 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 {
1136
+ ._ExternalInput-actions_q3l5a_1 {
998
1137
  display: flex;
999
1138
  }
1000
- ._ExternalInput-button_s6fxy_9 {
1139
+ ._ExternalInput-button_q3l5a_5 {
1001
1140
  display: flex;
1002
1141
  gap: 8px;
1003
1142
  align-items: center;
1004
1143
  justify-content: center;
1005
- background-color: white;
1006
- border: 1px solid var(--puck-color-grey-8);
1144
+ background-color: var(--puck-color-white);
1145
+ border: 1px solid var(--puck-color-grey-09);
1007
1146
  border-radius: 4px;
1008
- color: var(--puck-color-azure-4);
1147
+ color: var(--puck-color-azure-04);
1148
+ cursor: pointer;
1009
1149
  padding: 12px 16px;
1010
1150
  font-weight: 500;
1011
1151
  white-space: nowrap;
1012
1152
  text-overflow: ellipsis;
1153
+ transition: background-color 50ms ease-in;
1013
1154
  position: relative;
1014
1155
  overflow: hidden;
1015
1156
  flex-grow: 1;
1016
1157
  }
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);
1158
+ ._ExternalInput--dataSelected_q3l5a_25 ._ExternalInput-button_q3l5a_5 {
1159
+ color: var(--puck-color-grey-03);
1026
1160
  display: block;
1027
1161
  border-top-right-radius: 0px;
1028
1162
  border-bottom-right-radius: 0px;
1029
1163
  }
1030
- ._ExternalInput-detachButton_s6fxy_28 {
1031
- border: 1px solid var(--puck-color-grey-8);
1164
+ ._ExternalInput-detachButton_q3l5a_32 {
1165
+ border: 1px solid var(--puck-color-grey-09);
1032
1166
  border-top-right-radius: 4px;
1033
1167
  border-bottom-right-radius: 4px;
1034
- background-color: var(--puck-color-grey-11);
1035
- color: var(--puck-color-grey-4);
1168
+ background-color: var(--puck-color-grey-12);
1169
+ color: var(--puck-color-grey-05);
1170
+ cursor: pointer;
1036
1171
  display: flex;
1037
1172
  gap: 8px;
1038
1173
  align-items: center;
1039
1174
  justify-content: center;
1040
1175
  padding: 8px 12px;
1176
+ position: relative;
1177
+ transition: background-color 50ms ease-in, color 50ms ease-in;
1041
1178
  margin-left: -1px;
1042
1179
  }
1043
- ._ExternalInputModal_s6fxy_56 {
1044
- color: black;
1045
- display: flex;
1046
- flex-direction: column;
1180
+ ._ExternalInput-button_q3l5a_5:focus-visible,
1181
+ ._ExternalInput-detachButton_q3l5a_32:focus-visible {
1182
+ outline: 2px solid var(--puck-color-azure-05);
1183
+ outline-offset: 2px;
1184
+ z-index: 1;
1185
+ }
1186
+ @media (hover: hover) and (pointer: fine) {
1187
+ ._ExternalInput-button_q3l5a_5:hover,
1188
+ ._ExternalInput-detachButton_q3l5a_32:hover {
1189
+ background: var(--puck-color-azure-12);
1190
+ transition: none;
1191
+ }
1192
+ ._ExternalInput-detachButton_q3l5a_32:hover {
1193
+ color: var(--puck-color-azure-04);
1194
+ }
1195
+ }
1196
+ ._ExternalInput-button_q3l5a_5:active,
1197
+ ._ExternalInput-detachButton_q3l5a_32:active {
1198
+ background: var(--puck-color-azure-11);
1199
+ transition: none;
1200
+ }
1201
+ ._ExternalInputModal_q3l5a_74 {
1202
+ color: var(--puck-color-black);
1203
+ display: grid;
1204
+ grid-template-rows: min-content minmax(128px, 100%) min-content;
1205
+ grid-template-columns: 100%;
1047
1206
  position: relative;
1207
+ min-height: 50vh;
1048
1208
  max-height: 90vh;
1049
1209
  }
1050
- ._ExternalInputModal-masthead_s6fxy_64 {
1051
- background-color: white;
1210
+ ._ExternalInputModal-grid_q3l5a_84 {
1211
+ display: flex;
1212
+ flex-direction: column;
1213
+ }
1214
+ @media (min-width: 458px) {
1215
+ ._ExternalInputModal-grid_q3l5a_84 {
1216
+ display: grid;
1217
+ grid-template-columns: 100%;
1218
+ }
1219
+ ._ExternalInputModal--filtersToggled_q3l5a_95 ._ExternalInputModal-grid_q3l5a_84 {
1220
+ grid-template-columns: 25% 75%;
1221
+ }
1222
+ }
1223
+ ._ExternalInputModal-filters_q3l5a_100 {
1224
+ border-bottom: 1px solid var(--puck-color-grey-09);
1225
+ }
1226
+ ._ExternalInputModal--filtersToggled_q3l5a_95 ._ExternalInputModal-filters_q3l5a_100 {
1227
+ display: none;
1228
+ }
1229
+ @media (min-width: 458px) {
1230
+ ._ExternalInputModal-filters_q3l5a_100 {
1231
+ border-right: 1px solid var(--puck-color-grey-09);
1232
+ display: none;
1233
+ }
1234
+ ._ExternalInputModal--filtersToggled_q3l5a_95 ._ExternalInputModal-filters_q3l5a_100 {
1235
+ display: block;
1236
+ }
1237
+ }
1238
+ ._ExternalInputModal-masthead_q3l5a_119 {
1239
+ background-color: var(--puck-color-grey-12);
1240
+ border-bottom: 1px solid var(--puck-color-grey-09);
1052
1241
  display: flex;
1053
1242
  flex-wrap: wrap;
1054
1243
  gap: 24px;
1055
- padding: 32px 24px;
1244
+ padding: 24px;
1056
1245
  }
1057
- ._ExternalInputModal-tableWrapper_s6fxy_72 {
1246
+ ._ExternalInputModal-tableWrapper_q3l5a_128 {
1058
1247
  position: relative;
1059
1248
  overflow-x: auto;
1060
1249
  overflow-y: auto;
1061
1250
  flex-grow: 1;
1062
1251
  }
1063
- ._ExternalInputModal-table_s6fxy_72 {
1252
+ ._ExternalInputModal-table_q3l5a_128 {
1064
1253
  border-collapse: unset;
1065
1254
  border-spacing: 0px;
1066
- color: var(--puck-color-neutral-4);
1255
+ color: var(--puck-color-grey-02);
1067
1256
  position: relative;
1068
1257
  z-index: 0;
1069
1258
  min-width: 100%;
1070
1259
  }
1071
- ._ExternalInputModal-thead_s6fxy_88 {
1260
+ ._ExternalInputModal-thead_q3l5a_144 {
1261
+ background-color: var(--puck-color-white);
1072
1262
  position: sticky;
1073
1263
  top: 0;
1074
1264
  z-index: 1;
1075
1265
  }
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;
1266
+ ._ExternalInputModal-th_q3l5a_144 {
1267
+ border-bottom: 1px solid var(--puck-color-grey-09);
1268
+ color: var(--puck-color-grey-04);
1269
+ font-weight: 500;
1270
+ font-size: 14px;
1080
1271
  padding: 16px 24px;
1081
- opacity: 0.9;
1082
1272
  }
1083
- ._ExternalInputModal-td_s6fxy_102 {
1084
- font-family: var(--puck-font-stack);
1273
+ ._ExternalInputModal-td_q3l5a_159 {
1274
+ border-bottom: 1px solid var(--puck-color-grey-10);
1085
1275
  padding: 16px 24px;
1086
1276
  }
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 {
1277
+ ._ExternalInputModal-tr_q3l5a_164 ._ExternalInputModal-td_q3l5a_159:first-of-type {
1094
1278
  font-weight: 500;
1279
+ width: 1%;
1280
+ white-space: nowrap;
1095
1281
  }
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;
1282
+ @media (hover: hover) and (pointer: fine) {
1283
+ ._ExternalInputModal-tbody_q3l5a_171 ._ExternalInputModal-tr_q3l5a_164:hover {
1284
+ background: var(--puck-color-azure-12);
1285
+ color: var(--puck-color-azure-04);
1286
+ cursor: pointer;
1287
+ position: relative;
1288
+ margin-left: -5px;
1289
+ }
1290
+ ._ExternalInputModal-tbody_q3l5a_171 ._ExternalInputModal-tr_q3l5a_164:hover ._ExternalInputModal-td_q3l5a_159:first-of-type {
1291
+ border-left: 4px solid var(--puck-color-azure-04);
1292
+ padding-left: 20px;
1293
+ }
1102
1294
  }
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;
1295
+ ._ExternalInputModal-tbody_q3l5a_171 ._ExternalInputModal-tr_q3l5a_164:last-of-type ._ExternalInputModal-td_q3l5a_159 {
1296
+ border-bottom: none;
1106
1297
  }
1107
- ._ExternalInputModal-tableWrapper_s6fxy_72 {
1298
+ ._ExternalInputModal-tableWrapper_q3l5a_128 {
1108
1299
  display: none;
1109
1300
  }
1110
- ._ExternalInputModal--hasData_s6fxy_138 ._ExternalInputModal-tableWrapper_s6fxy_72 {
1301
+ ._ExternalInputModal--hasData_q3l5a_197 ._ExternalInputModal-tableWrapper_q3l5a_128 {
1111
1302
  display: block;
1112
1303
  }
1113
- ._ExternalInputModal-loadingBanner_s6fxy_142 {
1304
+ ._ExternalInputModal-loadingBanner_q3l5a_201 {
1114
1305
  display: none;
1115
- background-color: #ffffff90;
1306
+ background-color: color-mix(in srgb, var(--puck-color-white) 90%, transparent);
1116
1307
  padding: 64px;
1117
1308
  align-items: center;
1118
1309
  justify-content: center;
@@ -1122,50 +1313,64 @@ textarea._Input-input_1v7zr_46 {
1122
1313
  right: 0;
1123
1314
  bottom: 0;
1124
1315
  }
1125
- ._ExternalInputModal--isLoading_s6fxy_155 ._ExternalInputModal-loadingBanner_s6fxy_142 {
1316
+ ._ExternalInputModal--isLoading_q3l5a_218 ._ExternalInputModal-loadingBanner_q3l5a_201 {
1126
1317
  display: flex;
1127
1318
  }
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 {
1319
+ ._ExternalInputModal-searchForm_q3l5a_222 {
1138
1320
  display: flex;
1139
- margin-left: auto;
1140
- height: 43px;
1321
+ flex-wrap: wrap;
1141
1322
  gap: 12px;
1323
+ flex-grow: 1;
1324
+ }
1325
+ @media (min-width: 458px) {
1326
+ ._ExternalInputModal-searchForm_q3l5a_222 {
1327
+ flex-wrap: nowrap;
1328
+ }
1142
1329
  }
1143
- ._ExternalInputModal-search_s6fxy_171 {
1330
+ ._ExternalInputModal-search_q3l5a_222 {
1144
1331
  display: flex;
1145
- background: white;
1332
+ background: var(--puck-color-white);
1146
1333
  border-width: 1px;
1147
1334
  border-style: solid;
1148
- border-color: var(--puck-color-grey-8);
1335
+ border-color: var(--puck-color-grey-09);
1149
1336
  border-radius: 4px;
1150
- width: 100%;
1337
+ flex-grow: 1;
1338
+ transition: border-color 50ms ease-in;
1151
1339
  }
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;
1340
+ ._ExternalInputModal-search_q3l5a_222:focus-within {
1341
+ border-color: var(--puck-color-grey-05);
1342
+ outline: 2px solid var(--puck-color-azure-05);
1343
+ transition: none;
1156
1344
  }
1157
- ._ExternalInputModal-searchIcon_s6fxy_194 {
1345
+ @media (hover: hover) and (pointer: fine) {
1346
+ ._ExternalInputModal-search_q3l5a_222:hover {
1347
+ border-color: var(--puck-color-grey-05);
1348
+ transition: none;
1349
+ }
1350
+ }
1351
+ ._ExternalInputModal-searchIcon_q3l5a_259 {
1158
1352
  align-items: center;
1159
- background: var(--puck-color-grey-11);
1353
+ background: var(--puck-color-grey-12);
1160
1354
  border-bottom-left-radius: 4px;
1161
1355
  border-top-left-radius: 4px;
1162
- border-right: 1px solid var(--puck-color-grey-8);
1163
- color: var(--puck-color-grey-6);
1356
+ border-right: 1px solid var(--puck-color-grey-09);
1357
+ color: var(--puck-color-grey-07);
1164
1358
  display: flex;
1165
1359
  justify-content: center;
1166
1360
  padding: 12px 15px;
1361
+ transition: color 50ms ease-in;
1362
+ }
1363
+ ._ExternalInputModal-search_q3l5a_222:focus-within ._ExternalInputModal-searchIcon_q3l5a_259 {
1364
+ color: var(--puck-color-grey-04);
1365
+ transition: none;
1366
+ }
1367
+ @media (hover: hover) and (pointer: fine) {
1368
+ ._ExternalInputModal-search_q3l5a_222:hover ._ExternalInputModal-searchIcon_q3l5a_259 {
1369
+ color: var(--puck-color-grey-04);
1370
+ transition: none;
1371
+ }
1167
1372
  }
1168
- ._ExternalInputModal-searchIconText_s6fxy_206 {
1373
+ ._ExternalInputModal-searchIconText_q3l5a_284 {
1169
1374
  clip: rect(0 0 0 0);
1170
1375
  clip-path: inset(100%);
1171
1376
  height: 1px;
@@ -1174,24 +1379,45 @@ textarea._Input-input_1v7zr_46 {
1174
1379
  white-space: nowrap;
1175
1380
  width: 1px;
1176
1381
  }
1177
- ._ExternalInputModal-searchInput_s6fxy_216 {
1382
+ ._ExternalInputModal-searchInput_q3l5a_294 {
1178
1383
  border: none;
1179
1384
  border-radius: 4px;
1180
- background: white;
1385
+ background: var(--puck-color-white);
1181
1386
  font-family: inherit;
1182
1387
  font-size: 14px;
1183
1388
  padding: 12px 15px;
1184
1389
  width: 100%;
1185
1390
  }
1186
- ._ExternalInputModal-searchInput_s6fxy_216:focus {
1187
- border: none;
1188
- outline: none;
1189
- box-shadow: none;
1391
+ ._ExternalInputModal-searchInput_q3l5a_294:focus {
1392
+ outline: 0;
1393
+ }
1394
+ ._ExternalInputModal-searchActions_q3l5a_308 {
1395
+ display: flex;
1396
+ gap: 8px;
1397
+ height: 44px;
1398
+ width: 100%;
1399
+ }
1400
+ @media (min-width: 458px) {
1401
+ ._ExternalInputModal-searchActions_q3l5a_308 {
1402
+ width: auto;
1403
+ }
1404
+ }
1405
+ ._ExternalInputModal-searchActionIcon_q3l5a_321 {
1406
+ align-self: center;
1407
+ }
1408
+ ._ExternalInputModal-footer_q3l5a_325 {
1409
+ background-color: var(--puck-color-grey-12);
1410
+ border-top: 1px solid var(--puck-color-grey-09);
1411
+ color: var(--puck-color-grey-04);
1412
+ font-weight: 500;
1413
+ font-size: 14px;
1414
+ padding: 16px;
1415
+ text-align: right;
1190
1416
  }
1191
1417
 
1192
1418
  /* css-module:/home/runner/work/puck/puck/packages/core/components/Modal/styles.module.css/#css-module-data */
1193
- ._Modal_hx2u6_1 {
1194
- background: #00000099;
1419
+ ._Modal_zud0i_1 {
1420
+ background: color-mix(in srgb, var(--puck-color-black) 75%, transparent);
1195
1421
  display: none;
1196
1422
  justify-content: center;
1197
1423
  align-items: center;
@@ -1201,42 +1427,43 @@ textarea._Input-input_1v7zr_46 {
1201
1427
  bottom: 0;
1202
1428
  right: 0;
1203
1429
  z-index: 1;
1204
- padding: 64px;
1430
+ padding: 32px;
1205
1431
  }
1206
- ._Modal--isOpen_hx2u6_15 {
1432
+ ._Modal--isOpen_zud0i_15 {
1207
1433
  display: flex;
1208
1434
  }
1209
- ._Modal-inner_hx2u6_19 {
1435
+ ._Modal-inner_zud0i_19 {
1210
1436
  width: 100%;
1211
1437
  max-width: 1024px;
1212
- border-radius: 16px;
1438
+ border-radius: 8px;
1213
1439
  overflow: hidden;
1214
- background: white;
1440
+ background: var(--puck-color-white);
1215
1441
  display: flex;
1216
1442
  flex-direction: column;
1217
1443
  max-height: 90vh;
1218
1444
  }
1219
1445
 
1220
1446
  /* css-module:/home/runner/work/puck/puck/packages/core/components/InputOrGroup/fields/ObjectField/styles.module.css/#css-module-data */
1221
- ._ObjectField_56z4t_5 {
1447
+ ._ObjectField_15j63_5 {
1222
1448
  display: flex;
1223
1449
  flex-direction: column;
1224
- background-color: white;
1225
- border: 1px solid var(--puck-color-grey-8);
1450
+ background-color: var(--puck-color-white);
1451
+ border: 1px solid var(--puck-color-grey-09);
1226
1452
  border-radius: 4px;
1227
1453
  }
1228
- ._ObjectField-fieldset_56z4t_13 {
1454
+ ._ObjectField-fieldset_15j63_13 {
1229
1455
  border: none;
1230
1456
  margin: 0;
1231
1457
  padding: 16px 15px;
1232
1458
  }
1233
1459
 
1234
1460
  /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Fields/styles.module.css/#css-module-data */
1235
- ._PuckFields_1276r_1 {
1461
+ ._PuckFields_17k3p_1 {
1236
1462
  position: relative;
1463
+ font-family: var(--puck-font-family);
1237
1464
  }
1238
- ._PuckFields-loadingOverlay_1276r_5 {
1239
- background: white;
1465
+ ._PuckFields-loadingOverlay_17k3p_6 {
1466
+ background: var(--puck-color-white);
1240
1467
  display: flex;
1241
1468
  justify-content: center;
1242
1469
  align-items: center;
@@ -1251,128 +1478,153 @@ textarea._Input-input_1v7zr_46 {
1251
1478
  }
1252
1479
 
1253
1480
  /* 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);
1481
+ ._ComponentList_odh9d_1 {
1256
1482
  max-width: 100%;
1257
1483
  }
1258
- ._ComponentList--isExpanded_1di93_6 + ._ComponentList_1di93_1 {
1484
+ ._ComponentList--isExpanded_odh9d_5 + ._ComponentList_odh9d_1 {
1259
1485
  margin-top: 12px;
1260
1486
  }
1261
- ._ComponentList-content_1di93_10 {
1487
+ ._ComponentList-content_odh9d_9 {
1262
1488
  display: none;
1263
1489
  }
1264
- ._ComponentList--isExpanded_1di93_6 > ._ComponentList-content_1di93_10 {
1490
+ ._ComponentList--isExpanded_odh9d_5 > ._ComponentList-content_odh9d_9 {
1265
1491
  display: block;
1266
1492
  }
1267
- ._ComponentList-title_1di93_18 {
1268
- color: var(--puck-color-grey-4);
1493
+ ._ComponentList-title_odh9d_17 {
1494
+ background-color: transparent;
1495
+ border: 0;
1496
+ color: var(--puck-color-grey-05);
1497
+ cursor: pointer;
1269
1498
  display: flex;
1499
+ font: inherit;
1270
1500
  font-size: var(--puck-font-size-xxxs);
1271
1501
  list-style: none;
1502
+ margin-bottom: 6px;
1272
1503
  padding: 8px;
1273
1504
  text-transform: uppercase;
1505
+ transition: background-color 50ms ease-in, color 50ms ease-in;
1274
1506
  gap: 4px;
1275
1507
  border-radius: 4px;
1508
+ width: 100%;
1276
1509
  }
1277
- ._ComponentList--isExpanded_1di93_6 ._ComponentList-title_1di93_18 {
1278
- margin-bottom: 4px;
1510
+ ._ComponentList-title_odh9d_17:focus-visible {
1511
+ outline: 2px solid var(--puck-color-azure-05);
1512
+ outline-offset: 2px;
1279
1513
  }
1280
- ._ComponentList-title_1di93_18:hover {
1281
- background-color: var(--puck-color-azure-9);
1282
- color: var(--puck-color-azure-4);
1283
- cursor: pointer;
1514
+ @media (hover: hover) and (pointer: fine) {
1515
+ ._ComponentList-title_odh9d_17:hover {
1516
+ background-color: var(--puck-color-azure-11);
1517
+ color: var(--puck-color-azure-04);
1518
+ transition: none;
1519
+ }
1284
1520
  }
1285
- ._ComponentList-titleIcon_1di93_39 {
1521
+ ._ComponentList-title_odh9d_17:active {
1522
+ background-color: var(--puck-color-azure-10);
1523
+ transition: none;
1524
+ }
1525
+ ._ComponentList-titleIcon_odh9d_53 {
1286
1526
  margin-left: auto;
1287
1527
  }
1288
1528
 
1289
1529
  /* 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);
1530
+ ._LayerTree_1pgw8_1 {
1531
+ color: var(--puck-color-grey-03);
1532
+ font-family: var(--puck-font-family);
1293
1533
  font-size: var(--puck-font-size-xxs);
1294
1534
  margin: 0;
1295
1535
  position: relative;
1296
1536
  list-style: none;
1297
1537
  padding: 0;
1298
1538
  }
1299
- ._LayerTree-zoneTitle_o89yt_11 {
1300
- color: var(--puck-color-grey-4);
1539
+ ._LayerTree-zoneTitle_1pgw8_11 {
1540
+ color: var(--puck-color-grey-05);
1301
1541
  font-size: var(--puck-font-size-xxxs);
1302
1542
  text-transform: uppercase;
1303
1543
  }
1304
- ._LayerTree-helper_o89yt_17 {
1544
+ ._LayerTree-helper_1pgw8_17 {
1305
1545
  text-align: center;
1306
- color: var(--puck-color-grey-6);
1307
- font-family: var(--puck-font-stack);
1546
+ color: var(--puck-color-grey-07);
1308
1547
  margin: 8px 4px;
1309
1548
  }
1310
- ._Layer_o89yt_1 {
1549
+ ._Layer_1pgw8_1 {
1311
1550
  position: relative;
1312
1551
  border: 1px solid transparent;
1552
+ border-radius: 4px;
1313
1553
  }
1314
- ._Layer-inner_o89yt_29 {
1315
- padding-left: 12px;
1316
- padding-right: 4px;
1554
+ ._Layer-inner_1pgw8_29 {
1555
+ border: 1px solid transparent;
1317
1556
  border-radius: 4px;
1557
+ transition: color 50ms ease-in;
1318
1558
  }
1319
- ._Layer--containsZone_o89yt_35 > ._Layer-inner_o89yt_29 {
1559
+ ._Layer--containsZone_1pgw8_35 > ._Layer-inner_1pgw8_29 {
1320
1560
  padding-left: 0;
1321
1561
  }
1322
- ._Layer-clickable_o89yt_39 {
1562
+ ._Layer-clickable_1pgw8_39 {
1323
1563
  align-items: center;
1564
+ background: none;
1565
+ border: 0;
1566
+ border-radius: 4px;
1567
+ color: inherit;
1568
+ cursor: pointer;
1324
1569
  display: flex;
1570
+ font: inherit;
1571
+ padding-left: 12px;
1572
+ padding-right: 4px;
1573
+ width: 100%;
1325
1574
  }
1326
- ._Layer-inner_o89yt_29:hover {
1327
- cursor: pointer;
1575
+ ._Layer-clickable_1pgw8_39:focus-visible {
1576
+ outline: 2px solid var(--puck-color-azure-05);
1577
+ outline-offset: 2px;
1578
+ position: relative;
1579
+ z-index: 1;
1328
1580
  }
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);
1581
+ @media (hover: hover) and (pointer: fine) {
1582
+ ._Layer_1pgw8_1:not(._Layer--isSelected_1pgw8_61) > ._Layer-inner_1pgw8_29:hover {
1583
+ border-color: var(--puck-color-azure-10);
1584
+ background: var(--puck-color-azure-11);
1585
+ color: var(--puck-color-azure-04);
1586
+ transition: none;
1587
+ }
1333
1588
  }
1334
- ._Layer--isSelected_o89yt_48 {
1335
- background: var(--puck-color-azure-9);
1336
- border-color: var(--puck-color-azure-7);
1337
- border-radius: 4px;
1589
+ ._Layer--isSelected_1pgw8_61 {
1590
+ border-color: var(--puck-color-azure-08);
1338
1591
  }
1339
- ._Layer--isSelected_o89yt_48 > ._Layer-inner_o89yt_29 {
1340
- background: var(--puck-color-azure-85);
1341
- font-weight: 600;
1592
+ ._Layer--isSelected_1pgw8_61 > ._Layer-inner_1pgw8_29 {
1593
+ background: var(--puck-color-azure-10);
1342
1594
  }
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 {
1595
+ ._Layer--isSelected_1pgw8_61 > ._Layer-inner_1pgw8_29 > ._Layer-clickable_1pgw8_39 > ._Layer-chevron_1pgw8_77,
1596
+ ._Layer--childIsSelected_1pgw8_78 > ._Layer-inner_1pgw8_29 > ._Layer-clickable_1pgw8_39 > ._Layer-chevron_1pgw8_77 {
1345
1597
  transform: scaleY(-1);
1346
1598
  }
1347
- ._Layer-zones_o89yt_70 {
1599
+ ._Layer-zones_1pgw8_82 {
1348
1600
  display: none;
1349
1601
  margin-left: 12px;
1350
1602
  }
1351
- ._Layer--isSelected_o89yt_48 > ._Layer-zones_o89yt_70,
1352
- ._Layer--childIsSelected_o89yt_66 > ._Layer-zones_o89yt_70 {
1603
+ ._Layer--isSelected_1pgw8_61 > ._Layer-zones_1pgw8_82,
1604
+ ._Layer--childIsSelected_1pgw8_78 > ._Layer-zones_1pgw8_82 {
1353
1605
  display: block;
1354
1606
  }
1355
- ._Layer-zones_o89yt_70 > ._LayerTree_o89yt_1 {
1607
+ ._Layer-zones_1pgw8_82 > ._LayerTree_1pgw8_1 {
1356
1608
  margin-left: 12px;
1357
1609
  }
1358
- ._Layer-title_o89yt_84,
1359
- ._LayerTree-zoneTitle_o89yt_11 {
1610
+ ._Layer-title_1pgw8_96,
1611
+ ._LayerTree-zoneTitle_1pgw8_11 {
1360
1612
  display: flex;
1361
1613
  gap: 8px;
1362
1614
  align-items: center;
1363
1615
  margin: 8px 4px;
1364
1616
  overflow-x: hidden;
1365
1617
  }
1366
- ._Layer-name_o89yt_93 {
1618
+ ._Layer-name_1pgw8_105 {
1367
1619
  overflow-x: hidden;
1368
1620
  text-overflow: ellipsis;
1369
1621
  white-space: nowrap;
1370
1622
  }
1371
- ._Layer-icon_o89yt_99 {
1372
- color: var(--puck-color-rose-6);
1623
+ ._Layer-icon_1pgw8_111 {
1624
+ color: var(--puck-color-rose-07);
1373
1625
  margin-top: 4px;
1374
1626
  }
1375
- ._Layer-zoneIcon_o89yt_104 {
1376
- color: var(--puck-color-grey-7);
1627
+ ._Layer-zoneIcon_1pgw8_116 {
1628
+ color: var(--puck-color-grey-08);
1377
1629
  margin-top: 4px;
1378
1630
  }