coveragebook_components 0.8.2 → 0.8.4

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

@@ -1,5 +1,5 @@
 /*
-! tailwindcss v3.3.2 | MIT License | https://tailwindcss.com
+! tailwindcss v3.3.5 | MIT License | https://tailwindcss.com
 *//*
 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
@@ -167,6 +167,8 @@ optgroup,
 select,
 textarea {
   font-family: inherit; /* 1 */
+  font-feature-settings: inherit; /* 1 */
+  font-variation-settings: inherit; /* 1 */
   font-size: 100%; /* 1 */
   font-weight: inherit; /* 1 */
   line-height: inherit; /* 1 */
@@ -304,6 +306,13 @@ menu {
   padding: 0;
 }
 
+/*
+Reset default styling for dialogs.
+*/
+dialog {
+  padding: 0;
+}
+
 /*
 Prevent resizing textareas horizontally by default.
 */
@@ -377,7 +386,7 @@ video {
   display: none;
 }
 
-[type='text'],[type='email'],[type='url'],[type='password'],[type='number'],[type='date'],[type='datetime-local'],[type='month'],[type='search'],[type='tel'],[type='time'],[type='week'],[multiple],textarea,select{
+[type='text'],input:where(:not([type])),[type='email'],[type='url'],[type='password'],[type='number'],[type='date'],[type='datetime-local'],[type='month'],[type='search'],[type='tel'],[type='time'],[type='week'],[multiple],textarea,select{
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
@@ -393,7 +402,7 @@ video {
   line-height: 1.5rem;
   --tw-shadow: 0 0 #0000;}
 
-[type='text']:focus, [type='email']:focus, [type='url']:focus, [type='password']:focus, [type='number']:focus, [type='date']:focus, [type='datetime-local']:focus, [type='month']:focus, [type='search']:focus, [type='tel']:focus, [type='time']:focus, [type='week']:focus, [multiple]:focus, textarea:focus, select:focus{
+[type='text']:focus, input:where(:not([type])):focus, [type='email']:focus, [type='url']:focus, [type='password']:focus, [type='number']:focus, [type='date']:focus, [type='datetime-local']:focus, [type='month']:focus, [type='search']:focus, [type='tel']:focus, [type='time']:focus, [type='week']:focus, [multiple]:focus, textarea:focus, select:focus{
   outline: 2px solid transparent;
   outline-offset: 2px;
   --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
@@ -417,7 +426,11 @@ input::placeholder,textarea::placeholder{
   padding: 0}
 
 ::-webkit-date-and-time-value{
-  min-height: 1.5em}
+  min-height: 1.5em;
+  text-align: inherit}
+
+::-webkit-datetime-edit{
+  display: inline-flex}
 
 ::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field{
   padding-top: 0;
@@ -432,7 +445,7 @@ select{
   -webkit-print-color-adjust: exact;
           print-color-adjust: exact}
 
-[multiple]{
+[multiple],[size]:where(select:not([size="1"])){
   background-image: initial;
   background-position: initial;
   background-repeat: unset;
@@ -1385,140 +1398,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 +1410,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 +1423,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"].emphasised .nav-item-icon{
+    [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: 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 +4975,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}