@measured/puck 0.20.0-canary.14d96817 → 0.20.0-canary.158d52dd

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,146 +1,4 @@
1
- /* styles/color.css */
2
- :root {
3
- --puck-color-rose-01: #4a001c;
4
- --puck-color-rose-02: #670833;
5
- --puck-color-rose-03: #87114c;
6
- --puck-color-rose-04: #a81a66;
7
- --puck-color-rose-05: #bc5089;
8
- --puck-color-rose-06: #cc7ca5;
9
- --puck-color-rose-07: #d89aba;
10
- --puck-color-rose-08: #e3b8cf;
11
- --puck-color-rose-09: #efd6e3;
12
- --puck-color-rose-10: #f6eaf1;
13
- --puck-color-rose-11: #faf4f8;
14
- --puck-color-rose-12: #fef8fc;
15
- --puck-color-azure-01: #00175d;
16
- --puck-color-azure-02: #002c77;
17
- --puck-color-azure-03: #014292;
18
- --puck-color-azure-04: #0158ad;
19
- --puck-color-azure-05: #3479be;
20
- --puck-color-azure-06: #6499cf;
21
- --puck-color-azure-07: #88b0da;
22
- --puck-color-azure-08: #abc7e5;
23
- --puck-color-azure-09: #cfdff0;
24
- --puck-color-azure-10: #e7eef7;
25
- --puck-color-azure-11: #f3f6fb;
26
- --puck-color-azure-12: #f7faff;
27
- --puck-color-green-01: #002000;
28
- --puck-color-green-02: #043604;
29
- --puck-color-green-03: #084e08;
30
- --puck-color-green-04: #0c680c;
31
- --puck-color-green-05: #1d882f;
32
- --puck-color-green-06: #2faa53;
33
- --puck-color-green-07: #56c16f;
34
- --puck-color-green-08: #7dd78b;
35
- --puck-color-green-09: #b8e8bf;
36
- --puck-color-green-10: #ddf3e0;
37
- --puck-color-green-11: #eff8f0;
38
- --puck-color-green-12: #f3fcf4;
39
- --puck-color-yellow-01: #211000;
40
- --puck-color-yellow-02: #362700;
41
- --puck-color-yellow-03: #4c4000;
42
- --puck-color-yellow-04: #645a00;
43
- --puck-color-yellow-05: #877614;
44
- --puck-color-yellow-06: #ab9429;
45
- --puck-color-yellow-07: #bfac4e;
46
- --puck-color-yellow-08: #d4c474;
47
- --puck-color-yellow-09: #e6deb1;
48
- --puck-color-yellow-10: #f3efd9;
49
- --puck-color-yellow-11: #f9f7ed;
50
- --puck-color-yellow-12: #fcfaf0;
51
- --puck-color-red-01: #4c0000;
52
- --puck-color-red-02: #6a0a10;
53
- --puck-color-red-03: #8a1422;
54
- --puck-color-red-04: #ac1f35;
55
- --puck-color-red-05: #bf5366;
56
- --puck-color-red-06: #ce7e8e;
57
- --puck-color-red-07: #d99ca8;
58
- --puck-color-red-08: #e4b9c2;
59
- --puck-color-red-09: #efd7db;
60
- --puck-color-red-10: #f6eaec;
61
- --puck-color-red-11: #faf4f5;
62
- --puck-color-red-12: #fff9fa;
63
- --puck-color-grey-01: #181818;
64
- --puck-color-grey-02: #292929;
65
- --puck-color-grey-03: #404040;
66
- --puck-color-grey-04: #5a5a5a;
67
- --puck-color-grey-05: #767676;
68
- --puck-color-grey-06: #949494;
69
- --puck-color-grey-07: #ababab;
70
- --puck-color-grey-08: #c3c3c3;
71
- --puck-color-grey-09: #dcdcdc;
72
- --puck-color-grey-10: #efefef;
73
- --puck-color-grey-11: #f5f5f5;
74
- --puck-color-grey-12: #fafafa;
75
- --puck-color-black: #000000;
76
- --puck-color-white: #ffffff;
77
- }
78
-
79
- /* styles/typography.css */
80
- :root {
81
- --puck-font-size-scale-base-unitless: 12;
82
- --puck-font-size-xxxs-unitless: 12;
83
- --puck-font-size-xxs-unitless: 14;
84
- --puck-font-size-xs-unitless: 16;
85
- --puck-font-size-s-unitless: 18;
86
- --puck-font-size-m-unitless: 21;
87
- --puck-font-size-l-unitless: 24;
88
- --puck-font-size-xl-unitless: 28;
89
- --puck-font-size-xxl-unitless: 36;
90
- --puck-font-size-xxxl-unitless: 48;
91
- --puck-font-size-xxxxl-unitless: 56;
92
- --puck-font-size-xxxs: calc(1rem * var(--puck-font-size-xxxs-unitless) / 16);
93
- --puck-font-size-xxs: calc(1rem * var(--puck-font-size-xxs-unitless) / 16);
94
- --puck-font-size-xs: calc(1rem * var(--puck-font-size-xs-unitless) / 16);
95
- --puck-font-size-s: calc(1rem * var(--puck-font-size-s-unitless) / 16);
96
- --puck-font-size-m: calc(1rem * var(--puck-font-size-m-unitless) / 16);
97
- --puck-font-size-l: calc(1rem * var(--puck-font-size-l-unitless) / 16);
98
- --puck-font-size-xl: calc(1rem * var(--puck-font-size-xl-unitless) / 16);
99
- --puck-font-size-xxl: calc(1rem * var(--puck-font-size-xxl-unitless) / 16);
100
- --puck-font-size-xxxl: calc(1rem * var(--puck-font-size-xxxl-unitless) / 16);
101
- --puck-font-size-xxxxl: calc( 1rem * var(--puck-font-size-xxxxl-unitless) / 16 );
102
- --puck-font-size-base: var(--puck-font-size-xs);
103
- --line-height-reset: 1;
104
- --line-height-xs: calc( var(--space-m-unitless) / var(--puck-font-size-m-unitless) );
105
- --line-height-s: calc( var(--space-m-unitless) / var(--puck-font-size-s-unitless) );
106
- --line-height-m: calc( var(--space-m-unitless) / var(--puck-font-size-xs-unitless) );
107
- --line-height-l: calc( var(--space-m-unitless) / var(--puck-font-size-xxs-unitless) );
108
- --line-height-xl: calc( var(--space-m-unitless) / var(--puck-font-size-scale-base-unitless) );
109
- --line-height-base: var(--line-height-m);
110
- --fallback-font-stack:
111
- -apple-system,
112
- BlinkMacSystemFont,
113
- Segoe UI,
114
- Helvetica Neue,
115
- sans-serif,
116
- Apple Color Emoji,
117
- Segoe UI Emoji,
118
- Segoe UI Symbol;
119
- --puck-font-family: Inter, var(--fallback-font-stack);
120
- --puck-font-family-monospaced:
121
- ui-monospace,
122
- "Cascadia Code",
123
- "Source Code Pro",
124
- Menlo,
125
- Consolas,
126
- "DejaVu Sans Mono",
127
- monospace;
128
- }
129
- @supports (font-variation-settings: normal) {
130
- :root {
131
- --puck-font-family: InterVariable, var(--fallback-font-stack);
132
- }
133
- }
134
-
135
- /* bundle/core.css */
136
- #frame-root {
137
- height: 1px;
138
- min-height: 100vh;
139
- }
140
- [data-puck-entry] {
141
- position: relative;
142
- z-index: 0;
143
- }
1
+ @import "https://rsms.me/inter/inter.css";
144
2
 
145
3
  /* bundle/no-external.css */
146
4
 
@@ -229,10 +87,10 @@
229
87
  }
230
88
 
231
89
  /* css-module:/home/runner/work/puck/puck/packages/core/components/AutoField/styles.module.css/#css-module-data */
