amis-ui 6.2.2 → 6.3.0

package/lib/themes/cxd.css

@@ -3873,6 +3873,10 @@
   --inputTime-hover-bg-color: var(--colors-neutral-fill-10);
   --inputTime-active-color: var(--colors-neutral-text-2);
   --inputTime-active-bg-color: var(--colors-brand-10);
+  --signature-tool-height: 2.5rem;
+  --signature-tool-margin-top: 0.5rem;
+  --signature-placeholder-gap: 0.625rem;
+  --signature-placeholder-color: var(--colors-neutral-line-6);
   --steps-base-color: var(--colors-neutral-text-2);
   --steps-base-fontSize: var(--fonts-size-7);
   --steps-base-fontWeight: var(--fonts-weight-6);
@@ -5536,6 +5540,186 @@ div.CodeMirror-dragcursors {
 span.CodeMirror-selectedtext {
   background: none;
 }
+/*
+
+    Name:       Base16 Default Dark
+    Author:     Chris Kempson (http://chriskempson.com)
+
+    CodeMirror template by Jan T. Sott (https://github.com/idleberg/base16-codemirror)
+    Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16)
+
+*/
+.cm-s-base16-dark.CodeMirror {
+  background: #151515;
+  color: #e0e0e0;
+}
+.cm-s-base16-dark div.CodeMirror-selected {
+  background: #303030;
+}
+.cm-s-base16-dark .CodeMirror-line::-moz-selection, .cm-s-base16-dark .CodeMirror-line > span::-moz-selection, .cm-s-base16-dark .CodeMirror-line > span > span::-moz-selection {
+  background: rgba(48, 48, 48, 0.99);
+}
+.cm-s-base16-dark .CodeMirror-line::selection, .cm-s-base16-dark .CodeMirror-line > span::selection, .cm-s-base16-dark .CodeMirror-line > span > span::selection {
+  background: rgba(48, 48, 48, 0.99);
+}
+.cm-s-base16-dark .CodeMirror-line::-moz-selection, .cm-s-base16-dark .CodeMirror-line > span::-moz-selection, .cm-s-base16-dark .CodeMirror-line > span > span::-moz-selection {
+  background: rgba(48, 48, 48, 0.99);
+}
+.cm-s-base16-dark .CodeMirror-gutters {
+  background: #151515;
+  border-right: 0px;
+}
+.cm-s-base16-dark .CodeMirror-guttermarker {
+  color: #ac4142;
+}
+.cm-s-base16-dark .CodeMirror-guttermarker-subtle {
+  color: #505050;
+}
+.cm-s-base16-dark .CodeMirror-linenumber {
+  color: #505050;
+}
+.cm-s-base16-dark .CodeMirror-cursor {
+  border-left: 1px solid #b0b0b0;
+}
+.cm-s-base16-dark.cm-fat-cursor .CodeMirror-cursor {
+  background-color: rgba(142, 141, 136, 0.4588235294) !important;
+}
+.cm-s-base16-dark .cm-animate-fat-cursor {
+  background-color: rgba(142, 141, 136, 0.4588235294) !important;
+}
+.cm-s-base16-dark span.cm-comment {
+  color: #8f5536;
+}
+.cm-s-base16-dark span.cm-atom {
+  color: #aa759f;
+}
+.cm-s-base16-dark span.cm-number {
+  color: #aa759f;
+}
+.cm-s-base16-dark span.cm-property, .cm-s-base16-dark span.cm-attribute {
+  color: #90a959;
+}
+.cm-s-base16-dark span.cm-keyword {
+  color: #ac4142;
+}
+.cm-s-base16-dark span.cm-string {
+  color: #f4bf75;
+}
+.cm-s-base16-dark span.cm-variable {
+  color: #90a959;
+}
+.cm-s-base16-dark span.cm-variable-2 {
+  color: #6a9fb5;
+}
+.cm-s-base16-dark span.cm-def {
+  color: #d28445;
+}
+.cm-s-base16-dark span.cm-bracket {
+  color: #e0e0e0;
+}
+.cm-s-base16-dark span.cm-tag {
+  color: #ac4142;
+}
+.cm-s-base16-dark span.cm-link {
+  color: #aa759f;
+}
+.cm-s-base16-dark span.cm-error {
+  background: #ac4142;
+  color: #b0b0b0;
+}
+.cm-s-base16-dark .CodeMirror-activeline-background {
+  background: #202020;
+}
+.cm-s-base16-dark .CodeMirror-matchingbracket {
+  text-decoration: underline;
+  color: white !important;
+}
+/**
+    Name:       IDEA default theme
+    From IntelliJ IDEA by JetBrains
+ */
+.cm-s-idea span.cm-meta {
+  color: #808000;
+}
+.cm-s-idea span.cm-number {
+  color: #0000FF;
+}
+.cm-s-idea span.cm-keyword {
+  line-height: 1em;
+  font-weight: bold;
+  color: #000080;
+}
+.cm-s-idea span.cm-atom {
+  font-weight: bold;
+  color: #000080;
+}
+.cm-s-idea span.cm-def {
+  color: #000000;
+}
+.cm-s-idea span.cm-variable {
+  color: black;
+}
+.cm-s-idea span.cm-variable-2 {
+  color: black;
+}
+.cm-s-idea span.cm-variable-3, .cm-s-idea span.cm-type {
+  color: black;
+}
+.cm-s-idea span.cm-property {
+  color: black;
+}
+.cm-s-idea span.cm-operator {
+  color: black;
+}
+.cm-s-idea span.cm-comment {
+  color: #808080;
+}
+.cm-s-idea span.cm-string {
+  color: #008000;
+}
+.cm-s-idea span.cm-string-2 {
+  color: #008000;
+}
+.cm-s-idea span.cm-qualifier {
+  color: #555;
+}
+.cm-s-idea span.cm-error {
+  color: #FF0000;
+}
+.cm-s-idea span.cm-attribute {
+  color: #0000FF;
+}
+.cm-s-idea span.cm-tag {
+  color: #000080;
+}
+.cm-s-idea span.cm-link {
+  color: #0000FF;
+}
+.cm-s-idea .CodeMirror-activeline-background {
+  background: #FFFAE3;
+}
+.cm-s-idea span.cm-builtin {
+  color: #30a;
+}
+.cm-s-idea span.cm-bracket {
+  color: #cc7;
+}
+.cm-s-idea {
+  font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif;
+}
+.cm-s-idea .CodeMirror-matchingbracket {
+  outline: 1px solid grey;
+  color: black !important;
+}
+.CodeMirror-hints.idea {
+  font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
+  color: #616569;
+  background-color: #ebf3fd !important;
+}
+.CodeMirror-hints.idea .CodeMirror-hint-active {
+  background-color: #a2b8c9 !important;
+  color: #5c6065 !important;
+}
 /*!
  * froala_editor v3.1.0 (https://www.froala.com/wysiwyg-editor)
  * License https://froala.com/wysiwyg-editor/terms/
@@ -14265,6 +14449,437 @@ body.video-react-full-window .video-react-fullscreen {
 .cropper-disabled .cropper-point {
   cursor: not-allowed;
 }
+/* 默认 CSS 样式，目前主要是 Excel 使用 */
+.ov-excel {
+  /* 从 office 365 中复制的默认字体 */
+  font-family: "Aptos Narrow", "Segoe UI", "Segoe UI Web (West European)", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
+  display: flex;
+  flex-direction: column;
+  --bar-bg-color: #f5f5f5;
+  --bar-input-bg-color: #ffffff;
+  --active-sheet-color: #217346;
+}
+.excel-button {
+  height: 32px;
+  color: rgb(255, 255, 255);
+  padding: 0px 11px;
+  box-sizing: border-box;
+  border: 1px solid transparent;
+  display: inline-block;
+  text-decoration: none;
+  text-align: center;
+  cursor: pointer;
+  vertical-align: top;
+  border-radius: 2px;
+  font-size: 14px;
+  font-weight: 600;
+  position: relative;
+  margin-right: 4px;
+  width: 64px;
+}
+.excel-button-primary {
+  background-color: rgb(0, 120, 212);
+}
+/* Excel 工具栏，目前没编辑功能所以还没实现 */
+.ov-excel-toolbar {
+  height: 30px;
+  line-height: 30px;
+}
+.excel-checkbox-list-wrapper .excel-checkbox-list {
+  margin-top: 4px;
+}
+.excel-checkbox-container label {
+  cursor: pointer;
+  padding: 4px 0;
+  display: block;
+}
+.excel-checkbox-container label:hover {
+  background-color: #f6f6f6;
+}
+.excel-checkbox-container input {
+  vertical-align: middle;
+}
+.excel-checkbox-container span {
+  vertical-align: middle;
+}
+.excel-divider {
+  display: block;
+  height: 1px;
+  background-color: rgb(225, 223, 221);
+  margin: 2px 12px 2px;
+  color: rgb(200, 198, 196);
+  border-radius: 0.5px;
+}
+.excel-input {
+  display: inline-block;
+  box-sizing: border-box;
+  width: 100%;
+  border-radius: 4px;
+  padding: 4px 12px;
+  border: 1px solid rgb(209, 209, 209);
+}
+.excel-input-border-less {
+  display: block;
+  border: none;
+  width: 100%;
+  height: 100%;
+  padding: 0 2px;
+}
+.excel-input-border-less:focus {
+  outline: none;
+}
+.excel-select {
+  border-color: rgb(209, 209, 209);
+  border-radius: 4px;
+}
+/* Excel 公式栏 */
+.ov-excel-formula-bar {
+  height: 34px;
+  display: flex;
+  flex-direction: row;
+  background-color: var(--bar-bg-color);
+}
+.ov-excel-formula-bar__name-box {
+  text-align: center;
+  width: 64px;
+  margin: 4px 0 4px 4px;
+  padding: 0 4px;
+  line-height: 26px;
+  border: 1px solid #e1dfdd;
+  background-color: var(--bar-input-bg-color);
+}
+/* fx 按钮 */
+.ov-excel-formula-bar__function-button {
+  width: 30px;
+}
+/* fx 按钮右边的输入框 */
+.ov-excel-formula-bar__text-box {
+  margin: 4px;
+  line-height: 26px;
+  border: 1px solid #e1dfdd;
+  flex: 1;
+  padding: 0 4px;
+  background-color: var(--bar-input-bg-color);
+}
+/* Excel sheet 标签页 */
+.ov-excel-sheet-tab-bar {
+  height: 32px;
+  line-height: 32px;
+  display: flex;
+  flex-direction: row;
+  background-color: var(--bar-bg-color);
+}
+.ov-excel-sheet-tab-bar__nav {
+  display: flex;
+}
+.ov-excel-sheet-tab-bar__nav-icon {
+  height: 16px;
+  padding: 4px 4px;
+}
+.ov-excel-sheet-tab-bar__nav-icon svg {
+  height: 16px;
+  width: 16px;
+}
+.ov-excel-sheet-tab-bar__nav-icon svg path {
+  fill: #b1b1b1;
+}
+.ov-excel-sheet-tab-bar__nav-icon--enabled {
+  cursor: pointer;
+}
+.ov-excel-sheet-tab-bar__nav-icon--enabled svg path {
+  fill: #000000;
+}
+.ov-excel-sheet-tab-bar__menu {
+  position: relative;
+}
+.ov-excel-sheet-tab-bar__menu-icon {
+  cursor: pointer;
+  height: 16px;
+  padding: 4px 8px;
+}
+.ov-excel-sheet-tab-bar__menu-icon svg {
+  height: 16px;
+  width: 16px;
+}
+.ov-excel-sheet-tab-bar__menu-list {
+  background-color: #fff;
+  border-radius: 4px;
+  border: 1px solid rgb(199, 199, 199);
+  box-shadow: rgba(0, 0, 0, 0.133) 0px 3.2px 7.2px 0px, rgba(0, 0, 0, 0.11) 0px 0.6px 1.8px 0px;
+  display: none;
+  position: absolute;
+  bottom: 32px;
+  left: 0;
+  max-height: 400px;
+  overflow-x: hidden;
+  overflow-y: auto;
+  z-index: 15;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}
+.ov-excel-sheet-tab-bar__menu-list-item {
+  padding: 4px 8px;
+  cursor: pointer;
+  white-space: nowrap;
+}
+.ov-excel-sheet-tab-bar__menu-list-item:hover {
+  background-color: #e1dfdd;
+}
+.ov-excel-sheet-tab-bar__menu-list-item--active {
+  background-color: #e1dfdd;
+}
+.ov-excel-sheet-tab-bar__list-container {
+  position: relative;
+  overflow: hidden;
+  flex: 1 1 0;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}
+.ov-excel-sheet-tab-bar__list-container--enable-left-nav::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: 30px;
+  background-image: linear-gradient(to right, #dcdcdc, rgba(220, 220, 220, 0.1));
+}
+.ov-excel-sheet-tab-bar__list-container--enable-right-nav::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  width: 30px;
+  background-image: linear-gradient(to left, #dcdcdc, rgba(220, 220, 220, 0.1));
+}
+.ov-excel-sheet-tab-bar__list {
+  width: 0;
+  display: flex;
+  flex-direction: row;
+}
+.ov-excel-sheet-tab-bar__list-tab {
+  display: inline-block;
+  position: relative;
+  padding: 0 8px;
+  font-size: 14px;
+  margin: 4px 4px;
+  border-radius: 4px;
+  line-height: 24px;
+  white-space: nowrap;
+}
+.ov-excel-sheet-tab-bar__list-tab:hover {
+  cursor: pointer;
+  background-color: #e1dfdd;
+}
+.ov-excel-sheet-tab-bar__list-tab--active {
+  cursor: default;
+}
+.ov-excel-sheet-tab-bar__list-tab--active::before {
+  content: "";
+  position: absolute;
+  display: inline-block;
+  top: 0;
+  bottom: -4px;
+  left: 0;
+  right: 0;
+  color: transparent;
+  border-bottom: 3px solid var(--active-sheet-color);
+  padding-bottom: 5px;
+  width: calc(100% - 18px);
+  margin: auto;
+  transition: width 0.4s cubic-bezier(0.17, 0.17, 0, 1) 0s;
+}
+.ov-excel-sheet-tab-bar__status {
+  margin-left: 12px;
+  margin-right: 12px;
+}
+.ov-excel-sheet-tab-bar__status-text {
+  margin-right: 16px;
+}
+.ov-excel-sheet-tab-bar__zoom-level {
+  display: flex;
+  flex-direction: row;
+  padding: 0 8px;
+}
+.ov-excel-sheet-tab-bar__zoom-value {
+  margin: 0 8px;
+}
+.ov-excel-sheet-tab-bar__zoom-in,
+.ov-excel-sheet-tab-bar__zoom-out {
+  cursor: pointer;
+}
+/* Excel 内容区域，这个包含表头 */
+.ov-excel-content {
+  flex: 1;
+  position: relative;
+  overflow: hidden;
+  z-index: 1;
+}
+/** Excel 数据区域，不包含表头，目前这个区域主要是给 drawing 用 */
+.ov-excel-data {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  overflow: hidden;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  z-index: 2;
+}
+.ov-excel-canvas {
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+.ov-excel-scrollbar-y {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 3;
+}
+.ov-excel-scrollbar-x {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 3;
+}
+.ov-excel-scrollbar-content-x {
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+.ov-excel-scrollbar-content-y {
+  overflow-x: hidden;
+}
+/** 缩放的控制界面 */
+.ov-excel-resize-box {
+  position: absolute;
+  border: 1px solid #4af;
+  z-index: 3;
+}
+.ov-excel-resize-box-control {
+  position: absolute;
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  border: 2px solid #fff;
+  box-sizing: border-box;
+  background: #4af;
+  border: 2px solid #fff;
+  z-index: 5;
+}
+.ov-excel-auto-filter-icon-container {
+  position: absolute;
+}
+.ov-excel-auto-filter-icon {
+  cursor: pointer;
+  position: absolute;
+  right: 2px;
+  top: 2px;
+  bottom: 2px;
+  z-index: 3;
+}
+.ov-excel-auto-filter-icon svg {
+  width: 100%;
+  height: 100%;
+}
+.ov-excel-auto-filter-menu {
+  position: absolute;
+  display: none;
+  flex-direction: column;
+  right: -240px;
+  width: 240px;
+  height: 440px;
+  border-radius: 4px;
+  box-shadow: rgba(0, 0, 0, 0.133) 0px 3.2px 7.2px 0px, rgba(0, 0, 0, 0.11) 0px 0.6px 1.8px 0px;
+  z-index: 4;
+  background-color: white;
+}
+.excel-auto-filter__menu-sort {
+  display: flex;
+  flex-direction: row;
+  -moz-column-gap: 4px;
+       column-gap: 4px;
+  padding: 8px;
+}
+.ov-excel-auto-filter__sort-button {
+  cursor: pointer;
+  flex: 1;
+  display: flex;
+  flex-direction: row;
+  line-height: 24px;
+  height: 24px;
+  padding: 2px;
+}
+.ov-excel-auto-filter__sort-button-text {
+  flex: 1;
+}
+.ov-excel-auto-filter__sort-button-icon {
+  height: 24px;
+  width: 24px;
+}
+.ov-excel-auto-filter__sort-button-icon svg {
+  height: 100%;
+  width: 100%;
+}
+.ov-excel-auto-filter__sort-button:hover {
+  background-color: #f5f5f5;
+}
+.ov-excel-auto-filter__sort-button-active {
+  background-color: #f5f5f5;
+}
+.ov-excel-auto-filter__menu-filter-filters {
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+.ov-excel-auto-filter__menu-filter-filters .excel-checkbox-list-wrapper {
+  display: flex;
+  flex-grow: 1;
+  flex-direction: column;
+  padding: 8px;
+  min-height: 0;
+}
+.ov-excel-auto-filter__menu-filter-filters .excel-checkbox-list {
+  flex-grow: 1;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+.ov-excel-auto-filter-menu__custom-filters {
+  display: flex;
+  flex-direction: column;
+  padding: 8px;
+}
+/** 单个规则 */
+.ov-excel-auto-filter-menu__custom-filters-item-input {
+  display: flex;
+  flex-direction: row;
+  margin-bottom: 4px;
+}
+.ov-excel-auto-filter-menu__custom-filters-item-input > select {
+  margin-right: 4px;
+}
+.ov-excel-auto-filter-menu__custom-filters .excel-radio-wrapper {
+  margin: 4px 0;
+  text-align: center;
+}
+.excel-cell-editor {
+  position: absolute;
+}
+.excel-chart {
+  position: absolute;
+  z-index: 10;
+}
+.excel-pic {
+  position: absolute;
+  z-index: 10;
+  overflow: hidden;
+}
 /*!
  * https://github.com/arqex/react-datetime
  */
@@ -19403,7 +20018,12 @@ input[type=button].cxd-Button--block {
   padding: var(--Tabs-linkPadding);
   text-decoration: none;
   cursor: pointer;
-  display: block;
+  display: flex;
+  align-items: center;
+  max-width: 100%;
+  overflow: hidden;
+}
+.cxd-Tabs-links > .cxd-Tabs-link > a:first-child .cxd-Tabs-link-text {
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
@@ -22019,6 +22639,7 @@ input[type=button].cxd-Button--block {
 }
 .cxd-CBGroup-body-wrapper {
   flex: 1;
+  min-width: 0;
 }
 .cxd-CBGroup-body-collapse {
   text-align: center;
@@ -22040,6 +22661,7 @@ input[type=button].cxd-Button--block {
 }
 .cxd-CBGroup-body-wrapper {
   flex: 1;
+  min-width: 0;
 }
 .cxd-CBGroup-toolbar {
   display: flex;
@@ -22179,6 +22801,8 @@ input[type=button].cxd-Button--block {
   display: flex;
   flex-direction: row;
   align-items: center;
+  flex: 1;
+  min-width: 0;
 }
 .cxd-CBGroupOrItem-body-item > .cxd-CBGroupOrItem-dragbar {
   left: 0.625rem;
@@ -22253,11 +22877,22 @@ input[type=button].cxd-Button--block {
 .cxd-CBFunc-args > div {
   display: inline-block;
 }
+.cxd-CBItem {
+  display: flex;
+  flex: 1;
+  min-width: 0;
+  flex-wrap: wrap;
+}
+.cxd-CBItem > * {
+  flex-shrink: 0;
+}
 .cxd-CBValue {
   position: relative;
   display: inline-block;
   vertical-align: middle;
   margin: 0.1875rem;
+  flex: 1;
+  min-width: 6.25rem;
 }
 .cxd-CBFormula {
   position: relative;
@@ -22282,6 +22917,7 @@ input[type=button].cxd-Button--block {
   width: 20px;
   text-align: center;
   display: inline-block;
+  align-self: center;
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
@@ -22892,6 +23528,9 @@ input[type=button].cxd-Button--block {
 .cxd-Crud2-selection, .cxd-Crud2-toolbar, .cxd-Crud2-body {
   margin-bottom: var(--gap-base);
 }
+.cxd-Crud2 .cxd-Table-render-wrapper {
+  position: relative;
+}
 .cxd-Crud2-selectionLabel {
   display: inline-block;
   vertical-align: top;
@@ -23719,6 +24358,11 @@ input[type=button].cxd-Button--block {
 .cxd-Table-table > tbody > tr > td.cxd-Table-primayCell > .cxd-Spinner {
   vertical-align: middle;
 }
+.cxd-Table-table > thead > tr > th.cxd-Table-primayCell > [data-role=form-item],
+.cxd-Table-table > tbody > tr > td.cxd-Table-primayCell > [data-role=form-item] {
+  display: inline-block;
+  min-width: 10rem;
+}
 .cxd-Table.is-mobile .cxd-Table-table > tbody > tr:hover, .cxd-Table.is-mobile .cxd-Table-table > tbody > tr.is-hovered {
   background: var(--Table-bg);
   border-color: var(--Table-borderColor);
@@ -23786,7 +24430,7 @@ input[type=button].cxd-Button--block {
   min-width: 20rem;
   max-width: 40rem;
 }
-.cxd-TableCell-searchPopOver .cxd-Panel {
+.cxd-TableCell-searchPopOver > .cxd-Panel {
   margin: 0;
 }
 .cxd-TableCell-filterBtn {
@@ -27246,7 +27890,7 @@ input[type=button].cxd-Button--block {
   width: 1rem;
   height: 1rem;
 }
-.cxd-ImageGallery-title {
+.cxd-ImageGallery-title, .cxd-ImageGallery-caption {
   height: 1.125rem;
   vertical-align: top;
   line-height: 1.125rem;
@@ -27255,6 +27899,10 @@ input[type=button].cxd-Button--block {
   text-align: center;
   margin-bottom: 18px;
 }
+.cxd-ImageGallery-caption {
+  text-align: left;
+  margin-bottom: 4px;
+}
 .cxd-ImageGallery-main {
   background: #000;
   flex-basis: 0;
@@ -27714,6 +28362,7 @@ input[type=button].cxd-Button--block {
   border-color: var(--Form-input-onDisabled-borderColor);
 }
 .cxd-InputBox-clear {
+  visibility: hidden;
   padding: var(--Form-input-clearBtn-padding);
   cursor: pointer;
   display: flex;
@@ -27726,6 +28375,7 @@ input[type=button].cxd-Button--block {
   fill: var(--Form-input-clearBtn-color);
   width: var(--Form-input-clearBtn-size);
   height: var(--Form-input-clearBtn-size);
+  top: 0;
 }
 .cxd-InputBox-clear:hover svg {
   fill: var(--Form-input-clearBtn-color-onHover);
@@ -27733,6 +28383,9 @@ input[type=button].cxd-Button--block {
 .cxd-InputBox-clear:active svg {
   fill: var(--Form-input-clearBtn-color-onActive);
 }
+.cxd-InputBox.is-focused .cxd-InputBox-clear, .cxd-InputBox:hover .cxd-InputBox-clear {
+  visibility: visible;
+}
 .cxd-InputBox > svg {
   display: inline-block;
   width: 14px;
@@ -27798,6 +28451,7 @@ input[type=button].cxd-Button--block {
   min-width: 80px;
   max-width: 150px;
   flex: 1;
+  display: flex;
 }
 .cxd-JSONSchemaMember-key > span {
   display: flex;
@@ -27812,6 +28466,9 @@ input[type=button].cxd-Button--block {
   align-items: center;
   color: var(--Form-input-color);
 }
+.cxd-JSONSchemaMember-key > * {
+  flex: 1;
+}
 .cxd-JSONSchemaMember-key.is-mobile > span {
   border-radius: 0;
   border: none;
@@ -27973,10 +28630,14 @@ input[type=button].cxd-Button--block {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
-  gap: var(--gap-sm);
+  gap: var(--gap-xs);
+  font-size: var(--fonts-size-8);
   align-items: stretch;
   position: relative;
 }
+.cxd-SchemaEditorItem--mini > button {
+  padding: 0 4px;
+}
 .cxd-SchemaEditorItem + .cxd-SchemaEditorItem {
   margin-top: var(--gap-sm);
 }
@@ -27984,12 +28645,12 @@ input[type=button].cxd-Button--block {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
-  gap: var(--gap-sm);
+  gap: var(--gap-xs);
   align-items: flex-start;
   width: 100%;
 }
 .cxd-SchemaEditor-itemsLabel {
-  margin-top: calc((var(--Form-input-height) - var(--Switch-height)) / 2);
+  line-height: 2rem;
 }
 .cxd-SchemaEditor-caret {
   display: inline-block;
@@ -28023,6 +28684,56 @@ input[type=button].cxd-Button--block {
 .cxd-SchemaEditor-key > input, .cxd-SchemaEditor-title > input, .cxd-SchemaEditor-description > input {
   flex-basis: 0;
 }
+.cxd-SchemaEditor-info {
+  display: flex;
+  background: var(--Form-input-bg);
+  border: var(--Form-input-borderWidth) solid var(--Form-input-borderColor);
+  border-radius: var(--Form-input-borderRadius);
+  line-height: var(--Form-input-lineHeight);
+  padding: var(--Form-input-paddingY) var(--Form-input-paddingX);
+  font-size: var(--Form-input-fontSize);
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  flex: 1;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+}
+.cxd-SchemaEditor-info input {
+  flex-basis: 1.875rem;
+  flex-grow: 1;
+  outline: none;
+  background: transparent;
+  border: none;
+  color: var(--Form-input-color);
+  width: 100%;
+}
+.cxd-SchemaEditor-info input::-moz-placeholder {
+  color: var(--Form-input-placeholderColor);
+  -moz-user-select: none;
+       user-select: none;
+}
+.cxd-SchemaEditor-info input::placeholder {
+  color: var(--Form-input-placeholderColor);
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}
+.cxd-SchemaEditor-info:hover {
+  border-color: var(--Form-input-onFocused-borderColor);
+}
+.cxd-SchemaEditor-info--borderHalf {
+  border-left-color: transparent !important;
+  border-right-color: transparent !important;
+  border-top-color: transparent !important;
+}
+.cxd-SchemaEditor-info--borderNone {
+  border-color: transparent !important;
+}
+.cxd-SchemaEditor-typeLabel {
+  color: var(--Form-input-placeholderColor);
+}
 .cxd-ResultBox {
   display: flex;
   background: var(--Form-input-bg);
@@ -28180,6 +28891,7 @@ input[type=button].cxd-Button--block {
   fill: var(--Form-input-clearBtn-color);
   width: var(--Form-input-clearBtn-size);
   height: var(--Form-input-clearBtn-size);
+  top: 0;
 }
 .cxd-ResultBox-clear:hover svg {
   fill: var(--Form-input-clearBtn-color-onHover);
@@ -28324,6 +29036,7 @@ input[type=button].cxd-Button--block {
   fill: var(--Form-input-clearBtn-color);
   width: var(--Form-input-clearBtn-size);
   height: var(--Form-input-clearBtn-size);
+  top: 0;
 }
 .cxd-ResultBox.is-mobile .cxd-ResultBox-clear:hover svg {
   fill: var(--Form-input-clearBtn-color-onHover);
@@ -29795,6 +30508,7 @@ fieldset.cxd-Collapse .cxd-Collapse-header.is-mobile:hover {
   fill: var(--Form-input-clearBtn-color);
   width: var(--Form-input-clearBtn-size);
   height: var(--Form-input-clearBtn-size);
+  top: 0;
 }
 .cxd-TextControl-clear:hover svg {
   fill: var(--Form-input-clearBtn-color-onHover);
@@ -29812,9 +30526,6 @@ fieldset.cxd-Collapse .cxd-Collapse-header.is-mobile:hover {
     display: inline-flex;
   }
 }
-.cxd-TextControl .InputText-clear {
-  content: var(--input-clearable-icon);
-}
 .cxd-TextControl-clear {
   padding: 0 var(--Form-input-clearBtn-padding);
 }
@@ -30132,6 +30843,9 @@ fieldset.cxd-Collapse .cxd-Collapse-header.is-mobile:hover {
   width: var(--input-password-invisible-icon-size);
   height: var(--input-password-invisible-icon-size);
 }
+.InputText-clear.icon {
+  content: var(--input-clearable-icon);
+}
 input.cxd-TextControl-input-password {
   flex-basis: 0;
 }
@@ -30230,6 +30944,7 @@ input.cxd-TextControl-input-password {
   fill: var(--Form-input-clearBtn-color);
   width: var(--Form-input-clearBtn-size);
   height: var(--Form-input-clearBtn-size);
+  top: 0;
 }
 .cxd-TextareaControl-clear:hover svg {
   fill: var(--Form-input-clearBtn-color-onHover);
@@ -30318,6 +31033,7 @@ input.cxd-TextControl-input-password {
   fill: var(--Form-input-clearBtn-color);
   width: var(--Form-input-clearBtn-size);
   height: var(--Form-input-clearBtn-size);
+  top: 0;
 }
 .cxd-TextareaControl-clear:hover svg {
   fill: var(--Form-input-clearBtn-color-onHover);
@@ -32724,6 +33440,7 @@ input.cxd-TextControl-input-password {
   fill: var(--Form-input-clearBtn-color);
   width: var(--Form-input-clearBtn-size);
   height: var(--Form-input-clearBtn-size);
+  top: 0;
 }
 .cxd-LocationPicker-clear:hover svg {
   fill: var(--Form-input-clearBtn-color-onHover);
@@ -32914,6 +33631,7 @@ input.cxd-TextControl-input-password {
   fill: var(--Form-input-clearBtn-color);
   width: var(--Form-input-clearBtn-size);
   height: var(--Form-input-clearBtn-size);
+  top: 0;
 }
 .cxd-ColorPicker-clear:hover svg {
   fill: var(--Form-input-clearBtn-color-onHover);
@@ -33090,6 +33808,7 @@ input.cxd-TextControl-input-password {
   fill: var(--Form-input-clearBtn-color);
   width: var(--Form-input-clearBtn-size);
   height: var(--Form-input-clearBtn-size);
+  top: 0;
 }
 .cxd-DatePicker-toggler:hover svg {
   fill: var(--Form-input-clearBtn-color-onHover);
@@ -33122,6 +33841,7 @@ input.cxd-TextControl-input-password {
   fill: var(--Form-input-clearBtn-color);
   width: var(--Form-input-clearBtn-size);
   height: var(--Form-input-clearBtn-size);
+  top: 0;
 }
 .cxd-DatePicker-clear:hover svg {
   fill: var(--Form-input-clearBtn-color-onHover);
@@ -33868,6 +34588,7 @@ td.rdtQuarter.rdtDisabled:hover > span {
   fill: var(--Form-input-clearBtn-color);
   width: var(--Form-input-clearBtn-size);
   height: var(--Form-input-clearBtn-size);
+  top: 0;
 }
 .cxd-DateRangePicker-toggler:hover svg {
   fill: var(--Form-input-clearBtn-color-onHover);
@@ -33900,6 +34621,7 @@ td.rdtQuarter.rdtDisabled:hover > span {
   fill: var(--Form-input-clearBtn-color);
   width: var(--Form-input-clearBtn-size);
   height: var(--Form-input-clearBtn-size);
+  top: 0;
 }
 .cxd-DateRangePicker-clear:hover svg {
   fill: var(--Form-input-clearBtn-color-onHover);
@@ -35535,6 +36257,7 @@ td.rdtQuarter.rdtDisabled:hover > span {
   fill: var(--Form-input-clearBtn-color);
   width: var(--Form-input-clearBtn-size);
   height: var(--Form-input-clearBtn-size);
+  top: 0;
 }
 .cxd-TreeSelect-clear:hover svg {
   fill: var(--Form-input-clearBtn-color-onHover);
@@ -35933,6 +36656,7 @@ td.rdtQuarter.rdtDisabled:hover > span {
 }
 .cxd-ComboTabs-addLink > a svg {
   margin-right: var(--gap-xs);
+  top: 0;
 }
 .cxd-Combo-dragableTip {
   color: var(--text--muted-color);
@@ -36157,6 +36881,7 @@ td.rdtQuarter.rdtDisabled:hover > span {
   fill: var(--Form-input-clearBtn-color);
   width: var(--Form-input-clearBtn-size);
   height: var(--Form-input-clearBtn-size);
+  top: 0;
 }
 .cxd-Picker-clear:hover svg {
   fill: var(--Form-input-clearBtn-color-onHover);
@@ -36325,6 +37050,7 @@ td.rdtQuarter.rdtDisabled:hover > span {
   fill: var(--Form-input-clearBtn-color);
   width: var(--Form-input-clearBtn-size);
   height: var(--Form-input-clearBtn-size);
+  top: 0;
 }
 .cxd-Picker-clear:hover svg {
   fill: var(--Form-input-clearBtn-color-onHover);
@@ -36560,15 +37286,18 @@ td.rdtQuarter.rdtDisabled:hover > span {
   border-color: var(--Form-input-onError-borderColor);
   background: var(--Form-input-onError-bg);
 }
-.cxd-TagControl-popover.cxd-PopOver--leftBottomLeftTop > .cxd-ListMenu {
+.cxd-TagControl-popover.cxd-PopOver--leftBottomLeftTop > .cxd-ListMenu,
+.cxd-ListMenu-popover.cxd-PopOver--leftBottomLeftTop > .cxd-ListMenu {
   border-top-left-radius: 0;
   border-top-right-radius: 0;
 }
-.cxd-TagControl-popover.cxd-PopOver--leftTopLeftBottom > .cxd-ListMenu {
+.cxd-TagControl-popover.cxd-PopOver--leftTopLeftBottom > .cxd-ListMenu,
+.cxd-ListMenu-popover.cxd-PopOver--leftTopLeftBottom > .cxd-ListMenu {
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
 }
-.cxd-TagControl-popover .cxd-ListMenu {
+.cxd-TagControl-popover .cxd-ListMenu,
+.cxd-ListMenu-popover .cxd-ListMenu {
   padding: 0.25rem 0;
   max-height: var(--inputTag-popover-maxHeight);
   overflow: auto;
@@ -36576,7 +37305,8 @@ td.rdtQuarter.rdtDisabled:hover > span {
      -moz-user-select: none;
           user-select: none;
 }
-.cxd-TagControl-popover .cxd-ListMenu-item {
+.cxd-TagControl-popover .cxd-ListMenu-item,
+.cxd-ListMenu-popover .cxd-ListMenu-item {
   height: var(--inputTag-option-height);
   color: var(--inputTag-option-color);
   font-size: var(--inputTag-option-fontSize);
@@ -36585,7 +37315,8 @@ td.rdtQuarter.rdtDisabled:hover > span {
   padding: var(--inputTag-option-paddingTop) var(--inputTag-option-paddingRight) var(--inputTag-option-paddingBottom) var(--inputTag-option-paddingLeft);
   background: var(--inputTag-option-bg-color);
 }
-.cxd-TagControl-popover .cxd-ListMenu-item:hover {
+.cxd-TagControl-popover .cxd-ListMenu-item:hover,
+.cxd-ListMenu-popover .cxd-ListMenu-item:hover {
   color: var(--inputTag-option-hover-color);
   background: var(--inputTag-option-hover-bg-color);
 }
@@ -37443,6 +38174,7 @@ td.rdtQuarter.rdtDisabled:hover > span {
   fill: var(--Form-input-clearBtn-color);
   width: var(--Form-input-clearBtn-size);
   height: var(--Form-input-clearBtn-size);
+  top: 0;
 }
 .cxd-IconPickerControl-clear:hover svg {
   fill: var(--Form-input-clearBtn-color-onHover);
@@ -37648,6 +38380,7 @@ td.rdtQuarter.rdtDisabled:hover > span {
   fill: var(--Form-input-clearBtn-color);
   width: var(--Form-input-clearBtn-size);
   height: var(--Form-input-clearBtn-size);
+  top: 0;
 }
 .cxd-IconSelectControl-clear:hover svg {
   fill: var(--Form-input-clearBtn-color-onHover);
@@ -38554,6 +39287,14 @@ td.rdtQuarter.rdtDisabled:hover > span {
     display: none;
   }
 }
+.cxd-Autofill-popOver {
+  border: none;
+  min-width: 20rem;
+  max-width: 40rem;
+}
+.cxd-Autofill-popOver > .cxd-Panel {
+  margin: 0;
+}
 .cxd-UserSelect {
   position: relative;
 }
@@ -39462,6 +40203,7 @@ td.rdtQuarter.rdtDisabled:hover > span {
   overflow: visible;
   max-width: 100%;
   box-sizing: content-box;
+  min-height: 28.125rem;
   /* 变量列表 */
   /* 函数列表 */
 }
@@ -39469,8 +40211,55 @@ td.rdtQuarter.rdtDisabled:hover > span {
   flex: 1;
   height: 100%;
   max-width: 33.125rem;
+  min-width: 0;
   border-top: var(--Form-input-borderWidth) solid var(--Form-input-borderColor);
   border-bottom: var(--Form-input-borderWidth) solid var(--Form-input-borderColor);
+  display: flex;
+  flex-direction: column;
+}
+.cxd-FormulaEditor-runPanel {
+  height: 12.5rem;
+  transition: height 0.1s ease-out;
+  border-top: 1px solid var(--Form-input-borderColor);
+  display: flex;
+  flex-wrap: nowrap;
+  flex-direction: row;
+}
+.cxd-FormulaEditor-runPanel.in {
+  height: 0;
+  overflow: hidden;
+}
+.cxd-FormulaEditor-runPanel-context, .cxd-FormulaEditor-runPanel-result {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+.cxd-FormulaEditor-runPanel-context > header, .cxd-FormulaEditor-runPanel-result > header {
+  width: 100%;
+  height: 1.875rem;
+  line-height: 1.875rem;
+  padding: 0 0.625rem;
+  box-sizing: border-box;
+  background: var(--InputFormula-header-bgColor);
+  border-radius: var(--borderRadius) var(--borderRadius) 0 0;
+  border-bottom: none;
+  font-weight: 500;
+  margin: 0;
+}
+.cxd-FormulaEditor-runPanel-context > div, .cxd-FormulaEditor-runPanel-result > div {
+  flex: 1;
+  min-height: 0;
+  font-size: 12px;
+}
+.cxd-FormulaEditor-runPanel-context {
+  border-right: 1px solid var(--Form-input-borderColor);
+}
+.cxd-FormulaEditor-runPanel-result > div {
+  padding: 0 0.625rem;
+}
+.cxd-FormulaEditor-runPanel-result.is-error {
+  color: var(--Form-input-onError-borderColor);
 }
 .cxd-FormulaEditor-header {
   width: 100%;
@@ -39491,8 +40280,8 @@ td.rdtQuarter.rdtDisabled:hover > span {
   margin-right: 5px;
 }
 .cxd-FormulaEditor-editor {
-  min-height: 12.5rem;
-  height: calc(100% - 35px);
+  flex: 1;
+  min-height: 0;
   padding: 0.3125rem;
   padding-right: 0;
 }
@@ -39851,24 +40640,6 @@ td.rdtQuarter.rdtDisabled:hover > span {
   overflow: hidden;
   background: var(--InputFormula-code-bgColor);
 }
-.cxd-FormulaEditor .cm-field,
-.cxd-FormulaEditor .cm-func {
-  border-radius: 3px;
-  color: #fff;
-  margin: 0 1px;
-  padding: 0 2px;
-}
-.cxd-FormulaEditor .cm-field {
-  padding: 2px 5px;
-}
-.cxd-FormulaEditor .cm-field {
-  background: #007bff;
-}
-.cxd-FormulaEditor .cm-func {
-  color: #ae4597;
-  font-weight: bold;
-  line-height: 14px;
-}
 .cxd-FormulaPicker {
   display: flex;
   flex-flow: row nowrap;
@@ -39885,8 +40656,9 @@ td.rdtQuarter.rdtDisabled:hover > span {
 }
 .cxd-FormulaPicker-input {
   flex: 1;
+  min-width: 0;
   margin-right: 0.625rem;
-  padding-right: 0;
+  padding-right: 0.25rem;
   max-width: calc(100% - 2.625rem);
 }
 .cxd-FormulaPicker-action {
@@ -39932,7 +40704,7 @@ td.rdtQuarter.rdtDisabled:hover > span {
   height: var(--Form-input-height);
 }
 .cxd-FormulaPicker.is-input-group.cxd-FormulaPicker--text {
-  padding: var(--Form-input-paddingY) var(--Form-input-paddingX);
+  padding: var(--Form-input-paddingY) var(--Form-input-paddingX) var(--Form-input-paddingY) 0.3125rem;
 }
 .cxd-FormulaPicker.is-input-group .cxd-FormulaPicker-input {
   display: flex;
@@ -39949,13 +40721,27 @@ td.rdtQuarter.rdtDisabled:hover > span {
   outline: none;
   box-sizing: none;
 }
-.cxd-FormulaPicker.is-input-group .cxd-FormulaPicker-input-number, .cxd-FormulaPicker.is-input-group .cxd-FormulaPicker-input-select, .cxd-FormulaPicker.is-input-group .cxd-FormulaPicker-input-boolean, .cxd-FormulaPicker.is-input-group .cxd-FormulaPicker-input-date, .cxd-FormulaPicker.is-input-group .cxd-FormulaPicker-input-time, .cxd-FormulaPicker.is-input-group .cxd-FormulaPicker-input-datetime {
+.cxd-FormulaPicker.is-input-group .cxd-FormulaPicker-input-select, .cxd-FormulaPicker.is-input-group .cxd-FormulaPicker-input-number, .cxd-FormulaPicker.is-input-group .cxd-FormulaPicker-input-boolean, .cxd-FormulaPicker.is-input-group .cxd-FormulaPicker-input-date, .cxd-FormulaPicker.is-input-group .cxd-FormulaPicker-input-time, .cxd-FormulaPicker.is-input-group .cxd-FormulaPicker-input-datetime {
   height: var(--InputFormula-input-schema-height);
   padding-left: var(--Form-input-paddingX);
 }
+.cxd-FormulaPicker.is-input-group .cxd-FormulaPicker-input-number {
+  padding-left: 0;
+}
 .cxd-FormulaPicker.is-input-group .cxd-FormulaPicker-input-number .cxd-Number-handler-wrap {
   height: unset; /* 避免调节器超出Input框 */
 }
+.cxd-FormulaPicker.is-input-group .cxd-FormulaPicker-input-custom {
+  border: 0;
+  flex: 1;
+  min-width: 0;
+}
+.cxd-FormulaPicker.is-input-group .cxd-FormulaPicker-input-custom > div {
+  border: 0;
+  padding: 0 0 0 var(--Form-input-paddingX);
+  align-items: center;
+  height: var(--InputFormula-input-schema-height);
+}
 .cxd-FormulaPicker.is-input-group .cxd-FormulaPicker-input-variable {
   border: none;
   min-height: unset;
@@ -39976,6 +40762,60 @@ td.rdtQuarter.rdtDisabled:hover > span {
   cursor: pointer;
   color: var(--colors-brand-5);
 }
+.cxd-FormulaCodeEditor .cm-field,
+.cxd-FormulaCodeEditor .cm-func {
+  border-radius: 3px;
+  color: #fff;
+}
+.cxd-FormulaCodeEditor .cm-field {
+  padding: 2px 5px;
+}
+.cxd-FormulaCodeEditor .cm-field {
+  background: #007bff;
+}
+.cxd-FormulaCodeEditor .cm-func {
+  color: #ae4597;
+  font-weight: bold;
+  line-height: 14px;
+}
+.cxd-FormulaCodeEditor .cm-error-token {
+  background-position: left bottom;
+  background-repeat: repeat-x;
+  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAYAAAC09K7GAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9sJDw4cOCW1/KIAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAHElEQVQI12NggIL/DAz/GdA5/xkY/qPKMDAwAADLZwf5rvm+LQAAAABJRU5ErkJggg==);
+}
+.cxd-FormulaCodeEditor .CodeMirror-placeholder {
+  color: var(--Form-input-placeholderColor) !important;
+}
+.cxd-FormulaCodeEditor .lint-error {
+  color: var(--Form-input-onError-borderColor);
+}
+.cxd-FormulaCodeEditor--singleLine {
+  max-width: 100%;
+}
+.cxd-FormulaCodeEditor--singleLine > .CodeMirror {
+  height: 21px;
+}
+.cxd-FormulaCodeEditor--singleLine > .CodeMirror .CodeMirror-hscrollbar,
+.cxd-FormulaCodeEditor--singleLine > .CodeMirror .CodeMirror-vscrollbar {
+  display: none !important;
+}
+.cxd-FormulaCodeEditor--singleLine > .CodeMirror .CodeMirror-sizer {
+  min-height: 21px !important;
+  border-right-width: 0 !important;
+}
+.cxd-FormulaCodeEditor--singleLine > .CodeMirror .CodeMirror-scroll {
+  height: 21px;
+  margin: 0;
+  padding: 0;
+  overflow: hidden !important;
+}
+.cxd-FormulaCodeEditor--singleLine > .CodeMirror .CodeMirror-lines {
+  padding: 0;
+}
+.cxd-InputBox > .cxd-FormulaCodeEditor {
+  flex: 1;
+  min-width: 0;
+}
 .cxd-Timeline-vertical {
   display: flex;
   flex-flow: column;
@@ -41325,6 +42165,140 @@ td.rdtQuarter.rdtDisabled:hover > span {
   overflow: hidden;
   white-space: nowrap;
 }
+.cxd-PdfViewer {
+  position: relative;
+  width: 100%;
+  min-width: 300px;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  padding: 50px 0;
+}
+.cxd-PdfViewer-Content {
+  width: -moz-max-content;
+  width: max-content;
+  max-width: 100%;
+}
+.cxd-PdfViewer-Content.is-loaded {
+  box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 4px 0px;
+}
+.cxd-PdfViewer-Loading {
+  width: 100%;
+  text-align: center;
+}
+.cxd-PdfViewer-Tool {
+  position: absolute;
+  z-index: 10;
+  padding: 5px 15px;
+  bottom: 60px;
+  background-color: #444444;
+  border-radius: 10px;
+  color: #fff;
+  text-align: center;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}
+.cxd-PdfViewer-Tool .gap {
+  margin: 0 4px;
+}
+.cxd-PdfViewer-Tool .icon {
+  cursor: pointer;
+  width: 20px;
+  margin: 0 10px;
+}
+.cxd-PdfViewer-Tool .icon:hover {
+  color: var(--colors-brand-5);
+}
+.cxd-PdfViewer-Tool .page-input {
+  width: 40px;
+}
+.cxd-Signature {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+.cxd-Signature-canvas {
+  border: 1px dashed #aaa;
+}
+.cxd-Signature-Tool {
+  height: var(--signature-tool-height);
+  margin-top: var(--signature-tool-margin-top);
+}
+.cxd-Signature-Tool .actions {
+  display: flex;
+  justify-content: space-between;
+}
+.cxd-Signature-Tool .actions .left-actions button {
+  margin-right: 5px;
+}
+.cxd-Signature-Tool .actions .right-actions button {
+  margin-left: 5px;
+}
+.cxd-Signature-placeholder {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: var(--signature-tool-height);
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: var(--signature-placeholder-gap);
+  color: var(--signature-placeholder-color);
+}
+.cxd-Signature-Embed {
+  display: flex;
+  gap: 10px;
+}
+.cxd-Signature-Embed-Preview {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  margin-left: 10px;
+  height: 30px;
+  margin: 1px;
+  padding: 2px;
+  border: 1px dashed #aaa;
+}
+.cxd-Signature-Embed-Preview .preview-close {
+  cursor: pointer;
+  font-size: 14px;
+  color: #aaa;
+}
+.cxd-Signature-Embed-Preview .preview-close:hover {
+  color: #000;
+}
+.cxd-Signature-Embed-Preview img {
+  height: 24px;
+}
+.cxd-Signature-Embed-Body {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.cxd-Signature.is-fullScreen, .cxd-Signature-Embed-Body.is-fullScreen {
+  flex-direction: row-reverse;
+  justify-content: space-between;
+  align-items: stretch;
+}
+.cxd-Signature.is-fullScreen .cxd-Signature-Tool, .cxd-Signature-Embed-Body.is-fullScreen .cxd-Signature-Tool {
+  width: calc(var(--signature-tool-height) - var(--signature-tool-margin-top));
+  height: auto;
+  margin-top: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.cxd-Signature.is-fullScreen .cxd-Signature-Tool .actions, .cxd-Signature-Embed-Body.is-fullScreen .cxd-Signature-Tool .actions {
+  white-space: nowrap;
+  transform: rotate(90deg);
+}
 @media print {
   .pe-no-print {
     display: none !important;