@measured/puck 0.12.0-canary.53e3fc5 → 0.12.0-canary.5c13de5

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,52 @@
 }
 
 /* css-module:/home/runner/work/puck/puck/packages/core/components/InputOrGroup/styles.module.css/#css-module-data */
-._Input_1kw16_1 {
+._Input_sx9jb_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_sx9jb_1 ._Input_sx9jb_1 {
   padding: 0px;
 }
-._Input_1kw16_1 * {
+._Input_sx9jb_1 * {
   box-sizing: border-box;
 }
-._Input_1kw16_1 + ._Input_1kw16_1 {
+._Input_sx9jb_1 + ._Input_sx9jb_1 {
   border-top: 1px solid var(--puck-color-grey-8);
   margin-top: 8px;
 }
-._Input_1kw16_1 ._Input_1kw16_1 + ._Input_1kw16_1 {
+._Input_sx9jb_1 ._Input_sx9jb_1 + ._Input_sx9jb_1 {
   border-top: 0px;
   margin-top: 12px;
 }
-._Input-label_1kw16_27 {
+._Input-label_sx9jb_27 {
   display: flex;
   padding-bottom: 12px;
   font-size: var(--puck-font-size-xxs);
   font-weight: 600;
 }
-._Input-labelIcon_1kw16_34 {
+._Input-labelIcon_sx9jb_34 {
   color: var(--puck-color-grey-6);
   margin-right: 4px;
   padding-left: 4px;
 }
-._Input-disabledIcon_1kw16_40 {
+._Input-disabledIcon_sx9jb_40 {
   color: var(--puck-color-grey-4);
   margin-left: auto;
 }
-._Input-input_1kw16_45 {
+._Input-input_sx9jb_45 {
   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_sx9jb_1 select._Input-input_sx9jb_45 {
   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 +452,76 @@
   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_sx9jb_66 > ._Input-input_sx9jb_45,
+._Input--readOnly_sx9jb_66 > select._Input-input_sx9jb_45 {
   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_sx9jb_45:hover {
   border-color: var(--puck-color-neutral-3);
 }
-._Input-radioGroupItems_1kw16_78 {
+._Input-radioGroupItems_sx9jb_78 {
   display: flex;
   border: 1px solid var(--puck-color-grey-7);
   border-radius: 4px;
   flex-wrap: wrap;
   overflow: hidden;
 }
-._Input-radio_1kw16_78 {
+._Input-radio_sx9jb_78 {
   border-right: 1px solid var(--puck-color-grey-7);
   flex-grow: 1;
 }
-._Input-radio_1kw16_78:last-of-type {
+._Input-radio_sx9jb_78:last-of-type {
   border-right: none;
 }
-._Input-radioInner_1kw16_95 {
+._Input-radioInner_sx9jb_95 {
   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_sx9jb_95:hover {
   background-color: var(--puck-color-azure-9);
   cursor: pointer;
 }
-._Input--readOnly_1kw16_66 ._Input-radioGroupItems_1kw16_78 {
+._Input--readOnly_sx9jb_66 ._Input-radioGroupItems_sx9jb_78 {
   border-color: var(--puck-color-grey-8);
 }
-._Input--readOnly_1kw16_66 ._Input-radioInner_1kw16_95 {
+._Input--readOnly_sx9jb_66 ._Input-radioInner_sx9jb_95 {
   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_sx9jb_78 ._Input-radioInput_sx9jb_117:checked ~ ._Input-radioInner_sx9jb_95 {
   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_sx9jb_66 ._Input-radioInput_sx9jb_117:checked ~ ._Input-radioInner_sx9jb_95 {
   background-color: var(--puck-color-azure-9);
   color: var(--puck-color-grey-4);
 }
-._Input-radio_1kw16_78 ._Input-radioInput_1kw16_117 {
+._Input-radio_sx9jb_78 ._Input-radioInput_sx9jb_117 {
   display: none;
 }
-._Input_1kw16_1 textarea._Input-input_1kw16_45 {
+._Input_sx9jb_1 textarea._Input-input_sx9jb_45 {
   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_19z2v_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_19z2v_13 {
   background-color: var(--puck-color-azure-9);
 }
-._ArrayField-addButton_13rp0_17 {
+._ArrayField-addButton_19z2v_17 {
   background-color: white;
   border: none;
   border-radius: 4px;
@@ -532,90 +534,91 @@
   padding: 16px;
   text-align: left;
 }
-._ArrayField--hasItems_13rp0_31 > ._ArrayField-addButton_13rp0_17 {
+._ArrayField--hasItems_19z2v_31 > ._ArrayField-addButton_19z2v_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_19z2v_5:not(._ArrayField--isDraggingFrom_19z2v_13) > ._ArrayField-addButton_19z2v_17:hover {
   background: var(--puck-color-azure-9);
   color: var(--puck-color-azure-4);
 }
-._ArrayFieldItem_13rp0_45 {
+._ArrayFieldItem_19z2v_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_19z2v_13 > ._ArrayFieldItem_19z2v_45:not(._ArrayFieldItem--isDragging_19z2v_53) {
   border-bottom: 1px solid var(--puck-color-grey-8);
   margin-bottom: 0;
 }
-._ArrayFieldItem--isExpanded_13rp0_58 {
+._ArrayFieldItem--isExpanded_19z2v_58 {
   border-bottom: 0;
   outline: 1px solid var(--puck-color-azure-6);
 }
-._ArrayFieldItem--isDragging_13rp0_53 {
+._ArrayFieldItem--isDragging_19z2v_53 {
   box-shadow: rgba(140, 152, 164, 0.25) 0 3px 6px 0;
 }
-._ArrayFieldItem_13rp0_45 + ._ArrayFieldItem_13rp0_45 {
+._ArrayFieldItem_19z2v_45 + ._ArrayFieldItem_19z2v_45 {
   border-top-left-radius: 0;
   border-top-right-radius: 0;
 }
-._ArrayFieldItem-summary_13rp0_72 {
+._ArrayFieldItem-summary_19z2v_72 {
   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_19z2v_85 > ._ArrayFieldItem-summary_19z2v_72 {
   background-color: var(--puck-color-grey-11);
   color: var(--puck-color-grey-5);
 }
-._ArrayFieldItem--isExpanded_13rp0_58 > ._ArrayFieldItem-summary_13rp0_72 {
+._ArrayFieldItem--isExpanded_19z2v_58 > ._ArrayFieldItem-summary_19z2v_72 {
   font-weight: 600;
 }
-._ArrayFieldItem_13rp0_45:first-of-type > ._ArrayFieldItem-summary_13rp0_72 {
+._ArrayFieldItem_19z2v_45:first-of-type > ._ArrayFieldItem-summary_19z2v_72 {
   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_19z2v_72:hover,
+._ArrayFieldItem--isExpanded_19z2v_58 > ._ArrayFieldItem-summary_19z2v_72 {
   background: var(--puck-color-azure-9);
   cursor: pointer;
   color: var(--puck-color-azure-4);
 }
-._ArrayFieldItem-body_13rp0_105 {
+._ArrayFieldItem-body_19z2v_106 {
   display: none;
 }
-._ArrayFieldItem--isExpanded_13rp0_58 > ._ArrayFieldItem-body_13rp0_105 {
+._ArrayFieldItem--isExpanded_19z2v_58 > ._ArrayFieldItem-body_19z2v_106 {
   display: block;
 }
-._ArrayFieldItem-fieldset_13rp0_113 {
+._ArrayFieldItem-fieldset_19z2v_114 {
   border: none;
   border-top: 1px solid var(--puck-color-grey-8);
   margin: 0;
-  padding: 16px;
+  padding: 16px 15px;
 }
-._ArrayFieldItem-rhs_13rp0_120 {
+._ArrayFieldItem-rhs_19z2v_121 {
   display: flex;
-  gap: 8px;
+  gap: 4px;
   align-items: center;
 }
-._ArrayFieldItem-actions_13rp0_126 {
+._ArrayFieldItem-actions_19z2v_127 {
   display: flex;
-  gap: 8px;
+  gap: 4px;
   opacity: 0;
 }
-._ArrayFieldItem-summary_13rp0_72:hover > ._ArrayFieldItem-rhs_13rp0_120 > ._ArrayFieldItem-actions_13rp0_126 {
+._ArrayFieldItem-summary_19z2v_72:hover > ._ArrayFieldItem-rhs_19z2v_121 > ._ArrayFieldItem-actions_19z2v_127 {
   opacity: 1;
 }
-._ArrayFieldItem-action_13rp0_126:hover {
+._ArrayFieldItem-action_19z2v_127:hover {
   background: var(--puck-color-grey-9);
   border-radius: 4px;
   color: var(--puck-color-blue);
@@ -832,20 +835,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 +858,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 +881,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 +962,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 +971,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;
+}