diff --git a/.changeset/brown-regions-accept.md b/.changeset/brown-regions-accept.md
new file mode 100644
index 000000000..86de5807b
--- /dev/null
+++ b/.changeset/brown-regions-accept.md
@@ -0,0 +1,75 @@
+---
+"@wpmudev/sui-navigation-wpmudev": patch
+"@wpmudev/sui-segmented-control": patch
+"@wpmudev/sui-dashboard-widget": patch
+"@wpmudev/sui-rich-text-editor": patch
+"@wpmudev/sui-collections": patch
+"@wpmudev/sui-advanced-banner": patch
+"@wpmudev/sui-editor-toolbar": patch
+"@wpmudev/sui-password-field": patch
+"@wpmudev/sui-setting-block": patch
+"@wpmudev/sui-template-card": patch
+"@wpmudev/sui-upsell-notice": patch
+"@wpmudev/sui-advanced": patch
+"@wpmudev/sui-alert-banner": patch
+"@wpmudev/sui-code-snippet": patch
+"@wpmudev/sui-color-picker": patch
+"@wpmudev/sui-config-table": patch
+"@wpmudev/sui-notification": patch
+"@wpmudev/sui-progress-bar": patch
+"@wpmudev/sui-setup-banner": patch
+"@wpmudev/sui-modules": patch
+"@wpmudev/sui-code-editor": patch
+"@wpmudev/sui-date-picker": patch
+"@wpmudev/sui-empty-state": patch
+"@wpmudev/sui-integration": patch
+"@wpmudev/sui-page-header": patch
+"@wpmudev/sui-summary-box": patch
+"@wpmudev/sui-field-list": patch
+"@wpmudev/sui-form-field": patch
+"@wpmudev/sui-navigation": patch
+"@wpmudev/sui-pagination": patch
+"@wpmudev/sui-icons": patch
+"@wpmudev/sui-forms": patch
+"@wpmudev/sui-accordion": patch
+"@wpmudev/sui-basic-box": patch
+"@wpmudev/sui-recipient": patch
+"@wpmudev/sui-tree-view": patch
+"@wpmudev/sui-core": patch
+"@wpmudev/sui-checkbox": patch
+"@wpmudev/sui-dropdown": patch
+"@wpmudev/sui-selector": patch
+"@wpmudev/sui-skeleton": patch
+"@wpmudev/sui-textarea": patch
+"@wpmudev/sui-uploader": patch
+"@wpmudev/sui-css": patch
+"@wpmudev/sui-builder": patch
+"@wpmudev/sui-popover": patch
+"@wpmudev/sui-sidebar": patch
+"@wpmudev/sui-spinner": patch
+"@wpmudev/sui-tooltip": patch
+"@wpmudev/sui-avatar": patch
+"@wpmudev/sui-button": patch
+"@wpmudev/sui-drawer": patch
+"@wpmudev/sui-footer": patch
+"@wpmudev/sui-search": patch
+"@wpmudev/sui-select": patch
+"@wpmudev/sui-toggle": patch
+"@wpmudev/sui-upsell": patch
+"@wpmudev/sui-input": patch
+"@wpmudev/sui-modal": patch
+"@wpmudev/sui-radio": patch
+"@wpmudev/sui-score": patch
+"@wpmudev/sui-table": patch
+"@wpmudev/sui-grid": patch
+"@wpmudev/sui-icon": patch
+"@wpmudev/sui-link": patch
+"@wpmudev/sui-list": patch
+"@wpmudev/sui-tabs": patch
+"@wpmudev/sui-box": patch
+"@wpmudev/sui-tag": patch
+"@wpmudev/sui-hooks": patch
+"@wpmudev/sui-docs": patch
+---
+
+Added changes required for beehive plugin
diff --git a/.changeset/wide-frogs-kiss.md b/.changeset/wide-frogs-kiss.md
new file mode 100644
index 000000000..841d94202
--- /dev/null
+++ b/.changeset/wide-frogs-kiss.md
@@ -0,0 +1,32 @@
+---
+"@wpmudev/sui-navigation-wpmudev": patch
+"@wpmudev/sui-dashboard-widget": patch
+"@wpmudev/sui-advanced-banner": patch
+"@wpmudev/sui-template-card": patch
+"@wpmudev/sui-color-picker": patch
+"@wpmudev/sui-setup-banner": patch
+"@wpmudev/sui-date-picker": patch
+"@wpmudev/sui-page-header": patch
+"@wpmudev/sui-summary-box": patch
+"@wpmudev/sui-form-field": patch
+"@wpmudev/sui-navigation": patch
+"@wpmudev/sui-accordion": patch
+"@wpmudev/sui-recipient": patch
+"@wpmudev/sui-dropdown": patch
+"@wpmudev/sui-selector": patch
+"@wpmudev/sui-skeleton": patch
+"@wpmudev/sui-css": patch
+"@wpmudev/sui-popover": patch
+"@wpmudev/sui-sidebar": patch
+"@wpmudev/sui-avatar": patch
+"@wpmudev/sui-select": patch
+"@wpmudev/sui-toggle": patch
+"@wpmudev/sui-input": patch
+"@wpmudev/sui-table": patch
+"@wpmudev/sui-link": patch
+"@wpmudev/sui-tabs": patch
+"@wpmudev/sui-tag": patch
+"@wpmudev/sui-hooks": patch
+---
+
+Update components for beehive v3.5.0
diff --git a/packages/assets/css/src/scss/_components/_accordion/_accordion-elements/_build-header.scss b/packages/assets/css/src/scss/_components/_accordion/_accordion-elements/_build-header.scss
index de67f65da..5f9d5f869 100644
--- a/packages/assets/css/src/scss/_components/_accordion/_accordion-elements/_build-header.scss
+++ b/packages/assets/css/src/scss/_components/_accordion/_accordion-elements/_build-header.scss
@@ -47,6 +47,11 @@
 				gap: $spacing-sm;
 			}
 
+			@include element(header-icon) {
+				display: flex;
+				align-self: center;
+			}
+
 			@include element(header-actions) {
 				align-items: center;
 				display: inline-flex;
diff --git a/packages/assets/css/src/scss/_components/_date-picker/_elements/_build-popover.scss b/packages/assets/css/src/scss/_components/_date-picker/_elements/_build-popover.scss
index ec6cac73e..856a0a5de 100644
--- a/packages/assets/css/src/scss/_components/_date-picker/_elements/_build-popover.scss
+++ b/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) {
diff --git a/packages/assets/css/src/scss/_components/_date-picker/_elements/_build-range.scss b/packages/assets/css/src/scss/_components/_date-picker/_elements/_build-range.scss
index 60236dd15..2bdc16821 100644
--- a/packages/assets/css/src/scss/_components/_date-picker/_elements/_build-range.scss
+++ b/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 */
diff --git a/packages/assets/css/src/scss/_components/_dropdown/_elements/_dropdown-menu.scss b/packages/assets/css/src/scss/_components/_dropdown/_elements/_dropdown-menu.scss
index 8c5d3c0eb..2f2f2b967 100644
--- a/packages/assets/css/src/scss/_components/_dropdown/_elements/_dropdown-menu.scss
+++ b/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) {
diff --git a/packages/assets/css/src/scss/_components/_input/_elements/_build-input.scss b/packages/assets/css/src/scss/_components/_input/_elements/_build-input.scss
index 861c4072a..b04c0e4ef 100644
--- a/packages/assets/css/src/scss/_components/_input/_elements/_build-input.scss
+++ b/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;
diff --git a/packages/assets/css/src/scss/_components/_navigation/_elements/_navigation-brand.scss b/packages/assets/css/src/scss/_components/_navigation/_elements/_navigation-brand.scss
index b033d4aa8..3191ff169 100644
--- a/packages/assets/css/src/scss/_components/_navigation/_elements/_navigation-brand.scss
+++ b/packages/assets/css/src/scss/_components/_navigation/_elements/_navigation-brand.scss
@@ -22,6 +22,23 @@
 				}
 			}
 
+			@include element(custom-icon) {
+				display: inline-flex;
+				align-items: center;
+				justify-content: center;
+				height: $navigation-size-height-lg;
+				width: $navigation-size-width-lg;
+
+				img {
+					width: 100%;
+				}
+
+				@include media(max-width, md) {
+					height: $navigation-size-height-md;
+					width: $navigation-size-width-md;
+				}
+			}
+
 			@include element(icon) {
 				display: inline-flex;
 				align-items: center;
@@ -42,6 +59,20 @@
 				@include media(max-width, sm) {
 					display: none;
 				}
+
+				@include modifier(show-title-in-mobile, show-description-in-mobile) {
+					@include media(max-width, sm) {
+						display: block;
+					}
+				}
+
+				@include media(max-width, sm) {
+					h3 {
+						font-size: $font-size-sm;
+						line-height: $font-height-sm;
+					}
+				}
+
 				@include modifier(desc) {
 					display: block;
 					color: $color-grey-60;
@@ -55,6 +86,14 @@
 						display: none;
 					}
 				}
+
+				@include modifier(show-description-in-mobile) {
+					@include media(max-width, md) {
+						.sui-navigation__info--desc {
+							display: block;
+						}
+					}
+				}
 			}
 		}
 	}
diff --git a/packages/assets/css/src/scss/_components/_popover/_elements/_build-popover.scss b/packages/assets/css/src/scss/_components/_popover/_elements/_build-popover.scss
index b78e7d3fa..39ffc6cd3 100644
--- a/packages/assets/css/src/scss/_components/_popover/_elements/_build-popover.scss
+++ b/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;
diff --git a/packages/assets/css/src/scss/_components/_recipient/_elements/_recipient-info.scss b/packages/assets/css/src/scss/_components/_recipient/_elements/_recipient-info.scss
index 32b4c39e8..434e1a636 100644
--- a/packages/assets/css/src/scss/_components/_recipient/_elements/_recipient-info.scss
+++ b/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) {
diff --git a/packages/assets/css/src/scss/_components/_setup-banner/_elements/_setup-banner-info.scss b/packages/assets/css/src/scss/_components/_setup-banner/_elements/_setup-banner-info.scss
index fb540dfbb..6af5b78a8 100644
--- a/packages/assets/css/src/scss/_components/_setup-banner/_elements/_setup-banner-info.scss
+++ b/packages/assets/css/src/scss/_components/_setup-banner/_elements/_setup-banner-info.scss
@@ -31,6 +31,17 @@
 				display: inline-flex;
 				padding: $banner-spacing-xs;
 			}
+
+			@include element(custom-icon) {
+				display: inline-flex;
+				width: 48px;
+				height: auto;
+
+				img {
+					width: 100%;
+					height: auto;
+				}
+			}
 		}
 	}
 }
diff --git a/packages/assets/css/src/scss/_components/_summary-box/_elements/_summary-box-container.scss b/packages/assets/css/src/scss/_components/_summary-box/_elements/_summary-box-container.scss
index 96bd95c20..ec5f00022 100644
--- a/packages/assets/css/src/scss/_components/_summary-box/_elements/_summary-box-container.scss
+++ b/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;
diff --git a/packages/assets/css/src/scss/_components/_tabs/_states/_state-disabled.scss b/packages/assets/css/src/scss/_components/_tabs/_states/_state-disabled.scss
index d26dabd75..1584d3efd 100644
--- a/packages/assets/css/src/scss/_components/_tabs/_states/_state-disabled.scss
+++ b/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;
diff --git a/packages/assets/css/src/scss/_components/_toggle/_elements/_toggle-container.scss b/packages/assets/css/src/scss/_components/_toggle/_elements/_toggle-container.scss
index f07d79836..bcff5f534 100644
--- a/packages/assets/css/src/scss/_components/_toggle/_elements/_toggle-container.scss
+++ b/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%;
+				}
 			}
 		}
 	}
diff --git a/packages/assets/css/src/scss/_components/_toggle/_elements/_toggle-content.scss b/packages/assets/css/src/scss/_components/_toggle/_elements/_toggle-content.scss
index 792819c43..8fdcaff3c 100644
--- a/packages/assets/css/src/scss/_components/_toggle/_elements/_toggle-content.scss
+++ b/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;
+				}
+			}
 		}
 	}
 
diff --git a/packages/assets/css/src/scss/_components/_tree-view/_elements/_build-info.scss b/packages/assets/css/src/scss/_components/_tree-view/_elements/_build-info.scss
index 9143a3e98..cc2f6e538 100644
--- a/packages/assets/css/src/scss/_components/_tree-view/_elements/_build-info.scss
+++ b/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;
+				}
 			}
 		}
 	}
