@measured/puck 0.16.0-canary.abe8c52 → 0.16.0-canary.acdb11d

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.
package/dist/index.css CHANGED
@@ -136,6 +136,67 @@
136
136
 
137
137
  /* styles.css */
138
138
 
139
+ /* css-module:/home/runner/work/puck/puck/packages/core/components/ActionBar/styles.module.css/#css-module-data */
140
+ ._ActionBar_fp58q_1 {
141
+ display: flex;
142
+ width: auto;
143
+ padding: 4px;
144
+ padding-right: 0;
145
+ border-top-left-radius: 8px;
146
+ border-top-right-radius: 8px;
147
+ border-radius: 8px;
148
+ background: var(--puck-color-grey-01);
149
+ color: var(--puck-color-white);
150
+ font-family: var(--puck-font-family);
151
+ gap: 4px;
152
+ min-height: 26px;
153
+ }
154
+ ._ActionBar-actionsLabel_fp58q_16 {
155
+ color: var(--puck-color-grey-08);
156
+ display: flex;
157
+ font-size: var(--puck-font-size-xxxs);
158
+ font-weight: 500;
159
+ justify-content: center;
160
+ align-items: center;
161
+ padding-left: 8px;
162
+ padding-right: 8px;
163
+ text-overflow: ellipsis;
164
+ white-space: nowrap;
165
+ }
166
+ ._ActionBar-group_fp58q_29 {
167
+ border-left: 0.5px solid var(--puck-color-grey-05);
168
+ display: flex;
169
+ padding-left: 4px;
170
+ padding-right: 4px;
171
+ }
172
+ ._ActionBar-action_fp58q_16 {
173
+ background: transparent;
174
+ border: none;
175
+ color: var(--puck-color-grey-08);
176
+ cursor: pointer;
177
+ padding: 6px 8px;
178
+ border-radius: 4px;
179
+ overflow: hidden;
180
+ display: flex;
181
+ align-items: center;
182
+ justify-content: center;
183
+ transition: color 50ms ease-in;
184
+ }
185
+ ._ActionBar-action_fp58q_16:focus-visible {
186
+ outline: 2px solid var(--puck-color-azure-05);
187
+ outline-offset: -2px;
188
+ }
189
+ @media (hover: hover) and (pointer: fine) {
190
+ ._ActionBar-action_fp58q_16:hover {
191
+ color: var(--puck-color-azure-06);
192
+ transition: none;
193
+ }
194
+ }
195
+ ._ActionBar-action_fp58q_16:active {
196
+ color: var(--puck-color-azure-07);
197
+ transition: none;
198
+ }
199
+
139
200
  /* css-module:/home/runner/work/puck/puck/packages/core/components/AutoField/styles.module.css/#css-module-data */
