@measured/puck 0.17.0-canary.8ea38c3 → 0.17.0-canary.9de5e5e

Sign up to get free protection for your applications and to get access to all the features.
package/dist/index.css CHANGED
@@ -135,6 +135,9 @@
135
135
  }
136
136
 
137
137
  /* styles.css */
138
+ #frame-root {
139
+ height: 100vh;
140
+ }
138
141
 
139
142
  /* css-module:/home/runner/work/puck/puck/packages/core/components/ActionBar/styles.module.css/#css-module-data */
140
143
  ._ActionBar_151w5_1 {
@@ -204,27 +207,27 @@
204
207
  }
205
208
 
206
209
  /* css-module:/home/runner/work/puck/puck/packages/core/components/AutoField/styles.module.css/#css-module-data */
207
- ._Input_3pq3z_1 {
210
+ ._InputWrapper_1l5m8_1 {
208
211
  color: var(--puck-color-grey-04);
209
212
  padding: 16px;
210
213
  padding-bottom: 12px;
211
214
  display: block;
212
215
  }
213
- ._Input_3pq3z_1 ._Input_3pq3z_1 {
216
+ ._InputWrapper_1l5m8_1 + ._InputWrapper_1l5m8_1 {
217
+ border-top: 1px solid var(--puck-color-grey-09);
218
+ margin-top: 8px;
219
+ }
220
+ ._Input_1l5m8_1 ._InputWrapper_1l5m8_1 {
214
221
  padding: 0px;
215
222
  }
216
- ._Input_3pq3z_1 * {
223
+ ._Input_1l5m8_1 * {
217
224
  box-sizing: border-box;
218
225
  }
219
- ._Input_3pq3z_1 + ._Input_3pq3z_1 {
220
- border-top: 1px solid var(--puck-color-grey-09);
221
- margin-top: 8px;
222
- }
223
- ._Input_3pq3z_1 ._Input_3pq3z_1 + ._Input_3pq3z_1 {
226
+ ._Input_1l5m8_1 ._InputWrapper_1l5m8_1 + ._InputWrapper_1l5m8_1 {
224
227
  border-top: 0px;
225
228
  margin-top: 12px;
226
229
  }
227
- ._Input-label_3pq3z_26 {
230
+ ._Input-label_1l5m8_26 {
228
231
  align-items: center;
229
232
  color: var(--puck-color-grey-04);
230
233
  display: flex;
@@ -232,17 +235,17 @@
232
235
  font-size: var(--puck-font-size-xxs);
233
236
  font-weight: 600;
234
237
  }
235
- ._Input-labelIcon_3pq3z_35 {
238
+ ._Input-labelIcon_1l5m8_35 {
236
239
  color: var(--puck-color-grey-07);
237
240
  display: flex;
238
241
  margin-right: 4px;
239
242
  padding-left: 4px;
240
243
  }
241
- ._Input-disabledIcon_3pq3z_42 {
244
+ ._Input-disabledIcon_1l5m8_42 {
242
245
  color: var(--puck-color-grey-05);
243
246
  margin-left: auto;
244
247
  }
245
- ._Input-input_3pq3z_47 {
248
+ ._Input-input_1l5m8_47 {
246
249
  background: var(--puck-color-white);
247
250
  border-width: 1px;
248
251
  border-style: solid;
@@ -254,7 +257,7 @@
254
257
  transition: border-color 50ms ease-in;
255
258
  width: 100%;
256
259
  }
257
- select._Input-input_3pq3z_47 {
260
+ select._Input-input_1l5m8_47 {
258
261
  appearance: none;
259
262
  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;
260
263
  background-size: 12px;
@@ -264,25 +267,25 @@ select._Input-input_3pq3z_47 {
264
267
  cursor: pointer;
265
268
  }
266
269
  @media (hover: hover) and (pointer: fine) {
267
- ._Input_3pq3z_1:has(> input):hover ._Input-input_3pq3z_47:not([readonly]),
268
- ._Input_3pq3z_1:has(> textarea):hover ._Input-input_3pq3z_47:not([readonly]) {
270
+ ._Input_1l5m8_1:has(> input):hover ._Input-input_1l5m8_47:not([readonly]),
271
+ ._Input_1l5m8_1:has(> textarea):hover ._Input-input_1l5m8_47:not([readonly]) {
269
272
  border-color: var(--puck-color-grey-05);
270
273
  transition: none;
271
274
  }
272
- ._Input_3pq3z_1:has(> select):hover ._Input-input_3pq3z_47:not([disabled]) {
275
+ ._Input_1l5m8_1:has(> select):hover ._Input-input_1l5m8_47:not([disabled]) {
273
276
  background-color: var(--puck-color-azure-12);
274
277
  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>");
275
278
  border-color: var(--puck-color-grey-05);
276
279
  transition: none;
277
280
  }
278
281
  }
279
- ._Input-input_3pq3z_47:focus {
282
+ ._Input-input_1l5m8_47:focus {
280
283
  border-color: var(--puck-color-grey-05);
281
284
  outline: 2px solid var(--puck-color-azure-05);
282
285
  transition: none;
283
286
  }
284
- ._Input--readOnly_3pq3z_91 > ._Input-input_3pq3z_47,
285
- ._Input--readOnly_3pq3z_91 > select._Input-input_3pq3z_47 {
287
+ ._Input--readOnly_1l5m8_91 > ._Input-input_1l5m8_47,
288
+ ._Input--readOnly_1l5m8_91 > select._Input-input_1l5m8_47 {
286
289
  background-color: var(--puck-color-grey-11);
287
290
  border-color: var(--puck-color-grey-09);
288
291
  color: var(--puck-color-grey-04);
@@ -291,34 +294,34 @@ select._Input-input_3pq3z_47 {
291
294
  outline: 0;
292
295
  transition: none;
293
296
  }
294
- ._Input-radioGroupItems_3pq3z_102 {
297
+ ._Input-radioGroupItems_1l5m8_102 {
295
298
  display: flex;
296
299
  border: 1px solid var(--puck-color-grey-09);
297
300
  border-radius: 4px;
298
301
  flex-wrap: wrap;
299
302
  }
300
- ._Input-radio_3pq3z_102 {
303
+ ._Input-radio_1l5m8_102 {
301
304
  border-right: 1px solid var(--puck-color-grey-09);
302
305
  flex-grow: 1;
303
306
  }
304
- ._Input-radio_3pq3z_102:first-of-type {
307
+ ._Input-radio_1l5m8_102:first-of-type {
305
308
  border-bottom-left-radius: 4px;
306
309
  border-top-left-radius: 4px;
307
310
  }
308
- ._Input-radio_3pq3z_102:first-of-type ._Input-radioInner_3pq3z_119 {
311
+ ._Input-radio_1l5m8_102:first-of-type ._Input-radioInner_1l5m8_119 {
309
312
  border-bottom-left-radius: 3px;
310
313
  border-top-left-radius: 3px;
311
314
  }
312
- ._Input-radio_3pq3z_102:last-of-type {
315
+ ._Input-radio_1l5m8_102:last-of-type {
313
316
  border-bottom-right-radius: 4px;
314
317
  border-right: 0;
315
318
  border-top-right-radius: 4px;
316
319
  }
317
- ._Input-radio_3pq3z_102:last-of-type ._Input-radioInner_3pq3z_119 {
320
+ ._Input-radio_1l5m8_102:last-of-type ._Input-radioInner_1l5m8_119 {
318
321
  border-bottom-right-radius: 3px;
319
322
  border-top-right-radius: 3px;
320
323
  }
321
- ._Input-radioInner_3pq3z_119 {
324
+ ._Input-radioInner_1l5m8_119 {
322
325
  background-color: var(--puck-color-white);
323
326
  color: var(--puck-color-grey-04);
324
327
  cursor: pointer;
@@ -327,32 +330,32 @@ select._Input-input_3pq3z_47 {
327
330
  text-align: center;
328
331
  transition: background-color 50ms ease-in;
329
332
  }
330
- ._Input-radio_3pq3z_102:has(:focus-visible) {
333
+ ._Input-radio_1l5m8_102:has(:focus-visible) {
331
334
  outline: 2px solid var(--puck-color-azure-05);
332
335
  outline-offset: 2px;
333
336
  position: relative;
334
337
  }
335
338
  @media (hover: hover) and (pointer: fine) {
336
- ._Input-radioInner_3pq3z_119:hover {
339
+ ._Input-radioInner_1l5m8_119:hover {
337
340
  background-color: var(--puck-color-azure-12);
338
341
  transition: none;
339
342
  }
340
343
  }
341
- ._Input--readOnly_3pq3z_91 ._Input-radioInner_3pq3z_119 {
344
+ ._Input--readOnly_1l5m8_91 ._Input-radioInner_1l5m8_119 {
342
345
  background-color: var(--puck-color-white);
343
346
  color: var(--puck-color-grey-04);
344
347
  cursor: default;
345
348
  }
346
- ._Input-radio_3pq3z_102 ._Input-radioInput_3pq3z_164:checked ~ ._Input-radioInner_3pq3z_119 {
349
+ ._Input-radio_1l5m8_102 ._Input-radioInput_1l5m8_164:checked ~ ._Input-radioInner_1l5m8_119 {
347
350
  background-color: var(--puck-color-azure-11);
348
351
  color: var(--puck-color-azure-04);
349
352
  font-weight: 500;
350
353
  }
351
- ._Input--readOnly_3pq3z_91 ._Input-radioInput_3pq3z_164:checked ~ ._Input-radioInner_3pq3z_119 {
354
+ ._Input--readOnly_1l5m8_91 ._Input-radioInput_1l5m8_164:checked ~ ._Input-radioInner_1l5m8_119 {
352
355
  background-color: var(--puck-color-grey-11);
353
356
  color: var(--puck-color-grey-04);
354
357
  }
355
- ._Input-radio_3pq3z_102 ._Input-radioInput_3pq3z_164 {
358
+ ._Input-radio_1l5m8_102 ._Input-radioInput_1l5m8_164 {
356
359
  clip: rect(0 0 0 0);
357
360
  clip-path: inset(100%);
358
361
  height: 1px;
@@ -361,7 +364,7 @@ select._Input-input_3pq3z_47 {
361
364
  white-space: nowrap;
362
365
  width: 1px;
363
366
  }
364
- textarea._Input-input_3pq3z_47 {
367
+ textarea._Input-input_1l5m8_47 {
365
368
  margin-bottom: -4px;
366
369
  }
367
370
 
@@ -607,10 +610,10 @@ textarea._Input-input_3pq3z_47 {
607
610
  }
608
611
 
609
612
  /* css-module:/home/runner/work/puck/puck/packages/core/components/ExternalInput/styles.module.css/#css-module-data */
610
- ._ExternalInput-actions_wprq3_1 {
613
+ ._ExternalInput-actions_8wgzm_1 {
611
614
  display: flex;
612
615
  }
613
- ._ExternalInput-button_wprq3_5 {
616
+ ._ExternalInput-button_8wgzm_5 {
614
617
  display: flex;
615
618
  gap: 8px;
616
619
  align-items: center;
@@ -628,16 +631,16 @@ textarea._Input-input_3pq3z_47 {
628
631
  overflow: hidden;
629
632
  flex-grow: 1;
630
633
  }
631
- ._ExternalInput--dataSelected_wprq3_24 ._ExternalInput-button_wprq3_5 {
634
+ ._ExternalInput--dataSelected_8wgzm_24 ._ExternalInput-button_8wgzm_5 {
632
635
  color: var(--puck-color-grey-03);
633
636
  display: block;
634
637
  border-top-right-radius: 0px;
635
638
  border-bottom-right-radius: 0px;
636
639
  }
637
- ._ExternalInput--readOnly_wprq3_31 ._ExternalInput-button_wprq3_5 {
640
+ ._ExternalInput--readOnly_8wgzm_31 ._ExternalInput-button_8wgzm_5 {
638
641
  background-color: var(--puck-color-grey-11);
639
642
  }
640
- ._ExternalInput-detachButton_wprq3_35 {
643
+ ._ExternalInput-detachButton_8wgzm_35 {
641
644
  border: 1px solid var(--puck-color-grey-09);
642
645
  border-top-right-radius: 4px;
643
646
  border-bottom-right-radius: 4px;
@@ -652,28 +655,28 @@ textarea._Input-input_3pq3z_47 {
652
655
  transition: background-color 50ms ease-in, color 50ms ease-in;
653
656
  margin-left: -1px;
654
657
  }
655
- ._ExternalInput-button_wprq3_5:focus-visible,
656
- ._ExternalInput-detachButton_wprq3_35:focus-visible {
658
+ ._ExternalInput-button_8wgzm_5:focus-visible,
659
+ ._ExternalInput-detachButton_8wgzm_35:focus-visible {
657
660
  outline: 2px solid var(--puck-color-azure-05);
658
661
  outline-offset: 2px;
659
662
  z-index: 1;
660
663
  }
661
664
  @media (hover: hover) and (pointer: fine) {
662
- ._ExternalInput_wprq3_1:not(._ExternalInput--readOnly_wprq3_31) ._ExternalInput-button_wprq3_5:hover,
663
- ._ExternalInput_wprq3_1:not(._ExternalInput--readOnly_wprq3_31) ._ExternalInput-detachButton_wprq3_35:hover {
665
+ ._ExternalInput_8wgzm_1:not(._ExternalInput--readOnly_8wgzm_31) ._ExternalInput-button_8wgzm_5:hover,
666
+ ._ExternalInput_8wgzm_1:not(._ExternalInput--readOnly_8wgzm_31) ._ExternalInput-detachButton_8wgzm_35:hover {
664
667
  background: var(--puck-color-azure-12);
665
668
  transition: none;
666
669
  }
667
- ._ExternalInput_wprq3_1:not(._ExternalInput--readOnly_wprq3_31) ._ExternalInput-detachButton_wprq3_35:hover {
670
+ ._ExternalInput_8wgzm_1:not(._ExternalInput--readOnly_8wgzm_31) ._ExternalInput-detachButton_8wgzm_35:hover {
668
671
  color: var(--puck-color-azure-04);
669
672
  }
670
673
  }
671
- ._ExternalInput_wprq3_1:not(._ExternalInput--readOnly_wprq3_31) ._ExternalInput-button_wprq3_5:active,
672
- ._ExternalInput_wprq3_1:not(._ExternalInput--readOnly_wprq3_31) ._ExternalInput-detachButton_wprq3_35:active {
674
+ ._ExternalInput_8wgzm_1:not(._ExternalInput--readOnly_8wgzm_31) ._ExternalInput-button_8wgzm_5:active,
675
+ ._ExternalInput_8wgzm_1:not(._ExternalInput--readOnly_8wgzm_31) ._ExternalInput-detachButton_8wgzm_35:active {
673
676
  background: var(--puck-color-azure-11);
674
677
  transition: none;
675
678
  }
676
- ._ExternalInputModal_wprq3_79 {
679
+ ._ExternalInputModal_8wgzm_79 {
677
680
  color: var(--puck-color-black);
678
681
  display: grid;
679
682
  grid-template-rows: min-content minmax(128px, 100%) min-content;
@@ -682,35 +685,35 @@ textarea._Input-input_3pq3z_47 {
682
685
  min-height: 50dvh;
683
686
  max-height: 90dvh;
684
687
  }
685
- ._ExternalInputModal-grid_wprq3_89 {
688
+ ._ExternalInputModal-grid_8wgzm_89 {
686
689
  display: flex;
687
690
  flex-direction: column;
688
691
  }
689
692
  @media (min-width: 458px) {
690
- ._ExternalInputModal-grid_wprq3_89 {
693
+ ._ExternalInputModal-grid_8wgzm_89 {
691
694
  display: grid;
692
695
  grid-template-columns: 100%;
693
696
  }
694
- ._ExternalInputModal--filtersToggled_wprq3_100 ._ExternalInputModal-grid_wprq3_89 {
697
+ ._ExternalInputModal--filtersToggled_8wgzm_100 ._ExternalInputModal-grid_8wgzm_89 {
695
698
  grid-template-columns: 25% 75%;
696
699
  }
697
700
  }
698
- ._ExternalInputModal-filters_wprq3_105 {
701
+ ._ExternalInputModal-filters_8wgzm_105 {
699
702
  border-bottom: 1px solid var(--puck-color-grey-09);
700
703
  }
701
- ._ExternalInputModal--filtersToggled_wprq3_100 ._ExternalInputModal-filters_wprq3_105 {
704
+ ._ExternalInputModal--filtersToggled_8wgzm_100 ._ExternalInputModal-filters_8wgzm_105 {
702
705
  display: none;
703
706
  }
704
707
  @media (min-width: 458px) {
705
- ._ExternalInputModal-filters_wprq3_105 {
708
+ ._ExternalInputModal-filters_8wgzm_105 {
706
709
  border-right: 1px solid var(--puck-color-grey-09);
707
710
  display: none;
708
711
  }
709
- ._ExternalInputModal--filtersToggled_wprq3_100 ._ExternalInputModal-filters_wprq3_105 {
712
+ ._ExternalInputModal--filtersToggled_8wgzm_100 ._ExternalInputModal-filters_8wgzm_105 {
710
713
  display: block;
711
714
  }
712
715
  }
713
- ._ExternalInputModal-masthead_wprq3_124 {
716
+ ._ExternalInputModal-masthead_8wgzm_124 {
714
717
  background-color: var(--puck-color-grey-12);
715
718
  border-bottom: 1px solid var(--puck-color-grey-09);
716
719
  display: flex;
@@ -718,13 +721,13 @@ textarea._Input-input_3pq3z_47 {
718
721
  gap: 24px;
719
722
  padding: 24px;
720
723
  }
721
- ._ExternalInputModal-tableWrapper_wprq3_133 {
724
+ ._ExternalInputModal-tableWrapper_8wgzm_133 {
722
725
  position: relative;
723
726
  overflow-x: auto;
724
727
  overflow-y: auto;
725
728
  flex-grow: 1;
726
729
  }
727
- ._ExternalInputModal-table_wprq3_133 {
730
+ ._ExternalInputModal-table_8wgzm_133 {
728
731
  border-collapse: unset;
729
732
  border-spacing: 0px;
730
733
  color: var(--puck-color-grey-02);
@@ -732,51 +735,51 @@ textarea._Input-input_3pq3z_47 {
732
735
  z-index: 0;
733
736
  min-width: 100%;
734
737
  }
735
- ._ExternalInputModal-thead_wprq3_149 {
738
+ ._ExternalInputModal-thead_8wgzm_149 {
736
739
  background-color: var(--puck-color-white);
737
740
  position: sticky;
738
741
  top: 0;
739
742
  z-index: 1;
740
743
  }
741
- ._ExternalInputModal-th_wprq3_149 {
744
+ ._ExternalInputModal-th_8wgzm_149 {
742
745
  border-bottom: 1px solid var(--puck-color-grey-09);
743
746
  color: var(--puck-color-grey-04);
744
747
  font-weight: 500;
745
748
  font-size: 14px;
746
749
  padding: 16px 24px;
747
750
  }
748
- ._ExternalInputModal-td_wprq3_164 {
751
+ ._ExternalInputModal-td_8wgzm_164 {
749
752
  border-bottom: 1px solid var(--puck-color-grey-10);
750
753
  padding: 16px 24px;
751
754
  }
752
- ._ExternalInputModal-tr_wprq3_169 ._ExternalInputModal-td_wprq3_164:first-of-type {
755
+ ._ExternalInputModal-tr_8wgzm_169 ._ExternalInputModal-td_8wgzm_164:first-of-type {
753
756
  font-weight: 500;
754
757
  width: 1%;
755
758
  white-space: nowrap;
756
759
  }
757
760
  @media (hover: hover) and (pointer: fine) {
758
- ._ExternalInputModal-tbody_wprq3_176 ._ExternalInputModal-tr_wprq3_169:hover {
761
+ ._ExternalInputModal-tbody_8wgzm_176 ._ExternalInputModal-tr_8wgzm_169:hover {
759
762
  background: var(--puck-color-azure-12);
760
763
  color: var(--puck-color-azure-04);
761
764
  cursor: pointer;
762
765
  position: relative;
763
766
  margin-left: -5px;
764
767
  }
765
- ._ExternalInputModal-tbody_wprq3_176 ._ExternalInputModal-tr_wprq3_169:hover ._ExternalInputModal-td_wprq3_164:first-of-type {
768
+ ._ExternalInputModal-tbody_8wgzm_176 ._ExternalInputModal-tr_8wgzm_169:hover ._ExternalInputModal-td_8wgzm_164:first-of-type {
766
769
  border-left: 4px solid var(--puck-color-azure-04);
767
770
  padding-left: 20px;
768
771
  }
769
772
  }
770
- ._ExternalInputModal-tbody_wprq3_176 ._ExternalInputModal-tr_wprq3_169:last-of-type ._ExternalInputModal-td_wprq3_164 {
773
+ ._ExternalInputModal-tbody_8wgzm_176 ._ExternalInputModal-tr_8wgzm_169:last-of-type ._ExternalInputModal-td_8wgzm_164 {
771
774
  border-bottom: none;
772
775
  }
773
- ._ExternalInputModal-tableWrapper_wprq3_133 {
776
+ ._ExternalInputModal-tableWrapper_8wgzm_133 {
774
777
  display: none;
775
778
  }
776
- ._ExternalInputModal--hasData_wprq3_202 ._ExternalInputModal-tableWrapper_wprq3_133 {
779
+ ._ExternalInputModal--hasData_8wgzm_202 ._ExternalInputModal-tableWrapper_8wgzm_133 {
777
780
  display: block;
778
781
  }
779
- ._ExternalInputModal-loadingBanner_wprq3_206 {
782
+ ._ExternalInputModal-loadingBanner_8wgzm_206 {
780
783
  display: none;
781
784
  background-color: color-mix(in srgb, var(--puck-color-white) 90%, transparent);
782
785
  padding: 64px;
@@ -788,21 +791,21 @@ textarea._Input-input_3pq3z_47 {
788
791
  right: 0;
789
792
  bottom: 0;
790
793
  }
791
- ._ExternalInputModal--isLoading_wprq3_223 ._ExternalInputModal-loadingBanner_wprq3_206 {
794
+ ._ExternalInputModal--isLoading_8wgzm_223 ._ExternalInputModal-loadingBanner_8wgzm_206 {
792
795
  display: flex;
793
796
  }
794
- ._ExternalInputModal-searchForm_wprq3_227 {
797
+ ._ExternalInputModal-searchForm_8wgzm_227 {
795
798
  display: flex;
796
799
  flex-wrap: wrap;
797
800
  gap: 12px;
798
801
  flex-grow: 1;
799
802
  }
800
803
  @media (min-width: 458px) {
801
- ._ExternalInputModal-searchForm_wprq3_227 {
804
+ ._ExternalInputModal-searchForm_8wgzm_227 {
802
805
  flex-wrap: nowrap;
803
806
  }
804
807
  }
805
- ._ExternalInputModal-search_wprq3_227 {
808
+ ._ExternalInputModal-search_8wgzm_227 {
806
809
  display: flex;
807
810
  background: var(--puck-color-white);
808
811
  border-width: 1px;
@@ -812,18 +815,18 @@ textarea._Input-input_3pq3z_47 {
812
815
  flex-grow: 1;
813
816
  transition: border-color 50ms ease-in;
814
817
  }
815
- ._ExternalInputModal-search_wprq3_227:focus-within {
818
+ ._ExternalInputModal-search_8wgzm_227:focus-within {
816
819
  border-color: var(--puck-color-grey-05);
817
820
  outline: 2px solid var(--puck-color-azure-05);
818
821
  transition: none;
819
822
  }
820
823
  @media (hover: hover) and (pointer: fine) {
821
- ._ExternalInputModal-search_wprq3_227:hover {
824
+ ._ExternalInputModal-search_8wgzm_227:hover {
822
825
  border-color: var(--puck-color-grey-05);
823
826
  transition: none;
824
827
  }
825
828
  }
826
- ._ExternalInputModal-searchIcon_wprq3_264 {
829
+ ._ExternalInputModal-searchIcon_8wgzm_264 {
827
830
  align-items: center;
828
831
  background: var(--puck-color-grey-12);
829
832
  border-bottom-left-radius: 4px;
@@ -835,17 +838,17 @@ textarea._Input-input_3pq3z_47 {
835
838
  padding: 12px 15px;
836
839
  transition: color 50ms ease-in;
837
840
  }
838
- ._ExternalInputModal-search_wprq3_227:focus-within ._ExternalInputModal-searchIcon_wprq3_264 {
841
+ ._ExternalInputModal-search_8wgzm_227:focus-within ._ExternalInputModal-searchIcon_8wgzm_264 {
839
842
  color: var(--puck-color-grey-04);
840
843
  transition: none;
841
844
  }
842
845
  @media (hover: hover) and (pointer: fine) {
843
- ._ExternalInputModal-search_wprq3_227:hover ._ExternalInputModal-searchIcon_wprq3_264 {
846
+ ._ExternalInputModal-search_8wgzm_227:hover ._ExternalInputModal-searchIcon_8wgzm_264 {
844
847
  color: var(--puck-color-grey-04);
845
848
  transition: none;
846
849
  }
847
850
  }
848
- ._ExternalInputModal-searchIconText_wprq3_289 {
851
+ ._ExternalInputModal-searchIconText_8wgzm_289 {
849
852
  clip: rect(0 0 0 0);
850
853
  clip-path: inset(100%);
851
854
  height: 1px;
@@ -854,7 +857,7 @@ textarea._Input-input_3pq3z_47 {
854
857
  white-space: nowrap;
855
858
  width: 1px;
856
859
  }
857
- ._ExternalInputModal-searchInput_wprq3_299 {
860
+ ._ExternalInputModal-searchInput_8wgzm_299 {
858
861
  border: none;
859
862
  border-radius: 4px;
860
863
  background: var(--puck-color-white);
@@ -863,30 +866,32 @@ textarea._Input-input_3pq3z_47 {
863
866
  padding: 12px 15px;
864
867
  width: 100%;
865
868
  }
866
- ._ExternalInputModal-searchInput_wprq3_299:focus {
869
+ ._ExternalInputModal-searchInput_8wgzm_299:focus {
867
870
  outline: 0;
868
871
  }
869
- ._ExternalInputModal-searchActions_wprq3_313 {
872
+ ._ExternalInputModal-searchActions_8wgzm_313 {
870
873
  display: flex;
871
874
  gap: 8px;
872
875
  height: 44px;
873
876
  width: 100%;
874
877
  }
875
878
  @media (min-width: 458px) {
876
- ._ExternalInputModal-searchActions_wprq3_313 {
879
+ ._ExternalInputModal-searchActions_8wgzm_313 {
877
880
  width: auto;
878
881
  }
879
882
  }
880
- ._ExternalInputModal-searchActionIcon_wprq3_326 {
883
+ ._ExternalInputModal-searchActionIcon_8wgzm_326 {
881
884
  align-self: center;
882
885
  }
883
- ._ExternalInputModal-footer_wprq3_330 {
886
+ ._ExternalInputModal-footerContainer_8wgzm_330 {
884
887
  background-color: var(--puck-color-grey-12);
885
888
  border-top: 1px solid var(--puck-color-grey-09);
886
889
  color: var(--puck-color-grey-04);
890
+ padding: 16px;
891
+ }
892
+ ._ExternalInputModal-footer_8wgzm_330 {
887
893
  font-weight: 500;
888
894
  font-size: 14px;
889
- padding: 16px;
890
895
  text-align: right;
891
896
  }
892
897
 
@@ -1060,21 +1065,13 @@ textarea._Input-input_3pq3z_47 {
1060
1065
  }
1061
1066
 
1062
1067
  /* css-module:/home/runner/work/puck/puck/packages/core/components/Drawer/styles.module.css/#css-module-data */
1063
- ._Drawer_1oa7v_1 {
1068
+ ._Drawer_1pb1t_1 {
1069
+ display: flex;
1070
+ flex-direction: column;
1064
1071
  font-family: var(--puck-font-family);
1072
+ gap: 12px;
1065
1073
  }
1066
- ._DrawerItem--disabled_1oa7v_5 ._DrawerItem-draggable_1oa7v_5 {
1067
- background: var(--puck-color-grey-11);
1068
- color: var(--puck-color-grey-05);
1069
- cursor: not-allowed;
1070
- }
1071
- ._DrawerItem-default_1oa7v_11 ._DrawerItem-draggableWrapper_1oa7v_11 {
1072
- padding-bottom: 12px;
1073
- }
1074
- ._DrawerItem_1oa7v_5:last-of-type ._DrawerItem-default_1oa7v_11 ._DrawerItem-draggableWrapper_1oa7v_11 {
1075
- padding-bottom: 0;
1076
- }
1077
- ._DrawerItem-draggable_1oa7v_5 {
1074
+ ._DrawerItem-draggable_1pb1t_8 {
1078
1075
  background: var(--puck-color-white);
1079
1076
  padding: 12px;
1080
1077
  display: flex;
@@ -1085,64 +1082,55 @@ textarea._Input-input_3pq3z_47 {
1085
1082
  align-items: center;
1086
1083
  transition: background-color 50ms ease-in, color 50ms ease-in;
1087
1084
  }
1088
- ._DrawerItem_1oa7v_5:focus-visible {
1085
+ ._DrawerItem--disabled_1pb1t_20 ._DrawerItem-draggable_1pb1t_8 {
1086
+ background: var(--puck-color-grey-11);
1087
+ color: var(--puck-color-grey-05);
1088
+ cursor: not-allowed;
1089
+ }
1090
+ ._DrawerItem_1pb1t_8:focus-visible {
1089
1091
  outline: 0;
1090
1092
  }
1091
- ._Drawer_1oa7v_1:not(._Drawer--isDraggingFrom_1oa7v_36) ._DrawerItem_1oa7v_5:focus-visible ._DrawerItem-draggable_1oa7v_5 {
1093
+ ._Drawer_1pb1t_1:not(._Drawer--isDraggingFrom_1pb1t_30) ._DrawerItem_1pb1t_8:focus-visible ._DrawerItem-draggable_1pb1t_8 {
1092
1094
  border-radius: 4px;
1093
1095
  outline: 2px solid var(--puck-color-azure-05);
1094
1096
  outline-offset: 2px;
1095
1097
  }
1096
1098
  @media (hover: hover) and (pointer: fine) {
1097
- ._Drawer_1oa7v_1:not(._Drawer--isDraggingFrom_1oa7v_36) ._DrawerItem_1oa7v_5:not(._DrawerItem--disabled_1oa7v_5) ._DrawerItem-draggable_1oa7v_5:hover {
1099
+ ._Drawer_1pb1t_1:not(._Drawer--isDraggingFrom_1pb1t_30) ._DrawerItem_1pb1t_8:not(._DrawerItem--disabled_1pb1t_20) ._DrawerItem-draggable_1pb1t_8:hover {
1098
1100
  background-color: var(--puck-color-azure-12);
1099
1101
  color: var(--puck-color-azure-04);
1100
1102
  transition: none;
1101
1103
  }
1102
1104
  }
1103
- ._DrawerItem-name_1oa7v_54 {
1105
+ ._DrawerItem-name_1pb1t_48 {
1104
1106
  overflow-x: hidden;
1105
1107
  text-overflow: ellipsis;
1106
1108
  white-space: nowrap;
1107
1109
  }
1108
1110
 
1109
1111
  /* css-module:/home/runner/work/puck/puck/packages/core/components/DraggableComponent/styles.module.css/#css-module-data */
1110
- ._DraggableComponent_1bhad_1 {
1111
- pointer-events: auto;
1112
- --overlay-background: color-mix( in srgb, var(--puck-color-azure-08) 30%, transparent );
1113
- }
1114
- ._DraggableComponent--isDragging_1bhad_11 {
1115
- background: color-mix(in srgb, var(--puck-color-azure-08) 10%, transparent);
1116
- overflow: hidden;
1117
- }
1118
- ._DraggableComponent-contents_1bhad_16 {
1119
- position: relative;
1112
+ ._DraggableComponent_33bhx_1 {
1113
+ opacity: 0;
1114
+ position: absolute;
1120
1115
  pointer-events: none;
1121
- z-index: 0;
1122
- }
1123
- ._DraggableComponent-contents_1bhad_16::before,
1124
- ._DraggableComponent-contents_1bhad_16::after {
1125
- content: " ";
1126
- display: table;
1116
+ --overlay-background: color-mix( in srgb, var(--puck-color-azure-08) 30%, transparent );
1127
1117
  }
1128
- ._DraggableComponent-overlay_1bhad_29 {
1118
+ ._DraggableComponent-overlay_33bhx_13 {
1129
1119
  cursor: pointer;
1130
1120
  height: 100%;
1131
1121
  width: 100%;
1132
1122
  top: 0;
1123
+ outline: 2px var(--puck-color-azure-09) solid;
1133
1124
  outline-offset: -2px;
1134
1125
  position: absolute;
1135
1126
  pointer-events: none;
1136
1127
  box-sizing: border-box;
1137
1128
  z-index: 1;
1138
1129
  }
1139
- ._DraggableComponent_1bhad_1:focus-visible > ._DraggableComponent-overlay_1bhad_29 {
1130
+ ._DraggableComponent_33bhx_1:focus-visible > ._DraggableComponent-overlay_33bhx_13 {
1140
1131
  outline: 1px solid var(--puck-color-azure-05);
1141
1132
  }
1142
- ._DraggableComponent--isDragging_1bhad_11 > ._DraggableComponent-overlay_1bhad_29 {
1143
- outline: 2px var(--puck-color-azure-09) solid !important;
1144
- }
1145
- ._DraggableComponent-loadingOverlay_1bhad_49 {
1133
+ ._DraggableComponent-loadingOverlay_33bhx_30 {
1146
1134
  background: var(--puck-color-white);
1147
1135
  color: var(--puck-color-grey-03);
1148
1136
  border-radius: 4px;
@@ -1157,89 +1145,82 @@ textarea._Input-input_3pq3z_47 {
1157
1145
  opacity: 0.8;
1158
1146
  z-index: 1;
1159
1147
  }
1160
- ._DraggableComponent_1bhad_1:hover:not(._DraggableComponent--isLocked_1bhad_65) > ._DraggableComponent-overlay_1bhad_29 {
1148
+ ._DraggableComponent--hover_33bhx_46:not(._DraggableComponent--isLocked_33bhx_46) > ._DraggableComponent-overlay_33bhx_13 {
1161
1149
  background: var(--overlay-background);
1162
- pointer-events: none;
1163
1150
  }
1164
- ._DraggableComponent--forceHover_1bhad_71 > ._DraggableComponent-overlay_1bhad_29 {
1165
- background: var(--overlay-background);
1166
- pointer-events: none;
1151
+ ._DraggableComponent--hover_33bhx_46 > ._DraggableComponent-overlay_33bhx_13 {
1152
+ outline: 2px var(--puck-color-azure-09) solid;
1167
1153
  }
1168
- ._DraggableComponent_1bhad_1:not(._DraggableComponent--isSelected_1bhad_76):hover > ._DraggableComponent-overlay_1bhad_29 {
1169
- outline: 2px var(--puck-color-azure-09) solid !important;
1154
+ ._DraggableComponent--isSelected_33bhx_55 > ._DraggableComponent-overlay_33bhx_13 {
1155
+ outline-color: var(--puck-color-azure-07);
1170
1156
  }
1171
- ._DraggableComponent--indicativeHover_1bhad_81 > ._DraggableComponent-overlay_1bhad_29 {
1172
- pointer-events: none;
1173
- }
1174
- ._DraggableComponent_1bhad_1:not(._DraggableComponent--isSelected_1bhad_76):has(._DraggableComponent_1bhad_1:hover > ._DraggableComponent-overlay_1bhad_29) > ._DraggableComponent-overlay_1bhad_29 {
1157
+ ._DraggableComponent_33bhx_1:has(._DraggableComponent--hover_33bhx_46 > ._DraggableComponent-overlay_33bhx_13) > ._DraggableComponent-overlay_33bhx_13 {
1175
1158
  display: none;
1176
1159
  }
1177
- ._DraggableComponent--isSelected_1bhad_76 > ._DraggableComponent-overlay_1bhad_29 {
1178
- outline: 2px var(--puck-color-azure-07) solid !important;
1179
- }
1180
- ._DraggableComponent--isSelected_1bhad_76 > ._DraggableComponent-actionsOverlay_1bhad_97 {
1181
- display: block;
1160
+ ._DraggableComponent-actionsOverlay_33bhx_67 {
1182
1161
  position: sticky;
1183
1162
  z-index: 2;
1184
1163
  }
1185
- ._DraggableComponent-actions_1bhad_97 {
1164
+ ._DraggableComponent-actions_33bhx_67 {
1186
1165
  position: absolute;
1187
1166
  width: auto;
1188
1167
  cursor: grab;
1189
- display: none;
1168
+ display: flex;
1190
1169
  pointer-events: auto;
1191
1170
  box-sizing: border-box;
1192
1171
  transform-origin: right top;
1193
1172
  }
1194
- ._DraggableComponent--isSelected_1bhad_76 > ._DraggableComponent-actionsOverlay_1bhad_97 > ._DraggableComponent-actions_1bhad_97 {
1195
- display: flex;
1196
- }
1197
1173
 
1198
1174
  /* css-module:/home/runner/work/puck/puck/packages/core/components/DropZone/styles.module.css/#css-module-data */
1199
- ._DropZone_djoti_1 {
1200
- margin-left: auto;
1201
- margin-right: auto;
1175
+ ._DropZone_q2ip3_1 {
1176
+ --drop-animation-ms: 250ms;
1177
+ --resize-animation-ms: 150ms;
1202
1178
  position: relative;
1203
- min-height: 100%;
1179
+ height: 100%;
1180
+ min-height: var(--min-empty-height);
1204
1181
  outline-offset: -2px;
1205
1182
  width: 100%;
1206
1183
  }
1207
- ._DropZone-content_djoti_10 {
1208
- min-height: 128px;
1209
- height: 100%;
1184
+ ._DropZone--hasChildren_q2ip3_12 {
1185
+ min-height: 0;
1210
1186
  }
1211
- ._DropZone--userIsDragging_djoti_15 ._DropZone-content_djoti_10 {
1212
- pointer-events: all;
1187
+ ._DropZone_q2ip3_1:empty {
1188
+ min-height: var(--min-empty-height);
1213
1189
  }
1214
- ._DropZone--userIsDragging_djoti_15:not(._DropZone--draggingOverArea_djoti_19):not(._DropZone--draggingNewComponent_djoti_20) > ._DropZone-content_djoti_10 {
1215
- pointer-events: none;
1190
+ ._DropZone--hasChildren_q2ip3_12:not(._DropZone--userIsDragging_q2ip3_20) {
1191
+ transition: min-height var(--resize-animation-ms) var(--drop-animation-ms) ease-in;
1192
+ }
1193
+ ._DropZone_q2ip3_1:empty:not(._DropZone--userIsDragging_q2ip3_20) {
1194
+ transition: min-height var(--resize-animation-ms) ease-in;
1216
1195
  }
1217
- ._DropZone--isAreaSelected_djoti_26,
1218
- ._DropZone--draggingOverArea_djoti_19:not(:has(._DropZone--hoveringOverArea_djoti_27)),
1219
- ._DropZone--hoveringOverArea_djoti_27:not(._DropZone--isDisabled_djoti_28):not(._DropZone--isRootZone_djoti_29):not(._DropZone--hasChildren_djoti_30) {
1196
+ ._DropZone--isAreaSelected_q2ip3_29,
1197
+ ._DropZone--hoveringOverArea_q2ip3_30:not(._DropZone--isRootZone_q2ip3_30) {
1220
1198
  background: color-mix(in srgb, var(--puck-color-azure-09) 30%, transparent);
1221
1199
  outline: 2px dashed var(--puck-color-azure-08);
1222
1200
  }
1223
- ._DropZone_djoti_1:not(._DropZone--hasChildren_djoti_30) {
1201
+ ._DropZone_q2ip3_1:empty {
1224
1202
  background: color-mix(in srgb, var(--puck-color-azure-09) 30%, transparent);
1225
1203
  outline: 2px dashed var(--puck-color-azure-08);
1226
1204
  }
1227
- ._DropZone--isDestination_djoti_40 {
1205
+ ._DropZone--isDestination_q2ip3_40 {
1228
1206
  outline: 2px dashed var(--puck-color-azure-04) !important;
1229
1207
  }
1230
- ._DropZone--isDestination_djoti_40:not(._DropZone--isRootZone_djoti_29) {
1208
+ ._DropZone--isDestination_q2ip3_40:not(._DropZone--isRootZone_q2ip3_30) {
1231
1209
  background: color-mix(in srgb, var(--puck-color-azure-09) 30%, transparent) !important;
1232
1210
  }
1233
- ._DropZone-item_djoti_52 {
1211
+ ._DropZone-item_q2ip3_52 {
1234
1212
  position: relative;
1235
1213
  }
1236
- ._DropZone-hitbox_djoti_56 {
1214
+ ._DropZone-hitbox_q2ip3_56 {
1237
1215
  position: absolute;
1238
1216
  bottom: -12px;
1239
1217
  height: 24px;
1240
1218
  width: 100%;
1241
1219
  z-index: 1;
1242
1220
  }
1221
+ ._DropZone--isEnabled_q2ip3_64._DropZone--userIsDragging_q2ip3_20 {
1222
+ outline: 2px dashed var(--puck-color-azure-06);
1223
+ }
1243
1224
 
1244
1225
  /* css-module:/home/runner/work/puck/puck/packages/core/components/SidebarSection/styles.module.css/#css-module-data */
1245
1226
  ._SidebarSection_125qe_1 {
@@ -1594,12 +1575,13 @@ textarea._Input-input_3pq3z_47 {
1594
1575
  }
1595
1576
 
1596
1577
  /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Preview/styles.module.css/#css-module-data */
1597
- ._PuckPreview_rxwlr_1 {
1578
+ ._PuckPreview_z2rgu_1 {
1579
+ position: relative;
1598
1580
  height: 100%;
1599
1581
  }
1600
- ._PuckPreview-frame_rxwlr_5 {
1582
+ ._PuckPreview-frame_z2rgu_6 {
1601
1583
  border: none;
1602
- min-height: 100%;
1584
+ height: 100%;
1603
1585
  width: 100%;
1604
1586
  }
1605
1587