@bifrostui/react 1.3.1-beta.1 → 1.3.3

package/dist/Calendar/Calendar.types.d.ts

@@ -16,12 +16,6 @@ export interface ICalendarYearChangeData {
     /** 切换后的年份 */
     year: number;
 }
-export interface ICustomIconProps {
-    /** 是否为可选范围内的最小月份 */
-    isMinMonth?: boolean;
-    /** 是否为可选范围内的最大月份 */
-    isMaxMonth?: boolean;
-}
 export type ICalendarMode = 'single' | 'range';
 export type ICalendarValue = Date | Date[] | null;
 export type CalendarProps<D extends React.ElementType = 'div', P = {}> = OverrideProps<{
@@ -53,21 +47,6 @@ export type CalendarProps<D extends React.ElementType = 'div', P = {}> = Overrid
          * 是否隐藏当前月之外的日期，默认为false
          */
         hideDaysOutsideCurrentMonth?: boolean;
-        /**
-         * 头部操作栏日期显示格式
-         * @default YYYY/MM
-         */
-        headerBarFormat?: string;
-        /**
-         * 头部操作栏左边图标
-         * @defaultReturn <CaretLeftIcon />
-         */
-        headerBarLeftIcon?: (options: ICustomIconProps) => React.ReactNode;
-        /**
-         * 头部操作栏右边图标
-         * @defaultReturn <CaretRightIcon />
-         */
-        headerBarRightIcon?: (options: ICustomIconProps) => React.ReactNode;
         /**
          * 不可选择的日期
          */

package/dist/Card/CardFooter.css

@@ -1,9 +1,8 @@
 .bui-card-footer {
-  --padding: var(--bui-card-footer-padding, var(--bui-spacing-md) var(--bui-spacing-lg));
   color: var(--bui-color-fg-muted);
   font-size: var(--bui-text-size-1);
   display: flex;
   align-items: center;
-  padding: var(--padding);
+  padding: var(--bui-spacing-md) var(--bui-spacing-lg);
   font-family: var(--bui-font-family);
 }

package/dist/Card/CardHeader.css

@@ -1,13 +1,11 @@
 .bui-card-header {
-  --padding: var(--bui-card-header-padding, var(--bui-spacing-md) var(--bui-spacing-lg));
-  --end-icon-margin-left: var(--bui-card-header-end-icon-margin-left, 2px);
   display: flex;
   align-items: center;
   flex-direction: row;
   position: relative;
   padding: var(--bui-spacing-md) var(--bui-spacing-lg);
   font-size: var(--bui-title-size-4);
-  font-weight: var(--bui-font-weight-medium);
+  font-weight: 500;
   color: var(--bui-color-fg-default);
   font-family: var(--bui-font-family);
 }

package/dist/Checkbox/Checkbox.css

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

package/dist/CitySelector/CitySelector.css

@@ -1,29 +1,14 @@
 .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: 45px;
   color: var(--bui-color-fg-default);
   font-size: var(--bui-title-size-3);
-  line-height: var(--title-line-height);
+  line-height: 45px;
   text-align: center;
   position: sticky;
   top: 0;
@@ -35,20 +20,20 @@
   position: absolute;
   top: 0;
   right: 0;
-  width: var(--btn-close-size);
-  height: var(--btn-close-size);
+  width: 45px;
+  height: 45px;
   color: var(--bui-color-fg-muted);
   text-align: center;
-  font-size: var(--btn-close-font-size);
+  font-size: 20px;
 }
 .bui-city-selector-scroll-view-container {
   height: 100%;
 }
 .bui-city-selector-scroll-view-container.container-has-title {
-  height: var(--container-with-title-height);
+  height: calc(100% - 45px);
 }
 .bui-city-selector-all-city {
-  min-height: var(--city-container-min-height);
+  min-height: 500px;
   font-size: var(--bui-text-size-2);
   width: 100%;
   background: var(--bui-color-bg-view);
@@ -57,21 +42,22 @@
 .bui-city-selector-all-city .select-city-buttons {
   display: flex;
   flex-flow: wrap;
-  padding: var(--select-city-buttons-padding);
+  padding-left: 3px;
+  padding-top: 7.5px;
 }
 .bui-city-selector-all-city .select-city-title {
   font-size: var(--bui-title-size-4);
-  line-height: var(--select-city-title-line-height);
-  font-weight: var(--bui-font-weight-bold);
+  line-height: 15px;
+  font-weight: 600;
   padding-left: var(--bui-spacing-lg);
-  padding-top: var(--bui-spacing-md);
+  padding-top: 9px;
 }
 .bui-city-selector-list {
   padding-left: var(--bui-spacing-lg);
   list-style-type: none;
 }
 .bui-city-selector-list-item {
-  height: var(--list-item-height);
+  height: 45px;
   font-size: var(--bui-title-size-4);
   display: flex;
   align-items: center;
@@ -95,7 +81,7 @@
   transform: translate(0, -50%);
 }
 .bui-city-selector-index-container.city-index-has-title {
-  top: var(--city-index-has-title-top);
+  top: calc(50% + 22.5px);
 }
 .bui-city-selector-index-container ul {
   margin: 0;
@@ -106,7 +92,7 @@
 }
 .bui-city-selector-index-container li {
   list-style: none;
-  height: var(--index-item-height);
+  height: 20px;
   text-align: center;
   font-size: var(--bui-text-size-3);
   color: var(--bui-color-info, --bui-color-info);

package/dist/CitySelector/CitySelectorCore.js

@@ -59,31 +59,34 @@ module.exports = __toCommonJS(CitySelectorCore_exports);
 var import_react = __toESM(require("react"));
 var import_clsx = __toESM(require("clsx"));
 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");
 const DEVIATION_HEIGHT = "6vmin";
+const GPS_TYPE = {
+  title: "\u5B9A\u4F4D",
+  code: "GPS"
+};
+const CURRENT_TYPE = {
+  title: "\u5F53\u524D",
+  code: "CRRT"
+};
+const HOT_CITY_TYPE = {
+  title: "\u70ED\u95E8",
+  code: "HOT"
+};
 const prefixCls = "bui-city-selector";
 const CitySelector = /* @__PURE__ */ import_react.default.forwardRef(
   (props, ref) => {
-    const {
-      selectedCityGroupName: selectedCityGroupLocaleName,
-      currentCityGroupName: currentCityGroupLocaleName,
-      hotCitiesGroupName: hotCitiesGroupLocaleName,
-      located,
-      current,
-      hot
-    } = (0, import_locales.useLocaleText)("citySelector");
     const _a = props, {
       className,
       title: pageTitle,
       selectedCity,
-      selectedCityGroupName = selectedCityGroupLocaleName,
+      selectedCityGroupName = "\u5F53\u524D\u57CE\u5E02",
       currentCity,
-      currentCityGroupName = currentCityGroupLocaleName,
+      currentCityGroupName = "\u5B9A\u4F4D\u57CE\u5E02",
       hotCities,
-      hotCitiesGroupName = hotCitiesGroupLocaleName,
+      hotCitiesGroupName = "\u70ED\u95E8\u57CE\u5E02",
       cities,
       disableIndex,
       touchHandler,
@@ -106,18 +109,6 @@ const CitySelector = /* @__PURE__ */ import_react.default.forwardRef(
       "onSelect",
       "onClose"
     ]);
-    const GPS_TYPE = {
-      title: located,
-      code: "GPS"
-    };
-    const CURRENT_TYPE = {
-      title: current,
-      code: "CRRT"
-    };
-    const HOT_CITY_TYPE = {
-      title: hot,
-      code: "HOT"
-    };
     const cityRef = (0, import_react.useRef)(null);
     const nodeRef = (0, import_utils.useForkRef)(ref, cityRef);
     (0, import_utils.useTouchEmulator)(cityRef.current);
@@ -176,7 +167,7 @@ const CitySelector = /* @__PURE__ */ import_react.default.forwardRef(
     };
     const renderTitile = (title, titleCode) => {
       const parseTitle = (titleCode || title).toUpperCase();
-      return /* @__PURE__ */ import_react.default.createElement("div", { className: "select-city-title", id: disableIndex ? "" : parseTitle }, title == null ? void 0 : title.toUpperCase());
+      return /* @__PURE__ */ import_react.default.createElement("div", { className: "select-city-title", id: disableIndex ? "" : parseTitle }, title.toUpperCase());
     };
     const renderCity = (citys, title, titleCode) => {
       return /* @__PURE__ */ import_react.default.createElement("div", null, renderTitile(title, titleCode), /* @__PURE__ */ import_react.default.createElement("div", { className: "select-city-buttons" }, citys.map((city, index) => {

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: 111px;
+  height: 36px;
   display: inline-flex;
   justify-content: center;
   align-items: center;
-  border-radius: var(--select-item-border-radius);
-  margin: var(--select-item-margin);
+  border-radius: 20px;
+  margin: 4.5px 0 4.5px 9px;
   background-color: var(--bui-color-bg-default);
   font-size: var(--bui-text-size-2);
 }

package/dist/Countdown/Countdown.css

@@ -2,7 +2,6 @@
   --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;
@@ -35,5 +34,5 @@
     sans-serif;
 }
 .bui-countdown-slice-unit {
-  margin: var(--slice-unit-margin);
+  margin: 0 2px;
 }

package/dist/Dialog/Dialog.d.ts

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

package/dist/Dialog/Dialog.js

@@ -59,13 +59,11 @@ __export(Dialog_exports, {
   default: () => Dialog_default
 });
 module.exports = __toCommonJS(Dialog_exports);
-var import_clsx = __toESM(require("clsx"));
 var import_react = __toESM(require("react"));
+var import_clsx = __toESM(require("clsx"));
 var import_Input = require("../Input");
 var import_Button = require("../Button");
-var import_locales = require("../locales");
 var import_Modal = __toESM(require("../Modal"));
-var import_ThemeProvider = require("../ThemeProvider");
 var import_index = require("./index.css");
 const prefixCls = "bui-dialog";
 const Dialog = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
@@ -80,8 +78,7 @@ const Dialog = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
     cancelText,
     placeholder,
     InputProps,
-    className,
-    theme
+    className
   } = _a, others = __objRest(_a, [
     "open",
     "onOk",
@@ -93,19 +90,9 @@ const Dialog = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
     "cancelText",
     "placeholder",
     "InputProps",
-    "className",
-    "theme"
+    "className"
   ]);
   const InputRef = (0, import_react.useRef)(null);
-  const themeConfig = (0, import_ThemeProvider.useTheme)(theme);
-  const {
-    cancel,
-    confirm,
-    placeholder: placeholderLocaleName
-  } = (0, import_locales.useLocaleText)("dialog", themeConfig);
-  (0, import_react.useImperativeHandle)(ref, () => {
-    return { theme: themeConfig };
-  });
   const footerNode = /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-body-footer` }, /* @__PURE__ */ import_react.default.createElement(
     import_Button.Button,
     {
@@ -113,7 +100,7 @@ const Dialog = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
       onClick: onClose,
       className: `${prefixCls}-body-button`
     },
-    cancelText || cancel
+    cancelText || "\u53D6\u6D88"
   ), /* @__PURE__ */ import_react.default.createElement(
     import_Button.Button,
     {
@@ -125,14 +112,14 @@ const Dialog = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
       },
       className: `${prefixCls}-body-button`
     },
-    confirmText || confirm
+    confirmText || "\u786E\u5B9A"
   ));
   const inputNode = type === "prompt" && /* @__PURE__ */ import_react.default.createElement(
     import_Input.Input,
     __spreadProps(__spreadValues({}, InputProps), {
       inputRef: InputRef,
       className: `${prefixCls}-body-input`,
-      placeholder: `${placeholder || placeholderLocaleName}`
+      placeholder: `${placeholder || "\u8BF7\u5728\u6B64\u5904\u8F93\u5165"}`
     })
   );
   if (!open)
@@ -143,7 +130,8 @@ const Dialog = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
       open: true,
       className: (0, import_clsx.default)(prefixCls, className),
       disablePortal: true,
-      onClose
+      onClose,
+      ref
     }),
     /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-body` }, header && /* @__PURE__ */ import_react.default.createElement("h1", { className: `${prefixCls}-body-title` }, header), message && /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-body-desc` }, message), inputNode, footerNode)
   );

package/dist/Dialog/Dialog.types.d.ts

@@ -1,15 +1,11 @@
 import React, { ReactNode } from 'react';
 import { ModalProps } from '../Modal/Modal.types';
 import { InputProps } from '../Input/Input.types';
-import { ThemeProps } from '../ThemeProvider/ThemeProvider.types';
 /**
  * 对话框类型
  */
 export type DialogType = 'confirm' | 'prompt';
 export type Dispatch = (action: boolean, val?: string) => void;
-export type DialogRef = {
-    theme?: ThemeProps;
-};
 export interface DialogProps extends ModalProps {
     /**
      * 对话框类型
@@ -40,10 +36,6 @@ export interface DialogProps extends ModalProps {
      * 取消文本内容
      */
     cancelText?: ReactNode;
-    /**
-     * theme 主题定制
-     */
-    theme?: ThemeProps;
     /**
      * 确认回调
      */
@@ -90,7 +82,7 @@ export type DialogPromise = Promise<boolean | string>;
 /**
  * Dialog Instance
  */
-export interface DialogFunction {
+export interface DialogInstance {
     /**
      * 直接调用显示确认框 Dialog
      */
@@ -104,6 +96,3 @@ export interface DialogFunction {
      */
     prompt?: (options: PromptOptions, val?: string) => DialogPromise;
 }
-export interface DialogInstance extends DialogFunction {
-    useDialog: () => [DialogFunction, React.JSX.Element];
-}

package/dist/Dialog/FunctionalDialog.js

@@ -94,7 +94,7 @@ const DialogGenerator = (options) => {
   const rootElement = (0, import_utils.getRootElement)();
   rootElement.appendChild(rootWrapper);
   const DialogComponent = () => {
-    const _a = options, { onConfirm, onCancel, ref } = _a, others = __objRest(_a, ["onConfirm", "onCancel", "ref"]);
+    const _a = options, { onConfirm, onCancel } = _a, others = __objRest(_a, ["onConfirm", "onCancel"]);
     const [visible, setVisible] = (0, import_react.useState)(false);
     const close = (0, import_react.useCallback)(() => {
       setVisible(false);
@@ -124,9 +124,7 @@ const DialogGenerator = (options) => {
     });
     return /* @__PURE__ */ import_react.default.createElement(
       import_Dialog.default,
-      __spreadProps(__spreadValues({
-        ref
-      }, others), {
+      __spreadProps(__spreadValues({}, others), {
         open: visible,
         onOk: (val) => dispatch(true, val),
         onClose: () => dispatch(false)
@@ -165,40 +163,6 @@ const prompt = (options) => {
     type: "prompt"
   }, formatProps(options)));
 };
-const useDialog = () => {
-  const holderRef = import_react.default.useRef(null);
-  const wrapAPI = (props) => {
-    const options = __spreadValues({ theme: holderRef.current.theme }, formatProps(props));
-    const _a = options, { onConfirm, onCancel } = _a, rest = __objRest(_a, ["onConfirm", "onCancel"]);
-    return new Promise((resolve) => {
-      DialogGenerator(__spreadProps(__spreadValues({}, rest), {
-        onConfirm: (val) => __async(void 0, null, function* () {
-          yield onConfirm == null ? void 0 : onConfirm(val);
-          if (rest.type === "prompt")
-            resolve(val);
-          else
-            resolve(true);
-        }),
-        onCancel: () => __async(void 0, null, function* () {
-          yield onCancel == null ? void 0 : onCancel();
-          resolve(false);
-        })
-      }));
-    });
-  };
-  wrapAPI.confirm = (options) => Dialog(__spreadProps(__spreadValues({
-    type: "confirm"
-  }, formatProps(options)), {
-    theme: holderRef.current.theme
-  }));
-  wrapAPI.prompt = (options) => Dialog(__spreadProps(__spreadValues({
-    type: "prompt"
-  }, formatProps(options)), {
-    theme: holderRef.current.theme
-  }));
-  return [wrapAPI, /* @__PURE__ */ import_react.default.createElement(import_Dialog.default, { key: "dialog-holder", ref: holderRef })];
-};
 Dialog.confirm = confirm;
 Dialog.prompt = prompt;
-Dialog.useDialog = useDialog;
 var FunctionalDialog_default = Dialog;

package/dist/Dialog/index.css

@@ -1,15 +1,8 @@
 .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));
+  --max-width: 300px;
+  --border-radius: var(--bui-shape-radius-drawer);
+  --header-font-size: var(--bui-title-size-2);
+  --message-font-size: var(--bui-title-size-4);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -24,26 +17,26 @@
   line-height: 21px;
 }
 .bui-dialog-body-title {
-  padding: var(--title-padding);
-  font-size: var(--bui-title-size-2);
+  padding: 0 40px 9px;
+  font-size: var(--header-font-size);
   text-align: center;
   color: var(--bui-color-fg-default);
-  font-weight: var(--bui-font-weight-medium);
+  font-weight: 500;
 }
 .bui-dialog-body-title + .bui-dialog-body-footer {
-  margin-top: var(--bui-spacing-sm);
+  margin-top: 6px;
 }
 .bui-dialog-body-desc {
-  padding: var(--desc-padding);
+  padding: 0 24px;
   color: var(--bui-color-fg-muted);
-  font-size: var(--bui-title-size-4);
+  font-size: var(--message-font-size);
   text-align: center;
 }
 .bui-dialog-body-desc:first-child {
   padding-top: 0;
 }
 .bui-dialog-body-footer {
-  margin-top: var(--footer-margin-top);
+  margin-top: 15px;
   border-top: 1px solid rgba(0, 0, 0, 0.05);
   display: -webkit-box;
   display: flex;
@@ -56,20 +49,18 @@
   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: 53px;
+  line-height: 25px;
+  padding: 12px 0 13px;
+  font-size: 17px;
+  background: 0 0;
   border: 0;
   outline: 0;
-  border-left: var(--button-border-left);
+  border-left: 1px solid rgba(0, 0, 0, 0.05);
   border-radius: 0;
   text-align: center;
   box-sizing: border-box;
 }
-.bui-dialog-body-button:first-child {
-  border: none;
-}
 .bui-dialog-body-button:active {
-  background-color: var(--button-active-background-color);
+  background-color: rgba(54, 57, 64, 0.05);
 }

package/dist/Divider/Divider.css

@@ -1,20 +1,18 @@
 .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);
   display: inline-block;
-  border-right-width: var(--border-width);
+  border-right-width: 1px;
   border-right-style: solid;
 }
 .bui-divider-horizontal {
   width: var(--width);
-  border-bottom-width: var(--border-width);
+  border-bottom-width: 1px;
   border-bottom-style: solid;
 }
 .bui-divider-vertical-dashed {
@@ -31,8 +29,8 @@
   justify-content: center;
 }
 .bui-divider-line {
-  width: var(--line-width);
-  border-bottom-width: var(--border-width);
+  width: 40px;
+  border-bottom-width: 1px;
   border-bottom-style: solid;
   border-color: var(--bui-color-border-default);
 }

package/dist/IconButton/IconButton.css

@@ -1,10 +1,8 @@
 .bui-icon-btn {
-  --bg-color: var(--bui-icon-btn-bg-color, var(--bui-color-neutral-5));
-  --color: var(--bui-icon-btn-color, var(--bui-color-fg-muted));
-  --icon-size: var(--bui-icon-btn-font-size, 17px);
-  --user-area: var(--bui-icon-btn-padding, 5px);
-  --large-font-size: var(--bui-icon-btn-large-font-size, 23px);
-  --disabled-opacity: var(--bui-icon-btn-disabled-opacity, 0.5);
+  --bg-color: var(--bui-color-neutral-5);
+  --color: var(--bui-color-fg-muted);
+  --icon-size: 17px;
+  --user-area: 5px;
   position: relative;
   display: inline-flex;
   height: auto;
@@ -49,10 +47,10 @@
 }
 .bui-icon-btn-medium.bui-icon-btn-outlined,
 .bui-icon-btn-medium.bui-icon-btn-contained {
-  padding: var(--user-area);
+  padding: 5px;
 }
 .bui-icon-btn-large {
-  font-size: var(--large-font-size);
+  font-size: 23px;
   padding: var(--bui-spacing-sm);
 }
 .bui-icon-btn-large.bui-icon-btn-outlined,
@@ -61,7 +59,7 @@
 }
 .bui-icon-btn-disabled {
   pointer-events: none;
-  opacity: var(--disabled-opacity);
+  opacity: 0.5;
 }
 .bui-icon-btn-circular {
   border-radius: 100%;

package/dist/Image/index.css

@@ -1,5 +1,4 @@
 .bui-image {
-  --default-background-color: var(--bui-image-default-background-color, rgba(127, 127, 127, 0.2));
   width: auto;
   height: auto;
   display: inline-block;
@@ -32,5 +31,5 @@
 .bui-image-default-icon-item {
   width: 100%;
   height: 100%;
-  background-color: var(--default-background-color);
+  background-color: rgba(127, 127, 127, 0.2);
 }