@capillarytech/blaze-ui 5.0.9 → 5.0.11

package/CapNavigation/index.js

@@ -928,22 +928,13 @@ var ___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___ = __webpack_require__(31601);
 var ___CSS_LOADER_API_IMPORT___ = __webpack_require__(76314);
 var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___);
 // Module
-___CSS_LOADER_EXPORT___.push([module.id, `.cap-navbar a,.cap-navbar a:hover,.cap-navbar a:visited,.cap-navbar a:focus{text-decoration:none;color:#091e42}.cap-navbar-header{background-color:#fff;padding:0;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #e8e8e8;width:100%;position:fixed;z-index:100;height:4.571rem;box-shadow:none}.cap-navbar-new-header{background-color:rgba(0,0,0,0);padding:0;display:flex;justify-content:space-between;align-items:center;width:calc(100vw - 21.42rem);position:fixed;z-index:100;height:4rem;box-shadow:none;margin-left:20.57rem;background-color:#fff !important}.cap-navbar-drawer global .ant-drawer-header{border-bottom:1px solid #dfe2e7;height:4.571rem;padding:0}.cap-navbar-drawer global .ant-drawer-body{padding:0}.cap-navbar-drawer global .ant-list.cap-list-v2.ant-list-split .ant-list-item{border-bottom:0;padding-top:1.714rem;padding-bottom:0}.cap-navbar-drawer .cap-icon-v2-tick{padding-top:.285rem;margin-right:.857rem}.cap-navbar-menu .ant-dropdown-menu-item{line-height:1.428rem}.cap-navbar-divider{height:1.428rem;align-self:center}.top-bar-select-selection{width:240px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:0 0 0 .571rem;margin:.571rem 0;height:3.428rem;border:1px solid rgba(0,0,0,0)}.top-bar-select-selection.open{border-radius:.285rem;border:1px solid #b3bac5}.top-bar-select-selection.secondary-select{margin-left:0}.top-bar-select-selected-value{font-size:1.143rem;font-weight:500;display:flex;align-items:center;min-width:188px}.top-bar-select-overflow-ellipsis{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.top-bar-select-selected-value-label{max-width:150px}.top-bar-select-selected-ou-value-label{display:inline-flex;align-items:baseline;justify-content:space-between;width:150px}.cap-navbar-menu{flex-grow:.3}@media screen and (min-width: 1260px){.cap-navbar-menu{margin-right:60px}}.cap-navbar-menu-item.ant-menu-item{color:#5e6c84}.cap-navbar-menu-item.ant-menu-item-selected{font-weight:500}.cap-navbar-menu-item.ant-menu-item-selected,.cap-navbar-menu-item.ant-menu-item:hover{color:#091e42;border-bottom:2px solid #091e42}.cap-navbar-vertical{height:1.428rem;margin-right:15px}.user-profile{width:17.714rem;display:flex;flex-direction:column;align-items:center;margin-top:.6rem}.user-profile-name-wrapper{display:flex;justify-content:center;align-items:center;background-color:#9e1d71;width:2.857rem;height:2.857rem;border-radius:1.142rem}.user-profile-avatar{font-weight:500;font-size:1.143rem;color:#fff}.user-profile-name{margin:.8rem 0 .2rem;font-weight:500}.user-profile-loginName{font-size:.857rem;opacity:.8}.user-profile .ant-divider-horizontal{width:20.2rem;margin:1rem 0 .857rem}.lang-wrapper{display:flex;align-items:center}.lang-icon{margin-right:.4rem;opacity:.6}.logout-wrapper{display:flex;align-items:center;margin-bottom:.286rem}.logout-text{font-weight:500;margin-left:.4rem;cursor:pointer}.cap-navbar-topbarIcon{padding:.857rem;margin:0 2px}.cap-navbar-new-topbarIcon{padding:.571rem}.cap-navbar-topbarIcon:hover{background-color:#ebecf0;border-radius:1.714rem;cursor:pointer}.cap-navbar-user{cursor:pointer}@media screen and (min-width: 1260px){.cap-navbar-user{margin:0 1.714rem 0 3.142rem}}@media screen and (max-width: 1260px){.cap-navbar-user{margin:0 1.714rem 0 2.857rem}}.cap-navbar-new-user{cursor:pointer}@media screen and (min-width: 1260px){.cap-navbar-new-user.expanded{margin:0 0 0 3%}.cap-navbar-new-user.collapsed{margin:0 6% 0 3%}}@media screen and (max-width: 1260px){.cap-navbar-new-user{margin:0 4.571rem 0 2.857rem}}.top-bar-select-selected-icon{margin-right:.571rem}.cap-navbar-user,.cap-navbar-new-user,.top-bar-select-selected-icon{display:flex;align-items:center;justify-content:center;position:relative;height:2.285rem;width:2.285rem}.cap-navbar-user .text-label,.cap-navbar-new-user .text-label,.top-bar-select-selected-icon .text-label{position:absolute;right:47%;top:50%;transform:translate(50%, -50%);line-height:14px}.oval{width:2.285rem;height:2.285rem;background:#dfe2e7;border-radius:36%;display:flex}.oval .text-label{position:relative;right:47%;top:22%}.top-bar-select-header{padding:.571rem 1.142rem 1.428rem 1.142rem;font-size:1rem;font-weight:500}.top-bar-select-select-item,.top-bar-select-select-ou-org-item,.top-bar-select-select-ou-item{cursor:pointer}.top-bar-select-select-item:hover,.top-bar-select-select-ou-org-item:hover,.top-bar-select-select-ou-item:hover{background-color:#faf9f4}.top-bar-select-select-item.selected,.top-bar-select-select-ou-org-item.selected,.top-bar-select-select-ou-item.selected{color:#2466ea;font-weight:500;position:relative;background-color:rgba(36,102,234,.1)}.top-bar-select-select-item.selected:before,.top-bar-select-select-ou-org-item.selected:before,.top-bar-select-select-ou-item.selected:before{content:" ";width:2px;height:100%;left:0;top:0;position:absolute;background-color:#2466ea}.top-bar-select-select-item{padding:.571rem .571rem .571rem 1.714rem}.top-bar-select-select-ou-org-item{padding:.571rem .571rem .571rem .571rem}.top-bar-select-select-ou-item{padding:.571rem 1.142rem .571rem 2.857rem;display:flex;justify-content:space-between;align-items:baseline}.top-bar-select-no-results{display:flex;justify-content:center;flex-direction:column}.top-bar-select-no-results .top-bar-select-no-results-text{margin-top:8px;text-align:center;color:#97a0af;font-size:.857rem}.ant-popover.top-bar-select-popover,.ant-popover.cap-navbar-user-popover{padding-top:0;width:260px}.ant-popover.top-bar-select-popover .ant-popover-inner-content,.ant-popover.cap-navbar-user-popover .ant-popover-inner-content{padding-left:0;padding-right:0}.ant-popover.top-bar-select-popover .ant-popover-arrow,.ant-popover.cap-navbar-user-popover .ant-popover-arrow{display:none}.top-bar-select-search{padding:0 1.142rem 1.142rem 1.142rem}.top-bar-select-items-wrapper{max-height:200px}.top-bar-select-arrow{margin-right:.857rem}.cap-navbar-user-popover{width:260px}.cap-navbar-user-popover-item{cursor:pointer;display:flex;align-items:center;justify-content:space-between}.cap-navbar-person{z-index:0}.cap-navbar-flexDisplay{display:flex;flex-grow:1;align-items:center}.cap-navbar-more-app{height:1.714rem;width:1.614rem;margin:17px 10px 17px 21px}.cap-navbar-product-title{margin:1.428rem .857rem 1.428rem 1.714rem}.cap-navbar-new-dimensions{height:2.857rem;width:220px}.cap-navbar-new-dimensions .top-bar-select-selection{justify-content:unset;border:1px solid #b3bac5;border-radius:4px;margin:0;height:2.857rem}.cap-navbar-new-dimensions .top-bar-select-arrow{margin-left:.857rem;margin-right:unset}.cap-navbar-dimensions{width:17.143rem}.cap-navbar-heading{font-weight:500}.cap-navbar-capitalize{text-transform:capitalize}.cap-navbar-cursor-pointer{cursor:pointer}.breadcrumbs-topbar-expanded{font-weight:500 !important;color:#5e6c84 !important}.breadcrumbs-topbar-collapsed{font-weight:500 !important;color:#5e6c84 !important}.user-profile-icon{width:2.5rem;height:2.5rem;border-radius:.9375rem;background-color:#ebecf0;margin-right:.75rem}`, ""]);
+___CSS_LOADER_EXPORT___.push([module.id, `.cap-navbar a,.cap-navbar a:hover,.cap-navbar a:visited,.cap-navbar a:focus{text-decoration:none;color:#091e42}.cap-navbar-header{background-color:#fff;padding:0;display:flex;justify-content:center;align-items:center;border-bottom:1px solid #e8e8e8;width:100%;position:fixed;z-index:100;height:4.571rem;box-shadow:none}.cap-navbar-new-header{background-color:rgba(0,0,0,0);padding:0;display:flex;justify-content:space-between;align-items:center;width:calc(100vw - 21.42rem);position:fixed;z-index:100;height:4rem;box-shadow:none;margin-left:20.57rem;background-color:#fff !important}.cap-navbar-drawer .ant-list-items{margin-top:.857rem}.cap-navbar-drawer .ant-list-split .ant-list-item{--ant-line-width: 0}.cap-navbar-divider{height:1.428rem;align-self:center}.top-bar-select-selection{width:240px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:0 0 0 .571rem;margin:.571rem 0;height:3.428rem;border:1px solid rgba(0,0,0,0)}.top-bar-select-selection.open{border-radius:.285rem;border:1px solid #b3bac5}.top-bar-select-selection.secondary-select{margin-left:0}.top-bar-select-selected-value{font-size:1.143rem;font-weight:500;display:flex;align-items:center;min-width:188px}.top-bar-select-overflow-ellipsis{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.top-bar-select-selected-value-label{max-width:150px}.top-bar-select-selected-ou-value-label{display:inline-flex;align-items:baseline;justify-content:space-between;width:150px}.cap-navbar-menu{width:100%;display:flex;flex-direction:row;justify-content:end;margin-right:4.286rem}.cap-navbar-menu .ant-menu-item-selected{font-weight:500}.cap-navbar-menu .ant-dropdown-menu-vertical{display:flex;flex-direction:column}.cap-navbar-actions-menu{width:100%;display:flex;flex-direction:column}.cap-navbar-vertical{height:1.428rem;margin-right:15px}.user-profile{width:17.714rem;display:flex;flex-direction:column;align-items:center;margin-top:.6rem}.user-profile-name-wrapper{display:flex;justify-content:center;align-items:center;background-color:#9e1d71;width:2.857rem;height:2.857rem;border-radius:1.142rem}.user-profile-avatar{font-weight:500;font-size:1.143rem;color:#fff}.user-profile-name{margin:.8rem 0 .2rem;font-weight:500}.user-profile-loginName{font-size:.857rem;opacity:.8}.user-profile .ant-divider-horizontal{width:20.2rem;margin:1rem 0 .857rem}.lang-wrapper{display:flex;align-items:center}.lang-icon{margin-right:.4rem;opacity:.6}.logout-wrapper{display:flex;align-items:center;margin-bottom:.286rem}.logout-text{font-weight:500;margin-left:.4rem;cursor:pointer}.cap-navbar-topbarIcon{padding:1.714rem;margin:0 2px;color:#091e42;cursor:pointer}.cap-navbar-new-topbarIcon{padding:.571rem}.cap-navbar-topbarIcon:hover{background-color:#ebecf0;border-radius:1.714rem;cursor:pointer}.cap-navbar-user{margin:0 2.857rem 0 2.857rem;cursor:pointer}.cap-navbar-new-user{cursor:pointer}@media screen and (min-width: 1260px){.cap-navbar-new-user.expanded{margin:0 0 0 3%}.cap-navbar-new-user.collapsed{margin:0 6% 0 3%}}@media screen and (max-width: 1260px){.cap-navbar-new-user{margin:0 4.571rem 0 2.857rem}}.top-bar-select-selected-icon{margin-right:.571rem}.cap-navbar-user,.cap-navbar-new-user,.top-bar-select-selected-icon{display:flex;align-items:center;justify-content:center;position:relative;height:2.285rem;width:2.285rem}.cap-navbar-user .text-label,.cap-navbar-new-user .text-label,.top-bar-select-selected-icon .text-label{position:absolute;right:47%;top:50%;transform:translate(50%, -50%);line-height:14px}.oval{width:2.285rem;height:2.285rem;background:#dfe2e7;border-radius:36%;display:flex}.oval .text-label{position:relative;right:47%;top:22%}.top-bar-select-header{padding:.571rem 1.142rem 1.428rem 1.142rem;font-size:1rem;font-weight:500}.top-bar-select-select-item,.top-bar-select-select-ou-org-item,.top-bar-select-select-ou-item{cursor:pointer}.top-bar-select-select-item:hover,.top-bar-select-select-ou-org-item:hover,.top-bar-select-select-ou-item:hover{background-color:#faf9f4}.top-bar-select-select-item.selected,.top-bar-select-select-ou-org-item.selected,.top-bar-select-select-ou-item.selected{color:#2466ea;font-weight:500;position:relative;background-color:rgba(36,102,234,.1)}.top-bar-select-select-item.selected:before,.top-bar-select-select-ou-org-item.selected:before,.top-bar-select-select-ou-item.selected:before{content:" ";width:2px;height:100%;left:0;top:0;position:absolute;background-color:#2466ea}.top-bar-select-select-item{padding:.571rem .571rem .571rem 1.714rem}.top-bar-select-select-ou-org-item{padding:.571rem .571rem .571rem .571rem}.top-bar-select-select-ou-item{padding:.571rem 1.142rem .571rem 2.857rem;display:flex;justify-content:space-between;align-items:baseline}.top-bar-select-no-results{display:flex;justify-content:center;flex-direction:column}.top-bar-select-no-results .top-bar-select-no-results-text{margin-top:8px;text-align:center;color:#97a0af;font-size:.857rem}.ant-popover.top-bar-select-popover,.ant-popover.cap-navbar-user-popover{padding-top:0;width:260px}.ant-popover.top-bar-select-popover .ant-popover-inner-content,.ant-popover.cap-navbar-user-popover .ant-popover-inner-content{padding-left:0;padding-right:0}.ant-popover.top-bar-select-popover .ant-popover-arrow,.ant-popover.cap-navbar-user-popover .ant-popover-arrow{display:none}.top-bar-select-search{padding:0 1.142rem 1.142rem 1.142rem}.top-bar-select-items-wrapper{max-height:200px}.top-bar-select-arrow{margin-right:.857rem}.cap-navbar-user-popover{width:260px}.cap-navbar-user-popover-item{cursor:pointer;display:flex;align-items:center;justify-content:space-between}.cap-navbar-person{z-index:0}.cap-navbar-flexDisplay{display:flex;flex-grow:1;align-items:center}.cap-navbar-more-app{height:1.714rem;width:1.614rem;margin:17px 10px 17px 21px}.cap-navbar-product-title{margin:1.428rem .857rem 1.428rem 1.714rem}.cap-navbar-new-dimensions{height:2.857rem;width:220px}.cap-navbar-new-dimensions .top-bar-select-selection{justify-content:unset;border:1px solid #b3bac5;border-radius:4px;margin:0;height:2.857rem}.cap-navbar-new-dimensions .top-bar-select-arrow{margin-left:.857rem;margin-right:unset}.cap-navbar-dimensions{width:17.143rem}.cap-navbar-heading{font-weight:500}.cap-navbar-capitalize{text-transform:capitalize}.cap-navbar-tick-icon{margin-right:.857rem}.cap-navbar-cursor-pointer{cursor:pointer}.breadcrumbs-topbar-expanded{font-weight:500 !important;color:#5e6c84 !important}.breadcrumbs-topbar-collapsed{font-weight:500 !important;color:#5e6c84 !important}.user-profile-icon{width:2.5rem;height:2.5rem;border-radius:.9375rem;background-color:#ebecf0;margin-right:.75rem}.cap-navbar-left-navigation-wrapper{display:flex;flex-direction:row;align-items:center;justify-content:flex-start}.cap-navbar-left-navigation-wrapper .cap-unified-select-container .ant-select-prefix{display:inline;width:1.714rem;height:1.714rem;color:#091e42;fill:#dfe2e7;font-weight:500;line-height:4.571rem}.cap-navbar-left-navigation-wrapper .cap-unified-select-container .ant-select-content-value{display:flex;align-items:center;justify-content:start;flex-grow:1;margin:0 .857rem 0 .571rem;font-size:1rem;font-weight:500;color:#091e42}.cap-navbar-left-navigation-wrapper .cap-unified-select-container .ant-select-content-value>div{display:flex;align-items:center;justify-content:space-between;flex-grow:1}.cap-navbar-left-navigation-wrapper .cap-unified-select-container .ant-select-content-value>div>span:first-child{color:#091e42;font-size:1rem;font-weight:500}.cap-navbar-right-navigation-wrapper{width:100%;display:flex;flex-direction:row;align-items:center;justify-content:flex-end}`, ""]);
 // Exports
 ___CSS_LOADER_EXPORT___.locals = {
 	"cap-navbar": `cap-navbar`,
 	"cap-navbar-header": `cap-navbar-header`,
 	"cap-navbar-new-header": `cap-navbar-new-header`,
 	"cap-navbar-drawer": `cap-navbar-drawer`,
-	"ant-drawer-header": `ant-drawer-header`,
-	"ant-drawer-body": `ant-drawer-body`,
-	"ant-list": `ant-list`,
-	"cap-list-v2": `cap-list-v2`,
-	"ant-list-split": `ant-list-split`,
-	"ant-list-item": `ant-list-item`,
-	"cap-icon-v2-tick": `cap-icon-v2-tick`,
-	"cap-navbar-menu": `cap-navbar-menu`,
-	"ant-dropdown-menu-item": `ant-dropdown-menu-item`,
 	"cap-navbar-divider": `cap-navbar-divider`,
 	"top-bar-select-selection": `top-bar-select-selection`,
 	"open": `open`,
@@ -952,9 +943,8 @@ ___CSS_LOADER_EXPORT___.locals = {
 	"top-bar-select-overflow-ellipsis": `top-bar-select-overflow-ellipsis`,
 	"top-bar-select-selected-value-label": `top-bar-select-selected-value-label`,
 	"top-bar-select-selected-ou-value-label": `top-bar-select-selected-ou-value-label`,
-	"cap-navbar-menu-item": `cap-navbar-menu-item`,
-	"ant-menu-item": `ant-menu-item`,
-	"ant-menu-item-selected": `ant-menu-item-selected`,
+	"cap-navbar-menu": `cap-navbar-menu`,
+	"cap-navbar-actions-menu": `cap-navbar-actions-menu`,
 	"cap-navbar-vertical": `cap-navbar-vertical`,
 	"user-profile": `user-profile`,
 	"user-profile-name-wrapper": `user-profile-name-wrapper`,
@@ -999,10 +989,14 @@ ___CSS_LOADER_EXPORT___.locals = {
 	"cap-navbar-dimensions": `cap-navbar-dimensions`,
 	"cap-navbar-heading": `cap-navbar-heading`,
 	"cap-navbar-capitalize": `cap-navbar-capitalize`,
+	"cap-navbar-tick-icon": `cap-navbar-tick-icon`,
 	"cap-navbar-cursor-pointer": `cap-navbar-cursor-pointer`,
 	"breadcrumbs-topbar-expanded": `breadcrumbs-topbar-expanded`,
 	"breadcrumbs-topbar-collapsed": `breadcrumbs-topbar-collapsed`,
-	"user-profile-icon": `user-profile-icon`
+	"user-profile-icon": `user-profile-icon`,
+	"cap-navbar-left-navigation-wrapper": `cap-navbar-left-navigation-wrapper`,
+	"cap-unified-select-container": `cap-unified-select-container`,
+	"cap-navbar-right-navigation-wrapper": `cap-navbar-right-navigation-wrapper`
 };
 module.exports = ___CSS_LOADER_EXPORT___;
 
@@ -1900,10 +1894,11 @@ module.exports = __webpack_require__.p + "CapCollapsibleLeftNavigation/assets/ch
 exports.__esModule = true;
 exports.transformOrgOuToTreeOptions = exports.isSelectDisabled = exports.handleSelectChange = exports.getSelectedValue = exports.getSelectType = exports.findParentOrgValue = exports.extractLabelText = exports.createPrefix = void 0;
 var _react = _interopRequireDefault(__webpack_require__(9206));
-var _CapIcon = _interopRequireDefault(__webpack_require__(65124));
-var _CapRow = _interopRequireDefault(__webpack_require__(69813));
 var _icons = __webpack_require__(30775);
 var _capillary_logo = _interopRequireDefault(__webpack_require__(69038));
+var _CapImage = _interopRequireDefault(__webpack_require__(84446));
+var _CapLabel = _interopRequireDefault(__webpack_require__(92675));
+var _CapRow = _interopRequireDefault(__webpack_require__(69813));
 var styledVars = _interopRequireWildcard(__webpack_require__(56587));
 var _jsxRuntime = __webpack_require__(74848);
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
@@ -1919,36 +1914,56 @@ const transformOrgOuToTreeOptions = function (items) {
   return items.map(org => {
     var _org$accessibleOus;
     const hasOus = org.accessibleOus && org.accessibleOus.length > 0;
+    const parentOrgSubLabel = org.parentOrgSubLabel;
 
-    // For organizations with OUs, add sitemap icon to label
-    const orgLabel = hasOus ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_CapRow.default, {
-      align: "middle",
-      style: {
-        display: 'flex',
-        alignItems: 'center'
-      },
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_CapIcon.default, {
-        type: "sitemap",
-        size: "s",
-        style: {
-          marginRight: styledVars.CAP_SPACE_04
-        }
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-        children: org.label
-      })]
-    }) : org.label;
+    // Helper to create label with right-aligned sub-label for selected value display
+    const createLabelWithSubLabel = (mainLabel, subLabel) => {
+      if (!subLabel) return mainLabel;
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_CapRow.default, {
+        align: "middle",
+        justify: "space-between",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_CapLabel.default.CapLabelInline, {
+          children: mainLabel
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_CapLabel.default.CapLabelInline, {
+          children: subLabel
+        })]
+      });
+    };
+
+    // For parent organizations:
+    // - Label should be just text (no icon, no sub-label) for selected state
+    // - Icon will be added in dropdown items via enhanceOptions
+    // - No sub-label for parent orgs (only for children/OUs)
+    const orgLabel = org.label || '';
     return {
       value: org.value,
       label: orgLabel,
+      // Just text for parent orgs - no icon, no sub-label
       // Store original label as string for prefix extraction
       originalLabel: org.label,
+      // Store parent org sub label for OU display only (not for parent orgs themselves)
+      parentOrgSubLabel,
+      // Store flag to indicate this is a parent org with OUs (for icon in dropdown)
+      hasOus,
+      // No optionSuffix for parent orgs - sub-label only for children
+      optionSuffix: undefined,
+      // Explicitly no sub-label for parent orgs
       key: org.key,
       children: (_org$accessibleOus = org.accessibleOus) == null ? void 0 : _org$accessibleOus.map(ou => ({
         value: ou.value,
-        label: ou.label,
+        // Label with sub-label for selected state (TreeSelect uses label prop for selected value)
+        // For dropdown, enhanceOptions will extract plain text when optionSuffix exists
+        label: parentOrgSubLabel ? createLabelWithSubLabel(ou.label || '', parentOrgSubLabel) : ou.label || '',
         key: ou.key,
         // Store parent org label for OU display
-        parentOrgLabel: org.label
+        parentOrgLabel: org.label,
+        // Store parent org sub label for OU display
+        parentOrgSubLabel,
+        // Use optionSuffix for right-aligned sub-label in dropdown items
+        // enhanceOptions will extract plain text from label when optionSuffix exists to avoid duplication
+        optionSuffix: parentOrgSubLabel ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_CapLabel.default.CapLabelInline, {
+          children: parentOrgSubLabel
+        }) : undefined
       }))
     };
   });
