Fix sui for beehive

packages/assets/css/src/scss/_components/_accordion/_accordion-elements/_build-header.scss

@@ -37,6 +37,11 @@
 				gap: $spacing-sm;
 			}
 
+			@include element(header-icon) {
+				display: flex;
+				align-self: center;
+			}
+
 			@include element(header-actions) {
 				align-items: center;
 				display: inline-flex;

packages/assets/css/src/scss/_components/_date-picker/_elements/_build-popover.scss

@@ -14,6 +14,7 @@
 	@include sui-class($rtl: false, $theme: null) {
 		// Block wrapper.
 		@include block($block) {
+			position: relative;
 			@include element(popover) {
 				background: $color-base-white;
 				box-shadow: 0 $shadow-offset-xs $shadow-offset-sm 0 $color-shadow-dark,
@@ -25,10 +26,19 @@
 				width: auto;
 				border-radius: $border-radius-md;
 				overflow: hidden;
+				z-index: 1;
 
 				@include modifier(open) {
 					display: block;
 				}
+
+				@include modifier(left) {
+					left: 0;
+				}
+
+				@include modifier(right) {
+					right: 0;
+				}
 			}
 
 			@include element(header, footer) {

packages/assets/css/src/scss/_components/_date-picker/_elements/_build-range.scss

@@ -20,6 +20,9 @@
 				overflow: auto;
 				-ms-overflow-style: none; /* for Internet Explorer, Edge */
 				scrollbar-width: none; /* for Firefox */
+				flex-wrap: wrap;
+				max-width: 470px;
+				justify-content: center;
 
 				&::-webkit-scrollbar {
 					display: none; /* for Chrome, Safari, and Opera */

packages/assets/css/src/scss/_components/_dropdown/_elements/_dropdown-menu.scss

@@ -12,6 +12,16 @@
 			@include element(menu) {
 				margin: 0;
 				padding: 0;
+
+				@include modifier(no-results) {
+					font: $font-weight-default #{$font-size-xs}/#{$font-height-xs}
+						$font-family-default;
+					border-radius: $border-radius-md;
+					margin: $spacing-md;
+					padding: $spacing-md $spacing-lg;
+					background: $color-grey-02;
+					font-size: $font-size-sm;
+				}
 			}
 
 			@include element(menu-nav-search) {

packages/assets/css/src/scss/_components/_input/_elements/_build-input.scss

@@ -14,6 +14,7 @@
 	@include sui-class($rtl: false, $theme: null) {
 		@include block($block) {
 			position: relative;
+			display: flex;
 			@include element(input) {
 				max-width: 100%;
 				display: block;

packages/assets/css/src/scss/_components/_popover/_elements/_build-popover.scss

@@ -14,6 +14,8 @@
 	@include sui-class($rtl: false, $theme: null) {
 		// Block wrapper.
 		@include block($block) {
+			display: flex;
+
 			@include element(popup) {
 				width: $popover-size-width-lg;
 				margin: 0;

packages/assets/css/src/scss/_components/_recipient/_elements/_recipient-info.scss

@@ -31,6 +31,11 @@
 				@include media(max-width, sm) {
 					align-items: flex-start;
 				}
+
+				@include modifier(placeholder) {
+					font-weight: $font-weight-md;
+					margin: 0;
+				}
 			}
 
 			@include element(details) {

packages/assets/css/src/scss/_components/_summary-box/_elements/_summary-box-container.scss

@@ -25,6 +25,10 @@
 				}
 			}
 
+			.suicons {
+				display: flex;
+			}
+
 			@include element(quick-actions) {
 				display: flex;
 				justify-content: space-between;

packages/assets/css/src/scss/_components/_tabs/_states/_state-disabled.scss

@@ -11,6 +11,12 @@
 	// THEME: None.
 	@include sui-class($rtl: false, $theme: null) {
 		@include block($block) {
+			@include element(panel-item) {
+				@include modifier(disabled) {
+					background: $color-grey-02;
+					pointer-events: none;
+				}
+			}
 			@include element(nav-item) {
 				@include modifier(disabled) {
 					pointer-events: none;

packages/assets/css/src/scss/_components/_toggle/_elements/_toggle-container.scss

@@ -20,6 +20,10 @@
 				align-items: flex-start;
 				flex-direction: column;
 				gap: $spacing-sm;
+
+				@include modifier(fluid) {
+					width: 100%;
+				}
 			}
 		}
 	}

packages/assets/css/src/scss/_components/_toggle/_elements/_toggle-content.scss

@@ -18,6 +18,16 @@
 				margin: 0 0 0 $toggle-spacing-lg;
 			}
 
+			@include element(content) {
+				width: 100%;
+				@include modifier(inner) {
+					margin: 0 0 0 $toggle-spacing-lg;
+					padding: $spacing-2xl;
+					border: $border-width-sm solid $color-grey-10;
+					border-radius: $border-radius-md;
+				}
+			}
+
 			@include element(label) {
 				font-weight: $font-weight-md;
 				font-size: $font-size-default;
@@ -33,6 +43,12 @@
 			@include element(label, description) {
 				margin: 0 $toggle-spacing-lg 0 0;
 			}
+
+			@include element(content) {
+				@include modifier(inner) {
+					margin: 0 $toggle-spacing-lg 0 0;
+				}
+			}
 		}
 	}
 

packages/assets/css/src/scss/_components/_tree-view/_elements/_build-info.scss

@@ -55,6 +55,11 @@
 				display: flex;
 				margin-left: $spacing-md;
 				width: $treeview-size-md;
+
+				.sui-checkbox__box {
+					position: relative;
+					display: flex;
+				}
 			}
 		}
 	}

packages/assets/css/src/scss/_utils/_tokens.scss

@@ -1,9 +1,13 @@
-
 // Do not edit directly
-// Generated on Mon, 03 Nov 2025 10:48:23 GMT
+// Generated on Tue, 04 Nov 2025 14:08:42 GMT
 
 $accordion-border-radius-sm: 10px;
-$advanced-banner-background: linear-gradient(90deg, #222 0%, #383323 48.96%, #514524 100%);
+$advanced-banner-background: linear-gradient(
+	90deg,
+	#222 0%,
+	#383323 48.96%,
+	#514524 100%
+);
 $advanced-banner-size-width: 260px;
 $avatar-container-size-sm: 24px;
 $avatar-container-size-md: 32px;
@@ -345,10 +349,10 @@ $border-width-md: 2px;
 $border-width-xl: 4px;
 $border-radius-xs: 3px;
 $border-radius-sm: 4px;
-$border-radius-md: 4px*2;
-$border-radius-lg: 4px*3;
-$border-radius-xl: 4px*4;
-$border-radius-2xl: 4px*5;
+$border-radius-md: 4px * 2;
+$border-radius-lg: 4px * 3;
+$border-radius-xl: 4px * 4;
+$border-radius-2xl: 4px * 5;
 $border-radius-default: 6px;
 $font-weight-sm: 400;
 $font-weight-md: 500;
@@ -374,7 +378,8 @@ $font-spacing-md: 0.2px;
 $font-spacing-lg: 0.5px;
 $font-spacing-2xl: 1px;
 $font-spacing-default: 0px;
-$font-family-default: "Roboto",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
+$font-family-default: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI",
+	Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
 $font-family-code: "Roboto Mono", monospace;
 $dashboard-size-width-lg: 440px;
 $datepicker-font-size: 14px-1px;
@@ -431,7 +436,7 @@ $input-font-height-sm: 16px;
 $input-font-height-md: 24px;
 $input-spacing-padding-vertical-sm: 8px;
 $input-spacing-padding-vertical-md: 8px;
-$input-spacing-padding-horizontal-sm: 4px*3;
+$input-spacing-padding-horizontal-sm: 4px * 3;
 $input-spacing-padding-horizontal-md: 16px;
 $input-spacing-lg: 44px;
 $input-border-width-sm: 1px;
@@ -450,9 +455,9 @@ $integration-disabled-opacity: 0.5;
 $layout-content-width: 1600px;
 $layout-spacing-main-sm: -20px;
 $layout-spacing-main-md: -10px;
-$layout-spacing-content-sm: 8px*2;
-$layout-spacing-content-md: 8px*3;
-$layout-spacing-content-lg: 8px*4;
+$layout-spacing-content-sm: 8px * 2;
+$layout-spacing-content-md: 8px * 3;
+$layout-spacing-content-lg: 8px * 4;
 $link-outline-color: #0059ff;
 $link-outline-style: solid;
 $link-outline-size: 1px;
@@ -556,7 +561,11 @@ $selector-size-width-md: 130px;
 $selector-size-width-lg: 208px;
 $sidebar-spacing-md: 12px;
 $sidebar-size-width-md: 260px;
-$skeleton-background: linear-gradient(93.77deg, $color-grey-10 -10.31%, #f5f5f5 -4.92%);
+$skeleton-background: linear-gradient(
+	93.77deg,
+	$color-grey-10 -10.31%,
+	#f5f5f5 -4.92%
+);
 $skeleton-height: 18px;
 $skeleton-animation: skeleton-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
 $spinner-size-height-lg: 36px;
@@ -574,7 +583,7 @@ $summary-content-padding-lg: 24px;
 $summary-content-padding-md: 16px;
 $summary-content-padding-sm: 12px;
 $summary-content-background: #ffffff;
-$summary-content-border-radius: 4px*2;
+$summary-content-border-radius: 4px * 2;
 $summary-row-gap-md: 16px;
 $summary-row-gap-sm: 8px;
 $table-width-xs: 100px;
@@ -602,7 +611,7 @@ $tabs-navitem-spacing-vertical: 26px;
 $tabs-navitem-spacing-horizontal: 16px;
 $tabs-navitem-gap: 4px;
 $tabs-navitem-border-width: 4px;
-$tabs-panel-spacing: 16px*2;
+$tabs-panel-spacing: 16px * 2;
 $tabs-color-active: #0059ff;
 $tabs-color-hover: #0059ff;
 $tabs-color-focus-border-color: #0059ff;
@@ -614,8 +623,18 @@ $tabs-arrow-size-height: 100%;
 $tabs-arrow-color: #b3b3b3;
 $tabs-arrow-hover-color: #1a1a1a;
 $tabs-arrow-hover-background: #ffffff;
-$tabs-arrow-left-background: linear-gradient(90deg, #FFF 0%, #FFF 71.63%, rgba(248, 248, 248, 0.00) 100%);
-$tabs-arrow-right-background: linear-gradient(270deg, #FFF 0%, #FFF 71.63%, rgba(248, 248, 248, 0.00) 100%);
+$tabs-arrow-left-background: linear-gradient(
+	90deg,
+	#fff 0%,
+	#fff 71.63%,
+	rgba(248, 248, 248, 0) 100%
+);
+$tabs-arrow-right-background: linear-gradient(
+	270deg,
+	#fff 0%,
+	#fff 71.63%,
+	rgba(248, 248, 248, 0) 100%
+);
 $tag-font-size-sm: 10px;
 $tag-font-size-md: 12px;
 $tag-font-spacing-sm: -0.1px;

packages/ui/accordion/src/accordion-context.ts

@@ -22,30 +22,37 @@ const useAccordion = ({
 	const { allowMultipleExpand, expandState, setExpandState } =
 		useContext(AccordionContext)
 
-	// Set initail expand state
+	// Set initial expand state only once when component mounts
 	useEffect(() => {
-		if (!isUndefined(isExpanded)) {
-			setExpandState({
+		if (!isUndefined(isExpanded) && isUndefined(expandState[uniqueId])) {
+			setExpandState((prevState: Record<string, boolean>) => ({
+				...prevState,
 				[uniqueId]: isExpanded,
-			})
+			}))
 		}
-	}, [isExpanded, uniqueId, setExpandState])
+	}, [uniqueId, setExpandState, isExpanded, expandState])
 
 	// toggle the expand state
 	const toggle = useCallback(() => {
-		if (!allowMultipleExpand) {
-			return setExpandState({
-				[uniqueId]: !expandState[uniqueId],
-			})
-		}
-		setExpandState({
-			...expandState,
-			[uniqueId]: !expandState[uniqueId],
+		setExpandState((prevState: Record<string, boolean>) => {
+			if (!allowMultipleExpand) {
+				// When not allowing multiple expand, close all others and toggle current
+				const newState: Record<string, boolean> = {}
+				Object.keys(prevState).forEach((key) => {
+					newState[key] = key === uniqueId ? !prevState[uniqueId] : false
+				})
+				return newState
+			}
+			// When allowing multiple expand, just toggle current item
+			return {
+				...prevState,
+				[uniqueId]: !prevState[uniqueId],
+			}
 		})
-	}, [allowMultipleExpand, setExpandState, expandState, uniqueId])
+	}, [allowMultipleExpand, uniqueId, setExpandState])
 
 	// Expand state of item with "uniqueId"
-	const isCurrentlyExpanded = expandState[uniqueId]
+	const isCurrentlyExpanded = expandState[uniqueId] ?? false
 
 	return {
 		toggle,