x-next 1.10.0 → 1.11.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (182) hide show
  1. package/AI_CODING.md +97 -0
  2. package/AI_USAGE/catalog.md +111 -0
  3. package/AI_USAGE/components/alert.md +33 -0
  4. package/AI_USAGE/components/bar-chart.md +46 -0
  5. package/AI_USAGE/components/button.md +35 -0
  6. package/AI_USAGE/components/checkbox.md +34 -0
  7. package/AI_USAGE/components/color-picker.md +36 -0
  8. package/AI_USAGE/components/config-provider.md +58 -0
  9. package/AI_USAGE/components/date-picker.md +34 -0
  10. package/AI_USAGE/components/dialog.md +37 -0
  11. package/AI_USAGE/components/dropdown.md +38 -0
  12. package/AI_USAGE/components/empty.md +30 -0
  13. package/AI_USAGE/components/input.md +32 -0
  14. package/AI_USAGE/components/line-chart.md +45 -0
  15. package/AI_USAGE/components/message-box.md +39 -0
  16. package/AI_USAGE/components/message.md +36 -0
  17. package/AI_USAGE/components/notification.md +37 -0
  18. package/AI_USAGE/components/pagination.md +32 -0
  19. package/AI_USAGE/components/pie-chart.md +55 -0
  20. package/AI_USAGE/components/popconfirm.md +33 -0
  21. package/AI_USAGE/components/popover.md +35 -0
  22. package/AI_USAGE/components/progress.md +32 -0
  23. package/AI_USAGE/components/radio.md +35 -0
  24. package/AI_USAGE/components/rate.md +30 -0
  25. package/AI_USAGE/components/select.md +38 -0
  26. package/AI_USAGE/components/slider.md +34 -0
  27. package/AI_USAGE/components/steps.md +33 -0
  28. package/AI_USAGE/components/switch.md +32 -0
  29. package/AI_USAGE/components/tabs.md +33 -0
  30. package/AI_USAGE/components/textarea.md +31 -0
  31. package/AI_USAGE/components/time-picker.md +34 -0
  32. package/AI_USAGE/components/upload.md +60 -0
  33. package/AI_USAGE/core.md +37 -0
  34. package/AI_USAGE/index.md +52 -0
  35. package/AI_USAGE/recipes/form-on-demand.md +42 -0
  36. package/AI_USAGE.md +173 -46
  37. package/CHANGELOG.md +36 -1
  38. package/README.md +15 -2
  39. package/dist/_container/resize-trigger.vue.d.ts +1 -1
  40. package/dist/_hooks/use-dialog-focus.d.ts +7 -0
  41. package/dist/_hooks/use-pointer-drag.d.ts +6 -0
  42. package/dist/_hooks/use-popup-close.d.ts +11 -0
  43. package/dist/_hooks/use-popup-theme.d.ts +5 -0
  44. package/dist/_utils/palette.d.ts +2 -0
  45. package/dist/components/_components/picker/input-range.vue.d.ts +1 -3
  46. package/dist/components/_components/picker/input.vue.d.ts +1 -3
  47. package/dist/components/_components/select-view/select-view.d.ts +9 -0
  48. package/dist/components/alert/Alert.vue.d.ts +1 -1
  49. package/dist/components/alert/index.d.ts +3 -3
  50. package/dist/components/bar-chart/BarChart.d.ts +3 -3
  51. package/dist/components/bar-chart/index.d.ts +9 -9
  52. package/dist/components/color-picker/ColorPicker.d.ts +2 -1
  53. package/dist/components/color-picker/index.d.ts +2 -0
  54. package/dist/components/color-picker/panel.d.ts +6 -0
  55. package/dist/components/config-provider/context.d.ts +7 -1
  56. package/dist/components/date-picker/DatePicker.vue.d.ts +9 -12
  57. package/dist/components/date-picker/index.d.ts +19 -27
  58. package/dist/components/drawer/index.d.ts +51 -9
  59. package/dist/components/drawer/src/Drawer.vue.d.ts +19 -4
  60. package/dist/components/dropdown/Dropdown.vue.d.ts +6 -3
  61. package/dist/components/dropdown/DropdownButton.vue.d.ts +6 -3
  62. package/dist/components/dropdown/DropdownSubmenu.vue.d.ts +6 -3
  63. package/dist/components/dropdown/dropdown-panel.vue.d.ts +6 -3
  64. package/dist/components/dropdown/index.d.ts +36 -18
  65. package/dist/components/form-select/Select.d.ts +18 -5
  66. package/dist/components/form-select/SelectDropdown.vue.d.ts +6 -3
  67. package/dist/components/form-select/SelectOption.vue.d.ts +1 -0
  68. package/dist/components/form-select/SelectOptionGroup.vue.d.ts +1 -0
  69. package/dist/components/form-select/hooks/use-options.d.ts +1 -1
  70. package/dist/components/form-select/hooks/use-select.d.ts +1 -1
  71. package/dist/components/form-select/index.d.ts +57 -17
  72. package/dist/components/form-select/interface.d.ts +8 -0
  73. package/dist/components/form-slider/Slider.vue.d.ts +1 -1
  74. package/dist/components/form-slider/index.d.ts +3 -3
  75. package/dist/components/form-textarea/Textarea.vue.d.ts +2 -4
  76. package/dist/components/form-textarea/index.d.ts +6 -12
  77. package/dist/components/image/Image.vue.d.ts +2 -4
  78. package/dist/components/image/index.d.ts +6 -12
  79. package/dist/components/layout/LayoutSidebar.vue.d.ts +5 -5
  80. package/dist/components/layout/index.d.ts +10 -10
  81. package/dist/components/line-chart/LineChart.d.ts +3 -3
  82. package/dist/components/line-chart/index.d.ts +9 -9
  83. package/dist/components/menu/Menu.d.ts +6 -3
  84. package/dist/components/menu/base-menu.vue.d.ts +6 -3
  85. package/dist/components/menu/index.d.ts +12 -6
  86. package/dist/components/menu/sub-menu-pop.vue.d.ts +6 -3
  87. package/dist/components/network/Network.vue.d.ts +1 -1
  88. package/dist/components/network/index.d.ts +3 -3
  89. package/dist/components/pagination/page-options.vue.d.ts +60 -32
  90. package/dist/components/pie-chart/PieChart.d.ts +1 -1
  91. package/dist/components/pie-chart/index.d.ts +3 -3
  92. package/dist/components/resize-box/ResizeBox.vue.d.ts +2 -2
  93. package/dist/components/resize-box/index.d.ts +5 -5
  94. package/dist/components/scrollbar-v2/Scrollbar.vue.d.ts +2 -1
  95. package/dist/components/scrollbar-v2/index.d.ts +6 -3
  96. package/dist/components/table/Table.d.ts +1 -1
  97. package/dist/components/table/index.d.ts +3 -3
  98. package/dist/components/tabs/Tabs.d.ts +1 -1
  99. package/dist/components/tabs/index.d.ts +3 -3
  100. package/dist/components/time-picker/TimeColumn.vue.d.ts +6 -3
  101. package/dist/components/time-picker/TimePanel.vue.d.ts +6 -3
  102. package/dist/components/time-picker/TimePicker.vue.d.ts +9 -12
  103. package/dist/components/time-picker/index.d.ts +19 -27
  104. package/dist/components/trend-chart/components/TrendChart.d.ts +5 -5
  105. package/dist/components/trend-chart/components/trend-chart-curve.d.ts +1 -1
  106. package/dist/components/trend-chart/index.d.ts +14 -14
  107. package/dist/components/trigger/interface.d.ts +2 -0
  108. package/dist/components/virtual-list-v2/virtual-list.vue.d.ts +7 -4
  109. package/dist/es/_hooks/use-dialog-focus.js +69 -0
  110. package/dist/es/_hooks/use-pointer-drag.js +18 -0
  111. package/dist/es/_hooks/use-popup-close.js +27 -0
  112. package/dist/es/_hooks/use-popup-manager.js +26 -24
  113. package/dist/es/_hooks/use-popup-theme.js +18 -0
  114. package/dist/es/_hooks/use-teleport-container.js +9 -10
  115. package/dist/es/_utils/palette.js +57 -52
  116. package/dist/es/components/_components/select-view/select-view.js +89 -78
  117. package/dist/es/components/button/Button.js +1 -1
  118. package/dist/es/components/color-picker/ColorPicker.js +131 -102
  119. package/dist/es/components/color-picker/gradient-slider.js +38 -40
  120. package/dist/es/components/color-picker/panel.js +221 -192
  121. package/dist/es/components/color-picker/sv-panel.js +51 -50
  122. package/dist/es/components/config-provider/ConfigProvider.js +58 -41
  123. package/dist/es/components/dialog/Dialog.js +133 -186
  124. package/dist/es/components/drawer/src/Drawer.vue.js +59 -51
  125. package/dist/es/components/drawer/src/Drawer.vue2.js +117 -107
  126. package/dist/es/components/form/FormItem.vue.js +12 -12
  127. package/dist/es/components/form-input-tag/InputTag.js +1 -1
  128. package/dist/es/components/form-select/Select.js +348 -300
  129. package/dist/es/components/form-select/SelectDropdown.vue.js +7 -7
  130. package/dist/es/components/form-select/SelectOption.vue.js +22 -17
  131. package/dist/es/components/form-select/SelectOption.vue2.js +59 -51
  132. package/dist/es/components/form-select/SelectOptionGroup.vue.js +17 -13
  133. package/dist/es/components/form-select/SelectOptionGroup.vue2.js +8 -5
  134. package/dist/es/components/form-select/hooks/use-options.js +40 -40
  135. package/dist/es/components/form-select/hooks/use-select.js +76 -71
  136. package/dist/es/components/form-switch/Switch.vue.js +24 -24
  137. package/dist/es/components/image/Image.vue.js +12 -12
  138. package/dist/es/components/link/Link.vue.js +6 -6
  139. package/dist/es/components/menu/sub-menu-inline.vue.js +11 -11
  140. package/dist/es/components/menu/sub-menu-pop.vue.js +12 -12
  141. package/dist/es/components/notification/Notification.js +59 -59
  142. package/dist/es/components/resize-box/ResizeBox.vue.js +19 -22
  143. package/dist/es/components/skeleton/Skeleton.vue.js +9 -9
  144. package/dist/es/components/tag/Tag.vue.js +7 -7
  145. package/dist/es/components/trigger/Trigger.js +171 -163
  146. package/dist/es/style.css +1 -1
  147. package/dist/index.cjs +3 -3
  148. package/dist/index.umd.js +3 -3
  149. package/dist/style/bar-chart.js +1 -0
  150. package/dist/style/base.css +1 -1
  151. package/dist/style/button.css +1 -1
  152. package/dist/style/color-picker.css +1 -1
  153. package/dist/style/color-picker.js +4 -0
  154. package/dist/style/date-picker.js +4 -0
  155. package/dist/style/dependencies.json +296 -0
  156. package/dist/style/dialog.js +2 -0
  157. package/dist/style/drawer.js +3 -0
  158. package/dist/style/dropdown.js +5 -0
  159. package/dist/style/form-checkbox.css +1 -1
  160. package/dist/style/form-input-number.js +2 -0
  161. package/dist/style/form-input.css +1 -1
  162. package/dist/style/form-input.js +1 -0
  163. package/dist/style/form-select.js +5 -0
  164. package/dist/style/form-slider.js +5 -0
  165. package/dist/style/form.js +3 -0
  166. package/dist/style/heatmap.js +1 -0
  167. package/dist/style/image.js +2 -0
  168. package/dist/style/layout.js +1 -0
  169. package/dist/style/line-chart.js +1 -0
  170. package/dist/style/menu.js +3 -0
  171. package/dist/style/message-box.js +3 -0
  172. package/dist/style/pagination.js +9 -0
  173. package/dist/style/pie-chart.js +1 -0
  174. package/dist/style/popconfirm.js +3 -0
  175. package/dist/style/popover.js +1 -0
  176. package/dist/style/popup.js +2 -0
  177. package/dist/style/table.js +12 -0
  178. package/dist/style/time-picker.js +3 -0
  179. package/dist/style/tooltip.js +1 -0
  180. package/dist/style/upload.js +4 -0
  181. package/dist/style.css +1 -1
  182. package/package.json +17 -7
