@measured/puck 0.14.0-canary.f2f0c9d → 0.14.0-canary.f975d87

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 (3) hide show
  1. package/dist/index.css +718 -522
  2. package/dist/index.js +28 -26
  3. 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
  }