@deepgram/styles 0.2.7 → 0.2.9

package/dist/deepgram.expanded.css

@@ -46,6 +46,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;
@@ -57,6 +58,7 @@
     --color-dg-background: #0b0b0c;
     --color-dg-charcoal: #1a1a1f;
     --color-dg-translucent: rgba(0, 0, 0, 0.5);
+    --color-dg-border: #2c2c33;
     --color-dg-pebble: #4e4e52;
     --color-dg-slate: #949498;
     --color-dg-text: #fbfbff;
@@ -256,6 +258,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;
   }
@@ -334,6 +342,9 @@
   .mb-8 {
     margin-bottom: calc(var(--spacing) * 8);
   }
+  .ml-auto {
+    margin-left: auto;
+  }
   .block {
     display: block;
   }
@@ -352,6 +363,9 @@
   .inline {
     display: inline;
   }
+  .inline-block {
+    display: inline-block;
+  }
   .inline-flex {
     display: inline-flex;
   }
@@ -361,6 +375,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);
@@ -401,6 +423,9 @@
   .h-full {
     height: 100%;
   }
+  .max-h-60 {
+    max-height: calc(var(--spacing) * 60);
+  }
   .max-h-\[7\.5rem\] {
     max-height: 7.5rem;
   }
@@ -494,6 +519,9 @@
   .shrink {
     flex-shrink: 1;
   }
+  .shrink-0 {
+    flex-shrink: 0;
+  }
   .grow {
     flex-grow: 1;
   }
@@ -516,6 +544,9 @@
   .resize {
     resize: both;
   }
+  .list-disc {
+    list-style-type: disc;
+  }
   .appearance-none {
     appearance: none;
   }
@@ -576,6 +607,11 @@
   .gap-8 {
     gap: calc(var(--spacing) * 8);
   }
+  .truncate {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
   .overflow-auto {
     overflow: auto;
   }
@@ -594,6 +630,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;
@@ -630,6 +673,9 @@
     --tw-border-style: solid;
     border-style: solid;
   }
+  .border-dg-border {
+    border-color: var(--color-dg-border);
+  }
   .border-dg-danger {
     border-color: var(--color-dg-danger);
   }
@@ -705,9 +751,15 @@
   .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-success {
+    background-color: var(--color-dg-success);
+  }
   .bg-dg-translucent {
     background-color: var(--color-dg-translucent);
   }
@@ -726,6 +778,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));
@@ -779,6 +837,9 @@
   .px-2 {
     padding-inline: calc(var(--spacing) * 2);
   }
+  .px-3 {
+    padding-inline: calc(var(--spacing) * 3);
+  }
   .px-4 {
     padding-inline: calc(var(--spacing) * 4);
   }
@@ -806,6 +867,9 @@
   .py-3 {
     padding-block: calc(var(--spacing) * 3);
   }
+  .py-5 {
+    padding-block: calc(var(--spacing) * 5);
+  }
   .py-6 {
     padding-block: calc(var(--spacing) * 6);
   }
@@ -830,12 +894,27 @@
   .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-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;
   }
@@ -958,6 +1037,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);
   }
@@ -967,6 +1049,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);
   }
@@ -1013,6 +1098,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)) {
@@ -1026,9 +1115,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)) {
@@ -1088,6 +1191,11 @@
     -webkit-user-select: none;
     user-select: none;
   }
+  .placeholder\:text-dg-slate {
+    &::placeholder {
+      color: var(--color-dg-slate);
+    }
+  }
   .disabled\:cursor-not-allowed {
     &:disabled {
       cursor: not-allowed;
@@ -1105,12 +1213,23 @@
       white-space: nowrap;
     }
   }
+  .sm\:px-6 {
+    @media (width >= 40rem) {
+      padding-inline: calc(var(--spacing) * 6);
+    }
+  }
   .sm\:text-3xl {
     @media (width >= 40rem) {
       font-size: var(--text-3xl);
       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);
@@ -2220,6 +2339,23 @@
     font-weight: var(--font-weight-normal);
     color: var(--color-dg-muted);
   }
+  .dg-card-headings {
+    border-bottom-style: var(--tw-border-style);
+    border-bottom-width: 1px;
+    border-color: var(--color-dg-border);
+    padding-inline: calc(var(--spacing) * 4);
+    padding-block: calc(var(--spacing) * 5);
+    @media (width >= 40rem) {
+      padding-inline: calc(var(--spacing) * 6);
+    }
+  }
+  .dg-card-headings__title {
+    font-size: var(--text-base);
+    line-height: var(--tw-leading, var(--text-base--line-height));
+    --tw-font-weight: var(--font-weight-semibold);
+    font-weight: var(--font-weight-semibold);
+    color: var(--color-white);
+  }
   .dg-item-title {
     margin-bottom: calc(var(--spacing) * 1);
     display: flex;
@@ -2969,6 +3105,297 @@
       width: auto;
     }
   }
+  .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);
+  }
 }
 @property --tw-translate-x {
   syntax: "*";