package/dist/style/button.css CHANGED
@@ -1 +1 @@
1
- :root{--x-button-color-bg-default: var(--x-color-fill-2);--x-button-color-bg-default-hover: var(--x-color-neutral-3);--x-button-color-bg-default-active: var(--x-color-neutral-4);--x-button-color-text-default: var(--x-color-text-primary);--x-button-color-border-default: var(--x-color-border-default);--x-button-color-text-solid: var(--x-color-white);--x-button-color-text-solid-primary: var(--x-color-white);--x-button-color-text-solid-success: var(--x-color-white);--x-button-color-text-solid-warning: var(--x-color-white);--x-button-color-text-solid-strong: var(--x-color-white);--x-button-color-text-solid-danger: var(--x-color-white);--x-button-color-text-solid-info: var(--x-color-white);--x-button-color-bg-primary-subtle: var(--x-color-primary-subtle);--x-button-color-bg-primary-subtle-hover: var(--x-color-primary-subtle-hover);--x-button-color-bg-primary-subtle-active: var(--x-color-primary-subtle-active);--x-button-color-bg-primary-solid: var(--x-color-primary-solid);--x-button-color-bg-primary-solid-hover: var(--x-color-primary-solid-hover);--x-button-color-bg-primary-solid-active: var(--x-color-primary-solid-active);--x-button-color-text-primary: var(--x-color-primary-button-text);--x-button-color-border-primary: var(--x-color-primary-solid);--x-button-color-bg-success-subtle: var(--x-color-success-subtle);--x-button-color-bg-success-subtle-hover: var(--x-color-success-subtle-hover);--x-button-color-bg-success-subtle-active: var(--x-color-success-subtle-active);--x-button-color-bg-success-solid: var(--x-color-success-solid);--x-button-color-bg-success-solid-hover: var(--x-color-success-solid-hover);--x-button-color-bg-success-solid-active: var(--x-color-success-solid-active);--x-button-color-text-success: var(--x-color-success-button-text);--x-button-color-border-success: var(--x-color-success-solid);--x-button-color-bg-warning-subtle: var(--x-color-warning-subtle);--x-button-color-bg-warning-subtle-hover: var(--x-color-warning-subtle-hover);--x-button-color-bg-warning-subtle-active: var(--x-color-warning-subtle-active);--x-button-color-bg-warning-solid: var(--x-color-warning-solid);--x-button-color-bg-warning-solid-hover: var(--x-color-warning-solid-hover);--x-button-color-bg-warning-solid-active: var(--x-color-warning-solid-active);--x-button-color-text-warning: var(--x-color-warning-button-text);--x-button-color-border-warning: var(--x-color-warning-solid);--x-button-color-bg-danger-subtle: var(--x-color-danger-subtle);--x-button-color-bg-danger-subtle-hover: var(--x-color-danger-subtle-hover);--x-button-color-bg-danger-subtle-active: var(--x-color-danger-subtle-active);--x-button-color-bg-danger-solid: var(--x-color-danger-solid);--x-button-color-bg-danger-solid-hover: var(--x-color-danger-solid-hover);--x-button-color-bg-danger-solid-active: var(--x-color-danger-solid-active);--x-button-color-text-danger: var(--x-color-danger-button-text);--x-button-color-border-danger: var(--x-color-danger-solid);--x-button-color-bg-strong-subtle: var(--x-color-strong-subtle);--x-button-color-bg-strong-subtle-hover: var(--x-color-strong-subtle-hover);--x-button-color-bg-strong-subtle-active: var(--x-color-strong-subtle-active);--x-button-color-bg-strong-solid: var(--x-color-strong-solid);--x-button-color-bg-strong-solid-hover: var(--x-color-strong-solid-hover);--x-button-color-bg-strong-solid-active: var(--x-color-strong-solid-active);--x-button-color-text-strong: var(--x-color-strong-button-text);--x-button-color-border-strong: var(--x-color-strong-solid);--x-button-color-bg-info-subtle: var(--x-color-fill-2);--x-button-color-bg-info-subtle-hover: var(--x-color-neutral-3);--x-button-color-bg-info-subtle-active: var(--x-color-neutral-4);--x-button-color-bg-info-solid: var(--x-color-constant-neutral-strong);--x-button-color-bg-info-solid-hover: var(--x-color-constant-neutral-strong-hover);--x-button-color-bg-info-solid-active: var(--x-color-constant-neutral-strong-active);--x-button-color-text-info: var(--x-color-text-secondary);--x-button-color-border-info: var(--x-color-neutral-5)}.x-button{--x-button-width: auto;--x-button-font-weight: 500;--x-button-opacity: 1;--x-button-border-style: solid;--x-button-border-color: var(--x-button-color-border-default);--x-button-background-color: var(--x-button-color-bg-default);--x-button-text-color: var(--x-button-color-text-default);--x-button-padding: 0 0;--x-button-mini-height: var(--x-size-mini);--x-button-mini-font-size: 12px;--x-button-mini-padding: 0 8px;--x-button-mini-border-radius: 4px;--x-button-small-height: var(--x-size-small);--x-button-small-font-size: 13px;--x-button-small-padding: 0 10px;--x-button-small-border-radius: 4px;--x-button-medium-height: var(--x-size-medium);--x-button-medium-font-size: 14px;--x-button-medium-padding: 0 14px;--x-button-medium-border-radius: 4px;--x-button-large-height: var(--x-size-large);--x-button-large-font-size: 14px;--x-button-large-padding: 0 20px;--x-button-large-border-radius: 6px;--x-button-huge-height: var(--x-size-huge);--x-button-huge-font-size: 16px;--x-button-huge-font-weight: 400;--x-button-huge-padding: 0 28px;--x-button-huge-border-radius: 4px}.x-button{--x-button-text-color: var(--x-button-color-text-default);--x-button-background-color: var(--x-button-color-bg-default);--x-button-border-color: var(--x-button-color-border-default)}.x-button:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-default);--x-button-background-color: var(--x-button-color-bg-default-hover);--x-button-border-color: var(--x-button-color-border-default)}.x-button:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-default);--x-button-background-color: var(--x-button-color-bg-default-active);--x-button-border-color: var(--x-button-color-border-default)}.x-button{position:relative;display:inline-flex;justify-content:center;align-items:center;overflow:visible;margin:0;border-style:var(--x-button-border-style);border-width:1px;border-color:var(--x-button-border-color);border-radius:var(--x-button-border-radius);padding:var(--x-button-padding);width:var(--x-button-width);height:var(--x-button-height);color:var(--x-button-text-color);font-size:var(--x-button-font-size);font-weight:var(--x-button-font-weight);line-height:var(--x-line-height-base);white-space:nowrap;background-color:var(--x-button-background-color);opacity:var(--x-button-opacity);outline:none;transition:color var(--x-transition-duration-1) var(--x-transition-timing-function-linear),background-color var(--x-transition-duration-1) var(--x-transition-timing-function-linear),border-color var(--x-transition-duration-1) var(--x-transition-timing-function-linear),opacity var(--x-transition-duration-1) var(--x-transition-timing-function-linear);box-sizing:border-box;appearance:none;user-select:none;vertical-align:bottom;cursor:pointer}.x-button>.x-wave{position:absolute;inset:-1px;z-index:0;border-radius:inherit;pointer-events:none;opacity:.45;box-shadow:0 0 0 0 var(--x-wave-color, currentColor);transition:box-shadow var(--x-transition-duration-4, 0.4s) var(--x-transition-timing-function-standard, ease),opacity var(--x-transition-duration-4, 0.4s) var(--x-transition-timing-function-linear, linear)}.x-button>.x-wave-active{opacity:0;box-shadow:0 0 0 6px var(--x-wave-color, currentColor)}.x-button--prefix{position:relative;z-index:1;display:flex;justify-content:center;align-items:center;margin-right:4px}.x-button--suffix{position:relative;z-index:1;display:flex;justify-content:center;align-items:center;margin-left:4px}.x-button--loading{position:relative;z-index:1;display:flex;flex-shrink:0;transition:width .2s ease,opacity .2s ease,margin-right .2s ease}@media(prefers-reduced-motion: reduce){.x-button--loading{transition:none}}.x-button--content{position:relative;z-index:1;display:flex}.x-button.x-button-default{--x-button-text-color: var(--x-button-color-text-default);--x-button-background-color: var(--x-button-color-bg-default);--x-button-border-color: var(--x-button-color-border-default)}.x-button.x-button-default:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-default);--x-button-background-color: var(--x-button-color-bg-default-hover);--x-button-border-color: var(--x-button-color-border-default)}.x-button.x-button-default:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-default);--x-button-background-color: var(--x-button-color-bg-default-active);--x-button-border-color: var(--x-button-color-border-default)}.x-button.x-button-success{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-button-color-bg-success-subtle);--x-button-border-color: var(--x-color-transparent)}.x-button.x-button-success:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-button-color-bg-success-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button.x-button-success:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-button-color-bg-success-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button.x-button-warning{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-button-color-bg-warning-subtle);--x-button-border-color: var(--x-color-transparent)}.x-button.x-button-warning:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-button-color-bg-warning-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button.x-button-warning:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-button-color-bg-warning-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button.x-button-strong{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-button-color-bg-strong-subtle);--x-button-border-color: var(--x-color-transparent)}.x-button.x-button-strong:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-button-color-bg-strong-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button.x-button-strong:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-button-color-bg-strong-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button.x-button-danger{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-button-color-bg-danger-subtle);--x-button-border-color: var(--x-color-transparent)}.x-button.x-button-danger:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-button-color-bg-danger-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button.x-button-danger:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-button-color-bg-danger-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button.x-button-info{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-button-color-bg-info-subtle);--x-button-border-color: var(--x-color-transparent)}.x-button.x-button-info:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-button-color-bg-info-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button.x-button-info:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-button-color-bg-info-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-primary{--x-button-text-color: var(--x-button-color-text-solid-primary);--x-button-background-color: var(--x-button-color-bg-primary-solid);--x-button-border-color: var(--x-button-color-bg-primary-solid)}.x-button-primary:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-solid-primary);--x-button-background-color: var(--x-button-color-bg-primary-solid-hover);--x-button-border-color: var(--x-button-color-bg-primary-solid-hover)}.x-button-primary:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-solid-primary);--x-button-background-color: var(--x-button-color-bg-primary-solid-active);--x-button-border-color: var(--x-button-color-bg-primary-solid-active)}.x-button-primary.x-button-default{--x-button-text-color: var(--x-button-color-text-solid-primary);--x-button-background-color: var(--x-button-color-bg-primary-solid);--x-button-border-color: var(--x-button-color-bg-primary-solid)}.x-button-primary.x-button-default:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-solid-primary);--x-button-background-color: var(--x-button-color-bg-primary-solid-hover);--x-button-border-color: var(--x-button-color-bg-primary-solid-hover)}.x-button-primary.x-button-default:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-solid-primary);--x-button-background-color: var(--x-button-color-bg-primary-solid-active);--x-button-border-color: var(--x-button-color-bg-primary-solid-active)}.x-button-primary.x-button-success{--x-button-text-color: var(--x-button-color-text-solid-success);--x-button-background-color: var(--x-button-color-bg-success-solid);--x-button-border-color: var(--x-button-color-bg-success-solid)}.x-button-primary.x-button-success:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-solid-success);--x-button-background-color: var(--x-button-color-bg-success-solid-hover);--x-button-border-color: var(--x-button-color-bg-success-solid-hover)}.x-button-primary.x-button-success:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-solid-success);--x-button-background-color: var(--x-button-color-bg-success-solid-active);--x-button-border-color: var(--x-button-color-bg-success-solid-active)}.x-button-primary.x-button-warning{--x-button-text-color: var(--x-button-color-text-solid-warning);--x-button-background-color: var(--x-button-color-bg-warning-solid);--x-button-border-color: var(--x-button-color-bg-warning-solid)}.x-button-primary.x-button-warning:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-solid-warning);--x-button-background-color: var(--x-button-color-bg-warning-solid-hover);--x-button-border-color: var(--x-button-color-bg-warning-solid-hover)}.x-button-primary.x-button-warning:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-solid-warning);--x-button-background-color: var(--x-button-color-bg-warning-solid-active);--x-button-border-color: var(--x-button-color-bg-warning-solid-active)}.x-button-primary.x-button-strong{--x-button-text-color: var(--x-button-color-text-solid-strong);--x-button-background-color: var(--x-button-color-bg-strong-solid);--x-button-border-color: var(--x-button-color-bg-strong-solid)}.x-button-primary.x-button-strong:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-solid-strong);--x-button-background-color: var(--x-button-color-bg-strong-solid-hover);--x-button-border-color: var(--x-button-color-bg-strong-solid-hover)}.x-button-primary.x-button-strong:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-solid-strong);--x-button-background-color: var(--x-button-color-bg-strong-solid-active);--x-button-border-color: var(--x-button-color-bg-strong-solid-active)}.x-button-primary.x-button-danger{--x-button-text-color: var(--x-button-color-text-solid-danger);--x-button-background-color: var(--x-button-color-bg-danger-solid);--x-button-border-color: var(--x-button-color-bg-danger-solid)}.x-button-primary.x-button-danger:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-solid-danger);--x-button-background-color: var(--x-button-color-bg-danger-solid-hover);--x-button-border-color: var(--x-button-color-bg-danger-solid-hover)}.x-button-primary.x-button-danger:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-solid-danger);--x-button-background-color: var(--x-button-color-bg-danger-solid-active);--x-button-border-color: var(--x-button-color-bg-danger-solid-active)}.x-button-primary.x-button-info{--x-button-text-color: var(--x-button-color-text-solid-info);--x-button-background-color: var(--x-button-color-bg-info-solid);--x-button-border-color: var(--x-button-color-bg-info-solid)}.x-button-primary.x-button-info:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-solid-info);--x-button-background-color: var(--x-button-color-bg-info-solid-hover);--x-button-border-color: var(--x-button-color-bg-info-solid-hover)}.x-button-primary.x-button-info:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-solid-info);--x-button-background-color: var(--x-button-color-bg-info-solid-active);--x-button-border-color: var(--x-button-color-bg-info-solid-active)}.x-button-outline{--x-button-border-style: solid}.x-button-outline{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-button-color-border-primary)}.x-button-outline:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-subtle-hover);--x-button-border-color: var(--x-button-color-border-primary)}.x-button-outline:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-subtle-active);--x-button-border-color: var(--x-button-color-border-primary)}.x-button-outline.x-button-default{--x-button-border-style: solid}.x-button-outline.x-button-default{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-button-color-border-primary)}.x-button-outline.x-button-default:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-subtle-hover);--x-button-border-color: var(--x-button-color-border-primary)}.x-button-outline.x-button-default:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-subtle-active);--x-button-border-color: var(--x-button-color-border-primary)}.x-button-outline.x-button-success{--x-button-border-style: solid}.x-button-outline.x-button-success{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-button-color-border-success)}.x-button-outline.x-button-success:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-button-color-bg-success-subtle-hover);--x-button-border-color: var(--x-button-color-border-success)}.x-button-outline.x-button-success:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-button-color-bg-success-subtle-active);--x-button-border-color: var(--x-button-color-border-success)}.x-button-outline.x-button-warning{--x-button-border-style: solid}.x-button-outline.x-button-warning{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-button-color-border-warning)}.x-button-outline.x-button-warning:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-button-color-bg-warning-subtle-hover);--x-button-border-color: var(--x-button-color-border-warning)}.x-button-outline.x-button-warning:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-button-color-bg-warning-subtle-active);--x-button-border-color: var(--x-button-color-border-warning)}.x-button-outline.x-button-strong{--x-button-border-style: solid}.x-button-outline.x-button-strong{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-button-color-border-strong)}.x-button-outline.x-button-strong:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-button-color-bg-strong-subtle-hover);--x-button-border-color: var(--x-button-color-border-strong)}.x-button-outline.x-button-strong:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-button-color-bg-strong-subtle-active);--x-button-border-color: var(--x-button-color-border-strong)}.x-button-outline.x-button-danger{--x-button-border-style: solid}.x-button-outline.x-button-danger{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-button-color-border-danger)}.x-button-outline.x-button-danger:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-button-color-bg-danger-subtle-hover);--x-button-border-color: var(--x-button-color-border-danger)}.x-button-outline.x-button-danger:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-button-color-bg-danger-subtle-active);--x-button-border-color: var(--x-button-color-border-danger)}.x-button-outline.x-button-info{--x-button-border-style: solid}.x-button-outline.x-button-info{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-button-color-border-info)}.x-button-outline.x-button-info:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-button-color-bg-info-subtle-hover);--x-button-border-color: var(--x-button-color-border-info)}.x-button-outline.x-button-info:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-button-color-bg-info-subtle-active);--x-button-border-color: var(--x-button-color-border-info)}.x-button-dashed{--x-button-border-style: dashed}.x-button-dashed{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-button-color-border-primary)}.x-button-dashed:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-subtle-hover);--x-button-border-color: var(--x-button-color-border-primary)}.x-button-dashed:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-subtle-active);--x-button-border-color: var(--x-button-color-border-primary)}.x-button-dashed.x-button-default{--x-button-border-style: dashed}.x-button-dashed.x-button-default{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-button-color-border-primary)}.x-button-dashed.x-button-default:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-subtle-hover);--x-button-border-color: var(--x-button-color-border-primary)}.x-button-dashed.x-button-default:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-subtle-active);--x-button-border-color: var(--x-button-color-border-primary)}.x-button-dashed.x-button-success{--x-button-border-style: dashed}.x-button-dashed.x-button-success{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-button-color-border-success)}.x-button-dashed.x-button-success:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-button-color-bg-success-subtle-hover);--x-button-border-color: var(--x-button-color-border-success)}.x-button-dashed.x-button-success:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-button-color-bg-success-subtle-active);--x-button-border-color: var(--x-button-color-border-success)}.x-button-dashed.x-button-warning{--x-button-border-style: dashed}.x-button-dashed.x-button-warning{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-button-color-border-warning)}.x-button-dashed.x-button-warning:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-button-color-bg-warning-subtle-hover);--x-button-border-color: var(--x-button-color-border-warning)}.x-button-dashed.x-button-warning:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-button-color-bg-warning-subtle-active);--x-button-border-color: var(--x-button-color-border-warning)}.x-button-dashed.x-button-strong{--x-button-border-style: dashed}.x-button-dashed.x-button-strong{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-button-color-border-strong)}.x-button-dashed.x-button-strong:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-button-color-bg-strong-subtle-hover);--x-button-border-color: var(--x-button-color-border-strong)}.x-button-dashed.x-button-strong:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-button-color-bg-strong-subtle-active);--x-button-border-color: var(--x-button-color-border-strong)}.x-button-dashed.x-button-danger{--x-button-border-style: dashed}.x-button-dashed.x-button-danger{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-button-color-border-danger)}.x-button-dashed.x-button-danger:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-button-color-bg-danger-subtle-hover);--x-button-border-color: var(--x-button-color-border-danger)}.x-button-dashed.x-button-danger:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-button-color-bg-danger-subtle-active);--x-button-border-color: var(--x-button-color-border-danger)}.x-button-dashed.x-button-info{--x-button-border-style: dashed}.x-button-dashed.x-button-info{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-button-color-border-info)}.x-button-dashed.x-button-info:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-button-color-bg-info-subtle-hover);--x-button-border-color: var(--x-button-color-border-info)}.x-button-dashed.x-button-info:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-button-color-bg-info-subtle-active);--x-button-border-color: var(--x-button-color-border-info)}.x-button-text{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-color-transparent)}.x-button-text:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-text:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-text.x-button-default{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-color-transparent)}.x-button-text.x-button-default:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-text.x-button-default:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-text.x-button-success{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-color-transparent)}.x-button-text.x-button-success:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-button-color-bg-success-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-text.x-button-success:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-button-color-bg-success-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-text.x-button-warning{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-color-transparent)}.x-button-text.x-button-warning:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-button-color-bg-warning-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-text.x-button-warning:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-button-color-bg-warning-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-text.x-button-strong{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-color-transparent)}.x-button-text.x-button-strong:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-button-color-bg-strong-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-text.x-button-strong:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-button-color-bg-strong-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-text.x-button-danger{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-color-transparent)}.x-button-text.x-button-danger:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-button-color-bg-danger-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-text.x-button-danger:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-button-color-bg-danger-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-text.x-button-info{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-color-transparent)}.x-button-text.x-button-info:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-button-color-bg-info-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-text.x-button-info:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-button-color-bg-info-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-plain{--x-button-font-weight: 500}.x-button-plain{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-subtle);--x-button-border-color: var(--x-color-transparent)}.x-button-plain:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-plain:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-plain.x-button-default{--x-button-text-color: var(--x-button-color-text-default);--x-button-background-color: var(--x-button-color-bg-default);--x-button-border-color: var(--x-button-color-border-default)}.x-button-plain.x-button-default:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-default);--x-button-background-color: var(--x-button-color-bg-default-hover);--x-button-border-color: var(--x-button-color-border-default)}.x-button-plain.x-button-default:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-default);--x-button-background-color: var(--x-button-color-bg-default-active);--x-button-border-color: var(--x-button-color-border-default)}.x-button-plain.x-button-success{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-button-color-bg-success-subtle);--x-button-border-color: var(--x-color-transparent)}.x-button-plain.x-button-success:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-button-color-bg-success-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-plain.x-button-success:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-button-color-bg-success-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-plain.x-button-warning{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-button-color-bg-warning-subtle);--x-button-border-color: var(--x-color-transparent)}.x-button-plain.x-button-warning:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-button-color-bg-warning-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-plain.x-button-warning:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-button-color-bg-warning-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-plain.x-button-strong{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-button-color-bg-strong-subtle);--x-button-border-color: var(--x-color-transparent)}.x-button-plain.x-button-strong:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-button-color-bg-strong-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-plain.x-button-strong:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-button-color-bg-strong-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-plain.x-button-danger{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-button-color-bg-danger-subtle);--x-button-border-color: var(--x-color-transparent)}.x-button-plain.x-button-danger:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-button-color-bg-danger-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-plain.x-button-danger:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-button-color-bg-danger-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-plain.x-button-info{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-button-color-bg-info-subtle);--x-button-border-color: var(--x-color-transparent)}.x-button-plain.x-button-info:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-button-color-bg-info-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-plain.x-button-info:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-button-color-bg-info-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-hide-border{--x-button-font-weight: 500}.x-button-hide-border{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-subtle);--x-button-border-color: var(--x-color-transparent)}.x-button-hide-border:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-hide-border:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-hide-border.x-button-default{--x-button-text-color: var(--x-button-color-text-default);--x-button-background-color: var(--x-button-color-bg-default);--x-button-border-color: var(--x-button-color-border-default)}.x-button-hide-border.x-button-default:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-default);--x-button-background-color: var(--x-button-color-bg-default-hover);--x-button-border-color: var(--x-button-color-border-default)}.x-button-hide-border.x-button-default:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-default);--x-button-background-color: var(--x-button-color-bg-default-active);--x-button-border-color: var(--x-button-color-border-default)}.x-button-hide-border.x-button-success{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-button-color-bg-success-subtle);--x-button-border-color: var(--x-color-transparent)}.x-button-hide-border.x-button-success:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-button-color-bg-success-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-hide-border.x-button-success:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-button-color-bg-success-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-hide-border.x-button-warning{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-button-color-bg-warning-subtle);--x-button-border-color: var(--x-color-transparent)}.x-button-hide-border.x-button-warning:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-button-color-bg-warning-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-hide-border.x-button-warning:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-button-color-bg-warning-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-hide-border.x-button-strong{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-button-color-bg-strong-subtle);--x-button-border-color: var(--x-color-transparent)}.x-button-hide-border.x-button-strong:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-button-color-bg-strong-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-hide-border.x-button-strong:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-button-color-bg-strong-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-hide-border.x-button-danger{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-button-color-bg-danger-subtle);--x-button-border-color: var(--x-color-transparent)}.x-button-hide-border.x-button-danger:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-button-color-bg-danger-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-hide-border.x-button-danger:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-button-color-bg-danger-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-hide-border.x-button-info{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-button-color-bg-info-subtle);--x-button-border-color: var(--x-color-transparent)}.x-button-hide-border.x-button-info:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-button-color-bg-info-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-hide-border.x-button-info:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-button-color-bg-info-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-link{--x-button-height: auto;--x-button-padding: 0;--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-color-transparent);--x-button-text-color: var(--x-button-color-text-primary);min-height:0}.x-button-link:not(.is-disabled):hover{--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-color-transparent);--x-button-text-color: var(--x-button-color-text-primary)}.x-button-link:not(.is-disabled):active{--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-color-transparent);--x-button-text-color: var(--x-button-color-text-primary)}.x-button-is-disabled{--x-button-opacity: 0.4;cursor:not-allowed}.x-button-block{display:flex;width:100%}.x-button-loading{cursor:default}.x-button-loading-fill--loading{position:absolute;inset:0;z-index:1;justify-content:center;align-items:center;color:var(--x-button-text-color);background-color:var(--x-button-background-color)}.x-button-narrow{--x-button-mini-padding: 0 0;--x-button-small-padding: 0 0;--x-button-medium-padding: 0 0;--x-button-large-padding: 0 0;--x-button-huge-padding: 0 0}.x-button-mini{--x-button-height: var(--x-button-mini-height);--x-button-font-size: var(--x-button-mini-font-size);--x-button-padding: var(--x-button-mini-padding);--x-button-border-radius: var(--x-button-mini-border-radius)}.x-button-small{--x-button-height: var(--x-button-small-height);--x-button-font-size: var(--x-button-small-font-size);--x-button-padding: var(--x-button-small-padding);--x-button-border-radius: var(--x-button-small-border-radius)}.x-button-medium{--x-button-height: var(--x-button-medium-height);--x-button-font-size: var(--x-button-medium-font-size);--x-button-padding: var(--x-button-medium-padding);--x-button-border-radius: var(--x-button-medium-border-radius)}.x-button-large{--x-button-height: var(--x-button-large-height);--x-button-font-size: var(--x-button-large-font-size);--x-button-padding: var(--x-button-large-padding);--x-button-border-radius: var(--x-button-large-border-radius)}.x-button-huge{--x-button-height: var(--x-button-huge-height);--x-button-font-size: var(--x-button-huge-font-size);--x-button-font-weight: var(--x-button-huge-font-weight);--x-button-padding: var(--x-button-huge-padding);--x-button-border-radius: var(--x-button-huge-border-radius)}.x-button-round{--x-button-border-radius: var(--x-button-height);height:var(--x-button-height)}.x-button-circle{--x-button-width: var(--x-button-height);--x-button-padding: 0;--x-button-border-radius: 100%;width:var(--x-button-height);height:var(--x-button-height)}.x-button-group{display:flex;width:min-content}.x-button-group>.x-button:first-child{border-top-right-radius:0;border-bottom-right-radius:0}.x-button-group>.x-button:last-child{margin-left:-1px;border-left-color:var(--x-button-group-color-separator);border-top-left-radius:0;border-bottom-left-radius:0}.x-button-group>.x-button:not(:first-child):not(:last-child){margin-left:-1px;border-left-color:var(--x-button-group-color-separator);border-radius:0}
1
+ :root{--x-button-color-bg-default: var(--x-color-fill-2);--x-button-color-bg-default-hover: var(--x-color-neutral-3);--x-button-color-bg-default-active: var(--x-color-neutral-4);--x-button-color-text-default: var(--x-color-text-primary);--x-button-color-border-default: var(--x-color-border-default);--x-button-color-text-solid: var(--x-color-white);--x-button-color-text-solid-primary: var(--x-color-white);--x-button-color-text-solid-success: var(--x-color-white);--x-button-color-text-solid-warning: var(--x-color-white);--x-button-color-text-solid-strong: var(--x-color-white);--x-button-color-text-solid-danger: var(--x-color-white);--x-button-color-text-solid-info: var(--x-color-white);--x-button-color-bg-primary-subtle: var(--x-color-primary-subtle);--x-button-color-bg-primary-subtle-hover: var(--x-color-primary-subtle-hover);--x-button-color-bg-primary-subtle-active: var(--x-color-primary-subtle-active);--x-button-color-bg-primary-solid: var(--x-color-primary-solid);--x-button-color-bg-primary-solid-hover: var(--x-color-primary-solid-hover);--x-button-color-bg-primary-solid-active: var(--x-color-primary-solid-active);--x-button-color-text-primary: var(--x-color-primary-button-text);--x-button-color-border-primary: var(--x-color-primary-solid);--x-button-color-bg-success-subtle: var(--x-color-success-subtle);--x-button-color-bg-success-subtle-hover: var(--x-color-success-subtle-hover);--x-button-color-bg-success-subtle-active: var(--x-color-success-subtle-active);--x-button-color-bg-success-solid: var(--x-color-success-solid);--x-button-color-bg-success-solid-hover: var(--x-color-success-solid-hover);--x-button-color-bg-success-solid-active: var(--x-color-success-solid-active);--x-button-color-text-success: var(--x-color-success-button-text);--x-button-color-border-success: var(--x-color-success-solid);--x-button-color-bg-warning-subtle: var(--x-color-warning-subtle);--x-button-color-bg-warning-subtle-hover: var(--x-color-warning-subtle-hover);--x-button-color-bg-warning-subtle-active: var(--x-color-warning-subtle-active);--x-button-color-bg-warning-solid: var(--x-color-warning-solid);--x-button-color-bg-warning-solid-hover: var(--x-color-warning-solid-hover);--x-button-color-bg-warning-solid-active: var(--x-color-warning-solid-active);--x-button-color-text-warning: var(--x-color-warning-button-text);--x-button-color-border-warning: var(--x-color-warning-solid);--x-button-color-bg-danger-subtle: var(--x-color-danger-subtle);--x-button-color-bg-danger-subtle-hover: var(--x-color-danger-subtle-hover);--x-button-color-bg-danger-subtle-active: var(--x-color-danger-subtle-active);--x-button-color-bg-danger-solid: var(--x-color-danger-solid);--x-button-color-bg-danger-solid-hover: var(--x-color-danger-solid-hover);--x-button-color-bg-danger-solid-active: var(--x-color-danger-solid-active);--x-button-color-text-danger: var(--x-color-danger-button-text);--x-button-color-border-danger: var(--x-color-danger-solid);--x-button-color-bg-strong-subtle: var(--x-color-strong-subtle);--x-button-color-bg-strong-subtle-hover: var(--x-color-strong-subtle-hover);--x-button-color-bg-strong-subtle-active: var(--x-color-strong-subtle-active);--x-button-color-bg-strong-solid: var(--x-color-strong-solid);--x-button-color-bg-strong-solid-hover: var(--x-color-strong-solid-hover);--x-button-color-bg-strong-solid-active: var(--x-color-strong-solid-active);--x-button-color-text-strong: var(--x-color-strong-button-text);--x-button-color-border-strong: var(--x-color-strong-solid);--x-button-color-bg-info-subtle: var(--x-color-fill-2);--x-button-color-bg-info-subtle-hover: var(--x-color-neutral-3);--x-button-color-bg-info-subtle-active: var(--x-color-neutral-4);--x-button-color-bg-info-solid: var(--x-color-constant-neutral-strong);--x-button-color-bg-info-solid-hover: var(--x-color-constant-neutral-strong-hover);--x-button-color-bg-info-solid-active: var(--x-color-constant-neutral-strong-active);--x-button-color-text-info: var(--x-color-text-secondary);--x-button-color-border-info: var(--x-color-neutral-5)}.x-button{--x-button-width: auto;--x-button-font-weight: 500;--x-button-opacity: 1;--x-button-border-style: solid;--x-button-border-color: var(--x-button-color-border-default);--x-button-background-color: var(--x-button-color-bg-default);--x-button-text-color: var(--x-button-color-text-default);--x-button-padding: 0 0;--x-button-mini-height: var(--x-size-mini);--x-button-mini-font-size: 12px;--x-button-mini-padding: 0 8px;--x-button-mini-border-radius: 4px;--x-button-small-height: var(--x-size-small);--x-button-small-font-size: 13px;--x-button-small-padding: 0 10px;--x-button-small-border-radius: 4px;--x-button-medium-height: var(--x-size-medium);--x-button-medium-font-size: 14px;--x-button-medium-padding: 0 14px;--x-button-medium-border-radius: 4px;--x-button-large-height: var(--x-size-large);--x-button-large-font-size: 14px;--x-button-large-padding: 0 20px;--x-button-large-border-radius: 6px;--x-button-huge-height: var(--x-size-huge);--x-button-huge-font-size: 16px;--x-button-huge-font-weight: 400;--x-button-huge-padding: 0 28px;--x-button-huge-border-radius: 4px}.x-button{--x-button-text-color: var(--x-button-color-text-default);--x-button-background-color: var(--x-button-color-bg-default);--x-button-border-color: var(--x-button-color-border-default)}.x-button:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-default);--x-button-background-color: var(--x-button-color-bg-default-hover);--x-button-border-color: var(--x-button-color-border-default)}.x-button:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-default);--x-button-background-color: var(--x-button-color-bg-default-active);--x-button-border-color: var(--x-button-color-border-default)}.x-button{position:relative;display:inline-flex;justify-content:center;align-items:center;overflow:visible;margin:0;border-style:var(--x-button-border-style);border-width:1px;border-color:var(--x-button-border-color);border-radius:var(--x-button-border-radius);padding:var(--x-button-padding);width:var(--x-button-width);height:var(--x-button-height);color:var(--x-button-text-color);font-size:var(--x-button-font-size);font-weight:var(--x-button-font-weight);line-height:var(--x-line-height-base);white-space:nowrap;background-color:var(--x-button-background-color);opacity:var(--x-button-opacity);outline:none;transition:color var(--x-transition-duration-1) var(--x-transition-timing-function-linear),background-color var(--x-transition-duration-1) var(--x-transition-timing-function-linear),border-color var(--x-transition-duration-1) var(--x-transition-timing-function-linear),opacity var(--x-transition-duration-1) var(--x-transition-timing-function-linear);box-sizing:border-box;appearance:none;user-select:none;vertical-align:bottom;cursor:pointer}.x-button>.x-wave{position:absolute;inset:-1px;z-index:0;border-radius:inherit;pointer-events:none;opacity:.45;box-shadow:0 0 0 0 var(--x-wave-color, currentColor);transition:box-shadow var(--x-transition-duration-4, 0.4s) var(--x-transition-timing-function-standard, ease),opacity var(--x-transition-duration-4, 0.4s) var(--x-transition-timing-function-linear, linear)}.x-button>.x-wave-active{opacity:0;box-shadow:0 0 0 6px var(--x-wave-color, currentColor)}.x-button--prefix{position:relative;z-index:1;display:flex;justify-content:center;align-items:center;margin-right:4px}.x-button--suffix{position:relative;z-index:1;display:flex;justify-content:center;align-items:center;margin-left:4px}.x-button--loading{position:relative;z-index:1;display:flex;flex-shrink:0;transition:width .2s ease,opacity .2s ease,margin-right .2s ease}@media(prefers-reduced-motion: reduce){.x-button--loading{transition:none}}.x-button--content{position:relative;z-index:1;display:flex}.x-button.x-button-default{--x-button-text-color: var(--x-button-color-text-default);--x-button-background-color: var(--x-button-color-bg-default);--x-button-border-color: var(--x-button-color-border-default)}.x-button.x-button-default:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-default);--x-button-background-color: var(--x-button-color-bg-default-hover);--x-button-border-color: var(--x-button-color-border-default)}.x-button.x-button-default:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-default);--x-button-background-color: var(--x-button-color-bg-default-active);--x-button-border-color: var(--x-button-color-border-default)}.x-button.x-button-success{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-button-color-bg-success-subtle);--x-button-border-color: var(--x-color-transparent)}.x-button.x-button-success:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-button-color-bg-success-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button.x-button-success:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-button-color-bg-success-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button.x-button-warning{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-button-color-bg-warning-subtle);--x-button-border-color: var(--x-color-transparent)}.x-button.x-button-warning:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-button-color-bg-warning-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button.x-button-warning:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-button-color-bg-warning-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button.x-button-strong{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-button-color-bg-strong-subtle);--x-button-border-color: var(--x-color-transparent)}.x-button.x-button-strong:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-button-color-bg-strong-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button.x-button-strong:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-button-color-bg-strong-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button.x-button-danger{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-button-color-bg-danger-subtle);--x-button-border-color: var(--x-color-transparent)}.x-button.x-button-danger:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-button-color-bg-danger-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button.x-button-danger:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-button-color-bg-danger-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button.x-button-info{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-button-color-bg-info-subtle);--x-button-border-color: var(--x-color-transparent)}.x-button.x-button-info:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-button-color-bg-info-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button.x-button-info:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-button-color-bg-info-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-primary{--x-button-text-color: var(--x-button-color-text-solid-primary);--x-button-background-color: var(--x-button-color-bg-primary-solid);--x-button-border-color: var(--x-button-color-bg-primary-solid)}.x-button-primary:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-solid-primary);--x-button-background-color: var(--x-button-color-bg-primary-solid-hover);--x-button-border-color: var(--x-button-color-bg-primary-solid-hover)}.x-button-primary:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-solid-primary);--x-button-background-color: var(--x-button-color-bg-primary-solid-active);--x-button-border-color: var(--x-button-color-bg-primary-solid-active)}.x-button-primary.x-button-default{--x-button-text-color: var(--x-button-color-text-solid-primary);--x-button-background-color: var(--x-button-color-bg-primary-solid);--x-button-border-color: var(--x-button-color-bg-primary-solid)}.x-button-primary.x-button-default:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-solid-primary);--x-button-background-color: var(--x-button-color-bg-primary-solid-hover);--x-button-border-color: var(--x-button-color-bg-primary-solid-hover)}.x-button-primary.x-button-default:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-solid-primary);--x-button-background-color: var(--x-button-color-bg-primary-solid-active);--x-button-border-color: var(--x-button-color-bg-primary-solid-active)}.x-button-primary.x-button-success{--x-button-text-color: var(--x-button-color-text-solid-success);--x-button-background-color: var(--x-button-color-bg-success-solid);--x-button-border-color: var(--x-button-color-bg-success-solid)}.x-button-primary.x-button-success:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-solid-success);--x-button-background-color: var(--x-button-color-bg-success-solid-hover);--x-button-border-color: var(--x-button-color-bg-success-solid-hover)}.x-button-primary.x-button-success:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-solid-success);--x-button-background-color: var(--x-button-color-bg-success-solid-active);--x-button-border-color: var(--x-button-color-bg-success-solid-active)}.x-button-primary.x-button-warning{--x-button-text-color: var(--x-button-color-text-solid-warning);--x-button-background-color: var(--x-button-color-bg-warning-solid);--x-button-border-color: var(--x-button-color-bg-warning-solid)}.x-button-primary.x-button-warning:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-solid-warning);--x-button-background-color: var(--x-button-color-bg-warning-solid-hover);--x-button-border-color: var(--x-button-color-bg-warning-solid-hover)}.x-button-primary.x-button-warning:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-solid-warning);--x-button-background-color: var(--x-button-color-bg-warning-solid-active);--x-button-border-color: var(--x-button-color-bg-warning-solid-active)}.x-button-primary.x-button-strong{--x-button-text-color: var(--x-button-color-text-solid-strong);--x-button-background-color: var(--x-button-color-bg-strong-solid);--x-button-border-color: var(--x-button-color-bg-strong-solid)}.x-button-primary.x-button-strong:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-solid-strong);--x-button-background-color: var(--x-button-color-bg-strong-solid-hover);--x-button-border-color: var(--x-button-color-bg-strong-solid-hover)}.x-button-primary.x-button-strong:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-solid-strong);--x-button-background-color: var(--x-button-color-bg-strong-solid-active);--x-button-border-color: var(--x-button-color-bg-strong-solid-active)}.x-button-primary.x-button-danger{--x-button-text-color: var(--x-button-color-text-solid-danger);--x-button-background-color: var(--x-button-color-bg-danger-solid);--x-button-border-color: var(--x-button-color-bg-danger-solid)}.x-button-primary.x-button-danger:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-solid-danger);--x-button-background-color: var(--x-button-color-bg-danger-solid-hover);--x-button-border-color: var(--x-button-color-bg-danger-solid-hover)}.x-button-primary.x-button-danger:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-solid-danger);--x-button-background-color: var(--x-button-color-bg-danger-solid-active);--x-button-border-color: var(--x-button-color-bg-danger-solid-active)}.x-button-primary.x-button-info{--x-button-text-color: var(--x-button-color-text-solid-info);--x-button-background-color: var(--x-button-color-bg-info-solid);--x-button-border-color: var(--x-button-color-bg-info-solid)}.x-button-primary.x-button-info:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-solid-info);--x-button-background-color: var(--x-button-color-bg-info-solid-hover);--x-button-border-color: var(--x-button-color-bg-info-solid-hover)}.x-button-primary.x-button-info:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-solid-info);--x-button-background-color: var(--x-button-color-bg-info-solid-active);--x-button-border-color: var(--x-button-color-bg-info-solid-active)}.x-button-outline{--x-button-border-style: solid}.x-button-outline{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-button-color-border-primary)}.x-button-outline:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-subtle-hover);--x-button-border-color: var(--x-button-color-border-primary)}.x-button-outline:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-subtle-active);--x-button-border-color: var(--x-button-color-border-primary)}.x-button-outline.x-button-default{--x-button-border-style: solid}.x-button-outline.x-button-default{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-button-color-border-primary)}.x-button-outline.x-button-default:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-subtle-hover);--x-button-border-color: var(--x-button-color-border-primary)}.x-button-outline.x-button-default:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-subtle-active);--x-button-border-color: var(--x-button-color-border-primary)}.x-button-outline.x-button-success{--x-button-border-style: solid}.x-button-outline.x-button-success{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-button-color-border-success)}.x-button-outline.x-button-success:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-button-color-bg-success-subtle-hover);--x-button-border-color: var(--x-button-color-border-success)}.x-button-outline.x-button-success:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-button-color-bg-success-subtle-active);--x-button-border-color: var(--x-button-color-border-success)}.x-button-outline.x-button-warning{--x-button-border-style: solid}.x-button-outline.x-button-warning{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-button-color-border-warning)}.x-button-outline.x-button-warning:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-button-color-bg-warning-subtle-hover);--x-button-border-color: var(--x-button-color-border-warning)}.x-button-outline.x-button-warning:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-button-color-bg-warning-subtle-active);--x-button-border-color: var(--x-button-color-border-warning)}.x-button-outline.x-button-strong{--x-button-border-style: solid}.x-button-outline.x-button-strong{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-button-color-border-strong)}.x-button-outline.x-button-strong:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-button-color-bg-strong-subtle-hover);--x-button-border-color: var(--x-button-color-border-strong)}.x-button-outline.x-button-strong:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-button-color-bg-strong-subtle-active);--x-button-border-color: var(--x-button-color-border-strong)}.x-button-outline.x-button-danger{--x-button-border-style: solid}.x-button-outline.x-button-danger{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-button-color-border-danger)}.x-button-outline.x-button-danger:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-button-color-bg-danger-subtle-hover);--x-button-border-color: var(--x-button-color-border-danger)}.x-button-outline.x-button-danger:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-button-color-bg-danger-subtle-active);--x-button-border-color: var(--x-button-color-border-danger)}.x-button-outline.x-button-info{--x-button-border-style: solid}.x-button-outline.x-button-info{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-button-color-border-info)}.x-button-outline.x-button-info:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-button-color-bg-info-subtle-hover);--x-button-border-color: var(--x-button-color-border-info)}.x-button-outline.x-button-info:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-button-color-bg-info-subtle-active);--x-button-border-color: var(--x-button-color-border-info)}.x-button-dashed{--x-button-border-style: dashed}.x-button-dashed{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-button-color-border-primary)}.x-button-dashed:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-subtle-hover);--x-button-border-color: var(--x-button-color-border-primary)}.x-button-dashed:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-subtle-active);--x-button-border-color: var(--x-button-color-border-primary)}.x-button-dashed.x-button-default{--x-button-border-style: dashed}.x-button-dashed.x-button-default{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-button-color-border-primary)}.x-button-dashed.x-button-default:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-subtle-hover);--x-button-border-color: var(--x-button-color-border-primary)}.x-button-dashed.x-button-default:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-subtle-active);--x-button-border-color: var(--x-button-color-border-primary)}.x-button-dashed.x-button-success{--x-button-border-style: dashed}.x-button-dashed.x-button-success{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-button-color-border-success)}.x-button-dashed.x-button-success:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-button-color-bg-success-subtle-hover);--x-button-border-color: var(--x-button-color-border-success)}.x-button-dashed.x-button-success:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-button-color-bg-success-subtle-active);--x-button-border-color: var(--x-button-color-border-success)}.x-button-dashed.x-button-warning{--x-button-border-style: dashed}.x-button-dashed.x-button-warning{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-button-color-border-warning)}.x-button-dashed.x-button-warning:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-button-color-bg-warning-subtle-hover);--x-button-border-color: var(--x-button-color-border-warning)}.x-button-dashed.x-button-warning:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-button-color-bg-warning-subtle-active);--x-button-border-color: var(--x-button-color-border-warning)}.x-button-dashed.x-button-strong{--x-button-border-style: dashed}.x-button-dashed.x-button-strong{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-button-color-border-strong)}.x-button-dashed.x-button-strong:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-button-color-bg-strong-subtle-hover);--x-button-border-color: var(--x-button-color-border-strong)}.x-button-dashed.x-button-strong:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-button-color-bg-strong-subtle-active);--x-button-border-color: var(--x-button-color-border-strong)}.x-button-dashed.x-button-danger{--x-button-border-style: dashed}.x-button-dashed.x-button-danger{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-button-color-border-danger)}.x-button-dashed.x-button-danger:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-button-color-bg-danger-subtle-hover);--x-button-border-color: var(--x-button-color-border-danger)}.x-button-dashed.x-button-danger:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-button-color-bg-danger-subtle-active);--x-button-border-color: var(--x-button-color-border-danger)}.x-button-dashed.x-button-info{--x-button-border-style: dashed}.x-button-dashed.x-button-info{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-button-color-border-info)}.x-button-dashed.x-button-info:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-button-color-bg-info-subtle-hover);--x-button-border-color: var(--x-button-color-border-info)}.x-button-dashed.x-button-info:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-button-color-bg-info-subtle-active);--x-button-border-color: var(--x-button-color-border-info)}.x-button-text{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-color-transparent)}.x-button-text:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-text:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-text.x-button-default{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-color-transparent)}.x-button-text.x-button-default:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-text.x-button-default:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-text.x-button-success{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-color-transparent)}.x-button-text.x-button-success:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-button-color-bg-success-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-text.x-button-success:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-button-color-bg-success-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-text.x-button-warning{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-color-transparent)}.x-button-text.x-button-warning:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-button-color-bg-warning-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-text.x-button-warning:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-button-color-bg-warning-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-text.x-button-strong{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-color-transparent)}.x-button-text.x-button-strong:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-button-color-bg-strong-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-text.x-button-strong:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-button-color-bg-strong-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-text.x-button-danger{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-color-transparent)}.x-button-text.x-button-danger:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-button-color-bg-danger-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-text.x-button-danger:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-button-color-bg-danger-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-text.x-button-info{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-color-transparent)}.x-button-text.x-button-info:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-button-color-bg-info-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-text.x-button-info:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-button-color-bg-info-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-plain{--x-button-font-weight: 500}.x-button-plain{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-subtle);--x-button-border-color: var(--x-color-transparent)}.x-button-plain:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-plain:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-plain.x-button-default{--x-button-text-color: var(--x-button-color-text-default);--x-button-background-color: var(--x-button-color-bg-default);--x-button-border-color: var(--x-button-color-border-default)}.x-button-plain.x-button-default:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-default);--x-button-background-color: var(--x-button-color-bg-default-hover);--x-button-border-color: var(--x-button-color-border-default)}.x-button-plain.x-button-default:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-default);--x-button-background-color: var(--x-button-color-bg-default-active);--x-button-border-color: var(--x-button-color-border-default)}.x-button-plain.x-button-success{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-button-color-bg-success-subtle);--x-button-border-color: var(--x-color-transparent)}.x-button-plain.x-button-success:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-button-color-bg-success-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-plain.x-button-success:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-button-color-bg-success-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-plain.x-button-warning{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-button-color-bg-warning-subtle);--x-button-border-color: var(--x-color-transparent)}.x-button-plain.x-button-warning:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-button-color-bg-warning-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-plain.x-button-warning:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-button-color-bg-warning-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-plain.x-button-strong{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-button-color-bg-strong-subtle);--x-button-border-color: var(--x-color-transparent)}.x-button-plain.x-button-strong:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-button-color-bg-strong-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-plain.x-button-strong:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-button-color-bg-strong-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-plain.x-button-danger{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-button-color-bg-danger-subtle);--x-button-border-color: var(--x-color-transparent)}.x-button-plain.x-button-danger:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-button-color-bg-danger-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-plain.x-button-danger:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-button-color-bg-danger-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-plain.x-button-info{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-button-color-bg-info-subtle);--x-button-border-color: var(--x-color-transparent)}.x-button-plain.x-button-info:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-button-color-bg-info-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-plain.x-button-info:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-button-color-bg-info-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-hide-border{--x-button-font-weight: 500}.x-button-hide-border{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-subtle);--x-button-border-color: var(--x-color-transparent)}.x-button-hide-border:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-hide-border:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-primary);--x-button-background-color: var(--x-button-color-bg-primary-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-hide-border.x-button-default{--x-button-text-color: var(--x-button-color-text-default);--x-button-background-color: var(--x-button-color-bg-default);--x-button-border-color: var(--x-button-color-border-default)}.x-button-hide-border.x-button-default:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-default);--x-button-background-color: var(--x-button-color-bg-default-hover);--x-button-border-color: var(--x-button-color-border-default)}.x-button-hide-border.x-button-default:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-default);--x-button-background-color: var(--x-button-color-bg-default-active);--x-button-border-color: var(--x-button-color-border-default)}.x-button-hide-border.x-button-success{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-button-color-bg-success-subtle);--x-button-border-color: var(--x-color-transparent)}.x-button-hide-border.x-button-success:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-button-color-bg-success-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-hide-border.x-button-success:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-success);--x-button-background-color: var(--x-button-color-bg-success-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-hide-border.x-button-warning{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-button-color-bg-warning-subtle);--x-button-border-color: var(--x-color-transparent)}.x-button-hide-border.x-button-warning:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-button-color-bg-warning-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-hide-border.x-button-warning:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-warning);--x-button-background-color: var(--x-button-color-bg-warning-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-hide-border.x-button-strong{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-button-color-bg-strong-subtle);--x-button-border-color: var(--x-color-transparent)}.x-button-hide-border.x-button-strong:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-button-color-bg-strong-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-hide-border.x-button-strong:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-strong);--x-button-background-color: var(--x-button-color-bg-strong-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-hide-border.x-button-danger{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-button-color-bg-danger-subtle);--x-button-border-color: var(--x-color-transparent)}.x-button-hide-border.x-button-danger:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-button-color-bg-danger-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-hide-border.x-button-danger:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-danger);--x-button-background-color: var(--x-button-color-bg-danger-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-hide-border.x-button-info{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-button-color-bg-info-subtle);--x-button-border-color: var(--x-color-transparent)}.x-button-hide-border.x-button-info:not(.is-disabled):hover{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-button-color-bg-info-subtle-hover);--x-button-border-color: var(--x-color-transparent)}.x-button-hide-border.x-button-info:not(.is-disabled):active{--x-button-text-color: var(--x-button-color-text-info);--x-button-background-color: var(--x-button-color-bg-info-subtle-active);--x-button-border-color: var(--x-color-transparent)}.x-button-link{--x-button-height: auto;--x-button-padding: 0;--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-color-transparent);--x-button-text-color: var(--x-button-color-text-primary);min-height:0}.x-button-link:not(.is-disabled):hover{--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-color-transparent);--x-button-text-color: var(--x-button-color-text-primary)}.x-button-link:not(.is-disabled):active{--x-button-background-color: var(--x-color-transparent);--x-button-border-color: var(--x-color-transparent);--x-button-text-color: var(--x-button-color-text-primary)}.x-button-is-disabled{--x-button-opacity: 0.4;cursor:not-allowed}.x-button-block{display:flex;width:100%}.x-button-loading{cursor:default}.x-button-loading-fill>.x-button--loading{position:absolute;inset:0;z-index:2;justify-content:center;align-items:center;border-radius:inherit;color:var(--x-button-text-color);background-color:var(--x-button-background-color);pointer-events:none;transition:opacity .2s ease}@media(prefers-reduced-motion: reduce){.x-button-loading-fill>.x-button--loading{transition:none}}.x-button-loading-fill.x-button-loading>.x-button--prefix,.x-button-loading-fill.x-button-loading>.x-button--content,.x-button-loading-fill.x-button-loading>.x-button--suffix{opacity:0}.x-button-narrow{--x-button-mini-padding: 0 0;--x-button-small-padding: 0 0;--x-button-medium-padding: 0 0;--x-button-large-padding: 0 0;--x-button-huge-padding: 0 0}.x-button-mini{--x-button-height: var(--x-button-mini-height);--x-button-font-size: var(--x-button-mini-font-size);--x-button-padding: var(--x-button-mini-padding);--x-button-border-radius: var(--x-button-mini-border-radius)}.x-button-small{--x-button-height: var(--x-button-small-height);--x-button-font-size: var(--x-button-small-font-size);--x-button-padding: var(--x-button-small-padding);--x-button-border-radius: var(--x-button-small-border-radius)}.x-button-medium{--x-button-height: var(--x-button-medium-height);--x-button-font-size: var(--x-button-medium-font-size);--x-button-padding: var(--x-button-medium-padding);--x-button-border-radius: var(--x-button-medium-border-radius)}.x-button-large{--x-button-height: var(--x-button-large-height);--x-button-font-size: var(--x-button-large-font-size);--x-button-padding: var(--x-button-large-padding);--x-button-border-radius: var(--x-button-large-border-radius)}.x-button-huge{--x-button-height: var(--x-button-huge-height);--x-button-font-size: var(--x-button-huge-font-size);--x-button-font-weight: var(--x-button-huge-font-weight);--x-button-padding: var(--x-button-huge-padding);--x-button-border-radius: var(--x-button-huge-border-radius)}.x-button-round{--x-button-border-radius: var(--x-button-height);height:var(--x-button-height)}.x-button-circle{--x-button-width: var(--x-button-height);--x-button-padding: 0;--x-button-border-radius: 100%;width:var(--x-button-height);height:var(--x-button-height)}.x-button-group{display:flex;width:min-content}.x-button-group>.x-button:first-child{border-top-right-radius:0;border-bottom-right-radius:0}.x-button-group>.x-button:last-child{margin-left:-1px;border-left-color:var(--x-button-group-color-separator);border-top-left-radius:0;border-bottom-left-radius:0}.x-button-group>.x-button:not(:first-child):not(:last-child){margin-left:-1px;border-left-color:var(--x-button-group-color-separator);border-radius:0}
package/dist/style/color-picker.css CHANGED
@@ -1 +1 @@
1
- :root{--x-color-picker-panel-bg: var(--x-color-bg-elevated);--x-color-picker-panel-shadow: var(--x-shadow-popover);--x-color-picker-border: var(--x-color-border-subtle);--x-color-picker-color-text: var(--x-color-text-2);--x-color-picker-color-text_active: var(--x-color-primary-text);--x-color-picker-color-handle-bg: var(--x-color-bg-surface);--x-color-picker-color-handle-border: var(--x-color-neutral-5);--x-color-picker-color-trigger-bg: var(--x-color-bg-surface);--x-color-picker-color-swatch_border: var(--x-color-neutral-4);--x-color-picker-color-swatch_active: var(--x-color-primary-text);--x-color-picker-color-swatch-check: var(--x-color-white);--x-color-picker-checker: var(--x-color-fill-2);--x-color-picker-checker-alt: var(--x-color-bg-surface);--x-color-picker-border-radius: var(--x-border-radius-medium);--x-color-picker-border-radius-swatch: var(--x-border-radius-small);--x-color-picker-size-panel-width: 240px;--x-color-picker-size-sv-height: 140px;--x-color-picker-size-slider-height: 10px;--x-color-picker-size-handle: 12px;--x-color-picker-size-trigger: var(--x-size-8);--x-color-picker-size-trigger-color: var(--x-size-5);--x-color-picker-size-swatch: var(--x-size-6);--x-color-picker-spacing-panel: var(--x-spacing-4);--x-color-picker-spacing-slider: var(--x-spacing-4);--x-color-picker-spacing-inputs: var(--x-spacing-3);--x-color-picker-spacing-swatches: var(--x-spacing-2);--x-color-picker-font-size: var(--x-font-size-body-1)}.x-color-picker{display:inline-block;font-size:var(--x-color-picker-font-size)}.x-color-picker--trigger{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:var(--x-color-picker-size-trigger);height:var(--x-color-picker-size-trigger);padding:0;background-color:var(--x-color-picker-color-trigger-bg);border:1px solid var(--x-color-picker-border);border-radius:var(--x-color-picker-border-radius-swatch);cursor:pointer;transition:border-color var(--x-transition-duration-1) var(--x-transition-timing-function-linear)}.x-color-picker--trigger:hover{border-color:var(--x-color-picker-color-text_active)}.x-color-picker--trigger:focus-visible{outline:2px solid var(--x-color-primary-text);outline-offset:1px}.x-color-picker--trigger:disabled{cursor:not-allowed;opacity:.5}.x-color-picker--trigger-wrapper{display:inline-flex;gap:var(--x-spacing-2);align-items:center}.x-color-picker--trigger-label{color:var(--x-color-picker-color-text);line-height:var(--x-line-height-base)}.x-color-picker--trigger-color{display:block;width:var(--x-color-picker-size-trigger-color);height:var(--x-color-picker-size-trigger-color);border-radius:var(--x-border-radius-small)}.x-color-picker--panel{box-sizing:border-box;width:var(--x-color-picker-size-panel-width);overflow:hidden;color:var(--x-color-picker-color-text);background-color:var(--x-color-picker-panel-bg);border-radius:var(--x-color-picker-border-radius);box-shadow:var(--x-color-picker-panel-shadow)}.x-color-picker--panel-body{display:flex;flex-direction:column;gap:var(--x-color-picker-spacing-slider);padding:var(--x-color-picker-spacing-panel)}.x-color-picker--sv{position:relative;height:var(--x-color-picker-size-sv-height);border-radius:var(--x-color-picker-border-radius-swatch);cursor:crosshair;touch-action:none}.x-color-picker--sv.x-color-picker-is-dragging{cursor:grabbing}.x-color-picker--sv:focus-visible{outline:2px solid var(--x-color-primary-text);outline-offset:2px}.x-color-picker--sv-white{position:absolute;inset:0;background-image:linear-gradient(to right, var(--x-color-white), var(--x-color-transparent));border-radius:inherit}.x-color-picker--sv-black{position:absolute;inset:0;background-image:linear-gradient(to top, var(--x-color-black), var(--x-color-transparent));border-radius:inherit}.x-color-picker--sv-handler{position:absolute;box-sizing:border-box;width:var(--x-color-picker-size-handle);height:var(--x-color-picker-size-handle);background-color:var(--x-color-picker-color-handle-bg);border:2px solid var(--x-color-picker-color-handle-bg);border-radius:50%;box-shadow:0 0 0 1px var(--x-color-picker-color-handle-border);transform:translate(-50%, -50%);pointer-events:none}.x-color-picker--sliders{display:flex;flex-direction:column;gap:var(--x-color-picker-spacing-inputs)}.x-color-picker--slider{padding:0;cursor:pointer}.x-color-picker--slider:focus-visible{outline:2px solid var(--x-color-primary-text);outline-offset:2px}.x-color-picker--slider-track{position:relative;height:var(--x-color-picker-size-slider-height);border-radius:var(--x-border-radius-small)}.x-color-picker--slider-handler{position:absolute;top:50%;box-sizing:border-box;width:var(--x-color-picker-size-handle);height:var(--x-color-picker-size-handle);background-color:var(--x-color-picker-color-handle-bg);border:2px solid var(--x-color-picker-color-handle-bg);border-radius:50%;box-shadow:0 0 0 1px var(--x-color-picker-color-handle-border);transform:translate(-50%, -50%);pointer-events:none}.x-color-picker--modes{display:flex;gap:var(--x-spacing-1)}.x-color-picker--mode{flex:1;padding:var(--x-spacing-1) var(--x-spacing-2);color:var(--x-color-picker-color-text);font-size:var(--x-color-picker-font-size);line-height:var(--x-line-height-base);background-color:var(--x-color-transparent);border:none;border-radius:var(--x-border-radius-small);cursor:pointer;transition:color var(--x-transition-duration-1) var(--x-transition-timing-function-linear),background-color var(--x-transition-duration-1) var(--x-transition-timing-function-linear)}.x-color-picker--mode:hover:not(:disabled){background-color:var(--x-color-fill-2)}.x-color-picker--mode:disabled{cursor:not-allowed}.x-color-picker--mode.x-color-picker-is-active{color:var(--x-color-picker-color-text_active);background-color:var(--x-color-primary-subtle)}.x-color-picker--inputs{display:flex;gap:var(--x-color-picker-spacing-inputs);align-items:center}.x-color-picker--channel{flex:1;min-width:0}.x-color-picker--swatches{display:flex;flex-wrap:wrap;gap:var(--x-color-picker-spacing-swatches)}.x-color-picker--swatch{position:relative;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:var(--x-color-picker-size-swatch);height:var(--x-color-picker-size-swatch);padding:0;color:var(--x-color-picker-color-swatch-check);border:1px solid var(--x-color-picker-color-swatch_border);border-radius:var(--x-color-picker-border-radius-swatch);cursor:pointer;transition:transform var(--x-transition-duration-1) var(--x-transition-timing-function-linear)}.x-color-picker--swatch:hover:not(:disabled){transform:scale(1.1)}.x-color-picker--swatch:disabled{cursor:not-allowed;opacity:.5}.x-color-picker--swatch.x-color-picker-is-active{box-shadow:0 0 0 1px var(--x-color-picker-color-swatch_active)}.x-color-picker--swatch .x-icon{width:var(--x-size-3);height:var(--x-size-3);font-size:var(--x-size-3)}.x-color-picker--panel-footer{display:flex;align-items:center;justify-content:space-between;padding:var(--x-color-picker-spacing-panel);padding-top:0}
1
+ :root{--x-color-picker-panel-bg: var(--x-color-bg-elevated);--x-color-picker-panel-shadow: var(--x-shadow-popover);--x-color-picker-border: var(--x-color-border-subtle);--x-color-picker-color-text: var(--x-color-text-2);--x-color-picker-color-text_active: var(--x-color-primary-text);--x-color-picker-color-handle-bg: var(--x-color-bg-surface);--x-color-picker-color-handle-border: var(--x-color-neutral-5);--x-color-picker-color-trigger-bg: var(--x-color-bg-surface);--x-color-picker-color-swatch_border: var(--x-color-neutral-4);--x-color-picker-color-swatch_active: var(--x-color-primary-text);--x-color-picker-color-swatch-check: var(--x-color-white);--x-color-picker-checker: var(--x-color-fill-2);--x-color-picker-checker-alt: var(--x-color-bg-surface);--x-color-picker-border-radius: var(--x-border-radius-medium);--x-color-picker-border-radius-swatch: var(--x-border-radius-small);--x-color-picker-size-panel-width: 240px;--x-color-picker-size-sv-height: 140px;--x-color-picker-size-slider-height: 10px;--x-color-picker-size-handle: 12px;--x-color-picker-size-trigger: var(--x-size-8);--x-color-picker-size-trigger-color: var(--x-size-5);--x-color-picker-size-swatch: var(--x-size-6);--x-color-picker-spacing-panel: var(--x-spacing-4);--x-color-picker-spacing-slider: var(--x-spacing-4);--x-color-picker-spacing-inputs: var(--x-spacing-3);--x-color-picker-spacing-swatches: var(--x-spacing-2);--x-color-picker-font-size: var(--x-font-size-body-1)}.x-color-picker{display:inline-block;font-size:var(--x-color-picker-font-size)}.x-color-picker.x-color-picker-size-mini{--x-color-picker-size-trigger: var(--x-input-size-mini-height)}.x-color-picker.x-color-picker-size-small{--x-color-picker-size-trigger: var(--x-input-size-small-height)}.x-color-picker.x-color-picker-size-medium{--x-color-picker-size-trigger: var(--x-input-size-medium-height)}.x-color-picker.x-color-picker-size-large{--x-color-picker-size-trigger: var(--x-input-size-large-height)}.x-color-picker--trigger{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:var(--x-color-picker-size-trigger);height:var(--x-color-picker-size-trigger);padding:0;background-color:var(--x-color-picker-color-trigger-bg);border:1px solid var(--x-color-picker-border);border-radius:var(--x-color-picker-border-radius-swatch);cursor:pointer;transition:border-color var(--x-transition-duration-1) var(--x-transition-timing-function-linear)}.x-color-picker--trigger:hover{border-color:var(--x-color-picker-color-text_active)}.x-color-picker--trigger:focus-visible{outline:2px solid var(--x-color-primary-text);outline-offset:1px}.x-color-picker--trigger:disabled{cursor:not-allowed;opacity:.5}.x-color-picker-error .x-color-picker--trigger{border-color:var(--x-color-danger-solid)}.x-color-picker--trigger-wrapper{display:inline-flex;gap:var(--x-spacing-2);align-items:center}.x-color-picker--trigger-label{color:var(--x-color-picker-color-text);line-height:var(--x-line-height-base)}.x-color-picker--trigger-color{display:block;width:min(var(--x-color-picker-size-trigger-color),var(--x-color-picker-size-trigger) - 8px);height:min(var(--x-color-picker-size-trigger-color),var(--x-color-picker-size-trigger) - 8px);border-radius:var(--x-border-radius-small)}.x-color-picker--panel{box-sizing:border-box;width:var(--x-color-picker-size-panel-width);overflow:hidden;color:var(--x-color-picker-color-text);background-color:var(--x-color-picker-panel-bg);border-radius:var(--x-color-picker-border-radius);box-shadow:var(--x-color-picker-panel-shadow)}.x-color-picker--panel-body{display:flex;flex-direction:column;gap:var(--x-color-picker-spacing-slider);padding:var(--x-color-picker-spacing-panel)}.x-color-picker--sv{position:relative;height:var(--x-color-picker-size-sv-height);border-radius:var(--x-color-picker-border-radius-swatch);cursor:crosshair;touch-action:none}.x-color-picker--sv.x-color-picker-is-dragging{cursor:grabbing}.x-color-picker--sv:focus-visible{outline:2px solid var(--x-color-primary-text);outline-offset:2px}.x-color-picker--sv-white{position:absolute;inset:0;background-image:linear-gradient(to right, var(--x-color-white), var(--x-color-transparent));border-radius:inherit}.x-color-picker--sv-black{position:absolute;inset:0;background-image:linear-gradient(to top, var(--x-color-black), var(--x-color-transparent));border-radius:inherit}.x-color-picker--sv-handler{position:absolute;box-sizing:border-box;width:var(--x-color-picker-size-handle);height:var(--x-color-picker-size-handle);background-color:var(--x-color-picker-color-handle-bg);border:2px solid var(--x-color-picker-color-handle-bg);border-radius:50%;box-shadow:0 0 0 1px var(--x-color-picker-color-handle-border);transform:translate(-50%, -50%);pointer-events:none}.x-color-picker--sliders{display:flex;flex-direction:column;gap:var(--x-color-picker-spacing-inputs)}.x-color-picker--slider{padding:0;cursor:pointer;touch-action:none}.x-color-picker--slider:focus-visible{outline:2px solid var(--x-color-primary-text);outline-offset:2px}.x-color-picker--slider-track{position:relative;height:var(--x-color-picker-size-slider-height);border-radius:var(--x-border-radius-small)}.x-color-picker--slider-handler{position:absolute;top:50%;box-sizing:border-box;width:var(--x-color-picker-size-handle);height:var(--x-color-picker-size-handle);background-color:var(--x-color-picker-color-handle-bg);border:2px solid var(--x-color-picker-color-handle-bg);border-radius:50%;box-shadow:0 0 0 1px var(--x-color-picker-color-handle-border);transform:translate(-50%, -50%);pointer-events:none}.x-color-picker--modes{display:flex;gap:var(--x-spacing-1)}.x-color-picker--mode{flex:1;padding:var(--x-spacing-1) var(--x-spacing-2);color:var(--x-color-picker-color-text);font-size:var(--x-color-picker-font-size);line-height:var(--x-line-height-base);background-color:var(--x-color-transparent);border:none;border-radius:var(--x-border-radius-small);cursor:pointer;transition:color var(--x-transition-duration-1) var(--x-transition-timing-function-linear),background-color var(--x-transition-duration-1) var(--x-transition-timing-function-linear)}.x-color-picker--mode:hover:not(:disabled){background-color:var(--x-color-fill-2)}.x-color-picker--mode:disabled{cursor:not-allowed}.x-color-picker--mode.x-color-picker-is-active{color:var(--x-color-picker-color-text_active);background-color:var(--x-color-primary-subtle)}.x-color-picker--inputs{display:flex;gap:var(--x-color-picker-spacing-inputs);align-items:center}.x-color-picker--channel{flex:1;min-width:0}.x-color-picker--swatches{display:flex;flex-wrap:wrap;gap:var(--x-color-picker-spacing-swatches)}.x-color-picker--swatch{position:relative;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:var(--x-color-picker-size-swatch);height:var(--x-color-picker-size-swatch);padding:0;color:var(--x-color-picker-color-swatch-check);border:1px solid var(--x-color-picker-color-swatch_border);border-radius:var(--x-color-picker-border-radius-swatch);cursor:pointer;transition:transform var(--x-transition-duration-1) var(--x-transition-timing-function-linear)}.x-color-picker--swatch:hover:not(:disabled){transform:scale(1.1)}.x-color-picker--swatch:disabled{cursor:not-allowed;opacity:.5}.x-color-picker--swatch.x-color-picker-is-active{box-shadow:0 0 0 1px var(--x-color-picker-color-swatch_active)}.x-color-picker--swatch .x-icon{width:var(--x-size-3);height:var(--x-size-3);font-size:var(--x-size-3)}.x-color-picker--panel-footer{display:flex;align-items:center;justify-content:space-between;padding:var(--x-color-picker-spacing-panel);padding-top:0}
package/dist/style/color-picker.js CHANGED
@@ -1,2 +1,6 @@
1
1
  import './base.css';