140
201
  ._Input_3pq3z_1 {
141
202
  color: var(--puck-color-grey-04);
@@ -523,24 +584,27 @@ textarea._Input-input_3pq3z_47 {
523
584
  }
524
585
 
525
586
  /* css-module:/home/runner/work/puck/puck/packages/core/components/DragIcon/styles.module.css/#css-module-data */
526
- ._DragIcon_1p5wn_1 {
587
+ ._DragIcon_17p8x_1 {
527
588
  color: var(--puck-color-grey-05);
528
589
  cursor: grab;
529
590
  padding: 4px;
530
591
  border-radius: 4px;
531
592
  }
593
+ ._DragIcon--disabled_17p8x_8 {
594
+ cursor: no-drop;
595
+ }
532
596
  @media (hover: hover) and (pointer: fine) {
533
- ._DragIcon_1p5wn_1:hover {
597
+ ._DragIcon_17p8x_1:not(._DragIcon--disabled_17p8x_8):hover {
534
598
  color: var(--puck-color-azure-05);
535
599
  background-color: var(--puck-color-azure-12);
536
600
  }
537
601
  }
538
602
 
539
603
  /* css-module:/home/runner/work/puck/puck/packages/core/components/ExternalInput/styles.module.css/#css-module-data */
540
- ._ExternalInput-actions_19obq_1 {
604
+ ._ExternalInput-actions_wprq3_1 {
541
605
  display: flex;
542
606
  }
543
- ._ExternalInput-button_19obq_5 {
607
+ ._ExternalInput-button_wprq3_5 {
544
608
  display: flex;
545
609
  gap: 8px;
546
610
  align-items: center;
@@ -549,7 +613,6 @@ textarea._Input-input_3pq3z_47 {
549
613
  border: 1px solid var(--puck-color-grey-09);
550
614
  border-radius: 4px;
551
615
  color: var(--puck-color-azure-04);
552
- cursor: pointer;
553
616
  padding: 12px 16px;
554
617
  font-weight: 500;
555
618
  white-space: nowrap;
@@ -559,19 +622,21 @@ textarea._Input-input_3pq3z_47 {
559
622
  overflow: hidden;
560
623
  flex-grow: 1;
561
624
  }
562
- ._ExternalInput--dataSelected_19obq_25 ._ExternalInput-button_19obq_5 {
625
+ ._ExternalInput--dataSelected_wprq3_24 ._ExternalInput-button_wprq3_5 {
563
626
  color: var(--puck-color-grey-03);
564
627
  display: block;
565
628
  border-top-right-radius: 0px;
566
629
  border-bottom-right-radius: 0px;
567
630
  }
568
- ._ExternalInput-detachButton_19obq_32 {
631
+ ._ExternalInput--readOnly_wprq3_31 ._ExternalInput-button_wprq3_5 {
632
+ background-color: var(--puck-color-grey-11);
633
+ }
634
+ ._ExternalInput-detachButton_wprq3_35 {
569
635
  border: 1px solid var(--puck-color-grey-09);
570
636
  border-top-right-radius: 4px;
571
637
  border-bottom-right-radius: 4px;
572
638
  background-color: var(--puck-color-grey-12);
573
639
  color: var(--puck-color-grey-05);
574
- cursor: pointer;
575
640
  display: flex;
576
641
  gap: 8px;
577
642
  align-items: center;
@@ -581,28 +646,28 @@ textarea._Input-input_3pq3z_47 {
581
646
  transition: background-color 50ms ease-in, color 50ms ease-in;
582
647
  margin-left: -1px;
583
648
  }
584
- ._ExternalInput-button_19obq_5:focus-visible,
585
- ._ExternalInput-detachButton_19obq_32:focus-visible {
649
+ ._ExternalInput-button_wprq3_5:focus-visible,
650
+ ._ExternalInput-detachButton_wprq3_35:focus-visible {
586
651
  outline: 2px solid var(--puck-color-azure-05);
587
652
  outline-offset: 2px;
588
653
  z-index: 1;
589
654
  }
590
655
  @media (hover: hover) and (pointer: fine) {
591
- ._ExternalInput-button_19obq_5:hover,
592
- ._ExternalInput-detachButton_19obq_32:hover {
656
+ ._ExternalInput_wprq3_1:not(._ExternalInput--readOnly_wprq3_31) ._ExternalInput-button_wprq3_5:hover,
657
+ ._ExternalInput_wprq3_1:not(._ExternalInput--readOnly_wprq3_31) ._ExternalInput-detachButton_wprq3_35:hover {
593
658
  background: var(--puck-color-azure-12);
594
659
  transition: none;
595
660
  }
596
- ._ExternalInput-detachButton_19obq_32:hover {
661
+ ._ExternalInput_wprq3_1:not(._ExternalInput--readOnly_wprq3_31) ._ExternalInput-detachButton_wprq3_35:hover {
597
662
  color: var(--puck-color-azure-04);
598
663
  }
599
664
  }
600
- ._ExternalInput-button_19obq_5:active,
601
- ._ExternalInput-detachButton_19obq_32:active {
665
+ ._ExternalInput_wprq3_1:not(._ExternalInput--readOnly_wprq3_31) ._ExternalInput-button_wprq3_5:active,
666
+ ._ExternalInput_wprq3_1:not(._ExternalInput--readOnly_wprq3_31) ._ExternalInput-detachButton_wprq3_35:active {
602
667
  background: var(--puck-color-azure-11);
603
668
  transition: none;
604
669
  }
605
- ._ExternalInputModal_19obq_74 {
670
+ ._ExternalInputModal_wprq3_79 {
606
671
  color: var(--puck-color-black);
607
672
  display: grid;
608
673
  grid-template-rows: min-content minmax(128px, 100%) min-content;
@@ -611,35 +676,35 @@ textarea._Input-input_3pq3z_47 {
611
676
  min-height: 50dvh;
612
677
  max-height: 90dvh;
613
678
  }
614
- ._ExternalInputModal-grid_19obq_84 {
679
+ ._ExternalInputModal-grid_wprq3_89 {
615
680
  display: flex;
616
681
  flex-direction: column;
617
682
  }
618
683
  @media (min-width: 458px) {
619
- ._ExternalInputModal-grid_19obq_84 {
684
+ ._ExternalInputModal-grid_wprq3_89 {
620
685
  display: grid;
621
686
  grid-template-columns: 100%;
622
687
  }
623
- ._ExternalInputModal--filtersToggled_19obq_95 ._ExternalInputModal-grid_19obq_84 {
688
+ ._ExternalInputModal--filtersToggled_wprq3_100 ._ExternalInputModal-grid_wprq3_89 {
624
689
  grid-template-columns: 25% 75%;
625
690
  }
626
691
  }
627
- ._ExternalInputModal-filters_19obq_100 {
692
+ ._ExternalInputModal-filters_wprq3_105 {
628
693
  border-bottom: 1px solid var(--puck-color-grey-09);
629
694
  }
630
- ._ExternalInputModal--filtersToggled_19obq_95 ._ExternalInputModal-filters_19obq_100 {
695
+ ._ExternalInputModal--filtersToggled_wprq3_100 ._ExternalInputModal-filters_wprq3_105 {
631
696
  display: none;
632
697
  }
633
698
  @media (min-width: 458px) {
634
- ._ExternalInputModal-filters_19obq_100 {
699
+ ._ExternalInputModal-filters_wprq3_105 {
635
700
  border-right: 1px solid var(--puck-color-grey-09);
636
701
  display: none;
637
702
  }
638
- ._ExternalInputModal--filtersToggled_19obq_95 ._ExternalInputModal-filters_19obq_100 {
703
+ ._ExternalInputModal--filtersToggled_wprq3_100 ._ExternalInputModal-filters_wprq3_105 {
639
704
  display: block;
640
705
  }
641
706
  }
642
- ._ExternalInputModal-masthead_19obq_119 {
707
+ ._ExternalInputModal-masthead_wprq3_124 {
643
708
  background-color: var(--puck-color-grey-12);
644
709
  border-bottom: 1px solid var(--puck-color-grey-09);
645
710
  display: flex;
@@ -647,13 +712,13 @@ textarea._Input-input_3pq3z_47 {
647
712
  gap: 24px;
648
713
  padding: 24px;
649
714
  }
650
- ._ExternalInputModal-tableWrapper_19obq_128 {
715
+ ._ExternalInputModal-tableWrapper_wprq3_133 {
651
716
  position: relative;
652
717
  overflow-x: auto;
653
718
  overflow-y: auto;
654
719
  flex-grow: 1;
655
720
  }
656
- ._ExternalInputModal-table_19obq_128 {
721
+ ._ExternalInputModal-table_wprq3_133 {
657
722
  border-collapse: unset;
658
723
  border-spacing: 0px;
659
724
  color: var(--puck-color-grey-02);
@@ -661,51 +726,51 @@ textarea._Input-input_3pq3z_47 {
661
726
  z-index: 0;
662
727
  min-width: 100%;
663
728
  }
664
- ._ExternalInputModal-thead_19obq_144 {
729
+ ._ExternalInputModal-thead_wprq3_149 {
665
730
  background-color: var(--puck-color-white);
666
731
  position: sticky;
667
732
  top: 0;
668
733
  z-index: 1;
669
734
  }
670
- ._ExternalInputModal-th_19obq_144 {
735
+ ._ExternalInputModal-th_wprq3_149 {
671
736
  border-bottom: 1px solid var(--puck-color-grey-09);
672
737
  color: var(--puck-color-grey-04);
673
738
  font-weight: 500;
674
739
  font-size: 14px;
675
740
  padding: 16px 24px;
676
741
  }
677
- ._ExternalInputModal-td_19obq_159 {
742
+ ._ExternalInputModal-td_wprq3_164 {
678
743
  border-bottom: 1px solid var(--puck-color-grey-10);
679
744
  padding: 16px 24px;
680
745
  }
681
- ._ExternalInputModal-tr_19obq_164 ._ExternalInputModal-td_19obq_159:first-of-type {
746
+ ._ExternalInputModal-tr_wprq3_169 ._ExternalInputModal-td_wprq3_164:first-of-type {
682
747
  font-weight: 500;
683
748
  width: 1%;
684
749
  white-space: nowrap;
685
750
  }
686
751
  @media (hover: hover) and (pointer: fine) {
687
- ._ExternalInputModal-tbody_19obq_171 ._ExternalInputModal-tr_19obq_164:hover {
752
+ ._ExternalInputModal-tbody_wprq3_176 ._ExternalInputModal-tr_wprq3_169:hover {
688
753
  background: var(--puck-color-azure-12);
689
754
  color: var(--puck-color-azure-04);
690
755
  cursor: pointer;
691
756
  position: relative;
692
757
  margin-left: -5px;
693
758
  }
694
- ._ExternalInputModal-tbody_19obq_171 ._ExternalInputModal-tr_19obq_164:hover ._ExternalInputModal-td_19obq_159:first-of-type {
759
+ ._ExternalInputModal-tbody_wprq3_176 ._ExternalInputModal-tr_wprq3_169:hover ._ExternalInputModal-td_wprq3_164:first-of-type {
695
760
  border-left: 4px solid var(--puck-color-azure-04);
696
761
  padding-left: 20px;
697
762
  }
698
763
  }
699
- ._ExternalInputModal-tbody_19obq_171 ._ExternalInputModal-tr_19obq_164:last-of-type ._ExternalInputModal-td_19obq_159 {
764
+ ._ExternalInputModal-tbody_wprq3_176 ._ExternalInputModal-tr_wprq3_169:last-of-type ._ExternalInputModal-td_wprq3_164 {
700
765
  border-bottom: none;
701
766
  }
702
- ._ExternalInputModal-tableWrapper_19obq_128 {
767
+ ._ExternalInputModal-tableWrapper_wprq3_133 {
703
768
  display: none;
704
769
  }
705
- ._ExternalInputModal--hasData_19obq_197 ._ExternalInputModal-tableWrapper_19obq_128 {
770
+ ._ExternalInputModal--hasData_wprq3_202 ._ExternalInputModal-tableWrapper_wprq3_133 {
706
771
  display: block;
707
772
  }
708
- ._ExternalInputModal-loadingBanner_19obq_201 {
773
+ ._ExternalInputModal-loadingBanner_wprq3_206 {
709
774
  display: none;
710
775
  background-color: color-mix(in srgb, var(--puck-color-white) 90%, transparent);
711
776
  padding: 64px;
@@ -717,21 +782,21 @@ textarea._Input-input_3pq3z_47 {
717
782
  right: 0;
718
783
  bottom: 0;
719
784
  }
720
- ._ExternalInputModal--isLoading_19obq_218 ._ExternalInputModal-loadingBanner_19obq_201 {
785
+ ._ExternalInputModal--isLoading_wprq3_223 ._ExternalInputModal-loadingBanner_wprq3_206 {
721
786
  display: flex;
722
787
  }
723
- ._ExternalInputModal-searchForm_19obq_222 {
788
+ ._ExternalInputModal-searchForm_wprq3_227 {
724
789
  display: flex;
725
790
  flex-wrap: wrap;
726
791
  gap: 12px;
727
792
  flex-grow: 1;
728
793
  }
729
794
  @media (min-width: 458px) {
730
- ._ExternalInputModal-searchForm_19obq_222 {
795
+ ._ExternalInputModal-searchForm_wprq3_227 {
731
796
  flex-wrap: nowrap;
732
797
  }
733
798
  }
734
- ._ExternalInputModal-search_19obq_222 {
799
+ ._ExternalInputModal-search_wprq3_227 {
735
800
  display: flex;
736
801
  background: var(--puck-color-white);
737
802
  border-width: 1px;
@@ -741,18 +806,18 @@ textarea._Input-input_3pq3z_47 {
741
806
  flex-grow: 1;
742
807
  transition: border-color 50ms ease-in;
743
808
  }
744
- ._ExternalInputModal-search_19obq_222:focus-within {
809
+ ._ExternalInputModal-search_wprq3_227:focus-within {
745
810
  border-color: var(--puck-color-grey-05);
746
811
  outline: 2px solid var(--puck-color-azure-05);
747
812
  transition: none;
748
813
  }
749
814
  @media (hover: hover) and (pointer: fine) {
750
- ._ExternalInputModal-search_19obq_222:hover {
815
+ ._ExternalInputModal-search_wprq3_227:hover {
751
816
  border-color: var(--puck-color-grey-05);
752
817
  transition: none;
753
818
  }
754
819
  }
755
- ._ExternalInputModal-searchIcon_19obq_259 {
820
+ ._ExternalInputModal-searchIcon_wprq3_264 {
756
821
  align-items: center;
757
822
  background: var(--puck-color-grey-12);
758
823
  border-bottom-left-radius: 4px;
@@ -764,17 +829,17 @@ textarea._Input-input_3pq3z_47 {
764
829
  padding: 12px 15px;
765
830
  transition: color 50ms ease-in;
766
831
  }
767
- ._ExternalInputModal-search_19obq_222:focus-within ._ExternalInputModal-searchIcon_19obq_259 {
832
+ ._ExternalInputModal-search_wprq3_227:focus-within ._ExternalInputModal-searchIcon_wprq3_264 {
768
833
  color: var(--puck-color-grey-04);
769
834
  transition: none;
770
835
  }
771
836
  @media (hover: hover) and (pointer: fine) {
772
- ._ExternalInputModal-search_19obq_222:hover ._ExternalInputModal-searchIcon_19obq_259 {
837
+ ._ExternalInputModal-search_wprq3_227:hover ._ExternalInputModal-searchIcon_wprq3_264 {
773
838
  color: var(--puck-color-grey-04);
774
839
  transition: none;
775
840
  }
776
841
  }
777
- ._ExternalInputModal-searchIconText_19obq_284 {
842
+ ._ExternalInputModal-searchIconText_wprq3_289 {
778
843
  clip: rect(0 0 0 0);
779
844
  clip-path: inset(100%);
780
845
  height: 1px;
@@ -783,7 +848,7 @@ textarea._Input-input_3pq3z_47 {
783
848
  white-space: nowrap;
784
849
  width: 1px;
785
850
  }
786
- ._ExternalInputModal-searchInput_19obq_294 {
851
+ ._ExternalInputModal-searchInput_wprq3_299 {
787
852
  border: none;
788
853
  border-radius: 4px;
789
854
  background: var(--puck-color-white);
@@ -792,24 +857,24 @@ textarea._Input-input_3pq3z_47 {
792
857
  padding: 12px 15px;
793
858
  width: 100%;
794
859
  }
795
- ._ExternalInputModal-searchInput_19obq_294:focus {
860
+ ._ExternalInputModal-searchInput_wprq3_299:focus {
796
861
  outline: 0;
797
862
  }
798
- ._ExternalInputModal-searchActions_19obq_308 {
863
+ ._ExternalInputModal-searchActions_wprq3_313 {
799
864
  display: flex;
800
865
  gap: 8px;
801
866
  height: 44px;
802
867
  width: 100%;
803
868
  }
804
869
  @media (min-width: 458px) {
805
- ._ExternalInputModal-searchActions_19obq_308 {
870
+ ._ExternalInputModal-searchActions_wprq3_313 {
806
871
  width: auto;
807
872
  }
808
873
  }
809
- ._ExternalInputModal-searchActionIcon_19obq_321 {
874
+ ._ExternalInputModal-searchActionIcon_wprq3_326 {
810
875
  align-self: center;
811
876
  }
812
- ._ExternalInputModal-footer_19obq_325 {
877
+ ._ExternalInputModal-footer_wprq3_330 {
813
878
  background-color: var(--puck-color-grey-12);
814
879
  border-top: 1px solid var(--puck-color-grey-09);
815
880
  color: var(--puck-color-grey-04);
@@ -989,16 +1054,21 @@ textarea._Input-input_3pq3z_47 {
989
1054
  }
990
1055
 
991
1056
  /* css-module:/home/runner/work/puck/puck/packages/core/components/Drawer/styles.module.css/#css-module-data */
992
- ._Drawer_6zh0b_1 {
1057
+ ._Drawer_1oa7v_1 {
993
1058
  font-family: var(--puck-font-family);
994
1059
  }
995
- ._DrawerItem-default_6zh0b_5 ._DrawerItem-draggableWrapper_6zh0b_5 {
1060
+ ._DrawerItem--disabled_1oa7v_5 ._DrawerItem-draggable_1oa7v_5 {
1061
+ background: var(--puck-color-grey-11);
1062
+ color: var(--puck-color-grey-05);
1063
+ cursor: not-allowed;
1064
+ }
1065
+ ._DrawerItem-default_1oa7v_11 ._DrawerItem-draggableWrapper_1oa7v_11 {
996
1066
  padding-bottom: 12px;
997
1067
  }
998
- ._DrawerItem_6zh0b_5:last-of-type ._DrawerItem-default_6zh0b_5 ._DrawerItem-draggableWrapper_6zh0b_5 {
1068
+ ._DrawerItem_1oa7v_5:last-of-type ._DrawerItem-default_1oa7v_11 ._DrawerItem-draggableWrapper_1oa7v_11 {
999
1069
  padding-bottom: 0;
1000
1070
  }
1001
- ._DrawerItem-draggable_6zh0b_5 {
1071
+ ._DrawerItem-draggable_1oa7v_5 {
1002
1072
  background: var(--puck-color-white);
1003
1073
  padding: 12px;
1004
1074
  display: flex;
@@ -1007,50 +1077,49 @@ textarea._Input-input_3pq3z_47 {
1007
1077
  font-size: var(--puck-font-size-xxs);
1008
1078
  justify-content: space-between;
1009
1079
  align-items: center;
1010
- cursor: grab;
1011
1080
  transition: background-color 50ms ease-in, color 50ms ease-in;
1012
1081
  }
1013
- ._DrawerItem_6zh0b_5:focus-visible {
1082
+ ._DrawerItem_1oa7v_5:focus-visible {
1014
1083
  outline: 0;
1015
1084
  }
1016
- ._Drawer_6zh0b_1:not(._Drawer--isDraggingFrom_6zh0b_31) ._DrawerItem_6zh0b_5:focus-visible ._DrawerItem-draggable_6zh0b_5 {
1085
+ ._Drawer_1oa7v_1:not(._Drawer--isDraggingFrom_1oa7v_36) ._DrawerItem_1oa7v_5:focus-visible ._DrawerItem-draggable_1oa7v_5 {
1017
1086
  border-radius: 4px;
1018
1087
  outline: 2px solid var(--puck-color-azure-05);
1019
1088
  outline-offset: 2px;
1020
1089
  }
1021
1090
  @media (hover: hover) and (pointer: fine) {
1022
- ._Drawer_6zh0b_1:not(._Drawer--isDraggingFrom_6zh0b_31) ._DrawerItem-draggable_6zh0b_5:hover {
1091
+ ._Drawer_1oa7v_1:not(._Drawer--isDraggingFrom_1oa7v_36) ._DrawerItem_1oa7v_5:not(._DrawerItem--disabled_1oa7v_5) ._DrawerItem-draggable_1oa7v_5:hover {
1023
1092
  background-color: var(--puck-color-azure-12);
1024
1093
  color: var(--puck-color-azure-04);
1025
1094
  transition: none;
1026
1095
  }
1027
1096
  }
1028
- ._DrawerItem-name_6zh0b_47 {
1097
+ ._DrawerItem-name_1oa7v_54 {
1029
1098
  overflow-x: hidden;
1030
1099
  text-overflow: ellipsis;
1031
1100
  white-space: nowrap;
1032
1101
  }
1033
1102
 
1034
1103
  /* css-module:/home/runner/work/puck/puck/packages/core/components/DraggableComponent/styles.module.css/#css-module-data */
1035
- ._DraggableComponent_59z7f_1 {
1104
+ ._DraggableComponent_1bhad_1 {
1036
1105
  pointer-events: auto;
1037
1106
  --overlay-background: color-mix( in srgb, var(--puck-color-azure-08) 30%, transparent );
1038
1107
  }
1039
- ._DraggableComponent--isDragging_59z7f_11 {
1108
+ ._DraggableComponent--isDragging_1bhad_11 {
1040
1109
  background: color-mix(in srgb, var(--puck-color-azure-08) 10%, transparent);
1041
1110
  overflow: hidden;
1042
1111
  }
1043
- ._DraggableComponent-contents_59z7f_16 {
1112
+ ._DraggableComponent-contents_1bhad_16 {
1044
1113
  position: relative;
1045
1114
  pointer-events: none;
1046
1115
  z-index: 0;
1047
1116
  }
1048
- ._DraggableComponent-contents_59z7f_16::before,
1049
- ._DraggableComponent-contents_59z7f_16::after {
1117
+ ._DraggableComponent-contents_1bhad_16::before,
1118
+ ._DraggableComponent-contents_1bhad_16::after {
1050
1119
  content: " ";
1051
1120
  display: table;
1052
1121
  }
1053
- ._DraggableComponent-overlay_59z7f_29 {
1122
+ ._DraggableComponent-overlay_1bhad_29 {
1054
1123
  cursor: pointer;
1055
1124
  height: 100%;
1056
1125
  width: 100%;
@@ -1061,13 +1130,13 @@ textarea._Input-input_3pq3z_47 {
1061
1130
  box-sizing: border-box;
1062
1131
  z-index: 1;
1063
1132
  }
1064
- ._DraggableComponent_59z7f_1:focus-visible > ._DraggableComponent-overlay_59z7f_29 {
1133
+ ._DraggableComponent_1bhad_1:focus-visible > ._DraggableComponent-overlay_1bhad_29 {
1065
1134
  outline: 1px solid var(--puck-color-azure-05);
1066
1135
  }
1067
- ._DraggableComponent--isDragging_59z7f_11 > ._DraggableComponent-overlay_59z7f_29 {
1136
+ ._DraggableComponent--isDragging_1bhad_11 > ._DraggableComponent-overlay_1bhad_29 {
1068
1137
  outline: 2px var(--puck-color-azure-09) solid !important;
1069
1138
  }
1070
- ._DraggableComponent-loadingOverlay_59z7f_49 {
1139
+ ._DraggableComponent-loadingOverlay_1bhad_49 {
1071
1140
  background: var(--puck-color-white);
1072
1141
  color: var(--puck-color-grey-03);
1073
1142
  border-radius: 4px;
@@ -1082,91 +1151,42 @@ textarea._Input-input_3pq3z_47 {
1082
1151
  opacity: 0.8;
1083
1152
  z-index: 1;
1084
1153
  }
1085
- ._DraggableComponent_59z7f_1:hover:not(._DraggableComponent--isLocked_59z7f_65) > ._DraggableComponent-overlay_59z7f_29 {
1154
+ ._DraggableComponent_1bhad_1:hover:not(._DraggableComponent--isLocked_1bhad_65) > ._DraggableComponent-overlay_1bhad_29 {
1086
1155
  background: var(--overlay-background);
1087
1156
  pointer-events: none;
1088
1157
  }
1089
- ._DraggableComponent--forceHover_59z7f_71 > ._DraggableComponent-overlay_59z7f_29 {
1158
+ ._DraggableComponent--forceHover_1bhad_71 > ._DraggableComponent-overlay_1bhad_29 {
1090
1159
  background: var(--overlay-background);
1091
1160
  pointer-events: none;
1092
1161
  }
1093
- ._DraggableComponent_59z7f_1:not(._DraggableComponent--isSelected_59z7f_76):hover > ._DraggableComponent-overlay_59z7f_29 {
1162
+ ._DraggableComponent_1bhad_1:not(._DraggableComponent--isSelected_1bhad_76):hover > ._DraggableComponent-overlay_1bhad_29 {
1094
1163
  outline: 2px var(--puck-color-azure-09) solid !important;
1095
1164
  }
1096
- ._DraggableComponent--indicativeHover_59z7f_81 > ._DraggableComponent-overlay_59z7f_29 {
1165
+ ._DraggableComponent--indicativeHover_1bhad_81 > ._DraggableComponent-overlay_1bhad_29 {
1097
1166
  pointer-events: none;
1098
1167
  }
1099
- ._DraggableComponent_59z7f_1:not(._DraggableComponent--isSelected_59z7f_76):has(._DraggableComponent_59z7f_1:hover > ._DraggableComponent-overlay_59z7f_29) > ._DraggableComponent-overlay_59z7f_29 {
1168
+ ._DraggableComponent_1bhad_1:not(._DraggableComponent--isSelected_1bhad_76):has(._DraggableComponent_1bhad_1:hover > ._DraggableComponent-overlay_1bhad_29) > ._DraggableComponent-overlay_1bhad_29 {
1100
1169
  display: none;
1101
1170
  }
1102
- ._DraggableComponent--isSelected_59z7f_76 > ._DraggableComponent-overlay_59z7f_29 {
1171
+ ._DraggableComponent--isSelected_1bhad_76 > ._DraggableComponent-overlay_1bhad_29 {
1103
1172
  outline: 2px var(--puck-color-azure-07) solid !important;
1104
1173
  }
1105
- ._DraggableComponent--isSelected_59z7f_76 > ._DraggableComponent-actionsOverlay_59z7f_97 {
1174
+ ._DraggableComponent--isSelected_1bhad_76 > ._DraggableComponent-actionsOverlay_1bhad_97 {
1106
1175
  display: block;
1107
1176
  position: sticky;
1108
1177
  z-index: 2;
1109
1178
  }
1110
- ._DraggableComponent-actions_59z7f_97 {
1179
+ ._DraggableComponent-actions_1bhad_97 {
1111
1180
  position: absolute;
1112
1181
  width: auto;
1113
- padding: 4px;
1114
- border-top-left-radius: 8px;
1115
- border-top-right-radius: 8px;
1116
- border-radius: 8px;
1117
- background: var(--puck-color-grey-01);
1118
- color: var(--puck-color-white);
1119
1182
  cursor: grab;
1120
1183
  display: none;
1121
- font-family: var(--puck-font-family);
1122
- gap: 4px;
1123
1184
  pointer-events: auto;
1124
1185
  box-sizing: border-box;
1125
1186
  transform-origin: right top;
1126
1187
  }
1127
- ._DraggableComponent--isSelected_59z7f_76 > ._DraggableComponent-actionsOverlay_59z7f_97 > ._DraggableComponent-actions_59z7f_97 {
1128
- display: flex;
1129
- }
1130
- ._DraggableComponent-actionsLabel_59z7f_127 {
1131
- color: var(--puck-color-grey-08);
1132
- display: flex;
1133
- font-size: var(--puck-font-size-xxxs);
1134
- font-weight: 500;
1135
- justify-content: center;
1136
- align-items: center;
1137
- padding-left: 8px;
1138
- padding-right: 16px;
1139
- margin-right: 8px;
1140
- border-right: 0.5px solid var(--puck-color-grey-05);
1141
- text-overflow: ellipsis;
1142
- white-space: nowrap;
1143
- }
1144
- ._DraggableComponent-action_59z7f_97 {
1145
- background: transparent;
1146
- border: none;
1147
- color: var(--puck-color-grey-08);
1148
- cursor: pointer;
1149
- padding: 6px 8px;
1150
- border-radius: 4px;
1151
- overflow: hidden;
1188
+ ._DraggableComponent--isSelected_1bhad_76 > ._DraggableComponent-actionsOverlay_1bhad_97 > ._DraggableComponent-actions_1bhad_97 {
1152
1189
  display: flex;
1153
- align-items: center;
1154
- justify-content: center;
1155
- transition: color 50ms ease-in;
1156
- }
1157
- ._DraggableComponent-action_59z7f_97:focus-visible {
1158
- outline: 2px solid var(--puck-color-azure-05);
1159
- outline-offset: -2px;
1160
- }
1161
- @media (hover: hover) and (pointer: fine) {
1162
- ._DraggableComponent-action_59z7f_97:hover {
1163
- color: var(--puck-color-azure-06);
1164
- transition: none;
1165
- }
1166
- }
1167
- ._DraggableComponent-action_59z7f_97:active {
1168
- color: var(--puck-color-azure-07);
1169
- transition: none;
1170
1190
  }
1171
1191
 
1172
1192
  /* css-module:/home/runner/work/puck/puck/packages/core/components/DropZone/styles.module.css/#css-module-data */
@@ -1715,7 +1735,7 @@ textarea._Input-input_3pq3z_47 {
1715
1735
  }
1716
1736
 
1717
1737
  /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Canvas/styles.module.css/#css-module-data */
1718
- ._PuckCanvas_6zd4y_1 {
1738
+ ._PuckCanvas_esbg1_1 {
1719
1739
  background: var(--puck-color-grey-11);
1720
1740
  display: flex;
1721
1741
  grid-area: editor;
@@ -1724,15 +1744,15 @@ textarea._Input-input_3pq3z_47 {
1724
1744
  overflow: auto;
1725
1745
  }
1726
1746
  @media (min-width: 1198px) {
1727
- ._PuckCanvas_6zd4y_1 {
1747
+ ._PuckCanvas_esbg1_1 {
1728
1748
  padding: calc(var(--puck-space-px) * 1.5);
1729
1749
  padding-top: var(--puck-space-px);
1730
1750
  }
1731
- ._PuckCanvas_6zd4y_1:not(._PuckCanvas_6zd4y_1:has(._PuckCanvas-controls_6zd4y_16)) {
1751
+ ._PuckCanvas_esbg1_1:not(._PuckCanvas_esbg1_1:has(._PuckCanvas-controls_esbg1_16)) {
1732
1752
  padding-top: calc(var(--puck-space-px) * 1.5);
1733
1753
  }
1734
1754
  }
1735
- ._PuckCanvas-inner_6zd4y_21 {
1755
+ ._PuckCanvas-inner_esbg1_21 {
1736
1756
  box-sizing: border-box;
1737
1757
  display: flex;
1738
1758
  height: 100%;
@@ -1742,7 +1762,7 @@ textarea._Input-input_3pq3z_47 {
1742
1762
  position: relative;
1743
1763
  width: 100%;
1744
1764
  }
1745
- ._PuckCanvas-root_6zd4y_32 {
1765
+ ._PuckCanvas-root_esbg1_32 {
1746
1766
  background: white;
1747
1767
  border: 1px solid var(--puck-color-grey-09);
1748
1768
  box-sizing: border-box;
@@ -1754,16 +1774,32 @@ textarea._Input-input_3pq3z_47 {
1754
1774
  opacity: 0;
1755
1775
  }
1756
1776
  @media (min-width: 1198px) {
1757
- ._PuckCanvas-root_6zd4y_32 {
1777
+ ._PuckCanvas-root_esbg1_32 {
1758
1778
  min-width: unset;
1759
1779
  }
1760
1780
  }
1761
1781
  @media (prefers-reduced-motion: reduce) {
1762
- ._PuckCanvas-root_6zd4y_32 {
1782
+ ._PuckCanvas-root_esbg1_32 {
1763
1783
  transition: none !important;
1764
1784
  }
1765
1785
  }
1766
- ._PuckCanvas--ready_6zd4y_56 ._PuckCanvas-root_6zd4y_32 {
1786
+ ._PuckCanvas--ready_esbg1_56 ._PuckCanvas-root_esbg1_32 {
1787
+ opacity: 1;
1788
+ }
1789
+ ._PuckCanvas-loader_esbg1_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_esbg1_70 ._PuckCanvas-loader_esbg1_60 {
1767
1799
  opacity: 1;
1768
- transition: opacity 150ms ease-out;
1800
+ }
1801
+ ._PuckCanvas--showLoader_esbg1_70._PuckCanvas--ready_esbg1_56 ._PuckCanvas-loader_esbg1_60 {
1802
+ opacity: 0;
1803
+ height: 0;
1804
+ transition: none;
1769
1805
  }