react-autoql 4.2.2 → 4.2.3

package/dist/autoql.esm.css

@@ -1423,100 +1423,6 @@ span.react-autoql-icon {
     left: 0.5em;
     top: -2px; }
 
-.react-autoql-notification-settings {
-  background-color: var(--react-autoql-background-color-secondary);
-  color: var(--react-autoql-text-color-primary);
-  padding-top: 20px;
-  height: 100%; }
-  .react-autoql-notification-settings .react-autoql-notification-settings-container {
-    margin: 20px;
-    margin-top: 10px;
-    border-radius: 4px;
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13);
-    background-color: var(--react-autoql-background-color-primary);
-    overflow: hidden; }
-    .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item {
-      height: 55px;
-      line-height: 55px;
-      transition: height 0.3s cubic-bezier(0.26, 0.26, 0, 1); }
-      .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .react-autoql-notification-error-status-icon {
-        margin-right: 10px;
-        cursor: pointer; }
-      .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item #react-autoql-notification-error-status-icon-PROJECT {
-        margin-right: 10px; }
-      .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .reset-period-info-icon {
-        padding-right: 20px;
-        font-size: 17px;
-        opacity: 1;
-        cursor: pointer;
-        color: var(--react-autoql-accent-color); }
-      .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item.CUSTOM:hover {
-        background: rgba(0, 0, 0, 0.01); }
-      .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .react-autoql-notification-action-btn {
-        opacity: 0;
-        margin-right: 20px;
-        font-size: 16px;
-        transition: all 0.2s ease;
-        color: var(--react-autoql-text-color-primary);
-        cursor: pointer; }
-        .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .react-autoql-notification-action-btn:hover {
-          color: var(--react-autoql-accent-color);
-          opacity: 1 !important; }
-      .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item:hover .react-autoql-notification-action-btn {
-        opacity: 0.5; }
-    .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item-header {
-      display: flex;
-      justify-content: space-between;
-      height: 56px;
-      padding-left: 25px;
-      padding-right: 8px;
-      border-bottom: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.05)); }
-    .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-enable-checkbox {
-      margin-bottom: 4px;
-      margin-right: 8px; }
-    .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-disable-checkbox {
-      margin-bottom: 4px;
-      margin-right: 8px;
-      opacity: 0.5;
-      pointer-events: none; }
-  .react-autoql-notification-settings .react-autoql-notification-title-container {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 5px 20px;
-    padding-bottom: 0;
-    color: var(--react-autoql-text-color-primary); }
-    .react-autoql-notification-settings .react-autoql-notification-title-container .react-autoql-notification-add-btn {
-      display: inline-block;
-      height: 35px;
-      width: 35px;
-      border-radius: 20px;
-      background: var(--react-autoql-accent-color, #26a7df);
-      color: var(--react-autoql-accent-text-color);
-      line-height: 38px;
-      text-align: center;
-      font-size: 20px;
-      box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13);
-      transition: all 0.2s ease;
-      margin-right: 5px;
-      cursor: pointer; }
-      .react-autoql-notification-settings .react-autoql-notification-title-container .react-autoql-notification-add-btn:hover {
-        box-shadow: 0 1px 3px 0px rgba(0, 0, 0, 0.32); }
-  .react-autoql-notification-settings .react-autoql-notification-setting-display-name {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    padding-right: 10px; }
-    .react-autoql-notification-settings .react-autoql-notification-setting-display-name .react-autoql-notification-setting-display-name-message {
-      opacity: 0.5; }
-  .react-autoql-notification-settings .react-autoql-re-initialize-btn {
-    vertical-align: middle;
-    height: 18px; }
-  .react-autoql-notification-settings .react-autoql-re-initialize-btn-text {
-    display: flex;
-    align-items: center;
-    margin-top: -25px; }
-
 .notification-list-loading-container {
   text-align: center;
   padding-top: 100px;
@@ -1615,74 +1521,99 @@ span.react-autoql-icon {
     opacity: 1;
     top: 0; } }
 
