@bifrostui/react 2.0.0-beta.2 → 2.0.0-beta.5

package/dist/Card/index.css

@@ -0,0 +1,77 @@
+:root,
+page,
+xhs-page {
+  --bui-card-header-padding: var(--bui-spacing-md) var(--bui-spacing-lg);
+  --bui-card-footer-padding: var(--bui-spacing-md) var(--bui-spacing-lg);
+  --bui-card-header-title-font-size: var(--bui-title-size-4);
+  --bui-card-content-font-size: var(--bui-text-size-2);
+  --bui-card-footer-font-size: var(--bui-text-size-2);
+}
+.bui-card {
+  background-color: var(--bui-color-bg-view);
+  border-radius: var(--bui-shape-radius-card);
+  overflow: hidden;
+  font-family: var(--bui-font-family);
+}
+.bui-card-header + .bui-card-content {
+  padding-top: 0;
+}
+.bui-card-content {
+  padding: var(--bui-spacing-lg);
+  color: var(--bui-color-fg-muted);
+  font-size: var(--bui-card-content-font-size);
+}
+.bui-card-footer {
+  color: var(--bui-color-fg-muted);
+  display: flex;
+  align-items: center;
+  padding: var(--bui-card-footer-padding);
+  font-size: var(--bui-card-footer-font-size);
+}
+.bui-card-header {
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  position: relative;
+  padding: var(--bui-card-header-padding);
+  font-size: var(--bui-title-size-4);
+  font-weight: var(--bui-font-weight-bold);
+  font-family: var(--bui-font-family);
+  color: var(--bui-color-fg-default);
+}
+.bui-card-header-title {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+  flex-shrink: 0;
+  font-size: var(--bui-card-header-title-font-size);
+  font-family: var(--bui-font-family-accent, inherit);
+}
+.bui-card-header-subtitle {
+  font-size: var(--bui-text-size-3);
+  font-weight: normal;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: var(--bui-color-fg-subtle);
+  padding: 0 var(--bui-spacing-xs);
+}
+.bui-card-header-extra {
+  white-space: nowrap;
+}
+.bui-card-header-end-icon {
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+}
+.bui-card-header-extra,
+.bui-card-header-end-icon {
+  font-size: var(--bui-text-size-3);
+  font-weight: normal;
+  color: var(--bui-color-fg-subtle);
+  margin-left: auto;
+}
+.bui-card-header-extra + .bui-card-header-end-icon {
+  margin-left: 2px;
+}

package/dist/Checkbox/Checkbox.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import { CheckboxProps } from './Checkbox.types';
-import './Checkbox.less';
+import './index.less';
 declare const Checkbox: React.ForwardRefExoticComponent<Omit<CheckboxProps<"div", {}>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default Checkbox;

package/dist/Checkbox/Checkbox.js

@@ -64,7 +64,7 @@ var import_utils = require("@bifrostui/utils");
 var import_clsx = __toESM(require("clsx"));
 var import_react = __toESM(require("react"));
 var import_CheckboxContext = __toESM(require("./CheckboxContext"));
