@measured/puck 0.12.0-canary.c85f82f → 0.12.0-canary.da2bc0f

package/dist/index.css

@@ -130,11 +130,12 @@
     Segoe UI Emoji,
     Segoe UI Symbol;
   --puck-font-family-monospaced:
-    "Menlo",
-    "Monaco",
-    "Liberation Mono",
-    "Consolas",
-    "Courier New",
+    ui-monospace,
+    "Cascadia Code",
+    "Source Code Pro",
+    Menlo,
+    Consolas,
+    "DejaVu Sans Mono",
     monospace;
   --puck-font-family-proportional: var(--puck-font-stack), sans-serif;
 }
@@ -142,7 +143,7 @@
 /* styles/global.css */
 
 /* css-module:/home/runner/work/puck/puck/packages/core/components/Button/Button.module.css/#css-module-data */
-._Button_1muck_1 {
+._Button_zx1c8_1 {
   appearance: none;
   background: none;
   border: none;
@@ -152,6 +153,7 @@
   align-items: center;
   gap: 8px;
   letter-spacing: 0.05ch;
+  font-family: var(--puck-font-family);
   font-size: 14px;
   font-weight: 500;
   text-align: center;
@@ -160,52 +162,52 @@
   white-space: nowrap;
   margin: 0;
 }
-._Button--medium_1muck_20 {
+._Button--medium_zx1c8_21 {
   padding-bottom: 8px;
   padding-left: 20px;
   padding-right: 20px;
   padding-top: 8px;
 }
-._Button--large_1muck_27 {
+._Button--large_zx1c8_28 {
   padding-bottom: 12px;
   padding-left: 20px;
   padding-right: 20px;
   padding-top: 12px;
 }
-._Button-icon_1muck_34 {
+._Button-icon_zx1c8_35 {
   margin-top: 2px;
 }
-._Button_1muck_1:hover {
+._Button_zx1c8_1:hover {
   text-decoration: none;
 }
-._Button--primary_1muck_42 {
+._Button--primary_zx1c8_43 {
   background: var(--puck-color-blue);
 }
-._Button--primary_1muck_42:hover {
+._Button--primary_zx1c8_43:hover {
   opacity: 0.7;
   transition: opacity 50ms ease-in;
 }
-._Button--secondary_1muck_51 {
+._Button--secondary_zx1c8_52 {
   color: currentColor;
   border: 1px solid currentColor;
 }
-._Button--secondary_1muck_51:hover {
+._Button--secondary_zx1c8_52:hover {
   background-color: var(--puck-color-grey-10);
   color: black;
   opacity: 0.7;
 }
-._Button--flush_1muck_62 {
+._Button--flush_zx1c8_63 {
   border-radius: 0;
 }
-._Button--disabled_1muck_66 {
+._Button--disabled_zx1c8_67 {
   background: var(--puck-color-grey-10);
   color: black;
   cursor: not-allowed;
 }
-._Button--disabled_1muck_66:hover {
+._Button--disabled_zx1c8_67:hover {
   opacity: 1;
 }
-._Button--fullWidth_1muck_76 {
+._Button--fullWidth_zx1c8_77 {
   width: 100%;
 }
 
@@ -397,52 +399,54 @@
 }
 
 /* css-module:/home/runner/work/puck/puck/packages/core/components/InputOrGroup/styles.module.css/#css-module-data */
-._Input_1kw16_1 {
+._Input_199j9_1 {
   color: var(--puck-color-grey-3);
   padding: 16px;
   padding-bottom: 12px;
   display: block;
   font-family: var(--puck-font-stack);
 }
-._Input_1kw16_1 ._Input_1kw16_1 {
+._Input_199j9_1 ._Input_199j9_1 {
   padding: 0px;
 }
-._Input_1kw16_1 * {
+._Input_199j9_1 * {
   box-sizing: border-box;
 }
-._Input_1kw16_1 + ._Input_1kw16_1 {
+._Input_199j9_1 + ._Input_199j9_1 {
   border-top: 1px solid var(--puck-color-grey-8);
   margin-top: 8px;
 }
-._Input_1kw16_1 ._Input_1kw16_1 + ._Input_1kw16_1 {
+._Input_199j9_1 ._Input_199j9_1 + ._Input_199j9_1 {
   border-top: 0px;
   margin-top: 12px;
 }
-._Input-label_1kw16_27 {
+._Input-label_199j9_27 {
+  align-items: center;
   display: flex;
   padding-bottom: 12px;
   font-size: var(--puck-font-size-xxs);
   font-weight: 600;
 }
-._Input-labelIcon_1kw16_34 {
+._Input-labelIcon_199j9_35 {
   color: var(--puck-color-grey-6);
   margin-right: 4px;
   padding-left: 4px;
 }
-._Input-disabledIcon_1kw16_40 {
+._Input-disabledIcon_199j9_41 {
   color: var(--puck-color-grey-4);
   margin-left: auto;
 }
-._Input-input_1kw16_45 {
+._Input-input_199j9_46 {
+  background: white;
   border-width: 1px;
   border-style: solid;
   border-color: var(--puck-color-grey-8);
   border-radius: 4px;
   font-family: inherit;
-  padding: 12px 16px;
+  padding: 12px 15px;
   width: 100%;
 }
-._Input_1kw16_1 select._Input-input_1kw16_45 {
+._Input_199j9_1 select._Input-input_199j9_46 {
   appearance: none;
   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;
   background-size: 12px;
@@ -450,76 +454,81 @@
   background-repeat: no-repeat;
   background-color: white;
 }
-._Input--readOnly_1kw16_66 > ._Input-input_1kw16_45,
-._Input--readOnly_1kw16_66 > select._Input-input_1kw16_45 {
+._Input--readOnly_199j9_68 > ._Input-input_199j9_46,
+._Input--readOnly_199j9_68 > select._Input-input_199j9_46 {
   background-color: var(--puck-color-grey-11);
   border-color: var(--puck-color-grey-8);
   color: var(--puck-color-grey-5);
   opacity: 1;
 }
-._Input-input_1kw16_45:hover {
+._Input-input_199j9_46:hover {
   border-color: var(--puck-color-neutral-3);
 }
-._Input-radioGroupItems_1kw16_78 {
+._Input-input_199j9_46:focus {
+  border-color: var(--puck-color-azure-4);
+  outline: var(--puck-color-azure-8) 4px solid;
+  outline-offset: 0;
+}
+._Input-radioGroupItems_199j9_86 {
   display: flex;
   border: 1px solid var(--puck-color-grey-7);
   border-radius: 4px;
   flex-wrap: wrap;
   overflow: hidden;
 }
-._Input-radio_1kw16_78 {
+._Input-radio_199j9_86 {
   border-right: 1px solid var(--puck-color-grey-7);
   flex-grow: 1;
 }
-._Input-radio_1kw16_78:last-of-type {
+._Input-radio_199j9_86:last-of-type {
   border-right: none;
 }
-._Input-radioInner_1kw16_95 {
+._Input-radioInner_199j9_103 {
   background-color: white;
   color: var(--puck-color-grey-4);
   font-size: var(--puck-font-size-xxxs);
   padding: 8px 12px;
   text-align: center;
 }
-._Input-radioInner_1kw16_95:hover {
+._Input-radioInner_199j9_103:hover {
   background-color: var(--puck-color-azure-9);
   cursor: pointer;
 }
-._Input--readOnly_1kw16_66 ._Input-radioGroupItems_1kw16_78 {
+._Input--readOnly_199j9_68 ._Input-radioGroupItems_199j9_86 {
   border-color: var(--puck-color-grey-8);
 }
-._Input--readOnly_1kw16_66 ._Input-radioInner_1kw16_95 {
+._Input--readOnly_199j9_68 ._Input-radioInner_199j9_103 {
   background-color: var(--puck-color-grey-11);
   color: var(--puck-color-grey-5);
 }
-._Input-radio_1kw16_78 ._Input-radioInput_1kw16_117:checked ~ ._Input-radioInner_1kw16_95 {
+._Input-radio_199j9_86 ._Input-radioInput_199j9_125:checked ~ ._Input-radioInner_199j9_103 {
   background-color: var(--puck-color-azure-9);
   color: var(--puck-color-grey-1);
   font-weight: 500;
 }
-._Input--readOnly_1kw16_66 ._Input-radioInput_1kw16_117:checked ~ ._Input-radioInner_1kw16_95 {
+._Input--readOnly_199j9_68 ._Input-radioInput_199j9_125:checked ~ ._Input-radioInner_199j9_103 {
   background-color: var(--puck-color-azure-9);
   color: var(--puck-color-grey-4);
 }
-._Input-radio_1kw16_78 ._Input-radioInput_1kw16_117 {
+._Input-radio_199j9_86 ._Input-radioInput_199j9_125 {
   display: none;
 }
-._Input_1kw16_1 textarea._Input-input_1kw16_45 {
+._Input_199j9_1 textarea._Input-input_199j9_46 {
   margin-bottom: -4px;
 }
 
 /* css-module:/home/runner/work/puck/puck/packages/core/components/InputOrGroup/fields/ArrayField/styles.module.css/#css-module-data */
-._ArrayField_13rp0_5 {
+._ArrayField_hsw7n_5 {
   display: flex;
   flex-direction: column;
   background-color: var(--puck-color-grey-8);
   border: 1px solid var(--puck-color-grey-8);
   border-radius: 4px;
 }
-._ArrayField--isDraggingFrom_13rp0_13 {
+._ArrayField--isDraggingFrom_hsw7n_13 {
   background-color: var(--puck-color-azure-9);
 }
-._ArrayField-addButton_13rp0_17 {
+._ArrayField-addButton_hsw7n_17 {
   background-color: white;
   border: none;
   border-radius: 4px;
@@ -532,90 +541,92 @@
   padding: 16px;
   text-align: left;
 }
-._ArrayField--hasItems_13rp0_31 > ._ArrayField-addButton_13rp0_17 {
+._ArrayField--hasItems_hsw7n_31 > ._ArrayField-addButton_hsw7n_17 {
   border-top-left-radius: 0;
   border-top-right-radius: 0;
 }
-._ArrayField_13rp0_5:not(._ArrayField--isDraggingFrom_13rp0_13) > ._ArrayField-addButton_13rp0_17:hover {
+._ArrayField_hsw7n_5:not(._ArrayField--isDraggingFrom_hsw7n_13) > ._ArrayField-addButton_hsw7n_17:hover {
   background: var(--puck-color-azure-9);
   color: var(--puck-color-azure-4);
 }
-._ArrayFieldItem_13rp0_45 {
+._ArrayFieldItem_hsw7n_45 {
   background: white;
   border-top-left-radius: 4px;
   border-top-right-radius: 4px;
   display: block;
   margin-bottom: 1px;
 }
-._ArrayField--isDraggingFrom_13rp0_13 > ._ArrayFieldItem_13rp0_45:not(._ArrayFieldItem--isDragging_13rp0_53) {
+._ArrayField--isDraggingFrom_hsw7n_13 > ._ArrayFieldItem_hsw7n_45:not(._ArrayFieldItem--isDragging_hsw7n_53) {
   border-bottom: 1px solid var(--puck-color-grey-8);
   margin-bottom: 0;
 }
-._ArrayFieldItem--isExpanded_13rp0_58 {
+._ArrayFieldItem--isExpanded_hsw7n_58 {
   border-bottom: 0;
-  outline: 1px solid var(--puck-color-azure-6);
+  outline-offset: 0px !important;
+  outline: 1px solid var(--puck-color-azure-6) !important;
 }
-._ArrayFieldItem--isDragging_13rp0_53 {
+._ArrayFieldItem--isDragging_hsw7n_53 {
   box-shadow: rgba(140, 152, 164, 0.25) 0 3px 6px 0;
 }
-._ArrayFieldItem_13rp0_45 + ._ArrayFieldItem_13rp0_45 {
+._ArrayFieldItem_hsw7n_45 + ._ArrayFieldItem_hsw7n_45 {
   border-top-left-radius: 0;
   border-top-right-radius: 0;
 }
-._ArrayFieldItem-summary_13rp0_72 {
+._ArrayFieldItem-summary_hsw7n_73 {
   color: var(--puck-color-grey-3);
   display: flex;
   align-items: center;
+  gap: 2px;
   justify-content: space-between;
   font-size: var(--puck-font-size-xxs);
   list-style: none;
-  padding: 12px 16px;
+  padding: 12px 15px;
   position: relative;
   overflow: hidden;
 }
-._ArrayFieldItem--readOnly_13rp0_84 > ._ArrayFieldItem-summary_13rp0_72 {
+._ArrayFieldItem--readOnly_hsw7n_86 > ._ArrayFieldItem-summary_hsw7n_73 {
   background-color: var(--puck-color-grey-11);
   color: var(--puck-color-grey-5);
 }
-._ArrayFieldItem--isExpanded_13rp0_58 > ._ArrayFieldItem-summary_13rp0_72 {
+._ArrayFieldItem--isExpanded_hsw7n_58 > ._ArrayFieldItem-summary_hsw7n_73 {
   font-weight: 600;
 }
-._ArrayFieldItem_13rp0_45:first-of-type > ._ArrayFieldItem-summary_13rp0_72 {
+._ArrayFieldItem_hsw7n_45:first-of-type > ._ArrayFieldItem-summary_hsw7n_73 {
   border-top-left-radius: 4px;
   border-top-right-radius: 4px;
 }
-._ArrayFieldItem-summary_13rp0_72:hover,
-._ArrayFieldItem--isExpanded_13rp0_58 > ._ArrayFieldItem-summary_13rp0_72 {
+._ArrayFieldItem-summary_hsw7n_73:hover,
+._ArrayFieldItem--isExpanded_hsw7n_58 > ._ArrayFieldItem-summary_hsw7n_73 {
   background: var(--puck-color-azure-9);
   cursor: pointer;
   color: var(--puck-color-azure-4);
 }
-._ArrayFieldItem-body_13rp0_105 {
+._ArrayFieldItem-body_hsw7n_107 {
   display: none;
 }
-._ArrayFieldItem--isExpanded_13rp0_58 > ._ArrayFieldItem-body_13rp0_105 {
+._ArrayFieldItem--isExpanded_hsw7n_58 > ._ArrayFieldItem-body_hsw7n_107 {
   display: block;
 }
-._ArrayFieldItem-fieldset_13rp0_113 {
+._ArrayFieldItem-fieldset_hsw7n_115 {
   border: none;
   border-top: 1px solid var(--puck-color-grey-8);
   margin: 0;
-  padding: 16px;
+  padding: 16px 15px;
 }
-._ArrayFieldItem-rhs_13rp0_120 {
+._ArrayFieldItem-rhs_hsw7n_122 {
   display: flex;
-  gap: 8px;
+  gap: 4px;
   align-items: center;
 }
-._ArrayFieldItem-actions_13rp0_126 {
+._ArrayFieldItem-actions_hsw7n_128 {
   display: flex;
-  gap: 8px;
+  gap: 4px;
   opacity: 0;
 }
-._ArrayFieldItem-summary_13rp0_72:hover > ._ArrayFieldItem-rhs_13rp0_120 > ._ArrayFieldItem-actions_13rp0_126 {
+._ArrayFieldItem-summary_hsw7n_73:hover > ._ArrayFieldItem-rhs_hsw7n_122 > ._ArrayFieldItem-actions_hsw7n_128 {
   opacity: 1;
 }
-._ArrayFieldItem-action_13rp0_126:hover {
+._ArrayFieldItem-action_hsw7n_128:hover {
   background: var(--puck-color-grey-9);
   border-radius: 4px;
   color: var(--puck-color-blue);
@@ -634,13 +645,13 @@
 }
 
 /* css-module:/home/runner/work/puck/puck/packages/core/components/ExternalInput/styles.module.css/#css-module-data */
-._ExternalInput_z7jih_1 {
+._ExternalInput_157li_1 {
   font-family: var(--puck-font-stack);
 }
-._ExternalInput-actions_z7jih_5 {
+._ExternalInput-actions_157li_5 {
   display: flex;
 }
-._ExternalInput-button_z7jih_9 {
+._ExternalInput-button_157li_9 {
   display: flex;
   gap: 8px;
   align-items: center;
@@ -657,20 +668,20 @@
   overflow: hidden;
   flex-grow: 1;
 }
-._ExternalInput-button_z7jih_9:hover,
-._ExternalInput-detachButton_z7jih_28:hover {
+._ExternalInput-button_157li_9:hover,
+._ExternalInput-detachButton_157li_28:hover {
   cursor: pointer;
   background: var(--puck-color-azure-9);
   color: var(--puck-color-azure-4);
   z-index: 1;
 }
-._ExternalInput--dataSelected_z7jih_35 ._ExternalInput-button_z7jih_9 {
+._ExternalInput--dataSelected_157li_35 ._ExternalInput-button_157li_9 {
   color: var(--puck-color-grey-2);
   display: block;
   border-top-right-radius: 0px;
   border-bottom-right-radius: 0px;
 }
-._ExternalInput-detachButton_z7jih_28 {
+._ExternalInput-detachButton_157li_28 {
   border: 1px solid var(--puck-color-grey-8);
   border-top-right-radius: 4px;
   border-bottom-right-radius: 4px;
@@ -683,84 +694,85 @@
   padding: 8px 12px;
   margin-left: -1px;
 }
-._ExternalInputModal_z7jih_56 {
+._ExternalInputModal_157li_56 {
   display: flex;
   flex-direction: column;
   position: relative;
   max-height: 90vh;
 }
-._ExternalInputModal-masthead_z7jih_63 {
+._ExternalInputModal-masthead_157li_63 {
   background-color: white;
   padding: 32px 24px;
 }
-._ExternalInputModal-tableWrapper_z7jih_68 {
+._ExternalInputModal-tableWrapper_157li_68 {
   overflow-x: auto;
   overflow-y: auto;
   flex-grow: 1;
 }
-._ExternalInputModal-table_z7jih_68 {
+._ExternalInputModal-table_157li_68 {
   border-collapse: unset;
   border-spacing: 0px;
   color: var(--puck-color-neutral-4);
   position: relative;
   z-index: 0;
+  min-width: 100%;
 }
-._ExternalInputModal-thead_z7jih_82 {
+._ExternalInputModal-thead_157li_83 {
   position: sticky;
   top: 0;
   z-index: 1;
 }
-._ExternalInputModal-th_z7jih_82 {
+._ExternalInputModal-th_157li_83 {
   border-bottom: 1px solid var(--puck-color-grey-8);
   border-top: 1px solid var(--puck-color-grey-8);
   font-weight: 700;
   padding: 16px 24px;
   opacity: 0.9;
 }
-._ExternalInputModal-td_z7jih_96 {
+._ExternalInputModal-td_157li_97 {
   font-family: var(--puck-font-stack);
   padding: 16px 24px;
 }
-._ExternalInputModal-tr_z7jih_101:nth-of-type(n) {
+._ExternalInputModal-tr_157li_102:nth-of-type(n) {
   background-color: white;
 }
-._ExternalInputModal-tr_z7jih_101:nth-of-type(2n) {
+._ExternalInputModal-tr_157li_102:nth-of-type(2n) {
   background-color: var(--puck-color-grey-10);
 }
-._ExternalInputModal-tr_z7jih_101 ._ExternalInputModal-td_z7jih_96:first-of-type {
+._ExternalInputModal-tr_157li_102 ._ExternalInputModal-td_157li_97:first-of-type {
   font-weight: 500;
 }
-._ExternalInputModal-tbody_z7jih_113 ._ExternalInputModal-tr_z7jih_101:hover {
+._ExternalInputModal-tbody_157li_114 ._ExternalInputModal-tr_157li_102:hover {
   background: var(--puck-color-grey-11);
   color: var(--puck-color-azure-4);
   cursor: pointer;
   position: relative;
   margin-left: -5px;
 }
-._ExternalInputModal-tbody_z7jih_113 ._ExternalInputModal-tr_z7jih_101:hover ._ExternalInputModal-td_z7jih_96:first-of-type {
+._ExternalInputModal-tbody_157li_114 ._ExternalInputModal-tr_157li_102:hover ._ExternalInputModal-td_157li_97:first-of-type {
   border-left: 4px solid var(--puck-color-azure-4);
   padding-left: 20px;
 }
-._ExternalInputModal-tableWrapper_z7jih_68 {
+._ExternalInputModal-tableWrapper_157li_68 {
   display: none;
 }
-._ExternalInputModal--hasData_z7jih_132 ._ExternalInputModal-tableWrapper_z7jih_68 {
+._ExternalInputModal--hasData_157li_133 ._ExternalInputModal-tableWrapper_157li_68 {
   display: block;
 }
-._ExternalInputModal-loadingBanner_z7jih_136 {
+._ExternalInputModal-loadingBanner_157li_137 {
   display: none;
   background-color: white;
   padding: 64px;
   align-items: center;
   justify-content: center;
 }
-._ExternalInputModal--isLoading_z7jih_144 ._ExternalInputModal-loadingBanner_z7jih_136 {
+._ExternalInputModal--isLoading_157li_145 ._ExternalInputModal-loadingBanner_157li_137 {
   display: flex;
 }
-._ExternalInputModal-noContentBanner_z7jih_148 {
+._ExternalInputModal-noContentBanner_157li_149 {
   display: none;
 }
-._ExternalInputModal--loaded_z7jih_152:not(._ExternalInputModal--hasData_z7jih_132) ._ExternalInputModal-noContentBanner_z7jih_148 {
+._ExternalInputModal--loaded_157li_153:not(._ExternalInputModal--hasData_157li_133) ._ExternalInputModal-noContentBanner_157li_149 {
   display: block;
   padding: 24px;
 }
@@ -832,20 +844,20 @@
 }
 
 /* css-module:/home/runner/work/puck/puck/packages/core/components/ComponentList/styles.module.css/#css-module-data */
-._ComponentList_3rdy2_1 {
+._ComponentList_1m8r5_1 {
   font-family: var(--puck-font-stack);
   max-width: 100%;
 }
-._ComponentList--isExpanded_3rdy2_6 + ._ComponentList_3rdy2_1 {
+._ComponentList--isExpanded_1m8r5_6 + ._ComponentList_1m8r5_1 {
   margin-top: 12px;
 }
-._ComponentList-content_3rdy2_10 {
+._ComponentList-content_1m8r5_10 {
   display: none;
 }
-._ComponentList--isExpanded_3rdy2_6 > ._ComponentList-content_3rdy2_10 {
+._ComponentList--isExpanded_1m8r5_6 > ._ComponentList-content_1m8r5_10 {
   display: block;
 }
-._ComponentList-title_3rdy2_18 {
+._ComponentList-title_1m8r5_18 {
   color: var(--puck-color-grey-4);
   display: flex;
   font-size: var(--puck-font-size-xxxs);
@@ -855,21 +867,21 @@
   gap: 4px;
   border-radius: 4px;
 }
-._ComponentList--isExpanded_3rdy2_6 ._ComponentList-title_3rdy2_18 {
+._ComponentList--isExpanded_1m8r5_6 ._ComponentList-title_1m8r5_18 {
   margin-bottom: 4px;
 }
-._ComponentList-title_3rdy2_18:hover {
+._ComponentList-title_1m8r5_18:hover {
   background-color: var(--puck-color-azure-9);
   color: var(--puck-color-azure-4);
   cursor: pointer;
 }
-._ComponentList-titleIcon_3rdy2_39 {
+._ComponentList-titleIcon_1m8r5_39 {
   margin-left: auto;
 }
-._ComponentListItem_3rdy2_43:last-of-type ._ComponentListItem-draggable_3rdy2_43 {
+._ComponentListItem_1m8r5_43:last-of-type ._ComponentListItem-draggable_1m8r5_43 {
   margin-bottom: 0px;
 }
-._ComponentListItem-draggable_3rdy2_43 {
+._ComponentListItem-draggable_1m8r5_43 {
   background: white;
   padding: 12px;
   display: flex;
@@ -878,68 +890,72 @@
   font-size: var(--puck-font-size-xxs);
   justify-content: space-between;
   align-items: center;
-  gap: 12px;
   cursor: grab;
   margin-bottom: 12px;
 }
-._ComponentListItemIcon_3rdy2_61 {
-  color: var(--puck-color-grey-4);
+._ComponentListItem-name_1m8r5_60 {
+  overflow-x: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
-._ComponentList_3rdy2_1:not(._ComponentList--isDraggingFrom_3rdy2_65) ._ComponentListItem-draggable_3rdy2_43:hover {
+._ComponentList_1m8r5_1:not(._ComponentList--isDraggingFrom_1m8r5_66) ._ComponentListItem-draggable_1m8r5_43:hover {
   background-color: var(--puck-color-azure-9);
   color: var(--puck-color-azure-4);
 }
 
 /* css-module:/home/runner/work/puck/puck/packages/core/components/SidebarSection/styles.module.css/#css-module-data */
-._SidebarSection_r7dv3_1 {
+._SidebarSection_1uyg2_1 {
   display: flex;
   position: relative;
   flex-direction: column;
   color: black;
 }
-._SidebarSection_r7dv3_1:last-of-type {
+._SidebarSection_1uyg2_1:last-of-type {
   flex-grow: 1;
 }
-._SidebarSection-title_r7dv3_12 {
+._SidebarSection-title_1uyg2_12 {
   background: white;
   padding: 16px;
   border-bottom: 1px solid var(--puck-color-grey-8);
   overflow-x: auto;
 }
-._SidebarSection-content_r7dv3_19 {
+._SidebarSection-content_1uyg2_19 {
   border-bottom: 1px solid var(--puck-color-grey-8);
   padding: 16px;
 }
-._SidebarSection--noPadding_r7dv3_24 ._SidebarSection-content_r7dv3_19 {
+._SidebarSection--noPadding_1uyg2_24 ._SidebarSection-content_1uyg2_19 {
   padding: 0px;
 }
-._SidebarSection_r7dv3_1:last-of-type ._SidebarSection-content_r7dv3_19 {
+._SidebarSection--noPadding_1uyg2_24 ._SidebarSection-content_1uyg2_19:last-child {
+  padding-bottom: 4px;
+}
+._SidebarSection_1uyg2_1:last-of-type ._SidebarSection-content_1uyg2_19 {
   border-bottom: none;
   flex-grow: 1;
 }
-._SidebarSection-breadcrumbLabel_r7dv3_33 {
+._SidebarSection-breadcrumbLabel_1uyg2_37 {
   color: var(--puck-color-azure-3);
   flex-shrink: 0;
 }
-._SidebarSection-breadcrumbLabel_r7dv3_33:hover {
+._SidebarSection-breadcrumbLabel_1uyg2_37:hover {
   color: var(--puck-color-azure-4);
   cursor: pointer;
   text-decoration: underline;
 }
-._SidebarSection-breadcrumbs_r7dv3_44 {
+._SidebarSection-breadcrumbs_1uyg2_48 {
   align-items: center;
   display: flex;
   gap: 4px;
 }
-._SidebarSection-breadcrumb_r7dv3_33 {
+._SidebarSection-breadcrumb_1uyg2_37 {
   align-items: center;
   display: flex;
   gap: 4px;
 }
-._SidebarSection-heading_r7dv3_56 {
+._SidebarSection-heading_1uyg2_60 {
   padding-right: 16px;
 }
-._SidebarSection-loadingOverlay_r7dv3_60 {
+._SidebarSection-loadingOverlay_1uyg2_64 {
   background: white;
   display: flex;
   justify-content: center;
@@ -955,7 +971,7 @@
 }
 
 /* css-module:/home/runner/work/puck/puck/packages/core/components/LayerTree/styles.module.css/#css-module-data */
-._LayerTree_1dcmd_1 {
+._LayerTree_o89yt_1 {
   color: var(--puck-color-grey-2);
   font-family: var(--puck-font-stack);
   font-size: var(--puck-font-size-xxs);
@@ -964,77 +980,198 @@
   list-style: none;
   padding: 0;
 }
-._LayerTree-zoneTitle_1dcmd_11 {
+._LayerTree-zoneTitle_o89yt_11 {
   color: var(--puck-color-grey-4);
   font-size: var(--puck-font-size-xxxs);
   text-transform: uppercase;
 }
-._LayerTree-helper_1dcmd_17 {
+._LayerTree-helper_o89yt_17 {
   text-align: center;
   color: var(--puck-color-grey-6);
   font-family: var(--puck-font-stack);
   margin: 8px 4px;
 }
-._Layer_1dcmd_1 {
+._Layer_o89yt_1 {
   position: relative;
   border: 1px solid transparent;
 }
-._Layer-inner_1dcmd_29 {
-  padding-left: 20px;
-  padding-right: 8px;
-  border-radius: 3px;
+._Layer-inner_o89yt_29 {
+  padding-left: 12px;
+  padding-right: 4px;
+  border-radius: 4px;
 }
-._Layer--containsZone_1dcmd_35 > ._Layer-inner_1dcmd_29 {
-  padding-left: 8px;
+._Layer--containsZone_o89yt_35 > ._Layer-inner_o89yt_29 {
+  padding-left: 0;
 }
-._Layer-clickable_1dcmd_39 {
+._Layer-clickable_o89yt_39 {
   align-items: center;
   display: flex;
 }
-._Layer-inner_1dcmd_29:hover {
+._Layer-inner_o89yt_29:hover {
   cursor: pointer;
 }
-._Layer_1dcmd_1:not(._Layer--isSelected_1dcmd_48) > ._Layer-inner_1dcmd_29:hover,
-._Layer--isHovering_1dcmd_49 > ._Layer-inner_1dcmd_29 {
+._Layer_o89yt_1:not(._Layer--isSelected_o89yt_48) > ._Layer-inner_o89yt_29:hover,
+._Layer--isHovering_o89yt_49 > ._Layer-inner_o89yt_29 {
   color: var(--puck-color-blue);
   background: var(--puck-color-azure-85);
 }
-._Layer--isSelected_1dcmd_48 {
+._Layer--isSelected_o89yt_48 {
   background: var(--puck-color-azure-9);
   border-color: var(--puck-color-azure-7);
   border-radius: 4px;
 }
-._Layer--isSelected_1dcmd_48 > ._Layer-inner_1dcmd_29 {
+._Layer--isSelected_o89yt_48 > ._Layer-inner_o89yt_29 {
   background: var(--puck-color-azure-85);
   font-weight: 600;
 }
-._Layer--isSelected_1dcmd_48 > ._Layer-inner_1dcmd_29 > ._Layer-clickable_1dcmd_39 > ._Layer-chevron_1dcmd_65,
-._Layer--childIsSelected_1dcmd_66 > ._Layer-inner_1dcmd_29 > ._Layer-clickable_1dcmd_39 > ._Layer-chevron_1dcmd_65 {
+._Layer--isSelected_o89yt_48 > ._Layer-inner_o89yt_29 > ._Layer-clickable_o89yt_39 > ._Layer-chevron_o89yt_65,
+._Layer--childIsSelected_o89yt_66 > ._Layer-inner_o89yt_29 > ._Layer-clickable_o89yt_39 > ._Layer-chevron_o89yt_65 {
   transform: scaleY(-1);
 }
-._Layer-zones_1dcmd_70 {
+._Layer-zones_o89yt_70 {
   display: none;
-  margin-left: 20px;
+  margin-left: 12px;
 }
-._Layer--isSelected_1dcmd_48 > ._Layer-zones_1dcmd_70,
-._Layer--childIsSelected_1dcmd_66 > ._Layer-zones_1dcmd_70 {
+._Layer--isSelected_o89yt_48 > ._Layer-zones_o89yt_70,
+._Layer--childIsSelected_o89yt_66 > ._Layer-zones_o89yt_70 {
   display: block;
 }
-._Layer-zones_1dcmd_70 > ._LayerTree_1dcmd_1 {
-  margin-left: 16px;
+._Layer-zones_o89yt_70 > ._LayerTree_o89yt_1 {
+  margin-left: 12px;
 }
-._Layer-title_1dcmd_84,
-._LayerTree-zoneTitle_1dcmd_11 {
+._Layer-title_o89yt_84,
+._LayerTree-zoneTitle_o89yt_11 {
   display: flex;
   gap: 8px;
   align-items: center;
   margin: 8px 4px;
+  overflow-x: hidden;
 }
-._Layer-icon_1dcmd_92 {
+._Layer-name_o89yt_93 {
+  overflow-x: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+._Layer-icon_o89yt_99 {
   color: var(--puck-color-rose-6);
   margin-top: 4px;
 }
-._Layer-zoneIcon_1dcmd_97 {
+._Layer-zoneIcon_o89yt_104 {
   color: var(--puck-color-grey-7);
   margin-top: 4px;
 }
+
+/* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/styles.module.css/#css-module-data */
+._Puck_vj9gy_19 {
+  --puck-frame-width: minmax(266px, auto);
+  --puck-side-bar-width: minmax(186px, 250px);
+  --puck-space-px: 16px;
+  bottom: 0;
+  display: grid;
+  grid-template-areas: "header header header" "left editor right";
+  grid-template-columns: 0 var(--puck-frame-width) var(--puck-side-bar-width);
+  grid-template-rows: min-content auto;
+  height: 100vh;
+  left: 0;
+  overflow-x: auto;
+  position: fixed;
+  right: 0;
+  top: 0;
+}
+._Puck--leftSideBarVisible_vj9gy_36 {
+  grid-template-columns: var(--puck-side-bar-width) var(--puck-frame-width) var(--puck-side-bar-width);
+}
+@media (min-width: 766px) {
+  ._Puck_vj9gy_19 {
+    --puck-frame-width: auto;
+  }
+}
+@media (min-width: 990px) {
+  ._Puck_vj9gy_19 {
+    --puck-side-bar-width: 256px;
+  }
+}
+@media (min-width: 1198px) {
+  ._Puck_vj9gy_19 {
+    --puck-side-bar-width: 274px;
+  }
+}
+@media (min-width: 1398px) {
+  ._Puck_vj9gy_19 {
+    --puck-side-bar-width: 290px;
+  }
+}
+@media (min-width: 1598px) {
+  ._Puck_vj9gy_19 {
+    --puck-side-bar-width: 320px;
+  }
+}
+._Puck-header_vj9gy_72 {
+  background: var(--puck-color-white);
+  border-bottom: 1px solid var(--puck-color-grey-8);
+  color: var(--puck-color-black);
+  grid-area: header;
+}
+._Puck-headerInner_vj9gy_79 {
+  align-items: start;
+  display: grid;
+  gap: var(--puck-space-px);
+  grid-template-areas: "left middle right";
+  grid-template-columns: 1fr auto 1fr;
+  grid-template-rows: auto;
+  padding: var(--puck-space-px);
+}
+._Puck-headerToggle_vj9gy_89 {
+  padding-top: 2px;
+}
+._Puck-headerTitle_vj9gy_93 {
+  align-self: center;
+}
+._Puck-headerPath_vj9gy_97 {
+  font-family: var(--puck-font-family-monospaced);
+  font-size: var(--puck-font-size-xxs);
+  font-weight: normal;
+  word-break: break-all;
+}
+._Puck-headerTools_vj9gy_104 {
+  display: flex;
+  gap: 16px;
+  justify-content: flex-end;
+}
+._Puck-leftSideBar_vj9gy_110 {
+  background: var(--puck-color-grey-11);
+  border-right: 1px solid var(--puck-color-grey-8);
+  display: flex;
+  flex-direction: column;
+  grid-area: left;
+  overflow-y: auto;
+}
+._Puck-frame_vj9gy_119 {
+  display: flex;
+  flex-direction: column;
+  grid-area: editor;
+  overflow-y: auto;
+  position: relative;
+}
+._Puck-root_vj9gy_127 {
+  box-shadow: 0 0 0 calc(var(--puck-space-px) * 2) var(--puck-color-grey-10);
+  margin: var(--puck-space-px);
+  zoom: 0.75;
+}
+@media (min-width: 1198px) {
+  ._Puck-root_vj9gy_127 {
+    margin: calc(var(--puck-space-px) * 2);
+  }
+}
+._Puck-page_vj9gy_139 {
+  border: 1px solid var(--puck-color-grey-8);
+}
+._Puck-rightSideBar_vj9gy_143 {
+  background: var(--puck-color-white);
+  border-left: 1px solid var(--puck-color-grey-8);
+  display: flex;
+  flex-direction: column;
+  font-family: var(--puck-font-stack);
+  grid-area: right;
+  overflow-y: auto;
+}