coveragebook_components 0.8.2 → 0.8.3

data/app/assets/build/coco/app.css

@@ -1385,140 +1385,7 @@ select{
   --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
   --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}
-[data-coco][data-component="app-sidebar-nav"]{
-  --tw-bg-opacity: 1;
-  background-color: rgb(31 41 55 / var(--tw-bg-opacity));
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  display: grid;
-  height: 3.5rem;
-  width: 100%;
-  grid-template-rows: repeat(1, minmax(0, 1fr));
-    grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1fr)}
-[data-coco][data-component="app-sidebar-nav"] .nav-action{
-  cursor: pointer}
-[data-coco][data-component="app-sidebar-nav"] .nav-action > a:hover{
-  --tw-bg-opacity: 1 !important;
-  background-color: rgb(31 41 55 / var(--tw-bg-opacity)) !important}
-[data-coco][data-component="app-sidebar-nav"] .nav-action .nav-item-label{
-  display: none;
-  --tw-text-opacity: 1 !important;
-  color: rgb(0 153 121 / var(--tw-text-opacity)) !important}
-[data-coco][data-component="app-sidebar-nav"] .nav-actions-button{
-  --tw-bg-opacity: 1;
-  background-color: rgb(0 153 121 / var(--tw-bg-opacity));
-  --tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--tw-text-opacity));
-  transition-property: all;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
-  margin-left: auto;
-  margin-right: auto;
-  display: flex;
-  height: 2.5rem;
-  width: 2.5rem;
-  cursor: pointer;
-  align-items: center;
-  justify-content: center;
-  border-radius: 9999px}
-[data-coco][data-component="app-sidebar-nav"] .nav-actions-button:hover {
-        transform: scale(1.05);
-      }
-[data-coco][data-component="app-sidebar-nav"] .nav-actions-button .coco-icon{
-  height: 1.5rem;
-  width: 1.5rem}
-[data-coco][data-component="app-sidebar-nav"] .nav-item{
-  display: none;
-  height: 100%;
-  width: 100%;
-  justify-content: center}
-@media (min-width: 576px){
-
-  [data-coco][data-component="app-sidebar-nav"] .nav-item{
-    display: contents}}
-[data-coco][data-component="app-sidebar-nav"] .mobile-nav-item{
-  display: flex}
-@media (min-width: 576px){
-
-  [data-coco][data-component="app-sidebar-nav"] .mobile-nav-item{
-    display: contents}
-  [data-coco][data-component="app-sidebar-nav"]{
-    display: block;
-    height: 100%;
-    width: 4.5rem}
-
-    [data-coco][data-component="app-sidebar-nav"] .nav-action .nav-item-label{
-    display: block}
-
-    [data-coco][data-component="app-sidebar-nav"] .nav-actions-button{
-    margin-bottom: 0.5rem;
-    height: 3.5rem;
-    width: 3.5rem}
-
-      [data-coco][data-component="app-sidebar-nav"] .nav-actions-button .coco-icon{
-    height: 2rem;
-    width: 2rem}}
-@media (min-width: 992px) {
-
-  [data-coco][data-component="app-sidebar-nav"]{
-    display: block;
-    height: 100%;
-    width: 6rem}
-
-    [data-coco][data-component="app-sidebar-nav"] .nav-action .nav-item-label{
-    display: block}
-
-    [data-coco][data-component="app-sidebar-nav"] .nav-actions-button{
-    height: 72px;
-    width: 72px}
-
-      [data-coco][data-component="app-sidebar-nav"] .nav-actions-button .coco-icon{
-    height: 2.5rem;
-    width: 2.5rem}
-    }
-@media (max-height: 760px) and (min-width: 576px) {
-  [data-coco][data-component="app-sidebar-nav"]{
-    display: block;
-    height: 100%;
-    width: 4.5rem}
-
-    [data-coco][data-component="app-sidebar-nav"] .nav-action .nav-item-label{
-    display: block}
-
-    [data-coco][data-component="app-sidebar-nav"] .nav-actions-button{
-    margin-bottom: 0.5rem;
-    height: 3.5rem;
-    width: 3.5rem}
-
-      [data-coco][data-component="app-sidebar-nav"] .nav-actions-button .coco-icon{
-    height: 2rem;
-    width: 2rem}
-    }
-.sidebar-nav-action{
-  display: flex;
-  align-items: flex-start;
-  padding: 0.25rem}
-.sidebar-nav-action .sidebar-nav-action-icon{
-  margin-right: 0.75rem;
-  flex: none;
-  --tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--tw-text-opacity))}
-.sidebar-nav-action .sidebar-nav-action-detail{
-  width: 100%;
-  text-align: left}
-.sidebar-nav-action .sidebar-nav-action-label{
-  margin-bottom: 0.125rem;
-  font-weight: 600;
-  --tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--tw-text-opacity))}
-.sidebar-nav-action .sidebar-nav-action-description{
-  font-size: 12px;
-  line-height: 16px}
-.sidebar-nav-menu a.sidebar-nav-actions-item {
-    width: 320px;
-  }
 [data-coco][data-component="app-sidebar-nav-item"]{
-  flex: none;
   cursor: pointer;
   --tw-bg-opacity: 1;
   background-color: rgb(31 41 55 / var(--tw-bg-opacity));
@@ -1530,10 +1397,11 @@ select{
   width: 100%;
   flex-direction: column;
   align-items: center;
-  justify-content: center;
-  padding-left: 1rem;
-  padding-right: 1rem}
-[data-coco][data-component="app-sidebar-nav-item"]:hover{
+  justify-content: center}
+[data-coco][data-component="app-sidebar-nav-item"].active,
+    [data-coco][data-component="app-sidebar-nav-item"]:hover{
+  --tw-bg-opacity: 1;
+  background-color: rgb(17 24 39 / var(--tw-bg-opacity));
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity))}
 [data-coco][data-component="app-sidebar-nav-item"] .nav-item-icon{
@@ -1542,238 +1410,447 @@ select{
   display: block;
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
-  height: 1.5rem;
-  width: 1.5rem}
+  transition-duration: 150ms}
 [data-coco][data-component="app-sidebar-nav-item"] .nav-item-label{
-  margin-top: 0.125rem;
   display: block;
   cursor: pointer;
-  font-size: 10px;
-  line-height: 12px;
   font-weight: 600;
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms}
-@media (min-width: 576px){
+[data-coco][data-component="app-sidebar-nav-item"] .nav-item-action-button{
+  --tw-bg-opacity: 1;
+  background-color: rgb(0 153 121 / var(--tw-bg-opacity));
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+  margin-left: auto;
+  margin-right: auto;
+  display: flex;
+  cursor: pointer;
+  align-items: center;
+  justify-content: center;
+  border-radius: 9999px}
+@media (max-width: 576px) {
+    [data-coco][data-component="app-sidebar-nav-item"] .nav-item-label{
+    margin-top: 0.125rem;
+    font-size: 10px;
+    line-height: 12px}
+
+    [data-coco][data-component="app-sidebar-nav-item"] .nav-item-icon .coco-icon{
+    height: 1.5rem;
+    width: 1.5rem}
 
-  [data-coco][data-component="app-sidebar-nav-item"].emphasised .nav-item-icon{
+    [data-coco][data-component="app-sidebar-nav-item"] .nav-item-action-button{
+    height: 3rem;
+    width: 3rem}
+
+      [data-coco][data-component="app-sidebar-nav-item"] .nav-item-action-button .coco-icon{
+    height: 1.5rem;
+    width: 1.5rem}
+    }
+@media (min-width: 576px) and (max-width: 768px) {
+      [data-coco][data-component="app-sidebar-nav-item"] .nav-item-action-button:hover {
+        transform: scale(1.05);
+      }
+
+    [data-coco][data-component="app-sidebar-nav-item"][data-active="true"]{
+    --tw-bg-opacity: 1;
+    background-color: rgb(55 65 81 / var(--tw-bg-opacity));
     --tw-text-opacity: 1;
-    color: rgb(0 153 121 / var(--tw-text-opacity))}}
-[data-coco][data-component="app-sidebar-nav-item"].active{
-  --tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--tw-text-opacity))}
-[data-coco][data-component="app-sidebar-nav-item"]:hover .nav-item-icon{
-  --tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--tw-text-opacity))}
-@media (min-width: 576px){
+    color: rgb(255 255 255 / var(--tw-text-opacity))}
 
