@measured/puck 0.7.1-canary.9b15c6b → 0.7.1-canary.c2d7fae

package/README.md

@@ -1,5 +1,20 @@
 # puck
 
+<p align="left">
+  <a aria-label="Measured logo" href="https://measured.co">
+    <img src="https://img.shields.io/badge/MADE%20BY%20Measured-000000.svg?style=for-the-badge&labelColor=000">
+  </a>
+  <a aria-label="NPM version" href="https://www.npmjs.com/package/@measured/puck">
+    <img alt="" src="https://img.shields.io/npm/v/@measured/puck.svg?style=for-the-badge&labelColor=000000">
+  </a>
+  <a aria-label="License" href="https://github.com/measuredco/puck/blob/main/LICENSE">
+    <img alt="" src="https://img.shields.io/npm/l/@measured/puck.svg?style=for-the-badge&labelColor=000000">
+  </a>
+  <a aria-label="Join the community on Discord" href="https://discord.gg/D9e4E3MQVZ">
+    <img alt="" src="https://img.shields.io/badge/Join%20the%20Discord-blueviolet.svg?style=for-the-badge&logo=Discord&labelColor=000000&logoWidth=20">
+  </a>
+</p>
+
 The self-hosted, drag and drop editor for React.
 
 - 🖱️ **Drag and drop**: Visual editing for your existing React component library

package/dist/index.css

@@ -30,6 +30,7 @@
   --puck-color-azure-6: #88b0da;
   --puck-color-azure-7: #abc7e5;
   --puck-color-azure-8: #cfdff0;
+  --puck-color-azure-85: #e1eaf6;
   --puck-color-azure-9: #f3f6fb;
   --puck-color-green-0: #002000;
   --puck-color-green-1: #043604;
@@ -208,87 +209,169 @@
   width: 100%;
 }
 
-/* css-module:/home/runner/work/puck/puck/packages/core/components/IconButton/IconButton.module.css/#css-module-data */
-._IconButton_13gzt_1 {
-  background: transparent;
-  border: none;
-  color: var(--puck-color-grey-3);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 4px;
-  padding: 4px;
-}
-._IconButton_13gzt_1:hover {
-  background: var(--puck-color-grey-9);
-  color: var(--puck-color-blue);
-  cursor: pointer;
-}
-
 /* css-module:/home/runner/work/puck/puck/packages/core/components/DraggableComponent/styles.module.css/#css-module-data */
