@bifrostui/react 1.4.8-beta.0 → 2.0.0-alpha.0

package/es/ThemeProvider/utils/mountTokens.d.ts

@@ -1,7 +1,7 @@
 import { ThemeProps, MountResponsiveTokenOptions, BuiltInThemesTokenOptions } from '../ThemeProvider.types';
 /**
  * 挂载响应式自定义Tokens
- * 响应式相关的Tokens挂载在全局根节点上，暗黑模式或大麦高亮主题下可自定义额外Toekns复写响应式Tokens
+ * 将自定义Tokens挂载在rootSelector.defaultLight下，其他主题下可自定义额外Toekns复写响应式Tokens
  */
 export declare const mountResponsiveTokens: (options: MountResponsiveTokenOptions) => void;
 /**
@@ -10,17 +10,17 @@ export declare const mountResponsiveTokens: (options: MountResponsiveTokenOption
  * 1. 默认高亮模式（defaultLightToken 复写 default-light.less）
  * 2. 默认暗黑模式（defaultDarkToken 复写 default-dark.less）
  * 3. 大麦高亮模式（dmLightToken 复写 dm-light.less）
- * 4. 大麦暗黑模式（dmDarkToken 复写 dm-dark.less）
+ * 4. 先锋版高亮模式（pioneerLightToken 复写 pioneer-light.less）
  */
 export declare const overrideBuiltInThemes: (tokenOptions: BuiltInThemesTokenOptions) => void;
 /**
  * 挂载Design Tokens
  * Tokens的优先级：
  * 1. 通常情况：组件的Tokens > 响应式Tokens > BUI内置Tokens（挂载顺序控制）
- * 2. 暗黑模式：组件的Tokens > BUI内置的两种暗黑模式Tokens > 响应式Tokens (选择器权重控制)
+ * 2. 暗黑模式：组件的Tokens > BUI内置的暗黑模式Tokens > 响应式Tokens (选择器权重控制)
  *
  * - 挂载顺序决定BUI内置Tokens（暗黑模式除外）和响应式Tokens的优先级
  * - 选择器权重决定暗黑模式的Tokens和响应式Tokens的优先级
- * - 命名规则决定组件的Tokens（如：--bui-button-xxx）
+ * - 命名规则决定组件的Tokens（如：--bui-btn-xxx）
  */
 export declare const mountTokens: (tokenOptions?: ThemeProps) => void;

package/es/Toast/FunctionalToast.js

@@ -29,7 +29,7 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
-import { render, unmount, getRootContainer } from "@bifrostui/utils";
+import { render, unmount, getRootElement } from "@bifrostui/utils";
 import React, { useCallback, useEffect, useState } from "react";
 import ToastView from "./Toast";
 let toastCloses = [];
@@ -70,7 +70,7 @@ const functionalToast = (props) => {
       rootWrapper.style[property] = styles[property];
     });
   }
