@measured/puck 0.14.0-canary.cbdf66d → 0.14.0-canary.d944288

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/{Config-1444273f.d.ts → Config-Bgx_Bij_.d.ts} +27 -3
  2. package/dist/index.css +913 -587
  3. package/dist/index.d.ts +45 -9
  4. package/dist/index.js +1655 -741
  5. package/dist/rsc.d.ts +1 -1
  6. 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;
172
+ }
173
+ .Button_Button--large {
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_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;
194
200
  }
195
- ._Button--secondary_1brfa_53:hover {
196
- background-color: var(--puck-color-grey-10);
197
- color: black;
198
- opacity: 0.7;
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
+ }
206
+ }
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);
317
+ }
318
+ .styles_DraggableComponent--isDragging > .styles_DraggableComponent-overlay {
319
+ outline: 1px var(--puck-color-azure-09) solid !important;
286
320
  }
287
- ._DraggableComponent-loadingOverlay_foluk_39 {
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
+ }
497
564
  }
498
- ._SidebarSection-breadcrumbs_170gs_52 {
565
+ .styles_SidebarSection-breadcrumbLabel:active {
566
+ color: var(--puck-color-azure-02);
567
+ transition: none;
568
+ }
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,295 @@
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);
887
980
  }
888
- ._ArrayField-addButton_1auyc_17 {
889
- background-color: white;
981
+ .styles_ArrayField-addButton {
982
+ background-color: var(--puck-color-white);
890
983
  border: none;
891
984
  border-radius: 4px;
892
985
  display: flex;
893
- color: var(--puck-color-azure-4);
986
+ color: var(--puck-color-azure-05);
894
987
  justify-content: center;
895
988
  cursor: pointer;
896
989
  width: 100%;
897
990
  margin: 0;
898
991
  padding: 16px;
899
992
  text-align: left;
993
+ transition: background-color 50ms ease-in;
900
994
  }
901
- ._ArrayField--hasItems_1auyc_31 > ._ArrayField-addButton_1auyc_17 {
995
+ .styles_ArrayField--hasItems > .styles_ArrayField-addButton {
902
996
  border-top-left-radius: 0;
903
997
  border-top-right-radius: 0;
904
998
  }
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);
999
+ .styles_ArrayField-addButton:focus-visible {
1000
+ outline: 2px solid var(--puck-color-azure-05);
1001
+ outline-offset: 2px;
1002
+ position: relative;
1003
+ }
1004
+ @media (hover: hover) and (pointer: fine) {
1005
+ .styles_ArrayField:not(.styles_ArrayField--isDraggingFrom) > .styles_ArrayField-addButton:hover {
1006
+ background: var(--puck-color-azure-12);
1007
+ color: var(--puck-color-azure-04);
1008
+ transition: none;
1009
+ }
908
1010
  }
909
- ._ArrayFieldItem_1auyc_45 {
910
- background: white;
1011
+ .styles_ArrayField:not(.styles_ArrayField--isDraggingFrom) > .styles_ArrayField-addButton:active {
1012
+ background: var(--puck-color-azure-11);
1013
+ color: var(--puck-color-azure-04);
1014
+ transition: none;
1015
+ }
1016
+ .styles_ArrayFieldItem {
1017
+ background: var(--puck-color-white);
911
1018
  border-top-left-radius: 4px;
912
1019
  border-top-right-radius: 4px;
913
1020
  display: block;
914
1021
  margin-bottom: 1px;
915
1022
  }
916
- ._ArrayField--isDraggingFrom_1auyc_13 > ._ArrayFieldItem_1auyc_45:not(._ArrayFieldItem--isDragging_1auyc_53) {
917
- border-bottom: 1px solid var(--puck-color-grey-8);
1023
+ .styles_ArrayField--isDraggingFrom > .styles_ArrayFieldItem:not(.styles_ArrayFieldItem--isDragging) {
1024
+ border-bottom: 1px solid var(--puck-color-grey-09);
918
1025
  margin-bottom: 0;
919
1026
  }
920
- ._ArrayFieldItem--isExpanded_1auyc_58 {
1027
+ .styles_ArrayFieldItem--isExpanded {
921
1028
  border-bottom: 0;
922
1029
  outline-offset: 0px !important;
923
- outline: 1px solid var(--puck-color-azure-6) !important;
1030
+ outline: 1px solid var(--puck-color-azure-07) !important;
924
1031
  }
925
- ._ArrayFieldItem--isDragging_1auyc_53 {
926
- box-shadow: rgba(140, 152, 164, 0.25) 0 3px 6px 0;
1032
+ .styles_ArrayFieldItem--isDragging {
1033
+ box-shadow: color-mix(in srgb, var(--puck-color-grey-06) 25%, transparent) 0 3px 6px 0;
927
1034
  }
928
- ._ArrayFieldItem_1auyc_45 + ._ArrayFieldItem_1auyc_45 {
1035
+ .styles_ArrayFieldItem--isDragging .styles_ArrayFieldItem-summary:active {
1036
+ background-color: var(--puck-color-white);
1037
+ }
1038
+ .styles_ArrayFieldItem + .styles_ArrayFieldItem {
929
1039
  border-top-left-radius: 0;
930
1040
  border-top-right-radius: 0;
931
1041
  }
932
- ._ArrayFieldItem-summary_1auyc_73 {
933
- color: var(--puck-color-grey-3);
1042
+ .styles_ArrayFieldItem-summary {
1043
+ color: var(--puck-color-grey-04);
1044
+ cursor: pointer;
934
1045
  display: flex;
935
1046
  align-items: center;
936
1047
  gap: 2px;
@@ -940,179 +1051,236 @@ textarea._Input-input_1v7zr_46 {
940
1051
  padding: 12px 15px;
941
1052
  position: relative;
942
1053
  overflow: hidden;
1054
+ transition: background-color 50ms ease-in;
943
1055
  }
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;
1056
+ .styles_ArrayFieldItem--readOnly > .styles_ArrayFieldItem-summary {
1057
+ background-color: var(--puck-color-grey-12);
1058
+ color: var(--puck-color-grey-06);
950
1059
  }
951
- ._ArrayFieldItem_1auyc_45:first-of-type > ._ArrayFieldItem-summary_1auyc_73 {
1060
+ .styles_ArrayFieldItem:first-of-type > .styles_ArrayFieldItem-summary {
952
1061
  border-top-left-radius: 4px;
953
1062
  border-top-right-radius: 4px;
954
1063
  }
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);
1064
+ .styles_ArrayFieldItem-summary:focus-visible {
1065
+ outline: 2px solid var(--puck-color-azure-05);
1066
+ outline-offset: 2px;
1067
+ }
1068
+ @media (hover: hover) and (pointer: fine) {
1069
+ .styles_ArrayFieldItem-summary:hover {
1070
+ background-color: var(--puck-color-azure-12);
1071
+ transition: none;
1072
+ }
1073
+ }
1074
+ .styles_ArrayFieldItem-summary:active {
1075
+ background-color: var(--puck-color-azure-11);
1076
+ transition: none;
960
1077
  }
961
- ._ArrayFieldItem-body_1auyc_107 {
1078
+ .styles_ArrayFieldItem--isExpanded > .styles_ArrayFieldItem-summary {
1079
+ background: var(--puck-color-azure-11);
1080
+ color: var(--puck-color-azure-04);
1081
+ font-weight: 600;
1082
+ transition: none;
1083
+ }
1084
+ .styles_ArrayFieldItem-body {
962
1085
  display: none;
963
1086
  }
964
- ._ArrayFieldItem--isExpanded_1auyc_58 > ._ArrayFieldItem-body_1auyc_107 {
1087
+ .styles_ArrayFieldItem--isExpanded > .styles_ArrayFieldItem-body {
965
1088
  display: block;
966
1089
  }
967
- ._ArrayFieldItem-fieldset_1auyc_115 {
1090
+ .styles_ArrayFieldItem-fieldset {
968
1091
  border: none;
969
- border-top: 1px solid var(--puck-color-grey-8);
1092
+ border-top: 1px solid var(--puck-color-grey-09);
970
1093
  margin: 0;
971
1094
  padding: 16px 15px;
972
1095
  }
973
- ._ArrayFieldItem-rhs_1auyc_122 {
1096
+ .styles_ArrayFieldItem-rhs {
974
1097
  display: flex;
975
1098
  gap: 4px;
976
1099
  align-items: center;
977
1100
  }
978
- ._ArrayFieldItem-actions_1auyc_128 {
979
- color: var(--puck-color-grey-3);
1101
+ .styles_ArrayFieldItem-actions {
1102
+ color: var(--puck-color-grey-04);
980
1103
  display: flex;
981
1104
  gap: 4px;
982
1105
  opacity: 0;
983
1106
  }
984
- ._ArrayFieldItem-summary_1auyc_73:hover > ._ArrayFieldItem-rhs_1auyc_122 > ._ArrayFieldItem-actions_1auyc_128 {
1107
+ .styles_ArrayFieldItem-summary:focus-within > .styles_ArrayFieldItem-rhs > .styles_ArrayFieldItem-actions,
1108
+ .styles_ArrayFieldItem-summary:hover > .styles_ArrayFieldItem-rhs > .styles_ArrayFieldItem-actions {
985
1109
  opacity: 1;
986
1110
  }
987
- ._ArrayFieldItem-action_1auyc_128:hover {
988
- background: var(--puck-color-grey-9);
989
- border-radius: 4px;
990
- cursor: pointer;
991
- }
992
1111
 
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 {
1112
+ /* components/ExternalInput/styles.module.css */
1113
+ .styles_ExternalInput-actions {
998
1114
  display: flex;
999
1115
  }
1000
- ._ExternalInput-button_s6fxy_9 {
1116
+ .styles_ExternalInput-button {
1001
1117
  display: flex;
1002
1118
  gap: 8px;
1003
1119
  align-items: center;
1004
1120
  justify-content: center;
1005
- background-color: white;
1006
- border: 1px solid var(--puck-color-grey-8);
1121
+ background-color: var(--puck-color-white);
1122
+ border: 1px solid var(--puck-color-grey-09);
1007
1123
  border-radius: 4px;
1008
- color: var(--puck-color-azure-4);
1124
+ color: var(--puck-color-azure-04);
1125
+ cursor: pointer;
1009
1126
  padding: 12px 16px;
1010
1127
  font-weight: 500;
1011
1128
  white-space: nowrap;
1012
1129
  text-overflow: ellipsis;
1130
+ transition: background-color 50ms ease-in;
1013
1131
  position: relative;
1014
1132
  overflow: hidden;
1015
1133
  flex-grow: 1;
1016
1134
  }
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);
1135
+ .styles_ExternalInput--dataSelected .styles_ExternalInput-button {
1136
+ color: var(--puck-color-grey-03);
1026
1137
  display: block;
1027
1138
  border-top-right-radius: 0px;
1028
1139
  border-bottom-right-radius: 0px;
1029
1140
  }
1030
- ._ExternalInput-detachButton_s6fxy_28 {
1031
- border: 1px solid var(--puck-color-grey-8);
1141
+ .styles_ExternalInput-detachButton {
1142
+ border: 1px solid var(--puck-color-grey-09);
1032
1143
  border-top-right-radius: 4px;
1033
1144
  border-bottom-right-radius: 4px;
1034
- background-color: var(--puck-color-grey-11);
1035
- color: var(--puck-color-grey-4);
1145
+ background-color: var(--puck-color-grey-12);
1146
+ color: var(--puck-color-grey-05);
1147
+ cursor: pointer;
1036
1148
  display: flex;
1037
1149
  gap: 8px;
1038
1150
  align-items: center;
1039
1151
  justify-content: center;
1040
1152
  padding: 8px 12px;
1153
+ position: relative;
1154
+ transition: background-color 50ms ease-in, color 50ms ease-in;
1041
1155
  margin-left: -1px;
1042
1156
  }
1043
- ._ExternalInputModal_s6fxy_56 {
1044
- color: black;
1157
+ .styles_ExternalInput-button:focus-visible,
1158
+ .styles_ExternalInput-detachButton:focus-visible {
1159
+ outline: 2px solid var(--puck-color-azure-05);
1160
+ outline-offset: 2px;
1161
+ z-index: 1;
1162
+ }
1163
+ @media (hover: hover) and (pointer: fine) {
1164
+ .styles_ExternalInput-button:hover,
1165
+ .styles_ExternalInput-detachButton:hover {
1166
+ background: var(--puck-color-azure-12);
1167
+ transition: none;
1168
+ }
1169
+ .styles_ExternalInput-detachButton:hover {
1170
+ color: var(--puck-color-azure-04);
1171
+ }
1172
+ }
1173
+ .styles_ExternalInput-button:active,
1174
+ .styles_ExternalInput-detachButton:active {
1175
+ background: var(--puck-color-azure-11);
1176
+ transition: none;
1177
+ }
1178
+ .styles_ExternalInputModal {
1179
+ color: var(--puck-color-black);
1180
+ display: grid;
1181
+ grid-template-rows: min-content minmax(128px, 100%) min-content;
1182
+ grid-template-columns: 100%;
1183
+ position: relative;
1184
+ min-height: 50dvh;
1185
+ max-height: 90dvh;
1186
+ }
1187
+ .styles_ExternalInputModal-grid {
1045
1188
  display: flex;
1046
1189
  flex-direction: column;
1047
- position: relative;
1048
- max-height: 90vh;
1049
1190
  }
1050
- ._ExternalInputModal-masthead_s6fxy_64 {
1051
- background-color: white;
1191
+ @media (min-width: 458px) {
1192
+ .styles_ExternalInputModal-grid {
1193
+ display: grid;
1194
+ grid-template-columns: 100%;
1195
+ }
1196
+ .styles_ExternalInputModal--filtersToggled .styles_ExternalInputModal-grid {
1197
+ grid-template-columns: 25% 75%;
1198
+ }
1199
+ }
1200
+ .styles_ExternalInputModal-filters {
1201
+ border-bottom: 1px solid var(--puck-color-grey-09);
1202
+ }
1203
+ .styles_ExternalInputModal--filtersToggled .styles_ExternalInputModal-filters {
1204
+ display: none;
1205
+ }
1206
+ @media (min-width: 458px) {
1207
+ .styles_ExternalInputModal-filters {
1208
+ border-right: 1px solid var(--puck-color-grey-09);
1209
+ display: none;
1210
+ }
1211
+ .styles_ExternalInputModal--filtersToggled .styles_ExternalInputModal-filters {
1212
+ display: block;
1213
+ }
1214
+ }
1215
+ .styles_ExternalInputModal-masthead {
1216
+ background-color: var(--puck-color-grey-12);
1217
+ border-bottom: 1px solid var(--puck-color-grey-09);
1052
1218
  display: flex;
1053
1219
  flex-wrap: wrap;
1054
1220
  gap: 24px;
1055
- padding: 32px 24px;
1221
+ padding: 24px;
1056
1222
  }
1057
- ._ExternalInputModal-tableWrapper_s6fxy_72 {
1223
+ .styles_ExternalInputModal-tableWrapper {
1058
1224
  position: relative;
1059
1225
  overflow-x: auto;
1060
1226
  overflow-y: auto;
1061
1227
  flex-grow: 1;
1062
1228
  }
1063
- ._ExternalInputModal-table_s6fxy_72 {
1229
+ .styles_ExternalInputModal-table {
1064
1230
  border-collapse: unset;
1065
1231
  border-spacing: 0px;
1066
- color: var(--puck-color-neutral-4);
1232
+ color: var(--puck-color-grey-02);
1067
1233
  position: relative;
1068
1234
  z-index: 0;
1069
1235
  min-width: 100%;
1070
1236
  }
1071
- ._ExternalInputModal-thead_s6fxy_88 {
1237
+ .styles_ExternalInputModal-thead {
1238
+ background-color: var(--puck-color-white);
1072
1239
  position: sticky;
1073
1240
  top: 0;
1074
1241
  z-index: 1;
1075
1242
  }
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;
1243
+ .styles_ExternalInputModal-th {
1244
+ border-bottom: 1px solid var(--puck-color-grey-09);
1245
+ color: var(--puck-color-grey-04);
1246
+ font-weight: 500;
1247
+ font-size: 14px;
1080
1248
  padding: 16px 24px;
1081
- opacity: 0.9;
1082
1249
  }
1083
- ._ExternalInputModal-td_s6fxy_102 {
1084
- font-family: var(--puck-font-stack);
1250
+ .styles_ExternalInputModal-td {
1251
+ border-bottom: 1px solid var(--puck-color-grey-10);
1085
1252
  padding: 16px 24px;
1086
1253
  }
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 {
1254
+ .styles_ExternalInputModal-tr .styles_ExternalInputModal-td:first-of-type {
1094
1255
  font-weight: 500;
1256
+ width: 1%;
1257
+ white-space: nowrap;
1095
1258
  }
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;
1259
+ @media (hover: hover) and (pointer: fine) {
1260
+ .styles_ExternalInputModal-tbody .styles_ExternalInputModal-tr:hover {
1261
+ background: var(--puck-color-azure-12);
1262
+ color: var(--puck-color-azure-04);
1263
+ cursor: pointer;
1264
+ position: relative;
1265
+ margin-left: -5px;
1266
+ }
1267
+ .styles_ExternalInputModal-tbody .styles_ExternalInputModal-tr:hover .styles_ExternalInputModal-td:first-of-type {
1268
+ border-left: 4px solid var(--puck-color-azure-04);
1269
+ padding-left: 20px;
1270
+ }
1102
1271
  }
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;
1272
+ .styles_ExternalInputModal-tbody .styles_ExternalInputModal-tr:last-of-type .styles_ExternalInputModal-td {
1273
+ border-bottom: none;
1106
1274
  }
1107
- ._ExternalInputModal-tableWrapper_s6fxy_72 {
1275
+ .styles_ExternalInputModal-tableWrapper {
1108
1276
  display: none;
1109
1277
  }
1110
- ._ExternalInputModal--hasData_s6fxy_138 ._ExternalInputModal-tableWrapper_s6fxy_72 {
1278
+ .styles_ExternalInputModal--hasData .styles_ExternalInputModal-tableWrapper {
1111
1279
  display: block;
1112
1280
  }
1113
- ._ExternalInputModal-loadingBanner_s6fxy_142 {
1281
+ .styles_ExternalInputModal-loadingBanner {
1114
1282
  display: none;
1115
- background-color: #ffffff90;
1283
+ background-color: color-mix(in srgb, var(--puck-color-white) 90%, transparent);
1116
1284
  padding: 64px;
1117
1285
  align-items: center;
1118
1286
  justify-content: center;
@@ -1122,50 +1290,64 @@ textarea._Input-input_1v7zr_46 {
1122
1290
  right: 0;
1123
1291
  bottom: 0;
1124
1292
  }
1125
- ._ExternalInputModal--isLoading_s6fxy_155 ._ExternalInputModal-loadingBanner_s6fxy_142 {
1293
+ .styles_ExternalInputModal--isLoading .styles_ExternalInputModal-loadingBanner {
1126
1294
  display: flex;
1127
1295
  }
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 {
1296
+ .styles_ExternalInputModal-searchForm {
1138
1297
  display: flex;
1139
- margin-left: auto;
1140
- height: 43px;
1298
+ flex-wrap: wrap;
1141
1299
  gap: 12px;
1300
+ flex-grow: 1;
1301
+ }
1302
+ @media (min-width: 458px) {
1303
+ .styles_ExternalInputModal-searchForm {
1304
+ flex-wrap: nowrap;
1305
+ }
1142
1306
  }
1143
- ._ExternalInputModal-search_s6fxy_171 {
1307
+ .styles_ExternalInputModal-search {
1144
1308
  display: flex;
1145
- background: white;
1309
+ background: var(--puck-color-white);
1146
1310
  border-width: 1px;
1147
1311
  border-style: solid;
1148
- border-color: var(--puck-color-grey-8);
1312
+ border-color: var(--puck-color-grey-09);
1149
1313
  border-radius: 4px;
1150
- width: 100%;
1314
+ flex-grow: 1;
1315
+ transition: border-color 50ms ease-in;
1151
1316
  }
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;
1317
+ .styles_ExternalInputModal-search:focus-within {
1318
+ border-color: var(--puck-color-grey-05);
1319
+ outline: 2px solid var(--puck-color-azure-05);
1320
+ transition: none;
1156
1321
  }
1157
- ._ExternalInputModal-searchIcon_s6fxy_194 {
1322
+ @media (hover: hover) and (pointer: fine) {
1323
+ .styles_ExternalInputModal-search:hover {
1324
+ border-color: var(--puck-color-grey-05);
1325
+ transition: none;
1326
+ }
1327
+ }
1328
+ .styles_ExternalInputModal-searchIcon {
1158
1329
  align-items: center;
1159
- background: var(--puck-color-grey-11);
1330
+ background: var(--puck-color-grey-12);
1160
1331
  border-bottom-left-radius: 4px;
1161
1332
  border-top-left-radius: 4px;
1162
- border-right: 1px solid var(--puck-color-grey-8);
1163
- color: var(--puck-color-grey-6);
1333
+ border-right: 1px solid var(--puck-color-grey-09);
1334
+ color: var(--puck-color-grey-07);
1164
1335
  display: flex;
1165
1336
  justify-content: center;
1166
1337
  padding: 12px 15px;
1338
+ transition: color 50ms ease-in;
1339
+ }
1340
+ .styles_ExternalInputModal-search:focus-within .styles_ExternalInputModal-searchIcon {
1341
+ color: var(--puck-color-grey-04);
1342
+ transition: none;
1343
+ }
1344
+ @media (hover: hover) and (pointer: fine) {
1345
+ .styles_ExternalInputModal-search:hover .styles_ExternalInputModal-searchIcon {
1346
+ color: var(--puck-color-grey-04);
1347
+ transition: none;
1348
+ }
1167
1349
  }
1168
- ._ExternalInputModal-searchIconText_s6fxy_206 {
1350
+ .styles_ExternalInputModal-searchIconText {
1169
1351
  clip: rect(0 0 0 0);
1170
1352
  clip-path: inset(100%);
1171
1353
  height: 1px;
@@ -1174,24 +1356,45 @@ textarea._Input-input_1v7zr_46 {
1174
1356
  white-space: nowrap;
1175
1357
  width: 1px;
1176
1358
  }
1177
- ._ExternalInputModal-searchInput_s6fxy_216 {
1359
+ .styles_ExternalInputModal-searchInput {
1178
1360
  border: none;
1179
1361
  border-radius: 4px;
1180
- background: white;
1362
+ background: var(--puck-color-white);
1181
1363
  font-family: inherit;
1182
1364
  font-size: 14px;
1183
1365
  padding: 12px 15px;
1184
1366
  width: 100%;
1185
1367
  }
1186
- ._ExternalInputModal-searchInput_s6fxy_216:focus {
1187
- border: none;
1188
- outline: none;
1189
- box-shadow: none;
1368
+ .styles_ExternalInputModal-searchInput:focus {
1369
+ outline: 0;
1370
+ }
1371
+ .styles_ExternalInputModal-searchActions {
1372
+ display: flex;
1373
+ gap: 8px;
1374
+ height: 44px;
1375
+ width: 100%;
1376
+ }
1377
+ @media (min-width: 458px) {
1378
+ .styles_ExternalInputModal-searchActions {
1379
+ width: auto;
1380
+ }
1381
+ }
1382
+ .styles_ExternalInputModal-searchActionIcon {
1383
+ align-self: center;
1384
+ }
1385
+ .styles_ExternalInputModal-footer {
1386
+ background-color: var(--puck-color-grey-12);
1387
+ border-top: 1px solid var(--puck-color-grey-09);
1388
+ color: var(--puck-color-grey-04);
1389
+ font-weight: 500;
1390
+ font-size: 14px;
1391
+ padding: 16px;
1392
+ text-align: right;
1190
1393
  }
1191
1394
 
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;
1395
+ /* components/Modal/styles.module.css */
1396
+ .styles_Modal {
1397
+ background: color-mix(in srgb, var(--puck-color-black) 75%, transparent);
1195
1398
  display: none;
1196
1399
  justify-content: center;
1197
1400
  align-items: center;
@@ -1201,42 +1404,43 @@ textarea._Input-input_1v7zr_46 {
1201
1404
  bottom: 0;
1202
1405
  right: 0;
1203
1406
  z-index: 1;
1204
- padding: 64px;
1407
+ padding: 32px;
1205
1408
  }
1206
- ._Modal--isOpen_hx2u6_15 {
1409
+ .styles_Modal--isOpen {
1207
1410
  display: flex;
1208
1411
  }
1209
- ._Modal-inner_hx2u6_19 {
1412
+ .styles_Modal-inner {
1210
1413
  width: 100%;
1211
1414
  max-width: 1024px;
1212
- border-radius: 16px;
1415
+ border-radius: 8px;
1213
1416
  overflow: hidden;
1214
- background: white;
1417
+ background: var(--puck-color-white);
1215
1418
  display: flex;
1216
1419
  flex-direction: column;
1217
- max-height: 90vh;
1420
+ max-height: 90dvh;
1218
1421
  }
1219
1422
 
1220
- /* css-module:/home/runner/work/puck/puck/packages/core/components/InputOrGroup/fields/ObjectField/styles.module.css/#css-module-data */
1221
- ._ObjectField_56z4t_5 {
1423
+ /* components/InputOrGroup/fields/ObjectField/styles.module.css */
1424
+ .styles_ObjectField {
1222
1425
  display: flex;
1223
1426
  flex-direction: column;
1224
- background-color: white;
1225
- border: 1px solid var(--puck-color-grey-8);
1427
+ background-color: var(--puck-color-white);
1428
+ border: 1px solid var(--puck-color-grey-09);
1226
1429
  border-radius: 4px;
1227
1430
  }
1228
- ._ObjectField-fieldset_56z4t_13 {
1431
+ .styles_ObjectField-fieldset {
1229
1432
  border: none;
1230
1433
  margin: 0;
1231
1434
  padding: 16px 15px;
1232
1435
  }
1233
1436
 
1234
- /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Fields/styles.module.css/#css-module-data */
1235
- ._PuckFields_1276r_1 {
1437
+ /* components/Puck/components/Fields/styles.module.css */
1438
+ .styles_PuckFields {
1236
1439
  position: relative;
1440
+ font-family: var(--puck-font-family);
1237
1441
  }
1238
- ._PuckFields-loadingOverlay_1276r_5 {
1239
- background: white;
1442
+ .styles_PuckFields-loadingOverlay {
1443
+ background: var(--puck-color-white);
1240
1444
  display: flex;
1241
1445
  justify-content: center;
1242
1446
  align-items: center;
@@ -1250,129 +1454,251 @@ textarea._Input-input_1v7zr_46 {
1250
1454
  opacity: 0.8;
1251
1455
  }
1252
1456
 
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);
1457
+ /* components/ComponentList/styles.module.css */
1458
+ .styles_ComponentList {
1256
1459
  max-width: 100%;
1257
1460
  }
1258
- ._ComponentList--isExpanded_1di93_6 + ._ComponentList_1di93_1 {
1461
+ .styles_ComponentList--isExpanded + .styles_ComponentList {
1259
1462
  margin-top: 12px;
1260
1463
  }
1261
- ._ComponentList-content_1di93_10 {
1464
+ .styles_ComponentList-content {
1262
1465
  display: none;
1263
1466
  }
1264
- ._ComponentList--isExpanded_1di93_6 > ._ComponentList-content_1di93_10 {
1467
+ .styles_ComponentList--isExpanded > .styles_ComponentList-content {
1265
1468
  display: block;
1266
1469
  }
1267
- ._ComponentList-title_1di93_18 {
1268
- color: var(--puck-color-grey-4);
1470
+ .styles_ComponentList-title {
1471
+ background-color: transparent;
1472
+ border: 0;
1473
+ color: var(--puck-color-grey-05);
1474
+ cursor: pointer;
1269
1475
  display: flex;
1476
+ font: inherit;
1270
1477
  font-size: var(--puck-font-size-xxxs);
1271
1478
  list-style: none;
1479
+ margin-bottom: 6px;
1272
1480
  padding: 8px;
1273
1481
  text-transform: uppercase;
1482
+ transition: background-color 50ms ease-in, color 50ms ease-in;
1274
1483
  gap: 4px;
1275
1484
  border-radius: 4px;
1485
+ width: 100%;
1276
1486
  }
1277
- ._ComponentList--isExpanded_1di93_6 ._ComponentList-title_1di93_18 {
1278
- margin-bottom: 4px;
1487
+ .styles_ComponentList-title:focus-visible {
1488
+ outline: 2px solid var(--puck-color-azure-05);
1489
+ outline-offset: 2px;
1279
1490
  }
1280
- ._ComponentList-title_1di93_18:hover {
1281
- background-color: var(--puck-color-azure-9);
1282
- color: var(--puck-color-azure-4);
1283
- cursor: pointer;
1491
+ @media (hover: hover) and (pointer: fine) {
1492
+ .styles_ComponentList-title:hover {
1493
+ background-color: var(--puck-color-azure-11);
1494
+ color: var(--puck-color-azure-04);
1495
+ transition: none;
1496
+ }
1284
1497
  }
1285
- ._ComponentList-titleIcon_1di93_39 {
1498
+ .styles_ComponentList-title:active {
1499
+ background-color: var(--puck-color-azure-10);
1500
+ transition: none;
1501
+ }
1502
+ .styles_ComponentList-titleIcon {
1286
1503
  margin-left: auto;
1287
1504
  }
1288
1505
 
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);
1506
+ /* components/Puck/components/Preview/styles.module.css */
1507
+ .styles_PuckPreview {
1508
+ height: 100%;
1509
+ }
1510
+ .styles_PuckPreview-frame {
1511
+ border: none;
1512
+ height: 100%;
1513
+ width: 100%;
1514
+ }
1515
+
1516
+ /* components/LayerTree/styles.module.css */
1517
+ .styles_LayerTree {
1518
+ color: var(--puck-color-grey-03);
1519
+ font-family: var(--puck-font-family);
1293
1520
  font-size: var(--puck-font-size-xxs);
1294
1521
  margin: 0;
1295
1522
  position: relative;
1296
1523
  list-style: none;
1297
1524
  padding: 0;
1298
1525
  }
1299
- ._LayerTree-zoneTitle_o89yt_11 {
1300
- color: var(--puck-color-grey-4);
1526
+ .styles_LayerTree-zoneTitle {
1527
+ color: var(--puck-color-grey-05);
1301
1528
  font-size: var(--puck-font-size-xxxs);
1302
1529
  text-transform: uppercase;
1303
1530
  }
1304
- ._LayerTree-helper_o89yt_17 {
1531
+ .styles_LayerTree-helper {
1305
1532
  text-align: center;
1306
- color: var(--puck-color-grey-6);
1307
- font-family: var(--puck-font-stack);
1533
+ color: var(--puck-color-grey-07);
1308
1534
  margin: 8px 4px;
1309
1535
  }
1310
- ._Layer_o89yt_1 {
1536
+ .styles_Layer {
1311
1537
  position: relative;
1312
1538
  border: 1px solid transparent;
1539
+ border-radius: 4px;
1313
1540
  }
1314
- ._Layer-inner_o89yt_29 {
1315
- padding-left: 12px;
1316
- padding-right: 4px;
1541
+ .styles_Layer-inner {
1542
+ border: 1px solid transparent;
1317
1543
  border-radius: 4px;
1544
+ transition: color 50ms ease-in;
1318
1545
  }
1319
- ._Layer--containsZone_o89yt_35 > ._Layer-inner_o89yt_29 {
1546
+ .styles_Layer--containsZone > .styles_Layer-inner {
1320
1547
  padding-left: 0;
1321
1548
  }
1322
- ._Layer-clickable_o89yt_39 {
1549
+ .styles_Layer-clickable {
1323
1550
  align-items: center;
1551
+ background: none;
1552
+ border: 0;
1553
+ border-radius: 4px;
1554
+ color: inherit;
1555
+ cursor: pointer;
1324
1556
  display: flex;
1557
+ font: inherit;
1558
+ padding-left: 12px;
1559
+ padding-right: 4px;
1560
+ width: 100%;
1325
1561
  }
1326
- ._Layer-inner_o89yt_29:hover {
1327
- cursor: pointer;
1562
+ .styles_Layer-clickable:focus-visible {
1563
+ outline: 2px solid var(--puck-color-azure-05);
1564
+ outline-offset: 2px;
1565
+ position: relative;
1566
+ z-index: 1;
1328
1567
  }
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);
1568
+ @media (hover: hover) and (pointer: fine) {
1569
+ .styles_Layer:not(.styles_Layer--isSelected) > .styles_Layer-inner:hover {
1570
+ border-color: var(--puck-color-azure-10);
1571
+ background: var(--puck-color-azure-11);
1572
+ color: var(--puck-color-azure-04);
1573
+ transition: none;
1574
+ }
1333
1575
  }
1334
- ._Layer--isSelected_o89yt_48 {
1335
- background: var(--puck-color-azure-9);
1336
- border-color: var(--puck-color-azure-7);
1337
- border-radius: 4px;
1576
+ .styles_Layer--isSelected {
1577
+ border-color: var(--puck-color-azure-08);
1338
1578
  }
1339
- ._Layer--isSelected_o89yt_48 > ._Layer-inner_o89yt_29 {
1340
- background: var(--puck-color-azure-85);
1341
- font-weight: 600;
1579
+ .styles_Layer--isSelected > .styles_Layer-inner {
1580
+ background: var(--puck-color-azure-10);
1342
1581
  }
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 {
1582
+ .styles_Layer--isSelected > .styles_Layer-inner > .styles_Layer-clickable > .styles_Layer-chevron,
1583
+ .styles_Layer--childIsSelected > .styles_Layer-inner > .styles_Layer-clickable > .styles_Layer-chevron {
1345
1584
  transform: scaleY(-1);
1346
1585
  }
1347
- ._Layer-zones_o89yt_70 {
1586
+ .styles_Layer-zones {
1348
1587
  display: none;
1349
1588
  margin-left: 12px;
1350
1589
  }
1351
- ._Layer--isSelected_o89yt_48 > ._Layer-zones_o89yt_70,
1352
- ._Layer--childIsSelected_o89yt_66 > ._Layer-zones_o89yt_70 {
1590
+ .styles_Layer--isSelected > .styles_Layer-zones,
1591
+ .styles_Layer--childIsSelected > .styles_Layer-zones {
1353
1592
  display: block;
1354
1593
  }
1355
- ._Layer-zones_o89yt_70 > ._LayerTree_o89yt_1 {
1594
+ .styles_Layer-zones > .styles_LayerTree {
1356
1595
  margin-left: 12px;
1357
1596
  }
1358
- ._Layer-title_o89yt_84,
1359
- ._LayerTree-zoneTitle_o89yt_11 {
1597
+ .styles_Layer-title,
1598
+ .styles_LayerTree-zoneTitle {
1360
1599
  display: flex;
1361
1600
  gap: 8px;
1362
1601
  align-items: center;
1363
1602
  margin: 8px 4px;
1364
1603
  overflow-x: hidden;
1365
1604
  }
1366
- ._Layer-name_o89yt_93 {
1605
+ .styles_Layer-name {
1367
1606
  overflow-x: hidden;
1368
1607
  text-overflow: ellipsis;
1369
1608
  white-space: nowrap;
1370
1609
  }
1371
- ._Layer-icon_o89yt_99 {
1372
- color: var(--puck-color-rose-6);
1610
+ .styles_Layer-icon {
1611
+ color: var(--puck-color-rose-07);
1373
1612
  margin-top: 4px;
1374
1613
  }
1375
- ._Layer-zoneIcon_o89yt_104 {
1376
- color: var(--puck-color-grey-7);
1614
+ .styles_Layer-zoneIcon {
1615
+ color: var(--puck-color-grey-08);
1377
1616
  margin-top: 4px;
1378
1617
  }
1618
+
1619
+ /* components/ViewportControls/styles.module.css */
1620
+ .styles_ViewportControls {
1621
+ display: flex;
1622
+ background: var(--puck-color-grey-11);
1623
+ box-sizing: border-box;
1624
+ border-left: 2px solid var(--puck-color-grey-11);
1625
+ justify-content: center;
1626
+ gap: 8px;
1627
+ min-width: 358px;
1628
+ padding-bottom: 16px;
1629
+ padding-left: var(--puck-space-px);
1630
+ padding-right: var(--puck-space-px);
1631
+ z-index: 1;
1632
+ }
1633
+ .styles_ViewportControls-divider {
1634
+ border-right: 1px solid var(--puck-color-grey-09);
1635
+ margin-left: 8px;
1636
+ margin-right: 8px;
1637
+ }
1638
+ .styles_ViewportControls-zoomSelect {
1639
+ appearance: none;
1640
+ 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;
1641
+ background-size: 10px;
1642
+ background-position: calc(100% - 12px) calc(50% + 3px);
1643
+ background-repeat: no-repeat;
1644
+ border: 0;
1645
+ font-size: var(--puck-font-size-xxxs);
1646
+ width: 96px;
1647
+ }
1648
+ .styles_ViewportButton--isActive .styles_ViewportButton-inner {
1649
+ color: var(--puck-color-azure-04);
1650
+ }
1651
+
1652
+ /* components/Puck/components/Canvas/styles.module.css */
1653
+ .styles_PuckCanvas {
1654
+ background: var(--puck-color-grey-11);
1655
+ display: flex;
1656
+ grid-area: editor;
1657
+ flex-direction: column;
1658
+ padding: var(--puck-space-px);
1659
+ overflow: auto;
1660
+ }
1661
+ @media (min-width: 1198px) {
1662
+ .styles_PuckCanvas {
1663
+ padding: calc(var(--puck-space-px) * 1.5);
1664
+ padding-top: var(--puck-space-px);
1665
+ }
1666
+ .styles_PuckCanvas:not(.styles_PuckCanvas:has(.styles_PuckCanvas-controls)) {
1667
+ padding-top: calc(var(--puck-space-px) * 1.5);
1668
+ }
1669
+ }
1670
+ .styles_PuckCanvas-inner {
1671
+ box-sizing: border-box;
1672
+ display: flex;
1673
+ height: 100%;
1674
+ justify-content: center;
1675
+ min-width: 358px;
1676
+ overflow: hidden;
1677
+ position: relative;
1678
+ width: 100%;
1679
+ }
1680
+ .styles_PuckCanvas-root {
1681
+ background: white;
1682
+ border: 1px solid var(--puck-color-grey-09);
1683
+ box-sizing: border-box;
1684
+ min-width: 321px;
1685
+ position: absolute;
1686
+ transform-origin: top;
1687
+ top: 0;
1688
+ bottom: 0;
1689
+ opacity: 0;
1690
+ }
1691
+ @media (min-width: 1198px) {
1692
+ .styles_PuckCanvas-root {
1693
+ min-width: unset;
1694
+ }
1695
+ }
1696
+ @media (prefers-reduced-motion: reduce) {
1697
+ .styles_PuckCanvas-root {
1698
+ transition: none !important;
1699
+ }
1700
+ }
1701
+ .styles_PuckCanvas--ready .styles_PuckCanvas-root {
1702
+ opacity: 1;
1703
+ transition: opacity 150ms ease-out;
1704
+ }