@deepgram/styles 0.2.8 → 0.2.10

package/dist/deepgram.expanded.css

@@ -16,6 +16,7 @@
     --color-white: #fff;
     --spacing: 0.25rem;
     --breakpoint-2xl: 96rem;
+    --container-xs: 20rem;
     --container-md: 28rem;
     --container-7xl: 80rem;
     --text-xs: 0.75rem;
@@ -46,6 +47,7 @@
     --leading-snug: 1.375;
     --leading-normal: 1.5;
     --leading-relaxed: 1.625;
+    --radius-md: 0.375rem;
     --radius-lg: 0.5rem;
     --animate-spin: spin 1s linear infinite;
     --default-transition-duration: 150ms;
@@ -257,6 +259,12 @@
   .inset-0 {
     inset: calc(var(--spacing) * 0);
   }
+  .inset-y-0 {
+    inset-block: calc(var(--spacing) * 0);
+  }
+  .right-0 {
+    right: calc(var(--spacing) * 0);
+  }
   .z-50 {
     z-index: 50;
   }
@@ -305,6 +313,9 @@
   .mt-2 {
     margin-top: calc(var(--spacing) * 2);
   }
+  .mt-3 {
+    margin-top: calc(var(--spacing) * 3);
+  }
   .mt-4 {
     margin-top: calc(var(--spacing) * 4);
   }
@@ -317,6 +328,9 @@
   .mt-auto {
     margin-top: auto;
   }
+  .-mr-2 {
+    margin-right: calc(var(--spacing) * -2);
+  }
   .mb-1 {
     margin-bottom: calc(var(--spacing) * 1);
   }
@@ -335,6 +349,12 @@
   .mb-8 {
     margin-bottom: calc(var(--spacing) * 8);
   }
+  .ml-3 {
+    margin-left: calc(var(--spacing) * 3);
+  }
+  .ml-auto {
+    margin-left: auto;
+  }
   .block {
     display: block;
   }
@@ -353,6 +373,9 @@
   .inline {
     display: inline;
   }
+  .inline-block {
+    display: inline-block;
+  }
   .inline-flex {
     display: inline-flex;
   }
@@ -362,6 +385,14 @@
   .aspect-\[4\/3\] {
     aspect-ratio: 4/3;
   }
+  .size-2 {
+    width: calc(var(--spacing) * 2);
+    height: calc(var(--spacing) * 2);
+  }
+  .size-5 {
+    width: calc(var(--spacing) * 5);
+    height: calc(var(--spacing) * 5);
+  }
   .size-6 {
     width: calc(var(--spacing) * 6);
     height: calc(var(--spacing) * 6);
@@ -402,6 +433,9 @@
   .h-full {
     height: 100%;
   }
+  .max-h-60 {
+    max-height: calc(var(--spacing) * 60);
+  }
   .max-h-\[7\.5rem\] {
     max-height: 7.5rem;
   }
@@ -477,6 +511,9 @@
   .max-w-screen-2xl {
     max-width: var(--breakpoint-2xl);
   }
+  .max-w-xs {
+    max-width: var(--container-xs);
+  }
   .min-w-0 {
     min-width: calc(var(--spacing) * 0);
   }
@@ -495,9 +532,15 @@
   .shrink {
     flex-shrink: 1;
   }
+  .shrink-0 {
+    flex-shrink: 0;
+  }
   .grow {
     flex-grow: 1;
   }
+  .origin-top-right {
+    transform-origin: 100% 0;
+  }
   .-translate-y-0\.5 {
     --tw-translate-y: calc(var(--spacing) * -0.5);
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -517,6 +560,9 @@
   .resize {
     resize: both;
   }
+  .list-disc {
+    list-style-type: disc;
+  }
   .appearance-none {
     appearance: none;
   }
@@ -577,6 +623,18 @@
   .gap-8 {
     gap: calc(var(--spacing) * 8);
   }
+  .space-y-1 {
+    :where(& > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
+      margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));
+      margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));
+    }
+  }
+  .truncate {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
   .overflow-auto {
     overflow: auto;
   }
@@ -595,6 +653,13 @@
   .rounded-lg {
     border-radius: var(--radius-lg);
   }
+  .rounded-md {
+    border-radius: var(--radius-md);
+  }
+  .rounded-r-md {
+    border-top-right-radius: var(--radius-md);
+    border-bottom-right-radius: var(--radius-md);
+  }
   .border {
     border-style: var(--tw-border-style);
     border-width: 1px;
@@ -619,10 +684,18 @@
     border-bottom-style: var(--tw-border-style);
     border-bottom-width: 1px;
   }
+  .border-b-2 {
+    border-bottom-style: var(--tw-border-style);
+    border-bottom-width: 2px;
+  }
   .border-l {
     border-left-style: var(--tw-border-style);
     border-left-width: 1px;
   }
+  .border-l-4 {
+    border-left-style: var(--tw-border-style);
+    border-left-width: 4px;
+  }
   .border-dashed {
     --tw-border-style: dashed;
     border-style: dashed;
@@ -709,9 +782,21 @@
   .bg-dg-danger {
     background-color: var(--color-dg-danger);
   }
+  .bg-dg-muted {
+    background-color: var(--color-dg-muted);
+  }
   .bg-dg-primary {
     background-color: var(--color-dg-primary);
   }
+  .bg-dg-primary\/10 {
+    background-color: var(--color-dg-primary);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-dg-primary) 10%, transparent);
+    }
+  }
+  .bg-dg-success {
+    background-color: var(--color-dg-success);
+  }
   .bg-dg-translucent {
     background-color: var(--color-dg-translucent);
   }
