@measured/puck 0.14.0-canary.55740c4 → 0.14.0-canary.68f97ae

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