@measured/puck 0.13.2-canary.8d7db7b → 0.14.0-canary.22a4182

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