@measured/puck 0.20.0-canary.6dace1cf → 0.20.0-canary.77cef35d

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
 
@@ -1150,27 +1013,31 @@ textarea._Input-input_py9hf_26 {
1150
1013
  }
1151
1014
 
1152
1015
  /* css-module:/home/runner/work/puck/puck/packages/core/components/DraggableComponent/styles.module.css/#css-module-data */
1153
- ._DraggableComponent_qzbgx_1 {
1016
+ ._DraggableComponent_1vaqy_1 {
1154
1017
  position: absolute;
1155
1018
  pointer-events: none;
1156
1019
  --overlay-background: color-mix( in srgb, var(--puck-color-azure-08) 30%, transparent );
1157
1020
  }
1158
- ._DraggableComponent-overlay_qzbgx_12 {
1159
- cursor: pointer;
1021
+ ._DraggableComponent-overlayWrapper_1vaqy_12 {
1160
1022
  height: 100%;
1161
1023
  width: 100%;
1162
1024
  top: 0;
1163
- outline: 2px var(--puck-color-azure-09) solid;
1164
- outline-offset: -2px;
1165
1025
  position: absolute;
1166
1026
  pointer-events: none;
1167
1027
  box-sizing: border-box;
1168
1028
  z-index: 1;
1169
1029
  }
1170
- ._DraggableComponent_qzbgx_1:focus-visible > ._DraggableComponent-overlay_qzbgx_12 {
1030
+ ._DraggableComponent-overlay_1vaqy_12 {
1031
+ cursor: pointer;
1032
+ height: 100%;
1033
+ outline: 2px var(--puck-color-azure-09) solid;
1034
+ outline-offset: -2px;
1035
+ width: 100%;
1036
+ }
1037
+ ._DraggableComponent_1vaqy_1:focus-visible > ._DraggableComponent-overlayWrapper_1vaqy_12 {
1171
1038
  outline: 1px solid var(--puck-color-azure-05);
1172
1039
  }
1173
- ._DraggableComponent-loadingOverlay_qzbgx_29 {
1040
+ ._DraggableComponent-loadingOverlay_1vaqy_34 {
1174
1041
  background: var(--puck-color-white);
1175
1042
  color: var(--puck-color-grey-03);
1176
1043
  border-radius: 4px;
@@ -1185,29 +1052,27 @@ textarea._Input-input_py9hf_26 {
1185
1052
  opacity: 0.8;
1186
1053
  z-index: 1;
1187
1054
  }
1188
- ._DraggableComponent--hover_qzbgx_45:not(._DraggableComponent--isLocked_qzbgx_45) > ._DraggableComponent-overlay_qzbgx_12 {
1055
+ ._DraggableComponent--hover_1vaqy_50 > ._DraggableComponent-overlayWrapper_1vaqy_12 > ._DraggableComponent-overlay_1vaqy_12 {
1189
1056
  background: var(--overlay-background);
1190
- }
1191
- ._DraggableComponent--hover_qzbgx_45 > ._DraggableComponent-overlay_qzbgx_12 {
1192
1057
  outline: 2px var(--puck-color-azure-09) solid;
1193
1058
  }
1194
- ._DraggableComponent--isSelected_qzbgx_54 > ._DraggableComponent-overlay_qzbgx_12 {
1059
+ ._DraggableComponent--isSelected_1vaqy_57 > ._DraggableComponent-overlayWrapper_1vaqy_12 > ._DraggableComponent-overlay_1vaqy_12 {
1195
1060
  outline-color: var(--puck-color-azure-07);
1196
1061
  }
1197
- ._DraggableComponent_qzbgx_1:has(._DraggableComponent--hover_qzbgx_45 > ._DraggableComponent-overlay_qzbgx_12) > ._DraggableComponent-overlay_qzbgx_12 {
1062
+ ._DraggableComponent_1vaqy_1:has(._DraggableComponent--hover_1vaqy_50 > ._DraggableComponent-overlayWrapper_1vaqy_12) > ._DraggableComponent-overlayWrapper_1vaqy_12 {
1198
1063
  display: none;
1199
1064
  }
1200
- ._DraggableComponent-actionsOverlay_qzbgx_66 {
1065
+ ._DraggableComponent-actionsOverlay_1vaqy_71 {
1201
1066
  position: sticky;
1202
1067
  opacity: 0;
1203
1068
  pointer-events: none;
1204
1069
  z-index: 2;
1205
1070
  }
1206
- ._DraggableComponent--isSelected_qzbgx_54 ._DraggableComponent-actionsOverlay_qzbgx_66 {
1071
+ ._DraggableComponent--isSelected_1vaqy_57 ._DraggableComponent-actionsOverlay_1vaqy_71 {
1207
1072
  opacity: 1;
1208
1073
  pointer-events: auto;
1209
1074
  }
1210
- ._DraggableComponent-actions_qzbgx_66 {
1075
+ ._DraggableComponent-actions_1vaqy_71 {
1211
1076
  position: absolute;
1212
1077
  width: auto;
1213
1078
  cursor: grab;
@@ -1307,212 +1172,63 @@ body:has(._DropZone--isAnimating_1i2sv_68:empty) [data-puck-overlay] {
1307
1172
  opacity: 0 !important;
1308
1173
  }
1309
1174
 
1310
- /* css-module:/home/runner/work/puck/puck/packages/core/components/SidebarSection/styles.module.css/#css-module-data */
1311
- ._SidebarSection_8boj8_1 {
1312
- display: flex;
1313
- position: relative;
1314
- flex-direction: column;
1315
- color: var(--puck-color-black);
1316
- }
1317
- ._SidebarSection_8boj8_1:last-of-type {
1318
- flex-grow: 1;
1319
- }
1320
- ._SidebarSection-title_8boj8_12 {
1321
- background: var(--puck-color-white);
1322
- padding: 16px;
1323
- border-bottom: 1px solid var(--puck-color-grey-09);
1324
- border-top: 1px solid var(--puck-color-grey-09);
1325
- overflow-x: auto;
1326
- }
1327
- ._SidebarSection--noBorderTop_8boj8_20 > ._SidebarSection-title_8boj8_12 {
1328
- border-top: 0px;
1329
- }
1330
- ._SidebarSection-content_8boj8_24 {
1331
- padding: 16px;
1332
- }
1333
- ._SidebarSection--noPadding_8boj8_28 > ._SidebarSection-content_8boj8_24 {
1334
- padding: 0px;
1335
- }
1336
- ._SidebarSection--noPadding_8boj8_28 > ._SidebarSection-content_8boj8_24:last-child {
1337
- padding-bottom: 4px;
1338
- }
1339
- ._SidebarSection_8boj8_1:last-of-type ._SidebarSection-content_8boj8_24 {
1340
- border-bottom: none;
1341
- flex-grow: 1;
1175
+ /* lib/overlay-portal/styles.css */
1176
+ [data-puck-overlay-portal],
1177
+ [data-puck-overlay-portal] * {
1178
+ pointer-events: auto !important;
1342
1179
  }
1343
- ._SidebarSection-breadcrumbLabel_8boj8_41 {
1344
- background: none;
1345
- border: 0;
1346
- border-radius: 2px;
1347
- color: var(--puck-color-azure-04);
1348
- cursor: pointer;
1349
- font: inherit;
1350
- flex-shrink: 0;
1351
- padding: 0;
1352
- transition: color 50ms ease-in;
1180
+ [data-puck-overlay-portal]:hover {
1181
+ outline: 2px var(--puck-color-azure-09) dashed;
1182
+ outline-offset: 2px;
1353
1183
  }
1354
- ._SidebarSection-breadcrumbLabel_8boj8_41:focus-visible {
1355
- outline: 2px solid var(--puck-color-azure-05);
1184
+ [data-puck-overlay-portal]:focus-within {
1185
+ outline: 2px var(--puck-color-azure-07) solid;
1356
1186
  outline-offset: 2px;
1357
1187
  }
1358
- @media (hover: hover) and (pointer: fine) {
1359
- ._SidebarSection-breadcrumbLabel_8boj8_41:hover {
1360
- color: var(--puck-color-azure-03);
1361
- transition: none;
1362
- }
1188
+
1189
+ /* css-module:/home/runner/work/puck/puck/packages/core/components/InlineTextField/styles.module.css/#css-module-data */
1190
+ ._InlineTextField_ilw2a_1 {
1191
+ cursor: text;
1192
+ display: inline-block;
1363
1193
  }
1364
- ._SidebarSection-breadcrumbLabel_8boj8_41:active {
1365
- color: var(--puck-color-azure-02);
1366
- transition: none;
1194
+ [data-dnd-dragging] ._InlineTextField_ilw2a_1 {
1195
+ cursor: none;
1196
+ caret-color: transparent;
1367
1197
  }
1368
- ._SidebarSection-breadcrumbs_8boj8_70 {
1369
- align-items: center;
1370
- display: flex;
1371
- gap: 4px;
1198
+ [data-dnd-dragging] ._InlineTextField_ilw2a_1::selection {
1199
+ display: none;
1372
1200
  }
1373
- ._SidebarSection-breadcrumb_8boj8_41 {
1374
- align-items: center;
1375
- display: flex;
1376
- gap: 4px;
1201
+
1202
+ /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Fields/styles.module.css/#css-module-data */
1203
+ ._PuckFields_10bh7_1 {
1204
+ position: relative;
1205
+ font-family: var(--puck-font-family);
1377
1206
  }
1378
- ._SidebarSection-heading_8boj8_82 {
1379
- padding-inline-end: 16px;
1207
+ ._PuckFields--isLoading_10bh7_6 {
1208
+ min-height: 48px;
1380
1209
  }
1381
- ._SidebarSection-loadingOverlay_8boj8_86 {
1210
+ ._PuckFields-loadingOverlay_10bh7_10 {
1382
1211
  background: var(--puck-color-white);
1383
1212
  display: flex;
1384
- justify-content: center;
1385
- align-items: center;
1213
+ justify-content: flex-end;
1214
+ align-items: flex-start;
1386
1215
  height: 100%;
1387
1216
  width: 100%;
1388
- top: 0;
1217
+ top: 0px;
1389
1218
  position: absolute;
1390
1219
  z-index: 1;
1391
1220
  pointer-events: all;
1392
1221
  box-sizing: border-box;
1393
1222
  opacity: 0.8;
1394
1223
  }
1395
-
1396
- /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/styles.module.css/#css-module-data */
1397
- ._Puck_dnlfp_19 {
1398
- --puck-space-px: 16px;
1399
- font-family: var(--puck-font-family);
1400
- overflow-x: hidden;
1401
- }
1402
- @media (min-width: 766px) {
1403
- ._Puck_dnlfp_19 {
1404
- overflow-x: auto;
1405
- }
1224
+ ._PuckFields-loadingOverlayInner_10bh7_25 {
1225
+ display: flex;
1226
+ padding: 16px;
1227
+ position: sticky;
1228
+ top: 0;
1406
1229
  }
1407
- ._Puck-portal_dnlfp_31 {
1408
- position: relative;
1409
- z-index: 2;
1410
- }
1411
- ._PuckLayout-inner_dnlfp_38 {
1412
- --puck-frame-width: auto;
1413
- --puck-side-bar-width: 0px;
1414
- display: grid;
1415
- grid-template-areas: "header header header" "left editor right";
1416
- grid-template-columns: 0 var(--puck-frame-width) 0;
1417
- grid-template-rows: min-content auto;
1418
- height: 100dvh;
1419
- position: relative;
1420
- z-index: 0;
1421
- }
1422
- ._PuckLayout--mounted_dnlfp_50 ._PuckLayout-inner_dnlfp_38 {
1423
- --puck-side-bar-width: 186px;
1424
- }
1425
- ._PuckLayout--leftSideBarVisible_dnlfp_54 ._PuckLayout-inner_dnlfp_38 {
1426
- grid-template-columns: var(--puck-side-bar-width) var(--puck-frame-width) 0;
1427
- }
1428
- ._PuckLayout--rightSideBarVisible_dnlfp_60 ._PuckLayout-inner_dnlfp_38 {
1429
- grid-template-columns: 0 var(--puck-frame-width) var(--puck-side-bar-width);
1430
- }
1431
- ._PuckLayout--leftSideBarVisible_dnlfp_54._PuckLayout--rightSideBarVisible_dnlfp_60 ._PuckLayout-inner_dnlfp_38 {
1432
- grid-template-columns: var(--puck-side-bar-width) var(--puck-frame-width) var(--puck-side-bar-width);
1433
- }
1434
- @media (min-width: 458px) {
1435
- ._PuckLayout-mounted_dnlfp_74 ._PuckLayout-inner_dnlfp_38 {
1436
- --puck-frame-width: minmax(266px, auto);
1437
- }
1438
- }
1439
- @media (min-width: 638px) {
1440
- ._PuckLayout_dnlfp_38 ._PuckLayout-inner_dnlfp_38 {
1441
- --puck-side-bar-width: minmax(186px, 250px);
1442
- }
1443
- }
1444
- @media (min-width: 766px) {
1445
- ._PuckLayout_dnlfp_38 ._PuckLayout-inner_dnlfp_38 {
1446
- --puck-frame-width: auto;
1447
- }
1448
- }
1449
- @media (min-width: 990px) {
1450
- ._PuckLayout_dnlfp_38 ._PuckLayout-inner_dnlfp_38 {
1451
- --puck-side-bar-width: 256px;
1452
- }
1453
- }
1454
- @media (min-width: 1198px) {
1455
- ._PuckLayout_dnlfp_38 ._PuckLayout-inner_dnlfp_38 {
1456
- --puck-side-bar-width: 274px;
1457
- }
1458
- }
1459
- @media (min-width: 1398px) {
1460
- ._PuckLayout_dnlfp_38 ._PuckLayout-inner_dnlfp_38 {
1461
- --puck-side-bar-width: 290px;
1462
- }
1463
- }
1464
- @media (min-width: 1598px) {
1465
- ._PuckLayout_dnlfp_38 ._PuckLayout-inner_dnlfp_38 {
1466
- --puck-side-bar-width: 320px;
1467
- }
1468
- }
1469
- ._PuckLayout-leftSideBar_dnlfp_115 {
1470
- background: var(--puck-color-grey-12);
1471
- border-inline-end: 1px solid var(--puck-color-grey-09);
1472
- display: flex;
1473
- flex-direction: column;
1474
- grid-area: left;
1475
- overflow-y: auto;
1476
- }
1477
- ._PuckLayout-rightSideBar_dnlfp_124 {
1478
- background: var(--puck-color-white);
1479
- border-inline-start: 1px solid var(--puck-color-grey-09);
1480
- display: flex;
1481
- flex-direction: column;
1482
- grid-area: right;
1483
- overflow-y: auto;
1484
- }
1485
-
1486
- /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Fields/styles.module.css/#css-module-data */
1487
- ._PuckFields_10bh7_1 {
1488
- position: relative;
1489
- font-family: var(--puck-font-family);
1490
- }
1491
- ._PuckFields--isLoading_10bh7_6 {
1492
- min-height: 48px;
1493
- }
1494
- ._PuckFields-loadingOverlay_10bh7_10 {
1495
- background: var(--puck-color-white);
1496
- display: flex;
1497
- justify-content: flex-end;
1498
- align-items: flex-start;
1499
- height: 100%;
1500
- width: 100%;
1501
- top: 0px;
1502
- position: absolute;
1503
- z-index: 1;
1504
- pointer-events: all;
1505
- box-sizing: border-box;
1506
- opacity: 0.8;
1507
- }
1508
- ._PuckFields-loadingOverlayInner_10bh7_25 {
1509
- display: flex;
1510
- padding: 16px;
1511
- position: sticky;
1512
- top: 0;
1513
- }
1514
- ._PuckFields-field_10bh7_32 * {
1515
- box-sizing: border-box;
1230
+ ._PuckFields-field_10bh7_32 * {
1231
+ box-sizing: border-box;
1516
1232
  }
1517
1233
  ._PuckFields--wrapFields_10bh7_36 ._PuckFields-field_10bh7_32 {
1518
1234
  color: var(--puck-color-grey-04);
@@ -1574,6 +1290,11 @@ body:has(._DropZone--isAnimating_1i2sv_68:empty) [data-puck-overlay] {
1574
1290
  margin-inline-start: auto;
1575
1291
  }
1576
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;
1296
+ }
1297
+
1577
1298
  /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Preview/styles.module.css/#css-module-data */
1578
1299
  ._PuckPreview_z2rgu_1 {
1579
1300
  position: relative;
@@ -1688,111 +1409,96 @@ body:has(._DropZone--isAnimating_1i2sv_68:empty) [data-puck-overlay] {
1688
1409
  margin-top: 4px;
1689
1410
  }
1690
1411
 
1691
- /* css-module:/home/runner/work/puck/puck/packages/core/components/ViewportControls/styles.module.css/#css-module-data */
1692
- ._ViewportControls_gejzr_1 {
1693
- display: flex;
1694
- background: var(--puck-color-grey-11);
1695
- box-sizing: border-box;
1696
- border-inline-start: 2px solid var(--puck-color-grey-11);
1697
- justify-content: center;
1698
- gap: 8px;
1699
- min-width: 358px;
1700
- padding-bottom: 16px;
1701
- padding-inline-start: var(--puck-space-px);
1702
- padding-inline-end: var(--puck-space-px);
1703
- 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;
1704
1415
  }
1705
- ._ViewportControls-divider_gejzr_15 {
1706
- border-inline-end: 1px solid var(--puck-color-grey-09);
1707
- margin-inline-start: 8px;
1708
- 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_1q3wx_19 {
1419
+ --puck-space-px: 16px;
1420
+ font-family: var(--puck-font-family);
1421
+ overflow-x: hidden;
1709
1422
  }
1710
- ._ViewportControls-zoomSelect_gejzr_21 {
1711
- appearance: none;
1712
- 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;
1713
- background-size: 10px;
1714
- background-position: calc(100% - 12px) calc(50% + 3px);
1715
- background-repeat: no-repeat;
1716
- border: 0;
1717
- font-size: var(--puck-font-size-xxxs);
1718
- padding: 0;
1719
- width: 96px;
1423
+ @media (min-width: 766px) {
1424
+ ._Puck_1q3wx_19 {
1425
+ overflow-x: auto;
1426
+ }
1720
1427
  }
1721
- ._ViewportControls-zoomSelect_gejzr_21:dir(rtl) {
1722
- background-position: 12px calc(50% + 3px);
1428
+ ._Puck-portal_1q3wx_31 {
1429
+ position: relative;
1430
+ z-index: 2;
1723
1431
  }
1724
- ._ViewportButton--isActive_gejzr_38 ._ViewportButton-inner_gejzr_38 {
1725
- color: var(--puck-color-azure-04);
1432
+ ._PuckLayout-inner_1q3wx_36 {
1433
+ --puck-frame-width: auto;
1434
+ --puck-side-bar-width: 0px;
1435
+ --puck-side-nav-width: 68px;
1436
+ display: grid;
1437
+ grid-template-areas: "header header header header" "sidenav left editor right";
1438
+ grid-template-columns: var(--puck-side-nav-width) 0 var(--puck-frame-width) 0;
1439
+ grid-template-rows: min-content auto;
1440
+ height: 100dvh;
1441
+ position: relative;
1442
+ z-index: 0;
1726
1443
  }
1727
-
1728
- /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Canvas/styles.module.css/#css-module-data */
1729
- ._PuckCanvas_18jay_1 {
1730
- background: var(--puck-color-grey-11);
1731
- display: flex;
1732
- grid-area: editor;
1733
- flex-direction: column;
1734
- padding: var(--puck-space-px);
1735
- overflow: auto;
1444
+ ._PuckLayout--mounted_1q3wx_49 ._PuckLayout-inner_1q3wx_36 {
1445
+ --puck-side-bar-width: 186px;
1446
+ --puck-left-side-bar-width: var( --puck-user-left-side-bar-width, --puck-side-bar-width );
1447
+ --puck-right-side-bar-width: var( --puck-user-right-side-bar-width, --puck-side-bar-width );
1736
1448
  }
1737
- @media (min-width: 1198px) {
1738
- ._PuckCanvas_18jay_1 {
1739
- padding: calc(var(--puck-space-px) * 1.5);
1740
- padding-top: var(--puck-space-px);
1449
+ ._PuckLayout--leftSideBarVisible_1q3wx_61 ._PuckLayout-inner_1q3wx_36 {
1450
+ grid-template-columns: var(--puck-side-nav-width) var(--puck-left-side-bar-width) var( --puck-frame-width ) 0;
1451
+ }
1452
+ ._PuckLayout--rightSideBarVisible_1q3wx_69 ._PuckLayout-inner_1q3wx_36 {
1453
+ grid-template-columns: var(--puck-side-nav-width) 0 var(--puck-frame-width) var(--puck-side-bar-width);
1454
+ }
1455
+ ._PuckLayout--leftSideBarVisible_1q3wx_61._PuckLayout--rightSideBarVisible_1q3wx_69 ._PuckLayout-inner_1q3wx_36 {
1456
+ grid-template-columns: var(--puck-side-nav-width) var(--puck-left-side-bar-width) var( --puck-frame-width ) var(--puck-right-side-bar-width);
1457
+ }
1458
+ @media (min-width: 458px) {
1459
+ ._PuckLayout-mounted_1q3wx_85 ._PuckLayout-inner_1q3wx_36 {
1460
+ --puck-frame-width: minmax(266px, auto);
1741
1461
  }
1742
- ._PuckCanvas_18jay_1:not(._PuckCanvas_18jay_1:has(._PuckCanvas-controls_18jay_16)) {
1743
- padding-top: calc(var(--puck-space-px) * 1.5);
1462
+ }
1463
+ @media (min-width: 638px) {
1464
+ ._PuckLayout_1q3wx_36 ._PuckLayout-inner_1q3wx_36 {
1465
+ --puck-side-bar-width: minmax(186px, 250px);
1744
1466
  }
1745
1467
  }
1746
- ._PuckCanvas-inner_18jay_21 {
1747
- display: flex;
1748
- height: 100%;
1749
- justify-content: center;
1750
- min-width: 358px;
1751
- position: relative;
1752
- width: 100%;
1468
+ @media (min-width: 766px) {
1469
+ ._PuckLayout_1q3wx_36 ._PuckLayout-inner_1q3wx_36 {
1470
+ --puck-frame-width: auto;
1471
+ }
1753
1472
  }
1754
- ._PuckCanvas-root_18jay_30 {
1755
- background: white;
1756
- border: 1px solid var(--puck-color-grey-09);
1757
- box-sizing: content-box;
1758
- min-width: 321px;
1759
- position: absolute;
1760
- pointer-events: none;
1761
- transform-origin: top;
1762
- top: 0;
1763
- bottom: 0;
1764
- opacity: 0;
1473
+ @media (min-width: 990px) {
1474
+ ._PuckLayout_1q3wx_36 ._PuckLayout-inner_1q3wx_36 {
1475
+ --puck-side-bar-width: 256px;
1476
+ }
1765
1477
  }
1766
1478
  @media (min-width: 1198px) {
1767
- ._PuckCanvas-root_18jay_30 {
1768
- min-width: unset;
1479
+ ._PuckLayout_1q3wx_36 ._PuckLayout-inner_1q3wx_36 {
1480
+ --puck-side-bar-width: 274px;
1769
1481
  }
1770
1482
  }
1771
- @media (prefers-reduced-motion: reduce) {
1772
- ._PuckCanvas-root_18jay_30 {
1773
- transition: none !important;
1483
+ @media (min-width: 1398px) {
1484
+ ._PuckLayout_1q3wx_36 ._PuckLayout-inner_1q3wx_36 {
1485
+ --puck-side-bar-width: 290px;
1774
1486
  }
1775
1487
  }
1776
- ._PuckCanvas--ready_18jay_55 ._PuckCanvas-root_18jay_30 {
1777
- pointer-events: unset;
1778
- opacity: 1;
1488
+ @media (min-width: 1598px) {
1489
+ ._PuckLayout_1q3wx_36 ._PuckLayout-inner_1q3wx_36 {
1490
+ --puck-side-bar-width: 320px;
1491
+ }
1779
1492
  }
1780
- ._PuckCanvas-loader_18jay_60 {
1781
- align-items: center;
1782
- color: var(--puck-color-grey-06);
1783
- display: flex;
1784
- height: 100%;
1785
- justify-content: center;
1786
- transition: opacity 250ms ease-out;
1787
- opacity: 0;
1493
+ ._PuckLayout-nav_1q3wx_126 {
1494
+ border-right: 1px solid var(--puck-color-grey-09);
1495
+ background-color: var(--puck-color-grey-12);
1788
1496
  }
1789
- ._PuckCanvas--showLoader_18jay_70 ._PuckCanvas-loader_18jay_60 {
1790
- opacity: 1;
1497
+ ._PuckPluginTab_1q3wx_131 {
1498
+ display: none;
1791
1499
  }
1792
- ._PuckCanvas--showLoader_18jay_70._PuckCanvas--ready_18jay_55 ._PuckCanvas-loader_18jay_60 {
1793
- opacity: 0;
1794
- height: 0;
1795
- transition: none;
1500
+ ._PuckPluginTab--visible_1q3wx_135 {
1501
+ display: block;
1796
1502
  }
1797
1503
 
1798
1504
  /* css-module:/home/runner/work/puck/puck/packages/core/components/MenuBar/styles.module.css/#css-module-data */
@@ -1840,7 +1546,7 @@ body:has(._DropZone--isAnimating_1i2sv_68:empty) [data-puck-overlay] {
1840
1546
  }
1841
1547
 
1842
1548
  /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Header/styles.module.css/#css-module-data */
1843
- ._PuckHeader_15xnq_1 {
1549
+ ._PuckHeader_1ehbp_1 {
1844
1550
  background: var(--puck-color-white);
1845
1551
  border-bottom: 1px solid var(--puck-color-grey-09);
1846
1552
  color: var(--puck-color-black);
@@ -1848,8 +1554,14 @@ body:has(._DropZone--isAnimating_1i2sv_68:empty) [data-puck-overlay] {
1848
1554
  position: relative;
1849
1555
  max-width: 100vw;
1850
1556
  }
1851
- ._PuckHeader-inner_15xnq_10 {
1557
+ @media (min-width: 638px) {
1558
+ ._PuckHeader_1ehbp_1 {
1559
+ padding-left: 67px;
1560
+ }
1561
+ }
1562
+ ._PuckHeader-inner_1ehbp_16 {
1852
1563
  align-items: end;
1564
+ border-left: 1px solid var(--puck-color-grey-09);
1853
1565
  display: grid;
1854
1566
  gap: var(--puck-space-px);
1855
1567
  grid-template-areas: "left middle right";
@@ -1857,39 +1569,537 @@ body:has(._DropZone--isAnimating_1i2sv_68:empty) [data-puck-overlay] {
1857
1569
  grid-template-rows: auto;
1858
1570
  padding: var(--puck-space-px);
1859
1571
  }
1860
- ._PuckHeader-toggle_15xnq_20 {
1572
+ @media (min-width: 638px) {
1573
+ ._PuckHeader-inner_1ehbp_16 {
1574
+ border-left: 1px solid var(--puck-color-grey-09);
1575
+ }
1576
+ }
1577
+ ._PuckHeader-toggle_1ehbp_33 {
1861
1578
  color: var(--puck-color-grey-05);
1862
1579
  display: flex;
1863
1580
  margin-inline-start: -4px;
1864
1581
  padding-top: 2px;
1865
1582
  }
1866
- ._PuckHeader--rightSideBarVisible_15xnq_27 ._PuckHeader-rightSideBarToggle_15xnq_27,
1867
- ._PuckHeader--leftSideBarVisible_15xnq_28 ._PuckHeader-leftSideBarToggle_15xnq_28 {
1583
+ ._PuckHeader--rightSideBarVisible_1ehbp_40 ._PuckHeader-rightSideBarToggle_1ehbp_40,
1584
+ ._PuckHeader--leftSideBarVisible_1ehbp_41 ._PuckHeader-leftSideBarToggle_1ehbp_41 {
1868
1585
  color: var(--puck-color-black);
1869
1586
  }
1870
- ._PuckHeader-title_15xnq_32 {
1587
+ ._PuckHeader-title_1ehbp_45 {
1871
1588
  align-self: center;
1872
1589
  }
1873
- ._PuckHeader-path_15xnq_36 {
1590
+ ._PuckHeader-path_1ehbp_49 {
1874
1591
  font-family: var(--puck-font-family-monospaced);
1875
1592
  font-size: var(--puck-font-size-xxs);
1876
1593
  font-weight: normal;
1877
1594
  word-break: break-all;
1878
1595
  }
1879
- ._PuckHeader-tools_15xnq_43 {
1596
+ ._PuckHeader-tools_1ehbp_56 {
1880
1597
  display: flex;
1881
1598
  gap: 16px;
1882
1599
  justify-content: flex-end;
1883
1600
  }
1884
- ._PuckHeader-menuButton_15xnq_49 {
1601
+ ._PuckHeader-menuButton_1ehbp_62 {
1885
1602
  color: var(--puck-color-grey-05);
1886
1603
  margin-inline-start: -4px;
1887
1604
  }
1888
- ._PuckHeader--menuOpen_15xnq_54 ._PuckHeader-menuButton_15xnq_49 {
1605
+ ._PuckHeader--menuOpen_1ehbp_67 ._PuckHeader-menuButton_1ehbp_62 {
1889
1606
  color: var(--puck-color-black);
1890
1607
  }
1891
1608
  @media (min-width: 638px) {
1892
- ._PuckHeader-menuButton_15xnq_49 {
1609
+ ._PuckHeader-menuButton_1ehbp_62 {
1893
1610
  display: none;
1894
1611
  }
1895
1612
  }
1613
+
1614
+ /* css-module:/home/runner/work/puck/puck/packages/core/components/SidebarSection/styles.module.css/#css-module-data */
1615
+ ._SidebarSection_8boj8_1 {
1616
+ display: flex;
1617
+ position: relative;
1618
+ flex-direction: column;
1619
+ color: var(--puck-color-black);
1620
+ }
1621
+ ._SidebarSection_8boj8_1:last-of-type {
1622
+ flex-grow: 1;
1623
+ }
1624
+ ._SidebarSection-title_8boj8_12 {
1625
+ background: var(--puck-color-white);
1626
+ padding: 16px;
1627
+ border-bottom: 1px solid var(--puck-color-grey-09);
1628
+ border-top: 1px solid var(--puck-color-grey-09);
1629
+ overflow-x: auto;
1630
+ }
1631
+ ._SidebarSection--noBorderTop_8boj8_20 > ._SidebarSection-title_8boj8_12 {
1632
+ border-top: 0px;
1633
+ }
1634
+ ._SidebarSection-content_8boj8_24 {
1635
+ padding: 16px;
1636
+ }
1637
+ ._SidebarSection--noPadding_8boj8_28 > ._SidebarSection-content_8boj8_24 {
1638
+ padding: 0px;
1639
+ }
1640
+ ._SidebarSection--noPadding_8boj8_28 > ._SidebarSection-content_8boj8_24:last-child {
1641
+ padding-bottom: 4px;
1642
+ }
1643
+ ._SidebarSection_8boj8_1:last-of-type ._SidebarSection-content_8boj8_24 {
1644
+ border-bottom: none;
1645
+ flex-grow: 1;
1646
+ }
1647
+ ._SidebarSection-breadcrumbLabel_8boj8_41 {
1648
+ background: none;
1649
+ border: 0;
1650
+ border-radius: 2px;
1651
+ color: var(--puck-color-azure-04);
1652
+ cursor: pointer;
1653
+ font: inherit;
1654
+ flex-shrink: 0;
1655
+ padding: 0;
1656
+ transition: color 50ms ease-in;
1657
+ }
1658
+ ._SidebarSection-breadcrumbLabel_8boj8_41:focus-visible {
1659
+ outline: 2px solid var(--puck-color-azure-05);
1660
+ outline-offset: 2px;
1661
+ }
1662
+ @media (hover: hover) and (pointer: fine) {
1663
+ ._SidebarSection-breadcrumbLabel_8boj8_41:hover {
1664
+ color: var(--puck-color-azure-03);
1665
+ transition: none;
1666
+ }
1667
+ }
1668
+ ._SidebarSection-breadcrumbLabel_8boj8_41:active {
1669
+ color: var(--puck-color-azure-02);
1670
+ transition: none;
1671
+ }
1672
+ ._SidebarSection-breadcrumbs_8boj8_70 {
1673
+ align-items: center;
1674
+ display: flex;
1675
+ gap: 4px;
1676
+ }
1677
+ ._SidebarSection-breadcrumb_8boj8_41 {
1678
+ align-items: center;
1679
+ display: flex;
1680
+ gap: 4px;
1681
+ }
1682
+ ._SidebarSection-heading_8boj8_82 {
1683
+ padding-inline-end: 16px;
1684
+ }
1685
+ ._SidebarSection-loadingOverlay_8boj8_86 {
1686
+ background: var(--puck-color-white);
1687
+ display: flex;
1688
+ justify-content: center;
1689
+ align-items: center;
1690
+ height: 100%;
1691
+ width: 100%;
1692
+ top: 0;
1693
+ position: absolute;
1694
+ z-index: 1;
1695
+ pointer-events: all;
1696
+ box-sizing: border-box;
1697
+ opacity: 0.8;
1698
+ }
1699
+
1700
+ /* css-module:/home/runner/work/puck/puck/packages/core/components/ViewportControls/styles.module.css/#css-module-data */
1701
+ ._ViewportControls_gejzr_1 {
1702
+ display: flex;
1703
+ background: var(--puck-color-grey-11);
1704
+ box-sizing: border-box;
1705
+ border-inline-start: 2px solid var(--puck-color-grey-11);
1706
+ justify-content: center;
1707
+ gap: 8px;
1708
+ min-width: 358px;
1709
+ padding-bottom: 16px;
1710
+ padding-inline-start: var(--puck-space-px);
1711
+ padding-inline-end: var(--puck-space-px);
1712
+ z-index: 1;
1713
+ }
1714
+ ._ViewportControls-divider_gejzr_15 {
1715
+ border-inline-end: 1px solid var(--puck-color-grey-09);
1716
+ margin-inline-start: 8px;
1717
+ margin-inline-end: 8px;
1718
+ }
1719
+ ._ViewportControls-zoomSelect_gejzr_21 {
1720
+ appearance: none;
1721
+ 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;
1722
+ background-size: 10px;
1723
+ background-position: calc(100% - 12px) calc(50% + 3px);
1724
+ background-repeat: no-repeat;
1725
+ border: 0;
1726
+ font-size: var(--puck-font-size-xxxs);
1727
+ padding: 0;
1728
+ width: 96px;
1729
+ }
1730
+ ._ViewportControls-zoomSelect_gejzr_21:dir(rtl) {
1731
+ background-position: 12px calc(50% + 3px);
1732
+ }
1733
+ ._ViewportButton--isActive_gejzr_38 ._ViewportButton-inner_gejzr_38 {
1734
+ color: var(--puck-color-azure-04);
1735
+ }
1736
+
1737
+ /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Canvas/styles.module.css/#css-module-data */
1738
+ ._PuckCanvas_18jay_1 {
1739
+ background: var(--puck-color-grey-11);
1740
+ display: flex;
1741
+ grid-area: editor;
1742
+ flex-direction: column;
1743
+ padding: var(--puck-space-px);
1744
+ overflow: auto;
1745
+ }
1746
+ @media (min-width: 1198px) {
1747
+ ._PuckCanvas_18jay_1 {
1748
+ padding: calc(var(--puck-space-px) * 1.5);
1749
+ padding-top: var(--puck-space-px);
1750
+ }
1751
+ ._PuckCanvas_18jay_1:not(._PuckCanvas_18jay_1:has(._PuckCanvas-controls_18jay_16)) {
1752
+ padding-top: calc(var(--puck-space-px) * 1.5);
1753
+ }
1754
+ }
1755
+ ._PuckCanvas-inner_18jay_21 {
1756
+ display: flex;
1757
+ height: 100%;
1758
+ justify-content: center;
1759
+ min-width: 358px;
1760
+ position: relative;
1761
+ width: 100%;
1762
+ }
1763
+ ._PuckCanvas-root_18jay_30 {
1764
+ background: white;
1765
+ border: 1px solid var(--puck-color-grey-09);
1766
+ box-sizing: content-box;
1767
+ min-width: 321px;
1768
+ position: absolute;
1769
+ pointer-events: none;
1770
+ transform-origin: top;
1771
+ top: 0;
1772
+ bottom: 0;
1773
+ opacity: 0;
1774
+ }
1775
+ @media (min-width: 1198px) {
1776
+ ._PuckCanvas-root_18jay_30 {
1777
+ min-width: unset;
1778
+ }
1779
+ }
1780
+ @media (prefers-reduced-motion: reduce) {
1781
+ ._PuckCanvas-root_18jay_30 {
1782
+ transition: none !important;
1783
+ }
1784
+ }
1785
+ ._PuckCanvas--ready_18jay_55 ._PuckCanvas-root_18jay_30 {
1786
+ pointer-events: unset;
1787
+ opacity: 1;
1788
+ }
1789
+ ._PuckCanvas-loader_18jay_60 {
1790
+ align-items: center;
1791
+ color: var(--puck-color-grey-06);
1792
+ display: flex;
1793
+ height: 100%;
1794
+ justify-content: center;
1795
+ transition: opacity 250ms ease-out;
1796
+ opacity: 0;
1797
+ }
1798
+ ._PuckCanvas--showLoader_18jay_70 ._PuckCanvas-loader_18jay_60 {
1799
+ opacity: 1;
1800
+ }
1801
+ ._PuckCanvas--showLoader_18jay_70._PuckCanvas--ready_18jay_55 ._PuckCanvas-loader_18jay_60 {
1802
+ opacity: 0;
1803
+ height: 0;
1804
+ transition: none;
1805
+ }
1806
+
1807
+ /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/ResizeHandle/styles.module.css/#css-module-data */
1808
+ @media (min-width: 766px) {
1809
+ ._ResizeHandle_144bf_2 {
1810
+ position: absolute;
1811
+ width: 5px;
1812
+ height: 100%;
1813
+ cursor: col-resize;
1814
+ z-index: 10;
1815
+ background: transparent;
1816
+ top: 0;
1817
+ }
1818
+ ._ResizeHandle_144bf_2:hover {
1819
+ background: rgba(0, 0, 0, 0.1);
1820
+ }
1821
+ ._ResizeHandle--left_144bf_16 {
1822
+ right: -3px;
1823
+ }
1824
+ ._ResizeHandle--right_144bf_20 {
1825
+ left: -3px;
1826
+ }
1827
+ }
1828
+
1829
+ /* components/Puck/components/ResizeHandle/styles.css */
1830
+ [data-resize-overlay] {
1831
+ position: fixed;
1832
+ top: 0;
1833
+ left: 0;
1834
+ right: 0;
1835
+ bottom: 0;
1836
+ z-index: 9999;
1837
+ cursor: col-resize;
1838
+ }
1839
+
1840
+ /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Sidebar/styles.module.css/#css-module-data */
1841
+ ._Sidebar_1xksb_1 {
1842
+ position: relative;
1843
+ display: flex;
1844
+ flex-direction: column;
1845
+ overflow-y: auto;
1846
+ }
1847
+ ._Sidebar--left_1xksb_8 {
1848
+ background: var(--puck-color-grey-12);
1849
+ border-inline-end: 1px solid var(--puck-color-grey-09);
1850
+ grid-area: left;
1851
+ }
1852
+ ._Sidebar--right_1xksb_14 {
1853
+ background: var(--puck-color-white);
1854
+ border-inline-start: 1px solid var(--puck-color-grey-09);
1855
+ grid-area: right;
1856
+ }
1857
+ ._Sidebar-resizeHandle_1xksb_20 {
1858
+ position: absolute;
1859
+ height: 100%;
1860
+ }
1861
+ ._Sidebar--left_1xksb_8 + ._Sidebar-resizeHandle_1xksb_20 {
1862
+ grid-area: left;
1863
+ justify-self: end;
1864
+ }
1865
+ ._Sidebar--right_1xksb_14 + ._Sidebar-resizeHandle_1xksb_20 {
1866
+ grid-area: right;
1867
+ justify-self: start;
1868
+ }
1869
+
1870
+ /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Nav/styles.module.css/#css-module-data */
1871
+ ._Nav-list_b6txo_1 {
1872
+ list-style: none;
1873
+ margin: 0;
1874
+ padding: 0;
1875
+ }
1876
+ ._NavSection_b6txo_7 {
1877
+ padding: 16px;
1878
+ }
1879
+ ._NavSection_b6txo_7:first-of-type {
1880
+ padding-top: 32px;
1881
+ }
1882
+ ._Nav--slim_b6txo_15 ._NavSection_b6txo_7 {
1883
+ padding-left: 0;
1884
+ padding-right: 0;
1885
+ }
1886
+ ._Nav--slim_b6txo_15 ._NavSection_b6txo_7 + ._NavSection_b6txo_7 {
1887
+ border-top: 1px solid var(--puck-color-grey-09);
1888
+ }
1889
+ ._NavSection-list_b6txo_24 {
1890
+ display: flex;
1891
+ flex-direction: column;
1892
+ list-style: none;
1893
+ margin: 0;
1894
+ padding: 0;
1895
+ }
1896
+ ._Nav--slim_b6txo_15 ._NavSection-list_b6txo_24 {
1897
+ gap: 16px;
1898
+ }
1899
+ ._NavSection-title_b6txo_36 {
1900
+ font-weight: 700;
1901
+ margin-bottom: 8px;
1902
+ padding-left: 8px;
1903
+ padding-right: 8px;
1904
+ }
1905
+ ._Nav--slim_b6txo_15 ._NavSection-title_b6txo_36 {
1906
+ opacity: 0;
1907
+ }
1908
+ ._NavItem-link_b6txo_47 {
1909
+ align-items: center;
1910
+ color: var(--puck-color-grey-03);
1911
+ display: flex;
1912
+ gap: 8px;
1913
+ text-decoration: none;
1914
+ cursor: pointer;
1915
+ border-radius: 4px;
1916
+ padding: 8px 4px;
1917
+ }
1918
+ ._Nav--slim_b6txo_15 ._NavItem-link_b6txo_47 {
1919
+ border-left: 4px solid transparent;
1920
+ border-right: 4px solid transparent;
1921
+ border-radius: 0;
1922
+ flex-direction: column;
1923
+ font-size: var(--puck-font-size-xxxs);
1924
+ }
1925
+ ._NavItem-linkIcon_b6txo_67 {
1926
+ height: 24px;
1927
+ width: 24px;
1928
+ }
1929
+ ._NavItem--active_b6txo_72 > ._NavItem-link_b6txo_47 {
1930
+ background-color: var(--puck-color-azure-10);
1931
+ color: var(--puck-color-azure-04);
1932
+ font-weight: 600;
1933
+ }
1934
+ ._Nav--slim_b6txo_15 ._NavItem--active_b6txo_72 > ._NavItem-link_b6txo_47 {
1935
+ background-color: transparent;
1936
+ border-right-color: var(--puck-color-azure-04);
1937
+ border-top-right-radius: 0;
1938
+ border-bottom-right-radius: 0;
1939
+ font-weight: 600;
1940
+ }
1941
+ ._NavItem_b6txo_47:not(._NavItem--active_b6txo_72) > ._NavItem-link_b6txo_47:hover {
1942
+ background-color: var(--puck-color-azure-11);
1943
+ color: var(--puck-color-azure-04);
1944
+ }
1945
+ ._NavItem-list_b6txo_91 {
1946
+ border-left: 1px solid var(--puck-color-grey-09);
1947
+ display: flex;
1948
+ flex-direction: column;
1949
+ list-style: none;
1950
+ margin-top: 8px;
1951
+ margin-left: 4px;
1952
+ padding: 0;
1953
+ padding-left: 8px;
1954
+ }
1955
+ ._Nav--slim_b6txo_15 ._NavItem-list_b6txo_91 {
1956
+ border-left: 0;
1957
+ padding-left: 0;
1958
+ margin-left: 0;
1959
+ }
1960
+
1961
+ /* styles/color.css */
1962
+ :root {
1963
+ --puck-color-rose-01: #4a001c;
1964
+ --puck-color-rose-02: #670833;
1965
+ --puck-color-rose-03: #87114c;
1966
+ --puck-color-rose-04: #a81a66;
1967
+ --puck-color-rose-05: #bc5089;
1968
+ --puck-color-rose-06: #cc7ca5;
1969
+ --puck-color-rose-07: #d89aba;
1970
+ --puck-color-rose-08: #e3b8cf;
1971
+ --puck-color-rose-09: #efd6e3;
1972
+ --puck-color-rose-10: #f6eaf1;
1973
+ --puck-color-rose-11: #faf4f8;
1974
+ --puck-color-rose-12: #fef8fc;
1975
+ --puck-color-azure-01: #00175d;
1976
+ --puck-color-azure-02: #002c77;
1977
+ --puck-color-azure-03: #014292;
1978
+ --puck-color-azure-04: #0158ad;
1979
+ --puck-color-azure-05: #3479be;
1980
+ --puck-color-azure-06: #6499cf;
1981
+ --puck-color-azure-07: #88b0da;
1982
+ --puck-color-azure-08: #abc7e5;
1983
+ --puck-color-azure-09: #cfdff0;
1984
+ --puck-color-azure-10: #e7eef7;
1985
+ --puck-color-azure-11: #f3f6fb;
1986
+ --puck-color-azure-12: #f7faff;
1987
+ --puck-color-green-01: #002000;
1988
+ --puck-color-green-02: #043604;
1989
+ --puck-color-green-03: #084e08;
1990
+ --puck-color-green-04: #0c680c;
1991
+ --puck-color-green-05: #1d882f;
1992
+ --puck-color-green-06: #2faa53;
1993
+ --puck-color-green-07: #56c16f;
1994
+ --puck-color-green-08: #7dd78b;
1995
+ --puck-color-green-09: #b8e8bf;
1996
+ --puck-color-green-10: #ddf3e0;
1997
+ --puck-color-green-11: #eff8f0;
1998
+ --puck-color-green-12: #f3fcf4;
1999
+ --puck-color-yellow-01: #211000;
2000
+ --puck-color-yellow-02: #362700;
2001
+ --puck-color-yellow-03: #4c4000;
2002
+ --puck-color-yellow-04: #645a00;
2003
+ --puck-color-yellow-05: #877614;
2004
+ --puck-color-yellow-06: #ab9429;
2005
+ --puck-color-yellow-07: #bfac4e;
2006
+ --puck-color-yellow-08: #d4c474;
2007
+ --puck-color-yellow-09: #e6deb1;
2008
+ --puck-color-yellow-10: #f3efd9;
2009
+ --puck-color-yellow-11: #f9f7ed;
2010
+ --puck-color-yellow-12: #fcfaf0;
2011
+ --puck-color-red-01: #4c0000;
2012
+ --puck-color-red-02: #6a0a10;
2013
+ --puck-color-red-03: #8a1422;
2014
+ --puck-color-red-04: #ac1f35;
2015
+ --puck-color-red-05: #bf5366;
2016
+ --puck-color-red-06: #ce7e8e;
2017
+ --puck-color-red-07: #d99ca8;
2018
+ --puck-color-red-08: #e4b9c2;
2019
+ --puck-color-red-09: #efd7db;
2020
+ --puck-color-red-10: #f6eaec;
2021
+ --puck-color-red-11: #faf4f5;
2022
+ --puck-color-red-12: #fff9fa;
2023
+ --puck-color-grey-01: #181818;
2024
+ --puck-color-grey-02: #292929;
2025
+ --puck-color-grey-03: #404040;
2026
+ --puck-color-grey-04: #5a5a5a;
2027
+ --puck-color-grey-05: #767676;
2028
+ --puck-color-grey-06: #949494;
2029
+ --puck-color-grey-07: #ababab;
2030
+ --puck-color-grey-08: #c3c3c3;
2031
+ --puck-color-grey-09: #dcdcdc;
2032
+ --puck-color-grey-10: #efefef;
2033
+ --puck-color-grey-11: #f5f5f5;
2034
+ --puck-color-grey-12: #fafafa;
2035
+ --puck-color-black: #000000;
2036
+ --puck-color-white: #ffffff;
2037
+ }
2038
+
2039
+ /* styles/typography.css */
2040
+ :root {
2041
+ --puck-font-size-scale-base-unitless: 12;
2042
+ --puck-font-size-xxxs-unitless: 12;
2043
+ --puck-font-size-xxs-unitless: 14;
2044
+ --puck-font-size-xs-unitless: 16;
2045
+ --puck-font-size-s-unitless: 18;
2046
+ --puck-font-size-m-unitless: 21;
2047
+ --puck-font-size-l-unitless: 24;
2048
+ --puck-font-size-xl-unitless: 28;
2049
+ --puck-font-size-xxl-unitless: 36;
2050
+ --puck-font-size-xxxl-unitless: 48;
2051
+ --puck-font-size-xxxxl-unitless: 56;
2052
+ --puck-font-size-xxxs: calc(1rem * var(--puck-font-size-xxxs-unitless) / 16);
2053
+ --puck-font-size-xxs: calc(1rem * var(--puck-font-size-xxs-unitless) / 16);
2054
+ --puck-font-size-xs: calc(1rem * var(--puck-font-size-xs-unitless) / 16);
2055
+ --puck-font-size-s: calc(1rem * var(--puck-font-size-s-unitless) / 16);
2056
+ --puck-font-size-m: calc(1rem * var(--puck-font-size-m-unitless) / 16);
2057
+ --puck-font-size-l: calc(1rem * var(--puck-font-size-l-unitless) / 16);
2058
+ --puck-font-size-xl: calc(1rem * var(--puck-font-size-xl-unitless) / 16);
2059
+ --puck-font-size-xxl: calc(1rem * var(--puck-font-size-xxl-unitless) / 16);
2060
+ --puck-font-size-xxxl: calc(1rem * var(--puck-font-size-xxxl-unitless) / 16);
2061
+ --puck-font-size-xxxxl: calc( 1rem * var(--puck-font-size-xxxxl-unitless) / 16 );
2062
+ --puck-font-size-base: var(--puck-font-size-xs);
2063
+ --line-height-reset: 1;
2064
+ --line-height-xs: calc( var(--space-m-unitless) / var(--puck-font-size-m-unitless) );
2065
+ --line-height-s: calc( var(--space-m-unitless) / var(--puck-font-size-s-unitless) );
2066
+ --line-height-m: calc( var(--space-m-unitless) / var(--puck-font-size-xs-unitless) );
2067
+ --line-height-l: calc( var(--space-m-unitless) / var(--puck-font-size-xxs-unitless) );
2068
+ --line-height-xl: calc( var(--space-m-unitless) / var(--puck-font-size-scale-base-unitless) );
2069
+ --line-height-base: var(--line-height-m);
2070
+ --fallback-font-stack:
2071
+ -apple-system,
2072
+ BlinkMacSystemFont,
2073
+ Segoe UI,
2074
+ Helvetica Neue,
2075
+ sans-serif,
2076
+ Apple Color Emoji,
2077
+ Segoe UI Emoji,
2078
+ Segoe UI Symbol;
2079
+ --puck-font-family: Inter, var(--fallback-font-stack);
2080
+ --puck-font-family-monospaced:
2081
+ ui-monospace,
2082
+ "Cascadia Code",
2083
+ "Source Code Pro",
2084
+ Menlo,
2085
+ Consolas,
2086
+ "DejaVu Sans Mono",
2087
+ monospace;
2088
+ }
2089
+ @supports (font-variation-settings: normal) {
2090
+ :root {
2091
+ --puck-font-family: InterVariable, var(--fallback-font-stack);
2092
+ }
2093
+ }
2094
+
2095
+ /* bundle/core.css */
2096
+ #frame-root {
2097
+ height: 1px;
2098
+ min-height: 100vh;
2099
+ }
2100
+ [data-puck-entry] {
2101
+ position: relative;
2102
+ z-index: 0;
2103
+ }
2104
+
2105
+ /* bundle/index.css */