draft-components 1.0.0-beta → 1.0.0-beta.10

package/css/draft-components.css

@@ -587,6 +587,8 @@
   padding: 0 16px;
   transition-duration: 0.2s;
   transition-property: color, background-color;
+  text-decoration: none;
+  text-transform: none;
   border: 1px solid var(--dc-button-border-color);
   border-radius: var(--dc-button-radius);
   background: var(--dc-button-bg);
@@ -749,12 +751,20 @@
   justify-content: center;
 }
 
-.dc-button__icon,
-.dc-button__spinner {
+.dc-button__spinner,
+.dc-button__icon {
   flex: none;
+}
+
+.dc-button__spinner,
+.dc-button__icon:first-child {
   margin-right: 0.5em;
 }
 
+.dc-button__icon:last-child {
+  margin-left: 0.5em;
+}
+
 .dc-button__body {
   flex: auto;
   flex-direction: column;
@@ -769,6 +779,7 @@
 .dc-button_icon-only .dc-button__icon,
 .dc-button_icon-only .dc-button__spinner {
   margin-right: 0;
+  margin-left: 0;
 }
 
 .dc-button_has_caption .dc-button__icon,
@@ -879,173 +890,445 @@
   stroke-linecap: round;
 }
 
-/* Forms */
+/* Overlays */
 
-.dc-text-input__container {
-  --dc-input-font-size: 14px;
-  --dc-input-height: 36px;
-  --dc-input-padding-x: 12px;
-  --dc-input-border-radius: 6px;
-  --dc-input-text-color: var(--dc-control-primary-text-color);
-  --dc-input-border-color: var(--dc-control-border-color);
-  --dc-input-border-color-error: var(--dc-control-error-color);
-  --dc-input-bg: var(--dc-control-bg);
-  --dc-input-prefix-color: var(--dc-control-secondary-text-color);
-  --dc-input-suffix-color: var(--dc-control-secondary-text-color);
-  --dc-input-focus-ring-color: var(--dc-control-primary-color);
+.dc-tooltip {
+  --dc-tooltip-text-color: var(--dc-gray-50);
+  --dc-tooltip-bg: var(--dc-gray-700);
+  --dc-tooltip-transition-duration: 100ms;
 
   color-scheme: light;
-  font-family: var(--dc-primary-font);
-  font-size: var(--dc-input-font-size);
-  font-weight: 400;
-  line-height: 1;
-  color: var(--dc-input-text-color);
-  display: inline-flex;
-  align-items: stretch;
+  font: var(--dc-text-xs);
+  color: var(--dc-tooltip-text-color);
+  z-index: var(--dc-overlay-z-index);
+  top: 0;
+  left: 0;
   box-sizing: border-box;
-  height: var(--dc-input-height);
-  max-width: 100%;
-  vertical-align: middle;
-  border: 1px solid var(--dc-input-border-color);
-  border-radius: var(--dc-input-border-radius);
-  background: var(--dc-input-bg);
+  padding: 4px 8px;
+  border-radius: 6px;
+  background: var(--dc-tooltip-bg);
+  box-shadow: var(--dc-shadow-md);
 }
 
-.dc-text-input__container:focus-within {
-  border-color: var(--dc-input-focus-ring-color);
-  box-shadow: 0 0 0 1px var(--dc-input-focus-ring-color);
+.dc-tooltip_hidden {
+  opacity: 0;
+  transition: opacity var(--dc-tooltip-transition-duration) ease;
 }
 
-.dc-text-input__container_disabled {
-  opacity: var(--dc-disabled-state-opacity);
+.dc-tooltip_visible {
+  opacity: 1;
 }
 
-.dc-text-input__container_has_error {
-  border-color: var(--dc-input-border-color-error);
+.dc-popover {
+  --dc-popover-text-color: var(--dc-primary-text-color);
+  --dc-popover-transition-duration: 100ms;
+  --dc-popover-bg: white;
+  --dc-popover-shadow:
+    0 2px 0 -1px rgba(0, 0, 0, 0.075),
+    0 0 0 1px var(--dc-gray-200),
+    var(--dc-shadow-lg);
+
+  color-scheme: light;
+  z-index: var(--dc-overlay-z-index);
+  top: 0;
+  left: 0;
+  box-sizing: border-box;
+  padding: 1px;
 }
 
-.dc-text-input__container_block {
-  display: flex;
+.dc-popover-modal {
+  font: var(--dc-text-sm);
+  color: var(--dc-popover-text-color);
+  box-sizing: border-box;
+  max-width: 448px;
+  padding: 12px 16px;
+  border-radius: 8px;
+  background: var(--dc-popover-bg);
+  box-shadow: var(--dc-popover-shadow);
 }
 
-.dc-text-input__container_sm {
-  --dc-input-font-size: 13px;
-  --dc-input-height: 32px;
-  --dc-input-padding-x: 8px;
-  --dc-input-border-radius: 5px;
+.dc-popover_closed .dc-popover-modal {
+  opacity: 0;
+  transform: scale(0.95);
+  transition: var(--dc-popover-transition-duration) ease;
+  transition-property: opacity, transform;
 }
 
-.dc-text-input__container_lg {
-  --dc-input-font-size: 15px;
-  --dc-input-height: 40px;
-  --dc-input-padding-x: 16px;
-  --dc-input-border-radius: 7px;
+.dc-popover_opened .dc-popover-modal {
+  opacity: 1;
+  transform: scale(1);
 }
 
-.dc-text-input {
-  -webkit-appearance: none;
-     -moz-appearance: none;
-          appearance: none;
-  font: inherit;
-  color: inherit;
-  flex: auto;
-  min-width: 0;
-  max-width: 100%;
-  margin: 0;
-  padding: 0 var(--dc-input-padding-x);
-  border: none;
-  background: none;
+.dc-popover[data-position="top-start"] .dc-popover-modal {
+  transform-origin: bottom left;
 }
 
-.dc-text-input::-moz-placeholder {
-  color: inherit;
-  opacity: 0.4;
+.dc-popover[data-position="top-center"] .dc-popover-modal {
+  transform-origin: bottom center;
 }
 
-.dc-text-input::placeholder {
-  color: inherit;
-  opacity: 0.4;
+.dc-popover[data-position="top-right"] .dc-popover-modal {
+  transform-origin: bottom left;
 }
 
-.dc-text-input:focus {
-  outline: none;
+.dc-popover[data-position="right-start"] .dc-popover-modal {
+  transform-origin: left top;
 }
 
-.dc-text-input_width_2ch {
-  width: 2.5ch;
+.dc-popover[data-position="right-center"] .dc-popover-modal {
+  transform-origin: left center;
 }
 
-.dc-text-input_width_3ch {
-  width: 3.5ch;
+.dc-popover[data-position="right-right"] .dc-popover-modal {
+  transform-origin: left bottom;
 }
 
-.dc-text-input_width_4ch {
-  width: 4.5ch;
+.dc-popover[data-position="bottom-start"] .dc-popover-modal {
+  transform-origin: top left;
 }
 
-.dc-text-input_width_5ch {
-  width: 5.5ch;
+.dc-popover[data-position="bottom-center"] .dc-popover-modal {
+  transform-origin: top center;
 }
 
-.dc-text-input_width_10ch {
-  width: 10.5ch;
+.dc-popover[data-position="bottom-right"] .dc-popover-modal {
+  transform-origin: top left;
 }
 
-.dc-text-input_width_20ch {
-  width: 20.5ch;
+.dc-popover[data-position="left-start"] .dc-popover-modal {
+  transform-origin: right top;
 }
 
-.dc-text-input_width_40ch {
-  width: 40.5ch;
+.dc-popover[data-position="left-center"] .dc-popover-modal {
+  transform-origin: right center;
 }
 
-.dc-text-input__prefix,
-.dc-text-input__suffix {
-  display: inline-flex;
-  flex: none;
-  align-items: center;
+.dc-popover[data-position="left-right"] .dc-popover-modal {
+  transform-origin: right bottom;
+}
+
+.dc-dialog {
+  --dc-dialog-max-width: 480px;
+  --dc-dialog-safe-area: 16px;
+  --dc-dialog-viewport-gap: 16px;
+  --dc-dialog-transition-duration: 200ms;
+  --dc-dialog-text-color: var(--dc-primary-text-color);
+  --dc-dialog-border-color: transparent;
+  --dc-dialog-bg: var(--dc-primary-bg);
+  --dc-dialog-inset-shadow-color: var(--dc-border-color-transparent-2);
+  --dc-dialog-backdrop-color: rgba(17, 24, 39, 0.4); /* gray-900 */
+
+  color-scheme: light;
+  position: relative;
+  z-index: var(--dc-overlay-z-index);
+}
+
+.dc-dialog-backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
   box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  padding: var(--dc-dialog-viewport-gap);
+  background: var(--dc-dialog-backdrop-color);
 }
 
-.dc-text-input__prefix {
-  color: var(--dc-input-prefix-color);
+.dc-dialog_closed .dc-dialog-backdrop {
+  opacity: 0;
+  transition: opacity var(--dc-dialog-transition-duration) linear;
 }
 
-.dc-text-input__suffix {
-  color: var(--dc-input-suffix-color);
+.dc-dialog_opened .dc-dialog-backdrop {
+  opacity: 1;
 }
 
-.dc-text-input__container_has_prefix {
-  padding-left: var(--dc-input-padding-x);
+.dc-dialog-modal {
+  color: var(--dc-dialog-text-color);
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  width: 100%;
+  max-width: calc(var(--dc-dialog-max-width) + 2 * var(--dc-dialog-safe-area));
+  max-height: calc(100% - 2 * var(--dc-dialog-viewport-gap));
+  transform: translate(-50%, -50%);
+  border-radius: 12px;
+  background: var(--dc-dialog-bg);
+  box-shadow: var(--dc-shadow-xl);
 }
 
-.dc-text-input__container_has_prefix .dc-text-input {
-  padding-left: calc(var(--dc-input-padding-x) * 0.5);
+.dc-dialog-modal_sm {
+  --dc-dialog-max-width: 320px;
 }
 
-.dc-text-input__container_has_suffix {
-  padding-right: var(--dc-input-padding-x);
+.dc-dialog-modal_lg {
+  --dc-dialog-max-width: 640px;
 }
 
-.dc-text-input__container_has_suffix .dc-text-input {
-  padding-right: calc(var(--dc-input-padding-x) * 0.5);
+.dc-dialog_closed .dc-dialog-modal {
+  opacity: 0;
+  transform: translate(-50%, -50%) scale(0.95);
+  transition: var(--dc-dialog-transition-duration) ease;
+  transition-property: opacity, transform;
 }
 
-.dc-password-input {
-  --dc-password-input-switch-color: var(--dc-control-secondary-text-color);
-  --dc-password-input-switch-color-hover: var(--dc-control-primary-text-color);
-  --dc-password-input-switch-bg: transparent;
-  --dc-password-input-switch-bg-hover: var(--dc-bg-transparent-2);
+.dc-dialog_opened .dc-dialog-modal {
+  opacity: 1;
+  transform: translate(-50%, -50%) scale(1);
+}
 
-  color-scheme: light;
-  padding-right: 0;
+.dc-dialog-header,
+.dc-dialog-body,
+.dc-dialog-footer {
+  padding: calc(var(--dc-dialog-safe-area) / 2) var(--dc-dialog-safe-area);
 }
 
-.dc-password-input__btn {
-  -webkit-appearance: none;
-     -moz-appearance: none;
-          appearance: none;
-  color: inherit;
+.dc-dialog-header {
+  font: var(--dc-text-sm);
+}
+
+.dc-dialog-header__title-bar {
+  position: relative;
+  padding-right: 24px;
+}
+
+.dc-dialog-header__heading {
+  font: 700 var(--dc-text-md);
+  margin: 0;
+}
+
+.dc-dialog-header__close-btn {
+  position: absolute;
+  top: -8px;
+  right: -8px;
+  width: 32px;
+  height: 32px;
+}
+
+.dc-dialog-header__subheading,
+.dc-dialog-header__body {
+}
+
+.dc-dialog-body {
+  position: relative;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+  flex-grow: 1;
+  padding-top: var(--dc-dialog-safe-area);
+  padding-bottom: var(--dc-dialog-safe-area);
+}
+
+.dc-dialog-body_scroll-shadow-top {
+  box-shadow: inset 0 1px 1px var(--dc-dialog-inset-shadow-color);
+}
+
+.dc-dialog-body_scroll-shadow-bottom {
+  box-shadow: inset 0 -1px 1px var(--dc-dialog-inset-shadow-color);
+}
+
+.dc-dialog-body_scroll-shadow-top.dc-dialog-body_scroll-shadow-bottom {
+  box-shadow:
+    inset 0 1px 0 var(--dc-dialog-inset-shadow-color),
+    inset 0 -1px 0 var(--dc-dialog-inset-shadow-color);
+}
+
+.dc-dialog-footer {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.dc-dialog-footer > * + * {
+  margin-left: 8px;
+}
+
+.dc-dialog-modal > .dc-dialog-header:first-child,
+.dc-dialog-modal > .dc-dialog-body:first-child,
+.dc-dialog-modal > .dc-dialog-footer:first-child {
+  padding-top: var(--dc-dialog-safe-area);
+  border-top-left-radius: inherit;
+  border-top-right-radius: inherit;
+}
+
+.dc-dialog-modal > .dc-dialog-header:last-child,
+.dc-dialog-modal > .dc-dialog-body:last-child,
+.dc-dialog-modal > .dc-dialog-footer:last-child {
+  padding-bottom: var(--dc-dialog-safe-area);
+  border-bottom-right-radius: inherit;
+  border-bottom-left-radius: inherit;
+}
+
+/* Forms */
+
+.dc-text-input__container {
+  --dc-input-font-size: 14px;
+  --dc-input-height: 36px;
+  --dc-input-padding-x: 12px;
+  --dc-input-border-radius: 6px;
+  --dc-input-text-color: var(--dc-control-primary-text-color);
+  --dc-input-border-color: var(--dc-control-border-color);
+  --dc-input-border-color-error: var(--dc-control-error-color);
+  --dc-input-bg: var(--dc-control-bg);
+  --dc-input-prefix-color: var(--dc-control-secondary-text-color);
+  --dc-input-suffix-color: var(--dc-control-secondary-text-color);
+  --dc-input-focus-ring-color: var(--dc-control-primary-color);
+
+  color-scheme: light;
+  font-family: var(--dc-primary-font);
+  font-size: var(--dc-input-font-size);
+  font-weight: 400;
+  line-height: 1;
+  color: var(--dc-input-text-color);
+  display: inline-flex;
+  align-items: stretch;
+  box-sizing: border-box;
+  height: var(--dc-input-height);
+  max-width: 100%;
+  vertical-align: middle;
+  border: 1px solid var(--dc-input-border-color);
+  border-radius: var(--dc-input-border-radius);
+  background: var(--dc-input-bg);
+}
+
+.dc-text-input__container:focus-within {
+  border-color: var(--dc-input-focus-ring-color);
+  box-shadow: 0 0 0 1px var(--dc-input-focus-ring-color);
+}
+
+.dc-text-input__container_disabled {
+  opacity: var(--dc-disabled-state-opacity);
+}
+
+.dc-text-input__container_has_error {
+  border-color: var(--dc-input-border-color-error);
+}
+
+.dc-text-input__container_block {
+  display: flex;
+}
+
+.dc-text-input__container_sm {
+  --dc-input-font-size: 13px;
+  --dc-input-height: 32px;
+  --dc-input-padding-x: 8px;
+  --dc-input-border-radius: 5px;
+}
+
+.dc-text-input__container_lg {
+  --dc-input-font-size: 15px;
+  --dc-input-height: 40px;
+  --dc-input-padding-x: 16px;
+  --dc-input-border-radius: 7px;
+}
+
+.dc-text-input {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  font: inherit;
+  color: inherit;
+  flex: auto;
+  min-width: 0;
+  max-width: 100%;
+  margin: 0;
+  padding: 0 var(--dc-input-padding-x);
+  border: none;
+  background: none;
+}
+
+.dc-text-input::-moz-placeholder {
+  color: inherit;
+  opacity: 0.4;
+}
+
+.dc-text-input::placeholder {
+  color: inherit;
+  opacity: 0.4;
+}
+
+.dc-text-input:focus {
+  outline: none;
+}
+
+.dc-text-input_width_2ch {
+  width: 2.5ch;
+}
+
+.dc-text-input_width_3ch {
+  width: 3.5ch;
+}
+
+.dc-text-input_width_4ch {
+  width: 4.5ch;
+}
+
+.dc-text-input_width_5ch {
+  width: 5.5ch;
+}
+
+.dc-text-input_width_10ch {
+  width: 10.5ch;
+}
+
+.dc-text-input_width_20ch {
+  width: 20.5ch;
+}
+
+.dc-text-input_width_40ch {
+  width: 40.5ch;
+}
+
+.dc-text-input__prefix,
+.dc-text-input__suffix {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  box-sizing: border-box;
+}
+
+.dc-text-input__prefix {
+  color: var(--dc-input-prefix-color);
+}
+
+.dc-text-input__suffix {
+  color: var(--dc-input-suffix-color);
+}
+
+.dc-text-input__container_has_prefix {
+  padding-left: var(--dc-input-padding-x);
+}
+
+.dc-text-input__container_has_prefix .dc-text-input {
+  padding-left: calc(var(--dc-input-padding-x) * 0.5);
+}
+
+.dc-text-input__container_has_suffix {
+  padding-right: var(--dc-input-padding-x);
+}
+
+.dc-text-input__container_has_suffix .dc-text-input {
+  padding-right: calc(var(--dc-input-padding-x) * 0.5);
+}
+
+.dc-password-input {
+  --dc-password-input-switch-color: var(--dc-control-secondary-text-color);
+  --dc-password-input-switch-color-hover: var(--dc-control-primary-text-color);
+  --dc-password-input-switch-bg: transparent;
+  --dc-password-input-switch-bg-hover: var(--dc-bg-transparent-2);
+
+  color-scheme: light;
+  padding-right: 0;
+}
+
+.dc-password-input__btn {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  color: inherit;
   display: inline-flex;
   flex-shrink: 0;
   align-items: center;
@@ -1265,6 +1548,7 @@
   width: 100%;
   padding-right: calc(var(--dc-select-arrow-size) + var(--dc-select-padding-x));
   padding-left: var(--dc-select-padding-x);
+  text-transform: none;
   border: none;
   background: none;
 }
@@ -2153,6 +2437,7 @@
 .dc-form-field {
   color-scheme: light;
   display: block;
+  text-align: left;
 }
 
 .dc-form-field__label {
@@ -2238,16 +2523,88 @@
   box-shadow: 0 0 0 3px var(--dc-color-picker-btn-focus-ring-color);
 }
 
-/* Data display */
+.dc-date-picker-popover {
+  color-scheme: light;
+}
 
-.dc-table-container,
-.dc-table {
-  --dc-table-border-color: var(--dc-border-color-transparent-2);
-  --dc-table-bg: none;
-  --dc-table-head-bg: var(--dc-bg-transparent-1);
-  --dc-table-row-bg-stripped: var(--dc-bg-transparent-1);
-  --dc-table-row-bg-selected: var(--dc-bg-transparent-1);
-  --dc-table-row-bg-highlighted: var(--dc-bg-transparent-1);
+.dc-date-range-picker-popover {
+  color-scheme: light;
+  display: inline-grid;
+  grid-template-areas:
+    "presets calendar"
+    "footer  footer";
+  grid-template-columns: 1fr 1fr;
+  grid-gap: 20px 24px;
+}
+
+.dc-date-range-picker-popover_compact {
+  grid-template-areas:
+    "presets"
+    "calendar"
+    "footer";
+  grid-template-columns: 100%;
+  max-width: 100%;
+}
+
+.dc-date-range-picker-popover__presets {
+  grid-area: presets;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.dc-date-range-picker-popover__presets > * {
+  white-space: nowrap;
+}
+
+.dc-date-range-picker-popover__presets > * + * {
+  margin-top: 8px;
+}
+
+.dc-date-range-picker-popover__calendar {
+  grid-area: calendar;
+}
+
+.dc-date-range-picker-popover__footer {
+  font: var(--dc-text-xs);
+  display: grid;
+  grid-area: footer;
+  grid-template-areas: "content cancel confirm";
+  grid-template-columns: 1fr auto auto;
+  grid-gap: 8px;
+  align-items: center;
+}
+
+.dc-date-range-picker-popover__footer-content {
+  grid-area: content;
+}
+
+.dc-date-range-picker-popover__footer-cancel {
+  grid-area: cancel;
+}
+
+.dc-date-range-picker-popover__footer-confirm {
+  grid-area: confirm;
+}
+
+.dc-date-range-picker-popover_compact .dc-date-range-picker-popover__footer {
+  grid-template-areas:
+    "content content"
+    "cancel  confirm";
+  grid-template-columns: 1fr 1fr;
+  text-align: right;
+}
+
+/* Data display */
+
+.dc-table-container,
+.dc-table {
+  --dc-table-border-color: var(--dc-border-color-transparent-2);
+  --dc-table-bg: none;
+  --dc-table-head-bg: var(--dc-bg-transparent-1);
+  --dc-table-row-bg-stripped: var(--dc-bg-transparent-1);
+  --dc-table-row-bg-selected: var(--dc-bg-transparent-1);
+  --dc-table-row-bg-highlighted: var(--dc-bg-transparent-1);
   --dc-table-cell-bg-hover: var(--dc-bg-transparent-1);
   --dc-table-cell-bg-focus: var(--dc-bg-transparent-1);
   --dc-table-cell-padding-x: 12px;
@@ -2447,17 +2804,27 @@
 
 .dc-alert__icon {
   color: var(--dc-alert-icon-color);
+  display: inline-flex;
   grid-area: icon;
 }
 
 .dc-alert__body {
+  display: flex;
+  flex-direction: column;
   grid-area: content;
 }
 
 .dc-alert__title {
   font: inherit;
   font-weight: 600;
-  margin: 0 0 0.5em;
+  margin: 0;
+}
+
+.dc-alert__content {
+}
+
+.dc-alert__body > * + * {
+  margin-top: 8px;
 }
 
 .dc-alert_variant_full-width {
@@ -2874,6 +3241,7 @@
 }
 
 .dc-menu {
+  --dc-menu-item-icon-gap: 8px;
   --dc-menu-item-color: var(--dc-button-default-plain-text-color);
   --dc-menu-item-bg: var(--dc-button-default-bg-hover);
   --dc-menu-item-color-destructive: var(--dc-button-danger-plain-text-color);
@@ -2914,6 +3282,7 @@
   width: 100%;
   height: 32px;
   padding: 0 12px;
+  text-align: left;
   white-space: nowrap;
   border: none;
   border-radius: 6px;
@@ -2929,9 +3298,16 @@
   background: var(--dc-menu-item-bg);
 }
 
-.dc-menu-btn__icon {
-  display: inline-flex;
-  margin-right: 8px;
+.dc-menu-btn__label {
+  flex-grow: 1;
+}
+
+.dc-menu-btn__label_gap_left {
+  padding-left: var(--dc-menu-item-icon-gap);
+}
+
+.dc-menu-btn__label_gap_right {
+  padding-right: var(--dc-menu-item-icon-gap);
 }
 
 .dc-menu-btn_destructive {
@@ -3148,347 +3524,3 @@
 .dc-filter-button[aria-pressed="true"]:hover {
   background: var(--dc-filter-button-bg-active-hover);
 }
-
-/* Overlays */
-
-.dc-tooltip {
-  --dc-tooltip-text-color: var(--dc-gray-50);
-  --dc-tooltip-bg: var(--dc-gray-700);
-  --dc-tooltip-transition-duration: 100ms;
-
-  color-scheme: light;
-  font: var(--dc-text-xs);
-  color: var(--dc-tooltip-text-color);
-  z-index: var(--dc-overlay-z-index);
-  top: 0;
-  left: 0;
-  box-sizing: border-box;
-  padding: 4px 8px;
-  border-radius: 6px;
-  background: var(--dc-tooltip-bg);
-  box-shadow: var(--dc-shadow-md);
-}
-
-.dc-tooltip_hidden {
-  opacity: 0;
-  transition: opacity var(--dc-tooltip-transition-duration) ease;
-}
-
-.dc-tooltip_visible {
-  opacity: 1;
-}
-
-.dc-popover {
-  --dc-popover-text-color: var(--dc-primary-text-color);
-  --dc-popover-transition-duration: 100ms;
-  --dc-popover-bg: white;
-  --dc-popover-shadow:
-    0 2px 0 -1px rgba(0, 0, 0, 0.075),
-    0 0 0 1px var(--dc-gray-200),
-    var(--dc-shadow-lg);
-
-  color-scheme: light;
-  z-index: var(--dc-overlay-z-index);
-  top: 0;
-  left: 0;
-  box-sizing: border-box;
-  padding: 1px;
-}
-
-.dc-popover-modal {
-  font: var(--dc-text-sm);
-  color: var(--dc-popover-text-color);
-  box-sizing: border-box;
-  max-width: 448px;
-  padding: 12px 16px;
-  border-radius: 8px;
-  background: var(--dc-popover-bg);
-  box-shadow: var(--dc-popover-shadow);
-}
-
-.dc-popover_closed .dc-popover-modal {
-  opacity: 0;
-  transform: scale(0.95);
-  transition: var(--dc-popover-transition-duration) ease;
-  transition-property: opacity, transform;
-}
-
-.dc-popover_opened .dc-popover-modal {
-  opacity: 1;
-  transform: scale(1);
-}
-
-.dc-popover[data-position="top-start"] .dc-popover-modal {
-  transform-origin: bottom left;
-}
-
-.dc-popover[data-position="top-center"] .dc-popover-modal {
-  transform-origin: bottom center;
-}
-
-.dc-popover[data-position="top-right"] .dc-popover-modal {
-  transform-origin: bottom left;
-}
-
-.dc-popover[data-position="right-start"] .dc-popover-modal {
-  transform-origin: left top;
-}
-
-.dc-popover[data-position="right-center"] .dc-popover-modal {
-  transform-origin: left center;
-}
-
-.dc-popover[data-position="right-right"] .dc-popover-modal {
-  transform-origin: left bottom;
-}
-
-.dc-popover[data-position="bottom-start"] .dc-popover-modal {
-  transform-origin: top left;
-}
-
-.dc-popover[data-position="bottom-center"] .dc-popover-modal {
-  transform-origin: top center;
-}
-
-.dc-popover[data-position="bottom-right"] .dc-popover-modal {
-  transform-origin: top left;
-}
-
-.dc-popover[data-position="left-start"] .dc-popover-modal {
-  transform-origin: right top;
-}
-
-.dc-popover[data-position="left-center"] .dc-popover-modal {
-  transform-origin: right center;
-}
-
-.dc-popover[data-position="left-right"] .dc-popover-modal {
-  transform-origin: right bottom;
-}
-
-.dc-dialog {
-  --dc-dialog-max-width: 480px;
-  --dc-dialog-safe-area: 16px;
-  --dc-dialog-viewport-gap: 16px;
-  --dc-dialog-transition-duration: 200ms;
-  --dc-dialog-text-color: var(--dc-primary-text-color);
-  --dc-dialog-border-color: transparent;
-  --dc-dialog-bg: var(--dc-primary-bg);
-  --dc-dialog-inset-shadow-color: var(--dc-border-color-transparent-2);
-  --dc-dialog-backdrop-color: rgba(17, 24, 39, 0.4); /* gray-900 */
-
-  color-scheme: light;
-  position: relative;
-  z-index: var(--dc-overlay-z-index);
-}
-
-.dc-dialog-backdrop {
-  position: fixed;
-  top: 0;
-  left: 0;
-  box-sizing: border-box;
-  width: 100%;
-  height: 100%;
-  padding: var(--dc-dialog-viewport-gap);
-  background: var(--dc-dialog-backdrop-color);
-}
-
-.dc-dialog_closed .dc-dialog-backdrop {
-  opacity: 0;
-  transition: opacity var(--dc-dialog-transition-duration) linear;
-}
-
-.dc-dialog_opened .dc-dialog-backdrop {
-  opacity: 1;
-}
-
-.dc-dialog-modal {
-  color: var(--dc-dialog-text-color);
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  display: flex;
-  flex-direction: column;
-  box-sizing: border-box;
-  width: 100%;
-  max-width: calc(var(--dc-dialog-max-width) + 2 * var(--dc-dialog-safe-area));
-  max-height: calc(100% - 2 * var(--dc-dialog-viewport-gap));
-  transform: translate(-50%, -50%);
-  border-radius: 12px;
-  background: var(--dc-dialog-bg);
-  box-shadow: var(--dc-shadow-xl);
-}
-
-.dc-dialog-modal_sm {
-  --dc-dialog-max-width: 320px;
-}
-
-.dc-dialog-modal_lg {
-  --dc-dialog-max-width: 640px;
-}
-
-.dc-dialog_closed .dc-dialog-modal {
-  opacity: 0;
-  transform: translate(-50%, -50%) scale(0.95);
-  transition: var(--dc-dialog-transition-duration) ease;
-  transition-property: opacity, transform;
-}
-
-.dc-dialog_opened .dc-dialog-modal {
-  opacity: 1;
-  transform: translate(-50%, -50%) scale(1);
-}
-
-.dc-dialog-header,
-.dc-dialog-body,
-.dc-dialog-footer {
-  padding: calc(var(--dc-dialog-safe-area) / 2) var(--dc-dialog-safe-area);
-}
-
-.dc-dialog-header {
-  font: var(--dc-text-sm);
-}
-
-.dc-dialog-header__title-bar {
-  position: relative;
-  padding-right: 24px;
-}
-
-.dc-dialog-header__heading {
-  font: 700 var(--dc-text-md);
-  margin: 0;
-}
-
-.dc-dialog-header__close-btn {
-  position: absolute;
-  top: -8px;
-  right: -8px;
-  width: 32px;
-  height: 32px;
-}
-
-.dc-dialog-header__subheading,
-.dc-dialog-header__body {
-}
-
-.dc-dialog-body {
-  position: relative;
-  overflow: auto;
-  -webkit-overflow-scrolling: touch;
-  flex-grow: 1;
-  padding-top: var(--dc-dialog-safe-area);
-  padding-bottom: var(--dc-dialog-safe-area);
-}
-
-.dc-dialog-body_scroll-shadow-top {
-  box-shadow: inset 0 1px 1px var(--dc-dialog-inset-shadow-color);
-}
-
-.dc-dialog-body_scroll-shadow-bottom {
-  box-shadow: inset 0 -1px 1px var(--dc-dialog-inset-shadow-color);
-}
-
-.dc-dialog-body_scroll-shadow-top.dc-dialog-body_scroll-shadow-bottom {
-  box-shadow:
-    inset 0 1px 0 var(--dc-dialog-inset-shadow-color),
-    inset 0 -1px 0 var(--dc-dialog-inset-shadow-color);
-}
-
-.dc-dialog-footer {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: flex-end;
-}
-
-.dc-dialog-footer > * + * {
-  margin-left: 8px;
-}
-
-.dc-dialog-modal > .dc-dialog-header:first-child,
-.dc-dialog-modal > .dc-dialog-body:first-child,
-.dc-dialog-modal > .dc-dialog-footer:first-child {
-  padding-top: var(--dc-dialog-safe-area);
-  border-top-left-radius: inherit;
-  border-top-right-radius: inherit;
-}
-
-.dc-dialog-modal > .dc-dialog-header:last-child,
-.dc-dialog-modal > .dc-dialog-body:last-child,
-.dc-dialog-modal > .dc-dialog-footer:last-child {
-  padding-bottom: var(--dc-dialog-safe-area);
-  border-bottom-right-radius: inherit;
-  border-bottom-left-radius: inherit;
-}
-
-.dc-date-picker-popover {
-  color-scheme: light;
-}
-
-.dc-date-range-picker-popover {
-  color-scheme: light;
-  display: inline-grid;
-  grid-template-areas:
-    "presets calendar"
-    "footer  footer";
-  grid-template-columns: 1fr 1fr;
-  grid-gap: 20px 24px;
-}
-
-.dc-date-range-picker-popover_compact {
-  grid-template-areas:
-    "presets"
-    "calendar"
-    "footer";
-  grid-template-columns: 100%;
-  max-width: 100%;
-}
-
-.dc-date-range-picker-popover__presets {
-  grid-area: presets;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.dc-date-range-picker-popover__presets > * {
-  white-space: nowrap;
-}
-
-.dc-date-range-picker-popover__presets > * + * {
-  margin-top: 8px;
-}
-
-.dc-date-range-picker-popover__calendar {
-  grid-area: calendar;
-}
-
-.dc-date-range-picker-popover__footer {
-  font: var(--dc-text-xs);
-  display: grid;
-  grid-area: footer;
-  grid-template-areas: "content cancel confirm";
-  grid-template-columns: 1fr auto auto;
-  grid-gap: 8px;
-  align-items: center;
-}
-
-.dc-date-range-picker-popover__footer-content {
-  grid-area: content;
-}
-
-.dc-date-range-picker-popover__footer-cancel {
-  grid-area: cancel;
-}
-
-.dc-date-range-picker-popover__footer-confirm {
-  grid-area: confirm;
-}
-
-.dc-date-range-picker-popover_compact .dc-date-range-picker-popover__footer {
-  grid-template-areas:
-    "content content"
-    "cancel  confirm";
-  grid-template-columns: 1fr 1fr;
-  text-align: right;
-}