@@ -1978,20 +1993,56 @@ const extractLabelText = node => {
     return String(node.originalLabel);
   }
   if (node.label && typeof node.label === 'object' && 'props' in node.label) {
-    var _props;
-    // Try to extract text from React element (for org labels with icons)
-    const children = (_props = node.label.props) == null ? void 0 : _props.children;
+    var _element$props;
+    // Try to extract text from React element (for org labels with icons and sub-labels)
+    const element = node.label;
+    const children = (_element$props = element.props) == null ? void 0 : _element$props.children;
+
+    // Helper to extract text from nested React elements
+    const extractTextFromElement = child => {
+      if (typeof child === 'string') {
+        return child;
+      }
+      if (child && typeof child === 'object' && 'props' in child) {
+        const childProps = child.props;
+        // If it's a span with children array, get the first text child (main label)
+        // This handles the case: <span><span>{mainLabel}</span><span>{subLabel}</span></span>
+        if (Array.isArray(childProps == null ? void 0 : childProps.children)) {
+          // First try to find a direct string child
+          const firstTextChild = childProps.children.find(c => typeof c === 'string');
+          if (firstTextChild) return firstTextChild;
+          // Otherwise, recursively extract from the first element (which should be the main label span)
+          if (childProps.children.length > 0) {
+            const extracted = extractTextFromElement(childProps.children[0]);
+            if (extracted) return extracted;
+          }
+        }
+        // Recursively try to extract from nested children (single child case)
+        if (childProps != null && childProps.children && !Array.isArray(childProps.children)) {
+          return extractTextFromElement(childProps.children);
+        }
+      }
+      return '';
+    };
     if (Array.isArray(children)) {
-      var _textChild$props;
-      const textChild = children.find(child => {
+      // For CapRow with icon and label, find the label element
+      const labelElement = children.find(child => {
         var _child$props;
-        return typeof child === 'string' || typeof child === 'object' && (child == null || (_child$props = child.props) == null ? void 0 : _child$props.children);
+        return typeof child === 'string' || typeof child === 'object' && child && 'props' in child && ((_child$props = child.props) == null ? void 0 : _child$props.children);
       });
-      return typeof textChild === 'string' ? textChild : String((textChild == null || (_textChild$props = textChild.props) == null ? void 0 : _textChild$props.children) || '');
+      if (labelElement) {
+        const extracted = extractTextFromElement(labelElement);
+        if (extracted) return extracted;
+      }
     }
     if (typeof children === 'string') {
       return children;
     }
+    // Try extracting from children directly
+    if (children) {
+      const extracted = extractTextFromElement(children);
+      if (extracted) return extracted;
+    }
   }
   return '';
 };
@@ -2005,37 +2056,35 @@ const createPrefix = (value, treeMaps, showCapillaryIcon) => {
   const node = treeMaps.nodeMap[value];
   const labelText = extractLabelText(node);
   if (showCapillaryIcon) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CapImage.default, {
       src: _capillary_logo.default,
-      alt: "",
-      style: {
-        marginRight: 8,
-        width: 24,
-        height: 24
-      }
+      alt: ""
     });
   }
   if (labelText) {
     var _labelText$;
     const firstLetter = ((_labelText$ = labelText[0]) == null ? void 0 : _labelText$.toUpperCase()) || '';
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_CapRow.default, {
+      align: "middle",
       style: {
-        display: 'flex',
-        alignItems: 'center',
-        marginRight: 8,
-        position: 'relative'
+        position: 'relative',
+        width: styledVars.CAP_SPACE_24,
+        height: styledVars.CAP_SPACE_24
       },
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.LogoBackground, {
         width: 24,
         height: 24
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_CapLabel.default, {
+        type: "label14",
         style: {
           position: 'absolute',
           left: '50%',
           top: '50%',
           transform: 'translate(-50%, -50%)',
-          lineHeight: '14px',
-          fontSize: '14px'
+          lineHeight: styledVars.CAP_SPACE_24,
+          fontWeight: styledVars.FONT_WEIGHT_MEDIUM,
+          fontSize: styledVars.FONT_SIZE_M,
+          color: styledVars.CAP_G01
         },
         children: firstLetter
       })]
@@ -2651,7 +2700,7 @@ var _messages = _interopRequireDefault(__webpack_require__(13581));
 var _styles = _interopRequireDefault(__webpack_require__(18263));
 var _useCapUnifiedSelect = __webpack_require__(480);
 var _jsxRuntime = __webpack_require__(74848);
-const _excluded = ["intl", "type", "options", "value", "onChange", "placeholder", "className", "style", "isError", "errorMessage", "containerClassName", "popoverClassName", "allowClear", "headerLabel", "onUpload", "uploadLabel", "tooltip", "bylineText", "disabled", "showUpload", "customPopupRender", "showSearch", "searchBasedOn", "onSearch", "searchDebounce", "onConfirm", "clearText", "noResultCustomText", "noResultCustomIcon", "readOnly", "staticValue", "onFooterDownloadChange", "onPopupScroll", "hasMore", "enableVirtualization", "virtualRowHeight", "resetSearch", "resetData", "fetchMissingOptions", "fetchDynamicValueStatus"];
+const _excluded = ["intl", "type", "options", "value", "onChange", "placeholder", "className", "style", "isError", "errorMessage", "containerClassName", "popoverClassName", "allowClear", "headerLabel", "onUpload", "uploadLabel", "tooltip", "bylineText", "disabled", "showUpload", "customPopupRender", "showSearch", "searchBasedOn", "onSearch", "searchDebounce", "onConfirm", "clearText", "noResultCustomText", "noResultCustomIcon", "readOnly", "staticValue", "onFooterDownloadChange", "onPopupScroll", "hasMore", "enableVirtualization", "virtualRowHeight", "listHeight", "resetSearch", "resetData", "fetchMissingOptions", "fetchDynamicValueStatus", "customOptionRenderer"];
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
@@ -2696,10 +2745,12 @@ const CapUnifiedSelect = _ref => {
       hasMore = true,
       enableVirtualization = false,
       virtualRowHeight = _constants.DEFAULTS.VIRTUAL_ROW_HEIGHT,
+      listHeight = _constants.DEFAULTS.LIST_HEIGHT,
       resetSearch = true,
       resetData,
       fetchMissingOptions,
-      fetchDynamicValueStatus
+      fetchDynamicValueStatus,
+      customOptionRenderer
     } = _ref,
     rest = _objectWithoutPropertiesLoose(_ref, _excluded);
   const isMulti = (0, _react.useMemo)(() => type === _constants.SELECT_TYPES.MULTI_SELECT || type === _constants.SELECT_TYPES.MULTI_TREE_SELECT, [type]);
@@ -2745,8 +2796,8 @@ const CapUnifiedSelect = _ref => {
   // Enhance filtered tree with React components
   const filteredTree = (0, _react.useMemo)(() => {
     if (!(rawFilteredTree != null && rawFilteredTree.length)) return [];
-    return (0, _enhanceOptions.enhanceOptionsWithComponents)(rawFilteredTree, type);
-  }, [rawFilteredTree, type]);
+    return (0, _enhanceOptions.enhanceOptionsWithComponents)(rawFilteredTree, type, customOptionRenderer);
+  }, [rawFilteredTree, type, customOptionRenderer]);
 
   // Render tooltip content for multi-select
   const renderDisabledTooltipContent = (0, _react.useMemo)(() => {
@@ -2912,7 +2963,7 @@ const CapUnifiedSelect = _ref => {
         className: _styles.default['cap-unified-select-tree-select-container'],
         type: "flex",
         align: "middle",
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_treeSelect.default, _extends({
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_treeSelect.default, _extends({}, rest, {
           treeData: filteredTree,
           value: customPopupRender ? tempValue : value,
           treeNodeLabelProp: "label",
@@ -2938,13 +2989,12 @@ const CapUnifiedSelect = _ref => {
           open: dropdownOpen,
           onOpenChange: handleDropdownVisibilityChange,
           virtual: !enableVirtualization,
-          popupMatchSelectWidth: false,
+          popupMatchSelectWidth: !enableVirtualization,
           disabled: disabled || readOnly,
           filterTreeNode: false,
-          listHeight: _constants.DEFAULTS.LIST_HEIGHT,
+          listHeight: listHeight,
           listItemHeight: virtualRowHeight,
-          popupRender: renderCustomDropdown
-        }, rest, {
+          popupRender: renderCustomDropdown,
           suffixIcon: null
         })), suffix]
       }), isError && /*#__PURE__*/(0, _jsxRuntime.jsx)(_CapLabel.default, {
@@ -16747,14 +16797,21 @@ var _default = exports["default"] = Empty;
 
 exports.__esModule = true;
 exports["default"] = exports.CapOrgSelect = void 0;
+var _classnames = _interopRequireDefault(__webpack_require__(46942));
 var _react = _interopRequireWildcard(__webpack_require__(9206));
+var _CapIcon = _interopRequireDefault(__webpack_require__(65124));
+var _CapLabel = _interopRequireDefault(__webpack_require__(92675));
+var _CapRow = _interopRequireDefault(__webpack_require__(69813));
+var _CapTooltipWithInfo = _interopRequireDefault(__webpack_require__(74584));
 var _CapUnifiedSelect = _interopRequireDefault(__webpack_require__(3535));
 var _constants = __webpack_require__(99788);
+var _styles = _interopRequireDefault(__webpack_require__(18263));
 var _utils = __webpack_require__(8052);
+var styledVars = _interopRequireWildcard(__webpack_require__(56587));
 var _CapOrgSelectUtils = __webpack_require__(2834);
 var _jsxRuntime = __webpack_require__(74848);
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /**
  * Wrapper component that maintains backward compatibility with the old Select API
  * while using CapUnifiedSelect internally.
@@ -16804,8 +16861,60 @@ const CapOrgSelect = _ref => {
     const type = (0, _CapOrgSelectUtils.getSelectType)(items);
     return type === 'treeSelect' ? _constants.SELECT_TYPES.TREE_SELECT : _constants.SELECT_TYPES.SELECT;
   }, [items]);
+
+  // Custom option renderer that adds sitemap icon for organizations with OUs
+  const customOptionRenderer = (0, _react.useMemo)(() => (opt, defaultTitle, context) => {
+    // Check if this is a parent org with OUs (for adding sitemap icon in dropdown)
+    const hasOus = opt.hasOus === true;
+    if (!hasOus) {
+      return defaultTitle;
+    }
+
+    // Build custom title with sitemap icon, using the same structure as defaultTitle
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_CapRow.default, {
+      className: _styles.default['cap-unified-select-option-with-suffix'],
+      justify: "space-between",
+      align: "middle",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: _styles.default['cap-unified-select-option-label'],
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_CapRow.default, {
+          align: "middle",
+          style: {
+            display: 'flex',
+            alignItems: 'center',
+            flexWrap: 'nowrap'
+          },
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_CapIcon.default, {
+            type: "sitemap",
+            size: "s",
+            style: {
+              marginRight: styledVars.CAP_SPACE_04
+            }
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_CapLabel.default, {
+            type: "label14",
+            className: (0, _classnames.default)(_styles.default['truncate-text'], {
+              [_styles.default['option-disabled']]: context.isDisabled,
+              [_styles.default['option-enabled']]: !context.isDisabled
+            }),
+            title: context.tooltipTitle,
+            children: context.displayText
+          })]
+        })
+      }), ((opt == null ? void 0 : opt.optionSuffix) || (opt == null ? void 0 : opt.optionTooltipInfo)) && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: _styles.default['cap-unified-select-option-end'],
+        children: [(opt == null ? void 0 : opt.optionSuffix) && /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+          className: _styles.default['cap-unified-select-option-suffix'],
+          children: [opt == null ? void 0 : opt.optionSuffix, (opt == null ? void 0 : opt.optionSuffixInfo) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_CapTooltipWithInfo.default, {
+            title: opt == null ? void 0 : opt.optionSuffixInfo
+          })]
+        }), (opt == null ? void 0 : opt.optionTooltipInfo) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_CapTooltipWithInfo.default, {
+          title: opt == null ? void 0 : opt.optionTooltipInfo
+        })]
+      })]
+    });
+  }, []);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CapUnifiedSelect.default, {
-    size: 'middle',
+    size: "large",
     type: selectType,
     options: options,
     value: value,
@@ -16821,13 +16930,14 @@ const CapOrgSelect = _ref => {
     },
     listHeight: 200,
     virtualRowHeight: 40,
-    enableVirtualization: false // Virtualization is ENABLED (false → virtual={true} due to prop inversion in CapUnifiedSelect)
+    enableVirtualization: false // false enables virtualization (inverted prop: virtual={!enableVirtualization})
     ,
     staticValue: true // Client-side search
     ,
     searchBasedOn: "label",
     resetSearch: true,
-    prefix: prefix
+    prefix: prefix,
+    customOptionRenderer: customOptionRenderer
   });
 };
 exports.CapOrgSelect = CapOrgSelect;
@@ -29061,11 +29171,11 @@ var _CapPopover = _interopRequireDefault(__webpack_require__(33018));
 var _CapRow = _interopRequireDefault(__webpack_require__(69813));
 var _CapTooltip = _interopRequireDefault(__webpack_require__(85684));
 var styledVars = _interopRequireWildcard(__webpack_require__(56587));
-var _constants = __webpack_require__(77608);
 var _CapOrgSelect = _interopRequireDefault(__webpack_require__(21505));
+var _constants = __webpack_require__(77608);
 var _styles = _interopRequireDefault(__webpack_require__(49789));
-var _utils = __webpack_require__(74032);
 var _themeConfig = __webpack_require__(69490);
+var _utils = __webpack_require__(74032);
 var _jsxRuntime = __webpack_require__(74848);
 const _excluded = ["onMenuItemClick", "items"],
   _excluded2 = ["iconType", "onClickHandler", "className", "toolTip", "placement", "content"],
@@ -29110,8 +29220,8 @@ const CapTopBar = _ref => {
     isLatestLeftNavigationEnabled = false,
     leftNavbarExpanded = false,
     headerOverideCss = {},
-    request,
-    getAPICallObject,
+    request: _request,
+    getAPICallObject: _getAPICallObject,
     userData,
     children
   } = _ref;
@@ -29139,6 +29249,7 @@ const CapTopBar = _ref => {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CapMenu.default, _extends({
         className: _styles.default[clsPrefix + "-menu"],
         mode: "horizontal",
+        items: items,
         style: {
           lineHeight: styledVars.CAP_SPACE_64
         }
@@ -29168,7 +29279,7 @@ const CapTopBar = _ref => {
         placement: placement || 'bottom',
         children: iconType === 'custom' ? content : /*#__PURE__*/(0, _jsxRuntime.jsx)(_CapIcon.default, _extends({
           onClick: onClickHandler ? () => onClickHandler() : undefined,
-          className: (0, _classnames.default)(_styles.default["" + clsPrefix + (isLatestLeftNavigationEnabled ? '-new' : '') + "-topbarIcon"] || '', className),
+          className: (0, _classnames.default)(isLatestLeftNavigationEnabled ? _styles.default[clsPrefix + "-new-topbarIcon"] : _styles.default[clsPrefix + "-topbarIcon"], className),
           type: iconType
         }, rest))
       }, index);
@@ -29260,7 +29371,7 @@ const CapTopBar = _ref => {
       trigger: ['click'],
       onOpenChange: expandUserBackground,
       overlay: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CapMenu.default, {
-        className: _styles.default[clsPrefix + "-menu"],
+        className: _styles.default[clsPrefix + "-actions-menu"],
         children: dropdownMenuProps.map(dropdownMenuProp => /*#__PURE__*/(0, _jsxRuntime.jsx)(_CapMenu.default.Item, {
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
             onClick: dropdownMenuProp.onClickHandler ? () => dropdownMenuProp.onClickHandler == null ? void 0 : dropdownMenuProp.onClickHandler() : undefined,
@@ -29270,8 +29381,9 @@ const CapTopBar = _ref => {
             })
           })
         }, dropdownMenuProp.key))
-      }),
-      placement: "bottomLeft",
+      })
+      //placement="bottomLeft"
+      ,
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: (0, _classnames.default)(_styles.default["" + clsPrefix + (isLatestLeftNavigationEnabled ? '-new' : '') + "-user"], visible && _styles.default['oval'], leftNavbarExpanded ? 'expanded' : 'collapsed'),
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.LogoBackground, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
@@ -29326,7 +29438,8 @@ const CapTopBar = _ref => {
             "data-testid": "tick-icon",
             svgProps: {
               fill: styledVars.CAP_BLUE01
-            }
+            },
+            className: _styles.default[clsPrefix + "-tick-icon"]
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_CapHeading.default, {
             type: "h3",
             className: (0, _classnames.default)({
@@ -29437,11 +29550,14 @@ const CapTopBar = _ref => {
       style: _extends({}, headerOverideCss),
       className: (0, _classnames.default)(isLatestLeftNavigationEnabled ? _styles.default[clsPrefix + "-new-header"] : _styles.default[clsPrefix + "-header"]),
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: _styles.default[clsPrefix + "-flexDisplay"],
+        className: _styles.default[clsPrefix + "-left-navigation-wrapper"],
         children: [isLatestLeftNavigationEnabled && breadcrumbs && renderBreadcrumbs(), !isLatestLeftNavigationEnabled && drawerListProps && renderDrawerList(), !isLatestLeftNavigationEnabled && selectProps && renderOrgsSelect()]
-      }), menuProps && renderTopMenu(), topbarIcons && renderTopbarIcons(), isLatestLeftNavigationEnabled && selectProps && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-        children: [renderDividerBeforeOrgSelect(topbarIcons, showDocumentationBot), renderOrgsSelect()]
-      }), dropdownMenuProps && renderDropdownMenu(), children]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: _styles.default[clsPrefix + "-right-navigation-wrapper"],
+        children: [menuProps && renderTopMenu(), topbarIcons && renderTopbarIcons(), isLatestLeftNavigationEnabled && selectProps && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+          children: [renderDividerBeforeOrgSelect(topbarIcons, showDocumentationBot), renderOrgsSelect()]
+        }), dropdownMenuProps && renderDropdownMenu()]
+      }), children]
     })
   });
 };
