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

Sign up to get free protection for your applications and to get access to all the features.
Files changed (6) hide show
  1. package/dist/{Config-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
+ }