-  [data-coco][data-component="app-sidebar-nav-item"]:hover.emphasised .nav-item-icon{
+    [data-coco][data-component="app-sidebar-nav-item"][data-active="true"]:hover{
+    --tw-bg-opacity: 1;
+    background-color: rgb(55 65 81 / var(--tw-bg-opacity))}
+      [data-coco][data-component="app-sidebar-nav-item"][data-emphasise="true"] .nav-item-icon{
     --tw-text-opacity: 1;
-    color: rgb(0 153 121 / var(--tw-text-opacity))}}
-[data-coco][data-component="app-sidebar-nav-item"]:hover .nav-item-label{
-  --tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--tw-text-opacity))}
-@media (min-width: 576px) {
+    color: rgb(0 153 121 / var(--tw-text-opacity))}
+      [data-coco][data-component="app-sidebar-nav-item"][data-emphasise="true"] .nav-item-icon:hover{
+    --tw-text-opacity: 1;
+    color: rgb(0 153 121 / var(--tw-text-opacity))}
+
   [data-coco][data-component="app-sidebar-nav-item"]{
-    display: block;
-    padding-left: 0.5rem;
-    padding-right: 0.5rem;
     padding-top: 1rem;
     padding-bottom: 1rem}
-  [data-coco][data-component="app-sidebar-nav-item"]:hover{
-    --tw-bg-opacity: 1;
-    background-color: rgb(17 24 39 / var(--tw-bg-opacity))}
-
-    [data-coco][data-component="app-sidebar-nav-item"] .nav-item-icon{
-    height: 1.75rem;
-    width: 1.75rem}
 
     [data-coco][data-component="app-sidebar-nav-item"] .nav-item-label{
     margin-top: 0.25rem;
     font-size: 10px;
     line-height: 12px}
 