@@ -51711,8 +51827,7 @@ const menuTheme = exports.menuTheme = {
       horizontalItemSelectedBg: 'transparent',
       horizontalItemHoverColor: styledVars.CAP_G01,
       horizontalItemHoverBg: 'transparent',
-      activeBarHeight: 2,
-      activeBarBorderWidth: 2
+      activeBarHeight: 2
     }
   }
 };
@@ -56761,7 +56876,7 @@ var _antdV = __webpack_require__(64273);
 var _react = _interopRequireDefault(__webpack_require__(9206));
 var _logDeprecationWarning = _interopRequireDefault(__webpack_require__(19224));
 var _jsxRuntime = __webpack_require__(74848);
-const _excluded = ["content", "size", "width", "open", "visible", "onOpenChange", "onVisibleChange"];
+const _excluded = ["content", "size", "width", "open", "visible", "onOpenChange", "onVisibleChange", "className"];
 /**
  *
  * CapDrawer
@@ -56778,7 +56893,8 @@ const CapDrawer = _ref => {
       open,
       visible,
       onOpenChange,
-      onVisibleChange
+      onVisibleChange,
+      className
     } = _ref,
     rest = _objectWithoutPropertiesLoose(_ref, _excluded);
   (0, _logDeprecationWarning.default)('CapDrawer', 'visible', visible, 'open');
@@ -56797,6 +56913,7 @@ const CapDrawer = _ref => {
   // Ant Design v5 Drawer types expect onVisibleChange, but runtime (v6) supports both
   // Use onVisibleChange to satisfy TypeScript types
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antdV.Drawer, _extends({
+    className: className,
     width: widthMapping,
     open: finalOpen
   }, finalOnOpenChange && {
@@ -58230,19 +58347,51 @@ var _constants = __webpack_require__(99788);
 var _styles = _interopRequireDefault(__webpack_require__(18263));
 var _jsxRuntime = __webpack_require__(74848);
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); } /**
+ * Custom option renderer function type
+ * Allows customization of how option titles are rendered
+ */
 /**
  * Enhances options with React components for rendering
  * Adds decorated titles with suffixes and tooltips
  */
