@bifrostui/react 1.2.9-beta.0 → 1.3.1-beta.0

package/dist/Select/Select.css

@@ -1,9 +1,19 @@
 .bui-select {
+  --height: var(--bui-select-height, 27px);
+  --mini-width: var(--bui-select-min-width, 100px);
+  --font-size: var(--bui-select-font-size, var(--bui-title-size-3));
+  --padding: var(--bui-select-selector-container, 0 14px);
+  --option-container-padding: var(--bui-select-option-container-padding, 3px 0);
+  --option-margin-top: var(--bui-select-option-margin-top, 6px);
+  --option-padding: var(--bui-select-option-padding, 0 14px);
+  --option-margin: var(--bui-select-option-margin, 0 3px);
+  --option-height: var(--bui-select-option-height, 27px);
+  --option-active-font-weight: var(--bui-select-option-active-font-weight, 500);
   position: relative;
   cursor: pointer;
-  height: 27px;
-  min-width: 100px;
-  font-size: var(--bui-title-size-3);
+  height: var(--height);
+  min-width: var(--mini-width);
+  font-size: var(--font-size);
   border-radius: 5px;
   background-color: var(--bui-color-bg-view);
   font-family: var(--bui-font-family);
@@ -15,7 +25,7 @@
 .bui-select-selector-container {
   display: flex;
   align-items: center;
-  padding: 0 14px;
+  padding: var(--padding);
   height: 100%;
 }
 .bui-select-input {
@@ -32,7 +42,7 @@
   justify-content: space-between;
   align-items: center;
   flex: 1;
-  height: 27px;
+  height: var(--bui-select-height);
   background-color: transparent;
   outline: none;
   border: 0;
@@ -47,24 +57,25 @@
   left: 0;
   width: 100%;
   z-index: var(--bui-z-index-dropdown);
-  margin-top: 6px;
+  margin-top: var(--option-container-margin-top);
+  border-radius: 3px;
   background-color: var(--bui-color-bg-view);
   padding: 2px;
   overflow: hidden;
 }
 .bui-select-option-main {
   border-radius: 3px;
-  padding: 3px 0;
+  padding: var(--option-container-padding);
   box-shadow: 0 0 0 2px var(--bui-color-bg-default);
   overflow: hidden;
 }
 .bui-select-option {
   display: flex;
   align-items: center;
-  height: 27px;
-  padding: 0 14px;
+  height: var(--option-height);
+  padding: var(--option-padding);
   border-radius: 5px;
-  margin: 0 3px;
+  margin: var(--option-margin);
 }
 .bui-select-option:hover {
   background-color: var(---bui-select-options-active-bg, #fff2f0);

package/dist/Select/Select.js

@@ -142,7 +142,7 @@ const Select = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
   };
   const selectContext = (0, import_react.useMemo)(
     () => ({ selectValue, setRenderValue, handleOptionClick }),
-    [selectValue]
+    [selectValue, onChange, setRenderValue]
   );
   (0, import_react.useEffect)(() => {
     if (open !== void 0)

package/dist/Select/SelectOption.js

@@ -72,6 +72,9 @@ const SelectOption = /* @__PURE__ */ import_react.default.forwardRef(
       if (value === selectValue) {
         setRenderValue(label);
       }
+      return () => {
+        setRenderValue("");
+      };
     }, [selectValue, label, value]);
     return /* @__PURE__ */ import_react.default.createElement(
       "div",

package/dist/Skeleton/Skeleton.css

@@ -1,5 +1,6 @@
 .bui-skeleton {
   --border-radius: var(--bui-shape-radius-label);
+  --height: var(--bui-skeleton-height, 1.2em);
   display: block;
 }
 .bui-skeleton-animation-wave {
@@ -26,10 +27,10 @@
   content: "\a0";
 }
 .bui-skeleton-rectangular {
-  height: 1.2em;
+  height: var(--height);
 }
 .bui-skeleton-rounded {
-  height: 1.2em;
+  height: var(--height);
   border-radius: var(--border-radius);
 }
 .bui-skeleton-circular {

package/dist/Slider/Slider.css

@@ -4,10 +4,21 @@
   --tooltip-font-size: var(--bui-text-size-3);
   --tooltip-color: var(--bui-color-white);
   --tooltip-bg-color: var(--line-color);
+  --width: var(--bui-slider-width, 100%);
+  --height: var(--bui-slider-height, 2px);
+  --padding: var(--bui-slider-padding, 19px 0);
+  --button-width: var(--bui-slider-button-width, 26px);
+  --button-height: var(--bui-slider-button-height, 26px);
+  --button-font-size: var(--bui-slider-button-font-size, var(--bui-title-size-3));
+  --button-border-radius: var(--bui--slider-button-border-radius, 50%);
+  --tooltip-width: var(--bui-slider-tooltip-width, 46px);
+  --tooltip-height: var(--bui-slider-tooltip-height, 24px);
+  --tooltip-line-height: var(--bui-slider-tooltip-line-height, 24px);
+  --tooltip-border-radius: var(--bui-slider-tooltip-border-radius, 24px);
   position: relative;
-  width: 100%;
-  height: 2px;
-  padding: 19px 0;
+  width: var(--width);
+  height: var(--height);
+  padding: var(--padding);
   box-sizing: border-box;
   font-family: var(--bui-font-family);
 }
@@ -19,7 +30,7 @@
   position: absolute;
   top: 50%;
   left: 0;
-  height: 2px;
+  height: var(--height);
   transform: translateY(-50%);
   background-color: var(--line-color);
 }
@@ -28,7 +39,7 @@
   top: 50%;
   left: 0;
   width: 100%;
-  height: 2px;
+  height: var(---height);
   transform: translateY(-50%);
   background-color: var(--line-bg-color);
 }
@@ -37,11 +48,11 @@
   position: absolute;
   justify-content: center;
   align-items: center;
-  width: 26px;
-  height: 26px;
-  background-color: #fff;
+  width: var(--button-width);
+  height: var(--button-height);
+  background-color: var(--bui-color-white);
   box-shadow: #ddd 0 0 10px;
-  border-radius: 50%;
+  border-radius: var(--button-border-radius);
   transform: translate(-50%, -50%);
   font-size: var(--bui-title-size-3);
   cursor: grab;
@@ -67,11 +78,11 @@
 .bui-slider-tooltip {
   position: absolute;
   top: -14px;
-  width: 46px;
-  height: 24px;
-  line-height: 24px;
+  width: var(--tooltip-width);
+  height: var(--tooltip-height);
+  line-height: var(--tooltip-line-height);
   font-size: var(--tooltip-font-size);
-  border-radius: 24px;
+  border-radius: var(--tooltip-border-radius);
   color: var(--tooltip-color);
   text-align: center;
   background-color: var(--tooltip-bg-color);

package/dist/Steps/Step.css

@@ -5,7 +5,7 @@
   font-family: var(--bui-font-family);
 }
 .bui-step-label-horizontal {
-  line-height: 1.8;
+  line-height: var(--step-label-horizontal-line-height);
 }
 .bui-step:last-child .bui-step-line::after {
   display: none;
@@ -13,8 +13,8 @@
 .bui-step-line {
   position: absolute;
   top: 0;
-  width: 1px;
-  height: 100%;
+  width: var(--step-line-width);
+  height: var(--step-line-height);
   box-sizing: border-box;
   left: 13px;
   padding: var(--step-line-padding);
@@ -22,8 +22,8 @@
 .bui-step-line::after {
   display: inline-block;
   content: "";
-  width: 1px;
-  border-left-width: 1px;
+  width: var(--step-line-width);
+  border-left-width: var(--step-line-width);
   border-left-style: dotted;
   height: calc(100% + 11px);
 }
@@ -41,14 +41,14 @@
 }
 .bui-step-icon {
   flex-shrink: 0;
-  width: 28px;
+  width: var(--step-icon-width);
   text-align: center;
   margin: var(--step-icon-margin);
-  font-size: var(--bui-title-size-4);
+  font-size: var(--step-icon-font-size);
 }
 .bui-step-icon-active {
-  width: 12px;
-  height: 12px;
+  width: var(--step-icon-active-width);
+  height: var(--step-icon-active-height);
   position: relative;
   background-color: var(--bui-color-primary);
   border-radius: 50%;
@@ -56,7 +56,7 @@
   display: inline-block;
 }
 .bui-step-content {
-  padding: 3px 0;
+  padding: var(--step-content-padding);
   box-sizing: border-box;
   flex: 1 0 0;
   overflow: hidden;
@@ -128,7 +128,7 @@
 }
 .bui-step-horizontal .bui-step-line {
   display: none;
-  padding: 28px 0 6px;
+  padding: var(--step-horizontal-line-padding);
 }
 .bui-step-horizontal .bui-step-icon {
   margin-right: 0;

package/dist/Steps/Steps.css

@@ -1,12 +1,21 @@
 .bui-steps {
+  --font-size: var(--bui-steps-font-size, var(--bui-title-size-3));
   --title-font-size: var(--bui-title-size-4);
   --title-font-weight: var(--bui-font-weight-medium);
-  --subtitle-font-size: var(--bui-text-size-2);
-  --description-font-size: var(--bui-text-size-3);
-  --step-icon-margin: var(--bui-spacing-xs) var(--bui-spacing-xs) 0 0;
-  --step-line-padding: 20px 0 3px 0;
+  --subtitle-font-size: var(--bui-step-subtitle-font-size, var(--bui-text-size-2));
+  --step-line-padding: var(--bui-step-line-padding, 20px 0 3px 0);
+  --step-line-width: var(--bui-step-line-width, 1px);
+  --step-line-height: var(--bui-step-line-height, 100%);
+  --step-label-horizontal-line-height: var(--bui-step-label-horizontal-line-height, 1.8);
+  --step-icon-width: var(--bui-step-icon-width, 28px);
+  --step-icon-active-width: var(--bui-step-icon-active-width, 12px);
+  --step-icon-active-height: var(--bui-step-icon-active-height, 12px);
+  --step-icon-font-size: var(--bui-step-icon-font-size, var(--bui-title-size-4));
+  --step-icon-margin: var(--bui-step-icon-margin, var(--bui-spacing-xs) var(--bui-spacing-xs) 0 0);
+  --step-content-padding: var(--bui-step-content-padding, 3px 0);
+  --step-horizontal-line-padding: var(--bui-step-horizontal-line-padding, 28px 0 6px);
   display: flex;
-  font-size: var(--bui-title-size-3);
+  font-size: var(--font-size);
   font-family: var(--bui-font-family);
 }
 .bui-steps-vertical {

package/dist/Swiper/Swiper.css

@@ -1,8 +1,9 @@
 .bui-swiper {
+  --height: var(--bui-swiper-height, 150px);
   font-family: var(--bui-font-family);
 }
 .bui-swiper .swiper-container-wrapper {
-  height: 150px;
+  height: var(--height);
 }
 .bui-swiper .swiper-container {
   height: 100%;

package/dist/Switch/Switch.css

@@ -1,11 +1,26 @@
 .bui-switch {
-  --bg-color: #ccc;
+  --bg-color: var(--bui-switch-bg-color, #ccc);
+  --padding: var(--bui-switch-padding, 0);
+  --border-radius: var(--bui-switch-border-radius, 15px);
+  --small-width: var(--bui-switch-small-width, 24px);
+  --small-height: var(--bui-switch-small-height, 16px);
+  --small-font-size: var(--bui-switch-small-font-size, 9px);
+  --controller-small-width: var(--bui-switch-controller-small-width, 12px);
+  --controller-small-height: var(--bui-switch-controller-small-height, 12px);
+  --medium-width: var(--bui-switch-medium-width, 44px);
+  --medium-height: var(--bui-switch-medium-height, 22px);
+  --controller-medium-width: var(--bui-switch-controller-medium-width, 18px);
+  --controller-medium-height: var(--bui-switch-controller-medium-height, 18px);
+  --large-width: var(--bui-switch-large-width, 51px);
+  --large-height: var(--bui-switch-large-height, 30px);
+  --controller-large-width: var(--bui-switch-controller-large-width, 24px);
+  --controller-large-height: var(--bui-switch-controller-large-height, 24px);
   position: relative;
   display: inline-block;
   box-sizing: border-box;
-  padding: 0;
+  padding: var(--padding);
   vertical-align: middle;
-  border-radius: 15px;
+  border-radius: var(--border-radius);
   background-color: var(--bg-color);
   transition: all 0.3s cubic-bezier(0.35, 0, 0.25, 1);
   font-family: var(--bui-font-family);
@@ -27,16 +42,16 @@
   outline: none;
 }
 .bui-switch-small {
-  width: 24px;
-  height: 16px;
+  width: var(--small-width);
+  height: var(--small-height);
 }
 .bui-switch-small .bui-switch-inner {
   left: calc(100% - 10px);
-  font-size: 9px;
+  font-size: var(--font-size-smal);
 }
 .bui-switch-small::after {
-  width: 12px;
-  height: 12px;
+  width: var(--controller-small-width);
+  height: var(--controller-small-height);
   left: 2px;
   top: 2px;
 }
@@ -47,12 +62,12 @@
   left: 2px;
 }
 .bui-switch-medium {
-  width: 44px;
-  height: 22px;
+  width: var(--medium-width);
+  height: var(--medium-height);
 }
 .bui-switch-medium::after {
-  width: 18px;
-  height: 18px;
+  width: var(--controller-medium-width);
+  height: var(--controller-medium-height);
 }
 .bui-switch-medium.bui-switch-checked::after {
   left: calc(100% - 20px);
@@ -61,15 +76,15 @@
   left: var(--bui-spacing-sm);
 }
 .bui-switch-large {
-  width: 51px;
-  height: 30px;
+  width: var(--large-width);
+  height: var(--large-height);
 }
 .bui-switch-large .bui-switch-inner {
   left: calc(100% - 22px);
 }
 .bui-switch-large::after {
-  width: 24px;
-  height: 24px;
+  width: var(--controller-large-width);
+  height: var(--controller-large-height);
   left: 3px;
   top: 3px;
 }

package/dist/TabBar/TabBar.css

@@ -1,8 +1,12 @@
 .bui-tab-bar {
+  --width: var(--bui-tab-bar-width, 100%);
+  --height: var(--bui-tab-bar-height, 50px);
+  --padding: var(--bui-tab-bar-padding, 6px 0);
+  --bui-tab-bar-color: var(--bui-tab-bar-default-color, var(--bui-color-fg-default));
   display: flex;
-  width: 100%;
-  height: 50px;
-  padding: 6px 0;
+  width: var(--width);
+  height: var(--height);
+  padding: var(--padding);
   background: var(--bui-color-white);
   font-family: var(--bui-font-family);
 }

package/dist/TabBar/TabBarItem.css

@@ -1,5 +1,4 @@
 .bui-tab-bar-item {
-  --bui-tab-bar-color: var(--bui-tab-bar-default-color, var(--bui-color-fg-default));
   display: flex;
   align-items: center;
   justify-content: center;

package/dist/Tabs/Tab.css

@@ -4,20 +4,16 @@
   justify-content: center;
   white-space: nowrap;
   width: min-content;
-  height: 100%;
+  height: var(--tab-height);
   box-sizing: border-box;
   position: relative;
   cursor: pointer;
   font-size: var(--font-size);
   line-height: var(--bui-line-height);
   color: var(--color);
-  padding: var(--bui-spacing-lg) var(--bui-spacing-lg) 10px;
+  padding: var(--tab-padding);
   font-family: var(--bui-font-family);
 }
-.bui-tab-center {
-  flex: 1 0 auto;
-  margin: 0 auto;
-}
 .bui-tab-active {
   font-size: var(--font-size);
   line-height: var(--bui-line-height);

package/dist/Tabs/Tabs.css

@@ -1,11 +1,14 @@
 .bui-tabs {
-  --height: 39px;
+  --height: var(--bui-tabs-height, 39px);
   --font-size: var(--bui-text-size-1);
   --color: var(--bui-color-fg-subtle);
   --active-color: var(--bui-color-fg-default);
   --line-color: var(--bui-color-primary);
-  --line-height: 3PX;
-  --line-width: 18px;
+  --line-height: var(--bui-tabs-line-height, 3PX);
+  --line-width: var(--bui-tabs-line-width, 18px);
+  --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);
   position: relative;
   font-family: var(--bui-font-family);
 }
@@ -40,7 +43,7 @@
   bottom: 0;
   z-index: 1;
   width: 12px;
-  height: 100%;
+  height: var(--bui-tabs-mask-height);
   pointer-events: none;
 }
 .bui-tabs-mask-left {

package/dist/Tag/Tag.css

@@ -1,15 +1,12 @@
 .bui-tag {
-  --color: var(--bui-tag-color, var(--bui-color-gray));
-  --border-color: var(--bui-tag-border-color, var(--bui-color-border-gray));
-  --bg-color: var(--bui-tag-bg-color, var(--bui-color-gray));
   position: relative;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   white-space: nowrap;
-  height: 15px;
-  line-height: 15px;
-  padding: 0 var(--bui-spacing-xs);
+  height: var(--tag-height);
+  line-height: var(--tag-line-height);
+  padding: var(--tag-padding);
   font-size: var(--bui-text-size-5);
   font-weight: var(--bui-font-weight-normal);
   border-radius: var(--bui-shape-radius-label);
@@ -19,8 +16,8 @@
   font-family: var(--bui-font-family);
 }
 .bui-tag-outlined {
-  color: var(--color);
-  border: 1px solid var(--border-color);
+  color: var(--tag-color);
+  border: 1px solid var(--tag-border-color);
 }
 .bui-tag-outlined.bui-tag-primary {
   color: var(--bui-color-primary);
@@ -47,7 +44,7 @@
   border: 1px solid var(--bui-color-border-primary);
 }
 .bui-tag-contained {
-  background-color: var(--bg-color);
+  background-color: var(--tag-bg-color);
 }
 .bui-tag-contained.bui-tag-primary {
   background-color: var(--bui-color-primary);
@@ -92,6 +89,6 @@
   color: var(--bui-color-danger);
 }
 .bui-tag-light.bui-tag-vip {
-  background-color: rgba(255, 134, 110, 0.3);
+  background-color: var(--tag-bg-color-vip);
   color: var(--bui-color-vip);
 }

package/dist/Tag/TagGroup.css

@@ -1,4 +1,12 @@
 .bui-tag-group {
+  --height: var(--bui-tag-group-divider-height, 13%);
+  --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));
   display: inline-flex;
   font-family: var(--bui-font-family);
 }
@@ -24,7 +32,7 @@
   position: absolute;
   right: -1px;
   width: 1px;
-  height: 13%;
+  height: var(--height);
   color: #fff;
   background-color: #fff;
   border-right-style: solid;

package/dist/TextArea/TextArea.css

@@ -1,13 +1,19 @@
 .bui-textarea {
+  --width: var(--bui-textarea-width, 100%);
   --bg-color: var(--bui-color-bg-default);
-  --text-color: var(--bui-color-fg-subtle);
+  --text-color: var(--bui-textarea-text-color, var(--bui-color-fg-subtle));
   --count-bg-color: var(--bg-color, var(--bui-color-bg-default));
-  --count-text-color: var(--bui-color-fg-subtle);
+  --count-text-color: var(--bui-textarea-count-color, var(--bui-color-fg-subtle));
+  --text-font-size: var(--bui-textarea-text-font-size, var(--bui-text-size-2));
+  --count-font-size: var(--bui-textarea-count-font-size, var(--bui-title-size-3));
+  --content-padding: var(--bui-textarea-padding, 8px);
+  --count-padding: var(--bui-textarea-count-padding, 0 4px);
+  --placeholder-line-height: var(--bui-textarea-placeholder-line-height, 1.3);
   background: var(--bui-color-bg-default);
   font-family: var(--bui-font-family);
 }
 .bui-textarea textarea {
-  font-size: var(--bui-text-size-2);
+  font-size: var(--text-font-size);
   color: var(--text-color);
   line-height: var(--bui-line-height);
 }
@@ -21,10 +27,10 @@
   display: none;
 }
 .bui-textarea-content {
-  width: 100%;
+  width: var(--width);
   resize: none;
   background: var(--bg-color);
-  padding: 8px;
+  padding: var(--content-padding);
   border: none;
   outline: none;
   word-break: break-all;
@@ -32,12 +38,12 @@
 }
 .bui-textarea-content::placeholder {
   color: var(--bui-color-fg-disabled);
-  line-height: 1.3;
+  line-height: var(--placeholder-line-height);
 }
 .bui-textarea-count {
   background: var(--count-bg-color);
   color: var(--count-text-color);
   text-align: right;
-  padding: 0 4px;
-  font-size: var(--bui-title-size-3);
+  padding: var(--count-padding);
+  font-size: var(--count-font-size);
 }

package/dist/ThemeProvider/ThemeProvider.d.ts

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

package/dist/ThemeProvider/ThemeProvider.js

@@ -0,0 +1,90 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var ThemeProvider_exports = {};
+__export(ThemeProvider_exports, {
+  default: () => ThemeProvider_default
+});
+module.exports = __toCommonJS(ThemeProvider_exports);
+var import_react = __toESM(require("react"));
+var import_hooks = require("./hooks");
+var import_constants = require("./utils/constants");
+var import_mountTokens = require("./utils/mountTokens");
+const ThemeProvider = /* @__PURE__ */ import_react.default.forwardRef(
+  (props, ref) => {
+    var _a;
+    const {
+      isRoot,
+      locale,
+      responsive,
+      defaultLightToken,
+      defaultDarkToken,
+      dmLightToken,
+      dmDarkToken,
+      token,
+      children
+    } = props;
+    let containerId = ((0, import_react.useId)() || "").replace(/:/g, "");
+    containerId = `${import_constants.BUI_VAR_PREFIX}${containerId}`;
+    const theme = (0, import_react.useMemo)(() => {
+      return { locale };
+    }, [locale]);
+    let childrenNode = children;
+    if (import_react.default.isValidElement(children)) {
+      childrenNode = import_react.default.cloneElement(children, {
+        className: `${containerId} ${((_a = children == null ? void 0 : children.props) == null ? void 0 : _a.className) || ""}`.trim()
+      });
+    }
+    (0, import_react.useEffect)(() => {
+      if (responsive || defaultLightToken || defaultDarkToken || dmLightToken || dmDarkToken || token) {
+        (0, import_mountTokens.mountTokens)({
+          isRoot,
+          containerId,
+          container: children,
+          responsive,
+          defaultLightToken,
+          defaultDarkToken,
+          dmLightToken,
+          dmDarkToken,
+          token
+        });
+      }
+    }, [
+      isRoot,
+      containerId,
+      responsive,
+      defaultLightToken,
+      defaultDarkToken,
+      dmLightToken,
+      dmDarkToken,
+      token
+    ]);
+    return /* @__PURE__ */ import_react.default.createElement(import_hooks.ThemeContext.Provider, { value: theme }, childrenNode);
+  }
+);
+ThemeProvider.displayName = "BuiThemeProvider";
+var ThemeProvider_default = ThemeProvider;