@@ -730,6 +815,12 @@
   .bg-white {
     background-color: var(--color-white);
   }
+  .bg-white\/5 {
+    background-color: color-mix(in srgb, #fff 5%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
+    }
+  }
   .bg-gradient-to-r {
     --tw-gradient-position: to right in oklab;
     background-image: linear-gradient(var(--tw-gradient-stops));
@@ -780,9 +871,15 @@
   .p-8 {
     padding: calc(var(--spacing) * 8);
   }
+  .px-1 {
+    padding-inline: calc(var(--spacing) * 1);
+  }
   .px-2 {
     padding-inline: calc(var(--spacing) * 2);
   }
+  .px-3 {
+    padding-inline: calc(var(--spacing) * 3);
+  }
   .px-4 {
     padding-inline: calc(var(--spacing) * 4);
   }
@@ -819,6 +916,9 @@
   .py-8 {
     padding-block: calc(var(--spacing) * 8);
   }
+  .py-10 {
+    padding-block: calc(var(--spacing) * 10);
+  }
   .py-12 {
     padding-block: calc(var(--spacing) * 12);
   }
@@ -828,6 +928,15 @@
   .pt-0 {
     padding-top: calc(var(--spacing) * 0);
   }
+  .pt-1 {
+    padding-top: calc(var(--spacing) * 1);
+  }
+  .pt-2 {
+    padding-top: calc(var(--spacing) * 2);
+  }
+  .pt-4 {
+    padding-top: calc(var(--spacing) * 4);
+  }
   .pt-6 {
     padding-top: calc(var(--spacing) * 6);
   }
@@ -837,12 +946,30 @@
   .pt-10 {
     padding-top: calc(var(--spacing) * 10);
   }
+  .pr-4 {
+    padding-right: calc(var(--spacing) * 4);
+  }
+  .pr-9 {
+    padding-right: calc(var(--spacing) * 9);
+  }
+  .pr-12 {
+    padding-right: calc(var(--spacing) * 12);
+  }
   .pb-0 {
     padding-bottom: calc(var(--spacing) * 0);
   }
+  .pb-3 {
+    padding-bottom: calc(var(--spacing) * 3);
+  }
   .pb-6 {
     padding-bottom: calc(var(--spacing) * 6);
   }
+  .pl-3 {
+    padding-left: calc(var(--spacing) * 3);
+  }
+  .pl-5 {
+    padding-left: calc(var(--spacing) * 5);
+  }
   .text-center {
     text-align: center;
   }
@@ -937,6 +1064,10 @@
     --tw-font-weight: var(--font-weight-semibold);
     font-weight: var(--font-weight-semibold);
   }