-.notification-rule-add-btn-outer,
-.notification-rule-validate-btn-outer {
-  text-align: center;
-  border-style: dashed !important;
-  height: 38px;
-  line-height: 25px;
-  margin: 0 !important;
-  overflow: hidden; }
-
-.notification-rule-outer-container {
-  position: relative;
-  border: 1px solid transparent;
-  border-radius: 4px; }
-  .notification-rule-outer-container.outlined {
-    border-color: rgba(0, 0, 0, 0.15);
-    padding: 0 20px;
-    padding-bottom: 12px; }
-
-.notification-outer-all-any {
-  position: absolute;
-  left: 0;
-  top: 50%; }
-
-.notification-first-group-btn-container {
-  display: flex;
-  justify-content: space-between; }
-
-.data-alerts-container.read-only .react-autoql-notification-group-container {
-  border: none; }
-
-.notification-rule-outer-container {
-  position: relative;
-  border: 1px solid transparent;
-  border-radius: 4px;
-  padding-bottom: 5px; }
-
-.expression-error-message {
-  padding-left: 5px; }
-
-.data-alerts-container.read-only .react-autoql-notification-group-container {
-  border: none; }
-
-.react-autoql-step-container a {
-  color: var(--react-autoql-accent-color, #26a7df); }
-
-.frequency-date-select-container {
-  margin-top: 10px; }
-
-.notification-frequency-step {
-  display: flex; }
-  .notification-frequency-step .frequency-category-select {
-    position: relative;
-    padding-top: 9px; }
-  .notification-frequency-step .notification-frequency-select {
-    margin-left: 8px; }
-  .notification-frequency-step .frequency-repeat-checkbox .react-autoql-checkbox-label {
-    line-height: 33px; }
-  .notification-frequency-step .frequency-repeat-follow-text {
-    line-height: 32px;
-    vertical-align: top; }
-  .notification-frequency-step .frequency-settings-container {
-    flex: 0 1 400px; }
-
-.schedule-builder-timezone-section {
-  margin: 10px 5px; }
-  .schedule-builder-timezone-section .react-autoql-timezone-select {
-    display: inline-block;
-    width: 300px; }
+.react-autoql-notification-settings {
+  background-color: var(--react-autoql-background-color-secondary);
+  color: var(--react-autoql-text-color-primary);
+  padding-top: 20px;
+  height: 100%; }
+  .react-autoql-notification-settings .react-autoql-notification-settings-container {
+    margin: 20px;
+    margin-top: 10px;
+    border-radius: 4px;
+    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13);
+    background-color: var(--react-autoql-background-color-primary);
+    overflow: hidden; }
+    .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item {
+      height: 55px;
+      line-height: 55px;
+      transition: height 0.3s cubic-bezier(0.26, 0.26, 0, 1); }
+      .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .react-autoql-notification-error-status-icon {
+        margin-right: 10px;
+        cursor: pointer; }
+      .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item #react-autoql-notification-error-status-icon-PROJECT {
+        margin-right: 10px; }
+      .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .reset-period-info-icon {
+        padding-right: 20px;
+        font-size: 17px;
+        opacity: 1;
+        cursor: pointer;
+        color: var(--react-autoql-accent-color); }
+      .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item.CUSTOM:hover {
+        background: rgba(0, 0, 0, 0.01); }
+      .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .react-autoql-notification-action-btn {
+        opacity: 0;
+        margin-right: 20px;
+        font-size: 16px;
+        transition: all 0.2s ease;
+        color: var(--react-autoql-text-color-primary);
+        cursor: pointer; }
+        .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .react-autoql-notification-action-btn:hover {
+          color: var(--react-autoql-accent-color);
+          opacity: 1 !important; }
+      .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item:hover .react-autoql-notification-action-btn {
+        opacity: 0.5; }
+    .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item-header {
+      display: flex;
+      justify-content: space-between;
+      height: 56px;
+      padding-left: 25px;
+      padding-right: 8px;
+      border-bottom: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.05)); }
+    .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-enable-checkbox {
+      margin-bottom: 4px;
+      margin-right: 8px; }
+    .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-disable-checkbox {
+      margin-bottom: 4px;
+      margin-right: 8px;
+      opacity: 0.5;
+      pointer-events: none; }
+  .react-autoql-notification-settings .react-autoql-notification-title-container {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 5px 20px;
+    padding-bottom: 0;
+    color: var(--react-autoql-text-color-primary); }
+    .react-autoql-notification-settings .react-autoql-notification-title-container .react-autoql-notification-add-btn {
+      display: inline-block;
+      height: 35px;
+      width: 35px;
+      border-radius: 20px;
+      background: var(--react-autoql-accent-color, #26a7df);
+      color: var(--react-autoql-accent-text-color);
+      line-height: 38px;
+      text-align: center;
+      font-size: 20px;
+      box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13);
+      transition: all 0.2s ease;
+      margin-right: 5px;
+      cursor: pointer; }
+      .react-autoql-notification-settings .react-autoql-notification-title-container .react-autoql-notification-add-btn:hover {
+        box-shadow: 0 1px 3px 0px rgba(0, 0, 0, 0.32); }
+  .react-autoql-notification-settings .react-autoql-notification-setting-display-name {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    padding-right: 10px; }
+    .react-autoql-notification-settings .react-autoql-notification-setting-display-name .react-autoql-notification-setting-display-name-message {
+      opacity: 0.5; }
+  .react-autoql-notification-settings .react-autoql-re-initialize-btn {
+    vertical-align: middle;
+    height: 18px; }
+  .react-autoql-notification-settings .react-autoql-re-initialize-btn-text {
+    display: flex;
+    align-items: center;
+    margin-top: -25px; }
 
 .react-autoql-notification-list-item {
   display: flex;
@@ -1900,6 +1831,75 @@ span.react-autoql-icon {
       .react-autoql-notification-list-item .react-autoql-notification-display-name-container .react-autoql-notification-timestamp span.react-autoql-icon svg {
         margin-bottom: -1px; }
 
+.notification-rule-outer-container {
+  position: relative;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  padding-bottom: 5px; }
+
+.expression-error-message {
+  padding-left: 5px; }
+
+.data-alerts-container.read-only .react-autoql-notification-group-container {
+  border: none; }
+
+.notification-rule-add-btn-outer,
+.notification-rule-validate-btn-outer {
+  text-align: center;
+  border-style: dashed !important;
+  height: 38px;
+  line-height: 25px;
+  margin: 0 !important;
+  overflow: hidden; }
+
+.notification-rule-outer-container {
+  position: relative;
+  border: 1px solid transparent;
+  border-radius: 4px; }
+  .notification-rule-outer-container.outlined {
+    border-color: rgba(0, 0, 0, 0.15);
+    padding: 0 20px;
+    padding-bottom: 12px; }
+
+.notification-outer-all-any {
+  position: absolute;
+  left: 0;
+  top: 50%; }
+
+.notification-first-group-btn-container {
+  display: flex;
+  justify-content: space-between; }
+
+.data-alerts-container.read-only .react-autoql-notification-group-container {
+  border: none; }
+
+.react-autoql-step-container a {
+  color: var(--react-autoql-accent-color, #26a7df); }
+
+.frequency-date-select-container {
+  margin-top: 10px; }
+
+.notification-frequency-step {
+  display: flex; }
+  .notification-frequency-step .frequency-category-select {
+    position: relative;
+    padding-top: 9px; }
+  .notification-frequency-step .notification-frequency-select {
+    margin-left: 8px; }
+  .notification-frequency-step .frequency-repeat-checkbox .react-autoql-checkbox-label {
+    line-height: 33px; }
+  .notification-frequency-step .frequency-repeat-follow-text {
+    line-height: 32px;
+    vertical-align: top; }
+  .notification-frequency-step .frequency-settings-container {
+    flex: 0 1 400px; }
+
+.schedule-builder-timezone-section {
+  margin: 10px 5px; }
+  .schedule-builder-timezone-section .react-autoql-timezone-select {
+    display: inline-block;
+    width: 300px; }
+
 .notification-modal-content .react-autoql-step-content p {
   margin-bottom: 0.5em;
   margin-top: 0.5em;
@@ -2453,86 +2453,6 @@ span.react-autoql-icon {
     background-color: var(--react-autoql-danger-color, #ca0b00);
     color: #fff; }
 
-.ReactModal__Overlay {
-  background-color: transparent !important;
-  transition: background-color 0.2s ease-in-out;
-  z-index: 9999; }
-
-.ReactModal__Overlay--after-open {
-  background-color: rgba(0, 0, 0, 0.25) !important; }
-
-.ReactModal__Overlay--before-close {
-  background-color: transparent !important; }
-
-.ReactModal__Content {
-  display: flex;
-  flex-direction: column;
-  transform: scale(0);
-  transition: all 0.2s ease-in-out;
-  color: var(--react-autoql-text-color-primary);
-  border: 1px solid var(--react-autoql-border-color) !important;
-  background: var(--react-autoql-background-color-primary) !important;
-  box-shadow: 0 0 14px 1px rgba(0, 0, 0, 0.15);
-  padding: 0 !important;
-  margin: auto auto;
-  max-width: 90vw;
-  max-height: calc(100vh - 90px); }
-  .ReactModal__Content input.react-autoql-input,
-  .ReactModal__Content textarea.react-autoql-input,
-  .ReactModal__Content textarea {
-    border-color: var(--react-autoql-border-color);
-    color: var(--react-autoql-text-color-primary);
-    background: var(--react-autoql-background-color-primary, white); }
-    .ReactModal__Content input.react-autoql-input::-moz-placeholder, .ReactModal__Content textarea.react-autoql-input::-moz-placeholder, .ReactModal__Content textarea::-moz-placeholder {
-      color: var(--react-autoql-text-color-placeholder); }
-    .ReactModal__Content input.react-autoql-input:-ms-input-placeholder, .ReactModal__Content textarea.react-autoql-input:-ms-input-placeholder, .ReactModal__Content textarea:-ms-input-placeholder {
-      color: var(--react-autoql-text-color-placeholder); }
-    .ReactModal__Content input.react-autoql-input::placeholder,
-    .ReactModal__Content textarea.react-autoql-input::placeholder,
-    .ReactModal__Content textarea::placeholder {
-      color: var(--react-autoql-text-color-placeholder); }
-
-.ReactModal__Overlay--after-open .ReactModal__Content {
-  transform: scale(1); }
-
-.ReactModal__Overlay--before-close .ReactModal__Content {
-  transform: scale(0); }
-
-.react-autoql-modal-header {
-  position: relative;
-  text-align: center;
-  flex: 0 0 52px;
-  border-bottom: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.05));
-  padding: 14px 60px;
-  font-size: 16px; }
-
-.react-autoql-modal-footer {
-  position: relative;
-  flex: 0 0 52px;
-  border-top: 1px solid rgba(0, 0, 0, 0.05);
-  text-align: right;
-  padding: 8px 10px; }
-
-.react-autoql-modal-body {
-  display: flex;
-  flex-direction: column;
-  padding: 25px;
-  flex: 1;
-  overflow: hidden; }
-  .react-autoql-modal-body h3 {
-    color: var(--react-autoql-text-color-primary); }
-
-.react-autoql-modal-close-btn {
-  position: absolute !important;
-  top: 10px;
-  right: 18px;
-  font-size: 22px;
-  opacity: 0.6 !important;
-  cursor: pointer; }
-
-.react-autoql-modal-close-btn:hover {
-  opacity: 1 !important; }
-
 .react-autoql-radio-btn-container.react-autoql-radio-btn-container-list {
   display: inline-block; }
 
@@ -2619,60 +2539,6 @@ span.react-autoql-icon {
     border-top-right-radius: 4px;
     border-bottom-right-radius: 4px; }
 
-.react-autoql-cascader {
-  position: relative;
-  white-space: nowrap;
-  overflow: hidden;
-  min-width: 300px; }
-  .react-autoql-cascader .options-container {
-    transition: max-width 0.3s ease;
-    display: inline-block;
-    vertical-align: top;
-    padding: 0 10px;
-    margin: 10px 0;
-    width: 100%;
-    max-width: calc(100% - 20px);
-    white-space: pre-wrap; }
-    .react-autoql-cascader .options-container.hidden {
-      max-width: 0; }
-      .react-autoql-cascader .options-container.hidden span {
-        white-space: nowrap; }
-      .react-autoql-cascader .options-container.hidden .option {
-        opacity: 0;
-        pointer-events: none; }
-    .react-autoql-cascader .options-container .options-title {
-      padding: 4px;
-      padding-left: 10px;
-      font-weight: 600; }
-    .react-autoql-cascader .options-container .cascader-back-arrow {
-      position: absolute;
-      cursor: pointer;
-      top: 15px;
-      left: 0; }
-      .react-autoql-cascader .options-container .cascader-back-arrow:hover {
-        opacity: 0.8; }
-    .react-autoql-cascader .options-container .option {
-      cursor: pointer;
-      padding: 4px;
-      display: flex;
-      justify-content: space-between;
-      border-radius: 2px;
-      padding-left: 10px; }
-      .react-autoql-cascader .options-container .option .option-arrow {
-        opacity: 0.7; }
-      .react-autoql-cascader .options-container .option .option-execute-icon {
-        opacity: 0;
-        color: #fff;
-        font-size: 16px;
-        vertical-align: middle; }
-      .react-autoql-cascader .options-container .option:hover, .react-autoql-cascader .options-container .option.active {
-        background-color: var(--react-autoql-accent-color, #26a7df);
-        color: #fff; }
-        .react-autoql-cascader .options-container .option:hover .option-execute-icon, .react-autoql-cascader .options-container .option.active .option-execute-icon {
-          opacity: 1; }
-    .react-autoql-cascader .options-container:not(:last-child) {
-      border-right: 1px solid #d3d3d352; }
-
 .content {
   margin: 2rem; }
 
@@ -2771,39 +2637,119 @@ span.react-autoql-icon {
   background: var(--react-autoql-background-color-tertiary);
   border: 1px solid var(--react-autoql-background-color-tertiary); }
 
-.react-autoql-checkbox--switch__input::before {
-  top: 2px;
-  right: 18px;
-  bottom: 2px;
-  left: 2px;
-  border-radius: 50%;
-  background: #fff; }
+.react-autoql-checkbox--switch__input::before {
+  top: 2px;
+  right: 18px;
+  bottom: 2px;
+  left: 2px;
+  border-radius: 50%;
+  background: #fff; }
+
+.react-autoql-checkbox--switch__input:checked
++ .react-autoql-checkbox--switch__label::after {
+  content: 'on'; }
+
+.react-autoql-checkbox--switch__input:checked::before {
+  right: 2px;
+  left: 18px;
+  top: 2px;
+  bottom: 2px; }
+
+.react-autoql-checkbox-label {
+  padding-left: 6px;
+  line-height: 100%; }
+
+.react-autoql-modal-container
+.react-autoql-checkbox__input:not(.react-autoql-checkbox--switch__input),
+.react-autoql-drawer
+.react-autoql-checkbox__input:not(.react-autoql-checkbox--switch__input) {
+  border-color: var(--react-autoql-accent-color); }
+
+.react-autoql-modal-container
+.react-autoql-checkbox__input::before:not(.react-autoql-checkbox--switch__input),
+.react-autoql-drawer
+.react-autoql-checkbox__input::before:not(.react-autoql-checkbox--switch__input) {
+  background: var(--react-autoql-accent-color); }
+
+.ReactModal__Overlay {
+  background-color: transparent !important;
+  transition: background-color 0.2s ease-in-out;
+  z-index: 9999; }
+
+.ReactModal__Overlay--after-open {
+  background-color: rgba(0, 0, 0, 0.25) !important; }
+
+.ReactModal__Overlay--before-close {
+  background-color: transparent !important; }
+
+.ReactModal__Content {
+  display: flex;
+  flex-direction: column;
+  transform: scale(0);
+  transition: all 0.2s ease-in-out;
+  color: var(--react-autoql-text-color-primary);
+  border: 1px solid var(--react-autoql-border-color) !important;
+  background: var(--react-autoql-background-color-primary) !important;
+  box-shadow: 0 0 14px 1px rgba(0, 0, 0, 0.15);
+  padding: 0 !important;
+  margin: auto auto;
+  max-width: 90vw;
+  max-height: calc(100vh - 90px); }
+  .ReactModal__Content input.react-autoql-input,
+  .ReactModal__Content textarea.react-autoql-input,
+  .ReactModal__Content textarea {
+    border-color: var(--react-autoql-border-color);
+    color: var(--react-autoql-text-color-primary);
+    background: var(--react-autoql-background-color-primary, white); }
+    .ReactModal__Content input.react-autoql-input::-moz-placeholder, .ReactModal__Content textarea.react-autoql-input::-moz-placeholder, .ReactModal__Content textarea::-moz-placeholder {
+      color: var(--react-autoql-text-color-placeholder); }
+    .ReactModal__Content input.react-autoql-input:-ms-input-placeholder, .ReactModal__Content textarea.react-autoql-input:-ms-input-placeholder, .ReactModal__Content textarea:-ms-input-placeholder {
+      color: var(--react-autoql-text-color-placeholder); }
+    .ReactModal__Content input.react-autoql-input::placeholder,
+    .ReactModal__Content textarea.react-autoql-input::placeholder,
+    .ReactModal__Content textarea::placeholder {
+      color: var(--react-autoql-text-color-placeholder); }
+
+.ReactModal__Overlay--after-open .ReactModal__Content {
+  transform: scale(1); }
+
+.ReactModal__Overlay--before-close .ReactModal__Content {
+  transform: scale(0); }
 
-.react-autoql-checkbox--switch__input:checked
-+ .react-autoql-checkbox--switch__label::after {
-  content: 'on'; }
+.react-autoql-modal-header {
+  position: relative;
+  text-align: center;
+  flex: 0 0 52px;
+  border-bottom: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.05));
+  padding: 14px 60px;
+  font-size: 16px; }
 
-.react-autoql-checkbox--switch__input:checked::before {
-  right: 2px;
-  left: 18px;
-  top: 2px;
-  bottom: 2px; }
+.react-autoql-modal-footer {
+  position: relative;
+  flex: 0 0 52px;
+  border-top: 1px solid rgba(0, 0, 0, 0.05);
+  text-align: right;
+  padding: 8px 10px; }
 
-.react-autoql-checkbox-label {
-  padding-left: 6px;
-  line-height: 100%; }
+.react-autoql-modal-body {
+  display: flex;
+  flex-direction: column;
+  padding: 25px;
+  flex: 1;
+  overflow: hidden; }
+  .react-autoql-modal-body h3 {
+    color: var(--react-autoql-text-color-primary); }
 
-.react-autoql-modal-container
-.react-autoql-checkbox__input:not(.react-autoql-checkbox--switch__input),
-.react-autoql-drawer
-.react-autoql-checkbox__input:not(.react-autoql-checkbox--switch__input) {
-  border-color: var(--react-autoql-accent-color); }
+.react-autoql-modal-close-btn {
+  position: absolute !important;
+  top: 10px;
+  right: 18px;
+  font-size: 22px;
+  opacity: 0.6 !important;
+  cursor: pointer; }
 
-.react-autoql-modal-container
-.react-autoql-checkbox__input::before:not(.react-autoql-checkbox--switch__input),
-.react-autoql-drawer
-.react-autoql-checkbox__input::before:not(.react-autoql-checkbox--switch__input) {
-  background: var(--react-autoql-accent-color); }
+.react-autoql-modal-close-btn:hover {
+  opacity: 1 !important; }
 
 .chat-single-message-container {
   transition: background-color 0.2s ease;
@@ -3020,40 +2966,59 @@ span.react-autoql-icon {
     transform: scale(1);
     transform-origin: 0% 100%; } }
 
-.autoql-options-toolbar {
-  position: absolute;
-  background: inherit;
-  padding: 5px;
-  border-radius: 6px;
-  line-height: 28px;
-  background: var(--react-autoql-background-color-primary);
-  border: 1px solid var(--react-autoql-border-color); }
-  .autoql-options-toolbar.vertical .react-autoql-toolbar-btn {
-    display: block; }
-  .autoql-options-toolbar .react-autoql-toolbar-btn {
-    color: var(--react-autoql-text-color-primary); }
-
-.copy-sql-modal-content {
+.react-autoql-cascader {
   position: relative;
-  height: 60vh; }
-  .copy-sql-modal-content .copy-sql-formatted-text {
-    height: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  min-width: 300px; }
+  .react-autoql-cascader .options-container {
+    transition: max-width 0.3s ease;
+    display: inline-block;
+    vertical-align: top;
+    padding: 0 10px;
+    margin: 10px 0;
     width: 100%;
-    padding: 10px;
-    resize: none;
-    background: var(--react-autoql-background-color-secondary); }
-  .copy-sql-modal-content .copy-sql-btn {
-    color: var(--react-autoql-text-color);
-    background-color: var(--react-autoql-background-color-primary);
-    position: absolute;
-    top: 3px;
-    right: 0;
-    opacity: 0;
-    transition: opacity 0.3s ease; }
-  .copy-sql-modal-content .sql-copied {
-    color: var(--react-autoql-success-color) !important; }
-  .copy-sql-modal-content:hover .copy-sql-btn {
-    opacity: 1; }
+    max-width: calc(100% - 20px);
+    white-space: pre-wrap; }
+    .react-autoql-cascader .options-container.hidden {
+      max-width: 0; }
+      .react-autoql-cascader .options-container.hidden span {
+        white-space: nowrap; }
+      .react-autoql-cascader .options-container.hidden .option {
+        opacity: 0;
+        pointer-events: none; }
+    .react-autoql-cascader .options-container .options-title {
+      padding: 4px;
+      padding-left: 10px;
+      font-weight: 600; }
+    .react-autoql-cascader .options-container .cascader-back-arrow {
+      position: absolute;
+      cursor: pointer;
+      top: 15px;
+      left: 0; }
+      .react-autoql-cascader .options-container .cascader-back-arrow:hover {
+        opacity: 0.8; }
+    .react-autoql-cascader .options-container .option {
+      cursor: pointer;
+      padding: 4px;
+      display: flex;
+      justify-content: space-between;
+      border-radius: 2px;
+      padding-left: 10px; }
+      .react-autoql-cascader .options-container .option .option-arrow {
+        opacity: 0.7; }
+      .react-autoql-cascader .options-container .option .option-execute-icon {
+        opacity: 0;
+        color: #fff;
+        font-size: 16px;
+        vertical-align: middle; }
+      .react-autoql-cascader .options-container .option:hover, .react-autoql-cascader .options-container .option.active {
+        background-color: var(--react-autoql-accent-color, #26a7df);
+        color: #fff; }
+        .react-autoql-cascader .options-container .option:hover .option-execute-icon, .react-autoql-cascader .options-container .option.active .option-execute-icon {
+          opacity: 1; }
+    .react-autoql-cascader .options-container:not(:last-child) {
+      border-right: 1px solid #d3d3d352; }
 
 .query-tips-page-container {
   height: 100%;
@@ -3227,6 +3192,41 @@ span.react-autoql-icon {
   100% {
     opacity: 1; } }
 
+.autoql-options-toolbar {
+  position: absolute;
+  background: inherit;
+  padding: 5px;
+  border-radius: 6px;
+  line-height: 28px;
+  background: var(--react-autoql-background-color-primary);
+  border: 1px solid var(--react-autoql-border-color); }
+  .autoql-options-toolbar.vertical .react-autoql-toolbar-btn {
+    display: block; }
+  .autoql-options-toolbar .react-autoql-toolbar-btn {
+    color: var(--react-autoql-text-color-primary); }
+
+.copy-sql-modal-content {
+  position: relative;
+  height: 60vh; }
+  .copy-sql-modal-content .copy-sql-formatted-text {
+    height: 100%;
+    width: 100%;
+    padding: 10px;
+    resize: none;
+    background: var(--react-autoql-background-color-secondary); }
+  .copy-sql-modal-content .copy-sql-btn {
+    color: var(--react-autoql-text-color);
+    background-color: var(--react-autoql-background-color-primary);
+    position: absolute;
+    top: 3px;
+    right: 0;
+    opacity: 0;
+    transition: opacity 0.3s ease; }
+  .copy-sql-modal-content .sql-copied {
+    color: var(--react-autoql-success-color) !important; }
+  .copy-sql-modal-content:hover .copy-sql-btn {
+    opacity: 1; }
+
 .react-autoql-table-container {
   flex: 1;
   max-width: 100%;
@@ -3510,6 +3510,7 @@ span.react-autoql-icon {
   background: var(--react-autoql-background-color-primary);
   padding: 5px; }
 
+
 .viz-toolbar {
   position: absolute;
   background: inherit;
@@ -3541,7 +3542,6 @@ span.react-autoql-icon {
 .react-autoql-toolbar-btn:hover {
   opacity: 0.7; }
 
-
 .react-autoql-input-container {
   position: relative;
   margin: 2px 5px;
@@ -3865,44 +3865,6 @@ span.react-autoql-icon {
 
 
 
-.react-autoql-select {
-  border: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
-  border-radius: 4px;
-  background: var(--react-autoql-background-color-primary, white);
-  display: inline-block;
-  font-size: 13px;
-  line-height: 32px;
-  height: 34px;
-  margin: 0 3px;
-  padding: 0 11px;
-  color: var(--react-autoql-accent-color, #26a7df);
-  transition: all 0.2s ease;
-  cursor: pointer; }
-  .react-autoql-select:hover {
-    border-color: var(--react-autoql-accent-color, #26a7df); }
-
-.react-autoql-select-popup-container {
-  background: var(--react-autoql-background-color-primary, white);
-  padding: 10px 0;
-  max-height: 300px;
-  overflow-y: auto; }
-  .react-autoql-select-popup-container .react-autoql-select-option.active {
-    background: var(--react-autoql-hover-color, rgba(0, 0, 0, 0.04)); }
-  .react-autoql-select-popup-container .react-autoql-select-popup {
-    list-style-type: none;
-    width: 100%;
-    margin: 0;
-    padding: 0; }
-    .react-autoql-select-popup-container .react-autoql-select-popup li {
-      color: var(--react-autoql-text-color-primary);
-      width: 100%;
-      height: 35px;
-      line-height: 35px;
-      padding: 0 20px;
-      cursor: pointer; }
-      .react-autoql-select-popup-container .react-autoql-select-popup li:hover {
-        background: var(--react-autoql-hover-color, rgba(0, 0, 0, 0.04)); }
-
 .slack-modal-error-container,
 .slack-modal-empty-list-message {
   display: flex;
@@ -4048,6 +4010,44 @@ span.react-autoql-icon {
     .slack-channel-list-container .connect-channel-btn button {
       width: 200px; }
 
+.react-autoql-select {
+  border: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
+  border-radius: 4px;
+  background: var(--react-autoql-background-color-primary, white);
+  display: inline-block;
+  font-size: 13px;
+  line-height: 32px;
+  height: 34px;
+  margin: 0 3px;
+  padding: 0 11px;
+  color: var(--react-autoql-accent-color, #26a7df);
+  transition: all 0.2s ease;
+  cursor: pointer; }
+  .react-autoql-select:hover {
+    border-color: var(--react-autoql-accent-color, #26a7df); }
+
+.react-autoql-select-popup-container {
+  background: var(--react-autoql-background-color-primary, white);
+  padding: 10px 0;
+  max-height: 300px;
+  overflow-y: auto; }
+  .react-autoql-select-popup-container .react-autoql-select-option.active {
+    background: var(--react-autoql-hover-color, rgba(0, 0, 0, 0.04)); }
+  .react-autoql-select-popup-container .react-autoql-select-popup {
+    list-style-type: none;
+    width: 100%;
+    margin: 0;
+    padding: 0; }
+    .react-autoql-select-popup-container .react-autoql-select-popup li {
+      color: var(--react-autoql-text-color-primary);
+      width: 100%;
+      height: 35px;
+      line-height: 35px;
+      padding: 0 20px;
+      cursor: pointer; }
+      .react-autoql-select-popup-container .react-autoql-select-popup li:hover {
+        background: var(--react-autoql-hover-color, rgba(0, 0, 0, 0.04)); }
+
 .react-autoql-select-with-arrow div {
   color: inherit; }