2
2
  import './color-picker.css';
3
+ import './button.css';
4
+ import './form-input.css';
5
+ import './form-input-number.css';
6
+ import './trigger.css';
package/dist/style/date-picker.js CHANGED
@@ -1,2 +1,6 @@
1
1
  import './base.css';
2
+ import './button.css';
2
3
  import './date-picker.css';
4
+ import './scrollbar-v2.css';
5
+ import './time-picker.css';
6
+ import './trigger.css';
package/dist/style/dependencies.json ADDED
@@ -0,0 +1,296 @@
1
+ {
2
+ "alert": [
3
+ "base.css",
4
+ "alert.css"
5
+ ],
6
+ "bar-chart": [
7
+ "base.css",
8
+ "bar-chart.css",
9
+ "spin.css"
10
+ ],
11
+ "color-picker": [
12
+ "base.css",
13
+ "color-picker.css",
14
+ "button.css",
15
+ "form-input.css",
16
+ "form-input-number.css",
17
+ "trigger.css"
18
+ ],
19
+ "button": [
20
+ "base.css",
21
+ "button.css"
22
+ ],
23
+ "date-picker": [
24
+ "base.css",
25
+ "button.css",
26
+ "date-picker.css",
27
+ "scrollbar-v2.css",
28
+ "time-picker.css",
29
+ "trigger.css"
30
+ ],
31
+ "drawer": [
32
+ "base.css",
33
+ "button.css",
34
+ "drawer.css",
35
+ "scrollbar-v2.css",
36
+ "space.css"
37
+ ],
38
+ "dialog": [
39
+ "base.css",
40
+ "button.css",
41
+ "dialog.css",
42
+ "space.css"
43
+ ],
44
+ "dropdown": [
45
+ "base.css",
46
+ "button.css",
47
+ "dropdown.css",
48
+ "empty.css",
49
+ "scrollbar-v2.css",
50
+ "spin.css",
51
+ "trigger.css"
52
+ ],
53
+ "empty": [
54
+ "base.css",
55
+ "empty.css"
56
+ ],
57
+ "form": [
58
+ "base.css",
59
+ "form.css",
60
+ "grid.css",
61
+ "trigger.css",
62
+ "tooltip.css"
63
+ ],
64
+ "form-checkbox": [
65
+ "base.css",
66
+ "form-checkbox.css"
67
+ ],
68
+ "form-input": [
69
+ "base.css",
70
+ "button.css",
71
+ "form-input.css"
72
+ ],
73
+ "form-input-number": [
74
+ "base.css",
75
+ "button.css",
76
+ "form-input.css",
77
+ "form-input-number.css"
78
+ ],
79
+ "form-input-tag": [
80
+ "base.css",
81
+ "form-input-tag.css"
82
+ ],
83
+ "form-radio": [
84
+ "base.css",
85
+ "form-radio.css"
86
+ ],
87
+ "form-select": [
88
+ "base.css",
89
+ "empty.css",
90
+ "form-checkbox.css",
91
+ "form-select.css",
92
+ "scrollbar-v2.css",
93
+ "spin.css",
94
+ "trigger.css"
95
+ ],
96
+ "form-slider": [
97
+ "base.css",
98
+ "button.css",
99
+ "form-input.css",
100
+ "form-input-number.css",
101
+ "form-slider.css",
102
+ "trigger.css",
103
+ "tooltip.css"
104
+ ],
105
+ "form-switch": [
106
+ "base.css",
107
+ "form-switch.css"
108
+ ],
109
+ "form-textarea": [
110
+ "base.css",
111
+ "form-textarea.css"
112
+ ],
113
+ "grid": [
114
+ "base.css",
115
+ "grid.css"
116
+ ],
117
+ "heatmap": [
118
+ "base.css",
119
+ "heatmap.css",
120
+ "spin.css"
121
+ ],
122
+ "image": [
123
+ "base.css",
124
+ "image.css",
125
+ "trigger.css",
126
+ "tooltip.css"
127
+ ],
128
+ "layout": [
129
+ "base.css",
130
+ "layout.css",
131
+ "resize-box.css"
132
+ ],
133
+ "line-chart": [
134
+ "base.css",
135
+ "line-chart.css",
136
+ "spin.css"
137
+ ],
138
+ "link": [
139
+ "base.css",
140
+ "link.css"
141
+ ],
142
+ "menu": [
143
+ "base.css",
144
+ "menu.css",
145
+ "scrollbar-v2.css",
146
+ "trigger.css",
147
+ "tooltip.css"
148
+ ],
149
+ "message": [
150
+ "base.css",
151
+ "message.css"
152
+ ],
153
+ "message-box": [
154
+ "base.css",
155
+ "button.css",
156
+ "dialog.css",
157
+ "message-box.css",
158
+ "space.css"
159
+ ],
160
+ "network": [
161
+ "base.css",
162
+ "network.css"
163
+ ],
164
+ "notification": [
165
+ "base.css",
166
+ "notification.css"
167
+ ],
168
+ "pagination": [
169
+ "base.css",
170
+ "button.css",
171
+ "empty.css",
172
+ "form-checkbox.css",
173
+ "form-input.css",
174
+ "form-input-number.css",
175
+ "form-select.css",
176
+ "pagination.css",
177
+ "scrollbar-v2.css",
178
+ "spin.css",
179
+ "trigger.css"
180
+ ],
181
+ "pie-chart": [
182
+ "base.css",
183
+ "pie-chart.css",
184
+ "spin.css"
185
+ ],
186
+ "popconfirm": [
187
+ "base.css",
188
+ "button.css",
189
+ "popconfirm.css",
190
+ "space.css",
191
+ "trigger.css"
192
+ ],
193
+ "popover": [
194
+ "base.css",
195
+ "popover.css",
196
+ "trigger.css"
197
+ ],
198
+ "popup": [
199
+ "base.css",
200
+ "popover.css",
201
+ "popup.css",
202
+ "trigger.css"
203
+ ],
204
+ "progress": [
205
+ "base.css",
206
+ "progress.css"
207
+ ],
208
+ "rate": [
209
+ "base.css",
210
+ "rate.css"
211
+ ],
212
+ "resize-box": [
213
+ "base.css",
214
+ "resize-box.css"
215
+ ],
216
+ "scrollbar-v2": [
217
+ "base.css",
218
+ "scrollbar-v2.css"
219
+ ],
220
+ "skeleton": [
221
+ "base.css",
222
+ "skeleton.css"
223
+ ],
224
+ "space": [
225
+ "base.css",
226
+ "space.css"
227
+ ],
228
+ "spin": [
229
+ "base.css",
230
+ "spin.css"
231
+ ],
232
+ "steps": [
233
+ "base.css",
234
+ "steps.css"
235
+ ],
236
+ "table": [
237
+ "base.css",
238
+ "button.css",
239
+ "empty.css",
240
+ "form-checkbox.css",
241
+ "form-input.css",
242
+ "form-input-number.css",
243
+ "form-radio.css",
244
+ "form-select.css",
245
+ "pagination.css",
246
+ "scrollbar-v2.css",
247
+ "spin.css",
248
+ "table.css",
249
+ "trigger.css",
250
+ "tooltip.css"
251
+ ],
252
+ "tabs": [
253
+ "base.css",
254
+ "tabs.css"
255
+ ],
256
+ "tag": [
257
+ "base.css",
258
+ "tag.css"
259
+ ],
260
+ "time-picker": [
261
+ "base.css",
262
+ "button.css",
263
+ "scrollbar-v2.css",
264
+ "time-picker.css",
265
+ "trigger.css"
266
+ ],
267
+ "time-range-selector": [
268
+ "base.css",
269
+ "time-range-selector.css"
270
+ ],
271
+ "trigger": [
272
+ "base.css",
273
+ "trigger.css"
274
+ ],
275
+ "tooltip": [
276
+ "base.css",
277
+ "trigger.css",
278
+ "tooltip.css"
279
+ ],
280
+ "timeline": [
281
+ "base.css",
282
+ "timeline.css"
283
+ ],
284
+ "upload": [
285
+ "base.css",
286
+ "image.css",
287
+ "progress.css",
288
+ "trigger.css",
289
+ "tooltip.css",
290
+ "upload.css"
291
+ ],
292
+ "watermark": [
293
+ "base.css",
294
+ "watermark.css"
295
+ ]
296
+ }
package/dist/style/dialog.js CHANGED
@@ -1,2 +1,4 @@
1
1
  import './base.css';