232
- ._InputWrapper_py9hf_1 + ._InputWrapper_py9hf_1 {
90
+ ._InputWrapper_bsxfo_1 + ._InputWrapper_bsxfo_1 {
233
91
  margin-top: 12px;
234
92
  }
235
- ._Input-label_py9hf_5 {
93
+ ._Input-label_bsxfo_5 {
236
94
  align-items: center;
237
95
  color: var(--puck-color-grey-04);
238
96
  display: flex;
@@ -240,17 +98,17 @@
240
98
  font-size: var(--puck-font-size-xxs);
241
99
  font-weight: 600;
242
100
  }
243
- ._Input-labelIcon_py9hf_14 {
101
+ ._Input-labelIcon_bsxfo_14 {
244
102
  color: var(--puck-color-grey-07);
245
103
  display: flex;
246
104
  margin-inline-end: 4px;
247
105
  padding-inline-start: 4px;
248
106
  }
249
- ._Input-disabledIcon_py9hf_21 {
107
+ ._Input-disabledIcon_bsxfo_21 {
250
108
  color: var(--puck-color-grey-05);
251
109
  margin-inline-start: auto;
252
110
  }
253
- ._Input-input_py9hf_26 {
111
+ ._Input-input_bsxfo_26 {
254
112
  background: var(--puck-color-white);
255
113
  border-width: 1px;
256
114
  border-style: solid;
@@ -258,13 +116,18 @@
258
116
  border-radius: 4px;
259
117
  box-sizing: border-box;
260
118
  font-family: inherit;
261
- font-size: 14px;
119
+ font-size: 16px;
262
120
  padding: 12px 15px;
263
121
  transition: border-color 50ms ease-in;
264
122
  width: 100%;
265
123
  max-width: 100%;
266
124
  }
267
- select._Input-input_py9hf_26 {
125
+ @media (min-width: 458px) {
126
+ ._Input-input_bsxfo_26 {
127
+ font-size: 14px;
128
+ }
129
+ }
130
+ select._Input-input_bsxfo_26 {
268
131
  appearance: none;
269
132
  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;
270
133
  background-size: 12px;
@@ -273,29 +136,29 @@ select._Input-input_py9hf_26 {
273
136
  background-color: var(--puck-color-white);
274
137
  cursor: pointer;
275
138
  }
276
- select._Input-input_py9hf_26:dir(rtl) {
139
+ select._Input-input_bsxfo_26:dir(rtl) {
277
140
  background-position: 12px calc(50% + 3px);
278
141
  }
279
142
  @media (hover: hover) and (pointer: fine) {
280
- ._Input_py9hf_1:has(> input):hover ._Input-input_py9hf_26:not([readonly]),
281
- ._Input_py9hf_1:has(> textarea):hover ._Input-input_py9hf_26:not([readonly]) {
143
+ ._Input_bsxfo_1:has(> input):hover ._Input-input_bsxfo_26:not([readonly]),
144
+ ._Input_bsxfo_1:has(> textarea):hover ._Input-input_bsxfo_26:not([readonly]) {
282
145
  border-color: var(--puck-color-grey-05);
283
146
  transition: none;
284
147
  }
285
- ._Input_py9hf_1:has(> select):hover ._Input-input_py9hf_26:not([disabled]) {
148
+ ._Input_bsxfo_1:has(> select):hover ._Input-input_bsxfo_26:not([disabled]) {
286
149
  background-color: var(--puck-color-azure-12);
287
150
  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>");
288
151
  border-color: var(--puck-color-grey-05);
289
152
  transition: none;
290
153
  }
291
154
  }
292
- ._Input-input_py9hf_26:focus {
155
+ ._Input-input_bsxfo_26:focus {
293
156
  border-color: var(--puck-color-grey-05);
294
157
  outline: 2px solid var(--puck-color-azure-05);
295
158
  transition: none;
296
159
  }
297
- ._Input--readOnly_py9hf_76 > ._Input-input_py9hf_26,
298
- ._Input--readOnly_py9hf_76 > select._Input-input_py9hf_26 {
160
+ ._Input--readOnly_bsxfo_82 > ._Input-input_bsxfo_26,
161
+ ._Input--readOnly_bsxfo_82 > select._Input-input_bsxfo_26 {
299
162
  background-color: var(--puck-color-grey-11);
300
163
  border-color: var(--puck-color-grey-09);
301
164
  color: var(--puck-color-grey-04);
@@ -304,34 +167,34 @@ select._Input-input_py9hf_26:dir(rtl) {
304
167
  outline: 0;
305
168
  transition: none;
306
169
  }
307
- ._Input-radioGroupItems_py9hf_87 {
170
+ ._Input-radioGroupItems_bsxfo_93 {
308
171
  display: flex;
309
172
  border: 1px solid var(--puck-color-grey-09);
310
173
  border-radius: 4px;
311
174
  flex-wrap: wrap;
312
175
  }
313
- ._Input-radio_py9hf_87 {
176
+ ._Input-radio_bsxfo_93 {
314
177
  border-inline-end: 1px solid var(--puck-color-grey-09);
315
178
  flex-grow: 1;
316
179
  }
317
- ._Input-radio_py9hf_87:first-of-type {
180
+ ._Input-radio_bsxfo_93:first-of-type {
318
181
  border-bottom-left-radius: 4px;
319
182
  border-top-left-radius: 4px;
320
183
  }
321
- ._Input-radio_py9hf_87:first-of-type ._Input-radioInner_py9hf_104 {
184
+ ._Input-radio_bsxfo_93:first-of-type ._Input-radioInner_bsxfo_110 {
322
185
  border-bottom-left-radius: 3px;
323
186
  border-top-left-radius: 3px;
324
187
  }
325
- ._Input-radio_py9hf_87:last-of-type {
188
+ ._Input-radio_bsxfo_93:last-of-type {
326
189
  border-bottom-right-radius: 4px;
327
190
  border-inline-end: 0;
328
191
  border-top-right-radius: 4px;
329
192
  }
330
- ._Input-radio_py9hf_87:last-of-type ._Input-radioInner_py9hf_104 {
193
+ ._Input-radio_bsxfo_93:last-of-type ._Input-radioInner_bsxfo_110 {
331
194
  border-bottom-right-radius: 3px;
332
195
  border-top-right-radius: 3px;
333
196
  }
334
- ._Input-radioInner_py9hf_104 {
197
+ ._Input-radioInner_bsxfo_110 {
335
198
  background-color: var(--puck-color-white);
336
199
  color: var(--puck-color-grey-04);
337
200
  cursor: pointer;
@@ -340,32 +203,32 @@ select._Input-input_py9hf_26:dir(rtl) {
340
203
  text-align: center;
341
204
  transition: background-color 50ms ease-in;
342
205
  }
343
- ._Input-radio_py9hf_87:has(:focus-visible) {
206
+ ._Input-radio_bsxfo_93:has(:focus-visible) {
344
207
  outline: 2px solid var(--puck-color-azure-05);
345
208
  outline-offset: 2px;
346
209
  position: relative;
347
210
  }
348
211
  @media (hover: hover) and (pointer: fine) {
349
- ._Input-radioInner_py9hf_104:hover {
212
+ ._Input-radioInner_bsxfo_110:hover {
350
213
  background-color: var(--puck-color-azure-12);
351
214
  transition: none;
352
215
  }
353
216
  }
354
- ._Input--readOnly_py9hf_76 ._Input-radioInner_py9hf_104 {
217
+ ._Input--readOnly_bsxfo_82 ._Input-radioInner_bsxfo_110 {
355
218
  background-color: var(--puck-color-white);
356
219
  color: var(--puck-color-grey-04);
357
220
  cursor: default;
358
221
  }
359
- ._Input-radio_py9hf_87 ._Input-radioInput_py9hf_149:checked ~ ._Input-radioInner_py9hf_104 {
222
+ ._Input-radio_bsxfo_93 ._Input-radioInput_bsxfo_155:checked ~ ._Input-radioInner_bsxfo_110 {
360
223
  background-color: var(--puck-color-azure-11);
361
224
  color: var(--puck-color-azure-04);
362
225
  font-weight: 500;
363
226
  }
364
- ._Input--readOnly_py9hf_76 ._Input-radioInput_py9hf_149:checked ~ ._Input-radioInner_py9hf_104 {
227
+ ._Input--readOnly_bsxfo_82 ._Input-radioInput_bsxfo_155:checked ~ ._Input-radioInner_bsxfo_110 {
365
228
  background-color: var(--puck-color-grey-11);
366
229
  color: var(--puck-color-grey-04);
367
230
  }
368
- ._Input-radio_py9hf_87 ._Input-radioInput_py9hf_149 {
231
+ ._Input-radio_bsxfo_93 ._Input-radioInput_bsxfo_155 {
369
232
  clip: rect(0 0 0 0);
370
233
  clip-path: inset(100%);
371
234
  height: 1px;
@@ -374,7 +237,7 @@ select._Input-input_py9hf_26:dir(rtl) {
374
237
  white-space: nowrap;
375
238
  width: 1px;
376
239
  }
377
- textarea._Input-input_py9hf_26 {
240
+ textarea._Input-input_bsxfo_26 {
378
241
  margin-bottom: -4px;
379
242
  }
380
243
 
@@ -1336,255 +1199,100 @@ body:has(._DropZone--isAnimating_1i2sv_68:empty) [data-puck-overlay] {
1336
1199
  display: none;
1337
1200
  }
1338
1201
 
1339
- /* css-module:/home/runner/work/puck/puck/packages/core/components/SidebarSection/styles.module.css/#css-module-data */
1340
- ._SidebarSection_8boj8_1 {
1341
- display: flex;
1202
+ /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Fields/styles.module.css/#css-module-data */
1203
+ ._PuckFields_10bh7_1 {
1342
1204
  position: relative;
1343
- flex-direction: column;
1344
- color: var(--puck-color-black);
1205
+ font-family: var(--puck-font-family);
1345
1206
  }
1346
- ._SidebarSection_8boj8_1:last-of-type {
1347
- flex-grow: 1;
1207
+ ._PuckFields--isLoading_10bh7_6 {
1208
+ min-height: 48px;
1348
1209
  }
1349
- ._SidebarSection-title_8boj8_12 {
1210
+ ._PuckFields-loadingOverlay_10bh7_10 {
1350
1211
  background: var(--puck-color-white);
1212
+ display: flex;
1213
+ justify-content: flex-end;
1214
+ align-items: flex-start;
1215
+ height: 100%;
1216
+ width: 100%;
1217
+ top: 0px;
1218
+ position: absolute;
1219
+ z-index: 1;
1220
+ pointer-events: all;
1221
+ box-sizing: border-box;
1222
+ opacity: 0.8;
1223
+ }
1224
+ ._PuckFields-loadingOverlayInner_10bh7_25 {
1225
+ display: flex;
1351
1226
  padding: 16px;
1352
- border-bottom: 1px solid var(--puck-color-grey-09);
1353
- border-top: 1px solid var(--puck-color-grey-09);
1354
- overflow-x: auto;
1227
+ position: sticky;
1228
+ top: 0;
1355
1229
  }
1356
- ._SidebarSection--noBorderTop_8boj8_20 > ._SidebarSection-title_8boj8_12 {
1357
- border-top: 0px;
1230
+ ._PuckFields-field_10bh7_32 * {
1231
+ box-sizing: border-box;
1358
1232
  }
1359
- ._SidebarSection-content_8boj8_24 {
1233
+ ._PuckFields--wrapFields_10bh7_36 ._PuckFields-field_10bh7_32 {
1234
+ color: var(--puck-color-grey-04);
1360
1235
  padding: 16px;
1236
+ padding-bottom: 12px;
1237
+ display: block;
1361
1238
  }
1362
- ._SidebarSection--noPadding_8boj8_28 > ._SidebarSection-content_8boj8_24 {
1363
- padding: 0px;
1239
+ ._PuckFields--wrapFields_10bh7_36 ._PuckFields-field_10bh7_32 + ._PuckFields-field_10bh7_32 {
1240
+ border-top: 1px solid var(--puck-color-grey-09);
1241
+ margin-top: 8px;
1364
1242
  }
1365
- ._SidebarSection--noPadding_8boj8_28 > ._SidebarSection-content_8boj8_24:last-child {
1366
- padding-bottom: 4px;
1243
+
1244
+ /* css-module:/home/runner/work/puck/puck/packages/core/components/ComponentList/styles.module.css/#css-module-data */
1245
+ ._ComponentList_1rrlt_1 {
1246
+ max-width: 100%;
1367
1247
  }
1368
- ._SidebarSection_8boj8_1:last-of-type ._SidebarSection-content_8boj8_24 {
1369
- border-bottom: none;
1370
- flex-grow: 1;
1248
+ ._ComponentList--isExpanded_1rrlt_5 + ._ComponentList_1rrlt_1 {
1249
+ margin-top: 12px;
1371
1250
  }
1372
- ._SidebarSection-breadcrumbLabel_8boj8_41 {
1373
- background: none;
1251
+ ._ComponentList-content_1rrlt_9 {
1252
+ display: none;
1253
+ }
1254
+ ._ComponentList--isExpanded_1rrlt_5 > ._ComponentList-content_1rrlt_9 {
1255
+ display: block;
1256
+ }
1257
+ ._ComponentList-title_1rrlt_17 {
1258
+ background-color: transparent;
1374
1259
  border: 0;
1375
- border-radius: 2px;
1376
- color: var(--puck-color-azure-04);
1260
+ color: var(--puck-color-grey-05);
1377
1261
  cursor: pointer;
1262
+ display: flex;
1378
1263
  font: inherit;
1379
- flex-shrink: 0;
1380
- padding: 0;
1381
- transition: color 50ms ease-in;
1264
+ font-size: var(--puck-font-size-xxxs);
1265
+ list-style: none;
1266
+ margin-bottom: 6px;
1267
+ padding: 8px;
1268
+ text-transform: uppercase;
1269
+ transition: background-color 50ms ease-in, color 50ms ease-in;
1270
+ gap: 4px;
1271
+ border-radius: 4px;
1272
+ width: 100%;
1382
1273
  }
1383
- ._SidebarSection-breadcrumbLabel_8boj8_41:focus-visible {
1274
+ ._ComponentList-title_1rrlt_17:focus-visible {
1384
1275
  outline: 2px solid var(--puck-color-azure-05);
1385
1276
  outline-offset: 2px;
1386
1277
  }
1387
1278
  @media (hover: hover) and (pointer: fine) {
1388
- ._SidebarSection-breadcrumbLabel_8boj8_41:hover {
1389
- color: var(--puck-color-azure-03);
1279
+ ._ComponentList-title_1rrlt_17:hover {
1280
+ background-color: var(--puck-color-azure-11);
1281
+ color: var(--puck-color-azure-04);
1390
1282
  transition: none;
1391
1283
  }
1392
1284
  }
1393
- ._SidebarSection-breadcrumbLabel_8boj8_41:active {
1394
- color: var(--puck-color-azure-02);
1285
+ ._ComponentList-title_1rrlt_17:active {
1286
+ background-color: var(--puck-color-azure-10);
1395
1287
  transition: none;
1396
1288
  }
1397
- ._SidebarSection-breadcrumbs_8boj8_70 {
1398
- align-items: center;
1399
- display: flex;
1400
- gap: 4px;
1289
+ ._ComponentList-titleIcon_1rrlt_53 {
1290
+ margin-inline-start: auto;
1401
1291
  }
1402
- ._SidebarSection-breadcrumb_8boj8_41 {
1403
- align-items: center;
1404
- display: flex;
1405
- gap: 4px;
1406
- }
1407
- ._SidebarSection-heading_8boj8_82 {
1408
- padding-inline-end: 16px;
1409
- }
1410
- ._SidebarSection-loadingOverlay_8boj8_86 {
1411
- background: var(--puck-color-white);
1412
- display: flex;
1413
- justify-content: center;
1414
- align-items: center;
1415
- height: 100%;
1416
- width: 100%;
1417
- top: 0;
1418
- position: absolute;
1419
- z-index: 1;
1420
- pointer-events: all;
1421
- box-sizing: border-box;
1422
- opacity: 0.8;
1423
- }
1424
-
1425
- /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/styles.module.css/#css-module-data */
1426
- ._Puck_vnhjy_19 {
1427
- --puck-space-px: 16px;
1428
- font-family: var(--puck-font-family);
1429
- overflow-x: hidden;
1430
- }
1431
- @media (min-width: 766px) {
1432
- ._Puck_vnhjy_19 {
1433
- overflow-x: auto;
1434
- }
1435
- }
1436
- ._Puck-portal_vnhjy_31 {
1437
- position: relative;
1438
- z-index: 2;
1439
- }
1440
- ._PuckLayout-inner_vnhjy_38 {
1441
- --puck-frame-width: auto;
1442
- --puck-side-bar-width: 0px;
1443
- display: grid;
1444
- grid-template-areas: "header header header" "left editor right";
1445
- grid-template-columns: 0 var(--puck-frame-width) 0;
1446
- grid-template-rows: min-content auto;
1447
- height: 100dvh;
1448
- position: relative;
1449
- z-index: 0;
1450
- }
1451
- ._PuckLayout--mounted_vnhjy_50 ._PuckLayout-inner_vnhjy_38 {
1452
- --puck-side-bar-width: 186px;
1453
- }
1454
- ._PuckLayout--leftSideBarVisible_vnhjy_54 ._PuckLayout-inner_vnhjy_38 {
1455
- grid-template-columns: var(--puck-side-bar-width) var(--puck-frame-width) 0;
1456
- }
1457
- ._PuckLayout--rightSideBarVisible_vnhjy_60 ._PuckLayout-inner_vnhjy_38 {
1458
- grid-template-columns: 0 var(--puck-frame-width) var(--puck-side-bar-width);
1459
- }
1460
- ._PuckLayout--leftSideBarVisible_vnhjy_54._PuckLayout--rightSideBarVisible_vnhjy_60 ._PuckLayout-inner_vnhjy_38 {
1461
- grid-template-columns: var(--puck-side-bar-width) var(--puck-frame-width) var(--puck-side-bar-width);
1462
- }
1463
- @media (min-width: 458px) {
1464
- ._PuckLayout-mounted_vnhjy_74 ._PuckLayout-inner_vnhjy_38 {
1465
- --puck-frame-width: minmax(266px, auto);
1466
- }
1467
- }
1468
- @media (min-width: 638px) {
1469
- ._PuckLayout_vnhjy_38 ._PuckLayout-inner_vnhjy_38 {
1470
- --puck-side-bar-width: minmax(186px, 250px);
1471
- }
1472
- }
1473
- @media (min-width: 766px) {
1474
- ._PuckLayout_vnhjy_38 ._PuckLayout-inner_vnhjy_38 {
1475
- --puck-frame-width: auto;
1476
- }
1477
- }
1478
- @media (min-width: 990px) {
1479
- ._PuckLayout_vnhjy_38 ._PuckLayout-inner_vnhjy_38 {
1480
- --puck-side-bar-width: 256px;
1481
- }
1482
- }
1483
- @media (min-width: 1198px) {
1484
- ._PuckLayout_vnhjy_38 ._PuckLayout-inner_vnhjy_38 {
1485
- --puck-side-bar-width: 274px;
1486
- }
1487
- }
1488
- @media (min-width: 1398px) {
1489
- ._PuckLayout_vnhjy_38 ._PuckLayout-inner_vnhjy_38 {
1490
- --puck-side-bar-width: 290px;
1491
- }
1492
- }
1493
- @media (min-width: 1598px) {
1494
- ._PuckLayout_vnhjy_38 ._PuckLayout-inner_vnhjy_38 {
1495
- --puck-side-bar-width: 320px;
1496
- }
1497
- }
1498
-
1499
- /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Fields/styles.module.css/#css-module-data */
1500
- ._PuckFields_10bh7_1 {
1501
- position: relative;
1502
- font-family: var(--puck-font-family);
1503
- }
1504
- ._PuckFields--isLoading_10bh7_6 {
1505
- min-height: 48px;
1506
- }
1507
- ._PuckFields-loadingOverlay_10bh7_10 {
1508
- background: var(--puck-color-white);
1509
- display: flex;
1510
- justify-content: flex-end;
1511
- align-items: flex-start;
1512
- height: 100%;
1513
- width: 100%;
1514
- top: 0px;
1515
- position: absolute;
1516
- z-index: 1;
1517
- pointer-events: all;
1518
- box-sizing: border-box;
1519
- opacity: 0.8;
1520
- }
1521
- ._PuckFields-loadingOverlayInner_10bh7_25 {
1522
- display: flex;
1523
- padding: 16px;
1524
- position: sticky;
1525
- top: 0;
1526
- }
1527
- ._PuckFields-field_10bh7_32 * {
1528
- box-sizing: border-box;
1529
- }
1530
- ._PuckFields--wrapFields_10bh7_36 ._PuckFields-field_10bh7_32 {
1531
- color: var(--puck-color-grey-04);
1532
- padding: 16px;
1533
- padding-bottom: 12px;
1534
- display: block;
1535
- }
1536
- ._PuckFields--wrapFields_10bh7_36 ._PuckFields-field_10bh7_32 + ._PuckFields-field_10bh7_32 {
1537
- border-top: 1px solid var(--puck-color-grey-09);
1538
- margin-top: 8px;
1539
- }
1540
-
1541
- /* css-module:/home/runner/work/puck/puck/packages/core/components/ComponentList/styles.module.css/#css-module-data */
1542
- ._ComponentList_1rrlt_1 {
1543
- max-width: 100%;
1544
- }
1545
- ._ComponentList--isExpanded_1rrlt_5 + ._ComponentList_1rrlt_1 {
1546
- margin-top: 12px;
1547
- }
1548
- ._ComponentList-content_1rrlt_9 {
1549
- display: none;
1550
- }
1551
- ._ComponentList--isExpanded_1rrlt_5 > ._ComponentList-content_1rrlt_9 {
1552
- display: block;
1553
- }
1554
- ._ComponentList-title_1rrlt_17 {
1555
- background-color: transparent;
1556
- border: 0;
1557
- color: var(--puck-color-grey-05);
1558
- cursor: pointer;
1559
- display: flex;
1560
- font: inherit;
1561
- font-size: var(--puck-font-size-xxxs);
1562
- list-style: none;
1563
- margin-bottom: 6px;
1564
- padding: 8px;
1565
- text-transform: uppercase;
1566
- transition: background-color 50ms ease-in, color 50ms ease-in;
1567
- gap: 4px;
1568
- border-radius: 4px;
1569
- width: 100%;
1570
- }
1571
- ._ComponentList-title_1rrlt_17:focus-visible {
1572
- outline: 2px solid var(--puck-color-azure-05);
1573
- outline-offset: 2px;
1574
- }
1575
- @media (hover: hover) and (pointer: fine) {
1576
- ._ComponentList-title_1rrlt_17:hover {
1577
- background-color: var(--puck-color-azure-11);
1578
- color: var(--puck-color-azure-04);
1579
- transition: none;
1580
- }
1581
- }
1582
- ._ComponentList-title_1rrlt_17:active {
1583
- background-color: var(--puck-color-azure-10);
1584
- transition: none;
1585
- }
1586
- ._ComponentList-titleIcon_1rrlt_53 {
1587
- margin-inline-start: auto;
1292
+
1293
+ /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Components/styles.module.css/#css-module-data */
1294
+ ._Components_uwdh8_1 {
1295
+ padding: 16px;
1588
1296
  }
1589
1297
 
1590
1298
  /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Preview/styles.module.css/#css-module-data */
@@ -1701,111 +1409,95 @@ body:has(._DropZone--isAnimating_1i2sv_68:empty) [data-puck-overlay] {
1701
1409
  margin-top: 4px;
1702
1410
  }
1703
1411
 
1704
- /* css-module:/home/runner/work/puck/puck/packages/core/components/ViewportControls/styles.module.css/#css-module-data */
1705
- ._ViewportControls_gejzr_1 {
1706
- display: flex;
1707
- background: var(--puck-color-grey-11);
1708
- box-sizing: border-box;
1709
- border-inline-start: 2px solid var(--puck-color-grey-11);
1710
- justify-content: center;
1711
- gap: 8px;
1712
- min-width: 358px;
1713
- padding-bottom: 16px;
1714
- padding-inline-start: var(--puck-space-px);
1715
- padding-inline-end: var(--puck-space-px);
1716
- z-index: 1;
1412
+ /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Outline/styles.module.css/#css-module-data */
1413
+ ._Outline_1rrni_1 {
1414
+ padding: 16px;
1717
1415
  }
1718
- ._ViewportControls-divider_gejzr_15 {
1719
- border-inline-end: 1px solid var(--puck-color-grey-09);
1720
- margin-inline-start: 8px;
1721
- margin-inline-end: 8px;
1416
+
1417
+ /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Layout/styles.module.css/#css-module-data */
1418
+ ._Puck_1pcou_19 {
1419
+ --puck-space-px: 16px;
1420
+ font-family: var(--puck-font-family);
1421
+ overflow-x: hidden;
1722
1422
  }
1723
- ._ViewportControls-zoomSelect_gejzr_21 {
1724
- appearance: none;
1725
- 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;
1726
- background-size: 10px;
1727
- background-position: calc(100% - 12px) calc(50% + 3px);
1728
- background-repeat: no-repeat;
1729
- border: 0;
1730
- font-size: var(--puck-font-size-xxxs);
1731
- padding: 0;
1732
- width: 96px;
1423
+ @media (min-width: 766px) {
1424
+ ._Puck_1pcou_19 {
1425
+ overflow-x: auto;
1426
+ }
1733
1427
  }
1734
- ._ViewportControls-zoomSelect_gejzr_21:dir(rtl) {
1735
- background-position: 12px calc(50% + 3px);
1428
+ ._Puck-portal_1pcou_31 {
1429
+ position: relative;
1430
+ z-index: 2;
1736
1431
  }
1737
- ._ViewportButton--isActive_gejzr_38 ._ViewportButton-inner_gejzr_38 {
1738
- color: var(--puck-color-azure-04);
1432
+ ._PuckLayout-inner_1pcou_36 {
1433
+ --puck-frame-width: auto;
1434
+ --puck-side-bar-width: 0px;
1435
+ --puck-side-nav-width: 68px;
1436
+ --puck-side-bar-width: 186px;
1437
+ --puck-left-side-bar-width: var( --puck-user-left-side-bar-width, --puck-side-bar-width );
1438
+ --puck-right-side-bar-width: var( --puck-user-right-side-bar-width, --puck-side-bar-width );
1439
+ display: grid;
1440
+ grid-template-areas: "header header header header" "sidenav left editor right";
1441
+ grid-template-columns: var(--puck-side-nav-width) 0 var(--puck-frame-width) 0;
1442
+ grid-template-rows: min-content auto;
1443
+ height: 100dvh;
1444
+ position: relative;
1445
+ z-index: 0;
1739
1446
  }
1740
-
1741
- /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Canvas/styles.module.css/#css-module-data */
1742
- ._PuckCanvas_18jay_1 {
1743
- background: var(--puck-color-grey-11);
1744
- display: flex;
1745
- grid-area: editor;
1746
- flex-direction: column;
1747
- padding: var(--puck-space-px);
1748
- overflow: auto;
1447
+ ._PuckLayout--leftSideBarVisible_1pcou_59 ._PuckLayout-inner_1pcou_36 {
1448
+ grid-template-columns: var(--puck-side-nav-width) var(--puck-left-side-bar-width) var( --puck-frame-width ) 0;
1749
1449
  }
1750
- @media (min-width: 1198px) {
1751
- ._PuckCanvas_18jay_1 {
1752
- padding: calc(var(--puck-space-px) * 1.5);
1753
- padding-top: var(--puck-space-px);
1754
- }
1755
- ._PuckCanvas_18jay_1:not(._PuckCanvas_18jay_1:has(._PuckCanvas-controls_18jay_16)) {
1756
- padding-top: calc(var(--puck-space-px) * 1.5);
1757
- }
1450
+ ._PuckLayout--rightSideBarVisible_1pcou_67 ._PuckLayout-inner_1pcou_36 {
1451
+ grid-template-columns: var(--puck-side-nav-width) 0 var(--puck-frame-width) var(--puck-side-bar-width);
1758
1452
  }
1759
- ._PuckCanvas-inner_18jay_21 {
1760
- display: flex;
1761
- height: 100%;
1762
- justify-content: center;
1763
- min-width: 358px;
1764
- position: relative;
1765
- width: 100%;
1453
+ ._PuckLayout--leftSideBarVisible_1pcou_59._PuckLayout--rightSideBarVisible_1pcou_67 ._PuckLayout-inner_1pcou_36 {
1454
+ grid-template-columns: var(--puck-side-nav-width) var(--puck-left-side-bar-width) var( --puck-frame-width ) var(--puck-right-side-bar-width);
1766
1455
  }
1767
- ._PuckCanvas-root_18jay_30 {
1768
- background: white;
1769
- border: 1px solid var(--puck-color-grey-09);
1770
- box-sizing: content-box;
1771
- min-width: 321px;
1772
- position: absolute;
1773
- pointer-events: none;
1774
- transform-origin: top;
1775
- top: 0;
1776
- bottom: 0;
1777
- opacity: 0;
1456
+ @media (min-width: 458px) {
1457
+ ._PuckLayout-inner_1pcou_36 {
1458
+ --puck-frame-width: minmax(266px, auto);
1459
+ }
1778
1460
  }
1779
- @media (min-width: 1198px) {
1780
- ._PuckCanvas-root_18jay_30 {
1781
- min-width: unset;
1461
+ @media (min-width: 638px) {
1462
+ ._PuckLayout_1pcou_36 ._PuckLayout-inner_1pcou_36 {
1463
+ --puck-side-bar-width: minmax(186px, 250px);
1782
1464
  }
1783
1465
  }
1784
- @media (prefers-reduced-motion: reduce) {
1785
- ._PuckCanvas-root_18jay_30 {
1786
- transition: none !important;
1466
+ @media (min-width: 766px) {
1467
+ ._PuckLayout_1pcou_36 ._PuckLayout-inner_1pcou_36 {
1468
+ --puck-frame-width: auto;
1787
1469
  }
1788
1470
  }
1789
- ._PuckCanvas--ready_18jay_55 ._PuckCanvas-root_18jay_30 {
1790
- pointer-events: unset;
1791
- opacity: 1;
1471
+ @media (min-width: 990px) {
1472
+ ._PuckLayout_1pcou_36 ._PuckLayout-inner_1pcou_36 {
1473
+ --puck-side-bar-width: 256px;
1474
+ }
1792
1475
  }
1793
- ._PuckCanvas-loader_18jay_60 {
1794
- align-items: center;
1795
- color: var(--puck-color-grey-06);
1796
- display: flex;
1797
- height: 100%;
1798
- justify-content: center;
1799
- transition: opacity 250ms ease-out;
1800
- opacity: 0;
1476
+ @media (min-width: 1198px) {
1477
+ ._PuckLayout_1pcou_36 ._PuckLayout-inner_1pcou_36 {
1478
+ --puck-side-bar-width: 274px;
1479
+ }
1801
1480
  }
1802
- ._PuckCanvas--showLoader_18jay_70 ._PuckCanvas-loader_18jay_60 {
1803
- opacity: 1;
1481
+ @media (min-width: 1398px) {
1482
+ ._PuckLayout_1pcou_36 ._PuckLayout-inner_1pcou_36 {
1483
+ --puck-side-bar-width: 290px;
1484
+ }
1804
1485
  }
1805
- ._PuckCanvas--showLoader_18jay_70._PuckCanvas--ready_18jay_55 ._PuckCanvas-loader_18jay_60 {
1806
- opacity: 0;
1807
- height: 0;
1808
- transition: none;
1486
+ @media (min-width: 1598px) {
1487
+ ._PuckLayout_1pcou_36 ._PuckLayout-inner_1pcou_36 {
1488
+ --puck-side-bar-width: 320px;
1489
+ }
1490
+ }
1491
+ ._PuckLayout-nav_1pcou_124 {
1492
+ border-right: 1px solid var(--puck-color-grey-09);
1493
+ background-color: var(--puck-color-grey-12);
1494
+ }
1495
+ ._PuckPluginTab_1pcou_129 {
1496
+ display: none;
1497
+ height: 100%;
1498
+ }
1499
+ ._PuckPluginTab--visible_1pcou_134 {
1500
+ display: block;
1809
1501
  }
1810
1502
 
1811
1503
  /* css-module:/home/runner/work/puck/puck/packages/core/components/MenuBar/styles.module.css/#css-module-data */
@@ -1853,7 +1545,7 @@ body:has(._DropZone--isAnimating_1i2sv_68:empty) [data-puck-overlay] {
1853
1545
  }
1854
1546
 
1855
1547
  /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Header/styles.module.css/#css-module-data */
1856
- ._PuckHeader_15xnq_1 {
1548
+ ._PuckHeader_1ehbp_1 {
1857
1549
  background: var(--puck-color-white);
1858
1550
  border-bottom: 1px solid var(--puck-color-grey-09);
1859
1551
  color: var(--puck-color-black);
@@ -1861,8 +1553,14 @@ body:has(._DropZone--isAnimating_1i2sv_68:empty) [data-puck-overlay] {
1861
1553
  position: relative;
1862
1554
  max-width: 100vw;
1863
1555
  }
1864
- ._PuckHeader-inner_15xnq_10 {
1556
+ @media (min-width: 638px) {
1557
+ ._PuckHeader_1ehbp_1 {
1558
+ padding-left: 67px;
1559
+ }
1560
+ }
1561
+ ._PuckHeader-inner_1ehbp_16 {
1865
1562
  align-items: end;
1563
+ border-left: 1px solid var(--puck-color-grey-09);
1866
1564
  display: grid;
1867
1565
  gap: var(--puck-space-px);
1868
1566
  grid-template-areas: "left middle right";
@@ -1870,61 +1568,261 @@ body:has(._DropZone--isAnimating_1i2sv_68:empty) [data-puck-overlay] {
1870
1568
  grid-template-rows: auto;
1871
1569
  padding: var(--puck-space-px);
1872
1570
  }
1873
- ._PuckHeader-toggle_15xnq_20 {
1571
+ @media (min-width: 638px) {
1572
+ ._PuckHeader-inner_1ehbp_16 {
1573
+ border-left: 1px solid var(--puck-color-grey-09);
1574
+ }
1575
+ }
1576
+ ._PuckHeader-toggle_1ehbp_33 {
1874
1577
  color: var(--puck-color-grey-05);
1875
1578
  display: flex;
1876
1579
  margin-inline-start: -4px;
1877
1580
  padding-top: 2px;
1878
1581
  }
1879
- ._PuckHeader--rightSideBarVisible_15xnq_27 ._PuckHeader-rightSideBarToggle_15xnq_27,
1880
- ._PuckHeader--leftSideBarVisible_15xnq_28 ._PuckHeader-leftSideBarToggle_15xnq_28 {
1582
+ ._PuckHeader--rightSideBarVisible_1ehbp_40 ._PuckHeader-rightSideBarToggle_1ehbp_40,
1583
+ ._PuckHeader--leftSideBarVisible_1ehbp_41 ._PuckHeader-leftSideBarToggle_1ehbp_41 {
1881
1584
  color: var(--puck-color-black);
1882
1585
  }
1883
- ._PuckHeader-title_15xnq_32 {
1586
+ ._PuckHeader-title_1ehbp_45 {
1884
1587
  align-self: center;
1885
1588
  }
1886
- ._PuckHeader-path_15xnq_36 {
1589
+ ._PuckHeader-path_1ehbp_49 {
1887
1590
  font-family: var(--puck-font-family-monospaced);
1888
1591
  font-size: var(--puck-font-size-xxs);
1889
1592
  font-weight: normal;
1890
1593
  word-break: break-all;
1891
1594
  }
1892
- ._PuckHeader-tools_15xnq_43 {
1595
+ ._PuckHeader-tools_1ehbp_56 {
1893
1596
  display: flex;
1894
1597
  gap: 16px;
1895
1598
  justify-content: flex-end;
1896
1599
  }
1897
- ._PuckHeader-menuButton_15xnq_49 {
1600
+ ._PuckHeader-menuButton_1ehbp_62 {
1898
1601
  color: var(--puck-color-grey-05);
1899
1602
  margin-inline-start: -4px;
1900
1603
  }
1901
- ._PuckHeader--menuOpen_15xnq_54 ._PuckHeader-menuButton_15xnq_49 {
1604
+ ._PuckHeader--menuOpen_1ehbp_67 ._PuckHeader-menuButton_1ehbp_62 {
1902
1605
  color: var(--puck-color-black);
1903
1606
  }
1904
1607
  @media (min-width: 638px) {
1905
- ._PuckHeader-menuButton_15xnq_49 {
1608
+ ._PuckHeader-menuButton_1ehbp_62 {
1906
1609
  display: none;
1907
1610
  }
1908
1611
  }
1909
1612
 
1910
- /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/ResizeHandle/styles.module.css/#css-module-data */
1911
- ._ResizeHandle_v7w0r_1 {
1613
+ /* css-module:/home/runner/work/puck/puck/packages/core/components/SidebarSection/styles.module.css/#css-module-data */
1614
+ ._SidebarSection_8boj8_1 {
1615
+ display: flex;
1616
+ position: relative;
1617
+ flex-direction: column;
1618
+ color: var(--puck-color-black);
1619
+ }
1620
+ ._SidebarSection_8boj8_1:last-of-type {
1621
+ flex-grow: 1;
1622
+ }
1623
+ ._SidebarSection-title_8boj8_12 {
1624
+ background: var(--puck-color-white);
1625
+ padding: 16px;
1626
+ border-bottom: 1px solid var(--puck-color-grey-09);
1627
+ border-top: 1px solid var(--puck-color-grey-09);
1628
+ overflow-x: auto;
1629
+ }
1630
+ ._SidebarSection--noBorderTop_8boj8_20 > ._SidebarSection-title_8boj8_12 {
1631
+ border-top: 0px;
1632
+ }
1633
+ ._SidebarSection-content_8boj8_24 {
1634
+ padding: 16px;
1635
+ }
1636
+ ._SidebarSection--noPadding_8boj8_28 > ._SidebarSection-content_8boj8_24 {
1637
+ padding: 0px;
1638
+ }
1639
+ ._SidebarSection--noPadding_8boj8_28 > ._SidebarSection-content_8boj8_24:last-child {
1640
+ padding-bottom: 4px;
1641
+ }
1642
+ ._SidebarSection_8boj8_1:last-of-type ._SidebarSection-content_8boj8_24 {
1643
+ border-bottom: none;
1644
+ flex-grow: 1;
1645
+ }
1646
+ ._SidebarSection-breadcrumbLabel_8boj8_41 {
1647
+ background: none;
1648
+ border: 0;
1649
+ border-radius: 2px;
1650
+ color: var(--puck-color-azure-04);
1651
+ cursor: pointer;
1652
+ font: inherit;
1653
+ flex-shrink: 0;
1654
+ padding: 0;
1655
+ transition: color 50ms ease-in;
1656
+ }
1657
+ ._SidebarSection-breadcrumbLabel_8boj8_41:focus-visible {
1658
+ outline: 2px solid var(--puck-color-azure-05);
1659
+ outline-offset: 2px;
1660
+ }
1661
+ @media (hover: hover) and (pointer: fine) {
1662
+ ._SidebarSection-breadcrumbLabel_8boj8_41:hover {
1663
+ color: var(--puck-color-azure-03);
1664
+ transition: none;
1665
+ }
1666
+ }
1667
+ ._SidebarSection-breadcrumbLabel_8boj8_41:active {
1668
+ color: var(--puck-color-azure-02);
1669
+ transition: none;
1670
+ }
1671
+ ._SidebarSection-breadcrumbs_8boj8_70 {
1672
+ align-items: center;
1673
+ display: flex;
1674
+ gap: 4px;
1675
+ }
1676
+ ._SidebarSection-breadcrumb_8boj8_41 {
1677
+ align-items: center;
1678
+ display: flex;
1679
+ gap: 4px;
1680
+ }
1681
+ ._SidebarSection-heading_8boj8_82 {
1682
+ padding-inline-end: 16px;
1683
+ }
1684
+ ._SidebarSection-loadingOverlay_8boj8_86 {
1685
+ background: var(--puck-color-white);
1686
+ display: flex;
1687
+ justify-content: center;
1688
+ align-items: center;
1689
+ height: 100%;
1690
+ width: 100%;
1691
+ top: 0;
1912
1692
  position: absolute;
1913
- width: 5px;
1693
+ z-index: 1;
1694
+ pointer-events: all;
1695
+ box-sizing: border-box;
1696
+ opacity: 0.8;
1697
+ }
1698
+
1699
+ /* css-module:/home/runner/work/puck/puck/packages/core/components/ViewportControls/styles.module.css/#css-module-data */
1700
+ ._ViewportControls_gejzr_1 {
1701
+ display: flex;
1702
+ background: var(--puck-color-grey-11);
1703
+ box-sizing: border-box;
1704
+ border-inline-start: 2px solid var(--puck-color-grey-11);
1705
+ justify-content: center;
1706
+ gap: 8px;
1707
+ min-width: 358px;
1708
+ padding-bottom: 16px;
1709
+ padding-inline-start: var(--puck-space-px);
1710
+ padding-inline-end: var(--puck-space-px);
1711
+ z-index: 1;
1712
+ }
1713
+ ._ViewportControls-divider_gejzr_15 {
1714
+ border-inline-end: 1px solid var(--puck-color-grey-09);
1715
+ margin-inline-start: 8px;
1716
+ margin-inline-end: 8px;
1717
+ }
1718
+ ._ViewportControls-zoomSelect_gejzr_21 {
1719
+ appearance: none;
1720
+ 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;
1721
+ background-size: 10px;
1722
+ background-position: calc(100% - 12px) calc(50% + 3px);
1723
+ background-repeat: no-repeat;
1724
+ border: 0;
1725
+ font-size: var(--puck-font-size-xxxs);
1726
+ padding: 0;
1727
+ width: 96px;
1728
+ }
1729
+ ._ViewportControls-zoomSelect_gejzr_21:dir(rtl) {
1730
+ background-position: 12px calc(50% + 3px);
1731
+ }
1732
+ ._ViewportButton--isActive_gejzr_38 ._ViewportButton-inner_gejzr_38 {
1733
+ color: var(--puck-color-azure-04);
1734
+ }
1735
+
1736
+ /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Canvas/styles.module.css/#css-module-data */
1737
+ ._PuckCanvas_18jay_1 {
1738
+ background: var(--puck-color-grey-11);
1739
+ display: flex;
1740
+ grid-area: editor;
1741
+ flex-direction: column;
1742
+ padding: var(--puck-space-px);
1743
+ overflow: auto;
1744
+ }
1745
+ @media (min-width: 1198px) {
1746
+ ._PuckCanvas_18jay_1 {
1747
+ padding: calc(var(--puck-space-px) * 1.5);
1748
+ padding-top: var(--puck-space-px);
1749
+ }
1750
+ ._PuckCanvas_18jay_1:not(._PuckCanvas_18jay_1:has(._PuckCanvas-controls_18jay_16)) {
1751
+ padding-top: calc(var(--puck-space-px) * 1.5);
1752
+ }
1753
+ }
1754
+ ._PuckCanvas-inner_18jay_21 {
1755
+ display: flex;
1914
1756
  height: 100%;
1915
- cursor: col-resize;
1916
- z-index: 10;
1917
- background: transparent;
1757
+ justify-content: center;
1758
+ min-width: 358px;
1759
+ position: relative;
1760
+ width: 100%;
1761
+ }
1762
+ ._PuckCanvas-root_18jay_30 {
1763
+ background: white;
1764
+ border: 1px solid var(--puck-color-grey-09);
1765
+ box-sizing: content-box;
1766
+ min-width: 321px;
1767
+ position: absolute;
1768
+ pointer-events: none;
1769
+ transform-origin: top;
1918
1770
  top: 0;
1771
+ bottom: 0;
1772
+ opacity: 0;
1773
+ }
1774
+ @media (min-width: 1198px) {
1775
+ ._PuckCanvas-root_18jay_30 {
1776
+ min-width: unset;
1777
+ }
1778
+ }
1779
+ @media (prefers-reduced-motion: reduce) {
1780
+ ._PuckCanvas-root_18jay_30 {
1781
+ transition: none !important;
1782
+ }
1783
+ }
1784
+ ._PuckCanvas--ready_18jay_55 ._PuckCanvas-root_18jay_30 {
1785
+ pointer-events: unset;
1786
+ opacity: 1;
1787
+ }
1788
+ ._PuckCanvas-loader_18jay_60 {
1789
+ align-items: center;
1790
+ color: var(--puck-color-grey-06);
1791
+ display: flex;
1792
+ height: 100%;
1793
+ justify-content: center;
1794
+ transition: opacity 250ms ease-out;
1795
+ opacity: 0;
1919
1796
  }
1920
- ._ResizeHandle_v7w0r_1:hover {
1921
- background: rgba(0, 0, 0, 0.1);
1797
+ ._PuckCanvas--showLoader_18jay_70 ._PuckCanvas-loader_18jay_60 {
1798
+ opacity: 1;
1922
1799
  }
1923
- ._ResizeHandle--left_v7w0r_15 {
1924
- right: -3px;
1800
+ ._PuckCanvas--showLoader_18jay_70._PuckCanvas--ready_18jay_55 ._PuckCanvas-loader_18jay_60 {
1801
+ opacity: 0;
1802
+ height: 0;
1803
+ transition: none;
1925
1804
  }
1926
- ._ResizeHandle--right_v7w0r_19 {
1927
- left: -3px;
1805
+
1806
+ /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/ResizeHandle/styles.module.css/#css-module-data */
1807
+ @media (min-width: 766px) {
1808
+ ._ResizeHandle_144bf_2 {
1809
+ position: absolute;
1810
+ width: 5px;
1811
+ height: 100%;
1812
+ cursor: col-resize;
1813
+ z-index: 10;
1814
+ background: transparent;
1815
+ top: 0;
1816
+ }
1817
+ ._ResizeHandle_144bf_2:hover {
1818
+ background: rgba(0, 0, 0, 0.1);
1819
+ }
1820
+ ._ResizeHandle--left_144bf_16 {
1821
+ right: -3px;
1822
+ }
1823
+ ._ResizeHandle--right_144bf_20 {
1824
+ left: -3px;
1825
+ }
1928
1826
  }
1929
1827
 
1930
1828
  /* components/Puck/components/ResizeHandle/styles.css */
@@ -1967,3 +1865,240 @@ body:has(._DropZone--isAnimating_1i2sv_68:empty) [data-puck-overlay] {
1967
1865
  grid-area: right;
1968
1866
  justify-self: start;
1969
1867
  }
1868
+
1869
+ /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Nav/styles.module.css/#css-module-data */
1870
+ ._Nav-list_b6txo_1 {
1871
+ list-style: none;
1872
+ margin: 0;
1873
+ padding: 0;
1874
+ }
1875
+ ._NavSection_b6txo_7 {
1876
+ padding: 16px;
1877
+ }
1878
+ ._NavSection_b6txo_7:first-of-type {
1879
+ padding-top: 32px;
1880
+ }
1881
+ ._Nav--slim_b6txo_15 ._NavSection_b6txo_7 {
1882
+ padding-left: 0;
1883
+ padding-right: 0;
1884
+ }
1885
+ ._Nav--slim_b6txo_15 ._NavSection_b6txo_7 + ._NavSection_b6txo_7 {
1886
+ border-top: 1px solid var(--puck-color-grey-09);
1887
+ }
1888
+ ._NavSection-list_b6txo_24 {
1889
+ display: flex;
1890
+ flex-direction: column;
1891
+ list-style: none;
1892
+ margin: 0;
1893
+ padding: 0;
1894
+ }
1895
+ ._Nav--slim_b6txo_15 ._NavSection-list_b6txo_24 {
1896
+ gap: 16px;
1897
+ }
1898
+ ._NavSection-title_b6txo_36 {
1899
+ font-weight: 700;
1900
+ margin-bottom: 8px;
1901
+ padding-left: 8px;
1902
+ padding-right: 8px;
1903
+ }
1904
+ ._Nav--slim_b6txo_15 ._NavSection-title_b6txo_36 {
1905
+ opacity: 0;
1906
+ }
1907
+ ._NavItem-link_b6txo_47 {
1908
+ align-items: center;
1909
+ color: var(--puck-color-grey-03);
1910
+ display: flex;
1911
+ gap: 8px;
1912
+ text-decoration: none;
1913
+ cursor: pointer;
1914
+ border-radius: 4px;
1915
+ padding: 8px 4px;
1916
+ }
1917
+ ._Nav--slim_b6txo_15 ._NavItem-link_b6txo_47 {
1918
+ border-left: 4px solid transparent;
1919
+ border-right: 4px solid transparent;
1920
+ border-radius: 0;
1921
+ flex-direction: column;
1922
+ font-size: var(--puck-font-size-xxxs);
1923
+ }
1924
+ ._NavItem-linkIcon_b6txo_67 {
1925
+ height: 24px;
1926
+ width: 24px;
1927
+ }
1928
+ ._NavItem--active_b6txo_72 > ._NavItem-link_b6txo_47 {
1929
+ background-color: var(--puck-color-azure-10);
1930
+ color: var(--puck-color-azure-04);
1931
+ font-weight: 600;
1932
+ }
1933
+ ._Nav--slim_b6txo_15 ._NavItem--active_b6txo_72 > ._NavItem-link_b6txo_47 {
1934
+ background-color: transparent;
1935
+ border-right-color: var(--puck-color-azure-04);
1936
+ border-top-right-radius: 0;
1937
+ border-bottom-right-radius: 0;
1938
+ font-weight: 600;
1939
+ }
1940
+ ._NavItem_b6txo_47:not(._NavItem--active_b6txo_72) > ._NavItem-link_b6txo_47:hover {
1941
+ background-color: var(--puck-color-azure-11);
1942
+ color: var(--puck-color-azure-04);
1943
+ }
1944
+ ._NavItem-list_b6txo_91 {
1945
+ border-left: 1px solid var(--puck-color-grey-09);
1946
+ display: flex;
1947
+ flex-direction: column;
1948
+ list-style: none;
1949
+ margin-top: 8px;
1950
+ margin-left: 4px;
1951
+ padding: 0;
1952
+ padding-left: 8px;
1953
+ }
1954
+ ._Nav--slim_b6txo_15 ._NavItem-list_b6txo_91 {
1955
+ border-left: 0;
1956
+ padding-left: 0;
1957
+ margin-left: 0;
1958
+ }
1959
+
1960
+ /* styles/color.css */
1961
+ :root {
1962
+ --puck-color-rose-01: #4a001c;
1963
+ --puck-color-rose-02: #670833;
1964
+ --puck-color-rose-03: #87114c;
1965
+ --puck-color-rose-04: #a81a66;
1966
+ --puck-color-rose-05: #bc5089;
1967
+ --puck-color-rose-06: #cc7ca5;
1968
+ --puck-color-rose-07: #d89aba;
1969
+ --puck-color-rose-08: #e3b8cf;
1970
+ --puck-color-rose-09: #efd6e3;
1971
+ --puck-color-rose-10: #f6eaf1;
1972
+ --puck-color-rose-11: #faf4f8;
1973
+ --puck-color-rose-12: #fef8fc;
1974
+ --puck-color-azure-01: #00175d;
1975
+ --puck-color-azure-02: #002c77;
1976
+ --puck-color-azure-03: #014292;
1977
+ --puck-color-azure-04: #0158ad;
1978
+ --puck-color-azure-05: #3479be;
1979
+ --puck-color-azure-06: #6499cf;
1980
+ --puck-color-azure-07: #88b0da;
1981
+ --puck-color-azure-08: #abc7e5;
1982
+ --puck-color-azure-09: #cfdff0;
1983
+ --puck-color-azure-10: #e7eef7;
1984
+ --puck-color-azure-11: #f3f6fb;
1985
+ --puck-color-azure-12: #f7faff;
1986
+ --puck-color-green-01: #002000;
1987
+ --puck-color-green-02: #043604;
1988
+ --puck-color-green-03: #084e08;
1989
+ --puck-color-green-04: #0c680c;
1990
+ --puck-color-green-05: #1d882f;
1991
+ --puck-color-green-06: #2faa53;
1992
+ --puck-color-green-07: #56c16f;
1993
+ --puck-color-green-08: #7dd78b;
1994
+ --puck-color-green-09: #b8e8bf;
1995
+ --puck-color-green-10: #ddf3e0;
1996
+ --puck-color-green-11: #eff8f0;
1997
+ --puck-color-green-12: #f3fcf4;
1998
+ --puck-color-yellow-01: #211000;
1999
+ --puck-color-yellow-02: #362700;
2000
+ --puck-color-yellow-03: #4c4000;
2001
+ --puck-color-yellow-04: #645a00;
2002
+ --puck-color-yellow-05: #877614;
2003
+ --puck-color-yellow-06: #ab9429;
2004
+ --puck-color-yellow-07: #bfac4e;
2005
+ --puck-color-yellow-08: #d4c474;
2006
+ --puck-color-yellow-09: #e6deb1;
2007
+ --puck-color-yellow-10: #f3efd9;
2008
+ --puck-color-yellow-11: #f9f7ed;
2009
+ --puck-color-yellow-12: #fcfaf0;
2010
+ --puck-color-red-01: #4c0000;
2011
+ --puck-color-red-02: #6a0a10;
2012
+ --puck-color-red-03: #8a1422;
2013
+ --puck-color-red-04: #ac1f35;
2014
+ --puck-color-red-05: #bf5366;
2015
+ --puck-color-red-06: #ce7e8e;
2016
+ --puck-color-red-07: #d99ca8;
2017
+ --puck-color-red-08: #e4b9c2;
2018
+ --puck-color-red-09: #efd7db;
2019
+ --puck-color-red-10: #f6eaec;
2020
+ --puck-color-red-11: #faf4f5;
2021
+ --puck-color-red-12: #fff9fa;
2022
+ --puck-color-grey-01: #181818;
2023
+ --puck-color-grey-02: #292929;
2024
+ --puck-color-grey-03: #404040;
2025
+ --puck-color-grey-04: #5a5a5a;
2026
+ --puck-color-grey-05: #767676;
2027
+ --puck-color-grey-06: #949494;
2028
+ --puck-color-grey-07: #ababab;
2029
+ --puck-color-grey-08: #c3c3c3;
2030
+ --puck-color-grey-09: #dcdcdc;
2031
+ --puck-color-grey-10: #efefef;
2032
+ --puck-color-grey-11: #f5f5f5;
2033
+ --puck-color-grey-12: #fafafa;
2034
+ --puck-color-black: #000000;
2035
+ --puck-color-white: #ffffff;
2036
+ }
2037
+
2038
+ /* styles/typography.css */
2039
+ :root {
2040
+ --puck-font-size-scale-base-unitless: 12;
2041
+ --puck-font-size-xxxs-unitless: 12;
2042
+ --puck-font-size-xxs-unitless: 14;
2043
+ --puck-font-size-xs-unitless: 16;
2044
+ --puck-font-size-s-unitless: 18;
2045
+ --puck-font-size-m-unitless: 21;
2046
+ --puck-font-size-l-unitless: 24;
2047
+ --puck-font-size-xl-unitless: 28;
2048
+ --puck-font-size-xxl-unitless: 36;
2049
+ --puck-font-size-xxxl-unitless: 48;
2050
+ --puck-font-size-xxxxl-unitless: 56;
2051
+ --puck-font-size-xxxs: calc(1rem * var(--puck-font-size-xxxs-unitless) / 16);
2052
+ --puck-font-size-xxs: calc(1rem * var(--puck-font-size-xxs-unitless) / 16);
2053
+ --puck-font-size-xs: calc(1rem * var(--puck-font-size-xs-unitless) / 16);
2054
+ --puck-font-size-s: calc(1rem * var(--puck-font-size-s-unitless) / 16);
2055
+ --puck-font-size-m: calc(1rem * var(--puck-font-size-m-unitless) / 16);
2056
+ --puck-font-size-l: calc(1rem * var(--puck-font-size-l-unitless) / 16);
2057
+ --puck-font-size-xl: calc(1rem * var(--puck-font-size-xl-unitless) / 16);
2058
+ --puck-font-size-xxl: calc(1rem * var(--puck-font-size-xxl-unitless) / 16);
2059
+ --puck-font-size-xxxl: calc(1rem * var(--puck-font-size-xxxl-unitless) / 16);
2060
+ --puck-font-size-xxxxl: calc( 1rem * var(--puck-font-size-xxxxl-unitless) / 16 );
2061
+ --puck-font-size-base: var(--puck-font-size-xs);
2062
+ --line-height-reset: 1;
2063
+ --line-height-xs: calc( var(--space-m-unitless) / var(--puck-font-size-m-unitless) );
2064
+ --line-height-s: calc( var(--space-m-unitless) / var(--puck-font-size-s-unitless) );
2065
+ --line-height-m: calc( var(--space-m-unitless) / var(--puck-font-size-xs-unitless) );
2066
+ --line-height-l: calc( var(--space-m-unitless) / var(--puck-font-size-xxs-unitless) );
2067
+ --line-height-xl: calc( var(--space-m-unitless) / var(--puck-font-size-scale-base-unitless) );
2068
+ --line-height-base: var(--line-height-m);
2069
+ --fallback-font-stack:
2070
+ -apple-system,
2071
+ BlinkMacSystemFont,
2072
+ Segoe UI,
2073
+ Helvetica Neue,
2074
+ sans-serif,
2075
+ Apple Color Emoji,
2076
+ Segoe UI Emoji,
2077
+ Segoe UI Symbol;
2078
+ --puck-font-family: Inter, var(--fallback-font-stack);
2079
+ --puck-font-family-monospaced:
2080
+ ui-monospace,
2081
+ "Cascadia Code",
2082
+ "Source Code Pro",
2083
+ Menlo,
2084
+ Consolas,
2085
+ "DejaVu Sans Mono",
2086
+ monospace;
2087
+ }
2088
+ @supports (font-variation-settings: normal) {
2089
+ :root {
2090
+ --puck-font-family: InterVariable, var(--fallback-font-stack);
2091
+ }
2092
+ }
2093
+
2094
+ /* bundle/core.css */
2095
+ #frame-root {
2096
+ height: 1px;
2097
+ min-height: 100vh;
2098
+ }
2099
+ [data-puck-entry] {
2100
+ position: relative;
2101
+ z-index: 0;
2102
+ }
2103
+
2104
+ /* bundle/index.css */