-const enhanceOptionsWithComponents = (options, type) => {
+const enhanceOptionsWithComponents = (options, type, customOptionRenderer) => {
   if (!(options != null && options.length)) return [];
   const isTree = type === _constants.SELECT_TYPES.TREE_SELECT || type === _constants.SELECT_TYPES.MULTI_TREE_SELECT;
+
+  // Helper to extract plain text from label (handles React elements with sub-labels)
+  const extractPlainText = label => {
+    if (typeof label === 'string' || typeof label === 'number') {
+      return label;
+    }
+    if (label && typeof label === 'object' && 'props' in label) {
+      var _element$props;
+      const element = label;
+      // If it's a span with flex layout (contains sub-label), extract just the main text
+      if ((_element$props = element.props) != null && _element$props.children && Array.isArray(element.props.children)) {
+        const firstChild = element.props.children[0];
+        if (firstChild && typeof firstChild === 'object' && 'props' in firstChild) {
+          var _props;
+          // Get text from first child span
+          const textChild = (_props = firstChild.props) == null ? void 0 : _props.children;
+          return typeof textChild === 'string' ? textChild : textChild;
+        }
+        // If first child is string, return it
+        if (typeof firstChild === 'string') {
+          return firstChild;
+        }
+      }
+    }
+    return label;
+  };
   const enhanceOptions = opts => opts.map(opt => {
-    const displayText = (opt == null ? void 0 : opt.label) || (opt == null ? void 0 : opt.value);
+    // Extract plain text from label if it's a React element (to avoid duplication with optionSuffix)
+    // If label is a React element with sub-label, use plain text for dropdown display
+    // The optionSuffix will add the sub-label separately
+    const displayText = opt != null && opt.optionSuffix ? extractPlainText(opt == null ? void 0 : opt.label) || (opt == null ? void 0 : opt.value) : (opt == null ? void 0 : opt.label) || (opt == null ? void 0 : opt.value);
     const tooltipTitle = opt == null ? void 0 : opt.hoverText;
     const isDisabled = (opt == null ? void 0 : opt.disabled) === true;
-    const decoratedTitle = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_CapRow.default, {
+    const defaultTitle = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_CapRow.default, {
       className: _styles.default['cap-unified-select-option-with-suffix'],
       justify: "space-between",
       align: "middle",
@@ -58269,6 +58418,13 @@ const enhanceOptionsWithComponents = (options, type) => {
         })]
       })]
     });