-._DraggableComponent_1ew8n_1 {
+._DraggableComponent_1nlo8_1 {
   position: relative;
+  pointer-events: auto;
 }
-._DraggableComponent-contents_1ew8n_5 {
+._DraggableComponent--isDragging_1nlo8_6 {
+  background: #abc7e510;
+  outline: 2px var(--puck-color-azure-8) solid;
+  overflow: hidden;
+}
+._DraggableComponent-contents_1nlo8_12 {
   position: relative;
+  pointer-events: none;
 }
-._DraggableComponent-contents_1ew8n_5::before,
-._DraggableComponent-contents_1ew8n_5::after {
+._DraggableComponent-contents_1nlo8_12::before,
+._DraggableComponent-contents_1nlo8_12::after {
   content: " ";
   display: table;
 }
-._DraggableComponent-overlay_1ew8n_16 {
+._DraggableComponent-overlay_1nlo8_24 {
   display: none;
+  background: #abc7e530;
+  outline: 2px var(--puck-color-azure-8) solid;
+  cursor: pointer;
   height: 100%;
   width: 100%;
   top: 0;
   position: absolute;
   z-index: 1;
   font-family: var(--puck-font-stack);
+  pointer-events: none;
+  box-sizing: border-box;
 }
-._DraggableComponent_1ew8n_1:hover ._DraggableComponent-overlay_1ew8n_16 {
+._DraggableComponent_1nlo8_1:hover:not(._DraggableComponent--isLocked_1nlo8_39) > ._DraggableComponent-overlay_1nlo8_24 {
   display: block;
-  background-color: #cdcdcd50;
-  box-shadow: inset 0 0 0 4px var(--puck-color-azure-6);
+  pointer-events: none;
 }
-._DraggableComponent--isModifierHeld_1ew8n_32:hover ._DraggableComponent-overlay_1ew8n_16 {
-  display: none;
+._DraggableComponent--forceHover_1nlo8_45 > ._DraggableComponent-overlay_1nlo8_24 {
+  display: block;
+  pointer-events: none;
 }
-._DraggableComponent--isSelected_1ew8n_36 ._DraggableComponent-overlay_1ew8n_16 {
-  box-shadow: inset 0 0 0 4px var(--puck-color-azure-6);
+._DraggableComponent--indicativeHover_1nlo8_50 > ._DraggableComponent-overlay_1nlo8_24 {
   display: block;
+  background: transparent;
+  pointer-events: none;
 }
-._DraggableComponent-actions_1ew8n_41 {
+._DraggableComponent_1nlo8_1:not(._DraggableComponent--isSelected_1nlo8_57):has(._DraggableComponent_1nlo8_1:hover > ._DraggableComponent-overlay_1nlo8_24) > ._DraggableComponent-overlay_1nlo8_24 {
   display: none;
 }
-._DraggableComponent_1ew8n_1:hover ._DraggableComponent-actions_1ew8n_41 {
+._DraggableComponent--isSelected_1nlo8_57 > ._DraggableComponent-overlay_1nlo8_24 {
+  background: none;
+  display: block;
+  outline: 2px var(--puck-color-azure-6) solid;
+}
+._DraggableComponent-actions_1nlo8_70 {
   position: absolute;
-  right: 0;
-  padding: 8px;
-  border-bottom-left-radius: 8px;
-  background: white;
-  display: flex;
+  right: 6.5px;
+  width: auto;
+  top: -48px;
+  padding: 4px;
+  border-top-left-radius: 8px;
+  border-top-right-radius: 8px;
+  border-radius: 8px;
+  background: var(--puck-color-grey-0);
+  color: white;
+  display: none;
   gap: 4px;
-  border: 1px solid var(--puck-color-grey-8);
+  pointer-events: auto;
+  box-sizing: border-box;
+}
+._DraggableComponent--isSelected_1nlo8_57 > ._DraggableComponent-overlay_1nlo8_24 > ._DraggableComponent-actions_1nlo8_70 {
+  display: flex;
 }
-._DraggableComponent-actionsLabel_1ew8n_56 {
-  color: var(--puck-color-grey-0);
+._DraggableComponent-actionsLabel_1nlo8_93 {
+  color: var(--puck-color-grey-7);
   display: flex;
+  font-size: var(--puck-font-size-xxxs);
+  font-weight: 500;
   justify-content: center;
   align-items: center;
-  padding-left: 12px;
+  padding-left: 8px;
   padding-right: 16px;
   margin-right: 8px;
-  border-right: 1px solid var(--puck-color-grey-8);
+  border-right: 1px solid var(--puck-color-grey-4);
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
-._DraggableComponent-action_1ew8n_41 {
+._DraggableComponent-action_1nlo8_70 {
   background: transparent;
   border: none;
-  color: var(--puck-color-grey-2);
-  padding: 8px;
+  color: var(--puck-color-grey-7);
+  padding: 6px 8px;
   border-radius: 4px;
+  overflow: hidden;
+}
+._DraggableComponent-action_1nlo8_70:hover {
+  background: var(--puck-color-grey-2);
+  color: var(--puck-color-azure-5);
+  cursor: pointer;
+}
+
+/* css-module:/home/runner/work/puck/puck/packages/core/components/DropZone/styles.module.css/#css-module-data */
+._DropZone_1980k_1 {
+  margin-left: auto;
+  margin-right: auto;
+  zoom: 1.33;
+  position: relative;
+  height: 100%;
+  outline-offset: -1px;
+  width: 100%;
+}
+._DropZone-content_1980k_11 {
+  min-height: 128px;
+  height: 100%;
+}
+._DropZone--userIsDragging_1980k_16 ._DropZone-content_1980k_11 {
+  pointer-events: all;
+}
+._DropZone--userIsDragging_1980k_16:not(._DropZone--draggingOverArea_1980k_20):not(._DropZone--draggingNewComponent_1980k_21) > ._DropZone-content_1980k_11 {
+  pointer-events: none;
+}
+._DropZone--isAreaSelected_1980k_27,
+._DropZone--draggingOverArea_1980k_20:not(:has(._DropZone--hoveringOverArea_1980k_28)),
+._DropZone--hoveringOverArea_1980k_28:not(._DropZone--isDisabled_1980k_29):not(._DropZone--isRootZone_1980k_30) {
+  background: var(--puck-color-azure-9);
+  outline: 2px dashed var(--puck-color-azure-7);
+}
+._DropZone_1980k_1:not(._DropZone--hasChildren_1980k_36) {
+  background: var(--puck-color-azure-9);
+  outline: 2px dashed var(--puck-color-azure-7);
+}
+._DropZone--isDestination_1980k_41 {
+  outline: 2px dashed var(--puck-color-azure-3) !important;
 }
-._DraggableComponent-action_1ew8n_41:hover {
+._DropZone--isDestination_1980k_41:not(._DropZone--isRootZone_1980k_30) {
+  background: var(--puck-color-azure-85) !important;
+}
+._DropZone-item_1980k_49 {
+  position: relative;
+}
+._DropZone-item_1980k_49:has(._DropZone--draggingOverArea_1980k_20) {
+  z-index: 1;
+}
+._DropZone-hitbox_1980k_57 {
+  position: absolute;
+  bottom: -12px;
+  height: 24px;
+  width: 100%;
+  z-index: 1;
+}
+
+/* css-module:/home/runner/work/puck/puck/packages/core/components/IconButton/IconButton.module.css/#css-module-data */
+._IconButton_13gzt_1 {
+  background: transparent;
+  border: none;
+  color: var(--puck-color-grey-3);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  padding: 4px;
+}
+._IconButton_13gzt_1:hover {
   background: var(--puck-color-grey-9);
   color: var(--puck-color-blue);
   cursor: pointer;
@@ -419,38 +502,38 @@
 }
 
 /* css-module:/home/runner/work/puck/puck/packages/core/components/InputOrGroup/styles.module.css/#css-module-data */
-._Input_kf9j8_1 {
+._Input_16exs_1 {
   color: var(--puck-color-grey-3);
   padding: 16px;
   padding-bottom: 12px;
   display: block;
   font-family: var(--puck-font-stack);
 }
-._Input_kf9j8_1 ._Input_kf9j8_1 {
+._Input_16exs_1 ._Input_16exs_1 {
   padding: 0px;
 }
-._Input_kf9j8_1 * {
+._Input_16exs_1 * {
   box-sizing: border-box;
 }
-._Input_kf9j8_1 + ._Input_kf9j8_1 {
+._Input_16exs_1 + ._Input_16exs_1 {
   border-top: 1px solid var(--puck-color-grey-8);
   margin-top: 8px;
 }
-._Input_kf9j8_1 ._Input_kf9j8_1 + ._Input_kf9j8_1 {
+._Input_16exs_1 ._Input_16exs_1 + ._Input_16exs_1 {
   border-top: 0px;
   margin-top: 12px;
 }
-._Input-label_kf9j8_27 {
+._Input-label_16exs_27 {
   display: flex;
   padding-bottom: 12px;
   font-size: var(--puck-font-size-xxs);
   font-weight: 600;
 }
-._Input-labelIcon_kf9j8_34 {
+._Input-labelIcon_16exs_34 {
   color: var(--puck-color-grey-6);
   margin-right: 4px;
 }
-._Input-input_kf9j8_39 {
+._Input-input_16exs_39 {
   border-width: 1px;
   border-style: solid;
   border-color: var(--puck-color-grey-8);
@@ -459,7 +542,7 @@
   padding: 12px 16px;
   width: 100%;
 }
-._Input_kf9j8_1 select {
+._Input_16exs_1 select {
   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;
@@ -467,19 +550,19 @@
   background-repeat: no-repeat;
   background-color: white;
 }
-._Input--readOnly_kf9j8_60 ._Input-input_kf9j8_39 {
+._Input--readOnly_16exs_60 ._Input-input_16exs_39 {
   background-color: var(--puck-color-grey-10);
   border-color: var(--puck-color-grey-8);
 }
-._Input-input_kf9j8_39:hover {
+._Input-input_16exs_39:hover {
   border-color: var(--puck-color-neutral-3);
 }
-._Input-arrayItem_kf9j8_69 {
+._Input-arrayItem_16exs_69 {
   background: white;
   border: 1px solid var(--puck-color-grey-8);
   border-radius: 4px;
 }
-._Input-arrayItem_kf9j8_69 > summary {
+._Input-arrayItem_16exs_69 > summary {
   color: var(--puck-color-grey-3);
   display: flex;
   align-items: center;
@@ -489,14 +572,14 @@
   padding: 12px 16px;
   position: relative;
 }
-._Input-arrayItem_kf9j8_69 > summary:hover {
+._Input-arrayItem_16exs_69 > summary:hover {
   cursor: pointer;
   color: var(--puck-color-blue);
 }
-._Input-arrayItem_kf9j8_69 > summary::-webkit-details-marker {
+._Input-arrayItem_16exs_69 > summary::-webkit-details-marker {
   display: none;
 }
-._Input-arrayItem_kf9j8_69 > fieldset {
+._Input-arrayItem_16exs_69 > ._Input-fieldset_16exs_95 {
   background-color: var(--puck-color-grey-11);
   border: none;
   border-top: 1px solid var(--puck-color-grey-8);
@@ -504,28 +587,28 @@
   padding-bottom: 16px;
   padding-top: 16px;
 }
-._Input-arrayItem_kf9j8_69 > fieldset ._Input_kf9j8_1 + ._Input-arrayItem_kf9j8_69 > fieldset ._Input_kf9j8_1 {
+._Input-arrayItem_16exs_69 > ._Input-fieldset_16exs_95 ._Input_16exs_1 + ._Input-arrayItem_16exs_69 > ._Input-fieldset_16exs_95 ._Input_16exs_1 {
   margin-top: 16px;
 }
-._Input-arrayItem_kf9j8_69 > fieldset ._Input-label_kf9j8_27 {
+._Input-arrayItem_16exs_69 > ._Input-fieldset_16exs_95 ._Input-label_16exs_27 {
   padding-bottom: 4px;
 }
-._Input-arrayItem_kf9j8_69 ._Input-arrayItemAction_kf9j8_112 {
+._Input-arrayItem_16exs_69 ._Input-arrayItemAction_16exs_117 {
   border-radius: 4px;
   opacity: 0;
 }
-._Input-arrayItem_kf9j8_69 summary:hover ._Input-arrayItemAction_kf9j8_112 {
+._Input-arrayItem_16exs_69 summary:hover ._Input-arrayItemAction_16exs_117 {
   opacity: 1;
 }
-._Input-arrayItem_kf9j8_69 ._Input-arrayItemAction_kf9j8_112:hover {
+._Input-arrayItem_16exs_69 ._Input-arrayItemAction_16exs_117:hover {
   background: var(--puck-color-grey-9);
   color: var(--puck-color-blue);
   cursor: pointer;
 }
-._Input-arrayItem_kf9j8_69 + ._Input-arrayItem_kf9j8_69 {
+._Input-arrayItem_16exs_69 + ._Input-arrayItem_16exs_69 {
   margin-top: 12px;
 }
-._Input-addButton_kf9j8_131 {
+._Input-addButton_16exs_136 {
   background-color: white;
   border: none;
   border-radius: 4px;
@@ -537,57 +620,58 @@
   padding: 12px 16px;
   text-align: left;
 }
-._Input-addButton_kf9j8_131:hover {
+._Input-addButton_16exs_136:hover {
   background: var(--puck-color-grey-10);
 }
-._Input-array_kf9j8_69 {
+._Input-array_16exs_69 {
   overflow: hidden;
 }
-._Input-radioGroupItems_kf9j8_152 {
+._Input-radioGroupItems_16exs_157 {
   display: flex;
   border: 1px solid var(--puck-color-grey-7);
   border-radius: 4px;
   flex-wrap: wrap;
   overflow: hidden;
 }
-._Input-radio_kf9j8_152 {
+._Input-radio_16exs_157 {
   border-right: 1px solid var(--puck-color-grey-7);
   flex-grow: 1;
 }
-._Input-radio_kf9j8_152:last-of-type {
+._Input-radio_16exs_157:last-of-type {
   border-right: none;
 }
-._Input-radioInner_kf9j8_169 {
+._Input-radioInner_16exs_174 {
   color: var(--puck-color-grey-4);
   font-size: var(--puck-font-size-xxxs);
   padding: 8px 12px;
   text-align: center;
 }
-._Input-radioInner_kf9j8_169:hover {
+._Input-radioInner_16exs_174:hover {
   background-color: var(--puck-color-azure-9);
   cursor: pointer;
 }
-._Input-radio_kf9j8_152 input:checked ~ ._Input-radioInner_kf9j8_169 {
+._Input-radio_16exs_157 ._Input-radioInput_16exs_186:checked ~ ._Input-radioInner_16exs_174 {
   background-color: var(--puck-color-azure-9);
   color: var(--puck-color-grey-2);
   font-weight: 500;
 }
-._Input-radio_kf9j8_152 input {
+._Input-radio_16exs_157 ._Input-radioInput_16exs_186 {
   display: none;
 }
-._Input_kf9j8_1 textarea {
+._Input_16exs_1 textarea._Input-input_16exs_39 {
   margin-bottom: -4px;
 }
 
 /* css-module:/home/runner/work/puck/puck/packages/core/components/ComponentList/styles.module.css/#css-module-data */
-._ComponentList_1sym6_1 {
+._ComponentList_1ybn0_1 {
   display: grid;
   font-family: var(--puck-font-stack);
   grid-template-columns: 1fr;
   max-width: 100%;
+  grid-gap: 12px;
 }
-._ComponentList-item_1sym6_8,
-._ComponentList-itemShadow_1sym6_9 {
+._ComponentList-item_1ybn0_9,
+._ComponentList-itemShadow_1ybn0_10 {
   background: white;
   padding: 12px;
   display: flex;
@@ -598,92 +682,66 @@
   align-items: center;
   gap: 12px;
   cursor: grab;
-  margin-bottom: 12px;
 }
-._ComponentList-item_1sym6_8:last-of-type,
-._ComponentList-itemShadow_1sym6_9:last-of-type {
+._ComponentList-item_1ybn0_9:last-of-type,
+._ComponentList-itemShadow_1ybn0_10:last-of-type {
   margin-bottom: 0px;
 }
-._ComponentList-itemIcon_1sym6_28 {
+._ComponentList-itemIcon_1ybn0_28 {
   color: var(--puck-color-grey-4);
 }
-._ComponentList-item_1sym6_8:hover {
+._ComponentList-item_1ybn0_9:hover {
   background-color: var(--puck-color-azure-9);
 }
 
-/* css-module:/home/runner/work/puck/puck/packages/core/components/OutlineList/styles.module.css/#css-module-data */
-._OutlineList_gor6f_1 {
-  color: var(--puck-color-grey-2);
-  font-family: var(--puck-font-stack);
-  margin: 0;
-  margin-left: 16px;
-  padding-left: 16px;
-  position: relative;
-  list-style: none;
-}
-._OutlineList_gor6f_1::before {
-  background: var(--puck-color-grey-7);
-  position: absolute;
-  left: -1px;
-  top: 0px;
-  width: 1px;
-  height: calc(100% - 9px);
-  content: "";
-}
-._OutlineList_gor6f_1 li {
-  position: relative;
-  margin-bottom: 4px;
-}
-._OutlineList_gor6f_1 li::before {
-  background: var(--puck-color-grey-7);
-  position: absolute;
-  left: -17px;
-  top: 9px;
-  width: 13px;
-  height: 1px;
-  content: "";
-}
-._OutlineList_gor6f_1 ._OutlineList-clickableItem_gor6f_36:hover {
-  color: var(--puck-color-blue);
-  cursor: pointer;
-}
-._OutlineList_gor6f_1 li > ._OutlineList_gor6f_1 {
-  margin: 8px;
-}
-
 /* css-module:/home/runner/work/puck/puck/packages/core/components/SidebarSection/styles.module.css/#css-module-data */
-._SidebarSection_1y6bv_1 {
+._SidebarSection_ivnrs_1 {
   display: flex;
   position: relative;
   flex-direction: column;
 }
-._SidebarSection_1y6bv_1:last-of-type {
+._SidebarSection_ivnrs_1:last-of-type {
   flex-grow: 1;
 }
-._SidebarSection-title_1y6bv_11 {
+._SidebarSection-title_ivnrs_11 {
   background: white;
   padding: 16px;
   border-bottom: 1px solid var(--puck-color-grey-8);
+  overflow-x: scroll;
 }
-._SidebarSection-content_1y6bv_17 {
+._SidebarSection-content_ivnrs_18 {
   border-bottom: 1px solid var(--puck-color-grey-8);
   padding: 16px;
 }
-._SidebarSection--noPadding_1y6bv_22 ._SidebarSection-content_1y6bv_17 {
+._SidebarSection--noPadding_ivnrs_23 ._SidebarSection-content_ivnrs_18 {
   padding: 0px;
 }
-._SidebarSection_1y6bv_1:last-of-type ._SidebarSection-content_1y6bv_17 {
+._SidebarSection_ivnrs_1:last-of-type ._SidebarSection-content_ivnrs_18 {
   border-bottom: none;
   flex-grow: 1;
 }
-._SidebarSection-breadcrumb_1y6bv_31 {
+._SidebarSection-breadcrumbLabel_ivnrs_32 {
   color: var(--puck-color-azure-3);
+  flex-shrink: 0;
 }
-._SidebarSection-breadcrumb_1y6bv_31:hover {
+._SidebarSection-breadcrumbLabel_ivnrs_32:hover {
   color: var(--puck-color-azure-4);
   cursor: pointer;
   text-decoration: underline;
 }
+._SidebarSection-breadcrumbs_ivnrs_43 {
+  align-items: center;
+  display: flex;
+  gap: 4px;
+}
+._SidebarSection-breadcrumb_ivnrs_32 {
+  align-items: center;
+  display: flex;
+  gap: 4px;
+}
+._SidebarSection-heading_ivnrs_55 {
+  padding-right: 16px;
+}
 
 /* css-module:/home/runner/work/puck/puck/packages/core/components/Heading/styles.module.css/#css-module-data */
 ._Heading_1y35v_1 {
@@ -721,3 +779,88 @@
 ._Heading--xs_1y35v_42 {
   font-size: var(--puck-font-size-xs);
 }
+
+/* css-module:/home/runner/work/puck/puck/packages/core/components/LayerTree/styles.module.css/#css-module-data */
+._LayerTree_1dcmd_1 {
+  color: var(--puck-color-grey-2);
+  font-family: var(--puck-font-stack);
+  font-size: var(--puck-font-size-xxs);
+  margin: 0;
+  position: relative;
+  list-style: none;
+  padding: 0;
+}
+._LayerTree-zoneTitle_1dcmd_11 {
+  color: var(--puck-color-grey-4);
+  font-size: var(--puck-font-size-xxxs);
+  text-transform: uppercase;
+}
+._LayerTree-helper_1dcmd_17 {
+  text-align: center;
+  color: var(--puck-color-grey-6);
+  font-family: var(--puck-font-stack);
+  margin: 8px 4px;
+}
+._Layer_1dcmd_1 {
+  position: relative;
+  border: 1px solid transparent;
+}
+._Layer-inner_1dcmd_29 {
+  padding-left: 20px;
+  padding-right: 8px;
+  border-radius: 3px;
+}
+._Layer--containsZone_1dcmd_35 > ._Layer-inner_1dcmd_29 {
+  padding-left: 8px;
+}
+._Layer-clickable_1dcmd_39 {
+  align-items: center;
+  display: flex;
+}
+._Layer-inner_1dcmd_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 {
+  color: var(--puck-color-blue);
+  background: var(--puck-color-azure-85);
+}
+._Layer--isSelected_1dcmd_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 {
+  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 {
+  transform: scaleY(-1);
+}
+._Layer-zones_1dcmd_70 {
+  display: none;
+  margin-left: 20px;
+}
+._Layer--isSelected_1dcmd_48 > ._Layer-zones_1dcmd_70,
+._Layer--childIsSelected_1dcmd_66 > ._Layer-zones_1dcmd_70 {
+  display: block;
+}
+._Layer-zones_1dcmd_70 > ._LayerTree_1dcmd_1 {
+  margin-left: 16px;
+}
+._Layer-title_1dcmd_84,
+._LayerTree-zoneTitle_1dcmd_11 {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  margin: 8px 4px;
+}
+._Layer-icon_1dcmd_92 {
+  color: var(--puck-color-rose-6);
+  margin-top: 4px;
+}
+._Layer-zoneIcon_1dcmd_97 {
+  color: var(--puck-color-grey-7);
+  margin-top: 4px;
+}