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

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 (7) hide show
  1. package/dist/{Config-1444273f.d.ts → Config-shqT_YTp.d.ts} +42 -25
  2. package/dist/index.css +937 -594
  3. package/dist/index.d.ts +92 -51
  4. package/dist/index.js +1708 -769
  5. package/dist/rsc.d.ts +2 -2
  6. package/dist/rsc.js +4 -1
  7. package/package.json +5 -3
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,200 @@
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
- /* css-module:/home/runner/work/puck/puck/packages/core/components/Button/Button.module.css/#css-module-data */
146
- ._Button_1brfa_1 {
139
+ /* components/Button/Button.module.css */
140
+ .Button_Button {
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_Button:hover,
163
+ .Button_Button: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_Button--medium {
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_Button--large {
174
+ padding-bottom: 11px;
175
+ padding-left: 19px;
176
+ padding-right: 19px;
177
+ padding-top: 11px;
178
+ }
179
+ .Button_Button-icon {
179
180
  margin-top: 2px;
180
181
  }
181
- ._Button_1brfa_1:hover {
182
- text-decoration: none;
182
+ .Button_Button--primary {
183
+ background: var(--puck-color-azure-04);
183
184
  }
184
- ._Button--primary_1brfa_44 {
185
- background: var(--puck-color-blue);
185
+ .Button_Button: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_Button--primary:hover {
191
+ background-color: var(--puck-color-azure-03);
192
+ }
190
193
  }
191
- ._Button--secondary_1brfa_53 {
192
- color: currentColor;
194
+ .Button_Button--primary:active {
195
+ background-color: var(--puck-color-azure-02);
196
+ }
197
+ .Button_Button--secondary {
193
198
  border: 1px solid currentColor;
199
+ color: currentColor;
200
+ }
201
+ @media (hover: hover) and (pointer: fine) {
202
+ .Button_Button--secondary:hover {
203
+ background-color: var(--puck-color-azure-12);
204
+ color: var(--puck-color-black);
205
+ }
194
206
  }
195
- ._Button--secondary_1brfa_53:hover {
196
- background-color: var(--puck-color-grey-10);
197
- color: black;
198
- opacity: 0.7;
207
+ .Button_Button--secondary:active {
208
+ background-color: var(--puck-color-azure-11);
209
+ color: var(--puck-color-black);
199
210
  }
200
- ._Button--flush_1brfa_64 {
211
+ .Button_Button--flush {
201
212
  border-radius: 0;
202
213
  }
203
- ._Button--disabled_1brfa_68 {
204
- background: var(--puck-color-grey-10);
205
- color: black;
214
+ .Button_Button--disabled,
215
+ .Button_Button--disabled:hover {
216
+ background-color: var(--puck-color-grey-07);
217
+ color: var(--puck-color-grey-03);
206
218
  cursor: not-allowed;
207
219
  }
208
- ._Button--disabled_1brfa_68:hover {
209
- opacity: 1;
210
- }
211
- ._Button--fullWidth_1brfa_78 {
220
+ .Button_Button--fullWidth {
221
+ justify-content: center;
212
222
  width: 100%;
213
223
  }
224
+ .Button_Button-spinner {
225
+ padding-left: 8px;
226
+ }
214
227
 
215
- /* 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;
228
+ /* components/Drawer/styles.module.css */
229
+ .styles_Drawer {
230
+ font-family: var(--puck-font-family);
218
231
  }
219
- ._DrawerItem-default_1qydx_1 ._DrawerItem-draggableWrapper_1qydx_1 {
232
+ .styles_DrawerItem-default .styles_DrawerItem-draggableWrapper {
220
233
  padding-bottom: 12px;
221
234
  }
222
- ._DrawerItem-draggable_1qydx_1 {
223
- background: white;
235
+ .styles_DrawerItem:last-of-type .styles_DrawerItem-default .styles_DrawerItem-draggableWrapper {
236
+ padding-bottom: 0;
237
+ }
238
+ .styles_DrawerItem-draggable {
239
+ background: var(--puck-color-white);
224
240
  padding: 12px;
225
241
  display: flex;
226
- border: 1px var(--puck-color-grey-8) solid;
242
+ border: 1px var(--puck-color-grey-09) solid;
227
243
  border-radius: 4px;
228
244
  font-size: var(--puck-font-size-xxs);
229
245
  justify-content: space-between;
230
246
  align-items: center;
231
247
  cursor: grab;
248
+ transition: background-color 50ms ease-in, color 50ms ease-in;
232
249
  }
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);
250
+ .styles_DrawerItem:focus-visible {
251
+ outline: 0;
236
252
  }
237
- ._DrawerItem-name_1qydx_26 {
253
+ .styles_Drawer:not(.styles_Drawer--isDraggingFrom) .styles_DrawerItem:focus-visible .styles_DrawerItem-draggable {
254
+ border-radius: 4px;
255
+ outline: 2px solid var(--puck-color-azure-05);
256
+ outline-offset: 2px;
257
+ }
258
+ @media (hover: hover) and (pointer: fine) {
259
+ .styles_Drawer:not(.styles_Drawer--isDraggingFrom) .styles_DrawerItem-draggable:hover {
260
+ background-color: var(--puck-color-azure-12);
261
+ color: var(--puck-color-azure-04);
262
+ transition: none;
263
+ }
264
+ }
265
+ .styles_DrawerItem-name {
238
266
  overflow-x: hidden;
239
267
  text-overflow: ellipsis;
240
268
  white-space: nowrap;
241
269
  }
242
270
 
243
- /* 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);
271
+ /* components/DragIcon/styles.module.css */
272
+ .styles_DragIcon {
273
+ color: var(--puck-color-grey-05);
274
+ cursor: grab;
246
275
  padding: 4px;
247
276
  border-radius: 4px;
248
277
  }
249
- ._DragIcon_o29on_1:hover {
250
- cursor: grab;
251
- background: var(--puck-color-grey-9);
278
+ @media (hover: hover) and (pointer: fine) {
279
+ .styles_DragIcon:hover {
280
+ color: var(--puck-color-azure-05);
281
+ background-color: var(--puck-color-azure-12);
282
+ }
252
283
  }
253
284
 
254
- /* css-module:/home/runner/work/puck/puck/packages/core/components/DraggableComponent/styles.module.css/#css-module-data */
255
- ._DraggableComponent_foluk_1 {
256
- outline-offset: 0px !important;
285
+ /* components/DraggableComponent/styles.module.css */
286
+ .styles_DraggableComponent {
257
287
  pointer-events: auto;
288
+ --overlay-background: color-mix( in srgb, var(--puck-color-azure-08) 30%, transparent );
258
289
  }
259
- ._DraggableComponent--isDragging_foluk_6 {
260
- background: #abc7e510;
261
- outline: 2px var(--puck-color-azure-8) solid !important;
290
+ .styles_DraggableComponent--isDragging {
291
+ background: color-mix(in srgb, var(--puck-color-azure-08) 10%, transparent);
262
292
  overflow: hidden;
263
293
  }
264
- ._DraggableComponent-contents_foluk_12 {
294
+ .styles_DraggableComponent-contents {
265
295
  position: relative;
266
296
  pointer-events: none;
267
297
  z-index: 0;
268
298
  }
269
- ._DraggableComponent-contents_foluk_12::before,
270
- ._DraggableComponent-contents_foluk_12::after {
299
+ .styles_DraggableComponent-contents::before,
300
+ .styles_DraggableComponent-contents::after {
271
301
  content: " ";
272
302
  display: table;
273
303
  }
274
- ._DraggableComponent-overlay_foluk_25 {
275
- display: none;
276
- background: #abc7e530;
304
+ .styles_DraggableComponent-overlay {
277
305
  cursor: pointer;
278
306
  height: 100%;
279
307
  width: 100%;
280
308
  top: 0;
309
+ outline-offset: -2px;
281
310
  position: absolute;
282
- z-index: 0;
283
- font-family: var(--puck-font-stack);
284
311
  pointer-events: none;
285
312
  box-sizing: border-box;
313
+ z-index: 1;
314
+ }
315
+ .styles_DraggableComponent:focus-visible > .styles_DraggableComponent-overlay {
316
+ outline: 1px solid var(--puck-color-azure-05);
286
317
  }
287
- ._DraggableComponent-loadingOverlay_foluk_39 {
318
+ .styles_DraggableComponent--isDragging > .styles_DraggableComponent-overlay {
319
+ outline: 1px var(--puck-color-azure-09) solid !important;
320
+ }
321
+ .styles_DraggableComponent-loadingOverlay {
288
322
  background: var(--puck-color-white);
289
- color: var(--puck-color-grey-2);
323
+ color: var(--puck-color-grey-03);
290
324
  border-radius: 4px;
291
325
  display: flex;
292
326
  padding: 8px;
@@ -299,56 +333,53 @@
299
333
  opacity: 0.8;
300
334
  z-index: 1;
301
335
  }
302
- ._DraggableComponent_foluk_1:hover:not(._DraggableComponent--isLocked_foluk_55) > ._DraggableComponent-overlay_foluk_25 {
303
- display: block;
336
+ .styles_DraggableComponent:hover:not(.styles_DraggableComponent--isLocked) > .styles_DraggableComponent-overlay {
337
+ background: var(--overlay-background);
304
338
  pointer-events: none;
305
339
  }
306
- ._DraggableComponent--forceHover_foluk_61 > ._DraggableComponent-overlay_foluk_25 {
307
- display: block;
340
+ .styles_DraggableComponent--forceHover > .styles_DraggableComponent-overlay {
341
+ background: var(--overlay-background);
308
342
  pointer-events: none;
309
343
  }
310
- ._DraggableComponent_foluk_1:not(._DraggableComponent--isSelected_foluk_66) > ._DraggableComponent-overlay_foluk_25 {
311
- outline: 2px var(--puck-color-azure-8) solid !important;
344
+ .styles_DraggableComponent:not(.styles_DraggableComponent--isSelected):hover > .styles_DraggableComponent-overlay {
345
+ outline: 2px var(--puck-color-azure-09) solid !important;
312
346
  }
313
- ._DraggableComponent--indicativeHover_foluk_71 > ._DraggableComponent-overlay_foluk_25 {
314
- display: block;
315
- background: transparent;
347
+ .styles_DraggableComponent--indicativeHover > .styles_DraggableComponent-overlay {
316
348
  pointer-events: none;
317
349
  }
318
- ._DraggableComponent_foluk_1:not(._DraggableComponent--isSelected_foluk_66):has(._DraggableComponent_foluk_1:hover > ._DraggableComponent-overlay_foluk_25) > ._DraggableComponent-overlay_foluk_25 {
350
+ .styles_DraggableComponent:not(.styles_DraggableComponent--isSelected):has(.styles_DraggableComponent:hover > .styles_DraggableComponent-overlay) > .styles_DraggableComponent-overlay {
319
351
  display: none;
320
352
  }
321
- ._DraggableComponent--isSelected_foluk_66 {
322
- outline: 2px var(--puck-color-azure-6) solid !important;
353
+ .styles_DraggableComponent--isSelected > .styles_DraggableComponent-overlay {
354
+ outline: 2px var(--puck-color-azure-07) solid !important;
323
355
  }
324
- ._DraggableComponent--isSelected_foluk_66 > ._DraggableComponent-overlay_foluk_25 {
325
- background: none;
356
+ .styles_DraggableComponent--isSelected > .styles_DraggableComponent-actionsOverlay {
326
357
  display: block;
327
358
  position: sticky;
328
- top: 56px;
329
- z-index: 1;
359
+ z-index: 2;
330
360
  }
331
- ._DraggableComponent-actions_foluk_97 {
361
+ .styles_DraggableComponent-actions {
332
362
  position: absolute;
333
- right: 6.5px;
334
363
  width: auto;
335
- top: -48px;
336
364
  padding: 4px;
337
365
  border-top-left-radius: 8px;
338
366
  border-top-right-radius: 8px;
339
367
  border-radius: 8px;
340
- background: var(--puck-color-grey-0);
341
- color: white;
368
+ background: var(--puck-color-grey-01);
369
+ color: var(--puck-color-white);
370
+ cursor: grab;
342
371
  display: none;
372
+ font-family: var(--puck-font-family);
343
373
  gap: 4px;
344
374
  pointer-events: auto;
345
375
  box-sizing: border-box;
376
+ transform-origin: right top;
346
377
  }
347
- ._DraggableComponent--isSelected_foluk_66 > ._DraggableComponent-overlay_foluk_25 > ._DraggableComponent-actions_foluk_97 {
378
+ .styles_DraggableComponent--isSelected > .styles_DraggableComponent-actionsOverlay > .styles_DraggableComponent-actions {
348
379
  display: flex;
349
380
  }
350
- ._DraggableComponent-actionsLabel_foluk_120 {
351
- color: var(--puck-color-grey-7);
381
+ .styles_DraggableComponent-actionsLabel {
382
+ color: var(--puck-color-grey-08);
352
383
  display: flex;
353
384
  font-size: var(--puck-font-size-xxxs);
354
385
  font-weight: 500;
@@ -357,26 +388,40 @@
357
388
  padding-left: 8px;
358
389
  padding-right: 16px;
359
390
  margin-right: 8px;
360
- border-right: 1px solid var(--puck-color-grey-4);
391
+ border-right: 0.5px solid var(--puck-color-grey-05);
361
392
  text-overflow: ellipsis;
362
393
  white-space: nowrap;
363
394
  }
364
- ._DraggableComponent-action_foluk_97 {
395
+ .styles_DraggableComponent-action {
365
396
  background: transparent;
366
397
  border: none;
367
- color: var(--puck-color-grey-7);
398
+ color: var(--puck-color-grey-08);
399
+ cursor: pointer;
368
400
  padding: 6px 8px;
369
401
  border-radius: 4px;
370
402
  overflow: hidden;
403
+ display: flex;
404
+ align-items: center;
405
+ justify-content: center;
406
+ transition: color 50ms ease-in;
371
407
  }
372
- ._DraggableComponent-action_foluk_97:hover {
373
- background: var(--puck-color-grey-2);
374
- color: var(--puck-color-azure-5);
375
- cursor: pointer;
408
+ .styles_DraggableComponent-action:focus-visible {
409
+ outline: 2px solid var(--puck-color-azure-05);
410
+ outline-offset: -2px;
411
+ }
412
+ @media (hover: hover) and (pointer: fine) {
413
+ .styles_DraggableComponent-action:hover {
414
+ color: var(--puck-color-azure-06);
415
+ transition: none;
416
+ }
417
+ }
418
+ .styles_DraggableComponent-action:active {
419
+ color: var(--puck-color-azure-07);
420
+ transition: none;
376
421
  }
377
422
 
378
- /* css-module:/home/runner/work/puck/puck/packages/core/components/DropZone/styles.module.css/#css-module-data */
379
- ._DropZone_i675d_1 {
423
+ /* components/DropZone/styles.module.css */
424
+ .styles_DropZone {
380
425
  margin-left: auto;
381
426
  margin-right: auto;
382
427
  position: relative;
@@ -384,42 +429,36 @@
384
429
  outline-offset: -1px;
385
430
  width: 100%;
386
431
  }
387
- ._DropZone--zoomEnabled_i675d_10 {
388
- zoom: 1.33;
389
- }
390
- ._DropZone--zoomEnabled_i675d_10 ._DropZone-renderWrapper_i675d_14 {
391
- zoom: 0.75;
392
- }
393
- ._DropZone-content_i675d_18 {
432
+ .styles_DropZone-content {
394
433
  min-height: 128px;
395
434
  height: 100%;
396
435
  }
397
- ._DropZone--userIsDragging_i675d_23 ._DropZone-content_i675d_18 {
436
+ .styles_DropZone--userIsDragging .styles_DropZone-content {
398
437
  pointer-events: all;
399
438
  }
400
- ._DropZone--userIsDragging_i675d_23:not(._DropZone--draggingOverArea_i675d_27):not(._DropZone--draggingNewComponent_i675d_28) > ._DropZone-content_i675d_18 {
439
+ .styles_DropZone--userIsDragging:not(.styles_DropZone--draggingOverArea):not(.styles_DropZone--draggingNewComponent) > .styles_DropZone-content {
401
440
  pointer-events: none;
402
441
  }
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);
442
+ .styles_DropZone--isAreaSelected,
443
+ .styles_DropZone--draggingOverArea:not(:has(.styles_DropZone--hoveringOverArea)),
444
+ .styles_DropZone--hoveringOverArea:not(.styles_DropZone--isDisabled):not(.styles_DropZone--isRootZone):not(.styles_DropZone--hasChildren) {
445
+ background: color-mix(in srgb, var(--puck-color-azure-09) 30%, transparent);
446
+ outline: 2px dashed var(--puck-color-azure-08);
408
447
  }
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);
448
+ .styles_DropZone:not(.styles_DropZone--hasChildren) {
449
+ background: color-mix(in srgb, var(--puck-color-azure-09) 30%, transparent);
450
+ outline: 2px dashed var(--puck-color-azure-08);
412
451
  }
413
- ._DropZone--isDestination_i675d_48 {
414
- outline: 2px dashed var(--puck-color-azure-3) !important;
452
+ .styles_DropZone--isDestination {
453
+ outline: 2px dashed var(--puck-color-azure-04) !important;
415
454
  }
416
- ._DropZone--isDestination_i675d_48:not(._DropZone--isRootZone_i675d_37) {
417
- background: var(--puck-color-azure-85) !important;
455
+ .styles_DropZone--isDestination:not(.styles_DropZone--isRootZone) {
456
+ background: var(--puck-color-azure-10) !important;
418
457
  }
419
- ._DropZone-item_i675d_56 {
458
+ .styles_DropZone-item {
420
459
  position: relative;
421
460
  }
422
- ._DropZone-hitbox_i675d_60 {
461
+ .styles_DropZone-hitbox {
423
462
  position: absolute;
424
463
  bottom: -12px;
425
464
  height: 24px;
@@ -427,23 +466,36 @@
427
466
  z-index: 1;
428
467
  }
429
468
 
430
- /* css-module:/home/runner/work/puck/puck/packages/core/components/IconButton/IconButton.module.css/#css-module-data */
431
- ._IconButton_38xdr_1 {
469
+ /* components/IconButton/IconButton.module.css */
470
+ .IconButton_IconButton {
432
471
  align-items: center;
433
472
  background: transparent;
434
473
  border: none;
435
474
  border-radius: 4px;
436
475
  color: currentColor;
437
476
  display: flex;
477
+ font-family: var(--puck-font-family);
438
478
  justify-content: center;
439
479
  padding: 4px;
480
+ transition: background-color 50ms ease-in, color 50ms ease-in;
481
+ }
482
+ .IconButton_IconButton:focus-visible {
483
+ outline: 2px solid var(--puck-color-azure-05);
484
+ outline-offset: -2px;
485
+ }
486
+ @media (hover: hover) and (pointer: fine) {
487
+ .IconButton_IconButton:hover:not(.IconButton_IconButton--disabled) {
488
+ background: var(--puck-color-azure-12);
489
+ color: var(--puck-color-azure-04);
490
+ cursor: pointer;
491
+ transition: none;
492
+ }
440
493
  }
441
- ._IconButton_38xdr_1:hover {
442
- background: var(--puck-color-grey-9);
443
- color: var(--puck-color-blue);
444
- cursor: pointer;
494
+ .IconButton_IconButton:active {
495
+ background: var(--puck-color-azure-11);
496
+ transition: none;
445
497
  }
446
- ._IconButton-title_38xdr_18 {
498
+ .IconButton_IconButton-title {
447
499
  clip: rect(0 0 0 0);
448
500
  clip-path: inset(100%);
449
501
  height: 1px;
@@ -452,64 +504,83 @@
452
504
  white-space: nowrap;
453
505
  width: 1px;
454
506
  }
507
+ .IconButton_IconButton--disabled {
508
+ color: var(--puck-color-grey-07);
509
+ }
455
510
 
456
- /* css-module:/home/runner/work/puck/puck/packages/core/components/SidebarSection/styles.module.css/#css-module-data */
457
- ._SidebarSection_170gs_1 {
511
+ /* components/SidebarSection/styles.module.css */
512
+ .styles_SidebarSection {
458
513
  display: flex;
459
514
  position: relative;
460
515
  flex-direction: column;
461
- color: black;
516
+ color: var(--puck-color-black);
462
517
  }
463
- ._SidebarSection_170gs_1:last-of-type {
518
+ .styles_SidebarSection:last-of-type {
464
519
  flex-grow: 1;
465
520
  }
466
- ._SidebarSection-title_170gs_12 {
467
- background: white;
521
+ .styles_SidebarSection-title {
522
+ background: var(--puck-color-white);
468
523
  padding: 16px;
469
- border-bottom: 1px solid var(--puck-color-grey-8);
470
- border-top: 1px solid var(--puck-color-grey-8);
524
+ border-bottom: 1px solid var(--puck-color-grey-09);
525
+ border-top: 1px solid var(--puck-color-grey-09);
471
526
  overflow-x: auto;
472
527
  }
473
- ._SidebarSection--noBorderTop_170gs_20 > ._SidebarSection-title_170gs_12 {
528
+ .styles_SidebarSection--noBorderTop > .styles_SidebarSection-title {
474
529
  border-top: 0px;
475
530
  }
476
- ._SidebarSection-content_170gs_24 {
531
+ .styles_SidebarSection-content {
477
532
  padding: 16px;
478
533
  }
479
- ._SidebarSection--noPadding_170gs_28 > ._SidebarSection-content_170gs_24 {
534
+ .styles_SidebarSection--noPadding > .styles_SidebarSection-content {
480
535
  padding: 0px;
481
536
  }
482
- ._SidebarSection--noPadding_170gs_28 > ._SidebarSection-content_170gs_24:last-child {
537
+ .styles_SidebarSection--noPadding > .styles_SidebarSection-content:last-child {
483
538
  padding-bottom: 4px;
484
539
  }
485
- ._SidebarSection_170gs_1:last-of-type ._SidebarSection-content_170gs_24 {
540
+ .styles_SidebarSection:last-of-type .styles_SidebarSection-content {
486
541
  border-bottom: none;
487
542
  flex-grow: 1;
488
543
  }
489
- ._SidebarSection-breadcrumbLabel_170gs_41 {
490
- color: var(--puck-color-azure-3);
544
+ .styles_SidebarSection-breadcrumbLabel {
545
+ background: none;
546
+ border: 0;
547
+ border-radius: 2px;
548
+ color: var(--puck-color-azure-04);
549
+ cursor: pointer;
550
+ font: inherit;
491
551
  flex-shrink: 0;
552
+ padding: 0;
553
+ transition: color 50ms ease-in;
492
554
  }
493
- ._SidebarSection-breadcrumbLabel_170gs_41:hover {
494
- color: var(--puck-color-azure-4);
495
- cursor: pointer;
496
- text-decoration: underline;
555
+ .styles_SidebarSection-breadcrumbLabel:focus-visible {
556
+ outline: 2px solid var(--puck-color-azure-05);
557
+ outline-offset: 2px;
558
+ }
559
+ @media (hover: hover) and (pointer: fine) {
560
+ .styles_SidebarSection-breadcrumbLabel:hover {
561
+ color: var(--puck-color-azure-03);
562
+ transition: none;
563
+ }
564
+ }
565
+ .styles_SidebarSection-breadcrumbLabel:active {
566
+ color: var(--puck-color-azure-02);
567
+ transition: none;
497
568
  }
498
- ._SidebarSection-breadcrumbs_170gs_52 {
569
+ .styles_SidebarSection-breadcrumbs {
499
570
  align-items: center;
500
571
  display: flex;
501
572
  gap: 4px;
502
573
  }
503
- ._SidebarSection-breadcrumb_170gs_41 {
574
+ .styles_SidebarSection-breadcrumb {
504
575
  align-items: center;
505
576
  display: flex;
506
577
  gap: 4px;
507
578
  }
508
- ._SidebarSection-heading_170gs_64 {
579
+ .styles_SidebarSection-heading {
509
580
  padding-right: 16px;
510
581
  }
511
- ._SidebarSection-loadingOverlay_170gs_68 {
512
- background: white;
582
+ .styles_SidebarSection-loadingOverlay {
583
+ background: var(--puck-color-white);
513
584
  display: flex;
514
585
  justify-content: center;
515
586
  align-items: center;
@@ -523,48 +594,47 @@
523
594
  opacity: 0.8;
524
595
  }
525
596
 
526
- /* css-module:/home/runner/work/puck/puck/packages/core/components/Heading/styles.module.css/#css-module-data */
527
- ._Heading_1bvy5_1 {
597
+ /* components/Heading/styles.module.css */
598
+ .styles_Heading {
528
599
  display: block;
529
600
  color: var(--puck-color-black);
530
- font-family: var(--puck-font-stack);
531
601
  font-weight: 700;
532
602
  margin: 0;
533
603
  }
534
- ._Heading_1bvy5_1 b {
604
+ .styles_Heading b {
535
605
  font-weight: 700;
536
606
  }
537
- ._Heading--xxxxl_1bvy5_13 {
607
+ .styles_Heading--xxxxl {
538
608
  font-size: var(--puck-font-size-xxxxl);
539
609
  letter-spacing: 0.08ch;
540
610
  font-weight: 800;
541
611
  }
542
- ._Heading--xxxl_1bvy5_19 {
612
+ .styles_Heading--xxxl {
543
613
  font-size: var(--puck-font-size-xxxl);
544
614
  }
545
- ._Heading--xxl_1bvy5_23 {
615
+ .styles_Heading--xxl {
546
616
  font-size: var(--puck-font-size-xxl);
547
617
  }
548
- ._Heading--xl_1bvy5_27 {
618
+ .styles_Heading--xl {
549
619
  font-size: var(--puck-font-size-xl);
550
620
  }
551
- ._Heading--l_1bvy5_31 {
621
+ .styles_Heading--l {
552
622
  font-size: var(--puck-font-size-l);
553
623
  }
554
- ._Heading--m_1bvy5_35 {
624
+ .styles_Heading--m {
555
625
  font-size: var(--puck-font-size-m);
556
626
  }
557
- ._Heading--s_1bvy5_39 {
627
+ .styles_Heading--s {
558
628
  font-size: var(--puck-font-size-s);
559
629
  }
560
- ._Heading--xs_1bvy5_43 {
630
+ .styles_Heading--xs {
561
631
  font-size: var(--puck-font-size-xs);
562
632
  }
563
633
 
564
- /* css-module:/home/runner/work/puck/puck/packages/core/components/MenuBar/styles.module.css/#css-module-data */
565
- ._MenuBar_12sp7_1 {
634
+ /* components/MenuBar/styles.module.css */
635
+ .styles_MenuBar {
566
636
  background-color: var(--puck-color-white);
567
- border-bottom: 1px solid var(--puck-color-grey-8);
637
+ border-bottom: 1px solid var(--puck-color-grey-09);
568
638
  display: none;
569
639
  left: 0;
570
640
  margin-top: 1px;
@@ -574,11 +644,11 @@
574
644
  top: 100%;
575
645
  z-index: 2;
576
646
  }
577
- ._MenuBar--menuOpen_12sp7_14 {
647
+ .styles_MenuBar--menuOpen {
578
648
  display: block;
579
649
  }
580
650
  @media (min-width: 638px) {
581
- ._MenuBar_12sp7_1 {
651
+ .styles_MenuBar {
582
652
  border: none;
583
653
  display: block;
584
654
  margin-top: 0;
@@ -587,7 +657,7 @@
587
657
  position: static;
588
658
  }
589
659
  }
590
- ._MenuBar-inner_12sp7_29 {
660
+ .styles_MenuBar-inner {
591
661
  align-items: center;
592
662
  display: flex;
593
663
  flex-wrap: wrap;
@@ -595,85 +665,86 @@
595
665
  justify-content: flex-end;
596
666
  }
597
667
  @media (min-width: 638px) {
598
- ._MenuBar-inner_12sp7_29 {
668
+ .styles_MenuBar-inner {
599
669
  display: flex;
600
670
  flex-direction: row;
601
671
  flex-wrap: nowrap;
602
672
  }
603
673
  }
604
- ._MenuBar-history_12sp7_45 {
674
+ .styles_MenuBar-history {
605
675
  display: flex;
606
676
  }
607
677
 
608
- /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/styles.module.css/#css-module-data */
609
- ._Puck_17hk3_19 {
678
+ /* components/Puck/styles.module.css */
679
+ .styles_Puck {
610
680
  --puck-frame-width: auto;
611
681
  --puck-side-bar-width: 186px;
612
682
  --puck-space-px: 16px;
613
683
  bottom: 0;
614
684
  display: grid;
685
+ font-family: var(--puck-font-family);
615
686
  grid-template-areas: "header header header" "left editor right";
616
687
  grid-template-columns: 0 var(--puck-frame-width) 0;
617
688
  grid-template-rows: min-content auto;
618
- height: 100vh;
689
+ height: 100dvh;
619
690
  left: 0;
620
691
  position: fixed;
621
692
  right: 0;
622
693
  top: 0;
623
694
  }
624
- ._Puck--leftSideBarVisible_17hk3_35 {
695
+ .styles_Puck--leftSideBarVisible {
625
696
  grid-template-columns: var(--puck-side-bar-width) var(--puck-frame-width) 0;
626
697
  }
627
- ._Puck--rightSideBarVisible_17hk3_41 {
698
+ .styles_Puck--rightSideBarVisible {
628
699
  grid-template-columns: 0 var(--puck-frame-width) var(--puck-side-bar-width);
629
700
  }
630
- ._Puck--leftSideBarVisible_17hk3_35._Puck--rightSideBarVisible_17hk3_41 {
701
+ .styles_Puck--leftSideBarVisible.styles_Puck--rightSideBarVisible {
631
702
  grid-template-columns: var(--puck-side-bar-width) var(--puck-frame-width) var(--puck-side-bar-width);
632
703
  }
633
704
  @media (min-width: 458px) {
634
- ._Puck_17hk3_19 {
705
+ .styles_Puck {
635
706
  --puck-frame-width: minmax(266px, auto);
636
707
  }
637
708
  }
638
709
  @media (min-width: 638px) {
639
- ._Puck_17hk3_19 {
710
+ .styles_Puck {
640
711
  --puck-side-bar-width: minmax(186px, 250px);
641
712
  }
642
713
  }
643
714
  @media (min-width: 766px) {
644
- ._Puck_17hk3_19 {
715
+ .styles_Puck {
645
716
  --puck-frame-width: auto;
646
717
  }
647
718
  }
648
719
  @media (min-width: 990px) {
649
- ._Puck_17hk3_19 {
720
+ .styles_Puck {
650
721
  --puck-side-bar-width: 256px;
651
722
  }
652
723
  }
653
724
  @media (min-width: 1198px) {
654
- ._Puck_17hk3_19 {
725
+ .styles_Puck {
655
726
  --puck-side-bar-width: 274px;
656
727
  }
657
728
  }
658
729
  @media (min-width: 1398px) {
659
- ._Puck_17hk3_19 {
730
+ .styles_Puck {
660
731
  --puck-side-bar-width: 290px;
661
732
  }
662
733
  }
663
734
  @media (min-width: 1598px) {
664
- ._Puck_17hk3_19 {
735
+ .styles_Puck {
665
736
  --puck-side-bar-width: 320px;
666
737
  }
667
738
  }
668
- ._Puck-header_17hk3_95 {
739
+ .styles_Puck-header {
669
740
  background: var(--puck-color-white);
670
- border-bottom: 1px solid var(--puck-color-grey-8);
741
+ border-bottom: 1px solid var(--puck-color-grey-09);
671
742
  color: var(--puck-color-black);
672
743
  grid-area: header;
673
744
  position: relative;
674
745
  max-width: 100vw;
675
746
  }
676
- ._Puck-headerInner_17hk3_104 {
747
+ .styles_Puck-headerInner {
677
748
  align-items: end;
678
749
  display: grid;
679
750
  gap: var(--puck-space-px);
@@ -682,255 +753,306 @@
682
753
  grid-template-rows: auto;
683
754
  padding: var(--puck-space-px);
684
755
  }
685
- ._Puck-headerToggle_17hk3_114 {
686
- color: var(--puck-color-grey-4);
756
+ .styles_Puck-headerToggle {
757
+ color: var(--puck-color-grey-05);
687
758
  display: flex;
688
759
  margin-left: -4px;
689
760
  padding-top: 2px;
690
761
  }
691
- ._Puck--rightSideBarVisible_17hk3_41 ._Puck-rightSideBarToggle_17hk3_121,
692
- ._Puck--leftSideBarVisible_17hk3_35 ._Puck-leftSideBarToggle_17hk3_122 {
762
+ .styles_Puck--rightSideBarVisible .styles_Puck-rightSideBarToggle,
763
+ .styles_Puck--leftSideBarVisible .styles_Puck-leftSideBarToggle {
693
764
  color: var(--puck-color-black);
694
765
  }
695
- ._Puck-headerTitle_17hk3_126 {
766
+ .styles_Puck-headerTitle {
696
767
  align-self: center;
697
768
  }
698
- ._Puck-headerPath_17hk3_130 {
769
+ .styles_Puck-headerPath {
699
770
  font-family: var(--puck-font-family-monospaced);
700
771
  font-size: var(--puck-font-size-xxs);
701
772
  font-weight: normal;
702
773
  word-break: break-all;
703
774
  }
704
- ._Puck-headerTools_17hk3_137 {
775
+ .styles_Puck-headerTools {
705
776
  display: flex;
706
777
  gap: 16px;
707
778
  justify-content: flex-end;
708
779
  }
709
- ._Puck-menuButton_17hk3_143 {
710
- color: var(--puck-color-grey-4);
780
+ .styles_Puck-menuButton {
781
+ color: var(--puck-color-grey-05);
711
782
  margin-left: -4px;
712
783
  }
713
- ._Puck--menuOpen_17hk3_148 ._Puck-menuButton_17hk3_143 {
784
+ .styles_Puck--menuOpen .styles_Puck-menuButton {
714
785
  color: var(--puck-color-black);
715
786
  }
716
787
  @media (min-width: 638px) {
717
- ._Puck-menuButton_17hk3_143 {
788
+ .styles_Puck-menuButton {
718
789
  display: none;
719
790
  }
720
791
  }
721
- ._Puck-leftSideBar_17hk3_122 {
722
- background: var(--puck-color-grey-11);
723
- border-right: 1px solid var(--puck-color-grey-8);
792
+ .styles_Puck-leftSideBar {
793
+ background: var(--puck-color-grey-12);
794
+ border-right: 1px solid var(--puck-color-grey-09);
724
795
  display: flex;
725
796
  flex-direction: column;
726
797
  grid-area: left;
727
798
  overflow-y: auto;
728
799
  }
729
- ._Puck-frame_17hk3_167 {
730
- display: flex;
731
- flex-direction: column;
732
- grid-area: editor;
733
- overflow: auto;
734
- position: relative;
735
- }
736
- ._Puck-root_17hk3_175 {
737
- border: 1px solid var(--puck-color-grey-8);
738
- box-shadow: 0 0 0 calc(var(--puck-space-px) * 1.5) var(--puck-color-grey-10);
739
- margin: var(--puck-space-px);
740
- min-width: 321px;
741
- }
742
- @media (min-width: 1198px) {
743
- ._Puck-root_17hk3_175 {
744
- margin: calc(var(--puck-space-px) * 1.5);
745
- }
746
- }
747
- ._Puck-rightSideBar_17hk3_121 {
800
+ .styles_Puck-rightSideBar {
748
801
  background: var(--puck-color-white);
749
- border-left: 1px solid var(--puck-color-grey-8);
802
+ border-left: 1px solid var(--puck-color-grey-09);
750
803
  display: flex;
751
804
  flex-direction: column;
752
- font-family: var(--puck-font-stack);
753
805
  grid-area: right;
754
806
  overflow-y: auto;
755
807
  }
756
808
 
757
- /* 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);
809
+ /* components/InputOrGroup/styles.module.css */
810
+ .styles_Input {
811
+ color: var(--puck-color-grey-04);
760
812
  padding: 16px;
761
813
  padding-bottom: 12px;
762
814
  display: block;
763
- font-family: var(--puck-font-stack);
764
815
  }
765
- ._Input_1v7zr_1 ._Input_1v7zr_1 {
816
+ .styles_Input .styles_Input {
766
817
  padding: 0px;
767
818
  }
768
- ._Input_1v7zr_1 * {
819
+ .styles_Input * {
769
820
  box-sizing: border-box;
770
821
  }
771
- ._Input_1v7zr_1 + ._Input_1v7zr_1 {
772
- border-top: 1px solid var(--puck-color-grey-8);
822
+ .styles_Input + .styles_Input {
823
+ border-top: 1px solid var(--puck-color-grey-09);
773
824
  margin-top: 8px;
774
825
  }
775
- ._Input_1v7zr_1 ._Input_1v7zr_1 + ._Input_1v7zr_1 {
826
+ .styles_Input .styles_Input + .styles_Input {
776
827
  border-top: 0px;
777
828
  margin-top: 12px;
778
829
  }
779
- ._Input-label_1v7zr_27 {
830
+ .styles_Input-label {
780
831
  align-items: center;
781
832
  display: flex;
782
833
  padding-bottom: 12px;
783
834
  font-size: var(--puck-font-size-xxs);
784
835
  font-weight: 600;
785
836
  }
786
- ._Input-labelIcon_1v7zr_35 {
787
- color: var(--puck-color-grey-6);
837
+ .styles_Input-labelIcon {
838
+ color: var(--puck-color-grey-07);
839
+ display: flex;
788
840
  margin-right: 4px;
789
841
  padding-left: 4px;
790
842
  }
791
- ._Input-disabledIcon_1v7zr_41 {
792
- color: var(--puck-color-grey-4);
843
+ .styles_Input-disabledIcon {
844
+ color: var(--puck-color-grey-05);
793
845
  margin-left: auto;
794
846
  }
795
- ._Input-input_1v7zr_46 {
796
- background: white;
847
+ .styles_Input-input {
848
+ background: var(--puck-color-white);
797
849
  border-width: 1px;
798
850
  border-style: solid;
799
- border-color: var(--puck-color-grey-8);
851
+ border-color: var(--puck-color-grey-09);
800
852
  border-radius: 4px;
801
853
  font-family: inherit;
802
854
  font-size: 14px;
803
855
  padding: 12px 15px;
856
+ transition: border-color 50ms ease-in;
804
857
  width: 100%;
805
858
  }
806
- select._Input-input_1v7zr_46 {
859
+ select.styles_Input-input {
807
860
  appearance: none;
808
861
  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
862
  background-size: 12px;
810
863
  background-position: calc(100% - 12px) calc(50% + 3px);
811
864
  background-repeat: no-repeat;
812
- background-color: white;
865
+ background-color: var(--puck-color-white);
866
+ cursor: pointer;
813
867
  }
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;
868
+ @media (hover: hover) and (pointer: fine) {
869
+ .styles_Input:has(> input):hover .styles_Input-input:not([readonly]),
870
+ .styles_Input:has(> textarea):hover .styles_Input-input:not([readonly]) {
871
+ border-color: var(--puck-color-grey-05);
872
+ transition: none;
873
+ }
874
+ .styles_Input:has(> select):hover .styles_Input-input:not([disabled]) {
875
+ background-color: var(--puck-color-azure-12);
876
+ 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>");
877
+ border-color: var(--puck-color-grey-05);
878
+ transition: none;
879
+ }
820
880
  }
821
- ._Input-input_1v7zr_46:hover {
822
- border-color: var(--puck-color-neutral-3);
881
+ .styles_Input-input:focus {
882
+ border-color: var(--puck-color-grey-05);
883
+ outline: 2px solid var(--puck-color-azure-05);
884
+ transition: none;
823
885
  }
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;
886
+ .styles_Input--readOnly > .styles_Input-input,
887
+ .styles_Input--readOnly > select.styles_Input-input {
888
+ background-color: var(--puck-color-grey-11);
889
+ border-color: var(--puck-color-grey-09);
890
+ color: var(--puck-color-grey-04);
891
+ cursor: default;
892
+ opacity: 1;
893
+ outline: 0;
894
+ transition: none;
828
895
  }
829
- ._Input-radioGroupItems_1v7zr_87 {
896
+ .styles_Input-radioGroupItems {
830
897
  display: flex;
831
- border: 1px solid var(--puck-color-grey-7);
898
+ border: 1px solid var(--puck-color-grey-09);
832
899
  border-radius: 4px;
833
900
  flex-wrap: wrap;
834
- overflow: hidden;
835
901
  }
836
- ._Input-radio_1v7zr_87 {
837
- border-right: 1px solid var(--puck-color-grey-7);
902
+ .styles_Input-radio {
903
+ border-right: 1px solid var(--puck-color-grey-09);
838
904
  flex-grow: 1;
839
905
  }
840
- ._Input-radio_1v7zr_87:last-of-type {
841
- border-right: none;
906
+ .styles_Input-radio:first-of-type {
907
+ border-bottom-left-radius: 4px;
908
+ border-top-left-radius: 4px;
909
+ }
910
+ .styles_Input-radio:first-of-type .styles_Input-radioInner {
911
+ border-bottom-left-radius: 3px;
912
+ border-top-left-radius: 3px;
913
+ }
914
+ .styles_Input-radio:last-of-type {
915
+ border-bottom-right-radius: 4px;
916
+ border-right: 0;
917
+ border-top-right-radius: 4px;
918
+ }
919
+ .styles_Input-radio:last-of-type .styles_Input-radioInner {
920
+ border-bottom-right-radius: 3px;
921
+ border-top-right-radius: 3px;
842
922
  }
843
- ._Input-radioInner_1v7zr_104 {
844
- background-color: white;
845
- color: var(--puck-color-grey-4);
923
+ .styles_Input-radioInner {
924
+ background-color: var(--puck-color-white);
925
+ color: var(--puck-color-grey-04);
926
+ cursor: pointer;
846
927
  font-size: var(--puck-font-size-xxxs);
847
928
  padding: 8px 12px;
848
929
  text-align: center;
930
+ transition: background-color 50ms ease-in;
849
931
  }
850
- ._Input-radioInner_1v7zr_104:hover {
851
- background-color: var(--puck-color-azure-9);
852
- cursor: pointer;
932
+ .styles_Input-radio:has(:focus-visible) {
933
+ outline: 2px solid var(--puck-color-azure-05);
934
+ outline-offset: 2px;
935
+ position: relative;
853
936
  }
854
- ._Input--readOnly_1v7zr_69 ._Input-radioGroupItems_1v7zr_87 {
855
- border-color: var(--puck-color-grey-8);
937
+ @media (hover: hover) and (pointer: fine) {
938
+ .styles_Input-radioInner:hover {
939
+ background-color: var(--puck-color-azure-12);
940
+ transition: none;
941
+ }
856
942
  }
857
- ._Input--readOnly_1v7zr_69 ._Input-radioInner_1v7zr_104 {
858
- background-color: var(--puck-color-grey-11);
859
- color: var(--puck-color-grey-5);
943
+ .styles_Input--readOnly .styles_Input-radioInner {
944
+ background-color: var(--puck-color-white);
945
+ color: var(--puck-color-grey-04);
946
+ cursor: default;
860
947
  }
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);
948
+ .styles_Input-radio .styles_Input-radioInput:checked ~ .styles_Input-radioInner {
949
+ background-color: var(--puck-color-azure-11);
950
+ color: var(--puck-color-azure-04);
864
951
  font-weight: 500;
865
952
  }
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);
953
+ .styles_Input--readOnly .styles_Input-radioInput:checked ~ .styles_Input-radioInner {
954
+ background-color: var(--puck-color-grey-11);
955
+ color: var(--puck-color-grey-04);
869
956
  }
870
- ._Input-radio_1v7zr_87 ._Input-radioInput_1v7zr_126 {
871
- display: none;
957
+ .styles_Input-radio .styles_Input-radioInput {
958
+ clip: rect(0 0 0 0);
959
+ clip-path: inset(100%);
960
+ height: 1px;
961
+ overflow: hidden;
962
+ position: absolute;
963
+ white-space: nowrap;
964
+ width: 1px;
872
965
  }
873
- textarea._Input-input_1v7zr_46 {
966
+ textarea.styles_Input-input {
874
967
  margin-bottom: -4px;
875
968
  }
876
969
 
877
- /* css-module:/home/runner/work/puck/puck/packages/core/components/InputOrGroup/fields/ArrayField/styles.module.css/#css-module-data */
878
- ._ArrayField_1auyc_5 {
970
+ /* components/InputOrGroup/fields/ArrayField/styles.module.css */
971
+ .styles_ArrayField {
879
972
  display: flex;
880
973
  flex-direction: column;
881
- background-color: var(--puck-color-grey-8);
882
- border: 1px solid var(--puck-color-grey-8);
974
+ background-color: var(--puck-color-grey-09);
975
+ border: 1px solid var(--puck-color-grey-09);
883
976
  border-radius: 4px;
884
977
  }
885
- ._ArrayField--isDraggingFrom_1auyc_13 {
886
- background-color: var(--puck-color-azure-9);
978
+ .styles_ArrayField--isDraggingFrom {
979
+ background-color: var(--puck-color-azure-11);
980
+ overflow: hidden;
887
981
  }
888
- ._ArrayField-addButton_1auyc_17 {
889
- background-color: white;
982
+ .styles_ArrayField-addButton {
983
+ background-color: var(--puck-color-white);
890
984
  border: none;
891
- border-radius: 4px;
985
+ border-radius: 3px;
892
986
  display: flex;
893
- color: var(--puck-color-azure-4);
987
+ color: var(--puck-color-azure-05);
894
988
  justify-content: center;
895
989
  cursor: pointer;
896
990
  width: 100%;
897
991
  margin: 0;
898
- padding: 16px;
992
+ padding: 14px;
899
993
  text-align: left;
994
+ transition: background-color 50ms ease-in;
900
995
  }
901
- ._ArrayField--hasItems_1auyc_31 > ._ArrayField-addButton_1auyc_17 {
996
+ .styles_ArrayField--hasItems > .styles_ArrayField-addButton {
997
+ border-top: 1px solid var(--puck-color-grey-09);
902
998
  border-top-left-radius: 0;
903
999
  border-top-right-radius: 0;
904
1000
  }
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);
1001
+ .styles_ArrayField-addButton:focus-visible {
1002
+ outline: 2px solid var(--puck-color-azure-05);
1003
+ outline-offset: 2px;
1004
+ position: relative;
908
1005
  }
909
- ._ArrayFieldItem_1auyc_45 {
910
- background: white;
911
- border-top-left-radius: 4px;
912
- border-top-right-radius: 4px;
1006
+ @media (hover: hover) and (pointer: fine) {
1007
+ .styles_ArrayField:not(.styles_ArrayField--isDraggingFrom) > .styles_ArrayField-addButton:hover {
1008
+ background: var(--puck-color-azure-12);
1009
+ color: var(--puck-color-azure-04);
1010
+ transition: none;
1011
+ }
1012
+ }
1013
+ .styles_ArrayField:not(.styles_ArrayField--isDraggingFrom) > .styles_ArrayField-addButton:active {
1014
+ background: var(--puck-color-azure-11);
1015
+ color: var(--puck-color-azure-04);
1016
+ transition: none;
1017
+ }
1018
+ .styles_ArrayFieldItem {
1019
+ border-top-left-radius: 3px;
1020
+ border-top-right-radius: 3px;
913
1021
  display: block;
914
- margin-bottom: 1px;
1022
+ position: relative;
915
1023
  }
916
- ._ArrayField--isDraggingFrom_1auyc_13 > ._ArrayFieldItem_1auyc_45:not(._ArrayFieldItem--isDragging_1auyc_53) {
917
- border-bottom: 1px solid var(--puck-color-grey-8);
918
- margin-bottom: 0;
1024
+ .styles_ArrayFieldItem:not(.styles_ArrayFieldItem--isDragging):not(:first-of-type)::before {
1025
+ background-color: var(--puck-color-grey-09);
1026
+ position: absolute;
1027
+ width: 100%;
1028
+ height: 1px;
1029
+ content: "";
1030
+ z-index: 1;
1031
+ top: -1px;
919
1032
  }
920
- ._ArrayFieldItem--isExpanded_1auyc_58 {
1033
+ .styles_ArrayFieldItem--isExpanded::before {
1034
+ display: none;
1035
+ }
1036
+ .styles_ArrayFieldItem--isExpanded {
921
1037
  border-bottom: 0;
922
1038
  outline-offset: 0px !important;
923
- outline: 1px solid var(--puck-color-azure-6) !important;
1039
+ outline: 1px solid var(--puck-color-azure-07) !important;
1040
+ z-index: 2;
924
1041
  }
925
- ._ArrayFieldItem--isDragging_1auyc_53 {
926
- box-shadow: rgba(140, 152, 164, 0.25) 0 3px 6px 0;
1042
+ .styles_ArrayFieldItem--isDragging {
1043
+ box-shadow: color-mix(in srgb, var(--puck-color-grey-06) 25%, transparent) 0 3px 6px 0;
927
1044
  }
928
- ._ArrayFieldItem_1auyc_45 + ._ArrayFieldItem_1auyc_45 {
1045
+ .styles_ArrayFieldItem--isDragging .styles_ArrayFieldItem-summary:active {
1046
+ background-color: var(--puck-color-white);
1047
+ }
1048
+ .styles_ArrayFieldItem + .styles_ArrayFieldItem {
929
1049
  border-top-left-radius: 0;
930
1050
  border-top-right-radius: 0;
931
1051
  }
932
- ._ArrayFieldItem-summary_1auyc_73 {
933
- color: var(--puck-color-grey-3);
1052
+ .styles_ArrayFieldItem-summary {
1053
+ background: var(--puck-color-white);
1054
+ color: var(--puck-color-grey-04);
1055
+ cursor: pointer;
934
1056
  display: flex;
935
1057
  align-items: center;
936
1058
  gap: 2px;
@@ -938,181 +1060,244 @@ textarea._Input-input_1v7zr_46 {
938
1060
  font-size: var(--puck-font-size-xxs);
939
1061
  list-style: none;
940
1062
  padding: 12px 15px;
1063
+ padding-bottom: 13px;
941
1064
  position: relative;
942
1065
  overflow: hidden;
1066
+ transition: background-color 50ms ease-in;
943
1067
  }
944
- ._ArrayFieldItem--readOnly_1auyc_86 > ._ArrayFieldItem-summary_1auyc_73 {
945
- background-color: var(--puck-color-grey-11);
946
- color: var(--puck-color-grey-5);
1068
+ .styles_ArrayFieldItem:first-of-type > .styles_ArrayFieldItem-summary {
1069
+ border-top-left-radius: 3px;
1070
+ border-top-right-radius: 3px;
947
1071
  }
948
- ._ArrayFieldItem--isExpanded_1auyc_58 > ._ArrayFieldItem-summary_1auyc_73 {
949
- font-weight: 600;
1072
+ .styles_ArrayField--addDisabled > .styles_ArrayFieldItem:last-of-type:not(.styles_ArrayFieldItem--isExpanded) > .styles_ArrayFieldItem-summary {
1073
+ border-bottom-left-radius: 3px;
1074
+ border-bottom-right-radius: 3px;
950
1075
  }
951
- ._ArrayFieldItem_1auyc_45:first-of-type > ._ArrayFieldItem-summary_1auyc_73 {
952
- border-top-left-radius: 4px;
953
- border-top-right-radius: 4px;
1076
+ .styles_ArrayField--addDisabled > .styles_ArrayFieldItem--isExpanded:last-of-type {
1077
+ border-bottom-left-radius: 3px;
1078
+ border-bottom-right-radius: 3px;
954
1079
  }
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);
1080
+ .styles_ArrayFieldItem-summary:focus-visible {
1081
+ outline: 2px solid var(--puck-color-azure-05);
1082
+ outline-offset: 2px;
1083
+ }
1084
+ @media (hover: hover) and (pointer: fine) {
1085
+ .styles_ArrayFieldItem-summary:hover {
1086
+ background-color: var(--puck-color-azure-12);
1087
+ transition: none;
1088
+ }
1089
+ }
1090
+ .styles_ArrayFieldItem-summary:active {
1091
+ background-color: var(--puck-color-azure-11);
1092
+ transition: none;
960
1093
  }
961
- ._ArrayFieldItem-body_1auyc_107 {
1094
+ .styles_ArrayFieldItem--isExpanded > .styles_ArrayFieldItem-summary {
1095
+ background: var(--puck-color-azure-11);
1096
+ color: var(--puck-color-azure-04);
1097
+ font-weight: 600;
1098
+ transition: none;
1099
+ }
1100
+ .styles_ArrayFieldItem-body {
1101
+ background: var(--puck-color-white);
962
1102
  display: none;
963
1103
  }
964
- ._ArrayFieldItem--isExpanded_1auyc_58 > ._ArrayFieldItem-body_1auyc_107 {
1104
+ .styles_ArrayFieldItem--isExpanded > .styles_ArrayFieldItem-body {
965
1105
  display: block;
966
1106
  }
967
- ._ArrayFieldItem-fieldset_1auyc_115 {
1107
+ .styles_ArrayFieldItem-fieldset {
968
1108
  border: none;
969
- border-top: 1px solid var(--puck-color-grey-8);
1109
+ border-top: 1px solid var(--puck-color-grey-09);
970
1110
  margin: 0;
971
1111
  padding: 16px 15px;
972
1112
  }
973
- ._ArrayFieldItem-rhs_1auyc_122 {
1113
+ .styles_ArrayFieldItem-rhs {
974
1114
  display: flex;
975
1115
  gap: 4px;
976
1116
  align-items: center;
977
1117
  }
978
- ._ArrayFieldItem-actions_1auyc_128 {
979
- color: var(--puck-color-grey-3);
1118
+ .styles_ArrayFieldItem-actions {
1119
+ color: var(--puck-color-grey-04);
980
1120
  display: flex;
981
1121
  gap: 4px;
982
1122
  opacity: 0;
983
1123
  }
984
- ._ArrayFieldItem-summary_1auyc_73:hover > ._ArrayFieldItem-rhs_1auyc_122 > ._ArrayFieldItem-actions_1auyc_128 {
1124
+ .styles_ArrayFieldItem-summary:focus-within > .styles_ArrayFieldItem-rhs > .styles_ArrayFieldItem-actions,
1125
+ .styles_ArrayFieldItem-summary:hover > .styles_ArrayFieldItem-rhs > .styles_ArrayFieldItem-actions {
985
1126
  opacity: 1;
986
1127
  }
987
- ._ArrayFieldItem-action_1auyc_128:hover {
988
- background: var(--puck-color-grey-9);
989
- border-radius: 4px;
990
- cursor: pointer;
991
- }
992
1128
 
993
- /* 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 {
1129
+ /* components/ExternalInput/styles.module.css */
1130
+ .styles_ExternalInput-actions {
998
1131
  display: flex;
999
1132
  }
1000
- ._ExternalInput-button_s6fxy_9 {
1133
+ .styles_ExternalInput-button {
1001
1134
  display: flex;
1002
1135
  gap: 8px;
1003
1136
  align-items: center;
1004
1137
  justify-content: center;
1005
- background-color: white;
1006
- border: 1px solid var(--puck-color-grey-8);
1138
+ background-color: var(--puck-color-white);
1139
+ border: 1px solid var(--puck-color-grey-09);
1007
1140
  border-radius: 4px;
1008
- color: var(--puck-color-azure-4);
1141
+ color: var(--puck-color-azure-04);
1142
+ cursor: pointer;
1009
1143
  padding: 12px 16px;
1010
1144
  font-weight: 500;
1011
1145
  white-space: nowrap;
1012
1146
  text-overflow: ellipsis;
1147
+ transition: background-color 50ms ease-in;
1013
1148
  position: relative;
1014
1149
  overflow: hidden;
1015
1150
  flex-grow: 1;
1016
1151
  }
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);
1152
+ .styles_ExternalInput--dataSelected .styles_ExternalInput-button {
1153
+ color: var(--puck-color-grey-03);
1026
1154
  display: block;
1027
1155
  border-top-right-radius: 0px;
1028
1156
  border-bottom-right-radius: 0px;
1029
1157
  }
1030
- ._ExternalInput-detachButton_s6fxy_28 {
1031
- border: 1px solid var(--puck-color-grey-8);
1158
+ .styles_ExternalInput-detachButton {
1159
+ border: 1px solid var(--puck-color-grey-09);
1032
1160
  border-top-right-radius: 4px;
1033
1161
  border-bottom-right-radius: 4px;
1034
- background-color: var(--puck-color-grey-11);
1035
- color: var(--puck-color-grey-4);
1162
+ background-color: var(--puck-color-grey-12);
1163
+ color: var(--puck-color-grey-05);
1164
+ cursor: pointer;
1036
1165
  display: flex;
1037
1166
  gap: 8px;
1038
1167
  align-items: center;
1039
1168
  justify-content: center;
1040
1169
  padding: 8px 12px;
1170
+ position: relative;
1171
+ transition: background-color 50ms ease-in, color 50ms ease-in;
1041
1172
  margin-left: -1px;
1042
1173
  }
1043
- ._ExternalInputModal_s6fxy_56 {
1044
- color: black;
1174
+ .styles_ExternalInput-button:focus-visible,
1175
+ .styles_ExternalInput-detachButton:focus-visible {
1176
+ outline: 2px solid var(--puck-color-azure-05);
1177
+ outline-offset: 2px;
1178
+ z-index: 1;
1179
+ }
1180
+ @media (hover: hover) and (pointer: fine) {
1181
+ .styles_ExternalInput-button:hover,
1182
+ .styles_ExternalInput-detachButton:hover {
1183
+ background: var(--puck-color-azure-12);
1184
+ transition: none;
1185
+ }
1186
+ .styles_ExternalInput-detachButton:hover {
1187
+ color: var(--puck-color-azure-04);
1188
+ }
1189
+ }
1190
+ .styles_ExternalInput-button:active,
1191
+ .styles_ExternalInput-detachButton:active {
1192
+ background: var(--puck-color-azure-11);
1193
+ transition: none;
1194
+ }
1195
+ .styles_ExternalInputModal {
1196
+ color: var(--puck-color-black);
1197
+ display: grid;
1198
+ grid-template-rows: min-content minmax(128px, 100%) min-content;
1199
+ grid-template-columns: 100%;
1200
+ position: relative;
1201
+ min-height: 50dvh;
1202
+ max-height: 90dvh;
1203
+ }
1204
+ .styles_ExternalInputModal-grid {
1045
1205
  display: flex;
1046
1206
  flex-direction: column;
1047
- position: relative;
1048
- max-height: 90vh;
1049
1207
  }
1050
- ._ExternalInputModal-masthead_s6fxy_64 {
1051
- background-color: white;
1208
+ @media (min-width: 458px) {
1209
+ .styles_ExternalInputModal-grid {
1210
+ display: grid;
1211
+ grid-template-columns: 100%;
1212
+ }
1213
+ .styles_ExternalInputModal--filtersToggled .styles_ExternalInputModal-grid {
1214
+ grid-template-columns: 25% 75%;
1215
+ }
1216
+ }
1217
+ .styles_ExternalInputModal-filters {
1218
+ border-bottom: 1px solid var(--puck-color-grey-09);
1219
+ }
1220
+ .styles_ExternalInputModal--filtersToggled .styles_ExternalInputModal-filters {
1221
+ display: none;
1222
+ }
1223
+ @media (min-width: 458px) {
1224
+ .styles_ExternalInputModal-filters {
1225
+ border-right: 1px solid var(--puck-color-grey-09);
1226
+ display: none;
1227
+ }
1228
+ .styles_ExternalInputModal--filtersToggled .styles_ExternalInputModal-filters {
1229
+ display: block;
1230
+ }
1231
+ }
1232
+ .styles_ExternalInputModal-masthead {
1233
+ background-color: var(--puck-color-grey-12);
1234
+ border-bottom: 1px solid var(--puck-color-grey-09);
1052
1235
  display: flex;
1053
1236
  flex-wrap: wrap;
1054
1237
  gap: 24px;
1055
- padding: 32px 24px;
1238
+ padding: 24px;
1056
1239
  }
1057
- ._ExternalInputModal-tableWrapper_s6fxy_72 {
1240
+ .styles_ExternalInputModal-tableWrapper {
1058
1241
  position: relative;
1059
1242
  overflow-x: auto;
1060
1243
  overflow-y: auto;
1061
1244
  flex-grow: 1;
1062
1245
  }
1063
- ._ExternalInputModal-table_s6fxy_72 {
1246
+ .styles_ExternalInputModal-table {
1064
1247
  border-collapse: unset;
1065
1248
  border-spacing: 0px;
1066
- color: var(--puck-color-neutral-4);
1249
+ color: var(--puck-color-grey-02);
1067
1250
  position: relative;
1068
1251
  z-index: 0;
1069
1252
  min-width: 100%;
1070
1253
  }
1071
- ._ExternalInputModal-thead_s6fxy_88 {
1254
+ .styles_ExternalInputModal-thead {
1255
+ background-color: var(--puck-color-white);
1072
1256
  position: sticky;
1073
1257
  top: 0;
1074
1258
  z-index: 1;
1075
1259
  }
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;
1260
+ .styles_ExternalInputModal-th {
1261
+ border-bottom: 1px solid var(--puck-color-grey-09);
1262
+ color: var(--puck-color-grey-04);
1263
+ font-weight: 500;
1264
+ font-size: 14px;
1080
1265
  padding: 16px 24px;
1081
- opacity: 0.9;
1082
1266
  }
1083
- ._ExternalInputModal-td_s6fxy_102 {
1084
- font-family: var(--puck-font-stack);
1267
+ .styles_ExternalInputModal-td {
1268
+ border-bottom: 1px solid var(--puck-color-grey-10);
1085
1269
  padding: 16px 24px;
1086
1270
  }
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 {
1271
+ .styles_ExternalInputModal-tr .styles_ExternalInputModal-td:first-of-type {
1094
1272
  font-weight: 500;
1273
+ width: 1%;
1274
+ white-space: nowrap;
1095
1275
  }
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;
1276
+ @media (hover: hover) and (pointer: fine) {
1277
+ .styles_ExternalInputModal-tbody .styles_ExternalInputModal-tr:hover {
1278
+ background: var(--puck-color-azure-12);
1279
+ color: var(--puck-color-azure-04);
1280
+ cursor: pointer;
1281
+ position: relative;
1282
+ margin-left: -5px;
1283
+ }
1284
+ .styles_ExternalInputModal-tbody .styles_ExternalInputModal-tr:hover .styles_ExternalInputModal-td:first-of-type {
1285
+ border-left: 4px solid var(--puck-color-azure-04);
1286
+ padding-left: 20px;
1287
+ }
1102
1288
  }
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;
1289
+ .styles_ExternalInputModal-tbody .styles_ExternalInputModal-tr:last-of-type .styles_ExternalInputModal-td {
1290
+ border-bottom: none;
1106
1291
  }
1107
- ._ExternalInputModal-tableWrapper_s6fxy_72 {
1292
+ .styles_ExternalInputModal-tableWrapper {
1108
1293
  display: none;
1109
1294
  }
1110
- ._ExternalInputModal--hasData_s6fxy_138 ._ExternalInputModal-tableWrapper_s6fxy_72 {
1295
+ .styles_ExternalInputModal--hasData .styles_ExternalInputModal-tableWrapper {
1111
1296
  display: block;
1112
1297
  }
1113
- ._ExternalInputModal-loadingBanner_s6fxy_142 {
1298
+ .styles_ExternalInputModal-loadingBanner {
1114
1299
  display: none;
1115
- background-color: #ffffff90;
1300
+ background-color: color-mix(in srgb, var(--puck-color-white) 90%, transparent);
1116
1301
  padding: 64px;
1117
1302
  align-items: center;
1118
1303
  justify-content: center;
@@ -1122,50 +1307,64 @@ textarea._Input-input_1v7zr_46 {
1122
1307
  right: 0;
1123
1308
  bottom: 0;
1124
1309
  }
1125
- ._ExternalInputModal--isLoading_s6fxy_155 ._ExternalInputModal-loadingBanner_s6fxy_142 {
1310
+ .styles_ExternalInputModal--isLoading .styles_ExternalInputModal-loadingBanner {
1126
1311
  display: flex;
1127
1312
  }
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 {
1313
+ .styles_ExternalInputModal-searchForm {
1138
1314
  display: flex;
1139
- margin-left: auto;
1140
- height: 43px;
1315
+ flex-wrap: wrap;
1141
1316
  gap: 12px;
1317
+ flex-grow: 1;
1318
+ }
1319
+ @media (min-width: 458px) {
1320
+ .styles_ExternalInputModal-searchForm {
1321
+ flex-wrap: nowrap;
1322
+ }
1142
1323
  }
1143
- ._ExternalInputModal-search_s6fxy_171 {
1324
+ .styles_ExternalInputModal-search {
1144
1325
  display: flex;
1145
- background: white;
1326
+ background: var(--puck-color-white);
1146
1327
  border-width: 1px;
1147
1328
  border-style: solid;
1148
- border-color: var(--puck-color-grey-8);
1329
+ border-color: var(--puck-color-grey-09);
1149
1330
  border-radius: 4px;
1150
- width: 100%;
1331
+ flex-grow: 1;
1332
+ transition: border-color 50ms ease-in;
1333
+ }
1334
+ .styles_ExternalInputModal-search:focus-within {
1335
+ border-color: var(--puck-color-grey-05);
1336
+ outline: 2px solid var(--puck-color-azure-05);
1337
+ transition: none;
1151
1338
  }
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;
1339
+ @media (hover: hover) and (pointer: fine) {
1340
+ .styles_ExternalInputModal-search:hover {
1341
+ border-color: var(--puck-color-grey-05);
1342
+ transition: none;
1343
+ }
1156
1344
  }
1157
- ._ExternalInputModal-searchIcon_s6fxy_194 {
1345
+ .styles_ExternalInputModal-searchIcon {
1158
1346
  align-items: center;
1159
- background: var(--puck-color-grey-11);
1347
+ background: var(--puck-color-grey-12);
1160
1348
  border-bottom-left-radius: 4px;
1161
1349
  border-top-left-radius: 4px;
1162
- border-right: 1px solid var(--puck-color-grey-8);
1163
- color: var(--puck-color-grey-6);
1350
+ border-right: 1px solid var(--puck-color-grey-09);
1351
+ color: var(--puck-color-grey-07);
1164
1352
  display: flex;
1165
1353
  justify-content: center;
1166
1354
  padding: 12px 15px;
1355
+ transition: color 50ms ease-in;
1356
+ }
1357
+ .styles_ExternalInputModal-search:focus-within .styles_ExternalInputModal-searchIcon {
1358
+ color: var(--puck-color-grey-04);
1359
+ transition: none;
1360
+ }
1361
+ @media (hover: hover) and (pointer: fine) {
1362
+ .styles_ExternalInputModal-search:hover .styles_ExternalInputModal-searchIcon {
1363
+ color: var(--puck-color-grey-04);
1364
+ transition: none;
1365
+ }
1167
1366
  }
1168
- ._ExternalInputModal-searchIconText_s6fxy_206 {
1367
+ .styles_ExternalInputModal-searchIconText {
1169
1368
  clip: rect(0 0 0 0);
1170
1369
  clip-path: inset(100%);
1171
1370
  height: 1px;
@@ -1174,24 +1373,45 @@ textarea._Input-input_1v7zr_46 {
1174
1373
  white-space: nowrap;
1175
1374
  width: 1px;
1176
1375
  }
1177
- ._ExternalInputModal-searchInput_s6fxy_216 {
1376
+ .styles_ExternalInputModal-searchInput {
1178
1377
  border: none;
1179
1378
  border-radius: 4px;
1180
- background: white;
1379
+ background: var(--puck-color-white);
1181
1380
  font-family: inherit;
1182
1381
  font-size: 14px;
1183
1382
  padding: 12px 15px;
1184
1383
  width: 100%;
1185
1384
  }
1186
- ._ExternalInputModal-searchInput_s6fxy_216:focus {
1187
- border: none;
1188
- outline: none;
1189
- box-shadow: none;
1385
+ .styles_ExternalInputModal-searchInput:focus {
1386
+ outline: 0;
1387
+ }
1388
+ .styles_ExternalInputModal-searchActions {
1389
+ display: flex;
1390
+ gap: 8px;
1391
+ height: 44px;
1392
+ width: 100%;
1393
+ }
1394
+ @media (min-width: 458px) {
1395
+ .styles_ExternalInputModal-searchActions {
1396
+ width: auto;
1397
+ }
1398
+ }
1399
+ .styles_ExternalInputModal-searchActionIcon {
1400
+ align-self: center;
1401
+ }
1402
+ .styles_ExternalInputModal-footer {
1403
+ background-color: var(--puck-color-grey-12);
1404
+ border-top: 1px solid var(--puck-color-grey-09);
1405
+ color: var(--puck-color-grey-04);
1406
+ font-weight: 500;
1407
+ font-size: 14px;
1408
+ padding: 16px;
1409
+ text-align: right;
1190
1410
  }
1191
1411
 
1192
- /* css-module:/home/runner/work/puck/puck/packages/core/components/Modal/styles.module.css/#css-module-data */
1193
- ._Modal_hx2u6_1 {
1194
- background: #00000099;
1412
+ /* components/Modal/styles.module.css */
1413
+ .styles_Modal {
1414
+ background: color-mix(in srgb, var(--puck-color-black) 75%, transparent);
1195
1415
  display: none;
1196
1416
  justify-content: center;
1197
1417
  align-items: center;
@@ -1201,42 +1421,43 @@ textarea._Input-input_1v7zr_46 {
1201
1421
  bottom: 0;
1202
1422
  right: 0;
1203
1423
  z-index: 1;
1204
- padding: 64px;
1424
+ padding: 32px;
1205
1425
  }
1206
- ._Modal--isOpen_hx2u6_15 {
1426
+ .styles_Modal--isOpen {
1207
1427
  display: flex;
1208
1428
  }
1209
- ._Modal-inner_hx2u6_19 {
1429
+ .styles_Modal-inner {
1210
1430
  width: 100%;
1211
1431
  max-width: 1024px;
1212
- border-radius: 16px;
1432
+ border-radius: 8px;
1213
1433
  overflow: hidden;
1214
- background: white;
1434
+ background: var(--puck-color-white);
1215
1435
  display: flex;
1216
1436
  flex-direction: column;
1217
- max-height: 90vh;
1437
+ max-height: 90dvh;
1218
1438
  }
1219
1439
 
1220
- /* css-module:/home/runner/work/puck/puck/packages/core/components/InputOrGroup/fields/ObjectField/styles.module.css/#css-module-data */
1221
- ._ObjectField_56z4t_5 {
1440
+ /* components/InputOrGroup/fields/ObjectField/styles.module.css */
1441
+ .styles_ObjectField {
1222
1442
  display: flex;
1223
1443
  flex-direction: column;
1224
- background-color: white;
1225
- border: 1px solid var(--puck-color-grey-8);
1444
+ background-color: var(--puck-color-white);
1445
+ border: 1px solid var(--puck-color-grey-09);
1226
1446
  border-radius: 4px;
1227
1447
  }
1228
- ._ObjectField-fieldset_56z4t_13 {
1448
+ .styles_ObjectField-fieldset {
1229
1449
  border: none;
1230
1450
  margin: 0;
1231
1451
  padding: 16px 15px;
1232
1452
  }
1233
1453
 
1234
- /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Fields/styles.module.css/#css-module-data */
1235
- ._PuckFields_1276r_1 {
1454
+ /* components/Puck/components/Fields/styles.module.css */
1455
+ .styles_PuckFields {
1236
1456
  position: relative;
1457
+ font-family: var(--puck-font-family);
1237
1458
  }
1238
- ._PuckFields-loadingOverlay_1276r_5 {
1239
- background: white;
1459
+ .styles_PuckFields-loadingOverlay {
1460
+ background: var(--puck-color-white);
1240
1461
  display: flex;
1241
1462
  justify-content: center;
1242
1463
  align-items: center;
@@ -1250,129 +1471,251 @@ textarea._Input-input_1v7zr_46 {
1250
1471
  opacity: 0.8;
1251
1472
  }
1252
1473
 
1253
- /* 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);
1474
+ /* components/ComponentList/styles.module.css */
1475
+ .styles_ComponentList {
1256
1476
  max-width: 100%;
1257
1477
  }
1258
- ._ComponentList--isExpanded_1di93_6 + ._ComponentList_1di93_1 {
1478
+ .styles_ComponentList--isExpanded + .styles_ComponentList {
1259
1479
  margin-top: 12px;
1260
1480
  }
1261
- ._ComponentList-content_1di93_10 {
1481
+ .styles_ComponentList-content {
1262
1482
  display: none;
1263
1483
  }
1264
- ._ComponentList--isExpanded_1di93_6 > ._ComponentList-content_1di93_10 {
1484
+ .styles_ComponentList--isExpanded > .styles_ComponentList-content {
1265
1485
  display: block;
1266
1486
  }
1267
- ._ComponentList-title_1di93_18 {
1268
- color: var(--puck-color-grey-4);
1487
+ .styles_ComponentList-title {
1488
+ background-color: transparent;
1489
+ border: 0;
1490
+ color: var(--puck-color-grey-05);
1491
+ cursor: pointer;
1269
1492
  display: flex;
1493
+ font: inherit;
1270
1494
  font-size: var(--puck-font-size-xxxs);
1271
1495
  list-style: none;
1496
+ margin-bottom: 6px;
1272
1497
  padding: 8px;
1273
1498
  text-transform: uppercase;
1499
+ transition: background-color 50ms ease-in, color 50ms ease-in;
1274
1500
  gap: 4px;
1275
1501
  border-radius: 4px;
1502
+ width: 100%;
1276
1503
  }
1277
- ._ComponentList--isExpanded_1di93_6 ._ComponentList-title_1di93_18 {
1278
- margin-bottom: 4px;
1504
+ .styles_ComponentList-title:focus-visible {
1505
+ outline: 2px solid var(--puck-color-azure-05);
1506
+ outline-offset: 2px;
1279
1507
  }
1280
- ._ComponentList-title_1di93_18:hover {
1281
- background-color: var(--puck-color-azure-9);
1282
- color: var(--puck-color-azure-4);
1283
- cursor: pointer;
1508
+ @media (hover: hover) and (pointer: fine) {
1509
+ .styles_ComponentList-title:hover {
1510
+ background-color: var(--puck-color-azure-11);
1511
+ color: var(--puck-color-azure-04);
1512
+ transition: none;
1513
+ }
1514
+ }
1515
+ .styles_ComponentList-title:active {
1516
+ background-color: var(--puck-color-azure-10);
1517
+ transition: none;
1284
1518
  }
1285
- ._ComponentList-titleIcon_1di93_39 {
1519
+ .styles_ComponentList-titleIcon {
1286
1520
  margin-left: auto;
1287
1521
  }
1288
1522
 
1289
- /* 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);
1523
+ /* components/Puck/components/Preview/styles.module.css */
1524
+ .styles_PuckPreview {
1525
+ height: 100%;
1526
+ }
1527
+ .styles_PuckPreview-frame {
1528
+ border: none;
1529
+ height: 100%;
1530
+ width: 100%;
1531
+ }
1532
+
1533
+ /* components/LayerTree/styles.module.css */
1534
+ .styles_LayerTree {
1535
+ color: var(--puck-color-grey-03);
1536
+ font-family: var(--puck-font-family);
1293
1537
  font-size: var(--puck-font-size-xxs);
1294
1538
  margin: 0;
1295
1539
  position: relative;
1296
1540
  list-style: none;
1297
1541
  padding: 0;
1298
1542
  }
1299
- ._LayerTree-zoneTitle_o89yt_11 {
1300
- color: var(--puck-color-grey-4);
1543
+ .styles_LayerTree-zoneTitle {
1544
+ color: var(--puck-color-grey-05);
1301
1545
  font-size: var(--puck-font-size-xxxs);
1302
1546
  text-transform: uppercase;
1303
1547
  }
1304
- ._LayerTree-helper_o89yt_17 {
1548
+ .styles_LayerTree-helper {
1305
1549
  text-align: center;
1306
- color: var(--puck-color-grey-6);
1307
- font-family: var(--puck-font-stack);
1550
+ color: var(--puck-color-grey-07);
1308
1551
  margin: 8px 4px;
1309
1552
  }
1310
- ._Layer_o89yt_1 {
1553
+ .styles_Layer {
1311
1554
  position: relative;
1312
1555
  border: 1px solid transparent;
1556
+ border-radius: 4px;
1313
1557
  }
1314
- ._Layer-inner_o89yt_29 {
1315
- padding-left: 12px;
1316
- padding-right: 4px;
1558
+ .styles_Layer-inner {
1559
+ border: 1px solid transparent;
1317
1560
  border-radius: 4px;
1561
+ transition: color 50ms ease-in;
1318
1562
  }
1319
- ._Layer--containsZone_o89yt_35 > ._Layer-inner_o89yt_29 {
1563
+ .styles_Layer--containsZone > .styles_Layer-inner {
1320
1564
  padding-left: 0;
1321
1565
  }
1322
- ._Layer-clickable_o89yt_39 {
1566
+ .styles_Layer-clickable {
1323
1567
  align-items: center;
1568
+ background: none;
1569
+ border: 0;
1570
+ border-radius: 4px;
1571
+ color: inherit;
1572
+ cursor: pointer;
1324
1573
  display: flex;
1574
+ font: inherit;
1575
+ padding-left: 12px;
1576
+ padding-right: 4px;
1577
+ width: 100%;
1325
1578
  }
1326
- ._Layer-inner_o89yt_29:hover {
1327
- cursor: pointer;
1579
+ .styles_Layer-clickable:focus-visible {
1580
+ outline: 2px solid var(--puck-color-azure-05);
1581
+ outline-offset: 2px;
1582
+ position: relative;
1583
+ z-index: 1;
1328
1584
  }
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);
1585
+ @media (hover: hover) and (pointer: fine) {
1586
+ .styles_Layer:not(.styles_Layer--isSelected) > .styles_Layer-inner:hover {
1587
+ border-color: var(--puck-color-azure-10);
1588
+ background: var(--puck-color-azure-11);
1589
+ color: var(--puck-color-azure-04);
1590
+ transition: none;
1591
+ }
1333
1592
  }
1334
- ._Layer--isSelected_o89yt_48 {
1335
- background: var(--puck-color-azure-9);
1336
- border-color: var(--puck-color-azure-7);
1337
- border-radius: 4px;
1593
+ .styles_Layer--isSelected {
1594
+ border-color: var(--puck-color-azure-08);
1338
1595
  }
1339
- ._Layer--isSelected_o89yt_48 > ._Layer-inner_o89yt_29 {
1340
- background: var(--puck-color-azure-85);
1341
- font-weight: 600;
1596
+ .styles_Layer--isSelected > .styles_Layer-inner {
1597
+ background: var(--puck-color-azure-10);
1342
1598
  }
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 {
1599
+ .styles_Layer--isSelected > .styles_Layer-inner > .styles_Layer-clickable > .styles_Layer-chevron,
1600
+ .styles_Layer--childIsSelected > .styles_Layer-inner > .styles_Layer-clickable > .styles_Layer-chevron {
1345
1601
  transform: scaleY(-1);
1346
1602
  }
1347
- ._Layer-zones_o89yt_70 {
1603
+ .styles_Layer-zones {
1348
1604
  display: none;
1349
1605
  margin-left: 12px;
1350
1606
  }
1351
- ._Layer--isSelected_o89yt_48 > ._Layer-zones_o89yt_70,
1352
- ._Layer--childIsSelected_o89yt_66 > ._Layer-zones_o89yt_70 {
1607
+ .styles_Layer--isSelected > .styles_Layer-zones,
1608
+ .styles_Layer--childIsSelected > .styles_Layer-zones {
1353
1609
  display: block;
1354
1610
  }
1355
- ._Layer-zones_o89yt_70 > ._LayerTree_o89yt_1 {
1611
+ .styles_Layer-zones > .styles_LayerTree {
1356
1612
  margin-left: 12px;
1357
1613
  }
1358
- ._Layer-title_o89yt_84,
1359
- ._LayerTree-zoneTitle_o89yt_11 {
1614
+ .styles_Layer-title,
1615
+ .styles_LayerTree-zoneTitle {
1360
1616
  display: flex;
1361
1617
  gap: 8px;
1362
1618
  align-items: center;
1363
1619
  margin: 8px 4px;
1364
1620
  overflow-x: hidden;
1365
1621
  }
1366
- ._Layer-name_o89yt_93 {
1622
+ .styles_Layer-name {
1367
1623
  overflow-x: hidden;
1368
1624
  text-overflow: ellipsis;
1369
1625
  white-space: nowrap;
1370
1626
  }
1371
- ._Layer-icon_o89yt_99 {
1372
- color: var(--puck-color-rose-6);
1627
+ .styles_Layer-icon {
1628
+ color: var(--puck-color-rose-07);
1373
1629
  margin-top: 4px;
1374
1630
  }
1375
- ._Layer-zoneIcon_o89yt_104 {
1376
- color: var(--puck-color-grey-7);
1631
+ .styles_Layer-zoneIcon {
1632
+ color: var(--puck-color-grey-08);
1377
1633
  margin-top: 4px;
1378
1634
  }
1635
+
1636
+ /* components/ViewportControls/styles.module.css */
1637
+ .styles_ViewportControls {
1638
+ display: flex;
1639
+ background: var(--puck-color-grey-11);
1640
+ box-sizing: border-box;
1641
+ border-left: 2px solid var(--puck-color-grey-11);
1642
+ justify-content: center;
1643
+ gap: 8px;
1644
+ min-width: 358px;
1645
+ padding-bottom: 16px;
1646
+ padding-left: var(--puck-space-px);
1647
+ padding-right: var(--puck-space-px);
1648
+ z-index: 1;
1649
+ }
1650
+ .styles_ViewportControls-divider {
1651
+ border-right: 1px solid var(--puck-color-grey-09);
1652
+ margin-left: 8px;
1653
+ margin-right: 8px;
1654
+ }
1655
+ .styles_ViewportControls-zoomSelect {
1656
+ appearance: none;
1657
+ 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;
1658
+ background-size: 10px;
1659
+ background-position: calc(100% - 12px) calc(50% + 3px);
1660
+ background-repeat: no-repeat;
1661
+ border: 0;
1662
+ font-size: var(--puck-font-size-xxxs);
1663
+ width: 96px;
1664
+ }
1665
+ .styles_ViewportButton--isActive .styles_ViewportButton-inner {
1666
+ color: var(--puck-color-azure-04);
1667
+ }
1668
+
1669
+ /* components/Puck/components/Canvas/styles.module.css */
1670
+ .styles_PuckCanvas {
1671
+ background: var(--puck-color-grey-11);
1672
+ display: flex;
1673
+ grid-area: editor;
1674
+ flex-direction: column;
1675
+ padding: var(--puck-space-px);
1676
+ overflow: auto;
1677
+ }
1678
+ @media (min-width: 1198px) {
1679
+ .styles_PuckCanvas {
1680
+ padding: calc(var(--puck-space-px) * 1.5);
1681
+ padding-top: var(--puck-space-px);
1682
+ }
1683
+ .styles_PuckCanvas:not(.styles_PuckCanvas:has(.styles_PuckCanvas-controls)) {
1684
+ padding-top: calc(var(--puck-space-px) * 1.5);
1685
+ }
1686
+ }
1687
+ .styles_PuckCanvas-inner {
1688
+ box-sizing: border-box;
1689
+ display: flex;
1690
+ height: 100%;
1691
+ justify-content: center;
1692
+ min-width: 358px;
1693
+ overflow: hidden;
1694
+ position: relative;
1695
+ width: 100%;
1696
+ }
1697
+ .styles_PuckCanvas-root {
1698
+ background: white;
1699
+ border: 1px solid var(--puck-color-grey-09);
1700
+ box-sizing: border-box;
1701
+ min-width: 321px;
1702
+ position: absolute;
1703
+ transform-origin: top;
1704
+ top: 0;
1705
+ bottom: 0;
1706
+ opacity: 0;
1707
+ }
1708
+ @media (min-width: 1198px) {
1709
+ .styles_PuckCanvas-root {
1710
+ min-width: unset;
1711
+ }
1712
+ }
1713
+ @media (prefers-reduced-motion: reduce) {
1714
+ .styles_PuckCanvas-root {
1715
+ transition: none !important;
1716
+ }
1717
+ }
1718
+ .styles_PuckCanvas--ready .styles_PuckCanvas-root {
1719
+ opacity: 1;
1720
+ transition: opacity 150ms ease-out;
1721
+ }