+
+    // Use custom renderer if provided, otherwise use default
+    const decoratedTitle = customOptionRenderer ? customOptionRenderer(opt, defaultTitle, {
+      displayText,
+      tooltipTitle,
+      isDisabled
+    }) : defaultTitle;
     return _extends({}, opt, {
       title: decoratedTitle,
       label: opt == null ? void 0 : opt.label,
@@ -58282,34 +58438,42 @@ const enhanceOptionsWithComponents = (options, type) => {
     const displayText = (opt == null ? void 0 : opt.label) || (opt == null ? void 0 : opt.value);
     const tooltipTitle = opt == null ? void 0 : opt.hoverText;
     const isDisabled = (opt == null ? void 0 : opt.disabled) === true;
-    return _extends({}, opt, {
-      title: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_CapRow.default, {
-        className: _styles.default['cap-unified-select-option-with-suffix'],
-        justify: "space-between",
-        align: "middle",
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: _styles.default['cap-unified-select-option-label'],
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CapLabel.default, {
-            type: "label14",
-            className: (0, _classnames.default)(_styles.default['truncate-text'], {
-              [_styles.default['option-disabled']]: isDisabled,
-              [_styles.default['option-enabled']]: !isDisabled
-            }),
-            title: tooltipTitle,
-            children: displayText
-          })
-        }), ((opt == null ? void 0 : opt.optionSuffix) || (opt == null ? void 0 : opt.optionTooltipInfo)) && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-          className: _styles.default['cap-unified-select-option-end'],
-          children: [(opt == null ? void 0 : opt.optionSuffix) && /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
-            className: _styles.default['cap-unified-select-option-suffix'],
-            children: [opt == null ? void 0 : opt.optionSuffix, (opt == null ? void 0 : opt.optionSuffixInfo) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_CapTooltipWithInfo.default, {
-              title: opt == null ? void 0 : opt.optionSuffixInfo
-            })]
-          }), (opt == null ? void 0 : opt.optionTooltipInfo) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_CapTooltipWithInfo.default, {
-            title: opt == null ? void 0 : opt.optionTooltipInfo
+    const defaultTitle = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_CapRow.default, {
+      className: _styles.default['cap-unified-select-option-with-suffix'],
+      justify: "space-between",
+      align: "middle",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: _styles.default['cap-unified-select-option-label'],
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CapLabel.default, {
+          type: "label14",
+          className: (0, _classnames.default)(_styles.default['truncate-text'], {
+            [_styles.default['option-disabled']]: isDisabled,
+            [_styles.default['option-enabled']]: !isDisabled
+          }),
+          title: tooltipTitle,
+          children: displayText
+        })
+      }), ((opt == null ? void 0 : opt.optionSuffix) || (opt == null ? void 0 : opt.optionTooltipInfo)) && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: _styles.default['cap-unified-select-option-end'],
+        children: [(opt == null ? void 0 : opt.optionSuffix) && /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+          className: _styles.default['cap-unified-select-option-suffix'],
+          children: [opt == null ? void 0 : opt.optionSuffix, (opt == null ? void 0 : opt.optionSuffixInfo) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_CapTooltipWithInfo.default, {
+            title: opt == null ? void 0 : opt.optionSuffixInfo
           })]
+        }), (opt == null ? void 0 : opt.optionTooltipInfo) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_CapTooltipWithInfo.default, {
+          title: opt == null ? void 0 : opt.optionTooltipInfo
         })]
-      }),
+      })]
+    });
+
+    // Use custom renderer if provided, otherwise use default
+    const decoratedTitle = customOptionRenderer ? customOptionRenderer(opt, defaultTitle, {
+      displayText,
+      tooltipTitle,
+      isDisabled
+    }) : defaultTitle;
+    return _extends({}, opt, {
+      title: decoratedTitle,
       label: opt == null ? void 0 : opt.label
     });
   });