+  .tracking-tight {
+    --tw-tracking: var(--tracking-tight);
+    letter-spacing: var(--tracking-tight);
+  }
   .tracking-wide {
     --tw-tracking: var(--tracking-wide);
     letter-spacing: var(--tracking-wide);
@@ -965,6 +1096,9 @@
   .text-dg-muted {
     color: var(--color-dg-muted);
   }
+  .text-dg-platinum {
+    color: var(--color-dg-platinum);
+  }
   .text-dg-primary {
     color: var(--color-dg-primary);
   }
@@ -974,6 +1108,9 @@
   .text-dg-success {
     color: var(--color-dg-success);
   }
+  .text-dg-text {
+    color: var(--color-dg-text);
+  }
   .text-dg-warning {
     color: var(--color-dg-warning);
   }
@@ -1020,6 +1157,10 @@
     --tw-shadow: 0 0.0625rem 0.125rem 0 var(--tw-shadow-color, rgba(0, 0, 0, 0.05));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .shadow-lg {
+    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .dg-glow-cyan-green {
     box-shadow: var(--dg-primary, #13ef95) 0.375rem 0 0.9375rem 0, var(--dg-secondary, #149afb) -0.375rem 0 0.9375rem 0;
     @supports (color: color-mix(in lab, red, red)) {
@@ -1033,9 +1174,23 @@
     outline-style: var(--tw-outline-style);
     outline-width: 1px;
   }
+  .outline-1 {
+    outline-style: var(--tw-outline-style);
+    outline-width: 1px;
+  }
+  .outline-2 {
+    outline-style: var(--tw-outline-style);
+    outline-width: 2px;
+  }
   .-outline-offset-1 {
     outline-offset: calc(1px * -1);
   }
+  .-outline-offset-2 {
+    outline-offset: calc(2px * -1);
+  }
+  .outline-dg-primary {
+    outline-color: var(--color-dg-primary);
+  }
   .outline-white\/10 {
     outline-color: color-mix(in srgb, #fff 10%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1095,6 +1250,99 @@
     -webkit-user-select: none;
     user-select: none;
   }
+  .placeholder\:text-dg-slate {
+    &::placeholder {
+      color: var(--color-dg-slate);
+    }
+  }
+  .hover\:border-dg-platinum {
+    &:hover {
+      @media (hover: hover) {
+        border-color: var(--color-dg-platinum);
+      }
+    }
+  }
+  .hover\:border-dg-slate {
+    &:hover {
+      @media (hover: hover) {
+        border-color: var(--color-dg-slate);
+      }
+    }
+  }
+  .hover\:bg-white\/5 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: color-mix(in srgb, #fff 5%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
+        }
+      }
+    }
+  }
+  .hover\:text-dg-fog {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-dg-fog);
+      }
+    }
+  }
+  .hover\:text-white {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-white);
+      }
+    }
+  }
+  .focus\:bg-white\/5 {
+    &:focus {
+      background-color: color-mix(in srgb, #fff 5%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
+      }
+    }
+  }
+  .focus\:outline-hidden {
+    &:focus {
+      --tw-outline-style: none;
+      outline-style: none;
+      @media (forced-colors: active) {
+        outline: 2px solid transparent;
+        outline-offset: 2px;
+      }
+    }
+  }
+  .focus\:outline-2 {
+    &:focus {
+      outline-style: var(--tw-outline-style);
+      outline-width: 2px;
+    }
+  }
+  .focus\:outline-offset-2 {
+    &:focus {
+      outline-offset: 2px;
+    }
+  }
+  .focus\:outline-dg-primary {
+    &:focus {
+      outline-color: var(--color-dg-primary);
+    }
+  }
+  .focus-visible\:outline-2 {
+    &:focus-visible {
+      outline-style: var(--tw-outline-style);
+      outline-width: 2px;
+    }
+  }
+  .focus-visible\:outline-offset-2 {
+    &:focus-visible {
+      outline-offset: 2px;
+    }
+  }
+  .focus-visible\:outline-dg-primary {
+    &:focus-visible {
+      outline-color: var(--color-dg-primary);
+    }
+  }
   .disabled\:cursor-not-allowed {
     &:disabled {
       cursor: not-allowed;
@@ -1105,6 +1353,40 @@
       opacity: 50%;
     }
   }
+  .sm\:-my-px {
+    @media (width >= 40rem) {
+      margin-block: -1px;
+    }
+  }
+  .sm\:ml-6 {
+    @media (width >= 40rem) {
+      margin-left: calc(var(--spacing) * 6);
+    }
+  }
+  .sm\:flex {
+    @media (width >= 40rem) {
+      display: flex;
+    }
+  }
+  .sm\:hidden {
+    @media (width >= 40rem) {
+      display: none;
+    }
+  }
+  .sm\:items-center {
+    @media (width >= 40rem) {
+      align-items: center;
+    }
+  }
+  .sm\:space-x-8 {
+    @media (width >= 40rem) {
+      :where(& > :not(:last-child)) {
+        --tw-space-x-reverse: 0;
+        margin-inline-start: calc(calc(var(--spacing) * 8) * var(--tw-space-x-reverse));
+        margin-inline-end: calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-x-reverse)));
+      }
+    }
+  }
   .sm\:truncate {
     @media (width >= 40rem) {
       overflow: hidden;
@@ -1123,6 +1405,12 @@
       line-height: var(--tw-leading, var(--text-3xl--line-height));
     }
   }
+  .sm\:text-sm {
+    @media (width >= 40rem) {
+      font-size: var(--text-sm);
+      line-height: var(--tw-leading, var(--text-sm--line-height));
+    }
+  }
   .sm\:tracking-tight {
     @media (width >= 40rem) {
       --tw-tracking: var(--tracking-tight);
@@ -1154,6 +1442,11 @@
       justify-content: space-between;
     }
   }