2
+ import './button.css';
2
3
  import './dialog.css';
4
+ import './space.css';
package/dist/style/drawer.js CHANGED
@@ -1,2 +1,5 @@
1
1
  import './base.css';
2
+ import './button.css';
2
3
  import './drawer.css';
4
+ import './scrollbar-v2.css';
5
+ import './space.css';
package/dist/style/dropdown.js CHANGED
@@ -1,2 +1,7 @@
1
1
  import './base.css';
2
+ import './button.css';
2
3
  import './dropdown.css';
4
+ import './empty.css';
5
+ import './scrollbar-v2.css';
6
+ import './spin.css';
7
+ import './trigger.css';
package/dist/style/form-checkbox.css CHANGED
@@ -1 +1 @@
1
- :root{--x-checkbox-mask-border-width: var(--x-border-2);--x-checkbox-mask-border-style: var(--x-border-solid);--x-checkbox-mask-border-radius: var(--x-border-radius-small);--x-checkbox-mask-bg-color-bg: var(--x-icon-hover-color-bg);--x-checkbox-mask-color-bg: var(--x-color-bg-white);--x-checkbox-mask-color-bg_checked: var(--x-color-primary-6);--x-checkbox-mask-color-bg_disabled: var(--x-color-fill-2);--x-checkbox-mask-color-bg_checked_disabled: var(--x-color-primary-light-3);--x-checkbox-mask-color-border: var(--x-color-fill-3);--x-checkbox-mask-color-border_hover: var(--x-color-fill-4);--x-checkbox-mask-color-border_checked: var(--x-color-transparent);--x-checkbox-mask-color-border_checked_disabled: var(--x-color-transparent);--x-checkbox-mask-color-border_disabled: var(--x-color-fill-3);--x-checkbox-color-text: var(--x-color-text-1);--x-checkbox-color-text_disabled: var(--x-color-text-4);--x-checkbox-group-spacing: var(--x-spacing-7);--x-checkbox-text-mask-spacing: var(--x-spacing-4);--x-checkbox-text-font-size: var(--x-font-size-body-3);--x-checkbox-group-size-line-height_vertical: var(--x-size-8);--x-checkbox-size-check-icon: var(--x-size-2);--x-checkbox-color-check-icon: var(--x-color-white);--x-checkbox-color-check-icon_disabled: var(--x-color-fill-3);--x-checkbox-color-indeterminate-icon-width: 6px;--x-checkbox-color-indeterminate-icon-height: 2px;--x-checkbox-color-indeterminate-icon: var(--x-color-white)}.x-icon-hover.x-checkbox-icon-hover::before{width:24px;height:24px}.x-checkbox{position:relative;display:inline-flex;align-items:center;box-sizing:border-box;padding-left:5px;font-size:var(--x-checkbox-text-font-size);line-height:var(--x-line-height-base);cursor:pointer}.x-checkbox>input[type=checkbox]{position:absolute;top:0;left:0;width:0;height:0;opacity:0}.x-checkbox>input[type=checkbox]:focus-visible+.x-checkbox-icon-hover::before{background-color:var(--x-icon-hover-color-bg)}.x-checkbox:hover .x-checkbox-icon-hover::before{background-color:var(--x-checkbox-mask-bg-color-bg)}.x-checkbox--label{margin-left:var(--x-checkbox-text-mask-spacing);color:var(--x-checkbox-color-text)}.x-checkbox-icon{position:relative;box-sizing:border-box;width:14px;height:14px;background-color:var(--x-checkbox-mask-color-bg);border:var(--x-checkbox-mask-border-width) var(--x-checkbox-mask-border-style) var(--x-checkbox-mask-color-border);border-radius:var(--x-checkbox-mask-border-radius);user-select:none}.x-checkbox-icon::after{position:absolute;top:50%;left:50%;display:block;width:var(--x-checkbox-color-indeterminate-icon-width);height:var(--x-checkbox-color-indeterminate-icon-height);background:var(--x-checkbox-color-indeterminate-icon);border-radius:.5px;transform:translateX(-50%) translateY(-50%) scale(0);content:""}.x-checkbox-icon-check{position:relative;display:block;width:var(--x-checkbox-size-check-icon);height:100%;margin:0 auto;color:var(--x-checkbox-color-check-icon);transform:scale(0);transform-origin:center 75%}.x-checkbox:hover .x-checkbox-icon{border-color:var(--x-checkbox-mask-color-border_hover);transition:border-color var(--x-transition-duration-1) var(--x-transition-timing-function-linear),transform var(--x-transition-duration-3) var(--x-transition-timing-function-overshoot)}.x-checkbox-checked:hover .x-checkbox-icon,.x-checkbox-indeterminate:hover .x-checkbox-icon{transition:transform var(--x-transition-duration-3) var(--x-transition-timing-function-overshoot)}.x-checkbox-checked .x-checkbox-icon{background-color:var(--x-checkbox-mask-color-bg_checked);border-color:var(--x-checkbox-mask-color-border_checked)}.x-checkbox-checked .x-checkbox-icon-check{transform:scale(1);transition:transform var(--x-transition-duration-3) var(--x-transition-timing-function-overshoot)}.x-checkbox-indeterminate .x-checkbox-icon{background-color:var(--x-checkbox-mask-color-bg_checked);border-color:var(--x-checkbox-mask-color-border_checked)}.x-checkbox-indeterminate .x-checkbox-icon svg{transform:scale(0)}.x-checkbox-indeterminate .x-checkbox-icon::after{transform:translateX(-50%) translateY(-50%) scale(1);transition:transform var(--x-transition-duration-3) var(--x-transition-timing-function-overshoot)}.x-checkbox.x-checkbox-disabled{cursor:not-allowed}.x-checkbox.x-checkbox-disabled .x-checkbox-icon-hover{cursor:not-allowed}.x-checkbox-checked:hover .x-checkbox-icon,.x-checkbox-indeterminate:hover .x-checkbox-icon{border-color:var(--x-checkbox-mask-color-border_checked)}.x-checkbox-disabled .x-checkbox-icon{background-color:var(--x-checkbox-mask-color-bg_disabled);border-color:var(--x-checkbox-mask-color-border_disabled)}.x-checkbox-disabled.x-checkbox-checked .x-checkbox-icon,.x-checkbox-disabled.x-checkbox-checked:hover .x-checkbox-icon,.x-checkbox-disabled.x-checkbox-indeterminate .x-checkbox-icon,.x-checkbox-disabled.x-checkbox-indeterminate:hover .x-checkbox-icon{background-color:var(--x-checkbox-mask-color-bg_checked_disabled);border-color:var(--x-checkbox-mask-color-border_checked_disabled)}.x-checkbox-disabled:hover .x-checkbox-icon-hover::before,.x-checkbox-checked:hover .x-checkbox-icon-hover::before,.x-checkbox-indeterminate:hover .x-checkbox-icon-hover::before{background-color:var(--x-color-transparent)}.x-checkbox-disabled:hover .x-checkbox-icon{border-color:var(--x-checkbox-mask-color-border_disabled)}.x-checkbox-disabled .x-checkbox--label{color:var(--x-checkbox-color-text_disabled)}.x-checkbox-disabled .x-checkbox-icon-check{color:var(--x-checkbox-color-check-icon_disabled)}.x-checkbox-size-mini{padding-left:4px;font-size:var(--x-font-size-body-1)}.x-checkbox-size-mini .x-checkbox-icon-hover::before{width:20px;height:20px}.x-checkbox-size-mini .x-checkbox-icon{width:12px;height:12px}.x-checkbox-size-mini .x-checkbox-icon-check{width:8px}.x-checkbox-size-small{padding-left:3px;font-size:var(--x-font-size-body-3)}.x-checkbox-size-small .x-checkbox-icon-hover::before{width:20px;height:20px}.x-checkbox-size-small .x-checkbox-icon{width:14px;height:14px}.x-checkbox-size-small .x-checkbox-icon-check{width:10px}.x-checkbox-size-medium{padding-left:5px;font-size:var(--x-font-size-body-3)}.x-checkbox-size-medium .x-checkbox-icon-hover::before{width:24px;height:24px}.x-checkbox-size-medium .x-checkbox-icon{width:14px;height:14px}.x-checkbox-size-medium .x-checkbox-icon-check{width:10px}.x-checkbox-size-large{padding-left:6px;font-size:var(--x-font-size-body-3)}.x-checkbox-size-large .x-checkbox-icon-hover::before{width:28px;height:28px}.x-checkbox-size-large .x-checkbox-icon{width:16px;height:16px}.x-checkbox-size-large .x-checkbox-icon-check{width:12px}.x-checkbox--group{display:inline-block}.x-checkbox--group .x-checkbox{margin-right:var(--x-checkbox-group-spacing)}.x-checkbox--group-direction-vertical .x-checkbox{display:flex;margin-right:0;line-height:var(--x-checkbox-group-size-line-height_vertical)}
1
+ :root{--x-checkbox-mask-border-width: var(--x-border-2);--x-checkbox-mask-border-style: var(--x-border-solid);--x-checkbox-mask-border-radius: var(--x-border-radius-small);--x-checkbox-mask-bg-color-bg: var(--x-icon-hover-color-bg);--x-checkbox-mask-color-bg: var(--x-color-bg-white);--x-checkbox-mask-color-bg_checked: var(--x-color-primary-6);--x-checkbox-mask-color-bg_disabled: var(--x-color-fill-2);--x-checkbox-mask-color-bg_checked_disabled: var(--x-color-primary-light-3);--x-checkbox-mask-color-border: var(--x-color-fill-3);--x-checkbox-mask-color-border_hover: var(--x-color-fill-4);--x-checkbox-mask-color-border_checked: var(--x-color-transparent);--x-checkbox-mask-color-border_checked_disabled: var(--x-color-transparent);--x-checkbox-mask-color-border_disabled: var(--x-color-fill-3);--x-checkbox-color-text: var(--x-color-text-1);--x-checkbox-color-text_disabled: var(--x-color-text-4);--x-checkbox-group-spacing: var(--x-spacing-7);--x-checkbox-text-mask-spacing: var(--x-spacing-4);--x-checkbox-text-font-size: var(--x-font-size-body-3);--x-checkbox-group-size-line-height_vertical: var(--x-size-8);--x-checkbox-size-check-icon: var(--x-size-2);--x-checkbox-color-check-icon: var(--x-color-white);--x-checkbox-color-check-icon_disabled: var(--x-color-fill-3);--x-checkbox-color-indeterminate-icon-width: 6px;--x-checkbox-color-indeterminate-icon-height: 2px;--x-checkbox-color-indeterminate-icon: var(--x-color-white)}.x-icon-hover.x-checkbox-icon-hover::before{width:24px;height:24px}.x-checkbox{position:relative;display:inline-flex;align-items:center;box-sizing:border-box;padding-left:5px;font-size:var(--x-checkbox-text-font-size);line-height:var(--x-line-height-base);cursor:pointer}.x-checkbox>input[type=checkbox]{position:absolute;top:50%;left:5px;z-index:1;width:14px;height:14px;margin:0;cursor:inherit;opacity:0;transform:translateY(-50%)}.x-checkbox:has(>input:focus-visible){outline:2px solid var(--x-color-primary-text);outline-offset:2px;border-radius:var(--x-checkbox-mask-border-radius)}.x-checkbox:hover .x-checkbox-icon-hover::before{background-color:var(--x-checkbox-mask-bg-color-bg)}.x-checkbox--label{margin-left:var(--x-checkbox-text-mask-spacing);color:var(--x-checkbox-color-text)}.x-checkbox-icon{position:relative;box-sizing:border-box;width:14px;height:14px;background-color:var(--x-checkbox-mask-color-bg);border:var(--x-checkbox-mask-border-width) var(--x-checkbox-mask-border-style) var(--x-checkbox-mask-color-border);border-radius:var(--x-checkbox-mask-border-radius);user-select:none}.x-checkbox-icon::after{position:absolute;top:50%;left:50%;display:block;width:var(--x-checkbox-color-indeterminate-icon-width);height:var(--x-checkbox-color-indeterminate-icon-height);background:var(--x-checkbox-color-indeterminate-icon);border-radius:.5px;transform:translateX(-50%) translateY(-50%) scale(0);content:""}.x-checkbox-icon-check{position:relative;display:block;width:var(--x-checkbox-size-check-icon);height:100%;margin:0 auto;color:var(--x-checkbox-color-check-icon);transform:scale(0);transform-origin:center 75%}.x-checkbox:hover .x-checkbox-icon{border-color:var(--x-checkbox-mask-color-border_hover);transition:border-color var(--x-transition-duration-1) var(--x-transition-timing-function-linear),transform var(--x-transition-duration-3) var(--x-transition-timing-function-overshoot)}.x-checkbox-checked:hover .x-checkbox-icon,.x-checkbox-indeterminate:hover .x-checkbox-icon{transition:transform var(--x-transition-duration-3) var(--x-transition-timing-function-overshoot)}.x-checkbox-checked .x-checkbox-icon{background-color:var(--x-checkbox-mask-color-bg_checked);border-color:var(--x-checkbox-mask-color-border_checked)}.x-checkbox-checked .x-checkbox-icon-check{transform:scale(1);transition:transform var(--x-transition-duration-3) var(--x-transition-timing-function-overshoot)}.x-checkbox-indeterminate .x-checkbox-icon{background-color:var(--x-checkbox-mask-color-bg_checked);border-color:var(--x-checkbox-mask-color-border_checked)}.x-checkbox-indeterminate .x-checkbox-icon svg{transform:scale(0)}.x-checkbox-indeterminate .x-checkbox-icon::after{transform:translateX(-50%) translateY(-50%) scale(1);transition:transform var(--x-transition-duration-3) var(--x-transition-timing-function-overshoot)}.x-checkbox.x-checkbox-disabled{cursor:not-allowed}.x-checkbox.x-checkbox-disabled .x-checkbox-icon-hover{cursor:not-allowed}.x-checkbox-checked:hover .x-checkbox-icon,.x-checkbox-indeterminate:hover .x-checkbox-icon{border-color:var(--x-checkbox-mask-color-border_checked)}.x-checkbox-disabled .x-checkbox-icon{background-color:var(--x-checkbox-mask-color-bg_disabled);border-color:var(--x-checkbox-mask-color-border_disabled)}.x-checkbox-disabled.x-checkbox-checked .x-checkbox-icon,.x-checkbox-disabled.x-checkbox-checked:hover .x-checkbox-icon,.x-checkbox-disabled.x-checkbox-indeterminate .x-checkbox-icon,.x-checkbox-disabled.x-checkbox-indeterminate:hover .x-checkbox-icon{background-color:var(--x-checkbox-mask-color-bg_checked_disabled);border-color:var(--x-checkbox-mask-color-border_checked_disabled)}.x-checkbox-disabled:hover .x-checkbox-icon-hover::before,.x-checkbox-checked:hover .x-checkbox-icon-hover::before,.x-checkbox-indeterminate:hover .x-checkbox-icon-hover::before{background-color:var(--x-color-transparent)}.x-checkbox-disabled:hover .x-checkbox-icon{border-color:var(--x-checkbox-mask-color-border_disabled)}.x-checkbox-disabled .x-checkbox--label{color:var(--x-checkbox-color-text_disabled)}.x-checkbox-disabled .x-checkbox-icon-check{color:var(--x-checkbox-color-check-icon_disabled)}.x-checkbox-size-mini{padding-left:4px;font-size:var(--x-font-size-body-1)}.x-checkbox-size-mini .x-checkbox-icon-hover::before{width:20px;height:20px}.x-checkbox-size-mini .x-checkbox-icon{width:12px;height:12px}.x-checkbox-size-mini .x-checkbox-icon-check{width:8px}.x-checkbox-size-mini>input[type=checkbox]{left:4px;width:12px;height:12px}.x-checkbox-size-small{padding-left:3px;font-size:var(--x-font-size-body-3)}.x-checkbox-size-small .x-checkbox-icon-hover::before{width:20px;height:20px}.x-checkbox-size-small .x-checkbox-icon{width:14px;height:14px}.x-checkbox-size-small .x-checkbox-icon-check{width:10px}.x-checkbox-size-small>input[type=checkbox]{left:3px;width:14px;height:14px}.x-checkbox-size-medium{padding-left:5px;font-size:var(--x-font-size-body-3)}.x-checkbox-size-medium .x-checkbox-icon-hover::before{width:24px;height:24px}.x-checkbox-size-medium .x-checkbox-icon{width:14px;height:14px}.x-checkbox-size-medium .x-checkbox-icon-check{width:10px}.x-checkbox-size-medium>input[type=checkbox]{left:5px;width:14px;height:14px}.x-checkbox-size-large{padding-left:6px;font-size:var(--x-font-size-body-3)}.x-checkbox-size-large .x-checkbox-icon-hover::before{width:28px;height:28px}.x-checkbox-size-large .x-checkbox-icon{width:16px;height:16px}.x-checkbox-size-large .x-checkbox-icon-check{width:12px}.x-checkbox-size-large>input[type=checkbox]{left:6px;width:16px;height:16px}.x-checkbox--group{display:inline-block}.x-checkbox--group .x-checkbox{margin-right:var(--x-checkbox-group-spacing)}.x-checkbox--group-direction-vertical .x-checkbox{display:flex;margin-right:0;line-height:var(--x-checkbox-group-size-line-height_vertical)}
package/dist/style/form-input-number.js CHANGED
@@ -1,2 +1,4 @@
1
1
  import './base.css';
2
+ import './button.css';
3
+ import './form-input.css';
2
4
  import './form-input-number.css';