-    [data-coco][data-component="app-sidebar-nav-item"].active{
+    [data-coco][data-component="app-sidebar-nav-item"] .nav-item-icon .coco-icon{
+    height: 1.5rem;
+    width: 1.5rem}
+
+    [data-coco][data-component="app-sidebar-nav-item"] .nav-item-action-button{
+    height: 3rem;
+    width: 3rem}
+
+      [data-coco][data-component="app-sidebar-nav-item"] .nav-item-action-button .coco-icon{
+    height: 1.5rem;
+    width: 1.5rem}
+    }
+@media (min-width: 768px) {
+      [data-coco][data-component="app-sidebar-nav-item"] .nav-item-action-button:hover {
+        transform: scale(1.05);
+      }
+
+    [data-coco][data-component="app-sidebar-nav-item"][data-active="true"]{
     --tw-bg-opacity: 1;
     background-color: rgb(55 65 81 / var(--tw-bg-opacity));
     --tw-text-opacity: 1;
     color: rgb(255 255 255 / var(--tw-text-opacity))}
 
-    [data-coco][data-component="app-sidebar-nav-item"].active:hover{
+    [data-coco][data-component="app-sidebar-nav-item"][data-active="true"]:hover{
     --tw-bg-opacity: 1;
     background-color: rgb(55 65 81 / var(--tw-bg-opacity))}
-    }
-@media (min-width: 992px) {
+      [data-coco][data-component="app-sidebar-nav-item"][data-emphasise="true"] .nav-item-icon{
+    --tw-text-opacity: 1;
+    color: rgb(0 153 121 / var(--tw-text-opacity))}
+      [data-coco][data-component="app-sidebar-nav-item"][data-emphasise="true"] .nav-item-icon:hover{
+    --tw-text-opacity: 1;
+    color: rgb(0 153 121 / var(--tw-text-opacity))}
 
   [data-coco][data-component="app-sidebar-nav-item"]{
     padding-top: 1.25rem;
     padding-bottom: 1.25rem}
 
-  [data-coco][data-component="app-sidebar-nav-item"]:hover{
-    --tw-bg-opacity: 1;
-    background-color: rgb(17 24 39 / var(--tw-bg-opacity))}
+    [data-coco][data-component="app-sidebar-nav-item"] .nav-item-label{
+    margin-top: 0.375rem;
+    font-size: 12px;
+    line-height: 14px}
 
-    [data-coco][data-component="app-sidebar-nav-item"] .nav-item-icon{
+    [data-coco][data-component="app-sidebar-nav-item"] .nav-item-icon .coco-icon{
     height: 2rem;
     width: 2rem}
 
-    [data-coco][data-component="app-sidebar-nav-item"] .nav-item-label{
-    font-size: 12px;
-    line-height: 14px}
+    [data-coco][data-component="app-sidebar-nav-item"] .nav-item-action-button {
+      height: 72px;
+      width: 72px;
+    }
 
-    [data-coco][data-component="app-sidebar-nav-item"].active{
+      [data-coco][data-component="app-sidebar-nav-item"] .nav-item-action-button .coco-icon{
+    height: 2.5rem;
+    width: 2.5rem}
+    }
+@media (max-height: 760px) and (min-width: 576px) {
+      [data-coco][data-component="app-sidebar-nav-item"] .nav-item-action-button:hover {
+        transform: scale(1.05);
+      }
+
+    [data-coco][data-component="app-sidebar-nav-item"][data-active="true"]{
     --tw-bg-opacity: 1;
     background-color: rgb(55 65 81 / var(--tw-bg-opacity));
     --tw-text-opacity: 1;
     color: rgb(255 255 255 / var(--tw-text-opacity))}
 
-    [data-coco][data-component="app-sidebar-nav-item"].active:hover{
+    [data-coco][data-component="app-sidebar-nav-item"][data-active="true"]:hover{
     --tw-bg-opacity: 1;
     background-color: rgb(55 65 81 / var(--tw-bg-opacity))}
-    }
-@media (max-height: 760px) and (min-width: 576px) {
+      [data-coco][data-component="app-sidebar-nav-item"][data-emphasise="true"] .nav-item-icon{
+    --tw-text-opacity: 1;
+    color: rgb(0 153 121 / var(--tw-text-opacity))}
+      [data-coco][data-component="app-sidebar-nav-item"][data-emphasise="true"] .nav-item-icon:hover{
+    --tw-text-opacity: 1;
+    color: rgb(0 153 121 / var(--tw-text-opacity))}
+
   [data-coco][data-component="app-sidebar-nav-item"]{
-    display: block;
-    padding-left: 0.5rem;
-    padding-right: 0.5rem;
     padding-top: 1rem;
     padding-bottom: 1rem}
-  [data-coco][data-component="app-sidebar-nav-item"]:hover{
-    --tw-bg-opacity: 1;
-    background-color: rgb(17 24 39 / var(--tw-bg-opacity))}
-
-    [data-coco][data-component="app-sidebar-nav-item"] .nav-item-icon{
-    height: 1.75rem;
-    width: 1.75rem}
 
     [data-coco][data-component="app-sidebar-nav-item"] .nav-item-label{
     margin-top: 0.25rem;
     font-size: 10px;
     line-height: 12px}
 
-    [data-coco][data-component="app-sidebar-nav-item"].active{
-    --tw-bg-opacity: 1;
-    background-color: rgb(55 65 81 / var(--tw-bg-opacity));
-    --tw-text-opacity: 1;
-    color: rgb(255 255 255 / var(--tw-text-opacity))}
+    [data-coco][data-component="app-sidebar-nav-item"] .nav-item-icon .coco-icon{
+    height: 1.5rem;
+    width: 1.5rem}
 
-    [data-coco][data-component="app-sidebar-nav-item"].active:hover{
-    --tw-bg-opacity: 1;
-    background-color: rgb(55 65 81 / var(--tw-bg-opacity))}
+    [data-coco][data-component="app-sidebar-nav-item"] .nav-item-action-button{
+    height: 3rem;
+    width: 3rem}
+
+      [data-coco][data-component="app-sidebar-nav-item"] .nav-item-action-button .coco-icon{
+    height: 1.5rem;
+    width: 1.5rem}
     }
-.sidebar-nav-menu > :not([hidden]) ~ :not([hidden]){
+[data-coco][data-component="app-sidebar-nav-menu"] > :not([hidden]) ~ :not([hidden]){
   --tw-divide-y-reverse: 0;
   border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
   border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
-  border-color: rgb(156 163 175 / 0.2)}
-.sidebar-nav-menu{
+  --tw-divide-opacity: 1;
+  border-color: rgb(55 65 81 / var(--tw-divide-opacity))}
+[data-coco][data-component="app-sidebar-nav-menu"]{
   overflow: hidden;
   --tw-bg-opacity: 1;
   background-color: rgb(31 41 55 / var(--tw-bg-opacity));
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
   --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}
 @media (min-width: 576px){
 
-  .sidebar-nav-menu{
+  [data-coco][data-component="app-sidebar-nav-menu"]{
     border-top-right-radius: 0.375rem;
     border-bottom-right-radius: 0.375rem}}
-[data-placement="bottom"] .sidebar-nav-menu{
+[data-coco][data-component="app-sidebar-nav-menu"] {
+    width: -moz-min-content;
+    width: min-content;
+  }
+[data-placement="bottom"] [data-coco][data-component="app-sidebar-nav-menu"]{
   border-bottom-right-radius: 0.375rem;
   border-bottom-left-radius: 0.375rem}
-[data-placement="top"] .sidebar-nav-menu{
+[data-placement="top"] [data-coco][data-component="app-sidebar-nav-menu"]{
   border-top-left-radius: 0.375rem;
   border-top-right-radius: 0.375rem}
-.sidebar-nav-menu .sidebar-nav-menu-select{
-  width: 100%;
-  border-width: 0px;
-  background-color: transparent;
-  font-weight: 600;
-  --tw-text-opacity: 1;
-  color: rgb(229 231 235 / var(--tw-text-opacity))}
-.sidebar-nav-menu .sidebar-nav-menu-select:hover{
-  --tw-bg-opacity: 1;
-  background-color: rgb(17 24 39 / var(--tw-bg-opacity))}
-.sidebar-nav-menu .sidebar-nav-menu-select:focus{
-  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)}
-.sidebar-nav-menu .sidebar-nav-menu-select:active{
-  --tw-bg-opacity: 1;
-  background-color: rgb(17 24 39 / var(--tw-bg-opacity))}
-.sidebar-nav-menu .sidebar-nav-menu-item{
+[data-coco][data-component="app-sidebar-nav-menu"] .menu-item-link .coco-link{
   display: flex;
   width: 100%;
   align-items: center;
   --tw-bg-opacity: 1;
   background-color: rgb(31 41 55 / var(--tw-bg-opacity));
-  padding: 0.75rem;
-  text-align: center;
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
   --tw-text-opacity: 1;
   color: rgb(156 163 175 / var(--tw-text-opacity));
-  text-decoration-line: none;
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms}
-.sidebar-nav-menu .coco-link.sidebar-nav-menu-item:hover{
+[data-coco][data-component="app-sidebar-nav-menu"] .menu-item-link .coco-link:hover{
   --tw-bg-opacity: 1;
   background-color: rgb(17 24 39 / var(--tw-bg-opacity))}
-.sidebar-nav-menu .sidebar-nav-menu-item-text{
+[data-coco][data-component="app-sidebar-nav-menu"] .menu-item-label{
   min-width: 0px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  font-weight: 600;
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms}
-.sidebar-nav-menu .sidebar-nav-menu-item-qualifier{
+[data-coco][data-component="app-sidebar-nav-menu"] .menu-item-qualifier{
   margin-left: auto;
   flex: none;
   padding-left: 1rem;
   font-size: 14px;
   line-height: 16px}
-.sidebar-nav-menu .sidebar-nav-menu-select{
-  font-size: 1rem;
-  line-height: 1.5rem}
-.sidebar-nav-menu .sidebar-nav-menu-item{
-  font-size: 1rem;
-  line-height: 1.5rem;
-      width: 280px}
-@media (min-width: 576px) {
-    .sidebar-nav-menu .sidebar-nav-menu-select{
+[data-coco][data-component="app-sidebar-nav-menu"] .menu-item-select select{
+  background-color: transparent;
+  --tw-text-opacity: 1;
+  color: rgb(229 231 235 / var(--tw-text-opacity))}
+[data-coco][data-component="app-sidebar-nav-menu"] .menu-item-select select:hover{
+  --tw-bg-opacity: 1;
+  background-color: rgb(17 24 39 / var(--tw-bg-opacity))}
+[data-coco][data-component="app-sidebar-nav-menu"] .menu-item-select select:focus{
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)}
+[data-coco][data-component="app-sidebar-nav-menu"] .menu-item-select select:active{
+  --tw-bg-opacity: 1;
+  background-color: rgb(17 24 39 / var(--tw-bg-opacity))}
+[data-coco][data-component="app-sidebar-nav-menu"] .menu-item-select select{
+  width: 100%;
+  border-width: 0px;
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem}
+[data-coco][data-component="app-sidebar-nav-menu"] .menu-item-action{
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem}
+[data-coco][data-component="app-sidebar-nav-menu"] .card{
+  display: grid;
+  -moz-column-gap: 1rem;
+       column-gap: 1rem;
+  row-gap: 0.25rem;
+      grid-template-areas: "icon title" "icon text";
+      grid-template-columns: min-content 1fr}
+[data-coco][data-component="app-sidebar-nav-menu"] .card .coco-icon{
+  margin-top: 0.125rem;
+  height: 1.25rem;
+  width: 1.25rem;
+        grid-area: icon}
+[data-coco][data-component="app-sidebar-nav-menu"] .card h4{
+  font-size: 16px;
+  line-height: 20px;
+  font-weight: 700;
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+        grid-area: title}
+[data-coco][data-component="app-sidebar-nav-menu"] .card div{
+  font-size: 14px;
+  line-height: 20px;
+        grid-area: text}
+@media (max-width: 576px) {
+    [data-coco][data-component="app-sidebar-nav-menu"] .menu-item {
+      width: 280px;
+    }
+
+    [data-coco][data-component="app-sidebar-nav-menu"] .menu-item-label{
+    font-size: 1rem;
+    line-height: 1.5rem}
+
+    [data-coco][data-component="app-sidebar-nav-menu"] .menu-item-select select{
+    font-size: 1rem;
+    line-height: 1.5rem}
+
+    [data-coco][data-component="app-sidebar-nav-menu"] .menu-item-link .coco-link,[data-coco][data-component="app-sidebar-nav-menu"] .menu-item-select select,[data-coco][data-component="app-sidebar-nav-menu"] .menu-item-action{
+    padding-left: 1.5rem;
+    padding-right: 1.5rem}
+      [data-coco][data-component="app-sidebar-nav-menu"].nav-card-menu .menu-item {
+        width: 320px;
+      }
+
+      [data-coco][data-component="app-sidebar-nav-menu"].nav-card-menu .coco-link{
+    padding-left: 1rem;
+    padding-right: 1rem;
+    padding-top: 1rem;
+    padding-bottom: 1rem}
+    }
+@media (min-width: 576px) and (max-width: 768px) {
+    [data-coco][data-component="app-sidebar-nav-menu"] .menu-item {
+      width: 240px;
+    }
+
+    [data-coco][data-component="app-sidebar-nav-menu"] .menu-item-label{
     font-size: 0.875rem;
     line-height: 1.25rem}
 
-    .sidebar-nav-menu .sidebar-nav-menu-item{
+    [data-coco][data-component="app-sidebar-nav-menu"] .menu-item-select select{
     font-size: 0.875rem;
-    line-height: 1.25rem;
-      width: 240px}
+    line-height: 1.25rem}
+
+    [data-coco][data-component="app-sidebar-nav-menu"] .menu-item-link .coco-link,[data-coco][data-component="app-sidebar-nav-menu"] .menu-item-select select,[data-coco][data-component="app-sidebar-nav-menu"] .menu-item-action{
+    padding-left: 1rem;
+    padding-right: 1rem}
+      [data-coco][data-component="app-sidebar-nav-menu"].nav-card-menu .menu-item {
+        width: 280px;
+      }
+
+      [data-coco][data-component="app-sidebar-nav-menu"].nav-card-menu .coco-link{
+    padding-left: 1rem;
+    padding-right: 1rem;
+    padding-top: 1rem;
+    padding-bottom: 1rem}
     }
-@media (min-width: 992px) {
-    .sidebar-nav-menu .sidebar-nav-menu-select{
+@media (min-width: 768px) {
+    [data-coco][data-component="app-sidebar-nav-menu"] .menu-item {
+      width: 280px;
+    }
+
+    [data-coco][data-component="app-sidebar-nav-menu"] .menu-item-label{
     font-size: 1rem;
     line-height: 1.5rem}
 
-    .sidebar-nav-menu .sidebar-nav-menu-item{
+    [data-coco][data-component="app-sidebar-nav-menu"] .menu-item-select select{
     font-size: 1rem;
-    line-height: 1.5rem;
-      width: 280px}
+    line-height: 1.5rem}
+
+    [data-coco][data-component="app-sidebar-nav-menu"] .menu-item-link .coco-link,[data-coco][data-component="app-sidebar-nav-menu"] .menu-item-select select,[data-coco][data-component="app-sidebar-nav-menu"] .menu-item-action{
+    padding-left: 1.5rem;
+    padding-right: 1.5rem}
+      [data-coco][data-component="app-sidebar-nav-menu"].nav-card-menu .menu-item {
+        width: 320px;
+      }
+
+      [data-coco][data-component="app-sidebar-nav-menu"].nav-card-menu .coco-link{
+    padding-left: 1rem;
+    padding-right: 1rem;
+    padding-top: 1rem;
+    padding-bottom: 1rem}
     }
 @media (max-height: 760px) and (min-width: 576px) {
-    .sidebar-nav-menu .sidebar-nav-menu-select{
+    [data-coco][data-component="app-sidebar-nav-menu"] .menu-item {
+      width: 240px;
+    }
+
+    [data-coco][data-component="app-sidebar-nav-menu"] .menu-item-label{
     font-size: 0.875rem;
     line-height: 1.25rem}
 
-    .sidebar-nav-menu .sidebar-nav-menu-item{
+    [data-coco][data-component="app-sidebar-nav-menu"] .menu-item-select select{
     font-size: 0.875rem;
-    line-height: 1.25rem;
-      width: 240px}
+    line-height: 1.25rem}
+
+    [data-coco][data-component="app-sidebar-nav-menu"] .menu-item-link .coco-link,[data-coco][data-component="app-sidebar-nav-menu"] .menu-item-select select,[data-coco][data-component="app-sidebar-nav-menu"] .menu-item-action{
+    padding-left: 1rem;
+    padding-right: 1rem}
+      [data-coco][data-component="app-sidebar-nav-menu"].nav-card-menu .menu-item {
+        width: 280px;
+      }
+
+      [data-coco][data-component="app-sidebar-nav-menu"].nav-card-menu .coco-link{
+    padding-left: 1rem;
+    padding-right: 1rem;
+    padding-top: 1rem;
+    padding-bottom: 1rem}
+    }
+[data-coco][data-component="app-sidebar-nav"]{
+  --tw-bg-opacity: 1;
+  background-color: rgb(31 41 55 / var(--tw-bg-opacity));
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale}
+@media (max-width: 576px) {
+  [data-coco][data-component="app-sidebar-nav"]{
+    display: grid;
+    height: 3.5rem;
+    width: 100%;
+    grid-auto-flow: column;
+    grid-auto-columns: 1fr}
+
+    [data-coco][data-component="app-sidebar-nav"] .nav-item{
+    display: flex;
+    align-items: stretch}
+
+      [data-coco][data-component="app-sidebar-nav"] .nav-item[data-show-on-mobile="false"]{
+    display: none}
+      [data-coco][data-component="app-sidebar-nav"] .nav-item-action .nav-item-label{
+    display: none}
+    }
+@media (min-width: 576px) and (max-width: 768px) {
+
+  [data-coco][data-component="app-sidebar-nav"]{
+    height: 100%}
+      [data-coco][data-component="app-sidebar-nav"] .nav-item-action .nav-item-label{
+    --tw-text-opacity: 1;
+    color: rgb(0 153 121 / var(--tw-text-opacity))}
+
+  [data-coco][data-component="app-sidebar-nav"]{
+    width: 4rem}
+      [data-coco][data-component="app-sidebar-nav"] .nav-item-action [data-component="app-sidebar-nav-item"]{
+    padding-bottom: 0.625rem}
+    }
+@media (min-width: 768px) {
+
+  [data-coco][data-component="app-sidebar-nav"]{
+    height: 100%}
+      [data-coco][data-component="app-sidebar-nav"] .nav-item-action .nav-item-label{
+    --tw-text-opacity: 1;
+    color: rgb(0 153 121 / var(--tw-text-opacity))}
+
+  [data-coco][data-component="app-sidebar-nav"]{
+    width: 6rem}
+      [data-coco][data-component="app-sidebar-nav"] .nav-item-action [data-component="app-sidebar-nav-item"]{
+    padding-bottom: 0.75rem}
+    }
+@media (max-height: 760px) and (min-width: 576px) {
+
+  [data-coco][data-component="app-sidebar-nav"]{
+    height: 100%}
+      [data-coco][data-component="app-sidebar-nav"] .nav-item-action .nav-item-label{
+    --tw-text-opacity: 1;
+    color: rgb(0 153 121 / var(--tw-text-opacity))}
+
+  [data-coco][data-component="app-sidebar-nav"]{
+    width: 4rem}
+      [data-coco][data-component="app-sidebar-nav"] .nav-item-action [data-component="app-sidebar-nav-item"]{
+    padding-bottom: 0.625rem}
     }
 [data-coco][data-component="app-slat"]{
   padding-left: 0.75rem}
@@ -4885,66 +4962,113 @@ select{
   --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
   border-color: rgba(0, 12, 39, 0.1)}
-.sidebar-nav-vertical-condensed .nav-action .nav-item-label{
-  display: block}
-.sidebar-nav-vertical-condensed .nav-actions-button{
-  margin-bottom: 0.5rem;
-  height: 3.5rem;
-  width: 3.5rem}
-.sidebar-nav-vertical-condensed .nav-actions-button .coco-icon{
-  height: 2rem;
-  width: 2rem}
-.sidebar-nav-vertical .nav-action .nav-item-label{
-  display: block}
-.sidebar-nav-vertical .nav-actions-button{
-  height: 72px;
-  width: 72px}
-.sidebar-nav-vertical .nav-actions-button .coco-icon{
-  height: 2.5rem;
-  width: 2.5rem}
-.sidebar-nav-item-vertical-condensed .nav-item-icon{
-  height: 1.75rem;
-  width: 1.75rem}
-.sidebar-nav-item-vertical-condensed .nav-item-label{
-  margin-top: 0.25rem;
+.app-sidebar-nav-horizontal-item .nav-item-label{
+  margin-top: 0.125rem;
   font-size: 10px;
   line-height: 12px}
-.sidebar-nav-item-vertical-condensed.active{
-  --tw-bg-opacity: 1;
-  background-color: rgb(55 65 81 / var(--tw-bg-opacity));
+.app-sidebar-nav-horizontal-item .nav-item-icon .coco-icon{
+  height: 1.5rem;
+  width: 1.5rem}
+.app-sidebar-nav-horizontal-item .nav-item-action-button{
+  height: 3rem;
+  width: 3rem}
+.app-sidebar-nav-horizontal-item .nav-item-action-button .coco-icon{
+  height: 1.5rem;
+  width: 1.5rem}
+.app-sidebar-nav-vertical-item .nav-item-action-button:hover {
+        transform: scale(1.05);
+      }
+.app-sidebar-nav-vertical-item[data-emphasise="true"] .nav-item-icon{
   --tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--tw-text-opacity))}
-.sidebar-nav-item-vertical-condensed.active:hover{
-  --tw-bg-opacity: 1;
-  background-color: rgb(55 65 81 / var(--tw-bg-opacity))}
-.sidebar-nav-item-vertical .nav-item-icon{
-  height: 2rem;
-  width: 2rem}
-.sidebar-nav-item-vertical .nav-item-label{
+  color: rgb(0 153 121 / var(--tw-text-opacity))}
+.app-sidebar-nav-vertical-item[data-emphasise="true"] .nav-item-icon:hover{
+  --tw-text-opacity: 1;
+  color: rgb(0 153 121 / var(--tw-text-opacity))}
+.app-sidebar-nav-vertical-narrow-item .nav-item-label{
+  margin-top: 0.25rem;
+  font-size: 10px;
+  line-height: 12px}
+.app-sidebar-nav-vertical-narrow-item .nav-item-icon .coco-icon{
+  height: 1.5rem;
+  width: 1.5rem}
+.app-sidebar-nav-vertical-narrow-item .nav-item-action-button{
+  height: 3rem;
+  width: 3rem}
+.app-sidebar-nav-vertical-narrow-item .nav-item-action-button .coco-icon{
+  height: 1.5rem;
+  width: 1.5rem}
+.app-sidebar-nav-vertical-wide-item .nav-item-label{
+  margin-top: 0.375rem;
   font-size: 12px;
   line-height: 14px}
-.sidebar-nav-item-vertical.active{
-  --tw-bg-opacity: 1;
-  background-color: rgb(55 65 81 / var(--tw-bg-opacity));
-  --tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--tw-text-opacity))}
-.sidebar-nav-item-vertical.active:hover{
-  --tw-bg-opacity: 1;
-  background-color: rgb(55 65 81 / var(--tw-bg-opacity))}
-.sidebar-nav-menu-small .sidebar-nav-menu-select{
+.app-sidebar-nav-vertical-wide-item .nav-item-icon .coco-icon{
+  height: 2rem;
+  width: 2rem}
+.app-sidebar-nav-vertical-wide-item .nav-item-action-button {
+      height: 72px;
+      width: 72px;
+    }
+.app-sidebar-nav-vertical-wide-item .nav-item-action-button .coco-icon{
+  height: 2.5rem;
+  width: 2.5rem}
+.app-sidebar-nav-menu-small .menu-item {
+      width: 240px;
+    }
+.app-sidebar-nav-menu-small .menu-item-label{
   font-size: 0.875rem;
   line-height: 1.25rem}
-.sidebar-nav-menu-small .sidebar-nav-menu-item{
+.app-sidebar-nav-menu-small .menu-item-select select{
   font-size: 0.875rem;
-  line-height: 1.25rem;
-      width: 240px}
-.sidebar-nav-menu-large .sidebar-nav-menu-select{
+  line-height: 1.25rem}
+.app-sidebar-nav-menu-small .menu-item-link .coco-link,
+    .app-sidebar-nav-menu-small .menu-item-select select,
+    .app-sidebar-nav-menu-small .menu-item-action{
+  padding-left: 1rem;
+  padding-right: 1rem}
+.app-sidebar-nav-menu-small.nav-card-menu .menu-item {
+        width: 280px;
+      }
+.app-sidebar-nav-menu-small.nav-card-menu .coco-link{
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-top: 1rem;
+  padding-bottom: 1rem}
+.app-sidebar-nav-menu-regular .menu-item {
+      width: 280px;
+    }
+.app-sidebar-nav-menu-regular .menu-item-label{
   font-size: 1rem;
   line-height: 1.5rem}
-.sidebar-nav-menu-large .sidebar-nav-menu-item{
+.app-sidebar-nav-menu-regular .menu-item-select select{
   font-size: 1rem;
-  line-height: 1.5rem;
-      width: 280px}
+  line-height: 1.5rem}
+.app-sidebar-nav-menu-regular .menu-item-link .coco-link,
+    .app-sidebar-nav-menu-regular .menu-item-select select,
+    .app-sidebar-nav-menu-regular .menu-item-action{
+  padding-left: 1.5rem;
+  padding-right: 1.5rem}
+.app-sidebar-nav-menu-regular.nav-card-menu .menu-item {
+        width: 320px;
+      }
+.app-sidebar-nav-menu-regular.nav-card-menu .coco-link{
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-top: 1rem;
+  padding-bottom: 1rem}
+.app-sidebar-nav-horizontal .nav-item{
+  display: flex;
+  align-items: stretch}
+.app-sidebar-nav-horizontal .nav-item[data-show-on-mobile="false"]{
+  display: none}
+.app-sidebar-nav-horizontal .nav-item-action .nav-item-label{
+  display: none}
+.app-sidebar-nav-vertical .nav-item-action .nav-item-label{
+  --tw-text-opacity: 1;
+  color: rgb(0 153 121 / var(--tw-text-opacity))}
+.app-sidebar-nav-vertical-narrow .nav-item-action [data-component="app-sidebar-nav-item"]{
+  padding-bottom: 0.625rem}
+.app-sidebar-nav-vertical-wide .nav-item-action [data-component="app-sidebar-nav-item"]{
+  padding-bottom: 0.75rem}
 .app-alert-stacked .alert-container{
   padding-top: 1rem;
   padding-bottom: 1rem}