diff --git a/packages/assets/css/src/scss/_utils/_tokens.scss b/packages/assets/css/src/scss/_utils/_tokens.scss
index 0509a6aeb..c2867f8ad 100644
--- a/packages/assets/css/src/scss/_utils/_tokens.scss
+++ b/packages/assets/css/src/scss/_utils/_tokens.scss
@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Thu, 05 Feb 2026 07:42:57 GMT
+// Generated on Mon, 02 Feb 2026 07:47:47 GMT
 
 $accordion-border-radius-sm: 10px;
 $advanced-banner-background: linear-gradient(90deg, #222 0%, #383323 48.96%, #514524 100%);
diff --git a/packages/hooks/package.json b/packages/hooks/package.json
index 227de9810..d8f368fca 100644
--- a/packages/hooks/package.json
+++ b/packages/hooks/package.json
@@ -36,8 +36,8 @@
   "homepage": "https://github.com/wpmudev/sui-docs#readme",
   "clean-package": "../../postpack.config.json",
   "dependencies": {
-    "@wpmudev/sui-utils": "^0.0.1",
-    "@emotion/css": "^11.11.2"
+    "@emotion/css": "^11.11.2",
+    "@wpmudev/sui-utils": "^0.0.1"
   },
   "devDependencies": {
     "@emotion/hash": "^0.9.1"
diff --git a/packages/ui/accordion/src/accordion-context.ts b/packages/ui/accordion/src/accordion-context.ts
index 62650f066..ef4dc3a90 100644
--- a/packages/ui/accordion/src/accordion-context.ts
+++ b/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,
diff --git a/packages/ui/accordion/src/accordion-item.tsx b/packages/ui/accordion/src/accordion-item.tsx
index f7b37d6ba..c896ac198 100644
--- a/packages/ui/accordion/src/accordion-item.tsx
+++ b/packages/ui/accordion/src/accordion-item.tsx
@@ -13,7 +13,9 @@ import {
 } from "@wpmudev/sui-utils"
 import { ChevronDown, ChevronUp } from "@wpmudev/sui-icons"
 import { Checkbox } from "@wpmudev/sui-checkbox"
+import { Toggle } from "@wpmudev/sui-toggle"
 import { AccordionItemProps } from "./accordion.types"
+import { Tooltip } from "@wpmudev/sui-tooltip"
 
 // The AccordionItem component is defined as a functional component using React.FC.
 const AccordionItem: React.FC<AccordionItemProps> = ({
@@ -24,14 +26,18 @@ const AccordionItem: React.FC<AccordionItemProps> = ({
 	isDisabled = false,
 	icon,
 	hasCheckbox,
-	isExpanded,
+	isChecked: initialIsChecked = false,
+	hasToggle = false,
+	toggleProps,
+	tooltipProps,
+	isExpanded = false,
 	onCheck,
 	_htmlProps = {},
 	contentShadow = true,
 	_style = {},
 }) => {
 	// Checkbox is checked.
-	const [isChecked, setIsChecked] = useState(false)
+	const [isChecked, setIsChecked] = useState(initialIsChecked)
 
 	// Default content when children is empty
 	children = useDefaultChildren(children)
@@ -121,21 +127,22 @@ const AccordionItem: React.FC<AccordionItemProps> = ({
 					focus: isFocused || isPressed,
 				})}
 				{...(Object.keys(styles).length > 0 && { style: styles })}
-				{...(!hasCheckbox && {
-					tabIndex: isDisabled ? -1 : 0,
-					role: "button",
-					"aria-expanded": isExpanded,
-					"aria-controls": accordionPanelId,
-					onClick: toggle,
-					"data-testid": "accordion-item-button",
-					onKeyDown: (e) => {
-						e.stopPropagation()
-						handleOnKeyDown(e, toggle)
-					},
-				})}
+				{...(!hasCheckbox &&
+					!hasToggle && {
+						tabIndex: isDisabled ? -1 : 0,
+						role: "button",
+						"aria-expanded": isExpanded,
+						"aria-controls": accordionPanelId,
+						onClick: toggle,
+						"data-testid": "accordion-item-button",
+						onKeyDown: (e) => {
+							e.stopPropagation()
+							handleOnKeyDown(e, toggle)
+						},
+					})}
 				{...(interactionMethods ?? {})}
 			>
-				{hasCheckbox && (
+				{(hasCheckbox || (hasToggle && isChecked)) && (
 					<div
 						id={`${accordionId}-accessible-cta`}
 						className="sui-accessible-cta"
@@ -158,11 +165,39 @@ const AccordionItem: React.FC<AccordionItemProps> = ({
 					className="sui-accordion__header-info"
 					id={`${accordionId}-header-info`}
 				>
-					{(!!hasCheckbox || !!icon) && (
+					{(!!hasCheckbox || !!hasToggle || !!icon) && (
 						<div
 							className="sui-accordion__header-actions"
 							id={`${accordionId}-header-actions`}
 						>
+							{hasToggle && (
+								<div
+									id={`${accordionId}_header_toggle`}
+									className="sui-accordion__header-toggle"
+								>
+									<Toggle
+										id={`${accordionId}_toggle`}
+										label={title}
+										defaultValue={isChecked}
+										isDisabled={isDisabled}
+										aria-label={title}
+										{...toggleProps}
+										onClick={(event) => {
+											if (
+												(!isCurrentlyExpanded && !isChecked) ||
+												(isCurrentlyExpanded && isChecked)
+											) {
+												toggle()
+											}
+											setIsChecked(!isChecked)
+
+											if (toggleProps?.onClick) {
+												toggleProps.onClick(event)
+											}
+										}}
+									/>
+								</div>
+							)}
 							{hasCheckbox && (
 								<Checkbox
 									name={accordionId}
@@ -175,20 +210,28 @@ const AccordionItem: React.FC<AccordionItemProps> = ({
 							{!!icon && icon}
 						</div>
 					)}
-					<div
-						className="sui-accordion__header-title"
-						id={`${accordionId}-header-title`}
-					>
-						<h2>{title}</h2>
-						{!isEmpty(description ?? "") && <p>{description}</p>}
-					</div>
+					{!hasToggle && (
+						<div
+							className="sui-accordion__header-title"
+							id={`${accordionId}-header-title`}
+						>
+							<h2 className={`${accordionId}-title`}>{title}</h2>
+							{!isEmpty(description ?? "") && (
+								<p className={`${accordionId}-description`}>{description}</p>
+							)}
+						</div>
+					)}
 				</div>
 				{/* Icon component to display a chevron icon */}
 				<div
 					className="sui-accordion__header-icon"
 					id={`${accordionId}-header-icon`}
 				>
-					<Icon iconHeight={16} iconWidth={16} />
+					{tooltipProps ? (
+						<Tooltip icon="Info" {...tooltipProps}></Tooltip>
+					) : (
+						<Icon iconHeight={16} iconWidth={16} />
+					)}
 				</div>
 			</div>
 			{/* Content of the accordion item's panel */}
diff --git a/packages/ui/accordion/src/accordion.types.ts b/packages/ui/accordion/src/accordion.types.ts
index 71e7d211a..ec31745d5 100644
--- a/packages/ui/accordion/src/accordion.types.ts
+++ b/packages/ui/accordion/src/accordion.types.ts
@@ -1,5 +1,7 @@
 import React, { HTMLProps } from "react"
 import { SuiHTMLAttributes, SuiStyleType } from "@wpmudev/sui-utils"
+import { TooltipProps } from "@wpmudev/sui-tooltip"
+import { ToggleProps } from "@wpmudev/sui-toggle"
 
 /**
  * This interface defines the props for the Score component.
@@ -45,6 +47,10 @@ interface AccordionItemBaseProps
 	isExpanded?: boolean // Indicates whether the accordion item is initially expanded.
 	isDisabled?: boolean // Indicates whether the accordion item is disabled and cannot be interacted with.
 	contentShadow?: boolean // Indicates whether the content have shadow or not
+	hasToggle?: boolean // Indicates whether the accordion item has a toggle button
+	tooltipProps?: TooltipProps // Props for the tooltip component
+	toggleProps?: ToggleProps // Props for the toggle component
+	isChecked?: boolean // Initial checked state for the checkbox if hasCheckbox is true
 }
 
 // Accordion Context Props
diff --git a/packages/ui/accordion/stories/Accordion.stories.tsx b/packages/ui/accordion/stories/Accordion.stories.tsx
index b0831716b..fefbdb2af 100644
--- a/packages/ui/accordion/stories/Accordion.stories.tsx
+++ b/packages/ui/accordion/stories/Accordion.stories.tsx
@@ -40,7 +40,11 @@ const Accordion = ({
 						noSideBorders={noSideBorders}
 						isFlushed={isFlushed}
 					>
-						<AccordionItem title="Tab Title 1" contentShadow={false}>
+						<AccordionItem
+							title="Tab Title 1"
+							hasToggle={true}
+							contentShadow={false}
+						>
 							<AccordionItemBody>
 								<p>
 									Lorem Ipsum is simply dummy text of the printing and
diff --git a/packages/ui/advanced-banner/CHANGELOG.md b/packages/ui/advanced-banner/CHANGELOG.md
index b586730af..3232b49f7 100644
--- a/packages/ui/advanced-banner/CHANGELOG.md
+++ b/packages/ui/advanced-banner/CHANGELOG.md
@@ -1,9 +1,35 @@
 # Change Log
 
+## 0.0.5
+
+### Patch Changes
+
+- [#355](https://github.com/wpmudev/sui-react/pull/355)
+  [`503754f`](https://github.com/wpmudev/sui-react/commit/503754fe4f0d7745369493f06311bbc55d9322f6)
+  Thanks [@creador-dev](https://github.com/creador-dev)! - Popover popup
+  automatic placement.
+
+- [#355](https://github.com/wpmudev/sui-react/pull/355)
+  [`c37ddcb`](https://github.com/wpmudev/sui-react/commit/c37ddcb96d23a3af499de507cec2100b75264c4e)
+  Thanks [@creador-dev](https://github.com/creador-dev)! - Setup banner and
+  navigation custom icon prop
+
+- Updated dependencies
+  [[`503754f`](https://github.com/wpmudev/sui-react/commit/503754fe4f0d7745369493f06311bbc55d9322f6),
+  [`c37ddcb`](https://github.com/wpmudev/sui-react/commit/c37ddcb96d23a3af499de507cec2100b75264c4e)]:
+  - @wpmudev/sui-button@0.1.3
+
 ## 0.0.4
 
 ### Patch Changes
 
+- [#355](https://github.com/wpmudev/sui-react/pull/355)
+  [`ef804ad`](https://github.com/wpmudev/sui-react/commit/ef804adbfb5d783e066897e4771bc201f704351b)
+  Thanks [@creador-dev](https://github.com/creador-dev)! - Remove sui react
+  package.
+
+- [#355](https://github.com/wpmudev/sui-react/pull/355)
+  [`ef804ad`](https://github.com/wpmudev/sui-react/commit/ef804adbfb5d783e066897e4771bc201f704351b)
 - [#334](https://github.com/wpmudev/sui-react/pull/334)
   [`de4695f`](https://github.com/wpmudev/sui-react/commit/de4695feb4886a3af66e5c4b51031915907e2490)
   Thanks [@abder](https://github.com/abder)! - Remove sui react package.
@@ -14,6 +40,8 @@
   kebab-case
 
 - Updated dependencies
+  [[`ef804ad`](https://github.com/wpmudev/sui-react/commit/ef804adbfb5d783e066897e4771bc201f704351b),
+  [`ef804ad`](https://github.com/wpmudev/sui-react/commit/ef804adbfb5d783e066897e4771bc201f704351b)]:
   [[`de4695f`](https://github.com/wpmudev/sui-react/commit/de4695feb4886a3af66e5c4b51031915907e2490),
   [`a9ead37`](https://github.com/wpmudev/sui-react/commit/a9ead374fd02ebd63882d55bc01ab2fc7375732f)]:
   - @wpmudev/sui-button@0.1.2
diff --git a/packages/ui/avatar/CHANGELOG.md b/packages/ui/avatar/CHANGELOG.md
index 863f4d1e0..6dc8d610d 100644
--- a/packages/ui/avatar/CHANGELOG.md
+++ b/packages/ui/avatar/CHANGELOG.md
@@ -1,5 +1,19 @@
 # Change Log
 
+## 0.0.5
+
+### Patch Changes
+
+- [#355](https://github.com/wpmudev/sui-react/pull/355)
+  [`503754f`](https://github.com/wpmudev/sui-react/commit/503754fe4f0d7745369493f06311bbc55d9322f6)
+  Thanks [@creador-dev](https://github.com/creador-dev)! - Popover popup
+  automatic placement.
+
+- [#355](https://github.com/wpmudev/sui-react/pull/355)
+  [`c37ddcb`](https://github.com/wpmudev/sui-react/commit/c37ddcb96d23a3af499de507cec2100b75264c4e)
+  Thanks [@creador-dev](https://github.com/creador-dev)! - Setup banner and
+  navigation custom icon prop
+
 ## 0.0.4
 
 ### Patch Changes
@@ -8,6 +22,13 @@
   [`0a9e7dd`](https://github.com/wpmudev/sui-react/commit/0a9e7dda13f63ed410df711027ef032d05a41654)
   Thanks [@creador-dev](https://github.com/creador-dev)! - Update colors
 
+- [#355](https://github.com/wpmudev/sui-react/pull/355)
+  [`ef804ad`](https://github.com/wpmudev/sui-react/commit/ef804adbfb5d783e066897e4771bc201f704351b)
+  Thanks [@creador-dev](https://github.com/creador-dev)! - Remove sui react
+  package.
+
+- [#355](https://github.com/wpmudev/sui-react/pull/355)
+  [`ef804ad`](https://github.com/wpmudev/sui-react/commit/ef804adbfb5d783e066897e4771bc201f704351b)
 - [#334](https://github.com/wpmudev/sui-react/pull/334)
   [`de4695f`](https://github.com/wpmudev/sui-react/commit/de4695feb4886a3af66e5c4b51031915907e2490)
   Thanks [@abder](https://github.com/abder)! - Remove sui react package.
diff --git a/packages/ui/color-picker/CHANGELOG.md b/packages/ui/color-picker/CHANGELOG.md
index eb8984111..2a55e1e6e 100644
--- a/packages/ui/color-picker/CHANGELOG.md
+++ b/packages/ui/color-picker/CHANGELOG.md
@@ -1,5 +1,26 @@
 # Change Log
 
+## 0.0.5
+
+### Patch Changes
+
+- [#355](https://github.com/wpmudev/sui-react/pull/355)
+  [`503754f`](https://github.com/wpmudev/sui-react/commit/503754fe4f0d7745369493f06311bbc55d9322f6)
+  Thanks [@creador-dev](https://github.com/creador-dev)! - Popover popup
+  automatic placement.
+
+- [#355](https://github.com/wpmudev/sui-react/pull/355)
+  [`c37ddcb`](https://github.com/wpmudev/sui-react/commit/c37ddcb96d23a3af499de507cec2100b75264c4e)
+  Thanks [@creador-dev](https://github.com/creador-dev)! - Setup banner and
+  navigation custom icon prop
+
+- Updated dependencies
+  [[`503754f`](https://github.com/wpmudev/sui-react/commit/503754fe4f0d7745369493f06311bbc55d9322f6),
+  [`c37ddcb`](https://github.com/wpmudev/sui-react/commit/c37ddcb96d23a3af499de507cec2100b75264c4e),
+  [`36ba29c`](https://github.com/wpmudev/sui-react/commit/36ba29c920888612cf431d0a419cbf8a42e9838e)]:
+  - @wpmudev/sui-button@0.1.3
+  - @wpmudev/sui-input@0.1.1
+
 ## 0.0.4
 
 ### Patch Changes
@@ -19,6 +40,11 @@
   component
 
 - Updated dependencies
+  [[`ef804ad`](https://github.com/wpmudev/sui-react/commit/ef804adbfb5d783e066897e4771bc201f704351b),
+  [`ef804ad`](https://github.com/wpmudev/sui-react/commit/ef804adbfb5d783e066897e4771bc201f704351b),
+  [`ef804ad`](https://github.com/wpmudev/sui-react/commit/ef804adbfb5d783e066897e4771bc201f704351b)]:
+  - @wpmudev/sui-input@0.1.0
+  - @wpmudev/sui-button@0.1.2
   [[`de4695f`](https://github.com/wpmudev/sui-react/commit/de4695feb4886a3af66e5c4b51031915907e2490),
   [`a9ead37`](https://github.com/wpmudev/sui-react/commit/a9ead374fd02ebd63882d55bc01ab2fc7375732f)]:
   - @wpmudev/sui-button@0.1.2
diff --git a/packages/ui/dashboard-widget/src/dashboard-widget.tsx b/packages/ui/dashboard-widget/src/dashboard-widget.tsx
index f0eff9358..4daf82ce5 100644
--- a/packages/ui/dashboard-widget/src/dashboard-widget.tsx
+++ b/packages/ui/dashboard-widget/src/dashboard-widget.tsx
@@ -16,8 +16,8 @@ import { useDefaultChildren, useStyles } from "@wpmudev/sui-hooks"
  */
 const DashboardWidget: React.FC<DashboardWidgetProps> = ({
 	id,
-	title = "Widget Title",
-	description = "Widget Description",
+	title = "",
+	description = "",
 	icon,
 	tag,
 	tagProps,
@@ -99,29 +99,31 @@ const DashboardWidget: React.FC<DashboardWidgetProps> = ({
 						{/* Display the icon if available */}
 						{IconTag && <IconTag id={`${dashboardWidgetId}-icon`} size="md" />}
 						{/* Display the title and optional tag */}
-						<h4
-							id={`${dashboardWidgetId}-title`}
-							className="sui-heading--h4 sui-dashboard-widget__header-title"
-						>
-							{title}
-							{tag && (
-								<Tag
-									id={`${dashboardWidgetId}-tag`}
-									colorScheme="black"
-									design="outlined"
-									{...(tagAttrs ?? {})}
-								>
-									{tag}
-								</Tag>
-							)}
-							{StatusIcon && (
-								<StatusIcon
-									id={`${dashboardWidgetId}-status-icon`}
-									size="sm"
-									{...(statusProps ?? {})}
-								/>
-							)}
-						</h4>
+						{(title || tag || StatusIcon) && (
+							<h4
+								id={`${dashboardWidgetId}-title`}
+								className="sui-heading--h4 sui-dashboard-widget__header-title"
+							>
+								{title}
+								{tag && (
+									<Tag
+										id={`${dashboardWidgetId}-tag`}
+										colorScheme="black"
+										design="outlined"
+										{...(tagAttrs ?? {})}
+									>
+										{tag}
+									</Tag>
+								)}
+								{StatusIcon && (
+									<StatusIcon
+										id={`${dashboardWidgetId}-status-icon`}
+										size="sm"
+										{...(statusProps ?? {})}
+									/>
+								)}
+							</h4>
+						)}
 					</div>
 					{/* Display collapse/expand button if allowed */}
 					{canCollapse && (
diff --git a/packages/ui/date-picker/src/date-picker-context.tsx b/packages/ui/date-picker/src/date-picker-context.tsx
index 14645c1f8..ffba58249 100644
--- a/packages/ui/date-picker/src/date-picker-context.tsx
+++ b/packages/ui/date-picker/src/date-picker-context.tsx
@@ -48,10 +48,14 @@ const DatePickerProvider: React.FC<DatePickerProps> = (props) => {
 	// Extract the props passed to the component.
 	const {
 		onChange,
+		onSubmit,
+		onClose,
 		minDate,
 		maxDate,
 		definedRanges = predefinedRanges,
 		isDisabled,
+		closeOnClickOutside = true,
+		dateFormat = "LLLL d, yyyy",
 		children,
 	} = props
 
@@ -299,6 +303,7 @@ const DatePickerProvider: React.FC<DatePickerProps> = (props) => {
 				isSingle,
 				isOpen,
 				setIsOpen,
+				closeOnClickOutside,
 				listType,
 				toggleId,
 				openToggle,
@@ -307,6 +312,7 @@ const DatePickerProvider: React.FC<DatePickerProps> = (props) => {
 				minDateValid,
 				maxDateValid,
 				definedRanges,
+				dateFormat,
 				startMonth,
 				endMonth,
 				setFirstMonthValidated,
@@ -314,6 +320,8 @@ const DatePickerProvider: React.FC<DatePickerProps> = (props) => {
 				setDateRangeValidated,
 				helpers,
 				handlers,
+				onSubmit,
+				onClose,
 			}}
 		>
 			{children}
diff --git a/packages/ui/date-picker/src/date-picker-input.tsx b/packages/ui/date-picker/src/date-picker-input.tsx
index 69ffc02ff..b8bcdf6cd 100644
--- a/packages/ui/date-picker/src/date-picker-input.tsx
+++ b/packages/ui/date-picker/src/date-picker-input.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useContext, useEffect, useId } from "react"
+import React, { useCallback, useContext, useEffect, useId, useRef } from "react"
 import { format } from "date-fns"
 
 import { generateCN, handleOnKeyDown } from "@wpmudev/sui-utils"
@@ -16,6 +16,9 @@ const DatePickerInput: React.FC<any> = ({
 	// DatePickerContext to handle the date picker state
 	const ctx = useContext(DatePickerContext)!
 
+	// Keep track of the last valid (complete) date range
+	const lastValidRangeRef = useRef<string>("")
+
 	// Generate classNames for the input field based on the provided props
 	const classNames = generateCN("sui-date-picker__input", {
 		single: ctx?.isSingle,
@@ -44,7 +47,7 @@ const DatePickerInput: React.FC<any> = ({
 	const { startDate, endDate } = ctx?.dateRange ?? {}
 
 	// Date format string for displaying the selected date(s)
-	const formatStr = "LLLL d, yyyy"
+	const formatStr = ctx?.dateFormat || "LLLL d, yyyy"
 
 	// value to be displayed in the input field based on the context state
 	let value = ``
@@ -52,7 +55,13 @@ const DatePickerInput: React.FC<any> = ({
 	if (ctx?.isSingle && !!startDate) {
 		value = `${format(startDate, formatStr)}`
 	} else if (!!startDate && !!endDate) {
+		// Both dates are selected - show the complete range
 		value = `${format(startDate, formatStr)} - ${format(endDate, formatStr)}`
+		// Update the last valid range
+		lastValidRangeRef.current = value
+	} else if (!ctx?.isSingle) {
+		// In range mode, if only start date is selected, keep showing the last valid range
+		value = lastValidRangeRef.current
 	}
 
 	return (
diff --git a/packages/ui/date-picker/src/date-picker-popover.tsx b/packages/ui/date-picker/src/date-picker-popover.tsx
index f44b755ba..6d6764b59 100644
--- a/packages/ui/date-picker/src/date-picker-popover.tsx
+++ b/packages/ui/date-picker/src/date-picker-popover.tsx
@@ -11,20 +11,21 @@ import { useOuterClick, useStyles } from "@wpmudev/sui-hooks"
 import { DatePickerPopoverProps } from "./date-picker.types"
 
 const DatePickerPopover: React.FunctionComponent<DatePickerPopoverProps> = ({
+	alignment = "left",
 	_style,
 }) => {
 	// Context of the DatePicker, which contains various state variables and functions
 	const ctx = useContext(DatePickerContext)
 	const { suiInlineClassname } = useStyles(_style)
 
-	const { startMonth, endMonth, helpers, handlers } = ctx!
+	const { startMonth, endMonth, helpers, handlers, dateRange } = ctx!
 
 	// Create a ref to access the dropdown's outer container element.
 	const popoverRef = useRef<HTMLDivElement | null>(null)
 
 	// Handle the closing of the dropdown when clicking outside the component.
 	useOuterClick(popoverRef, () => {
-		if (ctx?.isSingle) {
+		if (ctx?.closeOnClickOutside) {
 			ctx?.setIsOpen(false)
 		}
 	})
@@ -39,7 +40,7 @@ const DatePickerPopover: React.FunctionComponent<DatePickerPopoverProps> = ({
 		<div
 			className={generateCN(
 				"sui-date-picker__popover",
-				{ open: ctx?.isOpen },
+				{ open: ctx?.isOpen, [alignment]: true },
 				suiInlineClassname,
 			)}
 			data-testid="date-picker-popover"
@@ -80,7 +81,10 @@ const DatePickerPopover: React.FunctionComponent<DatePickerPopoverProps> = ({
 							type="tertiary"
 							colorScheme="black"
 							isSmall={true}
-							onClick={() => ctx?.setIsOpen(false)}
+							onClick={() => {
+								ctx?.onClose?.(dateRange)
+								ctx?.setIsOpen(false)
+							}}
 						>
 							Close
 						</Button>
@@ -90,7 +94,10 @@ const DatePickerPopover: React.FunctionComponent<DatePickerPopoverProps> = ({
 							type="secondary"
 							colorScheme="black"
 							isSmall={true}
-							onClick={() => ctx?.setIsOpen(false)}
+							onClick={() => {
+								ctx?.onSubmit?.(dateRange)
+								ctx?.setIsOpen(false)
+							}}
 						>
 							Ok
 						</Button>
diff --git a/packages/ui/date-picker/src/date-picker.tsx b/packages/ui/date-picker/src/date-picker.tsx
index a800f176b..70cb14fb8 100644
--- a/packages/ui/date-picker/src/date-picker.tsx
+++ b/packages/ui/date-picker/src/date-picker.tsx
@@ -26,9 +26,15 @@ const DatePicker: React.FC<DatePickerProps> = ({
 	endDate,
 	minDate,
 	maxDate,
+	alignment = "left",
 	isDisabled = false,
 	isError = false,
+	definedRanges,
+	closeOnClickOutside = true,
+	dateFormat,
 	onChange = () => null,
+	onSubmit,
+	onClose,
 	ariaAttrs = {},
 	_htmlProps,
 	_style,
@@ -58,7 +64,12 @@ const DatePicker: React.FC<DatePickerProps> = ({
 		minDate,
 		maxDate,
 		isDisabled,
+		closeOnClickOutside,
+		dateFormat,
 		onChange,
+		onSubmit,
+		onClose,
+		definedRanges,
 	}
 
 	return (
@@ -75,7 +86,7 @@ const DatePicker: React.FC<DatePickerProps> = ({
 					isError={isError}
 					ariaAttrs={ariaAttrs}
 				/>
-				<DatePickerPopover />
+				<DatePickerPopover alignment={alignment} />
 			</div>
 		</DatePickerProvider>
 	)
diff --git a/packages/ui/date-picker/src/date-picker.types.ts b/packages/ui/date-picker/src/date-picker.types.ts
index 808b27901..3e8e2057c 100644
--- a/packages/ui/date-picker/src/date-picker.types.ts
+++ b/packages/ui/date-picker/src/date-picker.types.ts
@@ -10,7 +10,7 @@ type DatePickerTypes = "single" | "range"
 type DatePickerNavs = "months" | "years"
 
 type DatePickerPredefined = {
-	label: "Today" | "Tomorrow" | "1 Week" | "30 days" | "Custom"
+	label: string
 } & DatePickerDateRange
 
 /**
@@ -68,12 +68,36 @@ interface DatePickerProps
 	 * aria attributes of field
 	 */
 	ariaAttrs?: object
+	/**
+	 * Close the date picker when clicking outside
+	 */
+	closeOnClickOutside?: boolean
 	/**
 	 * Callback function called when the selected date(s) change
 	 *
 	 * @param {string | Date | DatePickerDateRange} value
 	 */
 	onChange?: (value: string | Date | DatePickerDateRange) => void
+	/**
+	 * Callback function called when the user submits the selected date(s)
+	 */
+	onSubmit?: (range?: DatePickerDateRange) => void
+	/**
+	 * Callback function called when the date picker is closed
+	 */
+	onClose?: (range?: DatePickerDateRange) => void
+	/**
+	 * Alignment of the popover relative to the input field
+	 */
+	alignment?: "left" | "right"
+	/**
+	 * Date format string for displaying dates (using date-fns format tokens).
+	 *
+	 * @default "LLLL d, yyyy" (e.g., "January 1, 2026")
+	 * @example "MMM d, yyyy" for short month (e.g., "Jan 1, 2026")
+	 * @example "MM/dd/yyyy" for numeric format (e.g., "01/01/2026")
+	 */
+	dateFormat?: string
 }
 interface DatePickerContextProps {
 	/**
@@ -88,6 +112,10 @@ interface DatePickerContextProps {
 	 * Flag indicating whether the DatePicker is open (visible)
 	 */
 	isOpen?: boolean
+	/**
+	 * Close the date picker when clicking outside
+	 */
+	closeOnClickOutside?: boolean
 	/**
 	 * Function to set the open state of the DatePicker
 	 *
@@ -125,6 +153,10 @@ interface DatePickerContextProps {
 	 * Predefined date ranges to be shown in the DatePicker (in date range mode)
 	 */
 	definedRanges?: DatePickerProps["definedRanges"]
+	/**
+	 * Date format string for displaying dates
+	 */
+	dateFormat?: string
 	/**
 	 * Start month for the displayed calendar (in date range mode)
 	 */
@@ -202,9 +234,16 @@ interface DatePickerContextProps {
 		 */
 		onMonthNavigate: (marker: symbol) => void
 	}
+	onSubmit?: (range?: DatePickerDateRange) => void
+	onClose?: (range?: DatePickerDateRange) => void
 }
 
-interface DatePickerPopoverProps extends SuiStyleType {}
+interface DatePickerPopoverProps extends SuiStyleType {
+	/**
+	 * Alignment of the popover relative to the input field
+	 */
+	alignment?: "left" | "right"
+}
 
 export type {
 	DatePickerDateRange,
diff --git a/packages/ui/date-picker/stories/DatePicker.stories.tsx b/packages/ui/date-picker/stories/DatePicker.stories.tsx
index 9d788505f..de48816b1 100644
--- a/packages/ui/date-picker/stories/DatePicker.stories.tsx
+++ b/packages/ui/date-picker/stories/DatePicker.stories.tsx
@@ -29,6 +29,7 @@ const DatePicker = ({
 	color: string
 	error: string
 	isDisabled: boolean
+	dateFormat?: string
 }) => {
 	const boxStyles = {
 		padding: 20,
@@ -63,7 +64,10 @@ DatePicker.args = {
 	minDate: "01/05/2007",
 	maxDate: "30/10/2023",
 	isDisabled: false,
+	closeOnClickOutside: true,
 	error: "",
+	alignment: "left",
+	dateFormat: "MMM d, yyyy",
 }
 
 // Set controls for story arguments.
@@ -117,12 +121,40 @@ DatePicker.argTypes = {
 			type: "boolean",
 		},
 	},
+	closeOnClickOutside: {
+		name: "Close on Click Outside",
+		description: "Close the date picker when clicking outside of it",
+		control: {
+			type: "boolean",
+		},
+	},
 	error: {
 		name: "Error",
 		control: {
 			type: "text",
 		},
 	},
+	alignment: {
+		name: "Alignment",
+		options: ["left", "right"],
+		description:
+			"Specifies the alignment of the popover relative to the input field",
+		control: {
+			type: "select",
+			labels: {
+				left: "Left",
+				right: "Right",
+			},
+		},
+	},
+	dateFormat: {
+		name: "Date Format",
+		description:
+			"Date format string using date-fns format tokens. Examples: 'LLLL d, yyyy' (January 1, 2026), 'MMM d, yyyy' (Jan 1, 2026), 'MM/dd/yyyy' (01/01/2026)",
+		control: {
+			type: "text",
+		},
+	},
 }
 
 // Publish required stories.
diff --git a/packages/ui/date-picker/stories/tabs/TabExamples.mdx b/packages/ui/date-picker/stories/tabs/TabExamples.mdx
index 3ca9f9c83..1f549c02d 100644
--- a/packages/ui/date-picker/stories/tabs/TabExamples.mdx
+++ b/packages/ui/date-picker/stories/tabs/TabExamples.mdx
@@ -14,6 +14,14 @@ export const disabledCode = dedent`
     <DatePicker isDisabled={true} type="single" startDate="15/07/2023" />
 `
 
+export const shortMonthCode = dedent`
+    <DatePicker type="single" startDate="15/07/2023" dateFormat="MMM d, yyyy" />
+`
+
+export const numericFormatCode = dedent`
+    <DatePicker type="range" startDate="15/08/2023" endDate="21/08/2023" dateFormat="MM/dd/yyyy" />
+`
+
 <Section contained={true} style={{ paddingTop: 0 }}>
 	<p>Basic Date Picker example used for most cases </p>
 	<div className="sui-wrap sui-theme--light" style={{marginBottom: "20px", position: "relative", zIndex: 3, width: "400px"}}>
@@ -38,3 +46,21 @@ export const disabledCode = dedent`
     <Snippet language="js">{disabledCode}</Snippet>
 
 </Section>
+
+<Section title="Short Month Format" contained={true} style={{ paddingTop: 0 }}>
+	<p>Date Picker with shorthand month format (e.g., "Jan 1, 2026" instead of "January 1, 2026")</p>
+	<div className="sui-wrap sui-theme--light" style={{marginBottom: "20px", position: "relative", zIndex: 1, width: "400px"}}>
+    	<DatePicker type="single" startDate="15/07/2023" dateFormat="MMM d, yyyy" />
+	</div>
+    <Snippet language="js">{shortMonthCode}</Snippet>
+
+</Section>
+
+<Section title="Numeric Date Format" contained={true} style={{ paddingTop: 0 }}>
+	<p>Date Picker with numeric date format (e.g., "08/15/2023")</p>
+	<div className="sui-wrap sui-theme--light" style={{marginBottom: "20px", position: "relative", zIndex: 1, width: "400px"}}>
+    	<DatePicker type="range" startDate="15/08/2023" endDate="21/08/2023" dateFormat="MM/dd/yyyy" />
+	</div>
+    <Snippet language="js">{numericFormatCode}</Snippet>
+
+</Section>
diff --git a/packages/ui/dropdown/src/dropdown.tsx b/packages/ui/dropdown/src/dropdown.tsx
index 77d173cab..8b5958242 100644
--- a/packages/ui/dropdown/src/dropdown.tsx
+++ b/packages/ui/dropdown/src/dropdown.tsx
@@ -56,6 +56,7 @@ const Dropdown = forwardRef<DropdownRefProps | null, DropdownProps>(
 			buttonIcon,
 			onMenuClick,
 			trigger,
+			emptyMessage,
 			renderContentOnTop = false,
 			isResponsive = false,
 			isMultiSelect = false,
@@ -502,6 +503,10 @@ const Dropdown = forwardRef<DropdownRefProps | null, DropdownProps>(
 							</ul>
 						</DropdownMenu>
 					)}
+					{/* Render "no results" message */}
+					{options?.length === 0 && !isLoading && emptyMessage && (
+						<div className="sui-dropdown__menu--no-results">{emptyMessage}</div>
+					)}
 					{/* Render additional children passed to the Dropdown component */}
 					{!!children && !renderContentOnTop && (
 						<div
diff --git a/packages/ui/dropdown/src/dropdown.types.ts b/packages/ui/dropdown/src/dropdown.types.ts
index 0f945c08a..12d10756c 100644
--- a/packages/ui/dropdown/src/dropdown.types.ts
+++ b/packages/ui/dropdown/src/dropdown.types.ts
@@ -263,6 +263,10 @@ interface DropdownProps
 	 * Whether dropdown is disabled.
 	 */
 	isDisabled?: boolean
+	/**
+	 * Empty message to display when there are no options.
+	 */
+	emptyMessage?: string
 	/**
 	 * Close dropdown on outer click
 	 */
diff --git a/packages/ui/form-field/src/form-field.types.ts b/packages/ui/form-field/src/form-field.types.ts
index 9eb0159a7..c43d77a40 100644
--- a/packages/ui/form-field/src/form-field.types.ts
+++ b/packages/ui/form-field/src/form-field.types.ts
@@ -23,7 +23,7 @@ interface FormFieldProps
 	/**
 	 * The label for the field.
 	 */
-	label?: string
+	label?: string | React.ReactNode
 	/**
 	 * The helper text for the field.
 	 */
diff --git a/packages/ui/input/src/input.tsx b/packages/ui/input/src/input.tsx
index 1c8353f86..9e820c810 100644
--- a/packages/ui/input/src/input.tsx
+++ b/packages/ui/input/src/input.tsx
@@ -61,6 +61,7 @@ const Input = forwardRef<HTMLInputElement | HTMLTextAreaElement, InputProps>(
 			iconSize,
 			iconTooltipWidth,
 			allowClear = false,
+			customAction,
 			disableInteractions = false,
 			isRequired = false, //
 			pattern,
@@ -341,6 +342,31 @@ const Input = forwardRef<HTMLInputElement | HTMLTextAreaElement, InputProps>(
 						Clear
 					</Button>
 				)}
+				{customAction && (
+					// <Tooltip
+					// 	type="button"
+					// 	className="sui-input__input-copy"
+					// 	placement="top"
+					// 	buttonProps={{
+					// 		icon: "Copy",
+					// 		colorScheme: "black",
+					// 		type: "tertiary",
+					// 		iconOnly: true,
+					// 		iconSize: isSmall ? "sm" : "md",
+					// 		onClick: () => {
+					// 			navigator.clipboard.writeText((value as string) || "")
+					// 			if (copyProps.onClick) {
+					// 				copyProps.onClick()
+					// 			}
+					// 		},
+					// 		isSmall: isSmall ?? false,
+					// 	}}
+					// 	{...copyProps}
+					// >
+					// 	{copyProps.tooltipText || "Copy to clipboard"}
+					// </Tooltip>
+					<div className="sui-input__input-custom-action">{customAction}</div>
+				)}
 			</div>
 		)
 	},
diff --git a/packages/ui/input/src/input.types.ts b/packages/ui/input/src/input.types.ts
index fc2c2d041..542ccb26e 100644
--- a/packages/ui/input/src/input.types.ts
+++ b/packages/ui/input/src/input.types.ts
@@ -151,6 +151,10 @@ interface InputProps
 	 * Specifies whether the value can be cleared or not
 	 */
 	allowClear?: boolean
+	/**
+	 * Custom action component to be displayed.
+	 */
+	customAction?: React.ReactNode
 	/**
 	 * Disable interactions such as hover and focus
 	 */
diff --git a/packages/ui/input/stories/ReactInput.stories.tsx b/packages/ui/input/stories/ReactInput.stories.tsx
index 0dd5f904c..97d810b65 100644
--- a/packages/ui/input/stories/ReactInput.stories.tsx
+++ b/packages/ui/input/stories/ReactInput.stories.tsx
@@ -8,6 +8,7 @@ import { Input as SuiInput, InputProps } from "../src"
 import docs from "./ReactInput.mdx"
 import { IconsName } from "@wpmudev/sui-icons"
 import { background } from "@storybook/theming"
+import { useValidation } from "@wpmudev/sui-hooks"
 
 // Configure default options.
 export default {
@@ -38,6 +39,8 @@ const Input = ({
 		background: "#fff",
 	}
 
+	const [status, validationProps] = useValidation([{ required: true }])
+
 	return (
 		<div className="sui-layout sui-layout--horizontal sui-layout--vertical">
 			<div className="sui-layout__content">
@@ -48,6 +51,7 @@ const Input = ({
 						helper="Helper Text"
 						isSmall={isSmall}
 						isDisabled={isDisabled}
+						error={status.error}
 					>
 						<SuiInput
 							{...args}
@@ -55,6 +59,8 @@ const Input = ({
 							iconPosition="end"
 							iconHint="Copied"
 							iconTooltipWidth={65}
+							isError={status.isError}
+							{...validationProps}
 						/>
 					</FormField>
 				</div>
diff --git a/packages/ui/link/src/link.tsx b/packages/ui/link/src/link.tsx
index e240d036e..64579b56c 100644
--- a/packages/ui/link/src/link.tsx
+++ b/packages/ui/link/src/link.tsx
@@ -28,6 +28,8 @@ const Link: React.FC<LinkProps> = ({
 	hasExternalIcon = false,
 	children,
 	href = "#",
+	reload = false,
+	onClick = () => {},
 	_htmlProps = {},
 	_style = {},
 	...props
@@ -69,11 +71,21 @@ const Link: React.FC<LinkProps> = ({
 		..._renderHTMLPropsSafely(_htmlProps),
 	}
 
-	const onClickCallback = (e: MouseEvent<unknown> | KeyboardEvent<unknown>) => {
+	const onClickCallback = (e: React.MouseEvent | React.KeyboardEvent) => {
 		// Prevent the default link behavior
 		handleEventDefault(e, false, true)
+
+		// If the link is disabled, do nothing
+		if (onClick && !isDisabled) {
+			onClick(e)
+		}
+
 		// Open the link in a new tab or the same tab based on 'isExternal'
 		window.open(href, isExternal ? "_blank" : "_top")
+		// Reload the page if 'reload' is true
+		if (reload) {
+			window.location.reload()
+		}
 	}
 
 	// Handle link behavior based on the selected HTML tag
diff --git a/packages/ui/link/src/link.types.ts b/packages/ui/link/src/link.types.ts
index 2d753d08a..5ced6622e 100644
--- a/packages/ui/link/src/link.types.ts
+++ b/packages/ui/link/src/link.types.ts
@@ -54,6 +54,15 @@ interface LinkProps
 	 * The text of the link
 	 */
 	children?: React.ReactNode
+	/**
+	 * Whether to reload the page when the link is clicked.
+	 * If true, clicking the link will cause a full page reload.
+	 */
+	reload?: boolean
+	/**
+	 * Click event handler for the link.
+	 */
+	onClick?: (e: React.MouseEvent | React.KeyboardEvent) => void
 }
 
 export type { LinkProps }
diff --git a/packages/ui/navigation-wpmudev/src/elements/wpmudev-notifications.tsx b/packages/ui/navigation-wpmudev/src/elements/wpmudev-notifications.tsx
index 2e044e4e5..e6667b045 100644
--- a/packages/ui/navigation-wpmudev/src/elements/wpmudev-notifications.tsx
+++ b/packages/ui/navigation-wpmudev/src/elements/wpmudev-notifications.tsx
@@ -16,6 +16,7 @@ const NotificationWPMUDEV: React.FC<WPMUDEVNotificationProps> = ({
 		</Link>,
 	],
 	className = "",
+	tooltipProps = {},
 	_htmlProps = {},
 	_style = {},
 	...props
@@ -41,6 +42,7 @@ const NotificationWPMUDEV: React.FC<WPMUDEVNotificationProps> = ({
 				buttonIcon="Logo"
 				trigger={
 					<Tooltip
+						placement="top-right"
 						buttonProps={{
 							type: "tertiary",
 							colorScheme: "black",
@@ -50,6 +52,7 @@ const NotificationWPMUDEV: React.FC<WPMUDEVNotificationProps> = ({
 						onClick={() => {
 							notificationRef?.current?.toggle()
 						}}
+						{...tooltipProps}
 					>
 						{title}
 					</Tooltip>
diff --git a/packages/ui/navigation-wpmudev/src/index.ts b/packages/ui/navigation-wpmudev/src/index.ts
index 01290a2ff..e50eb6df8 100644
--- a/packages/ui/navigation-wpmudev/src/index.ts
+++ b/packages/ui/navigation-wpmudev/src/index.ts
@@ -12,6 +12,9 @@ import {
 import { NavActionsWPMUDEV } from "./elements/wpmudev-nav-actions"
 import { NavigationWrapper } from "./navigation-wpmudev"
 import { UserWPMUDEV } from "./elements/wpmudev-user"
+import { Plugin } from "./navigation-wpmudev.types"
+
+export type { Plugin }
 
 export {
 	MoreFromWPMUDEV,
diff --git a/packages/ui/navigation-wpmudev/src/navigation-wpmudev.types.ts b/packages/ui/navigation-wpmudev/src/navigation-wpmudev.types.ts
index fea44f4c7..ccd8c49c8 100644
--- a/packages/ui/navigation-wpmudev/src/navigation-wpmudev.types.ts
+++ b/packages/ui/navigation-wpmudev/src/navigation-wpmudev.types.ts
@@ -15,11 +15,12 @@ import { AvatarProps } from "@wpmudev/sui-avatar"
 import { ButtonProps } from "@wpmudev/sui-button"
 import { NavigationUserProps } from "@wpmudev/sui-navigation"
 import { LinkProps } from "@wpmudev/sui-link"
+import { TooltipProps } from "@wpmudev/sui-tooltip"
 
 /**
  * Represents a plugin's details.
  */
-type Plugin = {
+export type Plugin = {
 	plugin: PluginsSlug
 	title: string
 	description: string
@@ -102,6 +103,7 @@ interface WPMUDEVNotificationProps extends DropdownProps, SuiStyleType {
 	label?: string
 	notifications: Notifications
 	footerActions?: Array<ReactNode>
+	tooltipProps?: TooltipProps
 }
 
 /**
diff --git a/packages/ui/navigation/src/navigation-brand.tsx b/packages/ui/navigation/src/navigation-brand.tsx
index 64af0107b..feb86f24c 100644
--- a/packages/ui/navigation/src/navigation-brand.tsx
+++ b/packages/ui/navigation/src/navigation-brand.tsx
@@ -14,8 +14,11 @@ import { useStyles } from "@wpmudev/sui-hooks"
 const NavigationBrand: React.FC<NavigationBrandProps> = ({
 	id,
 	plugin,
+	customIcon,
 	title = "",
 	description = "",
+	showTitleInMobile,
+	showDescriptionInMobile,
 	className,
 	_style,
 	_htmlProps = {},
@@ -41,14 +44,30 @@ const NavigationBrand: React.FC<NavigationBrandProps> = ({
 			className={generateCN("sui-navigation__brand", {}, suiInlineClassname)}
 			{..._renderHTMLPropsSafely(_htmlProps)}
 		>
+			{customIcon && (
+				<div
+					id={`${brandId}-custom-icon`}
+					className="sui-navigation__custom-icon"
+				>
+					<img alt={title} src={customIcon} />
+				</div>
+			)}
+			{!customIcon && (
+				<div
+					id={`${brandId}-icon`}
+					className="sui-navigation__icon"
+					style={{ backgroundColor: PluginIcon?.bg }}
+				>
+					{!!IconTag && <IconTag fill={PluginIcon?.color} />}
+				</div>
+			)}
 			<div
-				id={`${brandId}-icon`}
-				className="sui-navigation__icon"
-				style={{ backgroundColor: PluginIcon?.bg }}
+				id={`${brandId}-info`}
+				className={generateCN("sui-navigation__info", {
+					"show-title-in-mobile": showTitleInMobile,
+					"show-description-in-mobile": showDescriptionInMobile,
+				})}
 			>
-				{!!IconTag && <IconTag fill={PluginIcon?.color} />}
-			</div>
-			<div id={`${brandId}-info`} className="sui-navigation__info">
 				<h3 id={`${brandId}-title`} className="sui-heading--h4">
 					{title}
 				</h3>
diff --git a/packages/ui/navigation/src/navigation.tsx b/packages/ui/navigation/src/navigation.tsx
index ac4674064..b09795fa7 100644
--- a/packages/ui/navigation/src/navigation.tsx
+++ b/packages/ui/navigation/src/navigation.tsx
@@ -11,6 +11,8 @@ const Navigation: React.FC<NavigationProps> = ({
 	id,
 	children,
 	brand = { title: "title", description: "" },
+	showTitleInMobile = false,
+	showDescriptionInMobile = false,
 	user,
 	actions = [],
 	_htmlProps,
@@ -32,7 +34,12 @@ const Navigation: React.FC<NavigationProps> = ({
 			{..._renderHTMLPropsSafely(_htmlProps)}
 		>
 			{/* Render the navigation brand component */}
-			<NavigationBrand {...brand} id={brand?.id || `${navigationId}-brand`} />
+			<NavigationBrand
+				{...brand}
+				id={brand?.id || `${navigationId}-brand`}
+				showTitleInMobile={showTitleInMobile}
+				showDescriptionInMobile={showDescriptionInMobile}
+			/>
 			<ul id={`${navigationId}-nav`} className="sui-navigation__nav">
 				{/* Map over children components and render each one as a list item */}
 				{Children.map(children, (child, index) => (
diff --git a/packages/ui/navigation/src/navigation.types.ts b/packages/ui/navigation/src/navigation.types.ts
index 33cae0e37..291b63b18 100644
--- a/packages/ui/navigation/src/navigation.types.ts
+++ b/packages/ui/navigation/src/navigation.types.ts
@@ -56,6 +56,10 @@ interface NavigationBrandProps extends SuiStyleType, SuiHTMLAttributes {
 	 * Optional: Plugin information for the brand.
 	 */
 	plugin?: PluginsSlug
+	/*
+	 * Optional: Custom icon URL for the brand.
+	 */
+	customIcon?: string
 	/*
 	 * Optional: Title for the brand.
 	 */
@@ -64,6 +68,14 @@ interface NavigationBrandProps extends SuiStyleType, SuiHTMLAttributes {
 	 * Optional: Description for the brand.
 	 */
 	description?: string
+	/*
+	 * Show title in mobile view
+	 */
+	showTitleInMobile?: boolean
+	/*
+	 * Show description in mobile view
+	 */
+	showDescriptionInMobile?: boolean
 	/*
 	 * Optional: Additional CSS class name.
 	 */
@@ -145,6 +157,14 @@ interface NavigationProps
 	 * Navigation actions list
 	 */
 	actions?: ReactNode[]
+	/**
+	 * Show title in mobile view
+	 */
+	showTitleInMobile?: boolean
+	/**
+	 * Show description in mobile view
+	 */
+	showDescriptionInMobile?: boolean
 }
 
 export type {
diff --git a/packages/ui/page-header/CHANGELOG.md b/packages/ui/page-header/CHANGELOG.md
index 0f63d60ee..3913b9052 100644
--- a/packages/ui/page-header/CHANGELOG.md
+++ b/packages/ui/page-header/CHANGELOG.md
@@ -1,5 +1,48 @@
 # @wpmudev/sui-page-header
 
+## 0.2.1
+
+### Patch Changes
+
+- [#355](https://github.com/wpmudev/sui-react/pull/355)
+  [`503754f`](https://github.com/wpmudev/sui-react/commit/503754fe4f0d7745369493f06311bbc55d9322f6)
+  Thanks [@creador-dev](https://github.com/creador-dev)! - Popover popup
+  automatic placement.
+
+- [#355](https://github.com/wpmudev/sui-react/pull/355)
+  [`c37ddcb`](https://github.com/wpmudev/sui-react/commit/c37ddcb96d23a3af499de507cec2100b75264c4e)
+  Thanks [@creador-dev](https://github.com/creador-dev)! - Setup banner and
+  navigation custom icon prop
+
+- [#355](https://github.com/wpmudev/sui-react/pull/355)
+  [`36ba29c`](https://github.com/wpmudev/sui-react/commit/36ba29c920888612cf431d0a419cbf8a42e9838e)
+  Thanks [@creador-dev](https://github.com/creador-dev)! - Popover visibility
+  issue
+
+- Updated dependencies
+  [[`503754f`](https://github.com/wpmudev/sui-react/commit/503754fe4f0d7745369493f06311bbc55d9322f6),
+  [`c37ddcb`](https://github.com/wpmudev/sui-react/commit/c37ddcb96d23a3af499de507cec2100b75264c4e)]:
+  - @wpmudev/sui-icons@0.0.3
+  - @wpmudev/sui-hooks@0.1.2
+
+## 0.2.0
+
+### Minor Changes
+
+- [#355](https://github.com/wpmudev/sui-react/pull/355)
+  [`ef804ad`](https://github.com/wpmudev/sui-react/commit/ef804adbfb5d783e066897e4771bc201f704351b)
+  Thanks [@creador-dev](https://github.com/creador-dev)! - added required
+  changes for beehive plugin
+
+### Patch Changes
+
+- [#355](https://github.com/wpmudev/sui-react/pull/355)
+  [`ef804ad`](https://github.com/wpmudev/sui-react/commit/ef804adbfb5d783e066897e4771bc201f704351b)
+  Thanks [@creador-dev](https://github.com/creador-dev)! - Remove sui react
+  package.
+
+- [#355](https://github.com/wpmudev/sui-react/pull/355)
+  [`ef804ad`](https://github.com/wpmudev/sui-react/commit/ef804adbfb5d783e066897e4771bc201f704351b)
 ## 0.1.2
 
 ### Patch Changes
diff --git a/packages/ui/page-header/src/page-header.types.ts b/packages/ui/page-header/src/page-header.types.ts
index cb678be8b..a4f60a2f5 100644
--- a/packages/ui/page-header/src/page-header.types.ts
+++ b/packages/ui/page-header/src/page-header.types.ts
@@ -1,5 +1,6 @@
 import React, { HTMLProps } from "react"
 import { SuiHTMLAttributes, SuiStyleType } from "@wpmudev/sui-utils"
+import { TooltipProps } from "@wpmudev/sui-tooltip"
 
 /**
  * PageHeaderProps is an interface that extends the HTMLDivElement interface
@@ -25,6 +26,10 @@ interface PageHeaderProps
 	 * Additional className
 	 */
 	className?: string
+	/**
+	 * Props for the Tooltip component to display a tooltip icon next to the title
+	 */
+	tooltipProps?: TooltipProps
 }
 
 export type { PageHeaderProps }
diff --git a/packages/ui/popover/CHANGELOG.md b/packages/ui/popover/CHANGELOG.md
index 8cfefb6c0..1b02d8314 100644
--- a/packages/ui/popover/CHANGELOG.md
+++ b/packages/ui/popover/CHANGELOG.md
@@ -1,5 +1,50 @@
 # Change Log
 
+## 0.1.1
+
+### Patch Changes
+
+- [#355](https://github.com/wpmudev/sui-react/pull/355)
+  [`503754f`](https://github.com/wpmudev/sui-react/commit/503754fe4f0d7745369493f06311bbc55d9322f6)
+  Thanks [@creador-dev](https://github.com/creador-dev)! - Popover popup
+  automatic placement.
+
+- [#355](https://github.com/wpmudev/sui-react/pull/355)
+  [`c37ddcb`](https://github.com/wpmudev/sui-react/commit/c37ddcb96d23a3af499de507cec2100b75264c4e)
+  Thanks [@creador-dev](https://github.com/creador-dev)! - Setup banner and
+  navigation custom icon prop
+
+- [#355](https://github.com/wpmudev/sui-react/pull/355)
+  [`36ba29c`](https://github.com/wpmudev/sui-react/commit/36ba29c920888612cf431d0a419cbf8a42e9838e)
+  Thanks [@creador-dev](https://github.com/creador-dev)! - Popover visibility
+  issue
+
+- Updated dependencies
+  [[`503754f`](https://github.com/wpmudev/sui-react/commit/503754fe4f0d7745369493f06311bbc55d9322f6),
+  [`c37ddcb`](https://github.com/wpmudev/sui-react/commit/c37ddcb96d23a3af499de507cec2100b75264c4e)]:
+  - @wpmudev/sui-icons@0.0.3
+  - @wpmudev/sui-button@0.1.3
+  - @wpmudev/sui-icon@0.1.3
+  - @wpmudev/sui-hooks@0.1.2
+
+## 0.1.0
+
+### Minor Changes
+
+- [#355](https://github.com/wpmudev/sui-react/pull/355)
+  [`ef804ad`](https://github.com/wpmudev/sui-react/commit/ef804adbfb5d783e066897e4771bc201f704351b)
+  Thanks [@creador-dev](https://github.com/creador-dev)! - added required
+  changes for beehive plugin
+
+### Patch Changes
+
+- [#355](https://github.com/wpmudev/sui-react/pull/355)
+  [`ef804ad`](https://github.com/wpmudev/sui-react/commit/ef804adbfb5d783e066897e4771bc201f704351b)
+  Thanks [@creador-dev](https://github.com/creador-dev)! - Remove sui react
+  package.
+
+- [#355](https://github.com/wpmudev/sui-react/pull/355)
+  [`ef804ad`](https://github.com/wpmudev/sui-react/commit/ef804adbfb5d783e066897e4771bc201f704351b)
 ## 0.0.4
 
 ### Patch Changes
@@ -14,6 +59,9 @@
   kebab-case
 
 - Updated dependencies
+  [[`ef804ad`](https://github.com/wpmudev/sui-react/commit/ef804adbfb5d783e066897e4771bc201f704351b),
+  [`4a48b89`](https://github.com/wpmudev/sui-react/commit/4a48b899de749dd8e73169dd0096f293e557b0a1),
+  [`ef804ad`](https://github.com/wpmudev/sui-react/commit/ef804adbfb5d783e066897e4771bc201f704351b)]:
   [[`de4695f`](https://github.com/wpmudev/sui-react/commit/de4695feb4886a3af66e5c4b51031915907e2490),
   [`4a48b89`](https://github.com/wpmudev/sui-react/commit/4a48b899de749dd8e73169dd0096f293e557b0a1),
   [`a9ead37`](https://github.com/wpmudev/sui-react/commit/a9ead374fd02ebd63882d55bc01ab2fc7375732f)]:
diff --git a/packages/ui/popover/src/popover.tsx b/packages/ui/popover/src/popover.tsx
index 2946244bc..4ba6b268f 100644
--- a/packages/ui/popover/src/popover.tsx
+++ b/packages/ui/popover/src/popover.tsx
@@ -39,6 +39,8 @@ const Popover: React.FC<PopoverProps> = ({
 	placement = "top",
 	footer,
 	displayOnHover = false,
+	popupWidth,
+	popupProps,
 	_htmlProps = {},
 	_style = {},
 }) => {
@@ -49,6 +51,7 @@ const Popover: React.FC<PopoverProps> = ({
 		top: 0,
 		right: "auto",
 	})
+	const [adjustedPlacement, setAdjustedPlacement] = useState<string>(placement)
 
 	// default children content
 	children = useDefaultChildren(children)
@@ -59,6 +62,7 @@ const Popover: React.FC<PopoverProps> = ({
 	const ref = useRef<HTMLDivElement | null>(null)
 	const triggerRef = useRef<HTMLDivElement | null>(null)
 	const popupRef = useRef<HTMLDivElement | null>(null)
+	const closeTimeoutRef = useRef<NodeJS.Timeout | null>(null)
 
 	const { suiInlineClassname } = useStyles(_style, className ?? "")
 
@@ -68,7 +72,7 @@ const Popover: React.FC<PopoverProps> = ({
 		{
 			open: isPopupOpen,
 			image: !isUndefined(image) && !isEmpty(image),
-			[`${placement}`]: true,
+			[`${adjustedPlacement}`]: true,
 		},
 		suiInlineClassname,
 	)
@@ -95,6 +99,12 @@ const Popover: React.FC<PopoverProps> = ({
 			return
 		}
 
+		// Clear any pending close timeout
+		if (closeTimeoutRef.current) {
+			clearTimeout(closeTimeoutRef.current)
+			closeTimeoutRef.current = null
+		}
+
 		setIsPopupOpen(true)
 	}, [displayOnHover])
 
@@ -104,9 +114,191 @@ const Popover: React.FC<PopoverProps> = ({
 			return
 		}
 
-		setIsPopupOpen(false)
+		// Delay closing to allow mouse to reach the popup
+		closeTimeoutRef.current = setTimeout(() => {
+			setIsPopupOpen(false)
+			closeTimeoutRef.current = null
+		}, 500)
 	}, [displayOnHover])
 
+	// Cleanup timeout on unmount
+	useEffect(() => {
+		return () => {
+			if (closeTimeoutRef.current) {
+				clearTimeout(closeTimeoutRef.current)
+			}
+		}
+	}, [])
+
+	/**
+	 * Check if popover fits in viewport and adjust placement if needed
+	 */
+	const getAdjustedPlacement = useCallback(
+		(
+			triggerRect: DOMRect,
+			popupW: number,
+			popupH: number,
+			currentPlacement: string,
+		): string => {
+			const viewportWidth = window.innerWidth
+			const viewportHeight = window.innerHeight
+			const scrollTop = window.pageYOffset || document.documentElement.scrollTop
+			const scrollLeft =
+				window.pageXOffset || document.documentElement.scrollLeft
+
+			// Calculate absolute positions for the trigger element
+			const triggerTop = triggerRect.top + scrollTop
+			const triggerLeft = triggerRect.left + scrollLeft
+			const triggerBottom = triggerTop + triggerRect.height
+			const triggerRight = triggerLeft + triggerRect.width
+
+			// Helper to check if a position fits
+			const checkFit = (positionToCheck: string): boolean => {
+				let popupTop = 0
+				let popupLeft = 0
+
+				switch (positionToCheck) {
+					case "top":
+					case "top-left":
+					case "top-right":
+						popupTop = triggerTop - popupH - 16
+						break
+					case "bottom":
+					case "bottom-left":
+					case "bottom-right":
+						popupTop = triggerBottom + 16
+						break
+					case "left":
+					case "left-top":
+					case "left-bottom":
+						popupTop = triggerTop + triggerRect.height / 2 - popupH / 2
+						break
+					case "right":
+					case "right-top":
+					case "right-bottom":
+						popupTop = triggerTop + triggerRect.height / 2 - popupH / 2
+						break
+				}
+
+				switch (positionToCheck) {
+					case "top":
+					case "bottom":
+						popupLeft = triggerLeft + triggerRect.width / 2 - popupW / 2
+						break
+					case "top-left":
+					case "bottom-left":
+						popupLeft = triggerLeft - popupW + triggerRect.width / 2 + 26
+						break
+					case "top-right":
+					case "bottom-right":
+						popupLeft = triggerLeft + triggerRect.width / 2 - 26
+						break
+					case "left":
+					case "left-top":
+					case "left-bottom":
+						popupLeft = triggerLeft - popupW - 16
+						break
+					case "right":
+					case "right-top":
+					case "right-bottom":
+						popupLeft = triggerRight + 16
+						break
+				}
+
+				// Check if popup fits in viewport
+				const fitsVertically =
+					popupTop >= scrollTop &&
+					popupTop + popupH <= scrollTop + viewportHeight
+				const fitsHorizontally =
+					popupLeft >= scrollLeft &&
+					popupLeft + popupW <= scrollLeft + viewportWidth
+
+				return fitsVertically && fitsHorizontally
+			}
+
+			// First, check if current placement fits
+			if (checkFit(currentPlacement)) {
+				return currentPlacement
+			}
+
+			// Define fallback order based on current placement
+			const fallbackOrder: Record<string, string[]> = {
+				top: ["bottom", "right", "left", "top-right", "top-left"],
+				"top-left": [
+					"bottom-left",
+					"top-right",
+					"bottom-right",
+					"right",
+					"left",
+				],
+				"top-right": [
+					"bottom-right",
+					"top-left",
+					"bottom-left",
+					"left",
+					"right",
+				],
+				bottom: ["top", "right", "left", "bottom-right", "bottom-left"],
+				"bottom-left": [
+					"top-left",
+					"bottom-right",
+					"top-right",
+					"right",
+					"left",
+				],
+				"bottom-right": [
+					"top-right",
+					"bottom-left",
+					"top-left",
+					"left",
+					"right",
+				],
+				left: ["right", "top", "bottom", "left-top", "left-bottom"],
+				"left-top": [
+					"right-top",
+					"left-bottom",
+					"right-bottom",
+					"top",
+					"bottom",
+				],
+				"left-bottom": [
+					"right-bottom",
+					"left-top",
+					"right-top",
+					"bottom",
+					"top",
+				],
+				right: ["left", "top", "bottom", "right-top", "right-bottom"],
+				"right-top": [
+					"left-top",
+					"right-bottom",
+					"left-bottom",
+					"top",
+					"bottom",
+				],
+				"right-bottom": [
+					"left-bottom",
+					"right-top",
+					"left-top",
+					"bottom",
+					"top",
+				],
+			}
+
+			// Try fallback positions
+			const fallbacks = fallbackOrder[currentPlacement] || []
+			for (const fallbackPlacement of fallbacks) {
+				if (checkFit(fallbackPlacement)) {
+					return fallbackPlacement
+				}
+			}
+
+			// If nothing fits, return the original placement
+			return currentPlacement
+		},
+		[],
+	)
+
 	useEffect(() => {
 		const el = triggerRef?.current
 		const { clientWidth, clientHeight } = el as HTMLDivElement
@@ -117,9 +309,19 @@ const Popover: React.FC<PopoverProps> = ({
 			return
 		}
 
+		// Get trigger element's position and check for best placement
+		const triggerRect = el?.getBoundingClientRect() as DOMRect
+		const bestPlacement = getAdjustedPlacement(
+			triggerRect,
+			popupW,
+			popupH,
+			placement,
+		)
+		setAdjustedPlacement(bestPlacement)
+
 		let pos = {}
 
-		switch (placement) {
+		switch (bestPlacement) {
 			case "top":
 				pos = {
 					[isRTL ? "right" : "left"]: 0 - popupW / 2 + clientWidth / 2,
@@ -199,7 +401,7 @@ const Popover: React.FC<PopoverProps> = ({
 			...pos,
 		})
 		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [trigger, popupRef, isPopupOpen, placement])
+	}, [trigger, popupRef, isPopupOpen, placement, getAdjustedPlacement])
 
 	return (
 		<div
@@ -233,7 +435,9 @@ const Popover: React.FC<PopoverProps> = ({
 			<div
 				ref={popupRef as LegacyRef<HTMLDivElement>}
 				className="sui-popover__popup"
-				style={{ ...popupPositions } as CSSProperties}
+				style={{ ...popupPositions, width: popupWidth } as CSSProperties}
+				onMouseEnter={onMouseEnter}
+				{...popupProps}
 				{..._renderHTMLPropsSafely(_htmlProps)}
 			>
 				<div className="sui-popover__popup-arrow"></div>
diff --git a/packages/ui/popover/src/popover.types.ts b/packages/ui/popover/src/popover.types.ts
index feca972e7..d0ae67f43 100644
--- a/packages/ui/popover/src/popover.types.ts
+++ b/packages/ui/popover/src/popover.types.ts
@@ -63,6 +63,14 @@ interface PopoverBaseProps
 	 * When true, it will display popup on hover
 	 */
 	displayOnHover?: boolean
+	/**
+	 * Width of the popup
+	 */
+	popupWidth?: string | number
+	/**
+	 * Additional props for the popup container
+	 */
+	popupProps?: SuiHTMLAttributes<HTMLProps<HTMLDivElement>>
 }
 
 type PopoverProps = PopoverBaseProps & ButtonProps
diff --git a/packages/ui/popover/stories/Popover.stories.tsx b/packages/ui/popover/stories/Popover.stories.tsx
index 73ee1b839..acd137f00 100644
--- a/packages/ui/popover/stories/Popover.stories.tsx
+++ b/packages/ui/popover/stories/Popover.stories.tsx
@@ -7,6 +7,7 @@ import { Tag } from "@wpmudev/sui-tag"
 
 // Import documentation main page.
 import docs from "./Popover.mdx"
+import { Info } from "@wpmudev/sui-icons"
 
 // Configure default options.
 export default {
@@ -49,10 +50,15 @@ const Popover = ({
 								</Button>
 							)
 						}
+						// trigger={
+						// 	<Button isSmall={true} type="primary" colorScheme="blue">
+						// 		Open popup
+						// 	</Button>
+						// }
 						trigger={
-							<Button isSmall={true} type="primary" colorScheme="blue">
-								Open popup
-							</Button>
+							<span>
+								<Info as="button" colorScheme="neutral" />
+							</span>
 						}
 						image={src}
 					>
diff --git a/packages/ui/recipient/src/recipient.tsx b/packages/ui/recipient/src/recipient.tsx
index c4e73fcef..fd0423d6f 100644
--- a/packages/ui/recipient/src/recipient.tsx
+++ b/packages/ui/recipient/src/recipient.tsx
@@ -16,18 +16,22 @@ const Recipient: React.FC<RecipientProps> = ({
 	userName = "name",
 	userEmail = "",
 	userImage,
+	hideAvatar = false,
+	placeholder = "No Avatar",
+	className,
 	status = "none",
 	isInvited = false,
 	appearance = "primary",
+	actions,
 	_htmlProps,
 	_style,
 }) => {
 	const generatedId = useId()
 	const recipientId = id || `sui-recipient-${generatedId}`
-	const { suiInlineClassname } = useStyles(_style)
+	const { suiInlineClassname } = useStyles(_style, className)
 
 	// Define recipient class.
-	const className = generateCN(
+	const classes = generateCN(
 		"sui-recipient",
 		{
 			// Define recipient appearance.
@@ -39,27 +43,36 @@ const Recipient: React.FC<RecipientProps> = ({
 	return (
 		<div
 			id={recipientId}
-			className={className}
+			className={classes}
 			data-testid="recipients"
 			{..._renderHTMLPropsSafely(_htmlProps)}
 		>
 			<div className="sui-recipient__info">
-				<Avatar
-					className="sui-recipient__avatar"
-					{...(!isEmpty(status) && { status })}
-					{...(userImage?.src && { image: userImage })}
-				/>
-				{(!isEmpty(userName) || !isEmpty(userEmail)) && (
-					<div className="sui-recipient__details">
-						{!isEmpty(userName) && <RecipientName>{userName}</RecipientName>}
-						{!isEmpty(userEmail) && (
-							<RecipientEmail>{userEmail}</RecipientEmail>
+				{hideAvatar && (
+					<p className="sui-recipient__info--placeholder">{placeholder}</p>
+				)}
+				{!hideAvatar && (
+					<Fragment>
+						<Avatar
+							className="sui-recipient__avatar"
+							{...(!isEmpty(status) && { status })}
+							{...(userImage?.src && { image: userImage })}
+						/>
+						{(!isEmpty(userName) || !isEmpty(userEmail)) && (
+							<div className="sui-recipient__details">
+								{!isEmpty(userName) && (
+									<RecipientName>{userName}</RecipientName>
+								)}
+								{!isEmpty(userEmail) && (
+									<RecipientEmail>{userEmail}</RecipientEmail>
+								)}
+							</div>
 						)}
-					</div>
+					</Fragment>
 				)}
 			</div>
 			<div className="sui-recipient__actions">
-				{!isInvited && (
+				{!isInvited && !actions && (
 					<RecipientButton
 						className="sui-recipient__button"
 						buttonProps={{
@@ -69,7 +82,7 @@ const Recipient: React.FC<RecipientProps> = ({
 						Add recipient
 					</RecipientButton>
 				)}
-				{isInvited && (
+				{isInvited && !actions && (
 					<Fragment>
 						<RecipientButton
 							className="sui-recipient__button"
@@ -91,6 +104,7 @@ const Recipient: React.FC<RecipientProps> = ({
 						</RecipientButton>
 					</Fragment>
 				)}
+				{actions}
 			</div>
 		</div>
 	)
diff --git a/packages/ui/recipient/src/recipient.type.ts b/packages/ui/recipient/src/recipient.type.ts
index 75464a7a6..493d4d299 100644
--- a/packages/ui/recipient/src/recipient.type.ts
+++ b/packages/ui/recipient/src/recipient.type.ts
@@ -27,6 +27,10 @@ interface RecipientProps
 		alt: string
 		src: string
 	}
+	/**
+	 * Custom CSS class name(s) to be applied to the recipient component.
+	 */
+	className?: string
 	/**
 	 * Reflects if the user is confirmed
 	 */
@@ -39,6 +43,18 @@ interface RecipientProps
 	 * Theme of the recipient.
 	 */
 	appearance?: string
+	/**
+	 * Action buttons or elements to be displayed in the recipient component.
+	 */
+	actions?: React.ReactNode
+	/**
+	 * Placeholder text to display when avatar is hidden
+	 */
+	placeholder?: string
+	/**
+	 * Hides the avatar when set to true
+	 */
+	hideAvatar?: boolean
 }
 
 export type { RecipientProps }
diff --git a/packages/ui/select/src/elements/select-dropdown.tsx b/packages/ui/select/src/elements/select-dropdown.tsx
index 52cc0c2f3..9d59938d9 100644
--- a/packages/ui/select/src/elements/select-dropdown.tsx
+++ b/packages/ui/select/src/elements/select-dropdown.tsx
@@ -33,6 +33,7 @@ const Dropdown: React.FC<SelectDropdownProps> = ({
 	updateOptions,
 	onSearch = (value: string) => {},
 	onChange,
+	emptyMessage = "",
 	_htmlProps,
 	_dropdownProps,
 	...props
@@ -98,6 +99,7 @@ const Dropdown: React.FC<SelectDropdownProps> = ({
 			isFixedHeight={true}
 			className={generateCN("sui-select__dropdown", {}, suiInlineClassname)}
 			menu={content}
+			emptyMessage={emptyMessage}
 			onMenuClick={(option: SelectOptionType, e: MouseEvent<HTMLElement>) => {
 				onSelect(e, option)
 			}}
diff --git a/packages/ui/select/src/select-base.tsx b/packages/ui/select/src/select-base.tsx
index 97f5c74b7..7f88e01da 100644
--- a/packages/ui/select/src/select-base.tsx
+++ b/packages/ui/select/src/select-base.tsx
@@ -41,6 +41,7 @@ const Select: React.FC<SelectBaseProps> = ({
 	onMouseEnter = () => null,
 	onMouseLeave = () => null,
 	customWidth,
+	noResultsMessage = "No results found",
 	onChange,
 	resetValidation,
 	validateOnMount,
@@ -401,6 +402,7 @@ const Select: React.FC<SelectBaseProps> = ({
 			updateSelected(optionId)
 		},
 		isCustomVar,
+		noResultsMessage,
 		_dropdownProps,
 	}
 
diff --git a/packages/ui/select/src/select.types.ts b/packages/ui/select/src/select.types.ts
index ad55f8d63..af6eed6c4 100644
--- a/packages/ui/select/src/select.types.ts
+++ b/packages/ui/select/src/select.types.ts
@@ -67,6 +67,8 @@ interface SelectBaseProps
 	isCustomVar?: boolean
 	/** Add a custom width in pixels  */
 	customWidth?: number
+	/** Message to display when no options are available */
+	noResultsMessage?: string
 	/**
 	 * Event handler for mouse enter event.
 	 * It is of type Pick<InteractionTypes, "onMouseEnter">, which means it selects
@@ -172,6 +174,8 @@ interface SelectDropdownProps extends useStylesTypes, SuiHTMLAttributes {
 	onSearch?: (value: string) => void
 	dropdownRef?: Ref<DropdownRefProps | null>
 	_dropdownProps?: object
+	/** Message to display when no options are available */
+	emptyMessage?: string
 }
 
 interface SelectDropdownOptionProps {
diff --git a/packages/ui/select/stories/ReactSelect.stories.tsx b/packages/ui/select/stories/ReactSelect.stories.tsx
index dd1364f93..1ba38b9d3 100644
--- a/packages/ui/select/stories/ReactSelect.stories.tsx
+++ b/packages/ui/select/stories/ReactSelect.stories.tsx
@@ -129,6 +129,7 @@ const Select = ({
 									isAsync: true,
 									allowSearch: true,
 									searchPlaceholder: "Search...",
+									emptyMessage: "No options found",
 									asyncOptions: {
 										perPage,
 									},
diff --git a/packages/ui/selector/CHANGELOG.md b/packages/ui/selector/CHANGELOG.md
index 05540eaef..95544e0e7 100644
--- a/packages/ui/selector/CHANGELOG.md
+++ b/packages/ui/selector/CHANGELOG.md
@@ -1,9 +1,39 @@
 # Change Log
 
+## 0.0.5
+
+### Patch Changes
+
+- [#355](https://github.com/wpmudev/sui-react/pull/355)
+  [`503754f`](https://github.com/wpmudev/sui-react/commit/503754fe4f0d7745369493f06311bbc55d9322f6)
+  Thanks [@creador-dev](https://github.com/creador-dev)! - Popover popup
+  automatic placement.
+
+- [#355](https://github.com/wpmudev/sui-react/pull/355)
+  [`c37ddcb`](https://github.com/wpmudev/sui-react/commit/c37ddcb96d23a3af499de507cec2100b75264c4e)
+  Thanks [@creador-dev](https://github.com/creador-dev)! - Setup banner and
+  navigation custom icon prop
+
+- Updated dependencies
+  [[`503754f`](https://github.com/wpmudev/sui-react/commit/503754fe4f0d7745369493f06311bbc55d9322f6),
+  [`c37ddcb`](https://github.com/wpmudev/sui-react/commit/c37ddcb96d23a3af499de507cec2100b75264c4e)]:
+  - @wpmudev/sui-icons@0.0.3
+  - @wpmudev/sui-tooltip@0.1.3
+  - @wpmudev/sui-icon@0.1.3
+  - @wpmudev/sui-tag@0.0.5
+  - @wpmudev/sui-hooks@0.1.2
+
 ## 0.0.4
 
 ### Patch Changes
 
+- [#355](https://github.com/wpmudev/sui-react/pull/355)
+  [`ef804ad`](https://github.com/wpmudev/sui-react/commit/ef804adbfb5d783e066897e4771bc201f704351b)
+  Thanks [@creador-dev](https://github.com/creador-dev)! - Remove sui react
+  package.
+
+- [#355](https://github.com/wpmudev/sui-react/pull/355)
+  [`ef804ad`](https://github.com/wpmudev/sui-react/commit/ef804adbfb5d783e066897e4771bc201f704351b)
 - [#334](https://github.com/wpmudev/sui-react/pull/334)
   [`de4695f`](https://github.com/wpmudev/sui-react/commit/de4695feb4886a3af66e5c4b51031915907e2490)
   Thanks [@abder](https://github.com/abder)! - Remove sui react package.
@@ -16,6 +46,9 @@
 - Updated dependencies
   [[`0a9e7dd`](https://github.com/wpmudev/sui-react/commit/0a9e7dda13f63ed410df711027ef032d05a41654),
   [`761d6ab`](https://github.com/wpmudev/sui-react/commit/761d6abcf1a5bbee08f92d37405e0d9a8de666e9),
+  [`ef804ad`](https://github.com/wpmudev/sui-react/commit/ef804adbfb5d783e066897e4771bc201f704351b),
+  [`4a48b89`](https://github.com/wpmudev/sui-react/commit/4a48b899de749dd8e73169dd0096f293e557b0a1),
+  [`ef804ad`](https://github.com/wpmudev/sui-react/commit/ef804adbfb5d783e066897e4771bc201f704351b),
   [`de4695f`](https://github.com/wpmudev/sui-react/commit/de4695feb4886a3af66e5c4b51031915907e2490),
   [`4a48b89`](https://github.com/wpmudev/sui-react/commit/4a48b899de749dd8e73169dd0096f293e557b0a1),
   [`a9ead37`](https://github.com/wpmudev/sui-react/commit/a9ead374fd02ebd63882d55bc01ab2fc7375732f),
diff --git a/packages/ui/setup-banner/CHANGELOG.md b/packages/ui/setup-banner/CHANGELOG.md
index 50851d1b7..410525a1c 100644
--- a/packages/ui/setup-banner/CHANGELOG.md
+++ b/packages/ui/setup-banner/CHANGELOG.md
@@ -1,9 +1,35 @@
 # Change Log
 
+## 0.0.5
+
+### Patch Changes
+
+- [#355](https://github.com/wpmudev/sui-react/pull/355)
+  [`503754f`](https://github.com/wpmudev/sui-react/commit/503754fe4f0d7745369493f06311bbc55d9322f6)
+  Thanks [@creador-dev](https://github.com/creador-dev)! - Popover popup
+  automatic placement.
+
+- [#355](https://github.com/wpmudev/sui-react/pull/355)
+  [`c37ddcb`](https://github.com/wpmudev/sui-react/commit/c37ddcb96d23a3af499de507cec2100b75264c4e)
+  Thanks [@creador-dev](https://github.com/creador-dev)! - Setup banner and
+  navigation custom icon prop
+
+- Updated dependencies
+  [[`503754f`](https://github.com/wpmudev/sui-react/commit/503754fe4f0d7745369493f06311bbc55d9322f6),
+  [`c37ddcb`](https://github.com/wpmudev/sui-react/commit/c37ddcb96d23a3af499de507cec2100b75264c4e)]:
+  - @wpmudev/sui-icons@0.0.3
+
 ## 0.0.4
 
 ### Patch Changes
 
+- [#355](https://github.com/wpmudev/sui-react/pull/355)
+  [`ef804ad`](https://github.com/wpmudev/sui-react/commit/ef804adbfb5d783e066897e4771bc201f704351b)
+  Thanks [@creador-dev](https://github.com/creador-dev)! - Remove sui react
+  package.
+
+- [#355](https://github.com/wpmudev/sui-react/pull/355)
+  [`ef804ad`](https://github.com/wpmudev/sui-react/commit/ef804adbfb5d783e066897e4771bc201f704351b)
 - [#334](https://github.com/wpmudev/sui-react/pull/334)
   [`de4695f`](https://github.com/wpmudev/sui-react/commit/de4695feb4886a3af66e5c4b51031915907e2490)
   Thanks [@abder](https://github.com/abder)! - Remove sui react package.
diff --git a/packages/ui/setup-banner/src/setup-banner.tsx b/packages/ui/setup-banner/src/setup-banner.tsx
index 3ea127495..4398bb663 100644
--- a/packages/ui/setup-banner/src/setup-banner.tsx
+++ b/packages/ui/setup-banner/src/setup-banner.tsx
@@ -16,6 +16,7 @@ import { useStyles } from "@wpmudev/sui-hooks"
  *
  * @param  props
  * @param  props.type
+ * @param  props.customIcon
  * @param  props.id
  * @param  props.title
  * @param  props.className
@@ -27,6 +28,7 @@ import { useStyles } from "@wpmudev/sui-hooks"
 const SetupBanner: React.FC<SetupBannerProps> = ({
 	id,
 	type = "smush",
+	customIcon,
 	title = "title",
 	className,
 	description,
@@ -60,14 +62,14 @@ const SetupBanner: React.FC<SetupBannerProps> = ({
 			data-testid="setup-banner"
 			{..._renderHTMLPropsSafely(_htmlProps)}
 		>
-			{IconTag && (
+			{IconTag && !customIcon && (
 				<div className="sui-setup-banner__bg" data-testid="setup-banner-bg">
 					<IconTag className="sui-setup-banner__bg-icon" />
 				</div>
 			)}
 			<div className="sui-setup-banner__subtitle">Quick Setup</div>
 			<div className="sui-setup-banner__info">
-				{!!IconTag && (
+				{!!IconTag && !customIcon && (
 					<div
 						className="sui-setup-banner__info-logo"
 						data-testid="setup-banner-icon"
@@ -75,6 +77,14 @@ const SetupBanner: React.FC<SetupBannerProps> = ({
 						<IconTag fill="#FFFFFF" />
 					</div>
 				)}
+				{!!customIcon && (
+					<div
+						className="sui-setup-banner__custom-icon"
+						data-testid="setup-banner-icon"
+					>
+						<img src={customIcon} alt={`${type} icon`} />
+					</div>
+				)}
 				{!!title && <h2 className="sui-setup-banner__info-title">{title}</h2>}
 			</div>
 			{!!description && (
diff --git a/packages/ui/setup-banner/src/setup-banner.types.ts b/packages/ui/setup-banner/src/setup-banner.types.ts
index 64904798b..ad7521464 100644
--- a/packages/ui/setup-banner/src/setup-banner.types.ts
+++ b/packages/ui/setup-banner/src/setup-banner.types.ts
@@ -19,6 +19,10 @@ interface SetupBannerProps extends SuiStyleType, SuiHTMLAttributes {
 	 * The title to be displayed in the empty state (optional).
 	 */
 	title?: string
+	/**
+	 * Custom icon component to be displayed in the banner.
+	 */
+	customIcon?: string
 	/**
 	 * Subtitle or additional information for the banner.
 	 */
diff --git a/packages/ui/sidebar/CHANGELOG.md b/packages/ui/sidebar/CHANGELOG.md
index 8723793d2..3a33fa7d3 100644
--- a/packages/ui/sidebar/CHANGELOG.md
+++ b/packages/ui/sidebar/CHANGELOG.md
@@ -1,5 +1,27 @@
 # @wpmudev/sui-sidebar
 
+## 0.1.3
+
+### Patch Changes
+
+- [#355](https://github.com/wpmudev/sui-react/pull/355)
+  [`503754f`](https://github.com/wpmudev/sui-react/commit/503754fe4f0d7745369493f06311bbc55d9322f6)
+  Thanks [@creador-dev](https://github.com/creador-dev)! - Popover popup
+  automatic placement.
+
+- [#355](https://github.com/wpmudev/sui-react/pull/355)
+  [`c37ddcb`](https://github.com/wpmudev/sui-react/commit/c37ddcb96d23a3af499de507cec2100b75264c4e)
+  Thanks [@creador-dev](https://github.com/creador-dev)! - Setup banner and
+  navigation custom icon prop
+
+- Updated dependencies
+  [[`503754f`](https://github.com/wpmudev/sui-react/commit/503754fe4f0d7745369493f06311bbc55d9322f6),
+  [`c37ddcb`](https://github.com/wpmudev/sui-react/commit/c37ddcb96d23a3af499de507cec2100b75264c4e)]:
+  - @wpmudev/sui-icons@0.0.3
+  - @wpmudev/sui-button@0.1.3
+  - @wpmudev/sui-icon@0.1.3
+  - @wpmudev/sui-hooks@0.1.2
+
 ## 0.1.2
 
 ### Patch Changes
@@ -8,6 +30,13 @@
   [`0a9e7dd`](https://github.com/wpmudev/sui-react/commit/0a9e7dda13f63ed410df711027ef032d05a41654)
   Thanks [@creador-dev](https://github.com/creador-dev)! - Update colors
 
+- [#355](https://github.com/wpmudev/sui-react/pull/355)
+  [`ef804ad`](https://github.com/wpmudev/sui-react/commit/ef804adbfb5d783e066897e4771bc201f704351b)
+  Thanks [@creador-dev](https://github.com/creador-dev)! - Remove sui react
+  package.
+
+- [#355](https://github.com/wpmudev/sui-react/pull/355)
+  [`ef804ad`](https://github.com/wpmudev/sui-react/commit/ef804adbfb5d783e066897e4771bc201f704351b)
 - [#334](https://github.com/wpmudev/sui-react/pull/334)
   [`de4695f`](https://github.com/wpmudev/sui-react/commit/de4695feb4886a3af66e5c4b51031915907e2490)
   Thanks [@abder](https://github.com/abder)! - Remove sui react package.
@@ -18,6 +47,9 @@
   kebab-case
 
 - Updated dependencies
+  [[`ef804ad`](https://github.com/wpmudev/sui-react/commit/ef804adbfb5d783e066897e4771bc201f704351b),
+  [`4a48b89`](https://github.com/wpmudev/sui-react/commit/4a48b899de749dd8e73169dd0096f293e557b0a1),
+  [`ef804ad`](https://github.com/wpmudev/sui-react/commit/ef804adbfb5d783e066897e4771bc201f704351b)]:
   [[`de4695f`](https://github.com/wpmudev/sui-react/commit/de4695feb4886a3af66e5c4b51031915907e2490),
   [`4a48b89`](https://github.com/wpmudev/sui-react/commit/4a48b899de749dd8e73169dd0096f293e557b0a1),
   [`a9ead37`](https://github.com/wpmudev/sui-react/commit/a9ead374fd02ebd63882d55bc01ab2fc7375732f)]:
diff --git a/packages/ui/skeleton/CHANGELOG.md b/packages/ui/skeleton/CHANGELOG.md
index 479b3e55f..8802ecaf2 100644
--- a/packages/ui/skeleton/CHANGELOG.md
+++ b/packages/ui/skeleton/CHANGELOG.md
@@ -1,9 +1,35 @@
 # @wpmudev/sui-skeleton
 
+## 0.1.3
+
+### Patch Changes
+
+- [#355](https://github.com/wpmudev/sui-react/pull/355)
+  [`503754f`](https://github.com/wpmudev/sui-react/commit/503754fe4f0d7745369493f06311bbc55d9322f6)
+  Thanks [@creador-dev](https://github.com/creador-dev)! - Popover popup
+  automatic placement.
+
+- [#355](https://github.com/wpmudev/sui-react/pull/355)
+  [`c37ddcb`](https://github.com/wpmudev/sui-react/commit/c37ddcb96d23a3af499de507cec2100b75264c4e)
+  Thanks [@creador-dev](https://github.com/creador-dev)! - Setup banner and
+  navigation custom icon prop
+
+- Updated dependencies
+  [[`503754f`](https://github.com/wpmudev/sui-react/commit/503754fe4f0d7745369493f06311bbc55d9322f6),
+  [`c37ddcb`](https://github.com/wpmudev/sui-react/commit/c37ddcb96d23a3af499de507cec2100b75264c4e)]:
+  - @wpmudev/sui-hooks@0.1.2
+
 ## 0.1.2
 
 ### Patch Changes
 
+- [#355](https://github.com/wpmudev/sui-react/pull/355)
+  [`ef804ad`](https://github.com/wpmudev/sui-react/commit/ef804adbfb5d783e066897e4771bc201f704351b)
+  Thanks [@creador-dev](https://github.com/creador-dev)! - Remove sui react
+  package.
+
+- [#355](https://github.com/wpmudev/sui-react/pull/355)
+  [`ef804ad`](https://github.com/wpmudev/sui-react/commit/ef804adbfb5d783e066897e4771bc201f704351b)
 - [#334](https://github.com/wpmudev/sui-react/pull/334)
   [`de4695f`](https://github.com/wpmudev/sui-react/commit/de4695feb4886a3af66e5c4b51031915907e2490)
   Thanks [@abder](https://github.com/abder)! - Remove sui react package.
diff --git a/packages/ui/summary-box/src/summary-box-item.tsx b/packages/ui/summary-box/src/summary-box-item.tsx
index 690d95ce2..9d2fb88a7 100644
--- a/packages/ui/summary-box/src/summary-box-item.tsx
+++ b/packages/ui/summary-box/src/summary-box-item.tsx
@@ -15,21 +15,22 @@ import { SummaryBoxItemProps } from "./summary-box.types"
  *
  * A React functional component that represents an item in the list of summary items within a summary box.
  *
- * @param {Object} props                      - The props for the SummaryBoxItem component.
- * @param {string} [props.title=""]           - The title of the item.
- * @param {string} [props.titleUrl=""]        - The URL for the title.
- * @param {string} [props.description=""]     - A description for the item.
- * @param {string} props.className            - Additional CSS classes to apply to the component.
- * @param {string} [props.tagTitle=""]        - The title for a tag associated with the item.
- * @param {string} [props.tagColor="default"] - The color of the tag (e.g., "default", "primary").
- * @param {string} [props.actionIcon=""]      - An optional action icon for the item.
- * @param {string} [props.actionIconColor=""] - The color of the action icon.
- * @param {Object} [props.tagProps={}]        - Additional props to be passed to the Tag component (optional).
- * @param {Object} [props.linkProps={}]       - Additional props to be passed to the link element (if titleUrl is provided).
+ * @param {Object}          props                      - The props for the SummaryBoxItem component.
+ * @param {string}          [props.title=""]           - The title of the item.
+ * @param {string}          [props.titleUrl=""]        - The URL for the title.
+ * @param {string}          [props.description=""]     - A description for the item.
+ * @param {string}          props.className            - Additional CSS classes to apply to the component.
+ * @param {string}          [props.tagTitle=""]        - The title for a tag associated with the item.
+ * @param {string}          [props.tagColor="default"] - The color of the tag (e.g., "default", "primary").
+ * @param {string}          [props.actionIcon=""]      - An optional action icon for the item.
+ * @param {string}          [props.actionIconColor=""] - The color of the action icon.
+ * @param {Object}          [props.tagProps={}]        - Additional props to be passed to the Tag component (optional).
+ * @param {Object}          [props.linkProps={}]       - Additional props to be passed to the link element (if titleUrl is provided).
+ * @param {React.ReactNode} [props.children]           - Optional children elements to be rendered within the item.
  *
- * @param          props._htmlProps
- * @param          props._style
- * @param          props.id
+ * @param                   props._htmlProps
+ * @param                   props._style
+ * @param                   props.id
  * @return {JSX.Element} The SummaryBoxItem component.
  */
 const SummaryBoxItem: React.FC<SummaryBoxItemProps> = ({
@@ -41,6 +42,7 @@ const SummaryBoxItem: React.FC<SummaryBoxItemProps> = ({
 	tagTitle = "",
 	tagColor = "default",
 	actionIcon,
+	children,
 	actionIconColor = "",
 	tagProps = {},
 	linkProps = {},
@@ -100,7 +102,7 @@ const SummaryBoxItem: React.FC<SummaryBoxItemProps> = ({
 					</Tooltip>
 				)}
 			</div>
-			{(!isEmpty(tagTitle) || !isEmpty(actionIcon)) && (
+			{(!isEmpty(tagTitle) || !!actionIcon) && (
 				<div className="sui-summary-box__list-item-status">
 					{IconTag ? (
 						<IconTag
@@ -114,6 +116,9 @@ const SummaryBoxItem: React.FC<SummaryBoxItemProps> = ({
 					)}
 				</div>
 			)}
+			{children && (
+				<div className="sui-summary-box__list-item-children">{children}</div>
+			)}
 		</Row>
 	)
 }
diff --git a/packages/ui/summary-box/src/summary-box.types.ts b/packages/ui/summary-box/src/summary-box.types.ts
index a846cc035..f9d28ada6 100644
--- a/packages/ui/summary-box/src/summary-box.types.ts
+++ b/packages/ui/summary-box/src/summary-box.types.ts
@@ -123,6 +123,10 @@ interface SummaryBoxItemProps
 	 * Additional CSS class names for the summary item element (optional).
 	 */
 	className?: string
+	/**
+	 * Optional children elements to be rendered within the item.
+	 */
+	children?: React.ReactNode
 	/**
 	 * Additional props to be passed to the Tag component (optional).
 	 */
diff --git a/packages/ui/table/CHANGELOG.md b/packages/ui/table/CHANGELOG.md
index 9e1e29826..a3c56de24 100644
--- a/packages/ui/table/CHANGELOG.md
+++ b/packages/ui/table/CHANGELOG.md
@@ -1,5 +1,34 @@
 # Change Log
 
+## 1.0.6
+
+### Patch Changes
+
+- [#355](https://github.com/wpmudev/sui-react/pull/355)
+  [`503754f`](https://github.com/wpmudev/sui-react/commit/503754fe4f0d7745369493f06311bbc55d9322f6)
+  Thanks [@creador-dev](https://github.com/creador-dev)! - Popover popup
+  automatic placement.
+
+- [#355](https://github.com/wpmudev/sui-react/pull/355)
+  [`c37ddcb`](https://github.com/wpmudev/sui-react/commit/c37ddcb96d23a3af499de507cec2100b75264c4e)
+  Thanks [@creador-dev](https://github.com/creador-dev)! - Setup banner and
+  navigation custom icon prop
+
+- Updated dependencies
+  [[`503754f`](https://github.com/wpmudev/sui-react/commit/503754fe4f0d7745369493f06311bbc55d9322f6),
+  [`c37ddcb`](https://github.com/wpmudev/sui-react/commit/c37ddcb96d23a3af499de507cec2100b75264c4e),
+  [`36ba29c`](https://github.com/wpmudev/sui-react/commit/36ba29c920888612cf431d0a419cbf8a42e9838e)]:
+  - @wpmudev/sui-form-field@0.1.1
+  - @wpmudev/sui-icons@0.0.3
+  - @wpmudev/sui-checkbox@0.0.6
+  - @wpmudev/sui-dropdown@0.2.1
+  - @wpmudev/sui-button@0.1.3
+  - @wpmudev/sui-select@0.2.1
+  - @wpmudev/sui-input@0.1.1
+  - @wpmudev/sui-grid@0.1.3
+  - @wpmudev/sui-box@0.1.3
+  - @wpmudev/sui-hooks@0.1.2
+
 ## 1.0.5
 
 ### Patch Changes
@@ -8,6 +37,10 @@
   [`0a9e7dd`](https://github.com/wpmudev/sui-react/commit/0a9e7dda13f63ed410df711027ef032d05a41654)
   Thanks [@creador-dev](https://github.com/creador-dev)! - Update colors
 
+- [#355](https://github.com/wpmudev/sui-react/pull/355)
+  [`ef804ad`](https://github.com/wpmudev/sui-react/commit/ef804adbfb5d783e066897e4771bc201f704351b)
+  Thanks [@creador-dev](https://github.com/creador-dev)! - Remove sui react
+  package.
 - [#334](https://github.com/wpmudev/sui-react/pull/334)
   [`de4695f`](https://github.com/wpmudev/sui-react/commit/de4695feb4886a3af66e5c4b51031915907e2490)
   Thanks [@abder](https://github.com/abder)! - Remove sui react package.
@@ -17,6 +50,8 @@
   Thanks [@creador-dev](https://github.com/creador-dev)! - Add new template card
   component.
 
+- [#355](https://github.com/wpmudev/sui-react/pull/355)
+  [`ef804ad`](https://github.com/wpmudev/sui-react/commit/ef804adbfb5d783e066897e4771bc201f704351b)
 - [#361](https://github.com/wpmudev/sui-react/pull/361)
   [`a9ead37`](https://github.com/wpmudev/sui-react/commit/a9ead374fd02ebd63882d55bc01ab2fc7375732f)
   Thanks [@creador-dev](https://github.com/creador-dev)! - Change ids to
@@ -29,6 +64,16 @@
 
 - Updated dependencies
   [[`0a9e7dd`](https://github.com/wpmudev/sui-react/commit/0a9e7dda13f63ed410df711027ef032d05a41654),
+  [`ef804ad`](https://github.com/wpmudev/sui-react/commit/ef804adbfb5d783e066897e4771bc201f704351b),
+  [`ef804ad`](https://github.com/wpmudev/sui-react/commit/ef804adbfb5d783e066897e4771bc201f704351b),
+  [`4a48b89`](https://github.com/wpmudev/sui-react/commit/4a48b899de749dd8e73169dd0096f293e557b0a1),
+  [`ef804ad`](https://github.com/wpmudev/sui-react/commit/ef804adbfb5d783e066897e4771bc201f704351b)]:
+  - @wpmudev/sui-checkbox@0.0.5
+  - @wpmudev/sui-form-field@0.1.0
+  - @wpmudev/sui-dropdown@0.2.0
+  - @wpmudev/sui-select@0.2.0
+  - @wpmudev/sui-input@0.1.0
+  - @wpmudev/sui-button@0.1.2
   [`de4695f`](https://github.com/wpmudev/sui-react/commit/de4695feb4886a3af66e5c4b51031915907e2490),
   [`4a48b89`](https://github.com/wpmudev/sui-react/commit/4a48b899de749dd8e73169dd0096f293e557b0a1),
   [`a9ead37`](https://github.com/wpmudev/sui-react/commit/a9ead374fd02ebd63882d55bc01ab2fc7375732f)]:
diff --git a/packages/ui/tabs/src/elements/tab-context.tsx b/packages/ui/tabs/src/elements/tab-context.tsx
index 295ef52cb..c608866bf 100644
--- a/packages/ui/tabs/src/elements/tab-context.tsx
+++ b/packages/ui/tabs/src/elements/tab-context.tsx
@@ -1,4 +1,11 @@
-import React, { createContext, FC, useCallback, useId, useState } from "react"
+import React, {
+	createContext,
+	FC,
+	useCallback,
+	useEffect,
+	useId,
+	useState,
+} from "react"
 import { TabContextProps, TabProviderProps } from "../tabs.types"
 
 // Create a TabContext using createContext with an initial value of null
@@ -29,6 +36,11 @@ const TabProvider: FC<TabProviderProps> = ({
 		[id, onSwitchTab],
 	)
 
+	//  if activeIndex prop changes, update the currentIndex state
+	useEffect(() => {
+		setCurrentIndex(activeIndex ?? 0)
+	}, [activeIndex])
+
 	// Provide the TabContext value to its children using the provided state and functions
 	return (
 		<TabContext.Provider value={{ id, currentIndex, switchTab }}>
diff --git a/packages/ui/tabs/src/elements/tab-panel-item.tsx b/packages/ui/tabs/src/elements/tab-panel-item.tsx
index aea1afdfe..278b2bdd4 100644
--- a/packages/ui/tabs/src/elements/tab-panel-item.tsx
+++ b/packages/ui/tabs/src/elements/tab-panel-item.tsx
@@ -11,6 +11,7 @@ import { useDefaultChildren, useStyles } from "@wpmudev/sui-hooks"
 const TabPanelItem: React.FC<TabPanelItemProps> = ({
 	children,
 	id,
+	isDisabled = false,
 	_htmlProps = {},
 	_style = {},
 }) => {
@@ -41,6 +42,7 @@ const TabPanelItem: React.FC<TabPanelItemProps> = ({
 				"sui-tab__panel-item",
 				{
 					active: isActive,
+					disabled: isDisabled,
 				},
 				suiInlineClassname,
 			)}
diff --git a/packages/ui/tabs/src/tabs.types.ts b/packages/ui/tabs/src/tabs.types.ts
index 862fd4536..753b10dfd 100644
--- a/packages/ui/tabs/src/tabs.types.ts
+++ b/packages/ui/tabs/src/tabs.types.ts
@@ -61,6 +61,7 @@ interface TabPanelProps extends TabNavProps {}
  */
 interface TabPanelItemProps extends TabNavProps {
 	id?: string // Unique ID for the tab panel.
+	isDisabled?: boolean
 }
 
 /**
diff --git a/packages/ui/tag/CHANGELOG.md b/packages/ui/tag/CHANGELOG.md
index c3bee8e0e..40b81b08f 100644
--- a/packages/ui/tag/CHANGELOG.md
+++ b/packages/ui/tag/CHANGELOG.md
@@ -1,5 +1,19 @@
 # Change Log
 
+## 0.0.5
+
+### Patch Changes
+
+- [#355](https://github.com/wpmudev/sui-react/pull/355)
+  [`503754f`](https://github.com/wpmudev/sui-react/commit/503754fe4f0d7745369493f06311bbc55d9322f6)
+  Thanks [@creador-dev](https://github.com/creador-dev)! - Popover popup
+  automatic placement.
+
+- [#355](https://github.com/wpmudev/sui-react/pull/355)
+  [`c37ddcb`](https://github.com/wpmudev/sui-react/commit/c37ddcb96d23a3af499de507cec2100b75264c4e)
+  Thanks [@creador-dev](https://github.com/creador-dev)! - Setup banner and
+  navigation custom icon prop
+
 ## 0.0.4
 
 ### Patch Changes
@@ -8,6 +22,10 @@
   [`0a9e7dd`](https://github.com/wpmudev/sui-react/commit/0a9e7dda13f63ed410df711027ef032d05a41654)
   Thanks [@creador-dev](https://github.com/creador-dev)! - Update colors
 
+- [#355](https://github.com/wpmudev/sui-react/pull/355)
+  [`ef804ad`](https://github.com/wpmudev/sui-react/commit/ef804adbfb5d783e066897e4771bc201f704351b)
+  Thanks [@creador-dev](https://github.com/creador-dev)! - Remove sui react
+  package.
 - [#334](https://github.com/wpmudev/sui-react/pull/334)
   [`de4695f`](https://github.com/wpmudev/sui-react/commit/de4695feb4886a3af66e5c4b51031915907e2490)
   Thanks [@abder](https://github.com/abder)! - Remove sui react package.
@@ -17,6 +35,8 @@
   Thanks [@creador-dev](https://github.com/creador-dev)! - Add new template card
   component.
 
+- [#355](https://github.com/wpmudev/sui-react/pull/355)
+  [`ef804ad`](https://github.com/wpmudev/sui-react/commit/ef804adbfb5d783e066897e4771bc201f704351b)
 - [#361](https://github.com/wpmudev/sui-react/pull/361)
   [`a9ead37`](https://github.com/wpmudev/sui-react/commit/a9ead374fd02ebd63882d55bc01ab2fc7375732f)
   Thanks [@creador-dev](https://github.com/creador-dev)! - Change ids to
diff --git a/packages/ui/template-card/CHANGELOG.md b/packages/ui/template-card/CHANGELOG.md
index 57cf49130..a644c25f2 100644
--- a/packages/ui/template-card/CHANGELOG.md
+++ b/packages/ui/template-card/CHANGELOG.md
@@ -1,5 +1,27 @@
 # Change Log
 
+## 0.0.3
+
+### Patch Changes
+
+- [#355](https://github.com/wpmudev/sui-react/pull/355)
+  [`503754f`](https://github.com/wpmudev/sui-react/commit/503754fe4f0d7745369493f06311bbc55d9322f6)
+  Thanks [@creador-dev](https://github.com/creador-dev)! - Popover popup
+  automatic placement.
+
+- [#355](https://github.com/wpmudev/sui-react/pull/355)
+  [`c37ddcb`](https://github.com/wpmudev/sui-react/commit/c37ddcb96d23a3af499de507cec2100b75264c4e)
+  Thanks [@creador-dev](https://github.com/creador-dev)! - Setup banner and
+  navigation custom icon prop
+
+- Updated dependencies
+  [[`503754f`](https://github.com/wpmudev/sui-react/commit/503754fe4f0d7745369493f06311bbc55d9322f6),
+  [`c37ddcb`](https://github.com/wpmudev/sui-react/commit/c37ddcb96d23a3af499de507cec2100b75264c4e)]:
+  - @wpmudev/sui-icons@0.0.3
+  - @wpmudev/sui-tooltip@0.1.3
+  - @wpmudev/sui-button@0.1.3
+  - @wpmudev/sui-hooks@0.1.2
+
 ## 0.0.2
 
 ### Patch Changes
@@ -11,6 +33,9 @@
 
 - Updated dependencies
   [[`761d6ab`](https://github.com/wpmudev/sui-react/commit/761d6abcf1a5bbee08f92d37405e0d9a8de666e9),
+  [`ef804ad`](https://github.com/wpmudev/sui-react/commit/ef804adbfb5d783e066897e4771bc201f704351b),
+  [`4a48b89`](https://github.com/wpmudev/sui-react/commit/4a48b899de749dd8e73169dd0096f293e557b0a1),
+  [`ef804ad`](https://github.com/wpmudev/sui-react/commit/ef804adbfb5d783e066897e4771bc201f704351b)]:
   [`de4695f`](https://github.com/wpmudev/sui-react/commit/de4695feb4886a3af66e5c4b51031915907e2490),
   [`4a48b89`](https://github.com/wpmudev/sui-react/commit/4a48b899de749dd8e73169dd0096f293e557b0a1),
   [`a9ead37`](https://github.com/wpmudev/sui-react/commit/a9ead374fd02ebd63882d55bc01ab2fc7375732f)]:
diff --git a/packages/ui/toggle/src/toggle.tsx b/packages/ui/toggle/src/toggle.tsx
index 861f1c01d..b1a21cfba 100644
--- a/packages/ui/toggle/src/toggle.tsx
+++ b/packages/ui/toggle/src/toggle.tsx
@@ -25,8 +25,10 @@ const Toggle: React.FC<ToggleProps> = ({
 	isLabelHidden = false,
 	isDisabled = false,
 	onClick,
+	isFluid = false,
 	_htmlProps = {},
 	_style = {},
+	children,
 	...props
 }) => {
 	// use id
@@ -92,7 +94,10 @@ const Toggle: React.FC<ToggleProps> = ({
 	}
 
 	return (
-		<div className="sui-toggle__container" id={`${toggleId}-container`}>
+		<div
+			className={generateCN("sui-toggle__container", { fluid: isFluid })}
+			id={`${toggleId}-container`}
+		>
 			<label {...containerProps} htmlFor={toggleId} data-testid="toggle">
 				<input
 					{...(inputProps as HTMLProps<HTMLInputElement>)}
@@ -129,6 +134,11 @@ const Toggle: React.FC<ToggleProps> = ({
 					{description}
 				</div>
 			)}
+			{state && children && (
+				<div className="sui-toggle__content">
+					<div className="sui-toggle__content--inner">{children}</div>
+				</div>
+			)}
 		</div>
 	)
 }
diff --git a/packages/ui/toggle/src/toggle.types.ts b/packages/ui/toggle/src/toggle.types.ts
index 8066b5e2b..94a71e8ea 100644
--- a/packages/ui/toggle/src/toggle.types.ts
+++ b/packages/ui/toggle/src/toggle.types.ts
@@ -33,6 +33,14 @@ interface ToggleProps
 	 * Indicates whether the toggle component is disabled or not.
 	 */
 	isDisabled?: boolean
+	/**
+	 * Children elements to be rendered within the toggle component.
+	 */
+	children?: React.ReactNode
+	/**
+	 * isFluid: When true, the toggle component will take the full width of its container.
+	 */
+	isFluid?: boolean
 	/**
 	 * A Callback function to be invoked upon clicking.
 	 */
diff --git a/packages/ui/toggle/stories/ReactToggle.stories.tsx b/packages/ui/toggle/stories/ReactToggle.stories.tsx
index 498da645d..d01c31b42 100644
--- a/packages/ui/toggle/stories/ReactToggle.stories.tsx
+++ b/packages/ui/toggle/stories/ReactToggle.stories.tsx
@@ -41,6 +41,7 @@ Toggle.args = {
 		"Toggle description goes here. Lorem Ipsum is simply dummy text of the printing and typesetting industry it has been the industry's Standard.",
 	isLabelHidden: false,
 	isDisabled: false,
+	children: <p>This is additional content shown when toggle is ON.</p>,
 }
 
 // Set controls for story arguments.