@bifrostui/react 1.5.3 → 2.0.0-alpha.1

package/es/Tabs/Tabs.css

@@ -1,20 +1,30 @@
+:root,
+page,
+xhs-page {
+  --bui-tabs-height: 39px;
+  --bui-tabs-font-weight: var(--bui-font-weight-medium);
+  --bui-tabs-indicator-bg: var(--bui-color-primary);
+  --bui-tabs-indicator-height: 3PX;
+  --bui-tabs-indicator-width: 24px;
+  --bui-tabs-indicator-border-radius: 3px 3px 0 0;
+  --bui-tabs-indicator-bottom: 0;
+  --bui-tabs-indicator-box-shadow: none;
+  --bui-tabs-mask-width: 12px;
+  --bui-tabs-mask-height: 100%;
+  --bui-tab-font-size: var(--bui-text-size-1);
+  --bui-tab-color: var(--bui-color-fg-subtle);
+  --bui-tab-height: 100%;
+  --bui-tab-padding: var(--bui-spacing-lg) var(--bui-spacing-lg) 10px;
+  --bui-tab-active-color: var(--bui-color-fg-default);
+  --bui-tab-active-font-family: var(--bui-font-family-accent, inherit);
+}
 .bui-tabs {
-  --height: var(--bui-tabs-height, 39px);
-  --color: var(--bui-tabs-color, var(--bui-color-fg-subtle));
-  --active-color: var(--bui-tabs-active-color, var(--bui-color-fg-default));
-  --line-color: var(--bui-tabs-line-color, var(--bui-color-primary));
-  --line-height: var(--bui-tabs-line-height, 3PX);
-  --line-width: var(--bui-tabs-line-width, 18px);
-  --mask-width: var(--bui-tabs-mask-width, 12px);
-  --mask-height: var(--bui-tabs-mask-height, 100%);
-  --tab-height: var(--bui-tab-height, 100%);
-  --tab-padding: var(--bui-tab-padding, var(--bui-spacing-lg) var(--bui-spacing-lg) 10px);
-  --font-size: var(--bui-tab-font-size, var(--bui-text-size-1));
   position: relative;
   font-family: var(--bui-font-family);
+  font-weight: var(--bui-tabs-font-weight);
 }
 .bui-tabs-tabs {
-  height: var(--height);
+  height: var(--bui-tabs-height);
   display: flex;
   flex-wrap: nowrap;
   justify-content: flex-start;
@@ -26,14 +36,15 @@
 .bui-tabs-tabs::-webkit-scrollbar {
   display: none;
 }
-.bui-tabs-tabline {
+.bui-tabs-indicator {
   position: absolute;
-  width: var(--line-width);
-  bottom: 0;
-  height: var(--line-height);
+  width: var(--bui-tabs-indicator-width);
+  bottom: var(--bui-tabs-indicator-bottom);
+  height: var(--bui-tabs-indicator-height);
   color: var(--bui-color-primary);
-  background: var(--line-color);
-  border-radius: var(--bui-shape-radius-label);
+  background: var(--bui-tabs-indicator-bg);
+  border-radius: var(--bui-tabs-indicator-border-radius);
+  box-shadow: var(--bui-tabs-indicator-box-shadow);
 }
 .bui-tabs-content {
   padding: var(--bui-spacing-lg);
@@ -43,8 +54,8 @@
   top: 0;
   bottom: 0;
   z-index: 1;
-  width: var(--mask-width);
-  height: var(--mask-height);
+  width: var(--bui-tabs-mask-width);
+  height: var(--bui-tabs-mask-height);
   pointer-events: none;
 }
 .bui-tabs-mask-left {
@@ -63,7 +74,7 @@
       var(--bui-color-bg-view),
       rgba(255, 255, 255, 0));
 }
-.bui-tabline-invisible {
+.bui-indicator-invisible {
   visibility: hidden;
   background-color: transparent;
 }

package/es/Tabs/Tabs.js

@@ -26,34 +26,21 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
-import {
-  debounce,
-  isMini,
-  throttle,
-  useDidMountEffect
-} from "@bifrostui/utils";
+import React, { useEffect, useMemo, useRef, useState } from "react";
 import clsx from "clsx";
-import React, {
-  useEffect,
-  useLayoutEffect,
-  useMemo,
-  useRef,
-  useState
-} from "react";
+import { debounce, isMini, throttle, useEventCallback } from "@bifrostui/utils";
+import scrollLeftTo from "./utils/scroll";
 import Tab from "./Tab";
 import { TabsContextProvider } from "./TabsContext";
-import scrollLeftTo from "./utils/scroll";
 import "./Tabs.css";
 const prefixCls = "bui-tabs";
 const duration = 300;
 const Tabs = /* @__PURE__ */ React.forwardRef((props, ref) => {
-  const _a = props, { children, className, value, tabs, align, onChange } = _a, others = __objRest(_a, ["children", "className", "value", "tabs", "align", "onChange"]);
-  const [active, setActive] = useState("");
+  const _a = props, { children, className, value, tabs = [], onChange } = _a, others = __objRest(_a, ["children", "className", "value", "tabs", "onChange"]);
   const tabsRef = useRef(null);
   const activeLineRef = useRef(null);
-  const [lineData, setLineData] = useState({
+  const [indicatorData, setIndicatorData] = useState({
     x: 0,
-    transitionInUse: false,
     hasActiveTab: false
   });
   const [maskData, setMaskData] = useState({
@@ -61,37 +48,35 @@ const Tabs = /* @__PURE__ */ React.forwardRef((props, ref) => {
     rightMaskOpacity: 0
   });
   const getActiveTabElement = () => {
-    const container = tabsRef.current;
-    if (!container)
-      return void 0;
-    const activeIndex = !!tabs.length && tabs.findIndex((item) => item.index === active);
-    let activeTab;
+    const tabsEl = tabsRef.current;
+    if (!tabsEl)
+      return;
+    const activeIndex = tabs.findIndex((item) => item.index === value);
     if (tabs.length) {
-      activeTab = activeIndex > -1 ? container.childNodes[activeIndex + 1] : void 0;
-    } else {
-      activeTab = [...container.childNodes].find((child) => {
-        if (isMini) {
-          return [...child.classList.tokenList].includes(
-            "bui-tab-miniapp-active"
-          );
-        }
-        return [...child.classList].includes("bui-tab-active");
-      });
+      return activeIndex > -1 ? tabsEl.childNodes[activeIndex + 1] : void 0;
     }
-    return activeTab;
+    return [...tabsEl.childNodes].find((child) => {
+      var _a2, _b;
+      if (isMini) {
+        return [...(_b = (_a2 = child == null ? void 0 : child.classList) == null ? void 0 : _a2.tokenList) != null ? _b : []].includes(
+          "bui-tab-miniapp-active"
+        );
+      }
+      return [...child.classList].includes("bui-tab-active");
+    });
   };
   const scrollIntoView = () => {
-    const tabsContainer = tabsRef.current;
+    const tabsEl = tabsRef.current;
     const activeTab = getActiveTabElement();
-    if (!tabsContainer || !activeTab) {
+    if (!tabsEl || !activeTab) {
       return;
     }
-    const to = activeTab.offsetLeft - (tabsContainer.offsetWidth - activeTab.offsetWidth) / 2;
-    scrollLeftTo(tabsContainer, to, duration);
+    const to = activeTab.offsetLeft - (tabsEl.offsetWidth - activeTab.offsetWidth) / 2;
+    scrollLeftTo(tabsEl, to, duration);
   };
-  const animate = ({ transitionInUse }) => {
-    const container = tabsRef.current;
-    if (!container)
+  const animate = useEventCallback(() => {
+    const tabsEl = tabsRef.current;
+    if (!tabsEl)
       return;
     const activeLine = activeLineRef.current;
     if (!activeLine)
@@ -106,14 +91,13 @@ const Tabs = /* @__PURE__ */ React.forwardRef((props, ref) => {
     if (activeTab) {
       activeTabLeft = activeTab.offsetLeft;
       activeTabWidth = activeTab.offsetWidth;
-      containerWidth = container.offsetWidth;
-      containerScrollWidth = container.scrollWidth;
+      containerWidth = tabsEl.offsetWidth;
+      containerScrollWidth = tabsEl.scrollWidth;
       activeLineWidth = activeLine.offsetWidth;
       x = activeTabLeft + (activeTabWidth - activeLineWidth) / 2;
     }
-    setLineData({
+    setIndicatorData({
       x,
-      transitionInUse,
       hasActiveTab: !!activeTab
     });
     const maxScrollDistance = containerScrollWidth - containerWidth;
@@ -122,36 +106,17 @@ const Tabs = /* @__PURE__ */ React.forwardRef((props, ref) => {
     if (!isMini) {
       scrollIntoView();
     }
-  };
-  useEffect(() => {
-    setActive(value);
-  }, [value]);
-  useLayoutEffect(() => {
-    animate({ transitionInUse: false });
-  }, []);
-  useEffect(() => {
-    const handleResize = debounce(() => {
-      animate({ transitionInUse: true });
-      updateMask();
-    }, 100);
-    window.addEventListener("resize", handleResize);
-    return () => {
-      window.removeEventListener("resize", handleResize);
-    };
-  }, [active]);
-  useDidMountEffect(() => {
-    animate({ transitionInUse: true });
-  }, [active, tabs, children]);
+  });
   const updateMask = useMemo(
     () => throttle(
       () => {
-        const container = tabsRef.current;
-        if (!container)
+        const tabsEl = tabsRef.current;
+        if (!tabsEl)
           return;
-        const scrollLeft = container == null ? void 0 : container.scrollLeft;
+        const scrollLeft = tabsEl == null ? void 0 : tabsEl.scrollLeft;
         const showLeftMask = scrollLeft > 0;
         const rightRange = Math.abs(
-          container.scrollWidth - (scrollLeft + container.offsetWidth)
+          tabsEl.scrollWidth - (scrollLeft + tabsEl.offsetWidth)
         );
         const showRightMask = rightRange > 1;
         setMaskData({
@@ -167,33 +132,36 @@ const Tabs = /* @__PURE__ */ React.forwardRef((props, ref) => {
     ),
     []
   );
-  useLayoutEffect(() => {
+  useEffect(() => {
+    animate();
+  }, [value, tabs.length, React.Children.toArray(children).length]);
+  useEffect(() => {
     updateMask();
+    const handleResize = debounce(() => {
+      animate();
+      updateMask();
+    }, 100);
+    window.addEventListener("resize", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
   }, []);
   const handleClick = (e, item) => {
     const { index, disabled = false } = item;
-    if (disabled)
+    if (disabled || [void 0, null].includes(index))
       return;
-    if (index === void 0 || index === null) {
-      return;
-    }
-    if (active !== value) {
-      setActive(index);
-    }
     if (index !== value) {
       onChange == null ? void 0 : onChange(e, { index });
     }
   };
-  const providerValue = useMemo(() => {
-    return { value, align, triggerChange: handleClick };
-  }, [value, align, children, handleClick]);
   return /* @__PURE__ */ React.createElement("div", __spreadValues({ ref, className: clsx(prefixCls, className) }, others), /* @__PURE__ */ React.createElement(
     "div",
     {
       className: clsx(`${prefixCls}-mask`, `${prefixCls}-mask-left`),
       style: {
         opacity: maskData.leftMaskOpacity
-      }
+      },
+      "aria-hidden": "true"
     }
   ), /* @__PURE__ */ React.createElement(
     "div",
@@ -201,37 +169,50 @@ const Tabs = /* @__PURE__ */ React.forwardRef((props, ref) => {
       className: clsx(`${prefixCls}-mask`, `${prefixCls}-mask-right`),
       style: {
         opacity: maskData.rightMaskOpacity
-      }
+      },
+      "aria-hidden": "true"
     }
-  ), /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-tabs`, ref: tabsRef, onScroll: updateMask }, /* @__PURE__ */ React.createElement(
+  ), /* @__PURE__ */ React.createElement(
     "div",
     {
-      ref: activeLineRef,
-      className: clsx(`${prefixCls}-tabline`, {
-        "bui-tabline-invisible": isMini || !lineData.hasActiveTab
-      }),
-      style: {
-        transition: lineData.transitionInUse ? `transform ${duration / 1e3}s ease` : void 0,
-        transform: `translate3d(${lineData.x}px, 0px, 0px)`
-      }
-    }
-  ), /* @__PURE__ */ React.createElement(TabsContextProvider, { value: providerValue }, !!tabs.length && tabs.map((item) => {
-    return /* @__PURE__ */ React.createElement(
-      Tab,
+      className: `${prefixCls}-tabs`,
+      ref: tabsRef,
+      onScroll: updateMask,
+      role: "tablist",
+      "aria-orientation": "horizontal"
+    },
+    /* @__PURE__ */ React.createElement(
+      "div",
       {
-        key: item.index,
-        index: item == null ? void 0 : item.index,
-        disabled: item == null ? void 0 : item.disabled
-      },
-      item.title
-    );
-  }), children)));
+        ref: activeLineRef,
+        className: clsx(`${prefixCls}-indicator`, {
+          "bui-indicator-invisible": isMini || !indicatorData.hasActiveTab
+        }),
+        style: {
+          transition: "transform 0.3s ease-in-out",
+          transform: `translate(${indicatorData.x}px, 0px)`
+        },
+        "aria-hidden": "true"
+      }
+    ),
+    /* @__PURE__ */ React.createElement(TabsContextProvider, { value: { value, triggerChange: handleClick } }, !!tabs.length && tabs.map((item) => {
+      return /* @__PURE__ */ React.createElement(
+        Tab,
+        {
+          key: item.index,
+          index: item == null ? void 0 : item.index,
+          disabled: item == null ? void 0 : item.disabled,
+          role: "tab",
+          "aria-selected": value === item.index,
+          "aria-disabled": item == null ? void 0 : item.disabled,
+          tabIndex: (item == null ? void 0 : item.disabled) ? -1 : 0
+        },
+        item.title
+      );
+    }), children)
+  ));
 });
 Tabs.displayName = "BuiTabs";
-Tabs.defaultProps = {
-  align: "center",
-  tabs: []
-};
 var Tabs_default = Tabs;
 export {
   Tabs_default as default

package/es/Tabs/TabsContext.js

@@ -1,5 +1,7 @@
 import React from "react";
-const TabsContext = React.createContext(void 0);
+const TabsContext = React.createContext(
+  void 0
+);
 if (process.env.NODE_ENV !== "production") {
   TabsContext.displayName = "BuiTabsContext";
 }

package/es/Tabs/index.css

@@ -0,0 +1,135 @@
+:root,
+page,
+xhs-page {
+  --bui-tabs-height: 39px;
+  --bui-tabs-font-weight: var(--bui-font-weight-medium);
+  --bui-tabs-indicator-bg: var(--bui-color-primary);
+  --bui-tabs-indicator-height: 3PX;
+  --bui-tabs-indicator-width: 24px;
+  --bui-tabs-indicator-border-radius: 3px 3px 0 0;
+  --bui-tabs-indicator-bottom: 0;
+  --bui-tabs-indicator-box-shadow: none;
+  --bui-tabs-mask-width: 12px;
+  --bui-tabs-mask-height: 100%;
+  --bui-tab-font-size: var(--bui-text-size-1);
+  --bui-tab-color: var(--bui-color-fg-subtle);
+  --bui-tab-height: 100%;
+  --bui-tab-padding: var(--bui-spacing-lg) var(--bui-spacing-lg) 10px;
+  --bui-tab-active-color: var(--bui-color-fg-default);
+  --bui-tab-active-font-family: var(--bui-font-family-accent, inherit);
+}
+.bui-tabs {
+  position: relative;
+  font-family: var(--bui-font-family);
+  font-weight: var(--bui-tabs-font-weight);
+}
+.bui-tabs-tabs {
+  height: var(--bui-tabs-height);
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: flex-start;
+  align-items: center;
+  position: relative;
+  overflow-x: scroll;
+  scrollbar-width: none;
+}
+.bui-tabs-tabs::-webkit-scrollbar {
+  display: none;
+}
+.bui-tabs-indicator {
+  position: absolute;
+  width: var(--bui-tabs-indicator-width);
+  bottom: var(--bui-tabs-indicator-bottom);
+  height: var(--bui-tabs-indicator-height);
+  color: var(--bui-color-primary);
+  background: var(--bui-tabs-indicator-bg);
+  border-radius: var(--bui-tabs-indicator-border-radius);
+  box-shadow: var(--bui-tabs-indicator-box-shadow);
+}
+.bui-tabs-content {
+  padding: var(--bui-spacing-lg);
+}
+.bui-tabs-mask {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  z-index: 1;
+  width: var(--bui-tabs-mask-width);
+  height: var(--bui-tabs-mask-height);
+  pointer-events: none;
+}
+.bui-tabs-mask-left {
+  left: 0;
+  background:
+    linear-gradient(
+      to right,
+      var(--bui-color-bg-view),
+      rgba(255, 255, 255, 0));
+}
+.bui-tabs-mask-right {
+  right: 0;
+  background:
+    linear-gradient(
+      to left,
+      var(--bui-color-bg-view),
+      rgba(255, 255, 255, 0));
+}
+.bui-indicator-invisible {
+  visibility: hidden;
+  background-color: transparent;
+}
+.bui-tab {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  white-space: nowrap;
+  width: min-content;
+  height: var(--bui-tab-height);
+  box-sizing: border-box;
+  position: relative;
+  cursor: pointer;
+  font-size: var(--bui-tab-font-size);
+  line-height: var(--bui-line-height);
+  color: var(--bui-tab-color);
+  padding: var(--bui-tab-padding);
+  font-family: var(--bui-font-family);
+}
+.bui-tab-active {
+  color: var(--bui-tab-active-color);
+  font-weight: var(--bui-font-weight-bold);
+  font-family: var(--bui-tab-active-font-family);
+}
+.bui-tab-miniapp-active {
+  color: var(--bui-tab-active-color);
+  line-height: 1.5;
+  font-weight: var(--bui-font-weight-bold);
+  position: relative;
+}
+.bui-tab-miniapp-active-line {
+  position: absolute;
+  bottom: 0;
+  left: -12px;
+  right: -12px;
+  margin: 0 auto !important;
+  width: 18px;
+  height: 2px;
+  transition: all 100ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  background-color: var(--bui-color-primary);
+}
+.bui-tab-disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+.bui-indicator-invisible {
+  visibility: hidden;
+  background-color: transparent;
+}
+.bui-tabpanel {
+  font-family: var(--bui-font-family);
+}
+.bui-tabpanel-active {
+  display: block;
+}
+.bui-tabpanel-inactive {
+  display: none;
+}

package/es/Tag/Tag.css

@@ -1,30 +1,34 @@
+:root,
+page,
+xhs-page {
+  --bui-tag-color: var(--bui-color-gray);
+  --bui-tag-border-color: var(--bui-color-border-gray);
+  --bui-tag-bg-color: var(--bui-color-gray);
+  --bui-tag-height: 15px;
+  --bui-tag-line-height: 15px;
+  --bui-tag-padding: 0 var(--bui-spacing-xs);
+  --bui-tag-color-vip: rgba(255, 134, 110, 0.3);
+}
 .bui-tag {
-  --tag-color: var(--bui-tag-color, var(--bui-color-gray));
-  --tag-border-color: var(--bui-tag-border-color, var(--bui-color-border-gray));
-  --tag-bg-color: var(--bui-tag-bg-color, var(--bui-color-gray));
-  --tag-height: var(--bui-tag-height, 15px);
-  --tag-line-height: var(--bui-tag-line-height, 15px);
-  --tag-padding: var(--bui-tag-padding, 0 var(--bui-spacing-xs));
-  --tag-bg-color-vip: var(--bui-tag-color-vip, rgba(255, 134, 110, 0.3));
   position: relative;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   white-space: nowrap;
-  height: var(--tag-height);
-  line-height: var(--tag-line-height);
-  padding: var(--tag-padding);
+  height: var(--bui-tag-height);
+  line-height: var(--bui-tag-line-height);
+  padding: var(--bui-tag-padding);
   font-size: var(--bui-text-size-5);
   font-weight: var(--bui-font-weight-normal);
   border-radius: var(--bui-shape-radius-label);
   border: 1px solid transparent;
   box-sizing: border-box;
-  color: var(--bui-color-bg-view);
+  color: var(--bui-color-white);
   font-family: var(--bui-font-family);
 }
 .bui-tag-outlined {
-  color: var(--tag-color);
-  border: 1px solid var(--tag-border-color);
+  color: var(--bui-tag-color);
+  border: 1px solid var(--bui-tag-border-color);
 }
 .bui-tag-outlined.bui-tag-primary {
   color: var(--bui-color-primary);
@@ -46,12 +50,20 @@
   color: var(--bui-color-danger);
   border: 1px solid var(--bui-color-border-danger);
 }
+.bui-tag-outlined.bui-tag-light {
+  color: var(--bui-color-bg-view);
+  border: 1px solid var(--bui-color-bg-view);
+}
+.bui-tag-outlined.bui-tag-dark {
+  color: var(--bui-color-fg-default);
+  border: 1px solid var(--bui-color-fg-default);
+}
 .bui-tag-outlined.bui-tag-vip {
-  color: var(--bui-color-red);
+  color: var(--bui-color-primary);
   border: 1px solid var(--bui-color-border-primary);
 }
 .bui-tag-contained {
-  background-color: var(--tag-bg-color);
+  background-color: var(--bui-tag-bg-color);
 }
 .bui-tag-contained.bui-tag-primary {
   background-color: var(--bui-color-primary);
@@ -68,34 +80,48 @@
 .bui-tag-contained.bui-tag-danger {
   background-color: var(--bui-color-danger);
 }
+.bui-tag-contained.bui-tag-light {
+  color: var(--bui-color-fg-default);
+  background-color: var(--bui-color-bg-view);
+}
+.bui-tag-contained.bui-tag-dark {
+  color: var(--bui-color-bg-view);
+  background-color: var(--bui-color-fg-default);
+}
 .bui-tag-contained.bui-tag-vip {
   background-color: var(--bui-color-vip);
 }
-.bui-tag-light {
+.bui-tag-subtle {
   background-color: var(--bui-color-gray-light);
   color: var(--bui-color-gray);
 }
-.bui-tag-light.bui-tag-primary {
+.bui-tag-subtle.bui-tag-primary {
   background-color: var(--bui-color-primary-light);
   color: var(--bui-color-primary);
 }
-.bui-tag-light.bui-tag-info {
+.bui-tag-subtle.bui-tag-info {
   background-color: var(--bui-color-info-light);
   color: var(--bui-color-info);
 }
-.bui-tag-light.bui-tag-warning {
+.bui-tag-subtle.bui-tag-warning {
   background-color: var(--bui-color-warning-light);
   color: var(--bui-color-warning);
 }
-.bui-tag-light.bui-tag-success {
+.bui-tag-subtle.bui-tag-success {
   background-color: var(--bui-color-success-light);
   color: var(--bui-color-success);
 }
-.bui-tag-light.bui-tag-danger {
+.bui-tag-subtle.bui-tag-danger {
   background-color: var(--bui-color-danger-light);
   color: var(--bui-color-danger);
 }
-.bui-tag-light.bui-tag-vip {
-  background-color: var(--tag-bg-color-vip);
+.bui-tag-subtle.bui-tag-light {
+  color: var(--bui-color-bg-view);
+}
+.bui-tag-subtle.bui-tag-dark {
+  color: var(--bui-color-fg-default);
+}
+.bui-tag-subtle.bui-tag-vip {
+  background-color: var(--bui-tag-color-vip);
   color: var(--bui-color-vip);
 }

package/es/Tag/Tag.js

@@ -47,9 +47,9 @@ const Tag = /* @__PURE__ */ React.forwardRef((props, ref) => {
   const _a = props, {
     className,
     style,
-    color,
+    color = "neutral",
     htmlColor,
-    variant,
+    variant = "outlined",
     onClick,
     children
   } = _a, others = __objRest(_a, [
@@ -68,7 +68,7 @@ const Tag = /* @__PURE__ */ React.forwardRef((props, ref) => {
         color: htmlColor,
         borderColor: colorHandler(htmlColor, 0.4)
       };
-    } else if (variant === "light") {
+    } else if (variant === "subtle") {
       customStyles = {
         color: htmlColor,
         backgroundColor: colorHandler(htmlColor, 0.3)
@@ -98,10 +98,6 @@ const Tag = /* @__PURE__ */ React.forwardRef((props, ref) => {
   );
 });
 Tag.displayName = "BuiTag";
-Tag.defaultProps = {
-  variant: "outlined",
-  color: "default"
-};
 var Tag_default = Tag;
 export {
   Tag_default as default