-  const rootElement = getRootContainer();
+  const rootElement = getRootElement();
   rootElement.appendChild(rootWrapper);
   const ToastComponent = () => {
     const _a = options, { duration, allowMultiple, onClose } = _a, others = __objRest(_a, ["duration", "allowMultiple", "onClose"]);

package/es/Toast/Toast.d.ts

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

package/es/Toast/Toast.js

@@ -39,7 +39,7 @@ import {
 } from "@bifrostui/icons";
 import Fade from "../Fade";
 import { useTheme } from "../ThemeProvider";
-import "./Toast.css";
+import "./index.css";
 const prefixCls = "bui-toast";
 const ToastComponent = /* @__PURE__ */ React.forwardRef((props, ref) => {
   const _a = props, {
@@ -68,10 +68,10 @@ const ToastComponent = /* @__PURE__ */ React.forwardRef((props, ref) => {
     return { theme: themeConfig };
   }, []);
   const iconMap = {
-    fail: /* @__PURE__ */ React.createElement(ErrorCircleFilledBoldIcon, { htmlColor: "#ffffff" }),
-    loading: /* @__PURE__ */ React.createElement(AccessTimeCircleFilledBoldIcon, { htmlColor: "#ffffff" }),
-    warning: /* @__PURE__ */ React.createElement(AlertCircleFilledBoldIcon, { htmlColor: "#ffffff" }),
-    success: /* @__PURE__ */ React.createElement(SuccessCircleFilledBoldIcon, { htmlColor: "#ffffff" })
+    fail: /* @__PURE__ */ React.createElement(ErrorCircleFilledBoldIcon, { htmlColor: "var(--bui-color-white)" }),
+    loading: /* @__PURE__ */ React.createElement(AccessTimeCircleFilledBoldIcon, { htmlColor: "var(--bui-color-white)" }),
+    warning: /* @__PURE__ */ React.createElement(AlertCircleFilledBoldIcon, { htmlColor: "var(--bui-color-white)" }),
+    success: /* @__PURE__ */ React.createElement(SuccessCircleFilledBoldIcon, { htmlColor: "var(--bui-color-white)" })
   };
   const iconDom = iconMap[type] || icon;
   return /* @__PURE__ */ React.createElement(Fade, __spreadProps(__spreadValues({}, others), { in: open, appear: false, unmountOnExit: true }), /* @__PURE__ */ React.createElement(

package/es/Toast/index.css

@@ -0,0 +1,58 @@
+:root,
+page,
+xhs-page {
+  --bui-toast-min-width: 86px;
+  --bui-toast-max-width: 80%;
+  --bui-toast-text-align: center;
+  --bui-toast-flex-direction: column;
+  --bui-toast-padding: var(--bui-spacing-xl);
+  --bui-toast-position-top: 15%;
+  --bui-toast-position-bottom: 85%;
+  --bui-toast-bg-color: rgba(0, 0, 0, 0.8);
+  --bui-toast-border-radius: var(--bui-shape-radius-default);
+  --bui-toast-icon-margin: 0 0 8px;
+  --bui-toast-icon-font-size: 30px;
+}
+.bui-toast {
+  position: fixed;
+  left: 50%;
+  z-index: var(--bui-z-index-toast);
+  width: fit-content;
+  min-width: var(--bui-toast-min-width);
+  max-width: var(--bui-toast-max-width);
+  padding: var(--bui-toast-padding);
+  font-size: var(--bui-text-size-1);
+  color: var(--bui-color-white);
+  border-radius: var(--bui-toast-border-radius);
+  word-break: break-all;
+  white-space: pre-wrap;
+  background-color: var(--bui-toast-bg-color);
+  text-align: var(--bui-toast-text-align);
+  font-family: var(--bui-font-family);
+}
+.bui-toast.bui-toast-allow-click {
+  position: fixed;
+  right: unset;
+  bottom: unset;
+}
+.bui-toast-center {
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+.bui-toast-top {
+  top: var(--bui-toast-position-top);
+  transform: translate(-50%, calc(-1 * var(--bui-toast-position-top)));
+}
+.bui-toast-bottom {
+  top: var(--bui-toast-position-bottom);
+  transform: translate(-50%, calc(-1 * var(--bui-toast-position-bottom)));
+}
+.bui-toast-icon {
+  display: flex;
+  flex-direction: var(--bui-toast-flex-direction);
+  align-items: center;
+}
+.bui-toast-icon .bui-svg-icon {
+  margin: var(--bui-toast-icon-margin);
+  font-size: var(--bui-toast-icon-font-size);
+}

package/es/Tooltip/Tooltip.d.ts

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

package/es/Tooltip/Tooltip.js

@@ -26,38 +26,17 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
-var __async = (__this, __arguments, generator) => {
-  return new Promise((resolve, reject) => {
-    var fulfilled = (value) => {
-      try {
-        step(generator.next(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var rejected = (value) => {
-      try {
-        step(generator.throw(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
-    step((generator = generator.apply(__this, __arguments)).next());
-  });
-};
 import clsx from "clsx";
 import React, { useState, useRef, useEffect } from "react";
 import {
   getStylesAndLocation,
   triggerEventTransform,
   parsePlacement,
-  throttle,
-  useForkRef,
-  isMini
+  useUniqueId,
+  throttle
 } from "@bifrostui/utils";
 import Portal from "../Portal";
-import "./Tooltip.css";
+import "./index.css";
 const prefixCls = "bui-tooltip";
 const Tooltip = /* @__PURE__ */ React.forwardRef((props, ref) => {
   const _a = props, {
@@ -69,8 +48,8 @@ const Tooltip = /* @__PURE__ */ React.forwardRef((props, ref) => {
     offsetSpacing = 0,
     placement = "top",
     trigger = "click",
-    open,
-    onOpenChange
+    onOpenChange,
+    open
   } = _a, others = __objRest(_a, [
     "className",
     "style",
@@ -80,8 +59,8 @@ const Tooltip = /* @__PURE__ */ React.forwardRef((props, ref) => {
     "offsetSpacing",
     "placement",
     "trigger",
-    "open",
-    "onOpenChange"
+    "onOpenChange",
+    "open"
   ]);
   const controlByUser = typeof open !== "undefined";
   const { direction, location = "center" } = parsePlacement(placement);
@@ -89,18 +68,11 @@ const Tooltip = /* @__PURE__ */ React.forwardRef((props, ref) => {
   const [openStatus, setOpenStatus] = useState(defaultOpen);
   const [arrowDirection, setArrowDirection] = useState(direction);
   const [arrowLocation, setArrowLocation] = useState(location);
-  const [toolStyles, setToolStyles] = useState({});
-  const tipRef = useRef(null);
-  const nodeRef = useForkRef(ref, tipRef);
-  const clearRef = (status) => {
-    if (status === false) {
-      tipRef.current = null;
-    }
-  };
+  const [tooltyles, setTooltyles] = useState({});
+  const ttId = useUniqueId();
   const changeOpenStatus = (event, status) => {
     if (controlByUser)
       return;
-    clearRef(status);
     setOpenStatus(status);
     onOpenChange == null ? void 0 : onOpenChange(event, { open: status });
   };
@@ -119,33 +91,23 @@ const Tooltip = /* @__PURE__ */ React.forwardRef((props, ref) => {
     if (!controlByUser)
       return;
     setOpenStatus(open);
-    clearRef(open);
   }, [open]);
-  useEffect(() => {
-    if (!openStatus) {
-      setToolStyles({
-        visibility: "hidden"
-      });
-    }
-  }, [openStatus]);
   const clickEventHandler = (event) => {
     if (trigger === "hover" || (trigger == null ? void 0 : trigger.length) === 1 && (trigger == null ? void 0 : trigger[0]) === "hover")
       return;
     hideTooltip(event);
   };
-  const onRootElementMouted = throttle(() => __async(void 0, null, function* () {
-    if (!tipRef.current)
-      return;
+  const onRootElementMouted = throttle(() => {
     const {
       direction: newParsedDirection,
       location: newParsedLocation = "center"
     } = parsePlacement(placement);
-    const result = yield getStylesAndLocation({
+    const result = getStylesAndLocation({
       childrenRef,
       arrowDirection: newParsedDirection,
       arrowLocation: newParsedLocation,
       offsetSpacing,
-      tipRef
+      selector: `[data-id="tt_${ttId}"]`
     });
     if (!result)
       return;
@@ -156,32 +118,26 @@ const Tooltip = /* @__PURE__ */ React.forwardRef((props, ref) => {
     if (newArrowLocation !== arrowLocation) {
       setArrowLocation(newArrowLocation);
     }
-    setToolStyles(styles);
-  }), 100);
+    setTooltyles(styles);
+  }, 100);
+  const bindEvent = () => {
+    if (!controlByUser) {
+      document.addEventListener("click", clickEventHandler);
+    }
+    window.addEventListener("resize", onRootElementMouted);
+  };
+  const unbindEvent = () => {
+    if (!controlByUser) {
+      document.removeEventListener("click", clickEventHandler);
+    }
+    window.removeEventListener("resize", onRootElementMouted);
+  };
   useEffect(() => {
-    const bindEvent = () => {
-      if (!openStatus)
-        return;
-      if (!controlByUser) {
-        document.addEventListener("click", clickEventHandler);
-      }
-      if (!isMini) {
-        window.addEventListener("resize", onRootElementMouted);
-      }
-    };
-    const unbindEvent = () => {
-      if (!controlByUser) {
-        document.removeEventListener("click", clickEventHandler);
-      }
-      if (!isMini) {
-        window.removeEventListener("resize", onRootElementMouted);
-      }
-    };
     bindEvent();
     return () => {
       unbindEvent();
     };
-  }, [openStatus]);
+  }, []);
   let triggerEventOption;
   if (!controlByUser) {
     triggerEventOption = triggerEventTransform({
@@ -194,12 +150,12 @@ const Tooltip = /* @__PURE__ */ React.forwardRef((props, ref) => {
   const childrenOptions = __spreadValues({
     ref: childrenRef
   }, triggerEventOption);
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, (open || openStatus) && title ? /* @__PURE__ */ React.createElement(Portal, { onRootElementMouted }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, (open || openStatus) && title ? /* @__PURE__ */ React.createElement(Portal, { onRootElementMouted, ref }, /* @__PURE__ */ React.createElement(
     "div",
     __spreadValues({
       className: clsx(prefixCls, className, `tooltip-${arrowDirection}`),
-      style: __spreadValues(__spreadValues({}, style), toolStyles),
-      ref: nodeRef
+      style: __spreadValues(__spreadValues({}, style), tooltyles),
+      "data-id": `tt_${ttId}`
     }, others),
     /* @__PURE__ */ React.createElement(
       "div",

package/es/Tooltip/index.css

@@ -0,0 +1,95 @@
+:root,
+page,
+xhs-page {
+  --bui-tooltip-arrow-size: 8PX;
+  --bui-tooltip-location-position: 8PX;
+  --bui-tooltip-max-width: 350px;
+  --bui-tooltip-content-min-width: 30px;
+  --bui-tooltip-content-min-height: 32px;
+  --bui-tooltip-content-padding: 6px 8px;
+}
+.bui-tooltip {
+  max-width: var(--bui-tooltip-max-width);
+  font-size: var(--bui-text-size-1);
+  position: absolute;
+  visibility: hidden;
+  z-index: var(--bui-z-index-tooltip);
+}
+.bui-tooltip .bui-tooltip-arrow {
+  width: 0;
+  height: 0;
+  position: absolute;
+}
+.bui-tooltip .bui-tooltip-arrow.location-left {
+  left: var(--bui-tooltip-location-position);
+}
+.bui-tooltip .bui-tooltip-arrow.location-right {
+  right: var(--bui-tooltip-location-position);
+}
+.bui-tooltip .bui-tooltip-arrow.location-top {
+  top: var(--bui-tooltip-location-position);
+}
+.bui-tooltip .bui-tooltip-arrow.location-bottom {
+  bottom: var(--bui-tooltip-location-position);
+}
+.bui-tooltip.tooltip-top .location-center,
+.bui-tooltip.tooltip-bottom .location-center {
+  left: 50%;
+  transform: translateX(-50%);
+}
+.bui-tooltip.tooltip-left .location-center,
+.bui-tooltip.tooltip-right .location-center {
+  top: 50%;
+  transform: translateY(-50%);
+}
+.bui-tooltip.tooltip-top {
+  padding-bottom: var(--bui-tooltip-arrow-size);
+}
+.bui-tooltip.tooltip-top .bui-tooltip-arrow {
+  border-left: var(--bui-tooltip-arrow-size) solid transparent;
+  border-right: var(--bui-tooltip-arrow-size) solid transparent;
+  border-top: var(--bui-tooltip-arrow-size) solid var(--bui-color-bg-alpha-dark-7);
+  bottom: 0;
+}
+.bui-tooltip.tooltip-bottom {
+  padding-top: var(--bui-tooltip-arrow-size);
+}
+.bui-tooltip.tooltip-bottom .bui-tooltip-arrow {
+  border-left: var(--bui-tooltip-arrow-size) solid transparent;
+  border-right: var(--bui-tooltip-arrow-size) solid transparent;
+  border-bottom: var(--bui-tooltip-arrow-size) solid var(--bui-color-bg-alpha-dark-7);
+  top: 0;
+}
+.bui-tooltip.tooltip-left {
+  padding-right: var(--bui-tooltip-arrow-size);
+}
+.bui-tooltip.tooltip-left .bui-tooltip-arrow {
+  border-top: var(--bui-tooltip-arrow-size) solid transparent;
+  border-bottom: var(--bui-tooltip-arrow-size) solid transparent;
+  border-left: var(--bui-tooltip-arrow-size) solid var(--bui-color-bg-alpha-dark-7);
+  right: 0;
+}
+.bui-tooltip.tooltip-right {
+  padding-left: var(--bui-tooltip-arrow-size);
+}
+.bui-tooltip.tooltip-right .bui-tooltip-arrow {
+  border-top: var(--bui-tooltip-arrow-size) solid transparent;
+  border-bottom: var(--bui-tooltip-arrow-size) solid transparent;
+  border-right: var(--bui-tooltip-arrow-size) solid var(--bui-color-bg-alpha-dark-7);
+  left: 0;
+}
+.bui-tooltip .bui-tooltip-content {
+  min-width: var(--bui-tooltip-content-min-width);
+  min-height: var(--bui-tooltip-content-min-height);
+  padding: var(--bui-tooltip-content-padding);
+  color: var(--bui-color-white);
+  text-align: left;
+  text-decoration: none;
+  word-wrap: break-word;
+  background-color: var(--bui-color-bg-alpha-dark-7);
+  border-radius: var(--bui-shape-radius-poster);
+  box-shadow:
+    0 3px 6px -4px rgba(0, 0, 0, 0.12),
+    0 6px 16px 0 rgba(0, 0, 0, 0.08),
+    0 9px 28px 8px rgba(0, 0, 0, 0.05);
+}

package/es/Transition/TransitionCore.js

@@ -59,8 +59,8 @@ const TransitionCore = forwardRef(
       children,
       mountOnEnter,
       unmountOnExit,
-      enter,
-      exit,
+      enter = true,
+      exit = true,
       timeout: _timeout,
       delay: _delay,
       onEnter,
@@ -69,7 +69,7 @@ const TransitionCore = forwardRef(
       onExit,
       onExiting,
       onExited,
-      nextTick
+      nextTick = setTimeout
     } = _a, childProps = __objRest(_a, [
       "appear",
       "in",
@@ -224,11 +224,6 @@ const TransitionCore = forwardRef(
   }
 );
 TransitionCore.displayName = "BuiTransitionCore";
-TransitionCore.defaultProps = {
-  enter: true,
-  exit: true,
-  nextTick: setTimeout
-};
 var TransitionCore_default = TransitionCore;
 export {
   TransitionCore_default as default

package/es/index.d.ts

@@ -8,11 +8,6 @@ export * from './Calendar';
 export * from './Card';
 export * from './Checkbox';
 export * from './Collapse';
-export * from './DatePicker';
-export * from './DesktopDatePicker';
-export * from './DesktopTimePicker';
-export * from './DesktopDateTimePicker';
-export * from './DesktopPicker';
 export * from './Divider';
 export * from './Drawer';
 export * from './Fade';
@@ -53,4 +48,3 @@ export * from './Toast';
 export * from './Dialog';
 export * from './ThemeProvider';
 export * from './locales';
-export * from './SwipeAction';

package/es/index.js

@@ -8,11 +8,6 @@ export * from "./Calendar";
 export * from "./Card";
 export * from "./Checkbox";
 export * from "./Collapse";
-export * from "./DatePicker";
-export * from "./DesktopDatePicker";
-export * from "./DesktopTimePicker";
-export * from "./DesktopDateTimePicker";
-export * from "./DesktopPicker";
 export * from "./Divider";
 export * from "./Drawer";
 export * from "./Fade";
@@ -53,4 +48,3 @@ export * from "./Toast";
 export * from "./Dialog";
 export * from "./ThemeProvider";
 export * from "./locales";
-export * from "./SwipeAction";

package/es/locales/base.d.ts

@@ -37,15 +37,4 @@ export interface BaseLang {
         currentType?: Record<string, string>;
         hotCityType?: Record<string, string>;
     };
-    desktopDatePicker?: {
-        month?: Record<number, string>;
-    };
-    datePicker?: {
-        year: string;
-        month: string;
-        day: string;
-        hour: string;
-        minute: string;
-        second: string;
-    };
 }

package/es/locales/en-US.js

@@ -42,30 +42,6 @@ const enUS = {
       title: "Hot",
       code: "HOT"
     }
-  },
-  desktopDatePicker: {
-    month: {
-      1: "Jan",
-      2: "Feb",
-      3: "Mar",
-      4: "Apr",
-      5: "May",
-      6: "Jun",
-      7: "Jul",
-      8: "Aug",
-      9: "Sep",
-      10: "Oct",
-      11: "Nov",
-      12: "Dec"
-    }
-  },
-  datePicker: {
-    year: "Year",
-    month: "Month",
-    day: "Day",
-    hour: "Hour",
-    minute: "Minute",
-    second: "Second"
   }
 };
 var en_US_default = enUS;

package/es/locales/zh-CN.js

@@ -24,30 +24,6 @@ const zhCN = {
     located: "\u5B9A\u4F4D",
     current: "\u5F53\u524D",
     hot: "\u70ED\u95E8"
-  },
-  desktopDatePicker: {
-    month: {
-      1: "1\u6708",
-      2: "2\u6708",
-      3: "3\u6708",
-      4: "4\u6708",
-      5: "5\u6708",
-      6: "6\u6708",
-      7: "7\u6708",
-      8: "8\u6708",
-      9: "9\u6708",
-      10: "10\u6708",
-      11: "11\u6708",
-      12: "12\u6708"
-    }
-  },
-  datePicker: {
-    year: "\u5E74",
-    month: "\u6708",
-    day: "\u65E5",
-    hour: "\u65F6",
-    minute: "\u5206",
-    second: "\u79D2"
   }
 };
 var zh_CN_default = zhCN;

package/es/locales/zh-TW.js

@@ -24,30 +24,6 @@ const zhTW = {
     located: "\u5B9A\u4F4D",
     current: "\u76EE\u524D",
     hot: "\u71B1\u9580"
-  },
-  desktopDatePicker: {
-    month: {
-      1: "1\u6708",
-      2: "2\u6708",
-      3: "3\u6708",
-      4: "4\u6708",
-      5: "5\u6708",
-      6: "6\u6708",
-      7: "7\u6708",
-      8: "8\u6708",
-      9: "9\u6708",
-      10: "10\u6708",
-      11: "11\u6708",
-      12: "12\u6708"
-    }
-  },
-  datePicker: {
-    year: "\u5E74",
-    month: "\u6708",
-    day: "\u65E5",
-    hour: "\u6642",
-    minute: "\u5206",
-    second: "\u79D2"
   }
 };
 var zh_TW_default = zhTW;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bifrostui/react",
-  "version": "1.4.8-beta.0",
+  "version": "2.0.0-alpha.0",
   "description": "React components for building mobile application",
   "homepage": "http://bui.taopiaopiao.com",
   "license": "MIT",
@@ -10,6 +10,14 @@
   "directories": {
     "test": "__tests__"
   },
+  "exports": {
+    ".": {
+      "import": "./es/index.js",
+      "module": "./es/index.js",
+      "require": "./dist/index.js"
+    },
+    "./css/*": "./es/*/index.css"
+  },
   "files": [
     "dist",
     "es",
@@ -30,13 +38,13 @@
     "glob": "11.0.0"
   },
   "dependencies": {
-    "clsx": "^1.2.1",
+    "clsx": "^2.1.1",
     "dayjs": "^1.11.7",
     "swiper": "^8.1.5",
-    "@bifrostui/icons": "1.4.8-beta.0",
-    "@bifrostui/styles": "1.4.8-beta.0",
-    "@bifrostui/types": "1.4.8-beta.0",
-    "@bifrostui/utils": "1.4.8-beta.0"
+    "@bifrostui/icons": "2.0.0-alpha.0",
+    "@bifrostui/types": "2.0.0-alpha.0",
+    "@bifrostui/utils": "2.0.0-alpha.0",
+    "@bifrostui/styles": "2.0.0-alpha.0"
   },
   "peerDependencies": {
     "@tarojs/components": "^3.0.0",

package/dist/Breadcrumb/Breadcrumb.css

@@ -1,34 +0,0 @@
-.bui-breadcrumb {
-  --margin: var(--bui-breadcrumb-margin, 0);
-  --padding: var(--bui-breadcrumb-padding, 0);
-  --color: var(--bui-breadcrumb-color, rgba(0, 0, 0, 0.45));
-  --item-separator-margin: var(--bui-breadcrumb-item-separator-margin, 0 8px);
-  --list-li-color: var(--bui-breadcrumb-list-li-color, rgba(0, 0, 0, 0.88));
-  margin: var(--margin);
-  padding: var(--padding);
-  color: var(--color);
-  list-style: none;
-  font-size: var(--bui-text-size-1);
-  line-height: var(--bui-line-height);
-}
-.bui-breadcrumb-list {
-  display: flex;
-  flex-wrap: wrap;
-  margin: var(--margin);
-  padding: var(--padding);
-  list-style: none;
-}
-.bui-breadcrumb-list a {
-  color: var(--color);
-  text-decoration: none;
-  cursor: pointer;
-}
-.bui-breadcrumb-list li:last-child {
-  color: var(--list-li-color);
-}
-.bui-breadcrumb-item {
-  cursor: pointer;
-}
-.bui-breadcrumb-item-separator {
-  margin: var(--item-separator-margin);
-}