@databricks/design-system 0.2.1 → 1.0.0

package/dist/index.css

@@ -3707,7 +3707,7 @@ a.du-bois-light-btn-sm {
   position: absolute;
   top: -9999px;
   left: -9999px;
-  z-index: 1050;
+  z-index: calc(var(--dubois-zindex-base, 1000) + 50);
   box-sizing: border-box;
   padding: 4px 0;
   overflow: hidden;
@@ -4095,6 +4095,1255 @@ a.du-bois-light-btn-sm {
   padding-left: 0;
 }
 
+/* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
+/* stylelint-disable no-duplicate-selectors */
+/* stylelint-disable */
+/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
+.du-bois-light-picker {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  color: #20272E;
+  font-size: 14px;
+  font-variant: tabular-nums;
+  line-height: 1.5715;
+  list-style: none;
+  font-feature-settings: 'tnum';
+  padding: 8px 7px 8px;
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  background: #fff;
+  border: 1px solid #d9d9d9;
+  border-radius: 4px;
+  transition: border 0.3s, box-shadow 0.3s;
+}
+.du-bois-light-picker:hover,
+.du-bois-light-picker-focused {
+  border-color: #448dc2;
+  border-right-width: 1px !important;
+}
+.du-bois-light-picker-focused {
+  border-color: #448dc2;
+  border-right-width: 1px !important;
+  outline: 0;
+  box-shadow: 0 0 0 2px rgba(34, 114, 180, 0.2);
+}
+.du-bois-light-picker.du-bois-light-picker-disabled {
+  background: #f5f5f5;
+  border-color: #d9d9d9;
+  cursor: not-allowed;
+}
+.du-bois-light-picker.du-bois-light-picker-disabled .du-bois-light-picker-suffix {
+  color: rgba(0, 0, 0, 0.25);
+}
+.du-bois-light-picker.du-bois-light-picker-borderless {
+  background-color: transparent !important;
+  border-color: transparent !important;
+  box-shadow: none !important;
+}
+.du-bois-light-picker-input {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  width: 100%;
+}
+.du-bois-light-picker-input > input {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+  min-width: 0;
+  padding: 8px 7px;
+  color: #20272E;
+  font-size: 14px;
+  line-height: 1.5715;
+  background-color: #fff;
+  background-image: none;
+  border: 1px solid #d9d9d9;
+  border-radius: 4px;
+  transition: all 0.3s;
+  flex: auto;
+  min-width: 1px;
+  height: auto;
+  padding: 0;
+  background: transparent;
+  border: 0;
+}
+.du-bois-light-picker-input > input::-moz-placeholder {
+  opacity: 1;
+}
+.du-bois-light-picker-input > input::placeholder {
+  color: #bfbfbf;
+}
+.du-bois-light-picker-input > input:placeholder-shown {
+  text-overflow: ellipsis;
+}
+.du-bois-light-picker-input > input:hover {
+  border-color: #448dc2;
+  border-right-width: 1px !important;
+}
+.du-bois-light-picker-input > input:focus,
+.du-bois-light-picker-input > input-focused {
+  border-color: #448dc2;
+  border-right-width: 1px !important;
+  outline: 0;
+  box-shadow: 0 0 0 2px rgba(34, 114, 180, 0.2);
+}
+.du-bois-light-picker-input > input-disabled {
+  color: rgba(0, 0, 0, 0.25);
+  background-color: #f5f5f5;
+  cursor: not-allowed;
+  opacity: 1;
+}
+.du-bois-light-picker-input > input-disabled:hover {
+  border-color: #d9d9d9;
+  border-right-width: 1px !important;
+}
+.du-bois-light-picker-input > input[disabled] {
+  color: rgba(0, 0, 0, 0.25);
+  background-color: #f5f5f5;
+  cursor: not-allowed;
+  opacity: 1;
+}
+.du-bois-light-picker-input > input[disabled]:hover {
+  border-color: #d9d9d9;
+  border-right-width: 1px !important;
+}
+.du-bois-light-picker-input > input-borderless,
+.du-bois-light-picker-input > input-borderless:hover,
+.du-bois-light-picker-input > input-borderless:focus,
+.du-bois-light-picker-input > input-borderless-focused,
+.du-bois-light-picker-input > input-borderless-disabled,
+.du-bois-light-picker-input > input-borderless[disabled] {
+  background-color: transparent;
+  border: none;
+  box-shadow: none;
+}
+textarea.du-bois-light-picker-input > input {
+  max-width: 100%;
+  height: auto;
+  min-height: 40px;
+  line-height: 1.5715;
+  vertical-align: bottom;
+  transition: all 0.3s, height 0s;
+}
+.du-bois-light-picker-input > input-lg {
+  padding: 6.5px 7px;
+  font-size: 16px;
+}
+.du-bois-light-picker-input > input-sm {
+  padding: 4px 3px;
+}
+.du-bois-light-picker-input > input:focus {
+  box-shadow: none;
+}
+.du-bois-light-picker-input > input[disabled] {
+  background: transparent;
+}
+.du-bois-light-picker-input:hover .du-bois-light-picker-clear {
+  opacity: 1;
+}
+.du-bois-light-picker-input-placeholder > input {
+  color: #bfbfbf;
+}
+.du-bois-light-picker-large {
+  padding: 6.5px 7px 6.5px;
+}
+.du-bois-light-picker-large .du-bois-light-picker-input > input {
+  font-size: 16px;
+}
+.du-bois-light-picker-small {
+  padding: 4px 3px 4px;
+}
+.du-bois-light-picker-suffix {
+  align-self: center;
+  margin-left: 2px;
+  color: rgba(0, 0, 0, 0.25);
+  line-height: 1;
+  pointer-events: none;
+}
+.du-bois-light-picker-suffix > * {
+  vertical-align: top;
+}
+.du-bois-light-picker-clear {
+  position: absolute;
+  top: 50%;
+  right: 0;
+  color: rgba(0, 0, 0, 0.25);
+  line-height: 1;
+  background: #fff;
+  transform: translateY(-50%);
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity 0.3s, color 0.3s;
+}
+.du-bois-light-picker-clear > * {
+  vertical-align: top;
+}
+.du-bois-light-picker-clear:hover {
+  color: #5D7283;
+}
+.du-bois-light-picker-separator {
+  position: relative;
+  display: inline-block;
+  width: 1em;
+  height: 16px;
+  color: rgba(0, 0, 0, 0.25);
+  font-size: 16px;
+  vertical-align: top;
+  cursor: default;
+}
+.du-bois-light-picker-focused .du-bois-light-picker-separator {
+  color: #5D7283;
+}
+.du-bois-light-picker-disabled .du-bois-light-picker-range-separator .du-bois-light-picker-separator {
+  cursor: not-allowed;
+}
+.du-bois-light-picker-range {
+  position: relative;
+  display: inline-flex;
+}
+.du-bois-light-picker-range .du-bois-light-picker-clear {
+  right: 7px;
+}
+.du-bois-light-picker-range:hover .du-bois-light-picker-clear {
+  opacity: 1;
+}
+.du-bois-light-picker-range .du-bois-light-picker-active-bar {
+  bottom: -1px;
+  height: 2px;
+  margin-left: 7px;
+  background: #2272B4;
+  opacity: 0;
+  transition: all 0.3s ease-out;
+  pointer-events: none;
+}
+.du-bois-light-picker-range.du-bois-light-picker-focused .du-bois-light-picker-active-bar {
+  opacity: 1;
+}
+.du-bois-light-picker-range-separator {
+  align-items: center;
+  padding: 0 4px;
+  line-height: 1;
+}
+.du-bois-light-picker-range.du-bois-light-picker-small .du-bois-light-picker-clear {
+  right: 3px;
+}
+.du-bois-light-picker-range.du-bois-light-picker-small .du-bois-light-picker-active-bar {
+  margin-left: 3px;
+}
+.du-bois-light-picker-dropdown {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  color: #20272E;
+  font-size: 14px;
+  font-variant: tabular-nums;
+  line-height: 1.5715;
+  list-style: none;
+  font-feature-settings: 'tnum';
+  position: absolute;
+  z-index: calc(var(--dubois-zindex-base, 1000) + 50);
+}
+.du-bois-light-picker-dropdown-hidden {
+  display: none;
+}
+.du-bois-light-picker-dropdown-placement-bottomLeft .du-bois-light-picker-range-arrow {
+  top: 1.66666667px;
+  display: block;
+  transform: rotate(-45deg);
+}
+.du-bois-light-picker-dropdown-placement-topLeft .du-bois-light-picker-range-arrow {
+  bottom: 1.66666667px;
+  display: block;
+  transform: rotate(135deg);
+}
+.du-bois-light-picker-dropdown.du-bois-light-slide-up-enter.du-bois-light-slide-up-enter-active.du-bois-light-picker-dropdown-placement-topLeft,
+.du-bois-light-picker-dropdown.du-bois-light-slide-up-enter.du-bois-light-slide-up-enter-active.du-bois-light-picker-dropdown-placement-topRight,
+.du-bois-light-picker-dropdown.du-bois-light-slide-up-appear.du-bois-light-slide-up-appear-active.du-bois-light-picker-dropdown-placement-topLeft,
+.du-bois-light-picker-dropdown.du-bois-light-slide-up-appear.du-bois-light-slide-up-appear-active.du-bois-light-picker-dropdown-placement-topRight {
+  animation-name: antSlideDownIn;
+}
+.du-bois-light-picker-dropdown.du-bois-light-slide-up-enter.du-bois-light-slide-up-enter-active.du-bois-light-picker-dropdown-placement-bottomLeft,
+.du-bois-light-picker-dropdown.du-bois-light-slide-up-enter.du-bois-light-slide-up-enter-active.du-bois-light-picker-dropdown-placement-bottomRight,
+.du-bois-light-picker-dropdown.du-bois-light-slide-up-appear.du-bois-light-slide-up-appear-active.du-bois-light-picker-dropdown-placement-bottomLeft,
+.du-bois-light-picker-dropdown.du-bois-light-slide-up-appear.du-bois-light-slide-up-appear-active.du-bois-light-picker-dropdown-placement-bottomRight {
+  animation-name: antSlideUpIn;
+}
+.du-bois-light-picker-dropdown.du-bois-light-slide-up-leave.du-bois-light-slide-up-leave-active.du-bois-light-picker-dropdown-placement-topLeft,
+.du-bois-light-picker-dropdown.du-bois-light-slide-up-leave.du-bois-light-slide-up-leave-active.du-bois-light-picker-dropdown-placement-topRight {
+  animation-name: antSlideDownOut;
+}
+.du-bois-light-picker-dropdown.du-bois-light-slide-up-leave.du-bois-light-slide-up-leave-active.du-bois-light-picker-dropdown-placement-bottomLeft,
+.du-bois-light-picker-dropdown.du-bois-light-slide-up-leave.du-bois-light-slide-up-leave-active.du-bois-light-picker-dropdown-placement-bottomRight {
+  animation-name: antSlideUpOut;
+}
+.du-bois-light-picker-dropdown-range {
+  padding: 6.66666667px 0;
+}
+.du-bois-light-picker-dropdown-range-hidden {
+  display: none;
+}
+.du-bois-light-picker-dropdown .du-bois-light-picker-panel > .du-bois-light-picker-time-panel {
+  padding-top: 2px;
+}
+.du-bois-light-picker-ranges {
+  margin-bottom: 0;
+  padding: 2px 8px;
+  overflow: hidden;
+  line-height: 36px;
+  text-align: left;
+  list-style: none;
+}
+.du-bois-light-picker-ranges > li {
+  display: inline-block;
+}
+.du-bois-light-picker-ranges .du-bois-light-picker-preset > .du-bois-light-tag-blue {
+  color: #2272B4;
+  background: #e6f1f5;
+  border-color: #93c2db;
+  cursor: pointer;
+}
+.du-bois-light-picker-ranges .du-bois-light-picker-ok {
+  float: right;
+  margin-left: 4px;
+}
+.du-bois-light-picker-range-wrapper {
+  display: flex;
+}
+.du-bois-light-picker-range-arrow {
+  position: absolute;
+  z-index: 1;
+  display: none;
+  width: 10px;
+  height: 10px;
+  margin-left: 10.5px;
+  box-shadow: 2px -2px 6px rgba(0, 0, 0, 0.06);
+  transition: left 0.3s ease-out;
+}
+.du-bois-light-picker-range-arrow::after {
+  position: absolute;
+  top: 1px;
+  right: 1px;
+  width: 10px;
+  height: 10px;
+  border: 5px solid #f0f0f0;
+  border-color: #fff #fff transparent transparent;
+  content: '';
+}
+.du-bois-light-picker-panel-container {
+  overflow: hidden;
+  vertical-align: top;
+  background: #fff;
+  border-radius: 4px;
+  box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
+  transition: margin 0.3s;
+}
+.du-bois-light-picker-panel-container .du-bois-light-picker-panels {
+  display: inline-flex;
+  flex-wrap: nowrap;
+  direction: ltr;
+}
+.du-bois-light-picker-panel-container .du-bois-light-picker-panel {
+  vertical-align: top;
+  background: transparent;
+  border-width: 0 0 1px 0;
+  border-radius: 0;
+}
+.du-bois-light-picker-panel-container .du-bois-light-picker-panel .du-bois-light-picker-content,
+.du-bois-light-picker-panel-container .du-bois-light-picker-panel table {
+  text-align: center;
+}
+.du-bois-light-picker-panel-container .du-bois-light-picker-panel-focused {
+  border-color: #f0f0f0;
+}
+.du-bois-light-picker-panel {
+  display: inline-flex;
+  flex-direction: column;
+  text-align: center;
+  background: #fff;
+  border: 1px solid #f0f0f0;
+  border-radius: 4px;
+  outline: none;
+}
+.du-bois-light-picker-panel-focused {
+  border-color: #2272B4;
+}
+.du-bois-light-picker-decade-panel,
+.du-bois-light-picker-year-panel,
+.du-bois-light-picker-quarter-panel,
+.du-bois-light-picker-month-panel,
+.du-bois-light-picker-week-panel,
+.du-bois-light-picker-date-panel,
+.du-bois-light-picker-time-panel {
+  display: flex;
+  flex-direction: column;
+  width: 272px;
+}
+.du-bois-light-picker-header {
+  display: flex;
+  padding: 0 4px;
+  color: rgba(0, 0, 0, 0.85);
+  border-bottom: 1px solid #f0f0f0;
+}
+.du-bois-light-picker-header > * {
+  flex: none;
+}
+.du-bois-light-picker-header button {
+  padding: 0;
+  color: rgba(0, 0, 0, 0.25);
+  line-height: 40px;
+  background: transparent;
+  border: 0;
+  cursor: pointer;
+  transition: color 0.3s;
+}
+.du-bois-light-picker-header > button {
+  min-width: 1.6em;
+  font-size: 14px;
+}
+.du-bois-light-picker-header > button:hover {
+  color: #20272E;
+}
+.du-bois-light-picker-header-view {
+  flex: auto;
+  font-weight: 500;
+  line-height: 40px;
+}
+.du-bois-light-picker-header-view button {
+  color: inherit;
+  font-weight: inherit;
+}
+.du-bois-light-picker-header-view button:not(:first-child) {
+  margin-left: 4px;
+}
+.du-bois-light-picker-header-view button:hover {
+  color: #2272B4;
+}
+.du-bois-light-picker-prev-icon,
+.du-bois-light-picker-next-icon,
+.du-bois-light-picker-super-prev-icon,
+.du-bois-light-picker-super-next-icon {
+  position: relative;
+  display: inline-block;
+  width: 7px;
+  height: 7px;
+}
+.du-bois-light-picker-prev-icon::before,
+.du-bois-light-picker-next-icon::before,
+.du-bois-light-picker-super-prev-icon::before,
+.du-bois-light-picker-super-next-icon::before {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: inline-block;
+  width: 7px;
+  height: 7px;
+  border: 0 solid currentColor;
+  border-width: 1.5px 0 0 1.5px;
+  content: '';
+}
+.du-bois-light-picker-super-prev-icon::after,
+.du-bois-light-picker-super-next-icon::after {
+  position: absolute;
+  top: 4px;
+  left: 4px;
+  display: inline-block;
+  width: 7px;
+  height: 7px;
+  border: 0 solid currentColor;
+  border-width: 1.5px 0 0 1.5px;
+  content: '';
+}
+.du-bois-light-picker-prev-icon,
+.du-bois-light-picker-super-prev-icon {
+  transform: rotate(-45deg);
+}
+.du-bois-light-picker-next-icon,
+.du-bois-light-picker-super-next-icon {
+  transform: rotate(135deg);
+}
+.du-bois-light-picker-content {
+  width: 100%;
+  table-layout: fixed;
+  border-collapse: collapse;
+}
+.du-bois-light-picker-content th,
+.du-bois-light-picker-content td {
+  position: relative;
+  min-width: 24px;
+  font-weight: 400;
+}
+.du-bois-light-picker-content th {
+  height: 30px;
+  color: #20272E;
+  line-height: 30px;
+}
+.du-bois-light-picker-cell {
+  padding: 3px 0;
+  color: rgba(0, 0, 0, 0.25);
+  cursor: pointer;
+}
+.du-bois-light-picker-cell-in-view {
+  color: #20272E;
+}
+.du-bois-light-picker-cell::before {
+  position: absolute;
+  top: 50%;
+  right: 0;
+  left: 0;
+  z-index: 1;
+  height: 24px;
+  transform: translateY(-50%);
+  content: '';
+}
+.du-bois-light-picker-cell .du-bois-light-picker-cell-inner {
+  position: relative;
+  z-index: 2;
+  display: inline-block;
+  min-width: 24px;
+  height: 24px;
+  line-height: 24px;
+  border-radius: 4px;
+  transition: background 0.3s, border 0.3s;
+}
+.du-bois-light-picker-cell:hover:not(.du-bois-light-picker-cell-in-view) .du-bois-light-picker-cell-inner,
+.du-bois-light-picker-cell:hover:not(.du-bois-light-picker-cell-selected):not(.du-bois-light-picker-cell-range-start):not(.du-bois-light-picker-cell-range-end):not(.du-bois-light-picker-cell-range-hover-start):not(.du-bois-light-picker-cell-range-hover-end) .du-bois-light-picker-cell-inner {
+  background: #f5f5f5;
+}
+.du-bois-light-picker-cell-in-view.du-bois-light-picker-cell-today .du-bois-light-picker-cell-inner::before {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1;
+  border: 1px solid #2272B4;
+  border-radius: 4px;
+  content: '';
+}
+.du-bois-light-picker-cell-in-view.du-bois-light-picker-cell-in-range {
+  position: relative;
+}
+.du-bois-light-picker-cell-in-view.du-bois-light-picker-cell-in-range::before {
+  background: #e6f1f5;
+}
+.du-bois-light-picker-cell-in-view.du-bois-light-picker-cell-selected .du-bois-light-picker-cell-inner,
+.du-bois-light-picker-cell-in-view.du-bois-light-picker-cell-range-start .du-bois-light-picker-cell-inner,
+.du-bois-light-picker-cell-in-view.du-bois-light-picker-cell-range-end .du-bois-light-picker-cell-inner {
+  color: #fff;
+  background: #2272B4;
+}
+.du-bois-light-picker-cell-in-view.du-bois-light-picker-cell-range-start:not(.du-bois-light-picker-cell-range-start-single)::before,
+.du-bois-light-picker-cell-in-view.du-bois-light-picker-cell-range-end:not(.du-bois-light-picker-cell-range-end-single)::before {
+  background: #e6f1f5;
+}
+.du-bois-light-picker-cell-in-view.du-bois-light-picker-cell-range-start::before {
+  left: 50%;
+}
+.du-bois-light-picker-cell-in-view.du-bois-light-picker-cell-range-end::before {
+  right: 50%;
+}
+.du-bois-light-picker-cell-in-view.du-bois-light-picker-cell-range-hover-start:not(.du-bois-light-picker-cell-in-range):not(.du-bois-light-picker-cell-range-start):not(.du-bois-light-picker-cell-range-end)::after,
+.du-bois-light-picker-cell-in-view.du-bois-light-picker-cell-range-hover-end:not(.du-bois-light-picker-cell-in-range):not(.du-bois-light-picker-cell-range-start):not(.du-bois-light-picker-cell-range-end)::after,
+.du-bois-light-picker-cell-in-view.du-bois-light-picker-cell-range-hover-start.du-bois-light-picker-cell-range-start-single::after,
+.du-bois-light-picker-cell-in-view.du-bois-light-picker-cell-range-hover-start.du-bois-light-picker-cell-range-start.du-bois-light-picker-cell-range-end.du-bois-light-picker-cell-range-end-near-hover::after,
+.du-bois-light-picker-cell-in-view.du-bois-light-picker-cell-range-hover-end.du-bois-light-picker-cell-range-start.du-bois-light-picker-cell-range-end.du-bois-light-picker-cell-range-start-near-hover::after,
+.du-bois-light-picker-cell-in-view.du-bois-light-picker-cell-range-hover-end.du-bois-light-picker-cell-range-end-single::after,
+.du-bois-light-picker-cell-in-view.du-bois-light-picker-cell-range-hover:not(.du-bois-light-picker-cell-in-range)::after {
+  position: absolute;
+  top: 50%;
+  z-index: 0;
+  height: 24px;
+  border-top: 1px dashed #5ca4e0;
+  border-bottom: 1px dashed #5ca4e0;
+  transform: translateY(-50%);
+  content: '';
+}
+.du-bois-light-picker-cell-range-hover-start::after,
+.du-bois-light-picker-cell-range-hover-end::after,
+.du-bois-light-picker-cell-range-hover::after {
+  right: 0;
+  left: 2px;
+}
+.du-bois-light-picker-cell-in-view.du-bois-light-picker-cell-in-range.du-bois-light-picker-cell-range-hover::before,
+.du-bois-light-picker-cell-in-view.du-bois-light-picker-cell-range-start.du-bois-light-picker-cell-range-hover::before,
+.du-bois-light-picker-cell-in-view.du-bois-light-picker-cell-range-end.du-bois-light-picker-cell-range-hover::before,
+.du-bois-light-picker-cell-in-view.du-bois-light-picker-cell-range-start:not(.du-bois-light-picker-cell-range-start-single).du-bois-light-picker-cell-range-hover-start::before,
+.du-bois-light-picker-cell-in-view.du-bois-light-picker-cell-range-end:not(.du-bois-light-picker-cell-range-end-single).du-bois-light-picker-cell-range-hover-end::before,
+.du-bois-light-picker-panel > :not(.du-bois-light-picker-date-panel) .du-bois-light-picker-cell-in-view.du-bois-light-picker-cell-in-range.du-bois-light-picker-cell-range-hover-start::before,
+.du-bois-light-picker-panel > :not(.du-bois-light-picker-date-panel) .du-bois-light-picker-cell-in-view.du-bois-light-picker-cell-in-range.du-bois-light-picker-cell-range-hover-end::before {
+  background: #9cc8ec;
+}
+.du-bois-light-picker-cell-in-view.du-bois-light-picker-cell-range-start:not(.du-bois-light-picker-cell-range-start-single):not(.du-bois-light-picker-cell-range-end) .du-bois-light-picker-cell-inner {
+  border-radius: 4px 0 0 4px;
+}
+.du-bois-light-picker-cell-in-view.du-bois-light-picker-cell-range-end:not(.du-bois-light-picker-cell-range-end-single):not(.du-bois-light-picker-cell-range-start) .du-bois-light-picker-cell-inner {
+  border-radius: 0 4px 4px 0;
+}
+.du-bois-light-picker-date-panel .du-bois-light-picker-cell-in-view.du-bois-light-picker-cell-in-range.du-bois-light-picker-cell-range-hover-start .du-bois-light-picker-cell-inner::after,
+.du-bois-light-picker-date-panel .du-bois-light-picker-cell-in-view.du-bois-light-picker-cell-in-range.du-bois-light-picker-cell-range-hover-end .du-bois-light-picker-cell-inner::after {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  z-index: -1;
+  background: #9cc8ec;
+  content: '';
+}
+.du-bois-light-picker-date-panel .du-bois-light-picker-cell-in-view.du-bois-light-picker-cell-in-range.du-bois-light-picker-cell-range-hover-start .du-bois-light-picker-cell-inner::after {
+  right: -6px;
+  left: 0;
+}
+.du-bois-light-picker-date-panel .du-bois-light-picker-cell-in-view.du-bois-light-picker-cell-in-range.du-bois-light-picker-cell-range-hover-end .du-bois-light-picker-cell-inner::after {
+  right: 0;
+  left: -6px;
+}
+.du-bois-light-picker-cell-range-hover.du-bois-light-picker-cell-range-start::after {
+  right: 50%;
+}
+.du-bois-light-picker-cell-range-hover.du-bois-light-picker-cell-range-end::after {
+  left: 50%;
+}
+tr > .du-bois-light-picker-cell-in-view.du-bois-light-picker-cell-range-hover:first-child::after,
+tr > .du-bois-light-picker-cell-in-view.du-bois-light-picker-cell-range-hover-end:first-child::after,
+.du-bois-light-picker-cell-in-view.du-bois-light-picker-cell-start.du-bois-light-picker-cell-range-hover-edge-start.du-bois-light-picker-cell-range-hover-edge-start-near-range::after,
+.du-bois-light-picker-cell-in-view.du-bois-light-picker-cell-range-hover-edge-start:not(.du-bois-light-picker-cell-range-hover-edge-start-near-range)::after,
+.du-bois-light-picker-cell-in-view.du-bois-light-picker-cell-range-hover-start::after {
+  left: 6px;
+  border-left: 1px dashed #5ca4e0;
+  border-top-left-radius: 4px;
+  border-bottom-left-radius: 4px;
+}
+tr > .du-bois-light-picker-cell-in-view.du-bois-light-picker-cell-range-hover:last-child::after,
+tr > .du-bois-light-picker-cell-in-view.du-bois-light-picker-cell-range-hover-start:last-child::after,
+.du-bois-light-picker-cell-in-view.du-bois-light-picker-cell-end.du-bois-light-picker-cell-range-hover-edge-end.du-bois-light-picker-cell-range-hover-edge-end-near-range::after,
+.du-bois-light-picker-cell-in-view.du-bois-light-picker-cell-range-hover-edge-end:not(.du-bois-light-picker-cell-range-hover-edge-end-near-range)::after,
+.du-bois-light-picker-cell-in-view.du-bois-light-picker-cell-range-hover-end::after {
+  right: 6px;
+  border-right: 1px dashed #5ca4e0;
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
+}
+.du-bois-light-picker-cell-disabled {
+  color: rgba(0, 0, 0, 0.25);
+  pointer-events: none;
+}
+.du-bois-light-picker-cell-disabled .du-bois-light-picker-cell-inner {
+  background: transparent;
+}
+.du-bois-light-picker-cell-disabled::before {
+  background: rgba(0, 0, 0, 0.04);
+}
+.du-bois-light-picker-cell-disabled.du-bois-light-picker-cell-today .du-bois-light-picker-cell-inner::before {
+  border-color: rgba(0, 0, 0, 0.25);
+}
+.du-bois-light-picker-decade-panel .du-bois-light-picker-content,
+.du-bois-light-picker-year-panel .du-bois-light-picker-content,
+.du-bois-light-picker-quarter-panel .du-bois-light-picker-content,
+.du-bois-light-picker-month-panel .du-bois-light-picker-content {
+  height: 264px;
+}
+.du-bois-light-picker-decade-panel .du-bois-light-picker-cell-inner,
+.du-bois-light-picker-year-panel .du-bois-light-picker-cell-inner,
+.du-bois-light-picker-quarter-panel .du-bois-light-picker-cell-inner,
+.du-bois-light-picker-month-panel .du-bois-light-picker-cell-inner {
+  padding: 0 4px;
+}
+.du-bois-light-picker-quarter-panel .du-bois-light-picker-content {
+  height: 56px;
+}
+.du-bois-light-picker-footer {
+  width: min-content;
+  min-width: 100%;
+  line-height: 38px;
+  text-align: center;
+  border-bottom: 1px solid transparent;
+}
+.du-bois-light-picker-panel .du-bois-light-picker-footer {
+  border-top: 1px solid #f0f0f0;
+}
+.du-bois-light-picker-footer-extra {
+  padding: 0 8px;
+  line-height: 38px;
+  text-align: left;
+}
+.du-bois-light-picker-footer-extra:not(:last-child) {
+  border-bottom: 1px solid #f0f0f0;
+}
+.du-bois-light-picker-now {
+  text-align: left;
+}
+.du-bois-light-picker-today-btn {
+  color: #2272B4;
+}
+.du-bois-light-picker-today-btn:hover {
+  color: #448dc2;
+}
+.du-bois-light-picker-today-btn:active {
+  color: #14538f;
+}
+.du-bois-light-picker-today-btn.du-bois-light-picker-today-btn-disabled {
+  color: rgba(0, 0, 0, 0.25);
+  cursor: not-allowed;
+}
+.du-bois-light-picker-decade-panel .du-bois-light-picker-cell-inner {
+  padding: 0 2px;
+}
+.du-bois-light-picker-decade-panel .du-bois-light-picker-cell::before {
+  display: none;
+}
+.du-bois-light-picker-year-panel .du-bois-light-picker-body,
+.du-bois-light-picker-quarter-panel .du-bois-light-picker-body,
+.du-bois-light-picker-month-panel .du-bois-light-picker-body {
+  padding: 0 4px;
+}
+.du-bois-light-picker-year-panel .du-bois-light-picker-cell-inner,
+.du-bois-light-picker-quarter-panel .du-bois-light-picker-cell-inner,
+.du-bois-light-picker-month-panel .du-bois-light-picker-cell-inner {
+  width: 60px;
+}
+.du-bois-light-picker-year-panel .du-bois-light-picker-cell-range-hover-start::after,
+.du-bois-light-picker-quarter-panel .du-bois-light-picker-cell-range-hover-start::after,
+.du-bois-light-picker-month-panel .du-bois-light-picker-cell-range-hover-start::after {
+  left: 14px;
+  border-left: 1px dashed #5ca4e0;
+  border-radius: 4px 0 0 4px;
+}
+.du-bois-light-picker-panel-rtl .du-bois-light-picker-year-panel .du-bois-light-picker-cell-range-hover-start::after,
+.du-bois-light-picker-panel-rtl .du-bois-light-picker-quarter-panel .du-bois-light-picker-cell-range-hover-start::after,
+.du-bois-light-picker-panel-rtl .du-bois-light-picker-month-panel .du-bois-light-picker-cell-range-hover-start::after {
+  right: 14px;
+  border-right: 1px dashed #5ca4e0;
+  border-radius: 0 4px 4px 0;
+}
+.du-bois-light-picker-year-panel .du-bois-light-picker-cell-range-hover-end::after,
+.du-bois-light-picker-quarter-panel .du-bois-light-picker-cell-range-hover-end::after,
+.du-bois-light-picker-month-panel .du-bois-light-picker-cell-range-hover-end::after {
+  right: 14px;
+  border-right: 1px dashed #5ca4e0;
+  border-radius: 0 4px 4px 0;
+}
+.du-bois-light-picker-panel-rtl .du-bois-light-picker-year-panel .du-bois-light-picker-cell-range-hover-end::after,
+.du-bois-light-picker-panel-rtl .du-bois-light-picker-quarter-panel .du-bois-light-picker-cell-range-hover-end::after,
+.du-bois-light-picker-panel-rtl .du-bois-light-picker-month-panel .du-bois-light-picker-cell-range-hover-end::after {
+  left: 14px;
+  border-left: 1px dashed #5ca4e0;
+  border-radius: 4px 0 0 4px;
+}
+.du-bois-light-picker-week-panel .du-bois-light-picker-body {
+  padding: 4px 8px;
+}
+.du-bois-light-picker-week-panel .du-bois-light-picker-cell:hover .du-bois-light-picker-cell-inner,
+.du-bois-light-picker-week-panel .du-bois-light-picker-cell-selected .du-bois-light-picker-cell-inner,
+.du-bois-light-picker-week-panel .du-bois-light-picker-cell .du-bois-light-picker-cell-inner {
+  background: transparent !important;
+}
+.du-bois-light-picker-week-panel-row td {
+  transition: background 0.3s;
+}
+.du-bois-light-picker-week-panel-row:hover td {
+  background: #f5f5f5;
+}
+.du-bois-light-picker-week-panel-row-selected td,
+.du-bois-light-picker-week-panel-row-selected:hover td {
+  background: #2272B4;
+}
+.du-bois-light-picker-week-panel-row-selected td.du-bois-light-picker-cell-week,
+.du-bois-light-picker-week-panel-row-selected:hover td.du-bois-light-picker-cell-week {
+  color: rgba(255, 255, 255, 0.5);
+}
+.du-bois-light-picker-week-panel-row-selected td.du-bois-light-picker-cell-today .du-bois-light-picker-cell-inner::before,
+.du-bois-light-picker-week-panel-row-selected:hover td.du-bois-light-picker-cell-today .du-bois-light-picker-cell-inner::before {
+  border-color: #fff;
+}
+.du-bois-light-picker-week-panel-row-selected td .du-bois-light-picker-cell-inner,
+.du-bois-light-picker-week-panel-row-selected:hover td .du-bois-light-picker-cell-inner {
+  color: #fff;
+}
+.du-bois-light-picker-date-panel .du-bois-light-picker-body {
+  padding: 4px 8px;
+}
+.du-bois-light-picker-date-panel .du-bois-light-picker-content {
+  width: 252px;
+}
+.du-bois-light-picker-date-panel .du-bois-light-picker-content th {
+  width: 36px;
+}
+.du-bois-light-picker-datetime-panel {
+  display: flex;
+}
+.du-bois-light-picker-datetime-panel .du-bois-light-picker-time-panel {
+  border-left: 1px solid #f0f0f0;
+}
+.du-bois-light-picker-datetime-panel .du-bois-light-picker-date-panel,
+.du-bois-light-picker-datetime-panel .du-bois-light-picker-time-panel {
+  transition: opacity 0.3s;
+}
+.du-bois-light-picker-datetime-panel-active .du-bois-light-picker-date-panel,
+.du-bois-light-picker-datetime-panel-active .du-bois-light-picker-time-panel {
+  opacity: 0.3;
+}
+.du-bois-light-picker-datetime-panel-active .du-bois-light-picker-date-panel-active,
+.du-bois-light-picker-datetime-panel-active .du-bois-light-picker-time-panel-active {
+  opacity: 1;
+}
+.du-bois-light-picker-time-panel {
+  width: auto;
+  min-width: auto;
+}
+.du-bois-light-picker-time-panel .du-bois-light-picker-content {
+  display: flex;
+  flex: auto;
+  height: 224px;
+}
+.du-bois-light-picker-time-panel-column {
+  flex: 1 0 auto;
+  width: 56px;
+  margin: 0;
+  padding: 0;
+  overflow-y: hidden;
+  text-align: left;
+  list-style: none;
+  transition: background 0.3s;
+}
+.du-bois-light-picker-time-panel-column::after {
+  display: block;
+  height: 196px;
+  content: '';
+}
+.du-bois-light-picker-datetime-panel .du-bois-light-picker-time-panel-column::after {
+  height: 198px;
+}
+.du-bois-light-picker-time-panel-column:not(:first-child) {
+  border-left: 1px solid #f0f0f0;
+}
+.du-bois-light-picker-time-panel-column-active {
+  background: rgba(230, 241, 245, 0.2);
+}
+.du-bois-light-picker-time-panel-column:hover {
+  overflow-y: auto;
+}
+.du-bois-light-picker-time-panel-column > li {
+  margin: 0;
+  padding: 0;
+}
+.du-bois-light-picker-time-panel-column > li.du-bois-light-picker-time-panel-cell .du-bois-light-picker-time-panel-cell-inner {
+  display: block;
+  width: 100%;
+  height: 28px;
+  margin: 0;
+  padding: 0 0 0 14px;
+  color: #20272E;
+  line-height: 28px;
+  border-radius: 0;
+  cursor: pointer;
+  transition: background 0.3s;
+}
+.du-bois-light-picker-time-panel-column > li.du-bois-light-picker-time-panel-cell .du-bois-light-picker-time-panel-cell-inner:hover {
+  background: #f5f5f5;
+}
+.du-bois-light-picker-time-panel-column > li.du-bois-light-picker-time-panel-cell-selected .du-bois-light-picker-time-panel-cell-inner {
+  background: #e6f1f5;
+}
+.du-bois-light-picker-time-panel-column > li.du-bois-light-picker-time-panel-cell-disabled .du-bois-light-picker-time-panel-cell-inner {
+  color: rgba(0, 0, 0, 0.25);
+  background: transparent;
+  cursor: not-allowed;
+}
+/* stylelint-disable-next-line */
+_:-ms-fullscreen .du-bois-light-picker-range-wrapper .du-bois-light-picker-month-panel .du-bois-light-picker-cell,
+:root .du-bois-light-picker-range-wrapper .du-bois-light-picker-month-panel .du-bois-light-picker-cell,
+_:-ms-fullscreen .du-bois-light-picker-range-wrapper .du-bois-light-picker-year-panel .du-bois-light-picker-cell,
+:root .du-bois-light-picker-range-wrapper .du-bois-light-picker-year-panel .du-bois-light-picker-cell {
+  padding: 21px 0;
+}
+.du-bois-light-picker-rtl {
+  direction: rtl;
+}
+.du-bois-light-picker-rtl .du-bois-light-picker-suffix {
+  margin-right: 2px;
+  margin-left: 0;
+}
+.du-bois-light-picker-rtl .du-bois-light-picker-clear {
+  right: auto;
+  left: 0;
+}
+.du-bois-light-picker-rtl .du-bois-light-picker-separator {
+  transform: rotate(180deg);
+}
+.du-bois-light-picker-panel-rtl .du-bois-light-picker-header-view button:not(:first-child) {
+  margin-right: 4px;
+  margin-left: 0;
+}
+.du-bois-light-picker-rtl.du-bois-light-picker-range .du-bois-light-picker-clear {
+  right: auto;
+  left: 7px;
+}
+.du-bois-light-picker-rtl.du-bois-light-picker-range .du-bois-light-picker-active-bar {
+  margin-right: 7px;
+  margin-left: 0;
+}
+.du-bois-light-picker-rtl.du-bois-light-picker-range.du-bois-light-picker-small .du-bois-light-picker-active-bar {
+  margin-right: 3px;
+}
+.du-bois-light-picker-dropdown-rtl .du-bois-light-picker-ranges {
+  text-align: right;
+}
+.du-bois-light-picker-dropdown-rtl .du-bois-light-picker-ranges .du-bois-light-picker-ok {
+  float: left;
+  margin-right: 4px;
+  margin-left: 0;
+}
+.du-bois-light-picker-panel-rtl {
+  direction: rtl;
+}
+.du-bois-light-picker-panel-rtl .du-bois-light-picker-prev-icon,
+.du-bois-light-picker-panel-rtl .du-bois-light-picker-super-prev-icon {
+  transform: rotate(135deg);
+}
+.du-bois-light-picker-panel-rtl .du-bois-light-picker-next-icon,
+.du-bois-light-picker-panel-rtl .du-bois-light-picker-super-next-icon {
+  transform: rotate(-45deg);
+}
+.du-bois-light-picker-cell .du-bois-light-picker-cell-inner {
+  position: relative;
+  z-index: 2;
+  display: inline-block;
+  min-width: 24px;
+  height: 24px;
+  line-height: 24px;
+  border-radius: 4px;
+  transition: background 0.3s, border 0.3s;
+}
+.du-bois-light-picker-panel-rtl .du-bois-light-picker-cell-in-view.du-bois-light-picker-cell-range-start::before {
+  right: 50%;
+  left: 0;
+}
+.du-bois-light-picker-panel-rtl .du-bois-light-picker-cell-in-view.du-bois-light-picker-cell-range-end::before {
+  right: 0;
+  left: 50%;
+}
+.du-bois-light-picker-panel-rtl .du-bois-light-picker-cell-in-view.du-bois-light-picker-cell-range-start.du-bois-light-picker-cell-range-end::before {
+  right: 50%;
+  left: 50%;
+}
+.du-bois-light-picker-panel-rtl .du-bois-light-picker-date-panel .du-bois-light-picker-cell-in-view.du-bois-light-picker-cell-in-range.du-bois-light-picker-cell-range-hover-start .du-bois-light-picker-cell-inner::after {
+  right: 0;
+  left: -6px;
+}
+.du-bois-light-picker-panel-rtl .du-bois-light-picker-date-panel .du-bois-light-picker-cell-in-view.du-bois-light-picker-cell-in-range.du-bois-light-picker-cell-range-hover-end .du-bois-light-picker-cell-inner::after {
+  right: -6px;
+  left: 0;
+}
+.du-bois-light-picker-panel-rtl .du-bois-light-picker-cell-range-hover.du-bois-light-picker-cell-range-start::after {
+  right: 0;
+  left: 50%;
+}
+.du-bois-light-picker-panel-rtl .du-bois-light-picker-cell-range-hover.du-bois-light-picker-cell-range-end::after {
+  right: 50%;
+  left: 0;
+}
+.du-bois-light-picker-panel-rtl .du-bois-light-picker-cell-in-view.du-bois-light-picker-cell-range-start:not(.du-bois-light-picker-cell-range-start-single):not(.du-bois-light-picker-cell-range-end) .du-bois-light-picker-cell-inner {
+  border-radius: 0 4px 4px 0;
+}
+.du-bois-light-picker-panel-rtl .du-bois-light-picker-cell-in-view.du-bois-light-picker-cell-range-end:not(.du-bois-light-picker-cell-range-end-single):not(.du-bois-light-picker-cell-range-start) .du-bois-light-picker-cell-inner {
+  border-radius: 4px 0 0 4px;
+}
+.du-bois-light-picker-panel-rtl tr > .du-bois-light-picker-cell-in-view.du-bois-light-picker-cell-range-hover:not(.du-bois-light-picker-cell-selected):first-child::after,
+.du-bois-light-picker-panel-rtl .du-bois-light-picker-cell-in-view.du-bois-light-picker-cell-start.du-bois-light-picker-cell-range-hover-edge-start.du-bois-light-picker-cell-range-hover-edge-start-near-range::after,
+.du-bois-light-picker-panel-rtl .du-bois-light-picker-cell-in-view.du-bois-light-picker-cell-range-hover-edge-start:not(.du-bois-light-picker-cell-range-hover-edge-start-near-range)::after,
+.du-bois-light-picker-panel-rtl .du-bois-light-picker-cell-in-view.du-bois-light-picker-cell-range-hover-start::after {
+  right: 6px;
+  left: 0;
+  border-right: 1px dashed #5ca4e0;
+  border-left: none;
+  border-top-left-radius: 0;
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
+  border-bottom-left-radius: 0;
+}
+.du-bois-light-picker-panel-rtl tr > .du-bois-light-picker-cell-in-view.du-bois-light-picker-cell-range-hover:not(.du-bois-light-picker-cell-selected):last-child::after,
+.du-bois-light-picker-panel-rtl .du-bois-light-picker-cell-in-view.du-bois-light-picker-cell-end.du-bois-light-picker-cell-range-hover-edge-end.du-bois-light-picker-cell-range-hover-edge-end-near-range::after,
+.du-bois-light-picker-panel-rtl .du-bois-light-picker-cell-in-view.du-bois-light-picker-cell-range-hover-edge-end:not(.du-bois-light-picker-cell-range-hover-edge-end-near-range)::after,
+.du-bois-light-picker-panel-rtl .du-bois-light-picker-cell-in-view.du-bois-light-picker-cell-range-hover-end::after {
+  right: 0;
+  left: 6px;
+  border-right: none;
+  border-left: 1px dashed #5ca4e0;
+  border-top-left-radius: 4px;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 4px;
+}
+.du-bois-light-picker-panel-rtl tr > .du-bois-light-picker-cell-in-view.du-bois-light-picker-cell-range-hover-start:last-child::after,
+.du-bois-light-picker-panel-rtl tr > .du-bois-light-picker-cell-in-view.du-bois-light-picker-cell-range-hover-end:first-child::after,
+.du-bois-light-picker-panel-rtl .du-bois-light-picker-cell-in-view.du-bois-light-picker-cell-start.du-bois-light-picker-cell-range-hover-edge-start:not(.du-bois-light-picker-cell-range-hover)::after,
+.du-bois-light-picker-panel-rtl .du-bois-light-picker-cell-in-view.du-bois-light-picker-cell-start.du-bois-light-picker-cell-range-hover-end.du-bois-light-picker-cell-range-hover-edge-start:not(.du-bois-light-picker-cell-range-hover)::after,
+.du-bois-light-picker-panel-rtl .du-bois-light-picker-cell-in-view.du-bois-light-picker-cell-end.du-bois-light-picker-cell-range-hover-start.du-bois-light-picker-cell-range-hover-edge-end:not(.du-bois-light-picker-cell-range-hover)::after,
+.du-bois-light-picker-panel-rtl tr > .du-bois-light-picker-cell-in-view.du-bois-light-picker-cell-start.du-bois-light-picker-cell-range-hover.du-bois-light-picker-cell-range-hover-edge-start:last-child::after,
+.du-bois-light-picker-panel-rtl tr > .du-bois-light-picker-cell-in-view.du-bois-light-picker-cell-end.du-bois-light-picker-cell-range-hover.du-bois-light-picker-cell-range-hover-edge-end:first-child::after {
+  right: 6px;
+  left: 6px;
+  border-right: 1px dashed #5ca4e0;
+  border-left: 1px dashed #5ca4e0;
+  border-radius: 4px;
+}
+.du-bois-light-picker-dropdown-rtl .du-bois-light-picker-footer-extra {
+  direction: rtl;
+  text-align: right;
+}
+.du-bois-light-picker-panel-rtl .du-bois-light-picker-time-panel {
+  direction: ltr;
+}
+
+/* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
+/* stylelint-disable no-duplicate-selectors */
+/* stylelint-disable */
+/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
+.du-bois-light-tag {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  color: #20272E;
+  font-size: 14px;
+  font-variant: tabular-nums;
+  line-height: 1.5715;
+  list-style: none;
+  font-feature-settings: 'tnum';
+  display: inline-block;
+  height: auto;
+  margin-right: 8px;
+  padding: 0 7px;
+  font-size: 12px;
+  line-height: 20px;
+  white-space: nowrap;
+  background: #fafafa;
+  border: 1px solid #d9d9d9;
+  border-radius: 4px;
+  opacity: 1;
+  transition: all 0.3s;
+}
+.du-bois-light-tag,
+.du-bois-light-tag a,
+.du-bois-light-tag a:hover {
+  color: #20272E;
+}
+.du-bois-light-tag > a:first-child:last-child {
+  display: inline-block;
+  margin: 0 -8px;
+  padding: 0 8px;
+}
+.du-bois-light-tag-close-icon {
+  margin-left: 3px;
+  color: #5D7283;
+  font-size: 10px;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+.du-bois-light-tag-close-icon:hover {
+  color: rgba(0, 0, 0, 0.85);
+}
+.du-bois-light-tag-has-color {
+  border-color: transparent;
+}
+.du-bois-light-tag-has-color,
+.du-bois-light-tag-has-color a,
+.du-bois-light-tag-has-color a:hover,
+.du-bois-light-tag-has-color .anticon-close,
+.du-bois-light-tag-has-color .anticon-close:hover {
+  color: #fff;
+}
+.du-bois-light-tag-checkable {
+  background-color: transparent;
+  border-color: transparent;
+  cursor: pointer;
+}
+.du-bois-light-tag-checkable:not(.du-bois-light-tag-checkable-checked):hover {
+  color: #2272B4;
+}
+.du-bois-light-tag-checkable:active,
+.du-bois-light-tag-checkable-checked {
+  color: #fff;
+}
+.du-bois-light-tag-checkable-checked {
+  background-color: #2272B4;
+}
+.du-bois-light-tag-checkable:active {
+  background-color: #14538f;
+}
+.du-bois-light-tag-hidden {
+  display: none;
+}
+.du-bois-light-tag-pink {
+  color: #c41d7f;
+  background: #fff0f6;
+  border-color: #ffadd2;
+}
+.du-bois-light-tag-pink-inverse {
+  color: #fff;
+  background: #eb2f96;
+  border-color: #eb2f96;
+}
+.du-bois-light-tag-magenta {
+  color: #c41d7f;
+  background: #fff0f6;
+  border-color: #ffadd2;
+}
+.du-bois-light-tag-magenta-inverse {
+  color: #fff;
+  background: #eb2f96;
+  border-color: #eb2f96;
+}
+.du-bois-light-tag-red {
+  color: #cf1322;
+  background: #fff1f0;
+  border-color: #ffa39e;
+}
+.du-bois-light-tag-red-inverse {
+  color: #fff;
+  background: #f5222d;
+  border-color: #f5222d;
+}
+.du-bois-light-tag-volcano {
+  color: #d4380d;
+  background: #fff2e8;
+  border-color: #ffbb96;
+}
+.du-bois-light-tag-volcano-inverse {
+  color: #fff;
+  background: #fa541c;
+  border-color: #fa541c;
+}
+.du-bois-light-tag-orange {
+  color: #d46b08;
+  background: #fff7e6;
+  border-color: #ffd591;
+}
+.du-bois-light-tag-orange-inverse {
+  color: #fff;
+  background: #fa8c16;
+  border-color: #fa8c16;
+}
+.du-bois-light-tag-yellow {
+  color: #d4b106;
+  background: #feffe6;
+  border-color: #fffb8f;
+}
+.du-bois-light-tag-yellow-inverse {
+  color: #fff;
+  background: #fadb14;
+  border-color: #fadb14;
+}
+.du-bois-light-tag-gold {
+  color: #d48806;
+  background: #fffbe6;
+  border-color: #ffe58f;
+}
+.du-bois-light-tag-gold-inverse {
+  color: #fff;
+  background: #faad14;
+  border-color: #faad14;
+}
+.du-bois-light-tag-cyan {
+  color: #08979c;
+  background: #e6fffb;
+  border-color: #87e8de;
+}
+.du-bois-light-tag-cyan-inverse {
+  color: #fff;
+  background: #13c2c2;
+  border-color: #13c2c2;
+}
+.du-bois-light-tag-lime {
+  color: #7cb305;
+  background: #fcffe6;
+  border-color: #eaff8f;
+}
+.du-bois-light-tag-lime-inverse {
+  color: #fff;
+  background: #a0d911;
+  border-color: #a0d911;
+}
+.du-bois-light-tag-green {
+  color: #389e0d;
+  background: #f6ffed;
+  border-color: #b7eb8f;
+}
+.du-bois-light-tag-green-inverse {
+  color: #fff;
+  background: #52c41a;
+  border-color: #52c41a;
+}
+.du-bois-light-tag-blue {
+  color: #096dd9;
+  background: #e6f7ff;
+  border-color: #91d5ff;
+}
+.du-bois-light-tag-blue-inverse {
+  color: #fff;
+  background: #1890ff;
+  border-color: #1890ff;
+}
+.du-bois-light-tag-geekblue {
+  color: #1d39c4;
+  background: #f0f5ff;
+  border-color: #adc6ff;
+}
+.du-bois-light-tag-geekblue-inverse {
+  color: #fff;
+  background: #2f54eb;
+  border-color: #2f54eb;
+}
+.du-bois-light-tag-purple {
+  color: #531dab;
+  background: #f9f0ff;
+  border-color: #d3adf7;
+}
+.du-bois-light-tag-purple-inverse {
+  color: #fff;
+  background: #722ed1;
+  border-color: #722ed1;
+}
+.du-bois-light-tag-success {
+  color: #52c41a;
+  background: #f6ffed;
+  border-color: #b7eb8f;
+}
+.du-bois-light-tag-processing {
+  color: #1890ff;
+  background: #e6f7ff;
+  border-color: #91d5ff;
+}
+.du-bois-light-tag-error {
+  color: #f5222d;
+  background: #fff1f0;
+  border-color: #ffa39e;
+}
+.du-bois-light-tag-warning {
+  color: #fa8c16;
+  background: #fff7e6;
+  border-color: #ffd591;
+}
+.du-bois-light-tag > .anticon + span,
+.du-bois-light-tag > span + .anticon {
+  margin-left: 7px;
+}
+.du-bois-light-tag.du-bois-light-tag-rtl {
+  margin-right: 0;
+  margin-left: 8px;
+  direction: rtl;
+  text-align: right;
+}
+.du-bois-light-tag-rtl .du-bois-light-tag-close-icon {
+  margin-right: 3px;
+  margin-left: 0;
+}
+.du-bois-light-tag-rtl.du-bois-light-tag > .anticon + span,
+.du-bois-light-tag-rtl.du-bois-light-tag > span + .anticon {
+  margin-right: 7px;
+  margin-left: 0;
+}
+
 /* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
 /* stylelint-disable no-duplicate-selectors */
 /* stylelint-disable */
@@ -4119,7 +5368,7 @@ a.du-bois-light-btn-sm {
   position: absolute;
   top: -9999px;
   left: -9999px;
-  z-index: 1050;
+  z-index: calc(var(--dubois-zindex-base, 1000) + 50);
   display: block;
 }
 .du-bois-light-dropdown::before {
@@ -4229,7 +5478,7 @@ a.du-bois-light-btn-sm {
 }
 .du-bois-light-dropdown-menu-submenu-popup {
   position: absolute;
-  z-index: 1050;
+  z-index: calc(var(--dubois-zindex-base, 1000) + 50);
   background: transparent;
   box-shadow: none;
   transform-origin: 0 0;
@@ -10503,7 +11752,7 @@ a.du-bois-light-btn-sm {
   list-style: none;
   font-feature-settings: 'tnum';
   position: absolute;
-  z-index: 1070;
+  z-index: calc(var(--dubois-zindex-base, 1000) + 70);
   display: block;
   width: max-content;
   max-width: 250px;
@@ -11840,7 +13089,7 @@ textarea.du-bois-light-input {
 }
 .du-bois-light-menu-submenu-popup {
   position: absolute;
-  z-index: 1050;
+  z-index: calc(var(--dubois-zindex-base, 1000) + 50);
   background: transparent;
   border-radius: 4px;
   box-shadow: none;
@@ -12527,7 +13776,7 @@ textarea.du-bois-light-input {
   right: 0;
   bottom: 0;
   left: 0;
-  z-index: 1000;
+  z-index: calc(var(--dubois-zindex-base, 1000));
   height: 100%;
   background-color: rgba(0, 0, 0, 0.45);
 }
@@ -12545,7 +13794,7 @@ textarea.du-bois-light-input {
   -webkit-overflow-scrolling: touch;
 }
 .du-bois-light-modal-wrap {
-  z-index: 1000;
+  z-index: calc(var(--dubois-zindex-base, 1000));
 }
 .du-bois-light-modal-title {
   margin: 0;
@@ -12610,7 +13859,7 @@ textarea.du-bois-light-input {
   word-wrap: break-word;
 }
 .du-bois-light-modal-footer {
-  padding: 20px 40px 40px;
+  padding: 0px 0px;
   text-align: right;
   background: transparent;
   border-top: 0px solid #f0f0f0;
@@ -12757,7 +14006,7 @@ textarea.du-bois-light-input {
   list-style: none;
   font-feature-settings: 'tnum';
   position: fixed;
-  z-index: 1010;
+  z-index: calc(var(--dubois-zindex-base, 1000) + 30);
   margin-right: 24px;
 }
 .du-bois-light-notification-topLeft,
@@ -12968,7 +14217,7 @@ textarea.du-bois-light-input {
   position: absolute;
   top: 0;
   left: 0;
-  z-index: 1030;
+  z-index: calc(var(--dubois-zindex-base, 1000) + 30);
   font-weight: normal;
   white-space: normal;
   text-align: left;
@@ -15351,254 +16600,6 @@ textarea.du-bois-light-pagination-options-quick-jumper input {
   margin-left: 0;
 }
 
-/* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
-/* stylelint-disable no-duplicate-selectors */
-/* stylelint-disable */
-/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
-.du-bois-light-tag {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-  color: #20272E;
-  font-size: 14px;
-  font-variant: tabular-nums;
-  line-height: 1.5715;
-  list-style: none;
-  font-feature-settings: 'tnum';
-  display: inline-block;
-  height: auto;
-  margin-right: 8px;
-  padding: 0 7px;
-  font-size: 12px;
-  line-height: 20px;
-  white-space: nowrap;
-  background: #fafafa;
-  border: 1px solid #d9d9d9;
-  border-radius: 4px;
-  opacity: 1;
-  transition: all 0.3s;
-}
-.du-bois-light-tag,
-.du-bois-light-tag a,
-.du-bois-light-tag a:hover {
-  color: #20272E;
-}
-.du-bois-light-tag > a:first-child:last-child {
-  display: inline-block;
-  margin: 0 -8px;
-  padding: 0 8px;
-}
-.du-bois-light-tag-close-icon {
-  margin-left: 3px;
-  color: #5D7283;
-  font-size: 10px;
-  cursor: pointer;
-  transition: all 0.3s;
-}
-.du-bois-light-tag-close-icon:hover {
-  color: rgba(0, 0, 0, 0.85);
-}
-.du-bois-light-tag-has-color {
-  border-color: transparent;
-}
-.du-bois-light-tag-has-color,
-.du-bois-light-tag-has-color a,
-.du-bois-light-tag-has-color a:hover,
-.du-bois-light-tag-has-color .anticon-close,
-.du-bois-light-tag-has-color .anticon-close:hover {
-  color: #fff;
-}
-.du-bois-light-tag-checkable {
-  background-color: transparent;
-  border-color: transparent;
-  cursor: pointer;
-}
-.du-bois-light-tag-checkable:not(.du-bois-light-tag-checkable-checked):hover {
-  color: #2272B4;
-}
-.du-bois-light-tag-checkable:active,
-.du-bois-light-tag-checkable-checked {
-  color: #fff;
-}
-.du-bois-light-tag-checkable-checked {
-  background-color: #2272B4;
-}
-.du-bois-light-tag-checkable:active {
-  background-color: #14538f;
-}
-.du-bois-light-tag-hidden {
-  display: none;
-}
-.du-bois-light-tag-pink {
-  color: #c41d7f;
-  background: #fff0f6;
-  border-color: #ffadd2;
-}
-.du-bois-light-tag-pink-inverse {
-  color: #fff;
-  background: #eb2f96;
-  border-color: #eb2f96;
-}
-.du-bois-light-tag-magenta {
-  color: #c41d7f;
-  background: #fff0f6;
-  border-color: #ffadd2;
-}
-.du-bois-light-tag-magenta-inverse {
-  color: #fff;
-  background: #eb2f96;
-  border-color: #eb2f96;
-}
-.du-bois-light-tag-red {
-  color: #cf1322;
-  background: #fff1f0;
-  border-color: #ffa39e;
-}
-.du-bois-light-tag-red-inverse {
-  color: #fff;
-  background: #f5222d;
-  border-color: #f5222d;
-}
-.du-bois-light-tag-volcano {
-  color: #d4380d;
-  background: #fff2e8;
-  border-color: #ffbb96;
-}
-.du-bois-light-tag-volcano-inverse {
-  color: #fff;
-  background: #fa541c;
-  border-color: #fa541c;
-}
-.du-bois-light-tag-orange {
-  color: #d46b08;
-  background: #fff7e6;
-  border-color: #ffd591;
-}
-.du-bois-light-tag-orange-inverse {
-  color: #fff;
-  background: #fa8c16;
-  border-color: #fa8c16;
-}
-.du-bois-light-tag-yellow {
-  color: #d4b106;
-  background: #feffe6;
-  border-color: #fffb8f;
-}
-.du-bois-light-tag-yellow-inverse {
-  color: #fff;
-  background: #fadb14;
-  border-color: #fadb14;
-}
-.du-bois-light-tag-gold {
-  color: #d48806;
-  background: #fffbe6;
-  border-color: #ffe58f;
-}
-.du-bois-light-tag-gold-inverse {
-  color: #fff;
-  background: #faad14;
-  border-color: #faad14;
-}
-.du-bois-light-tag-cyan {
-  color: #08979c;
-  background: #e6fffb;
-  border-color: #87e8de;
-}
-.du-bois-light-tag-cyan-inverse {
-  color: #fff;
-  background: #13c2c2;
-  border-color: #13c2c2;
-}
-.du-bois-light-tag-lime {
-  color: #7cb305;
-  background: #fcffe6;
-  border-color: #eaff8f;
-}
-.du-bois-light-tag-lime-inverse {
-  color: #fff;
-  background: #a0d911;
-  border-color: #a0d911;
-}
-.du-bois-light-tag-green {
-  color: #389e0d;
-  background: #f6ffed;
-  border-color: #b7eb8f;
-}
-.du-bois-light-tag-green-inverse {
-  color: #fff;
-  background: #52c41a;
-  border-color: #52c41a;
-}
-.du-bois-light-tag-blue {
-  color: #096dd9;
-  background: #e6f7ff;
-  border-color: #91d5ff;
-}
-.du-bois-light-tag-blue-inverse {
-  color: #fff;
-  background: #1890ff;
-  border-color: #1890ff;
-}
-.du-bois-light-tag-geekblue {
-  color: #1d39c4;
-  background: #f0f5ff;
-  border-color: #adc6ff;
-}
-.du-bois-light-tag-geekblue-inverse {
-  color: #fff;
-  background: #2f54eb;
-  border-color: #2f54eb;
-}
-.du-bois-light-tag-purple {
-  color: #531dab;
-  background: #f9f0ff;
-  border-color: #d3adf7;
-}
-.du-bois-light-tag-purple-inverse {
-  color: #fff;
-  background: #722ed1;
-  border-color: #722ed1;
-}
-.du-bois-light-tag-success {
-  color: #52c41a;
-  background: #f6ffed;
-  border-color: #b7eb8f;
-}
-.du-bois-light-tag-processing {
-  color: #1890ff;
-  background: #e6f7ff;
-  border-color: #91d5ff;
-}
-.du-bois-light-tag-error {
-  color: #f5222d;
-  background: #fff1f0;
-  border-color: #ffa39e;
-}
-.du-bois-light-tag-warning {
-  color: #fa8c16;
-  background: #fff7e6;
-  border-color: #ffd591;
-}
-.du-bois-light-tag > .anticon + span,
-.du-bois-light-tag > span + .anticon {
-  margin-left: 7px;
-}
-.du-bois-light-tag.du-bois-light-tag-rtl {
-  margin-right: 0;
-  margin-left: 8px;
-  direction: rtl;
-  text-align: right;
-}
-.du-bois-light-tag-rtl .du-bois-light-tag-close-icon {
-  margin-right: 3px;
-  margin-left: 0;
-}
-.du-bois-light-tag-rtl.du-bois-light-tag > .anticon + span,
-.du-bois-light-tag-rtl.du-bois-light-tag > span + .anticon {
-  margin-right: 7px;
-  margin-left: 0;
-}
-
 /* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
 /* stylelint-disable no-duplicate-selectors */
 /* stylelint-disable */
@@ -15889,7 +16890,7 @@ textarea.du-bois-light-pagination-options-quick-jumper input {
   position: absolute;
   top: -9999px;
   left: -9999px;
-  z-index: 1050;
+  z-index: calc(var(--dubois-zindex-base, 1000) + 50);
   display: block;
 }
 .du-bois-light-tabs-dropdown-hidden {