+  .lg\:px-8 {
+    @media (width >= 64rem) {
+      padding-inline: calc(var(--spacing) * 8);
+    }
+  }
   .dark\:border-white\/10 {
     &.dark {
       border-color: color-mix(in srgb, #fff 10%, transparent);
@@ -2998,130 +3291,826 @@
       width: auto;
     }
   }
-}
-@property --tw-translate-x {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0;
-}
-@property --tw-translate-y {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0;
-}
-@property --tw-translate-z {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0;
-}
-@property --tw-rotate-x {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-rotate-y {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-rotate-z {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-skew-x {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-skew-y {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-border-style {
-  syntax: "*";
-  inherits: false;
-  initial-value: solid;
-}
-@property --tw-gradient-position {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-gradient-from {
-  syntax: "<color>";
-  inherits: false;
-  initial-value: #0000;
-}
-@property --tw-gradient-via {
-  syntax: "<color>";
-  inherits: false;
-  initial-value: #0000;
-}
-@property --tw-gradient-to {
-  syntax: "<color>";
-  inherits: false;
-  initial-value: #0000;
-}
-@property --tw-gradient-stops {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-gradient-via-stops {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-gradient-from-position {
-  syntax: "<length-percentage>";
-  inherits: false;
-  initial-value: 0%;
-}
-@property --tw-gradient-via-position {
-  syntax: "<length-percentage>";
-  inherits: false;
-  initial-value: 50%;
-}
-@property --tw-gradient-to-position {
-  syntax: "<length-percentage>";
-  inherits: false;
-  initial-value: 100%;
-}
-@property --tw-leading {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-font-weight {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-tracking {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-shadow {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0 0 #0000;
-}
-@property --tw-shadow-color {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-shadow-alpha {
-  syntax: "<percentage>";
-  inherits: false;
-  initial-value: 100%;
-}
-@property --tw-inset-shadow {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0 0 #0000;
-}
-@property --tw-inset-shadow-color {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-inset-shadow-alpha {
-  syntax: "<percentage>";
-  inherits: false;
-  initial-value: 100%;
-}
-@property --tw-ring-color {
+  .dg-alert {
+    border-radius: var(--radius-md);
+    padding: calc(var(--spacing) * 4);
+  }
+  .dg-alert--warning {
+    background-color: color-mix(in srgb, #fec84b 10%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in srgb, var(--color-dg-warning) 10%, transparent);
+    }
+    outline: 1px solid color-mix(in srgb, #fec84b 15%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      outline: 1px solid color-mix(in srgb, var(--color-dg-warning) 15%, transparent);
+    }
+  }
+  .dg-alert--success {
+    background-color: color-mix(in srgb, #12b76a 10%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in srgb, var(--color-dg-success) 10%, transparent);
+    }
+    outline: 1px solid color-mix(in srgb, #12b76a 15%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      outline: 1px solid color-mix(in srgb, var(--color-dg-success) 15%, transparent);
+    }
+  }
+  .dg-alert--danger {
+    background-color: color-mix(in srgb, #f04438 10%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in srgb, var(--color-dg-danger) 10%, transparent);
+    }
+    outline: 1px solid color-mix(in srgb, #f04438 15%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      outline: 1px solid color-mix(in srgb, var(--color-dg-danger) 15%, transparent);
+    }
+  }
+  .dg-alert--info {
+    background-color: var(--color-dg-secondary);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in srgb, var(--color-dg-secondary) 10%, transparent);
+    }
+    outline: 1px solid var(--color-dg-secondary);
+    @supports (color: color-mix(in lab, red, red)) {
+      outline: 1px solid color-mix(in srgb, var(--color-dg-secondary) 15%, transparent);
+    }
+  }
+  .dg-alert__content {
+    display: flex;
+  }
+  .dg-alert__icon {
+    flex-shrink: 0;
+  }
+  .dg-alert__icon svg {
+    width: calc(var(--spacing) * 5);
+    height: calc(var(--spacing) * 5);
+  }
+  .dg-alert--warning .dg-alert__icon {
+    color: var(--color-dg-warning);
+  }
+  .dg-alert--success .dg-alert__icon {
+    color: var(--color-dg-success);
+  }
+  .dg-alert--danger .dg-alert__icon {
+    color: var(--color-dg-danger);
+  }
+  .dg-alert--info .dg-alert__icon {
+    color: var(--color-dg-secondary);
+  }
+  .dg-alert__body {
+    margin-left: 0.75rem;
+  }
+  .dg-alert__title {
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+    --tw-font-weight: var(--font-weight-medium);
+    font-weight: var(--font-weight-medium);
+  }
+  .dg-alert--warning .dg-alert__title {
+    color: var(--color-dg-warning);
+  }
+  .dg-alert--success .dg-alert__title {
+    color: var(--color-dg-success);
+  }
+  .dg-alert--danger .dg-alert__title {
+    color: var(--color-dg-danger);
+  }
+  .dg-alert--info .dg-alert__title {
+    color: var(--color-dg-secondary);
+  }
+  .dg-alert__description {
+    margin-top: calc(var(--spacing) * 2);
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+    color: var(--color-dg-muted);
+  }
+  .dg-alert__actions {
+    margin-top: calc(var(--spacing) * 4);
+  }
+  .dg-alert__actions .dg-btn {
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+  }
+  .dg-alert__list {
+    margin-top: calc(var(--spacing) * 2);
+    list-style-type: disc;
+    padding-left: calc(var(--spacing) * 5);
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+    color: var(--color-dg-muted);
+  }
+  .dg-alert__list li {
+    padding-left: 0.25rem;
+  }
+  .dg-alert__dismiss {
+    margin-left: auto;
+    flex-shrink: 0;
+    padding-left: calc(var(--spacing) * 3);
+  }
+  .dg-alert__dismiss button {
+    display: inline-flex;
+    cursor: pointer;
+    border-radius: var(--radius-md);
+    padding: calc(var(--spacing) * 1.5);
+    color: var(--color-dg-muted);
+  }
+  .dg-alert__dismiss button:hover {
+    color: var(--color-dg-text);
+  }
+  .dg-alert__dismiss button svg {
+    width: calc(var(--spacing) * 5);
+    height: calc(var(--spacing) * 5);
+  }
+  .dg-combobox {
+    position: relative;
+    display: block;
+  }
+  .dg-combobox__label {
+    display: block;
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+    --tw-font-weight: var(--font-weight-medium);
+    font-weight: var(--font-weight-medium);
+    color: var(--color-white);
+    line-height: 1.5rem;
+  }
+  .dg-combobox__wrapper {
+    position: relative;
+    margin-top: calc(var(--spacing) * 2);
+    display: block;
+  }
+  .dg-combobox__input {
+    display: block;
+    width: 100%;
+    border-radius: var(--radius-md);
+    background-color: color-mix(in srgb, #fff 5%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
+    }
+    padding-block: calc(var(--spacing) * 1.5);
+    padding-right: calc(var(--spacing) * 12);
+    padding-left: calc(var(--spacing) * 3);
+    font-size: var(--text-base);
+    line-height: var(--tw-leading, var(--text-base--line-height));
+    color: var(--color-white);
+    outline-style: var(--tw-outline-style);
+    outline-width: 1px;
+    outline-offset: calc(1px * -1);
+    outline-color: color-mix(in srgb, #fff 10%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      outline-color: color-mix(in oklab, var(--color-white) 10%, transparent);
+    }
+    &::placeholder {
+      color: var(--color-dg-slate);
+    }
+    @media (width >= 40rem) {
+      font-size: var(--text-sm);
+      line-height: var(--tw-leading, var(--text-sm--line-height));
+    }
+    line-height: 1.5rem;
+  }
+  .dg-combobox__input:focus {
+    outline-style: var(--tw-outline-style);
+    outline-width: 2px;
+    outline-offset: calc(2px * -1);
+    outline-color: var(--color-dg-primary);
+  }
+  .dg-combobox__toggle {
+    position: absolute;
+    inset-block: calc(var(--spacing) * 0);
+    right: calc(var(--spacing) * 0);
+    display: flex;
+    align-items: center;
+    border-top-right-radius: var(--radius-md);
+    border-bottom-right-radius: var(--radius-md);
+    padding-inline: calc(var(--spacing) * 2);
+  }
+  .dg-combobox__toggle-icon {
+    width: calc(var(--spacing) * 5);
+    height: calc(var(--spacing) * 5);
+    color: var(--color-dg-muted);
+  }
+  .dg-combobox__options {
+    max-height: calc(var(--spacing) * 60);
+    overflow: auto;
+    border-radius: var(--radius-md);
+    background-color: var(--color-dg-charcoal);
+    padding-block: calc(var(--spacing) * 1);
+    font-size: var(--text-base);
+    line-height: var(--tw-leading, var(--text-base--line-height));
+    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    @media (width >= 40rem) {
+      font-size: var(--text-sm);
+      line-height: var(--tw-leading, var(--text-sm--line-height));
+    }
+    outline: 1px solid rgba(255, 255, 255, 0.1);
+    outline-offset: -1px;
+  }
+  .dg-combobox__option {
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    padding-inline: calc(var(--spacing) * 3);
+    padding-block: calc(var(--spacing) * 2);
+    color: var(--color-dg-platinum);
+    -webkit-user-select: none;
+    user-select: none;
+    cursor: pointer;
+  }
+  .dg-combobox__option:hover {
+    background-color: var(--color-dg-primary);
+    color: var(--color-white);
+  }
+  .dg-combobox__option.selected {
+    background-color: var(--color-dg-primary);
+    color: var(--color-white);
+  }
+  .dg-combobox__option-text {
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .dg-combobox__check {
+    position: absolute;
+    inset-block: calc(var(--spacing) * 0);
+    right: calc(var(--spacing) * 0);
+    display: flex;
+    align-items: center;
+    padding-right: calc(var(--spacing) * 4);
+    color: var(--color-white);
+  }
+  .dg-combobox__check-icon {
+    width: calc(var(--spacing) * 5);
+    height: calc(var(--spacing) * 5);
+  }
+  .dg-combobox--with-check .dg-combobox__option {
+    position: relative;
+    padding-right: calc(var(--spacing) * 9);
+  }
+  .dg-combobox--with-check .dg-combobox__option.selected .dg-combobox__check {
+    display: flex;
+  }
+  .dg-combobox--with-avatar .dg-combobox__option {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .dg-combobox__avatar {
+    width: calc(var(--spacing) * 6);
+    height: calc(var(--spacing) * 6);
+    flex-shrink: 0;
+    border-radius: calc(infinity * 1px);
+  }
+  .dg-combobox--with-status .dg-combobox__option {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .dg-combobox__status {
+    display: inline-block;
+    width: calc(var(--spacing) * 2);
+    height: calc(var(--spacing) * 2);
+    flex-shrink: 0;
+    border-radius: calc(infinity * 1px);
+  }
+  .dg-combobox__status--online {
+    background-color: var(--color-dg-success);
+  }
+  .dg-combobox__status--offline {
+    background-color: var(--color-dg-muted);
+  }
+  .dg-stacked {
+    min-height: 100%;
+  }
+  .dg-stacked__nav {
+    border-bottom-style: var(--tw-border-style);
+    border-bottom-width: 1px;
+    border-color: var(--color-dg-border);
+    background-color: var(--dg-bg-default, #0b0b0c);
+  }
+  .dg-stacked__nav-container {
+    margin-inline: auto;
+    max-width: var(--container-7xl);
+    padding-inline: calc(var(--spacing) * 4);
+    @media (width >= 40rem) {
+      padding-inline: calc(var(--spacing) * 6);
+    }
+    @media (width >= 64rem) {
+      padding-inline: calc(var(--spacing) * 8);
+    }
+  }
+  .dg-stacked__nav-bar {
+    display: flex;
+    height: calc(var(--spacing) * 16);
+    justify-content: space-between;
+  }
+  .dg-stacked__nav-left {
+    display: flex;
+  }
+  .dg-stacked__logo {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+  }
+  .dg-stacked__logo img {
+    height: calc(var(--spacing) * 8);
+    width: auto;
+  }
+  .dg-stacked__nav-links {
+    display: none;
+    @media (width >= 40rem) {
+      margin-block: -1px;
+    }
+    @media (width >= 40rem) {
+      margin-left: calc(var(--spacing) * 6);
+    }
+    @media (width >= 40rem) {
+      display: flex;
+    }
+    @media (width >= 40rem) {
+      :where(& > :not(:last-child)) {
+        --tw-space-x-reverse: 0;
+        margin-inline-start: calc(calc(var(--spacing) * 8) * var(--tw-space-x-reverse));
+        margin-inline-end: calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-x-reverse)));
+      }
+    }
+  }
+  .dg-stacked__nav-link {
+    display: inline-flex;
+    align-items: center;
+    border-bottom-style: var(--tw-border-style);
+    border-bottom-width: 2px;
+    border-color: transparent;
+    padding-inline: calc(var(--spacing) * 1);
+    padding-top: calc(var(--spacing) * 1);
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+    --tw-font-weight: var(--font-weight-medium);
+    font-weight: var(--font-weight-medium);
+    color: var(--color-dg-muted);
+    &:hover {
+      @media (hover: hover) {
+        border-color: var(--color-dg-platinum);
+      }
+    }
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-dg-fog);
+      }
+    }
+  }
+  .dg-stacked__nav-link--active {
+    border-color: var(--color-dg-primary);
+    color: var(--color-white);
+  }
+  .dg-stacked__nav-right {
+    display: none;
+    @media (width >= 40rem) {
+      margin-left: calc(var(--spacing) * 6);
+    }
+    @media (width >= 40rem) {
+      display: flex;
+    }
+    @media (width >= 40rem) {
+      align-items: center;
+    }
+  }
+  .dg-stacked__notification-btn {
+    position: relative;
+    border-radius: calc(infinity * 1px);
+    padding: calc(var(--spacing) * 1);
+    color: var(--color-dg-muted);
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-white);
+      }
+    }
+    &:focus {
+      outline-style: var(--tw-outline-style);
+      outline-width: 2px;
+    }
+    &:focus {
+      outline-offset: 2px;
+    }
+    &:focus {
+      outline-color: var(--color-dg-primary);
+    }
+  }
+  .dg-stacked__notification-btn svg {
+    width: calc(var(--spacing) * 6);
+    height: calc(var(--spacing) * 6);
+  }
+  .dg-stacked__profile {
+    position: relative;
+    margin-left: calc(var(--spacing) * 3);
+  }
+  .dg-stacked__profile-btn {
+    position: relative;
+    display: flex;
+    max-width: var(--container-xs);
+    align-items: center;
+    border-radius: calc(infinity * 1px);
+    &:focus-visible {
+      outline-style: var(--tw-outline-style);
+      outline-width: 2px;
+    }
+    &:focus-visible {
+      outline-offset: 2px;
+    }
+    &:focus-visible {
+      outline-color: var(--color-dg-primary);
+    }
+  }
+  .dg-stacked__profile-btn img {
+    width: calc(var(--spacing) * 8);
+    height: calc(var(--spacing) * 8);
+    border-radius: calc(infinity * 1px);
+    outline-style: var(--tw-outline-style);
+    outline-width: 1px;
+    outline-offset: calc(1px * -1);
+    outline-color: color-mix(in srgb, #fff 10%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      outline-color: color-mix(in oklab, var(--color-white) 10%, transparent);
+    }
+  }
+  .dg-stacked__profile-menu {
+    width: calc(var(--spacing) * 48);
+    transform-origin: 100% 0;
+    border-radius: var(--radius-md);
+    padding-block: calc(var(--spacing) * 1);
+    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    outline-style: var(--tw-outline-style);
+    outline-width: 1px;
+    outline-color: color-mix(in srgb, #fff 10%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      outline-color: color-mix(in oklab, var(--color-white) 10%, transparent);
+    }
+    background-color: var(--dg-bg-default, #0b0b0c);
+  }
+  .dg-stacked__profile-menu a {
+    display: block;
+    padding-inline: calc(var(--spacing) * 4);
+    padding-block: calc(var(--spacing) * 2);
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+    color: var(--color-dg-platinum);
+    &:focus {
+      background-color: color-mix(in srgb, #fff 5%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
+      }
+    }
+    &:focus {
+      --tw-outline-style: none;
+      outline-style: none;
+      @media (forced-colors: active) {
+        outline: 2px solid transparent;
+        outline-offset: 2px;
+      }
+    }
+  }
+  .dg-stacked__mobile-toggle {
+    margin-right: calc(var(--spacing) * -2);
+    display: flex;
+    align-items: center;
+    @media (width >= 40rem) {
+      display: none;
+    }
+  }
+  .dg-stacked__mobile-btn {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--radius-md);
+    padding: calc(var(--spacing) * 2);
+    color: var(--color-dg-muted);
+    &:hover {
+      @media (hover: hover) {
+        background-color: color-mix(in srgb, #fff 5%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
+        }
+      }
+    }
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-white);
+      }
+    }
+    &:focus {
+      outline-style: var(--tw-outline-style);
+      outline-width: 2px;
+    }
+    &:focus {
+      outline-offset: 2px;
+    }
+    &:focus {
+      outline-color: var(--color-dg-primary);
+    }
+    background-color: var(--dg-bg-default, #0b0b0c);
+  }
+  .dg-stacked__mobile-btn svg {
+    width: calc(var(--spacing) * 6);
+    height: calc(var(--spacing) * 6);
+  }
+  .dg-stacked__mobile-menu {
+    @media (width >= 40rem) {
+      display: none;
+    }
+  }
+  .dg-stacked__mobile-links {
+    :where(& > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
+      margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));
+      margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));
+    }
+    padding-top: calc(var(--spacing) * 2);
+    padding-bottom: calc(var(--spacing) * 3);
+  }
+  .dg-stacked__mobile-link {
+    display: block;
+    border-left-style: var(--tw-border-style);
+    border-left-width: 4px;
+    border-color: transparent;
+    padding-block: calc(var(--spacing) * 2);
+    padding-right: calc(var(--spacing) * 4);
+    padding-left: calc(var(--spacing) * 3);
+    font-size: var(--text-base);
+    line-height: var(--tw-leading, var(--text-base--line-height));
+    --tw-font-weight: var(--font-weight-medium);
+    font-weight: var(--font-weight-medium);
+    color: var(--color-dg-muted);
+    &:hover {
+      @media (hover: hover) {
+        border-color: var(--color-dg-slate);
+      }
+    }
+    &:hover {
+      @media (hover: hover) {
+        background-color: color-mix(in srgb, #fff 5%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
+        }
+      }
+    }
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-dg-fog);
+      }
+    }
+  }
+  .dg-stacked__mobile-link--active {
+    border-color: var(--color-dg-primary);
+    background-color: var(--color-dg-primary);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-dg-primary) 10%, transparent);
+    }
+    color: var(--color-dg-primary);
+  }
+  .dg-stacked__mobile-user {
+    border-top-style: var(--tw-border-style);
+    border-top-width: 1px;
+    border-color: var(--color-dg-border);
+    padding-top: calc(var(--spacing) * 4);
+    padding-bottom: calc(var(--spacing) * 3);
+  }
+  .dg-stacked__mobile-user-info {
+    display: flex;
+    align-items: center;
+    padding-inline: calc(var(--spacing) * 4);
+  }
+  .dg-stacked__mobile-user-avatar {
+    flex-shrink: 0;
+  }
+  .dg-stacked__mobile-user-avatar img {
+    width: calc(var(--spacing) * 10);
+    height: calc(var(--spacing) * 10);
+    border-radius: calc(infinity * 1px);
+    outline-style: var(--tw-outline-style);
+    outline-width: 1px;
+    outline-offset: calc(1px * -1);
+    outline-color: color-mix(in srgb, #fff 10%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      outline-color: color-mix(in oklab, var(--color-white) 10%, transparent);
+    }
+  }
+  .dg-stacked__mobile-user-details {
+    margin-left: calc(var(--spacing) * 3);
+  }
+  .dg-stacked__mobile-user-name {
+    font-size: var(--text-base);
+    line-height: var(--tw-leading, var(--text-base--line-height));
+    --tw-font-weight: var(--font-weight-medium);
+    font-weight: var(--font-weight-medium);
+    color: var(--color-white);
+  }
+  .dg-stacked__mobile-user-email {
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+    --tw-font-weight: var(--font-weight-medium);
+    font-weight: var(--font-weight-medium);
+    color: var(--color-dg-muted);
+  }
+  .dg-stacked__mobile-user-actions {
+    margin-top: calc(var(--spacing) * 3);
+    :where(& > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
+      margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));
+      margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));
+    }
+  }
+  .dg-stacked__mobile-user-actions a {
+    display: block;
+    padding-inline: calc(var(--spacing) * 4);
+    padding-block: calc(var(--spacing) * 2);
+    font-size: var(--text-base);
+    line-height: var(--tw-leading, var(--text-base--line-height));
+    --tw-font-weight: var(--font-weight-medium);
+    font-weight: var(--font-weight-medium);
+    color: var(--color-dg-muted);
+    &:hover {
+      @media (hover: hover) {
+        background-color: color-mix(in srgb, #fff 5%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
+        }
+      }
+    }
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-dg-fog);
+      }
+    }
+  }
+  .dg-stacked__content {
+    padding-block: calc(var(--spacing) * 10);
+  }
+  .dg-stacked__page-header {
+    margin-inline: auto;
+    max-width: var(--container-7xl);
+    padding-inline: calc(var(--spacing) * 4);
+    @media (width >= 40rem) {
+      padding-inline: calc(var(--spacing) * 6);
+    }
+    @media (width >= 64rem) {
+      padding-inline: calc(var(--spacing) * 8);
+    }
+  }
+  .dg-stacked__page-title {
+    font-size: var(--text-3xl);
+    line-height: var(--tw-leading, var(--text-3xl--line-height));
+    --tw-font-weight: var(--font-weight-bold);
+    font-weight: var(--font-weight-bold);
+    --tw-tracking: var(--tracking-tight);
+    letter-spacing: var(--tracking-tight);
+    color: var(--color-white);
+  }
+  .dg-stacked__main {
+    margin-inline: auto;
+    max-width: var(--container-7xl);
+    padding-inline: calc(var(--spacing) * 4);
+    padding-block: calc(var(--spacing) * 8);
+    @media (width >= 40rem) {
+      padding-inline: calc(var(--spacing) * 6);
+    }
+    @media (width >= 64rem) {
+      padding-inline: calc(var(--spacing) * 8);
+    }
+  }
+}
+@property --tw-translate-x {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-translate-y {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-translate-z {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-rotate-x {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-rotate-y {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-rotate-z {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-skew-x {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-skew-y {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-space-y-reverse {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-border-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+@property --tw-gradient-position {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-gradient-from {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: #0000;
+}
+@property --tw-gradient-via {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: #0000;
+}
+@property --tw-gradient-to {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: #0000;
+}
+@property --tw-gradient-stops {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-gradient-via-stops {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-gradient-from-position {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 0%;
+}
+@property --tw-gradient-via-position {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 50%;
+}
+@property --tw-gradient-to-position {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --tw-leading {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-font-weight {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-tracking {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --tw-inset-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-inset-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-inset-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --tw-ring-color {
   syntax: "*";
   inherits: false;
 }
@@ -3220,6 +4209,11 @@
   syntax: "*";
   inherits: false;
 }
+@property --tw-space-x-reverse {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
 @keyframes spin {
   to {
     transform: rotate(360deg);
@@ -3236,6 +4230,7 @@
       --tw-rotate-z: initial;
       --tw-skew-x: initial;
       --tw-skew-y: initial;
+      --tw-space-y-reverse: 0;
       --tw-border-style: solid;
       --tw-gradient-position: initial;
       --tw-gradient-from: #0000;
@@ -3278,6 +4273,7 @@
       --tw-drop-shadow-alpha: 100%;
       --tw-drop-shadow-size: initial;
       --tw-duration: initial;
+      --tw-space-x-reverse: 0;
     }
   }
 }