-var import_Checkbox2 = require("./Checkbox.css");
+var import_index = require("./index.css");
 const prefixCls = "bui-checkbox";
 const Checkbox = (0, import_react.forwardRef)((props, ref) => {
   var _b, _c;
@@ -112,7 +112,7 @@ const Checkbox = (0, import_react.forwardRef)((props, ref) => {
     console.error("CheckboxGroup\u6A21\u5F0F\u4E0BCheckbox\u987B\u4F20\u5165value\u5C5E\u6027");
   }
   const checkboxCheckIcon = checkedIcon || /* @__PURE__ */ import_react.default.createElement(import_icons.SuccessCircleFilledIcon, { color: "primary" });
-  const checkboxUncheckIcon = icon || /* @__PURE__ */ import_react.default.createElement(import_icons.CircleOutlinedIcon, { htmlColor: "#ced1d6" });
+  const checkboxUncheckIcon = icon || /* @__PURE__ */ import_react.default.createElement(import_icons.CircleOutlinedIcon, { color: "neutral" });
   const checkboxDisabled = disabled !== void 0 ? disabled : groupContext == null ? void 0 : groupContext.disabled;
   const handleChange = (e) => {
     var _a2, _b2, _c2;

package/dist/Checkbox/CheckboxGroup.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import { CheckboxGroupProps } from './Checkbox.types';
-import './Checkbox.less';
+import './index.less';
 declare const CheckboxGroup: React.ForwardRefExoticComponent<Omit<CheckboxGroupProps<"div", {}>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default CheckboxGroup;

package/dist/Checkbox/CheckboxGroup.js

@@ -60,7 +60,7 @@ var import_utils = require("@bifrostui/utils");
 var import_clsx = __toESM(require("clsx"));
 var import_react = __toESM(require("react"));
 var import_CheckboxContext = require("./CheckboxContext");
-var import_Checkbox2 = require("./Checkbox.css");
+var import_index = require("./index.css");
 const prefixCls = "bui-checkbox-group";
 const CheckboxGroup = (0, import_react.forwardRef)(
   (_a, ref) => {

package/dist/Checkbox/{Checkbox.css → index.css}

@@ -1,9 +1,13 @@
+:root,
+page,
+xhs-page {
+  --bui-checkbox-label-color: var(--bui-color-fg-default);
+  --bui-checkbox-label-font-size: var(--bui-text-size-1);
+  --bui-checkbox-icon-font-size: var(--bui-title-size-2);
+  --bui-checkbox-disabled-opacity: 0.5;
+  --bui-checkbox-icon-padding: 5px;
+}
 .bui-checkbox {
-  --label-color: var(--bui-checkbox-label-color, var(--bui-color-fg-default));
-  --label-font-size: var(--bui-checkbox-label-font-size, var(--bui-text-size-1));
-  --icon-font-size: var(--bui-checkbox-icon-font-size, var(--bui-title-size-2));
-  --disabled-opacity: var(--bui-checkbox-disabled-opacity, 0.5);
-  --icon-padding: var(--bui-checkbox-icon-padding, 5px);
   display: inline-flex;
   align-items: center;
   position: relative;
@@ -11,7 +15,7 @@
 }
 .bui-checkbox.bui-checkbox-disabled {
   pointer-events: none;
-  opacity: var(--disabled-opacity);
+  opacity: var(--bui-checkbox-disabled-opacity);
 }
 .bui-checkbox-label-left {
   flex-direction: row-reverse;
@@ -37,11 +41,11 @@
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
-  padding: var(--icon-padding);
+  padding: var(--bui-checkbox-icon-padding);
   box-sizing: border-box;
-  font-size: var(--icon-font-size);
+  font-size: var(--bui-checkbox-icon-font-size);
 }
 .bui-checkbox-label {
-  font-size: var(--label-font-size);
-  color: var(--label-color);
+  font-size: var(--bui-checkbox-label-font-size);
+  color: var(--bui-checkbox-label-color);
 }

package/dist/CitySelector/CitySelector.miniapp.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
 import { CitySelectorProps } from './CitySelector.types';
-import './miniapp.less';
 declare const CitySelector: React.ForwardRefExoticComponent<Omit<CitySelectorProps<"div", {}>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default CitySelector;

package/dist/CitySelector/CitySelector.miniapp.js

@@ -50,7 +50,6 @@ module.exports = __toCommonJS(CitySelector_miniapp_exports);
 var import_react = __toESM(require("react"));
 var import_taro = __toESM(require("@tarojs/taro"));
 var import_CitySelectorCore = __toESM(require("./CitySelectorCore"));
-var import_miniapp = require("./miniapp.css");
 const CitySelector = /* @__PURE__ */ import_react.default.forwardRef(
   (props, ref) => {
     const { cities } = props;

package/dist/CitySelector/CitySelectorCore.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import { CitySelectorCoreProps } from './CitySelector.types';
-import './CitySelector.less';
+import './index.less';
 declare const CitySelector: React.ForwardRefExoticComponent<Omit<CitySelectorCoreProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default CitySelector;

package/dist/CitySelector/CitySelectorCore.js

@@ -62,7 +62,7 @@ var import_utils = require("@bifrostui/utils");
 var import_locales = require("../locales");
 var import_ScrollView = __toESM(require("../ScrollView"));
 var import_Selector = __toESM(require("./Selector"));
-var import_CitySelector2 = require("./CitySelector.css");
+var import_index = require("./index.css");
 const DEVIATION_HEIGHT = "6vmin";
 const prefixCls = "bui-city-selector";
 const CitySelector = /* @__PURE__ */ import_react.default.forwardRef(

package/dist/CitySelector/Selector/index.css

@@ -1,11 +1,11 @@
 .bui-city-selector-item {
-  width: var(--select-item-width);
-  height: var(--select-item-height);
+  width: var(--bui-city-selector-item-width);
+  height: var(--bui-city-selector-item-height);
   display: inline-flex;
   justify-content: center;
   align-items: center;
-  border-radius: var(--select-item-border-radius);
-  margin: var(--select-item-margin);
+  border-radius: var(--bui-city-selector-item-border-radius);
+  margin: var(--bui-city-selector-item-margin);
   background-color: var(--bui-color-bg-default);
   font-size: var(--bui-text-size-2);
 }

package/{es/CitySelector/CitySelector.css → dist/CitySelector/index.css}

@@ -1,29 +1,33 @@
+:root,
+page,
+xhs-page {
+  --bui-city-selector-item-width: 111px;
+  --bui-city-selector-item-height: 36px;
+  --bui-city-selector-item-border-radius: 20px;
+  --bui-city-selector-item-margin: 4.5px 0 4.5px 9px;
+  --bui-city-selector-title-height: 45px;
+  --bui-city-selector-title-line-height: 45px;
+  --bui-city-selector-btn-close-size: 45px;
+  --bui-city-selector-btn-close-font-size: 20px;
+  --bui-city-selector-container-with-title-height: calc(100% - var(--bui-city-selector-title-height));
+  --bui-city-selector-city-container-min-height: 500px;
+  --bui-city-selector-select-city-buttons-padding: 7.5px 0 0 3px;
+  --bui-city-selector-select-city-title-line-height: 15px;
+  --bui-city-selector-list-item-height: 45px;
+  --bui-city-selector-city-index-has-title-top: calc(50% + var(--bui-city-selector-title-height) / 2);
+  --bui-city-selector-index-item-height: 20px;
+}
 .bui-city-selector {
-  --select-item-width: var(--bui-city-selector-item-width, 111px);
-  --select-item-height: var(--bui-city-selector-item-height, 36px);
-  --select-item-border-radius: var(--bui-city-selector-item-border-radius, 20px);
-  --select-item-margin: var(--bui-city-selector-item-margin, 4.5px 0 4.5px 9px);
-  --title-height: var(--bui-city-selector-title-height, 45px);
-  --title-line-height: var(--bui-city-selector-title-line-height, 45px);
-  --btn-close-size: var(--bui-city-selector-btn-close-size, 45px);
-  --btn-close-font-size: var(--bui-city-selector-btn-close-font-size, 20px);
-  --container-with-title-height: var(--bui-city-selector-container-with-title-height, calc(100% - var(--title-height)));
-  --city-container-min-height: var(--bui-city-selector-city-container-min-height, 500px);
-  --select-city-buttons-padding: var(--bui-city-selector-select-city-buttons-padding, 7.5px 0 0 3px);
-  --select-city-title-line-height: var(--bui-city-selector-select-city-title-line-height, 15px);
-  --list-item-height: var(--bui-city-selector-list-item-height, 45px);
-  --city-index-has-title-top: var(--bui-city-selector-city-index-has-title-top, calc(50% + var(--title-height) / 2));
-  --index-item-height: var(--bui-city-selector-index-item-height, 20px);
   font-family: var(--bui-font-family);
   height: 100%;
   position: relative;
 }
 .bui-city-selector-title {
   width: 100%;
-  height: var(--title-height);
+  height: var(--bui-city-selector-title-height);
   color: var(--bui-color-fg-default);
   font-size: var(--bui-title-size-3);
-  line-height: var(--title-line-height);
+  line-height: var(--bui-city-selector-title-line-height);
   text-align: center;
   position: sticky;
   top: 0;
@@ -35,20 +39,20 @@
   position: absolute;
   top: 0;
   right: 0;
-  width: var(--btn-close-size);
-  height: var(--btn-close-size);
+  width: var(--bui-city-selector-btn-close-size);
+  height: var(--bui-city-selector-btn-close-size);
   color: var(--bui-color-fg-muted);
   text-align: center;
-  font-size: var(--btn-close-font-size);
+  font-size: var(--bui-city-selector-btn-close-font-size);
 }
 .bui-city-selector-scroll-view-container {
   height: 100%;
 }
 .bui-city-selector-scroll-view-container.container-has-title {
-  height: var(--container-with-title-height);
+  height: var(--bui-city-selector-container-with-title-height);
 }
 .bui-city-selector-all-city {
-  min-height: var(--city-container-min-height);
+  min-height: var(--bui-city-selector-city-container-min-height);
   font-size: var(--bui-text-size-2);
   width: 100%;
   background: var(--bui-color-bg-view);
@@ -57,11 +61,11 @@
 .bui-city-selector-all-city .select-city-buttons {
   display: flex;
   flex-flow: wrap;
-  padding: var(--select-city-buttons-padding);
+  padding: var(--bui-city-selector-select-city-buttons-padding);
 }
 .bui-city-selector-all-city .select-city-title {
   font-size: var(--bui-title-size-4);
-  line-height: var(--select-city-title-line-height);
+  line-height: var(--bui-city-selector-select-city-title-line-height);
   font-weight: var(--bui-font-weight-bold);
   padding-left: var(--bui-spacing-lg);
   padding-top: var(--bui-spacing-md);
@@ -71,7 +75,7 @@
   list-style-type: none;
 }
 .bui-city-selector-list-item {
-  height: var(--list-item-height);
+  height: var(--bui-city-selector-list-item-height);
   font-size: var(--bui-title-size-4);
   display: flex;
   align-items: center;
@@ -95,7 +99,7 @@
   transform: translate(0, -50%);
 }
 .bui-city-selector-index-container.city-index-has-title {
-  top: var(--city-index-has-title-top);
+  top: var(--bui-city-selector-city-index-has-title-top);
 }
 .bui-city-selector-index-container ul {
   margin: 0;
@@ -106,7 +110,7 @@
 }
 .bui-city-selector-index-container li {
   list-style: none;
-  height: var(--index-item-height);
+  height: var(--bui-city-selector-index-item-height);
   text-align: center;
   font-size: var(--bui-text-size-3);
   color: var(--bui-color-info, --bui-color-info);

package/dist/Collapse/Collapse.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import { CollapseProps } from './Collapse.types';
-import './Collapse.less';
+import './index.less';
 declare const Collapse: React.ForwardRefExoticComponent<CollapseProps & React.RefAttributes<unknown>>;
 export default Collapse;

package/dist/Collapse/Collapse.js

@@ -62,7 +62,7 @@ module.exports = __toCommonJS(Collapse_exports);
 var import_react = __toESM(require("react"));
 var import_utils = require("@bifrostui/utils");
 var import_Transition = require("../Transition");
-var import_Collapse2 = require("./Collapse.css");
+var import_index = require("./index.css");
 const defaultEasing = {
   enter: import_utils.easing.easeOut,
   exit: import_utils.easing.sharp

package/dist/CollapsePanel/CollapsePanel.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import { CollapsePanelProps } from './CollapsePanel.types';
-import './CollapsePanel.less';
+import './index.less';
 declare const CollapsePanel: React.ForwardRefExoticComponent<Omit<CollapsePanelProps<"div", {}>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default CollapsePanel;

package/dist/CollapsePanel/CollapsePanel.js

@@ -64,7 +64,7 @@ var import_clsx = __toESM(require("clsx"));
 var import_icons = require("@bifrostui/icons");
 var import_utils = require("@bifrostui/utils");
 var import_CollapsePanelItem = __toESM(require("./CollapsePanelItem"));
-var import_CollapsePanel2 = require("./CollapsePanel.css");
+var import_index = require("./index.css");
 const prefixCls = "bui-collapse-panel";
 const CollapsePanel = /* @__PURE__ */ import_react.default.forwardRef(
   (props, ref) => {

package/dist/CollapsePanel/{CollapsePanel.css → index.css}

@@ -1,8 +1,12 @@
+:root,
+page,
+xhs-page {
+  --bui-collapse-panel-width: 100%;
+  --bui-collapse-panel-header-padding: var(--bui-spacing-lg) 0;
+  --bui-collapse-panel-content-padding: var(--bui-spacing-lg) 0;
+}
 .bui-collapse-panel {
-  --width: var(--bui-collapse-panel-width, 100%);
-  --header-padding: var(--bui-collapse-panel-header-padding, var(--bui-spacing-lg) 0);
-  --content-padding: var(--bui-collapse-panel-content-padding, var(--bui-spacing-lg) 0);
-  width: var(--width);
+  width: var(--bui-collapse-panel-width);
   background-color: var(--bui-color-bg-view);
   color: var(--bui-color-fg-default);
 }
@@ -14,7 +18,7 @@
   cursor: pointer;
 }
 .bui-collapse-panel-item-header-label {
-  padding: var(--header-padding);
+  padding: var(--bui-collapse-panel-header-padding);
   font-size: var(--bui-title-size-2);
 }
 .bui-collapse-panel-item-header-icon-arrow {
@@ -25,7 +29,7 @@
   transform: rotate(-180deg);
 }
 .bui-collapse-panel-item-content {
-  padding: var(--content-padding);
+  padding: var(--bui-collapse-panel-content-padding);
   font-size: var(--bui-text-size-1);
   transition: height 0.5s ease;
   overflow: hidden;

package/dist/Countdown/Countdown.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import { CountdownProps } from './Countdown.types';
-import './Countdown.less';
+import './index.less';
 declare const Countdown: React.ForwardRefExoticComponent<Omit<CountdownProps<"div", {}>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default Countdown;

package/dist/Countdown/Countdown.js

@@ -61,7 +61,7 @@ var import_react = __toESM(require("react"));
 var import_utils = require("@bifrostui/utils");
 var import_useCountdown = __toESM(require("./useCountdown"));
 var import_utils2 = require("./utils");
-var import_Countdown2 = require("./Countdown.css");
+var import_index = require("./index.css");
 const prefixCls = "bui-countdown";
 const Countdown = (0, import_react.forwardRef)((props, ref) => {
   const _a = props, {

package/{es/Countdown/Countdown.css → dist/Countdown/index.css}

@@ -1,14 +1,18 @@
+:root,
+page,
+xhs-page {
+  --bui-countdown-font-size: var(--bui-text-size-1);
+  --bui-countdown-color: var(--bui-color-fg-default);
+  --bui-countdown-font-weight: var(--bui-font-weight-normal);
+  --bui-countdown-slice-unit-margin: 0 2px;
+}
 .bui-countdown {
-  --font-size: var(--bui-countdown-font-size, var(--bui-text-size-1));
-  --color: var(--bui-countdown-color, var(--bui-color-fg-default));
-  --font-weight: var(--bui-countdown-font-weight, var(--bui-font-weight-normal));
-  --slice-unit-margin: var(--bui-countdown-slice-unit-margin, 0 2px);
   display: flex;
   flex-direction: row;
   align-items: center;
-  font-size: var(--font-size);
-  color: var(--color);
-  font-weight: var(--font-weight);
+  font-size: var(--bui-countdown-font-size);
+  color: var(--bui-countdown-color);
+  font-weight: var(--bui-countdown-font-weight);
   font-family: var(--bui-font-family);
 }
 .bui-countdown-slice {
@@ -35,5 +39,5 @@
     sans-serif;
 }
 .bui-countdown-slice-unit {
-  margin: var(--slice-unit-margin);
+  margin: var(--bui-countdown-slice-unit-margin);
 }

package/dist/Dialog/index.css

@@ -1,30 +1,34 @@
+:root,
+page,
+xhs-page {
+  --bui-dialog-max-width: 300px;
+  --bui-dialog-border-radius: var(--bui-shape-radius-drawer);
+  --bui-dialog-title-padding: 0 40px 9px;
+  --bui-dialog-desc-padding: 0 24px;
+  --bui-dialog-footer-margin-top: 15px;
+  --bui-dialog-button-height: 53px;
+  --bui-dialog-button-line-height: 25px;
+  --bui-dialog-button-padding: 12px 0 13px;
+  --bui-dialog-button-font-size: 17px;
+  --bui-dialog-button-border-left: 1px solid rgba(0, 0, 0, 0.05);
+  --bui-dialog-button-active-background-color: rgba(54, 57, 64, 0.05);
+}
 .bui-dialog {
-  --max-width: var(--bui-dialog-max-width, 300px);
-  --border-radius: var(--bui-dialog-border-radius, var(--bui-shape-radius-drawer));
-  --title-padding: var(--bui-dialog-title-padding, 0 40px 9px);
-  --desc-padding: var(--bui-dialog-desc-padding, 0 24px);
-  --footer-margin-top: var(--bui-dialog-footer-margin-top, 15px);
-  --button-height: var(--bui-dialog-button-height, 53px);
-  --button-line-height: var(--bui-dialog-button-line-height, 25px);
-  --button-padding: var(--bui-dialog-button-padding, 12px 0 13px);
-  --button-font-size: var(--bui-dialog-button-font-size, 17px);
-  --button-border-left: var(--bui-dialog-button-border-left, 1px solid rgba(0, 0, 0, 0.05));
-  --button-active-background-color: var(--bui-dialog-button-active-background-color, rgba(54, 57, 64, 0.05));
   display: flex;
   align-items: center;
   justify-content: center;
 }
 .bui-dialog-body {
   padding-top: 21px;
-  min-width: var(--max-width);
+  min-width: var(--bui-dialog-max-width);
   margin: 0 auto;
-  border-radius: var(--border-radius);
+  border-radius: var(--bui-dialog-border-radius);
   background-clip: padding-box;
   background-color: var(--bui-color-bg-view);
   line-height: 21px;
 }
 .bui-dialog-body-title {
-  padding: var(--title-padding);
+  padding: var(--bui-dialog-title-padding);
   font-size: var(--bui-title-size-2);
   text-align: center;
   color: var(--bui-color-fg-default);
@@ -34,7 +38,7 @@
   margin-top: var(--bui-spacing-sm);
 }
 .bui-dialog-body-desc {
-  padding: var(--desc-padding);
+  padding: var(--bui-dialog-desc-padding);
   color: var(--bui-color-fg-muted);
   font-size: var(--bui-title-size-4);
   text-align: center;
@@ -43,9 +47,8 @@
   padding-top: 0;
 }
 .bui-dialog-body-footer {
-  margin-top: var(--footer-margin-top);
+  margin-top: var(--bui-dialog-footer-margin-top);
   border-top: 1px solid rgba(0, 0, 0, 0.05);
-  display: -webkit-box;
   display: flex;
 }
 .bui-dialog-body-input {
@@ -56,13 +59,13 @@
   flex: 1;
   display: block;
   width: 100%;
-  height: var(--button-height);
-  line-height: var(--button-line-height);
-  padding: var(--button-padding);
-  font-size: var(--button-font-size);
+  height: var(--bui-dialog-button-height);
+  line-height: var(--bui-dialog-button-line-height);
+  padding: var(--bui-dialog-button-padding);
+  font-size: var(--bui-dialog-button-font-size);
   border: 0;
   outline: 0;
-  border-left: var(--button-border-left);
+  border-left: var(--bui-dialog-button-border-left);
   border-radius: 0;
   text-align: center;
   box-sizing: border-box;
@@ -71,5 +74,5 @@
   border: none;
 }
 .bui-dialog-body-button:active {
-  background-color: var(--button-active-background-color);
+  background-color: var(--bui-dialog-button-active-background-color);
 }

package/dist/Divider/Divider.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import { DividerProps } from './Divider.types';
-import './Divider.less';
+import './index.less';
 declare const Divider: React.ForwardRefExoticComponent<Omit<DividerProps<"div", {}>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default Divider;

package/dist/Divider/Divider.js

@@ -46,7 +46,7 @@ __export(Divider_exports, {
 module.exports = __toCommonJS(Divider_exports);
 var import_clsx = __toESM(require("clsx"));
 var import_react = __toESM(require("react"));
-var import_Divider2 = require("./Divider.css");
+var import_index = require("./index.css");
 const prefixCls = "bui-divider";
 const Divider = (0, import_react.forwardRef)((props, ref) => {
   const {

package/{es/Divider/Divider.css → dist/Divider/index.css}

@@ -1,20 +1,24 @@
+:root,
+page,
+xhs-page {
+  --bui-divider-height: 100%;
+  --bui-divider-width: 100%;
+  --bui-divider-border-width: 1px;
+  --bui-divider-line-width: 40px;
+}
 .bui-divider {
-  --height: var(--bui-divider-height, 100%);
-  --width: var(--bui-divider-width, 100%);
-  --border-width: var(--bui-divider-border-width, 1px);
-  --line-width: var(--bui-divider-line-width, 40px);
   border-color: var(--bui-color-border-default);
   font-family: var(--bui-font-family);
 }
 .bui-divider-vertical {
-  height: var(--height);
+  height: var(--bui-divider-height);
   display: inline-block;
-  border-right-width: var(--border-width);
+  border-right-width: var(--bui-divider-border-width);
   border-right-style: solid;
 }
 .bui-divider-horizontal {
-  width: var(--width);
-  border-bottom-width: var(--border-width);
+  width: var(--bui-divider-width);
+  border-bottom-width: var(--bui-divider-border-width);
   border-bottom-style: solid;
 }
 .bui-divider-vertical-dashed {
@@ -31,8 +35,8 @@
   justify-content: center;
 }
 .bui-divider-line {
-  width: var(--line-width);
-  border-bottom-width: var(--border-width);
+  width: var(--bui-divider-line-width);
+  border-bottom-width: var(--bui-divider-border-width);
   border-bottom-style: solid;
   border-color: var(--bui-color-border-default);
 }

package/dist/Drawer/Drawer.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import { DrawerProps } from './Drawer.types';
-import './Drawer.less';
+import './index.less';
 declare const Drawer: React.ForwardRefExoticComponent<Omit<DrawerProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default Drawer;

package/dist/Drawer/Drawer.js

@@ -63,7 +63,7 @@ var import_clsx = __toESM(require("clsx"));
 var import_react = __toESM(require("react"));
 var import_Modal = __toESM(require("../Modal"));
 var import_Slide = __toESM(require("../Slide"));
-var import_Drawer2 = require("./Drawer.css");
+var import_index = require("./index.css");
 const prefixCls = "bui-drawer";
 const oppositeDirection = {
   left: "right",

package/dist/IconButton/IconButton.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import { IconButtonProps } from './IconButton.types';
-import './IconButton.less';
+import './index.less';
 declare const IconButton: React.ForwardRefExoticComponent<Omit<IconButtonProps<"button", {}>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 export default IconButton;