@measured/puck 0.14.0-canary.adac562 → 0.14.0-canary.ca6bd5f

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