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

package/README.md

@@ -19,7 +19,7 @@ The self-hosted, drag and drop editor for React.
 
 ## Demo
 
-Visit https://demo.puckeditor.com to try the demo.
+Visit https://demo.puckeditor.com/edit to try the demo.
 
 ## Documentation
 
@@ -94,6 +94,7 @@ npx create-puck-app my-app
 Available recipes include:
 
 - [**next**](https://github.com/measuredco/puck/tree/main/recipes/next): Next.js 13 app example, using App Router and static page generation
+- [**remix**](https://github.com/measuredco/puck/tree/main/recipes/remix): Remix Run v2 app example, using dynamic routes at root-level
 
 ## Hire the Puck team
 

package/dist/{Config-a03de579.d.ts → Config-35e6eaae.d.ts}

@@ -171,7 +171,6 @@ type Data<Props extends DefaultComponentProps = DefaultComponentProps, RootProps
 type ItemWithId = {
     _arrayId: string;
     _originalIndex: number;
-    data: any;
 };
 type ArrayState = {
     items: ItemWithId[];
@@ -179,6 +178,7 @@ type ArrayState = {
 };
 type UiState = {
     leftSideBarVisible: boolean;
+    rightSideBarVisible: boolean;
     itemSelector: ItemSelector | null;
     arrayState: Record<string, ArrayState | undefined>;
     componentList: Record<string, {

package/dist/index.css

@@ -143,71 +143,72 @@
 /* styles/global.css */
 
 /* css-module:/home/runner/work/puck/puck/packages/core/components/Button/Button.module.css/#css-module-data */
-._Button_zx1c8_1 {
+._Button_1brfa_1 {
   appearance: none;
   background: none;
   border: none;
   border-radius: 4px;
   color: white;
-  display: flex;
+  display: inline-flex;
   align-items: center;
   gap: 8px;
   letter-spacing: 0.05ch;
-  font-family: var(--puck-font-family);
+  font-family: var(--puck-font-family-proportional);
   font-size: 14px;
-  font-weight: 500;
+  font-weight: 400;
+  line-height: 1;
   text-align: center;
   text-decoration: none;
   cursor: pointer;
   white-space: nowrap;
   margin: 0;
 }
-._Button--medium_zx1c8_21 {
+._Button--medium_1brfa_22 {
   padding-bottom: 8px;
   padding-left: 20px;
   padding-right: 20px;
   padding-top: 8px;
 }
-._Button--large_zx1c8_28 {
+._Button--large_1brfa_29 {
   padding-bottom: 12px;
   padding-left: 20px;
   padding-right: 20px;
   padding-top: 12px;
 }
-._Button-icon_zx1c8_35 {
+._Button-icon_1brfa_36 {
   margin-top: 2px;
 }
-._Button_zx1c8_1:hover {
+._Button_1brfa_1:hover {
   text-decoration: none;
 }
-._Button--primary_zx1c8_43 {
+._Button--primary_1brfa_44 {
   background: var(--puck-color-blue);
 }
-._Button--primary_zx1c8_43:hover {
+._Button--primary_1brfa_44:hover {
   opacity: 0.7;
   transition: opacity 50ms ease-in;
 }
-._Button--secondary_zx1c8_52 {
+._Button--secondary_1brfa_53 {
   color: currentColor;
   border: 1px solid currentColor;
 }
-._Button--secondary_zx1c8_52:hover {
+._Button--secondary_1brfa_53:hover {
   background-color: var(--puck-color-grey-10);
   color: black;
   opacity: 0.7;
 }
-._Button--flush_zx1c8_63 {
+._Button--flush_1brfa_64 {
   border-radius: 0;
 }
-._Button--disabled_zx1c8_67 {
+._Button--disabled_1brfa_68 {
   background: var(--puck-color-grey-10);
   color: black;
   cursor: not-allowed;
 }
-._Button--disabled_zx1c8_67:hover {
+._Button--disabled_1brfa_68:hover {
   opacity: 1;
 }
-._Button--fullWidth_zx1c8_77 {
+._Button--fullWidth_1brfa_78 {
   width: 100%;
 }
 
@@ -382,71 +383,81 @@
 }
 
 /* css-module:/home/runner/work/puck/puck/packages/core/components/IconButton/IconButton.module.css/#css-module-data */
-._IconButton_13gzt_1 {
+._IconButton_38xdr_1 {
+  align-items: center;
   background: transparent;
   border: none;
-  color: var(--puck-color-grey-3);
+  border-radius: 4px;
+  color: currentColor;
   display: flex;
-  align-items: center;
   justify-content: center;
-  border-radius: 4px;
   padding: 4px;
 }
-._IconButton_13gzt_1:hover {
+._IconButton_38xdr_1:hover {
   background: var(--puck-color-grey-9);
   color: var(--puck-color-blue);
   cursor: pointer;
 }
+._IconButton-title_38xdr_18 {
+  clip: rect(0 0 0 0);
+  clip-path: inset(100%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
 
 /* css-module:/home/runner/work/puck/puck/packages/core/components/InputOrGroup/styles.module.css/#css-module-data */
-._Input_199j9_1 {
+._Input_1jyrm_1 {
   color: var(--puck-color-grey-3);
   padding: 16px;
   padding-bottom: 12px;
   display: block;
   font-family: var(--puck-font-stack);
 }
-._Input_199j9_1 ._Input_199j9_1 {
+._Input_1jyrm_1 ._Input_1jyrm_1 {
   padding: 0px;
 }
-._Input_199j9_1 * {
+._Input_1jyrm_1 * {
   box-sizing: border-box;
 }
-._Input_199j9_1 + ._Input_199j9_1 {
+._Input_1jyrm_1 + ._Input_1jyrm_1 {
   border-top: 1px solid var(--puck-color-grey-8);
   margin-top: 8px;
 }
-._Input_199j9_1 ._Input_199j9_1 + ._Input_199j9_1 {
+._Input_1jyrm_1 ._Input_1jyrm_1 + ._Input_1jyrm_1 {
   border-top: 0px;
   margin-top: 12px;
 }
-._Input-label_199j9_27 {
+._Input-label_1jyrm_27 {
   align-items: center;
   display: flex;
   padding-bottom: 12px;
   font-size: var(--puck-font-size-xxs);
   font-weight: 600;
 }
-._Input-labelIcon_199j9_35 {
+._Input-labelIcon_1jyrm_35 {
   color: var(--puck-color-grey-6);
   margin-right: 4px;
   padding-left: 4px;
 }
-._Input-disabledIcon_199j9_41 {
+._Input-disabledIcon_1jyrm_41 {
   color: var(--puck-color-grey-4);
   margin-left: auto;
 }
-._Input-input_199j9_46 {
+._Input-input_1jyrm_46 {
   background: white;
   border-width: 1px;
   border-style: solid;
   border-color: var(--puck-color-grey-8);
   border-radius: 4px;
   font-family: inherit;
+  font-size: 14px;
   padding: 12px 15px;
   width: 100%;
 }
-._Input_199j9_1 select._Input-input_199j9_46 {
+._Input_1jyrm_1 select._Input-input_1jyrm_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;
@@ -454,81 +465,81 @@
   background-repeat: no-repeat;
   background-color: white;
 }
-._Input--readOnly_199j9_68 > ._Input-input_199j9_46,
-._Input--readOnly_199j9_68 > select._Input-input_199j9_46 {
+._Input--readOnly_1jyrm_69 > ._Input-input_1jyrm_46,
+._Input--readOnly_1jyrm_69 > select._Input-input_1jyrm_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_199j9_46:hover {
+._Input-input_1jyrm_46:hover {
   border-color: var(--puck-color-neutral-3);
 }
-._Input-input_199j9_46:focus {
+._Input-input_1jyrm_46:focus {
   border-color: var(--puck-color-azure-4);
   outline: var(--puck-color-azure-8) 4px solid;
   outline-offset: 0;
 }
-._Input-radioGroupItems_199j9_86 {
+._Input-radioGroupItems_1jyrm_87 {
   display: flex;
   border: 1px solid var(--puck-color-grey-7);
   border-radius: 4px;
   flex-wrap: wrap;
   overflow: hidden;
 }
-._Input-radio_199j9_86 {
+._Input-radio_1jyrm_87 {
   border-right: 1px solid var(--puck-color-grey-7);
   flex-grow: 1;
 }
-._Input-radio_199j9_86:last-of-type {
+._Input-radio_1jyrm_87:last-of-type {
   border-right: none;
 }
-._Input-radioInner_199j9_103 {
+._Input-radioInner_1jyrm_104 {
   background-color: white;
   color: var(--puck-color-grey-4);
   font-size: var(--puck-font-size-xxxs);
   padding: 8px 12px;
   text-align: center;
 }
-._Input-radioInner_199j9_103:hover {
+._Input-radioInner_1jyrm_104:hover {
   background-color: var(--puck-color-azure-9);
   cursor: pointer;
 }
-._Input--readOnly_199j9_68 ._Input-radioGroupItems_199j9_86 {
+._Input--readOnly_1jyrm_69 ._Input-radioGroupItems_1jyrm_87 {
   border-color: var(--puck-color-grey-8);
 }
-._Input--readOnly_199j9_68 ._Input-radioInner_199j9_103 {
+._Input--readOnly_1jyrm_69 ._Input-radioInner_1jyrm_104 {
   background-color: var(--puck-color-grey-11);
   color: var(--puck-color-grey-5);
 }
-._Input-radio_199j9_86 ._Input-radioInput_199j9_125:checked ~ ._Input-radioInner_199j9_103 {
+._Input-radio_1jyrm_87 ._Input-radioInput_1jyrm_126:checked ~ ._Input-radioInner_1jyrm_104 {
   background-color: var(--puck-color-azure-9);
   color: var(--puck-color-grey-1);
   font-weight: 500;
 }
-._Input--readOnly_199j9_68 ._Input-radioInput_199j9_125:checked ~ ._Input-radioInner_199j9_103 {
+._Input--readOnly_1jyrm_69 ._Input-radioInput_1jyrm_126:checked ~ ._Input-radioInner_1jyrm_104 {
   background-color: var(--puck-color-azure-9);
   color: var(--puck-color-grey-4);
 }
-._Input-radio_199j9_86 ._Input-radioInput_199j9_125 {
+._Input-radio_1jyrm_87 ._Input-radioInput_1jyrm_126 {
   display: none;
 }
-._Input_199j9_1 textarea._Input-input_199j9_46 {
+._Input_1jyrm_1 textarea._Input-input_1jyrm_46 {
   margin-bottom: -4px;
 }
 
 /* css-module:/home/runner/work/puck/puck/packages/core/components/InputOrGroup/fields/ArrayField/styles.module.css/#css-module-data */
-._ArrayField_hsw7n_5 {
+._ArrayField_1auyc_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_hsw7n_13 {
+._ArrayField--isDraggingFrom_1auyc_13 {
   background-color: var(--puck-color-azure-9);
 }
-._ArrayField-addButton_hsw7n_17 {
+._ArrayField-addButton_1auyc_17 {
   background-color: white;
   border: none;
   border-radius: 4px;
@@ -541,38 +552,38 @@
   padding: 16px;
   text-align: left;
 }
-._ArrayField--hasItems_hsw7n_31 > ._ArrayField-addButton_hsw7n_17 {
+._ArrayField--hasItems_1auyc_31 > ._ArrayField-addButton_1auyc_17 {
   border-top-left-radius: 0;
   border-top-right-radius: 0;
 }
-._ArrayField_hsw7n_5:not(._ArrayField--isDraggingFrom_hsw7n_13) > ._ArrayField-addButton_hsw7n_17:hover {
+._ArrayField_1auyc_5:not(._ArrayField--isDraggingFrom_1auyc_13) > ._ArrayField-addButton_1auyc_17:hover {
   background: var(--puck-color-azure-9);
   color: var(--puck-color-azure-4);
 }
-._ArrayFieldItem_hsw7n_45 {
+._ArrayFieldItem_1auyc_45 {
   background: white;
   border-top-left-radius: 4px;
   border-top-right-radius: 4px;
   display: block;
   margin-bottom: 1px;
 }
-._ArrayField--isDraggingFrom_hsw7n_13 > ._ArrayFieldItem_hsw7n_45:not(._ArrayFieldItem--isDragging_hsw7n_53) {
+._ArrayField--isDraggingFrom_1auyc_13 > ._ArrayFieldItem_1auyc_45:not(._ArrayFieldItem--isDragging_1auyc_53) {
   border-bottom: 1px solid var(--puck-color-grey-8);
   margin-bottom: 0;
 }
-._ArrayFieldItem--isExpanded_hsw7n_58 {
+._ArrayFieldItem--isExpanded_1auyc_58 {
   border-bottom: 0;
   outline-offset: 0px !important;
   outline: 1px solid var(--puck-color-azure-6) !important;
 }
-._ArrayFieldItem--isDragging_hsw7n_53 {
+._ArrayFieldItem--isDragging_1auyc_53 {
   box-shadow: rgba(140, 152, 164, 0.25) 0 3px 6px 0;
 }
-._ArrayFieldItem_hsw7n_45 + ._ArrayFieldItem_hsw7n_45 {
+._ArrayFieldItem_1auyc_45 + ._ArrayFieldItem_1auyc_45 {
   border-top-left-radius: 0;
   border-top-right-radius: 0;
 }
-._ArrayFieldItem-summary_hsw7n_73 {
+._ArrayFieldItem-summary_1auyc_73 {
   color: var(--puck-color-grey-3);
   display: flex;
   align-items: center;
@@ -584,52 +595,52 @@
   position: relative;
   overflow: hidden;
 }
-._ArrayFieldItem--readOnly_hsw7n_86 > ._ArrayFieldItem-summary_hsw7n_73 {
+._ArrayFieldItem--readOnly_1auyc_86 > ._ArrayFieldItem-summary_1auyc_73 {
   background-color: var(--puck-color-grey-11);
   color: var(--puck-color-grey-5);
 }
-._ArrayFieldItem--isExpanded_hsw7n_58 > ._ArrayFieldItem-summary_hsw7n_73 {
+._ArrayFieldItem--isExpanded_1auyc_58 > ._ArrayFieldItem-summary_1auyc_73 {
   font-weight: 600;
 }
-._ArrayFieldItem_hsw7n_45:first-of-type > ._ArrayFieldItem-summary_hsw7n_73 {
+._ArrayFieldItem_1auyc_45:first-of-type > ._ArrayFieldItem-summary_1auyc_73 {
   border-top-left-radius: 4px;
   border-top-right-radius: 4px;
 }
-._ArrayFieldItem-summary_hsw7n_73:hover,
-._ArrayFieldItem--isExpanded_hsw7n_58 > ._ArrayFieldItem-summary_hsw7n_73 {
+._ArrayFieldItem-summary_1auyc_73:hover,
+._ArrayFieldItem--isExpanded_1auyc_58 > ._ArrayFieldItem-summary_1auyc_73 {
   background: var(--puck-color-azure-9);
   cursor: pointer;
   color: var(--puck-color-azure-4);
 }
-._ArrayFieldItem-body_hsw7n_107 {
+._ArrayFieldItem-body_1auyc_107 {
   display: none;
 }
-._ArrayFieldItem--isExpanded_hsw7n_58 > ._ArrayFieldItem-body_hsw7n_107 {
+._ArrayFieldItem--isExpanded_1auyc_58 > ._ArrayFieldItem-body_1auyc_107 {
   display: block;
 }
-._ArrayFieldItem-fieldset_hsw7n_115 {
+._ArrayFieldItem-fieldset_1auyc_115 {
   border: none;
   border-top: 1px solid var(--puck-color-grey-8);
   margin: 0;
   padding: 16px 15px;
 }
-._ArrayFieldItem-rhs_hsw7n_122 {
+._ArrayFieldItem-rhs_1auyc_122 {
   display: flex;
   gap: 4px;
   align-items: center;
 }
-._ArrayFieldItem-actions_hsw7n_128 {
+._ArrayFieldItem-actions_1auyc_128 {
+  color: var(--puck-color-grey-3);
   display: flex;
   gap: 4px;
   opacity: 0;
 }
-._ArrayFieldItem-summary_hsw7n_73:hover > ._ArrayFieldItem-rhs_hsw7n_122 > ._ArrayFieldItem-actions_hsw7n_128 {
+._ArrayFieldItem-summary_1auyc_73:hover > ._ArrayFieldItem-rhs_1auyc_122 > ._ArrayFieldItem-actions_1auyc_128 {
   opacity: 1;
 }
-._ArrayFieldItem-action_hsw7n_128:hover {
+._ArrayFieldItem-action_1auyc_128:hover {
   background: var(--puck-color-grey-9);
   border-radius: 4px;
-  color: var(--puck-color-blue);
   cursor: pointer;
 }
 
@@ -1061,59 +1072,120 @@
   margin-top: 4px;
 }
 
+/* css-module:/home/runner/work/puck/puck/packages/core/components/MenuBar/styles.module.css/#css-module-data */
+._MenuBar_12sp7_1 {
+  background-color: var(--puck-color-white);
+  border-bottom: 1px solid var(--puck-color-grey-8);
+  display: none;
+  left: 0;
+  margin-top: 1px;
+  padding: 8px 16px;
+  position: absolute;
+  right: 0;
+  top: 100%;
+  z-index: 2;
+}
+._MenuBar--menuOpen_12sp7_14 {
+  display: block;
+}
+@media (min-width: 638px) {
+  ._MenuBar_12sp7_1 {
+    border: none;
+    display: block;
+    margin-top: 0;
+    overflow-y: visible;
+    padding: 0;
+    position: static;
+  }
+}
+._MenuBar-inner_12sp7_29 {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px 16px;
+  justify-content: flex-end;
+}
+@media (min-width: 638px) {
+  ._MenuBar-inner_12sp7_29 {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+  }
+}
+._MenuBar-history_12sp7_45 {
+  display: flex;
+}
+
 /* 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_103k9_19 {
+  --puck-frame-width: auto;
+  --puck-side-bar-width: 186px;
   --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-columns: 0 var(--puck-frame-width) 0;
   grid-template-rows: min-content auto;
   height: 100vh;
   left: 0;
-  overflow-x: auto;
   position: fixed;
   right: 0;
   top: 0;
 }
-._Puck--leftSideBarVisible_vj9gy_36 {
+._Puck--leftSideBarVisible_103k9_35 {
+  grid-template-columns: var(--puck-side-bar-width) var(--puck-frame-width) 0;
+}
+._Puck--rightSideBarVisible_103k9_41 {
+  grid-template-columns: 0 var(--puck-frame-width) var(--puck-side-bar-width);
+}
+._Puck--leftSideBarVisible_103k9_35._Puck--rightSideBarVisible_103k9_41 {
   grid-template-columns: var(--puck-side-bar-width) var(--puck-frame-width) var(--puck-side-bar-width);
 }
+@media (min-width: 458px) {
+  ._Puck_103k9_19 {
+    --puck-frame-width: minmax(266px, auto);
+  }
+}
+@media (min-width: 638px) {
+  ._Puck_103k9_19 {
+    --puck-side-bar-width: minmax(186px, 250px);
+  }
+}
 @media (min-width: 766px) {
-  ._Puck_vj9gy_19 {
+  ._Puck_103k9_19 {
     --puck-frame-width: auto;
   }
 }
 @media (min-width: 990px) {
-  ._Puck_vj9gy_19 {
+  ._Puck_103k9_19 {
     --puck-side-bar-width: 256px;
   }
 }
 @media (min-width: 1198px) {
-  ._Puck_vj9gy_19 {
+  ._Puck_103k9_19 {
     --puck-side-bar-width: 274px;
   }
 }
 @media (min-width: 1398px) {
-  ._Puck_vj9gy_19 {
+  ._Puck_103k9_19 {
     --puck-side-bar-width: 290px;
   }
 }
 @media (min-width: 1598px) {
-  ._Puck_vj9gy_19 {
+  ._Puck_103k9_19 {
     --puck-side-bar-width: 320px;
   }
 }
-._Puck-header_vj9gy_72 {
+._Puck-header_103k9_95 {
   background: var(--puck-color-white);
   border-bottom: 1px solid var(--puck-color-grey-8);
   color: var(--puck-color-black);
   grid-area: header;
+  position: relative;
+  max-width: 100vw;
 }
-._Puck-headerInner_vj9gy_79 {
-  align-items: start;
+._Puck-headerInner_103k9_104 {
+  align-items: end;
   display: grid;
   gap: var(--puck-space-px);
   grid-template-areas: "left middle right";
@@ -1121,24 +1193,46 @@
   grid-template-rows: auto;
   padding: var(--puck-space-px);
 }
-._Puck-headerToggle_vj9gy_89 {
+._Puck-headerToggle_103k9_114 {
+  color: var(--puck-color-grey-4);
+  display: flex;
+  margin-left: -4px;
   padding-top: 2px;
 }
-._Puck-headerTitle_vj9gy_93 {
+._Puck-rightSideBarToggle_103k9_121 {
+  transform: rotate(180deg);
+}
+._Puck--rightSideBarVisible_103k9_41 ._Puck-rightSideBarToggle_103k9_121,
+._Puck--leftSideBarVisible_103k9_35 ._Puck-leftSideBarToggle_103k9_126 {
+  color: var(--puck-color-black);
+}
+._Puck-headerTitle_103k9_130 {
   align-self: center;
 }
-._Puck-headerPath_vj9gy_97 {
+._Puck-headerPath_103k9_134 {
   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 {
+._Puck-headerTools_103k9_141 {
   display: flex;
   gap: 16px;
   justify-content: flex-end;
 }
-._Puck-leftSideBar_vj9gy_110 {
+._Puck-menuButton_103k9_147 {
+  color: var(--puck-color-grey-4);
+  margin-left: -4px;
+}
+._Puck--menuOpen_103k9_152 ._Puck-menuButton_103k9_147 {
+  color: var(--puck-color-black);
+}
+@media (min-width: 638px) {
+  ._Puck-menuButton_103k9_147 {
+    display: none;
+  }
+}
+._Puck-leftSideBar_103k9_126 {
   background: var(--puck-color-grey-11);
   border-right: 1px solid var(--puck-color-grey-8);
   display: flex;
@@ -1146,27 +1240,28 @@
   grid-area: left;
   overflow-y: auto;
 }
-._Puck-frame_vj9gy_119 {
+._Puck-frame_103k9_171 {
   display: flex;
   flex-direction: column;
   grid-area: editor;
-  overflow-y: auto;
+  overflow: auto;
   position: relative;
 }
-._Puck-root_vj9gy_127 {
+._Puck-root_103k9_179 {
   box-shadow: 0 0 0 calc(var(--puck-space-px) * 2) var(--puck-color-grey-10);
   margin: var(--puck-space-px);
+  min-width: 321px;
   zoom: 0.75;
 }
 @media (min-width: 1198px) {
-  ._Puck-root_vj9gy_127 {
+  ._Puck-root_103k9_179 {
     margin: calc(var(--puck-space-px) * 2);
   }
 }
-._Puck-page_vj9gy_139 {
+._Puck-page_103k9_192 {
   border: 1px solid var(--puck-color-grey-8);
 }
-._Puck-rightSideBar_vj9gy_143 {
+._Puck-rightSideBar_103k9_121 {
   background: var(--puck-color-white);
   border-left: 1px solid var(--puck-color-grey-8);
   display: flex;