@actabldesign/bellhop-core 0.0.8 → 0.0.12

package/dist/cjs/bh-page-navigation-multi-level_2.cjs.entry.js

@@ -90,11 +90,11 @@ const BhPageNavigationMultiLevel = class {
         };
     }
     render() {
-        return (index.h(index.Host, { key: 'db478fe5c9492c19a41acf68577cb78a00ebdc4f' }, index.h("div", { key: 'a968be18bbdac5bc39d45cf59b544e5384f7cdfc', class: this.getItemClasses() }, index.h("div", { key: 'da3f4a3b6246f50b27d2657080488135b85719be', class: "page-navigation-multi-level-parent", onClick: this.handleParentClick, onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false) }, index.h("div", { key: '64933e8c68ae1238581e4c81f3cae937e3199b1f', class: "page-navigation-item-content" }, !this.isHovered && (index.h("span", { key: 'd8369d06118533f5cdb2e228bc72cc0aafc71b79', class: "page-navigation-item-icon material-symbols-outlined" }, this.icon)), this.isHovered && (index.h("span", { key: '852f49d37fa5d47d656aad732c46f23a4438be95', class: {
+        return (index.h(index.Host, { key: 'a87bd5e1926673b22bbac28ae94f0694269f3f07' }, index.h("div", { key: '8feec4d248ee32f4d2085e728990db1f9f2d14b2', class: this.getItemClasses() }, index.h("div", { key: 'aeaeae5646262b697dc151ee4996930db392234a', class: "page-navigation-multi-level-parent", onClick: this.handleParentClick, onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false) }, index.h("div", { key: '72c0fb3fe1f681c484a0a5e17551d09dd068f03a', class: "page-navigation-item-content" }, !this.isHovered && (index.h("span", { key: '622878b142a39d2b5b8fa69865b55ecce0b85f47', class: "page-navigation-item-icon material-symbols-outlined" }, this.icon)), this.isHovered && (index.h("span", { key: '4844c5fe0c69a225804ecebdef091887237d4667', class: {
                 'page-navigation-chevron-icon': true,
                 'material-symbols-outlined': true,
                 'expanded': this.isExpanded,
-            } }, "expand_more")), index.h("span", { key: '5737917e070122fe1b74ff693ed7afceb262ca1d', class: "page-navigation-item-label" }, this.label), index.h("bh-button", { key: 'b3e29f3b6e7b64daa42a6a9a541cf0278b7dc6b5', hierarchy: "tertiary", icon: "only", size: "xs", iconName: "add", onClick: this.handleAddClick }))), (this.isExpanded || this.isAnimating) && (index.h("div", { key: 'e9f386ef6ca8757d6aad84d4e90c776e9ee82be8', class: `page-navigation-children ${this.animationClass}` }, this.childItems.map((child, index$1) => (index.h("bh-page-navigation-child", { key: index$1, label: child.label, badge: child.badge, showBadge: child.showBadge, isActive: child.isActive, onBhItemClick: () => this.handleChildClick(index$1) }))))))));
+            } }, "expand_more")), index.h("span", { key: '347a59718d412ab1f930ea565fb33c4f6a8be0f0', class: "page-navigation-item-label" }, this.label), index.h("bh-button", { key: '117a5ee32f65dbd9afdf499d4cc4438c9ab6a3c9', hierarchy: "tertiary", icon: "only", size: "xs", iconName: "add", onClick: this.handleAddClick }))), (this.isExpanded || this.isAnimating) && (index.h("div", { key: '56cbc14fbc61c335dfbd3a22c20a11b928ce04bd', class: `page-navigation-children ${this.animationClass}` }, this.childItems.map((child, index$1) => (index.h("bh-page-navigation-child", { key: index$1, label: child.label, badge: child.badge, showBadge: child.showBadge, isActive: child.isActive, onBhItemClick: () => this.handleChildClick(index$1) }))))))));
     }
     static get watchers() { return {
         "isExpanded": ["handleExpandedChange"]
@@ -136,7 +136,7 @@ const BhPageNavigationSingleLevel = class {
         };
     }
     render() {
-        return (index.h(index.Host, { key: '1f58160e16d18bfe049035d33b48f14b11b676ae' }, index.h("div", { key: 'c5c44e67354359238f67df33c67e81ec2bbaf478', class: this.getItemClasses(), onClick: () => this.handleClick() }, index.h("div", { key: 'c3c3b27eaeb65d8325e5e92c428831af58a48448', class: "page-navigation-item-content" }, index.h("span", { key: 'e0e5315088e7f1c820fad38d2ae095494dc581bb', class: "page-navigation-item-icon material-symbols-outlined" }, this.icon), index.h("span", { key: '37d30adc75791076a84c58f92fd93ad7c16267f0', class: "page-navigation-item-label" }, this.label)))));
+        return (index.h(index.Host, { key: '5b3997d17859a74a8b564e348b8c81a440cb7776' }, index.h("div", { key: 'c34fa8060ff6baf90361a39615b344352d34ce59', class: this.getItemClasses(), onClick: () => this.handleClick() }, index.h("div", { key: 'e6dd19e247dda5dd1f957610453539cf8143440c', class: "page-navigation-item-content" }, index.h("span", { key: '3df9dacf7dc53e3afd443984e0953cb3843793c7', class: "page-navigation-item-icon material-symbols-outlined" }, this.icon), index.h("span", { key: '857b837aaa75cbcb678f7b9eb21b35be873085d1', class: "page-navigation-item-label" }, this.label)))));
     }
 };
 BhPageNavigationSingleLevel.style = bhPageNavigationSingleLevelCss;

package/dist/cjs/bh-page-navigation.cjs.entry.js

@@ -60,7 +60,7 @@ const BhPageNavigation = class {
         this.bhItemClick.emit({ itemId, childIndex });
     };
     render() {
-        return (index.h(index.Host, { key: 'e45e8ce3b4f0357f3e9a388083483a710b1480da' }, index.h("div", { key: 'fd2b83db1152ee0da4a3700c54bc19eb442e9b7b', class: "page-navigation" }, index.h("div", { key: 'f0ad1b96f3f1e04e38d4d9d440d3e5efe0d172a4', class: "page-navigation-header" }, index.h("h2", { key: 'd015280380f4caad460fbb919e82c774d812db98', class: "page-navigation-title" }, this.navTitle)), index.h("nav", { key: 'ac52f5b69c75376db23ce23de1ee76656cc392f3', class: "page-navigation-list" }, this.items.map(item => item.type === 'single' ? (index.h("bh-page-navigation-single-level", { key: item.id, label: item.label, icon: item.icon, isActive: item.isActive || false, onBhItemClick: () => this.handleSingleLevelClick(item.id) })) : (index.h("bh-page-navigation-multi-level", { key: item.id, label: item.label, icon: item.icon, childItems: item.children || [], isExpanded: item.isExpanded || false, onBhToggle: () => this.handleMultiLevelToggle(item.id), onBhChildClick: (e) => this.handleMultiLevelChildClick(item.id, e.detail) })))))));
+        return (index.h(index.Host, { key: '96e305381a9f4148c9adaaefd27c7deca8071bfb' }, index.h("div", { key: '5f00d8f3c967ba122b987fe414c8a9f48a86c4ae', class: "page-navigation" }, index.h("div", { key: 'c4d5cd5413aee68055cf864a1f5b2b54159b7249', class: "page-navigation-header" }, index.h("h2", { key: '1c5e9d38b17e7ed63f3b69fd324fec86aa806a6b', class: "page-navigation-title" }, this.navTitle)), index.h("nav", { key: '3db056f1d9d6e607cc69d27df7ff25e6fbaac8c1', class: "page-navigation-list" }, this.items.map(item => item.type === 'single' ? (index.h("bh-page-navigation-single-level", { key: item.id, label: item.label, icon: item.icon, isActive: item.isActive || false, onBhItemClick: () => this.handleSingleLevelClick(item.id) })) : (index.h("bh-page-navigation-multi-level", { key: item.id, label: item.label, icon: item.icon, childItems: item.children || [], isExpanded: item.isExpanded || false, onBhToggle: () => this.handleMultiLevelToggle(item.id), onBhChildClick: (e) => this.handleMultiLevelChildClick(item.id, e.detail) })))))));
     }
     static get watchers() { return {
         "navigationItems": ["handleNavigationItemsChange"]

package/dist/cjs/bh-pie-chart.cjs.entry.js

@@ -140,7 +140,7 @@ const BhPieChart = class {
     render() {
         const segments = this.getSegments();
         const innerRadius = this.getInnerRadius();
-        return (index.h(index.Host, { key: 'b0778f7ed499f578b25907f73be6e7ddbbd9fa17' }, index.h("div", { key: '440259b95d6e65282452619ee2a0cfc890f45443', class: "pie-chart-container", style: { width: `${this.size}px`, height: `${this.size}px` } }, index.h("svg", { key: '183c562c5a65095667964dc5a80b84fdf28d7704', width: this.size, height: this.size, viewBox: "0 0 160 160", class: "pie-chart-svg" }, index.h("circle", { key: '1afac01e292252211943372018476565dabefbb2', cx: "80", cy: "80", r: "80", fill: "transparent", class: "pie-background" }), segments.map((segment, index$1) => (index.h("g", { key: index$1, class: "pie-segment-group" }, index.h("path", { d: segment.path, fill: segment.color, class: { 'pie-segment': true, animated: this.animated }, style: { animationDelay: this.animated ? `${index$1 * 0.03}s` : '0s' }, onMouseEnter: (e) => this.handleSegmentHover(e, segment), onMouseLeave: this.handleSegmentLeave })))), this.hole !== 'none' && (index.h("circle", { key: 'bb64355e6be750e413926fca053c2bc100aa821e', cx: "80", cy: "80", r: innerRadius, fill: "white", class: "pie-inner-hole" })))), index.h("bh-chart-tooltip", { key: '1760b14f54066a4ae146e9802a9888e7f44bce19', visible: this.tooltipVisible, x: this.tooltipX, y: this.tooltipY, items: this.tooltipSegment
+        return (index.h(index.Host, { key: '0bd86f47684f8fa73b3460af4d245337136fc319' }, index.h("div", { key: '9a7c0944d029a7065735ff647f1e2502af2bb783', class: "pie-chart-container", style: { width: `${this.size}px`, height: `${this.size}px` } }, index.h("svg", { key: 'c272bad8a5050cbc28ac803ea68b27b7179f1d1a', width: this.size, height: this.size, viewBox: "0 0 160 160", class: "pie-chart-svg" }, index.h("circle", { key: '21503d47d3ad7976bc2c2b5926785c2144d579ea', cx: "80", cy: "80", r: "80", fill: "transparent", class: "pie-background" }), segments.map((segment, index$1) => (index.h("g", { key: index$1, class: "pie-segment-group" }, index.h("path", { d: segment.path, fill: segment.color, class: { 'pie-segment': true, animated: this.animated }, style: { animationDelay: this.animated ? `${index$1 * 0.03}s` : '0s' }, onMouseEnter: (e) => this.handleSegmentHover(e, segment), onMouseLeave: this.handleSegmentLeave })))), this.hole !== 'none' && (index.h("circle", { key: 'f42c781fc5378af859f7a460ac0665cfd3360599', cx: "80", cy: "80", r: innerRadius, fill: "white", class: "pie-inner-hole" })))), index.h("bh-chart-tooltip", { key: '179c0d15c9895199dc6d169e400c6f4ff832215b', visible: this.tooltipVisible, x: this.tooltipX, y: this.tooltipY, items: this.tooltipSegment
                 ? [
                     {
                         label: this.tooltipSegment.name,

package/dist/cjs/bh-popover.cjs.entry.js

@@ -2,96 +2,34 @@
 
 var index = require('./index-DQwSUT6k.js');
 
-const bhPopoverCss = ".popover{position:relative;border-radius:var(--radius-md);width:320px}.popover-content{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;overflow:hidden;position:relative;width:100%;height:100%}.popover-menu{background-color:#ffffff;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;overflow:hidden;position:relative;border-radius:var(--radius-md);flex-shrink:0;width:100%;max-height:400px;border:1px solid #dcdfea;box-shadow:var(--shadow-popover)}.popover-header{box-sizing:border-box;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;padding:var(--spacing-lg) var(--spacing-xl);position:relative;flex-shrink:0;width:100%;border-bottom:1px solid #dcdfea}.avatar-group{display:flex;gap:var(--spacing-lg);align-items:center;justify-content:flex-start;position:relative;flex-shrink:0;width:100%}.avatar{background-color:#ffffff;position:relative;border-radius:var(--radius-full);flex-shrink:0;width:40px;height:40px;border:0.75px solid rgba(0, 0, 0, 0.08);overflow:hidden;display:flex;align-items:center;justify-content:center}.avatar-image{width:100%;height:100%;object-fit:cover}.brand-info{flex-basis:0;display:flex;flex-direction:column;flex-grow:1;align-items:flex-start;justify-content:flex-start;line-height:0;min-height:1px;min-width:1px;position:relative;flex-shrink:0}.brand-name{font-family:var(--font-inter);font-weight:600;position:relative;flex-shrink:0;color:#404968;font-size:14px;line-height:20px;width:100%;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.portfolio-link{font-family:var(--font-inter);font-weight:400;position:relative;flex-shrink:0;color:#2642cf;font-size:14px;line-height:20px;width:100%;text-decoration:underline;text-decoration-skip-ink:none;text-underline-position:from-font;background:none;border:none;cursor:pointer;text-align:left;padding:0}.portfolio-link:hover{color:#1a2bb8}.search-container{box-sizing:border-box;display:flex;flex-direction:column;gap:6px;align-items:center;justify-content:center;overflow:visible;padding:0;position:relative;flex-shrink:0;width:100%}.search-input{display:flex;flex-direction:column;gap:var(--spacing-sm);padding:var(--spacing-xs) var(--spacing-none) var(--spacing-none) var(--spacing-lg);align-items:flex-start;justify-content:flex-start;position:relative;flex-shrink:0;width:100%}.search-content{background-color:#ffffff;box-sizing:border-box;display:flex;gap:var(--spacing-md);height:var(--spacing-4xl);align-items:center;justify-content:flex-start;overflow:hidden;padding:var(--spacing-none);position:relative;border-radius:var(--radius-md);flex-shrink:0;width:100%;border:none}.search-icon{width:20px;height:20px;flex-shrink:0;color:#5d6b98}.search-field{flex-basis:0;font-family:var(--font-inter);font-weight:500;flex-grow:1;line-height:0;min-height:1px;min-width:1px;overflow:hidden;text-overflow:ellipsis;position:relative;flex-shrink:0;color:#404968;font-size:14px;line-height:20px;white-space:nowrap;border:none;outline:none;background:none}.search-field::placeholder{color:#5d6b98}.menu-items{box-sizing:border-box;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;overflow-y:auto;padding:var(--spacing-xs) var(--spacing-none);position:relative;flex-grow:1;width:100%;max-height:calc(400px - 180px)}.menu-header{box-sizing:border-box;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;padding:var(--spacing-lg) var(--spacing-xl);position:relative;flex-shrink:0;width:100%;border-top:1px solid #dcdfea;border-bottom:1px solid #dcdfea;font-family:var(--font-inter);font-weight:600;line-height:0;color:#404968;font-size:14px;line-height:20px}.menu-item-container{box-sizing:border-box;display:flex;align-items:center;justify-content:flex-start;padding:var(--spacing-xxs) var(--spacing-sm);position:relative;flex-shrink:0;width:100%}.menu-item{flex-basis:0;box-sizing:border-box;display:flex;flex-grow:1;align-items:center;justify-content:flex-start;min-height:1px;min-width:1px;overflow:hidden;padding:var(--spacing-md) var(--spacing-lg);position:relative;border-radius:var(--radius-sm);flex-shrink:0;font-family:var(--font-inter);font-weight:500;line-height:0;color:#404968;font-size:14px;line-height:20px;background:none;border:none;cursor:pointer;text-align:left;width:100%;transition:all 0.2s ease}.menu-item:hover{background-color:#f9f9fb;color:#30374f}.menu-item.selected{background-color:#f9f9fb;color:#30374f}.menu-item-portfolio{font-weight:600;color:#2642cf}.menu-item-portfolio:hover{color:#1a2bb8}.menu-item-region{font-weight:500;padding-left:26px;color:#404968;font-size:13px}.menu-item-property{color:#5d6b98;font-size:13px}";
+const bhPopoverCss = ":host{display:inline-block;position:relative}.popover-wrapper{position:absolute;left:50%;transform:translateX(-50%);z-index:1000;width:max-content;width:-webkit-max-content;max-width:var(--max-width, 285px);flex-direction:column;align-items:center;gap:0;padding:0}.popover-wrapper.top{bottom:100%;margin-bottom:10px}.popover-wrapper.bottom{top:100%;margin-top:10px}.popover-content{display:flex;flex-direction:column;align-items:flex-start;width:100%;gap:0;border-radius:var(--radius-md, 8px);background-color:var(--color-white, #ffffff);box-shadow:var(--shadow-md);overflow:hidden}.popover-text{display:flex;flex-direction:column;align-items:flex-start;gap:0;padding:var(--sp-3, 12px)}.popover-text.with-title{padding:var(--sp-3, 12px);border-radius:var(--radius-md, 8px);overflow:hidden}.content-text{font-family:var(--font-family-body, 'Inter', sans-serif);font-size:var(--text-sm-size, 14px);font-weight:var(--weight-medium, 500);line-height:var(--text-xs-line, 18px);letter-spacing:0;color:var(--color-neutral-600, #4a5578);margin:0;white-space:pre-wrap}.popover-header{display:flex;flex-direction:column;align-items:center;gap:0;padding:0;width:100%;overflow:hidden}.header-content{display:flex;gap:var(--sp-4, 16px);align-items:flex-start;padding:var(--sp-3, 12px);width:100%}.header-text{display:flex;flex-direction:column;flex:1;gap:var(--sp-1, 4px);align-items:flex-start;min-height:1px;min-width:1px;padding:0}.title-text{font-family:var(--font-family-body, 'Inter', sans-serif);font-size:var(--text-sm-size, 14px);font-weight:var(--weight-semibold, 600);line-height:var(--text-sm-line, 20px);letter-spacing:0;color:var(--color-neutral-900, #111322);margin:0;width:100%;white-space:pre-wrap}.divider{width:100%;height:1px;background-color:var(--color-neutral-200, #dcdfea)}";
 
 const BhPopover = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.bhItemSelect = index.createEvent(this, "bhItemSelect");
-        this.bhPortfolioClick = index.createEvent(this, "bhPortfolioClick");
-        this.bhSearchChange = index.createEvent(this, "bhSearchChange");
     }
     /**
-     * Title displayed in the header
+     * Optional title for the popover. If provided, displays "With title" variant
+     * Named popoverTitle to avoid conflict with HTMLElement.title
      */
-    popoverTitle = 'Brand Name';
+    popoverTitle;
     /**
-     * Text for the portfolio link
+     * Content text for the popover
      */
-    viewPortfolioText = 'view portfolio';
+    content;
     /**
-     * Placeholder text for search input
+     * Maximum width of the popover
      */
-    searchPlaceholder = 'Search by name or region';
+    maxWidth = '285px';
     /**
-     * Width of the popover
+     * Position of the popover relative to the trigger element
      */
-    width = '240px';
-    /**
-     * Whether to show search input
-     */
-    showSearch = true;
-    /**
-     * Whether to show avatar section
-     */
-    showAvatar = true;
-    /**
-     * Avatar image source URL
-     */
-    avatarSrc;
-    /**
-     * Menu items array (JSON string or array)
-     */
-    items = [];
-    searchTerm = '';
-    /**
-     * Event emitted when a menu item is selected
-     */
-    bhItemSelect;
-    /**
-     * Event emitted when portfolio link is clicked
-     */
-    bhPortfolioClick;
-    /**
-     * Event emitted when search input changes
-     */
-    bhSearchChange;
-    get parsedItems() {
-        if (typeof this.items === 'string') {
-            try {
-                return JSON.parse(this.items);
-            }
-            catch {
-                return [];
-            }
-        }
-        return this.items || [];
-    }
-    handleItemClick = (item) => {
-        if (item.type !== 'header') {
-            this.bhItemSelect.emit(item);
-        }
-    };
-    handlePortfolioClick = () => {
-        this.bhPortfolioClick.emit();
-    };
-    handleSearchInput = (event) => {
-        const target = event.target;
-        this.searchTerm = target.value;
-        this.bhSearchChange.emit(this.searchTerm);
-    };
-    getItemClasses(item) {
-        return {
-            'menu-item': true,
-            'selected': !!item.selected,
-            'menu-item-portfolio': item.type === 'portfolio',
-            'menu-item-region': item.type === 'region',
-            'menu-item-property': item.type === 'property',
-        };
-    }
+    position = 'top'; // Default to top
     render() {
-        const items = this.parsedItems;
-        return (index.h(index.Host, { key: '25499890c1864435bae214a37f7fc8d565d8f3da' }, index.h("div", { key: 'de6ade64a6cdf7ab299d0ee9187b676d2841d89c', class: "popover", style: { width: this.width } }, index.h("div", { key: '19d68a071d41a928dde7070ce17ef61ef0770118', class: "popover-content" }, index.h("div", { key: '103181dbb1ff47314cff71869bb84ad06c78de78', class: "popover-menu" }, this.showAvatar && (index.h("div", { key: 'd6b413cd6c726078e414174cfc75d5e95ffacddc', class: "popover-header" }, index.h("div", { key: '4cdad2a1457d4b8df7baeb0f04d849f47471a727', class: "avatar-group" }, index.h("div", { key: '7c59b44499eaba8da0982939dacef30899273c02', class: "avatar" }, this.avatarSrc ? (index.h("img", { src: this.avatarSrc, alt: this.popoverTitle, class: "avatar-image" })) : (index.h("slot", { name: "avatar" }))), index.h("div", { key: 'bfab1ee98a218d4ee75055872542135fbf179069', class: "brand-info" }, index.h("div", { key: '9eed24402c23ba99fa9fbcaf4b0a430ea01fe263', class: "brand-name" }, this.popoverTitle), this.viewPortfolioText && (index.h("button", { key: '2056c40e002bd029545f2f2fb898eed39f8f93db', class: "portfolio-link", onClick: this.handlePortfolioClick, type: "button" }, this.viewPortfolioText)))))), this.showSearch && (index.h("div", { key: 'd8b487b553522f4c5a0e9e74755c53fb7ff5dc1b', class: "search-container" }, index.h("div", { key: 'a20d988fa3f86e7c26a1b31ed04b4adfa34a7a36', class: "search-input" }, index.h("div", { key: 'd75a244d37324a84a8ae8501f334f84a52fe9b0e', class: "search-content" }, index.h("span", { key: '394b2c5f23949c72109ca5c441ef3069a6424530', class: "material-symbols-outlined search-icon" }, "search"), index.h("input", { key: '1887ff5e6d3b3c857b5e980d33d8adc0076b23a1', type: "text", placeholder: this.searchPlaceholder, value: this.searchTerm, onInput: this.handleSearchInput, class: "search-field" }))))), index.h("div", { key: 'e2b6ff5f6b7ba5929db7a9d1401ae2cfc1089eb7', class: "menu-items" }, items.map((item) => (index.h("div", { key: item.id }, item.type === 'header' && (index.h("div", { class: "menu-header" }, item.label)), item.type !== 'header' && (index.h("div", { class: "menu-item-container" }, index.h("button", { class: this.getItemClasses(item), onClick: () => this.handleItemClick(item), type: "button" }, item.label))))))))))));
+        const hasTitle = !!this.popoverTitle;
+        return (
+        // Move the style here so it controls the entire popover window
+        index.h("div", { key: '8e25b3b1975a401c7c3b227bd9d9bd0a9e58d9e8', class: `popover-wrapper ${this.position}`, style: { maxWidth: this.maxWidth } }, index.h("div", { key: 'e982c62eb6f595d28405c22218127aac02a2b18d', class: "popover-content" }, hasTitle && (index.h("div", { key: '6317cf01a6b6a8cc5ec1ff6b25494bb87bf61d38', class: "popover-header" }, index.h("div", { key: 'd1adadc130346c805f483b5383212a865c4bf816', class: "header-content" }, index.h("div", { key: 'bd19b1f54fcee4af8efc3e1078dfa8e455a34ca9', class: "header-text" }, index.h("p", { key: '2a22f82dea6194a7b0fce24c317e8e7fe00fcec0', class: "title-text" }, this.popoverTitle))), index.h("div", { key: 'f72dda514238a1736913301a52a095f264d67d79', class: "divider" }))), index.h("div", { key: '6469027a70e22c5d80275d9816f50b351e572573', class: hasTitle ? 'popover-text with-title' : 'popover-text' }, this.content ? (index.h("p", { class: "content-text" }, this.content)) : (index.h("slot", null))))));
     }
 };
 BhPopover.style = bhPopoverCss;

package/dist/cjs/bh-popover.entry.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"bh-popover.entry.cjs.js","sources":["src/components/bh-popover/bh-popover.css?tag=bh-popover&encapsulation=shadow","src/components/bh-popover/bh-popover.tsx"],"sourcesContent":["/* Popover Container */\n.popover {\n  position: relative;\n  border-radius: var(--radius-md);\n  width: 320px;\n}\n\n.popover-content {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  justify-content: flex-start;\n  overflow: hidden;\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n\n.popover-menu {\n  background-color: #ffffff;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  justify-content: flex-start;\n  overflow: hidden;\n  position: relative;\n  border-radius: var(--radius-md);\n  flex-shrink: 0;\n  width: 100%;\n  max-height: 400px;\n  border: 1px solid #dcdfea;\n  box-shadow: var(--shadow-popover);\n}\n\n/* Header */\n.popover-header {\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  justify-content: flex-start;\n  padding: var(--spacing-lg) var(--spacing-xl);\n  position: relative;\n  flex-shrink: 0;\n  width: 100%;\n  border-bottom: 1px solid #dcdfea;\n}\n\n.avatar-group {\n  display: flex;\n  gap: var(--spacing-lg);\n  align-items: center;\n  justify-content: flex-start;\n  position: relative;\n  flex-shrink: 0;\n  width: 100%;\n}\n\n.avatar {\n  background-color: #ffffff;\n  position: relative;\n  border-radius: var(--radius-full);\n  flex-shrink: 0;\n  width: 40px;\n  height: 40px;\n  border: 0.75px solid rgba(0, 0, 0, 0.08);\n  overflow: hidden;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.avatar-image {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n.brand-info {\n  flex-basis: 0;\n  display: flex;\n  flex-direction: column;\n  flex-grow: 1;\n  align-items: flex-start;\n  justify-content: flex-start;\n  line-height: 0;\n  min-height: 1px;\n  min-width: 1px;\n  position: relative;\n  flex-shrink: 0;\n}\n\n.brand-name {\n  font-family: var(--font-inter);\n  font-weight: 600;\n  position: relative;\n  flex-shrink: 0;\n  color: #404968;\n  font-size: 14px;\n  line-height: 20px;\n  width: 100%;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  white-space: nowrap;\n}\n\n.portfolio-link {\n  font-family: var(--font-inter);\n  font-weight: 400;\n  position: relative;\n  flex-shrink: 0;\n  color: #2642cf;\n  font-size: 14px;\n  line-height: 20px;\n  width: 100%;\n  text-decoration: underline;\n  text-decoration-skip-ink: none;\n  text-underline-position: from-font;\n  background: none;\n  border: none;\n  cursor: pointer;\n  text-align: left;\n  padding: 0;\n}\n\n.portfolio-link:hover {\n  color: #1a2bb8;\n}\n\n/* Search Container */\n.search-container {\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  align-items: center;\n  justify-content: center;\n  overflow: visible;\n  padding: 0;\n  position: relative;\n  flex-shrink: 0;\n  width: 100%;\n}\n\n.search-input {\n  display: flex;\n  flex-direction: column;\n  gap: var(--spacing-sm);\n  padding: var(--spacing-xs) var(--spacing-none) var(--spacing-none) var(--spacing-lg);\n  align-items: flex-start;\n  justify-content: flex-start;\n  position: relative;\n  flex-shrink: 0;\n  width: 100%;\n}\n\n.search-content {\n  background-color: #ffffff;\n  box-sizing: border-box;\n  display: flex;\n  gap: var(--spacing-md);\n  height: var(--spacing-4xl);\n  align-items: center;\n  justify-content: flex-start;\n  overflow: hidden;\n  padding: var(--spacing-none);\n  position: relative;\n  border-radius: var(--radius-md);\n  flex-shrink: 0;\n  width: 100%;\n  border: none;\n}\n\n.search-icon {\n  width: 20px;\n  height: 20px;\n  flex-shrink: 0;\n  color: #5d6b98;\n}\n\n.search-field {\n  flex-basis: 0;\n  font-family: var(--font-inter);\n  font-weight: 500;\n  flex-grow: 1;\n  line-height: 0;\n  min-height: 1px;\n  min-width: 1px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  position: relative;\n  flex-shrink: 0;\n  color: #404968;\n  font-size: 14px;\n  line-height: 20px;\n  white-space: nowrap;\n  border: none;\n  outline: none;\n  background: none;\n}\n\n.search-field::placeholder {\n  color: #5d6b98;\n}\n\n/* Menu Items */\n.menu-items {\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  justify-content: flex-start;\n  overflow-y: auto;\n  padding: var(--spacing-xs) var(--spacing-none);\n  position: relative;\n  flex-grow: 1;\n  width: 100%;\n  max-height: calc(400px - 180px);\n}\n\n.menu-header {\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  justify-content: flex-start;\n  padding: var(--spacing-lg) var(--spacing-xl);\n  position: relative;\n  flex-shrink: 0;\n  width: 100%;\n  border-top: 1px solid #dcdfea;\n  border-bottom: 1px solid #dcdfea;\n  font-family: var(--font-inter);\n  font-weight: 600;\n  line-height: 0;\n  color: #404968;\n  font-size: 14px;\n  line-height: 20px;\n}\n\n.menu-item-container {\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  padding: var(--spacing-xxs) var(--spacing-sm);\n  position: relative;\n  flex-shrink: 0;\n  width: 100%;\n}\n\n.menu-item {\n  flex-basis: 0;\n  box-sizing: border-box;\n  display: flex;\n  flex-grow: 1;\n  align-items: center;\n  justify-content: flex-start;\n  min-height: 1px;\n  min-width: 1px;\n  overflow: hidden;\n  padding: var(--spacing-md) var(--spacing-lg);\n  position: relative;\n  border-radius: var(--radius-sm);\n  flex-shrink: 0;\n  font-family: var(--font-inter);\n  font-weight: 500;\n  line-height: 0;\n  color: #404968;\n  font-size: 14px;\n  line-height: 20px;\n  background: none;\n  border: none;\n  cursor: pointer;\n  text-align: left;\n  width: 100%;\n  transition: all 0.2s ease;\n}\n\n.menu-item:hover {\n  background-color: #f9f9fb;\n  color: #30374f;\n}\n\n.menu-item.selected {\n  background-color: #f9f9fb;\n  color: #30374f;\n}\n\n/* Property Type Styling */\n.menu-item-portfolio {\n  font-weight: 600;\n  color: #2642cf;\n}\n\n.menu-item-portfolio:hover {\n  color: #1a2bb8;\n}\n\n.menu-item-region {\n  font-weight: 500;\n  padding-left: 26px;\n  color: #404968;\n  font-size: 13px;\n}\n\n.menu-item-property {\n  color: #5d6b98;\n  font-size: 13px;\n}\n","import { Component, Prop, State, Event, EventEmitter, h, Host } from '@stencil/core';\n\nexport interface PopoverItem {\n  id: string;\n  label: string;\n  type?: 'portfolio' | 'region' | 'property' | 'header';\n  selected?: boolean;\n}\n\n@Component({\n  tag: 'bh-popover',\n  styleUrl: 'bh-popover.css',\n  shadow: true,\n})\nexport class BhPopover {\n  /**\n   * Title displayed in the header\n   */\n  @Prop() popoverTitle: string = 'Brand Name';\n\n  /**\n   * Text for the portfolio link\n   */\n  @Prop() viewPortfolioText: string = 'view portfolio';\n\n  /**\n   * Placeholder text for search input\n   */\n  @Prop() searchPlaceholder: string = 'Search by name or region';\n\n  /**\n   * Width of the popover\n   */\n  @Prop() width: string = '240px';\n\n  /**\n   * Whether to show search input\n   */\n  @Prop() showSearch: boolean = true;\n\n  /**\n   * Whether to show avatar section\n   */\n  @Prop() showAvatar: boolean = true;\n\n  /**\n   * Avatar image source URL\n   */\n  @Prop() avatarSrc?: string;\n\n  /**\n   * Menu items array (JSON string or array)\n   */\n  @Prop() items: PopoverItem[] | string = [];\n\n  @State() searchTerm: string = '';\n\n  /**\n   * Event emitted when a menu item is selected\n   */\n  @Event() bhItemSelect!: EventEmitter<PopoverItem>;\n\n  /**\n   * Event emitted when portfolio link is clicked\n   */\n  @Event() bhPortfolioClick!: EventEmitter<void>;\n\n  /**\n   * Event emitted when search input changes\n   */\n  @Event() bhSearchChange!: EventEmitter<string>;\n\n  private get parsedItems(): PopoverItem[] {\n    if (typeof this.items === 'string') {\n      try {\n        return JSON.parse(this.items);\n      } catch {\n        return [];\n      }\n    }\n    return this.items || [];\n  }\n\n  private handleItemClick = (item: PopoverItem) => {\n    if (item.type !== 'header') {\n      this.bhItemSelect.emit(item);\n    }\n  };\n\n  private handlePortfolioClick = () => {\n    this.bhPortfolioClick.emit();\n  };\n\n  private handleSearchInput = (event: Event) => {\n    const target = event.target as HTMLInputElement;\n    this.searchTerm = target.value;\n    this.bhSearchChange.emit(this.searchTerm);\n  };\n\n  private getItemClasses(item: PopoverItem): Record<string, boolean> {\n    return {\n      'menu-item': true,\n      'selected': !!item.selected,\n      'menu-item-portfolio': item.type === 'portfolio',\n      'menu-item-region': item.type === 'region',\n      'menu-item-property': item.type === 'property',\n    };\n  }\n\n  render() {\n    const items = this.parsedItems;\n\n    return (\n      <Host>\n        <div class=\"popover\" style={{ width: this.width }}>\n          <div class=\"popover-content\">\n            <div class=\"popover-menu\">\n              {/* Header with Brand/Avatar */}\n              {this.showAvatar && (\n                <div class=\"popover-header\">\n                  <div class=\"avatar-group\">\n                    <div class=\"avatar\">\n                      {this.avatarSrc ? (\n                        <img src={this.avatarSrc} alt={this.popoverTitle} class=\"avatar-image\" />\n                      ) : (\n                        <slot name=\"avatar\" />\n                      )}\n                    </div>\n                    <div class=\"brand-info\">\n                      <div class=\"brand-name\">{this.popoverTitle}</div>\n                      {this.viewPortfolioText && (\n                        <button\n                          class=\"portfolio-link\"\n                          onClick={this.handlePortfolioClick}\n                          type=\"button\"\n                        >\n                          {this.viewPortfolioText}\n                        </button>\n                      )}\n                    </div>\n                  </div>\n                </div>\n              )}\n\n              {/* Search Input */}\n              {this.showSearch && (\n                <div class=\"search-container\">\n                  <div class=\"search-input\">\n                    <div class=\"search-content\">\n                      <span class=\"material-symbols-outlined search-icon\">search</span>\n                      <input\n                        type=\"text\"\n                        placeholder={this.searchPlaceholder}\n                        value={this.searchTerm}\n                        onInput={this.handleSearchInput}\n                        class=\"search-field\"\n                      />\n                    </div>\n                  </div>\n                </div>\n              )}\n\n              {/* Menu Items */}\n              <div class=\"menu-items\">\n                {items.map((item) => (\n                  <div key={item.id}>\n                    {/* Header Item */}\n                    {item.type === 'header' && (\n                      <div class=\"menu-header\">{item.label}</div>\n                    )}\n\n                    {/* Regular Item */}\n                    {item.type !== 'header' && (\n                      <div class=\"menu-item-container\">\n                        <button\n                          class={this.getItemClasses(item)}\n                          onClick={() => this.handleItemClick(item)}\n                          type=\"button\"\n                        >\n                          {item.label}\n                        </button>\n                      </div>\n                    )}\n                  </div>\n                ))}\n              </div>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":["h","Host"],"mappings":"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"}
+{"version":3,"file":"bh-popover.entry.cjs.js","sources":["src/components/bh-popover/bh-popover.css?tag=bh-popover&encapsulation=shadow","src/components/bh-popover/bh-popover.tsx"],"sourcesContent":["/* ==========================================================================\n   BH-POPOVER COMPONENT STYLES\n   ========================================================================== */\n\n:host {\n  display: inline-block;\n  position: relative;\n}\n\n/* Popover Wrapper */\n.popover-wrapper {\n  position: absolute;\n  left: 50%;\n  transform: translateX(-50%); /* Centers the popover horizontally */\n  z-index: 1000;\n  width: max-content;\n  width: -webkit-max-content;\n  max-width: var(--max-width, 285px);\n  flex-direction: column;\n  align-items: center;\n  gap: 0;\n  padding: 0;\n}\n\n.popover-wrapper.top {\n  bottom: 100%;\n  margin-bottom: 10px;\n}\n\n.popover-wrapper.bottom {\n  top: 100%;\n  margin-top: 10px;\n}\n\n/* Popover Content Container */\n.popover-content {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  width: 100%;\n  gap: 0;\n  border-radius: var(--radius-md, 8px);\n  background-color: var(--color-white, #ffffff);\n  box-shadow: var(--shadow-md);\n  overflow: hidden;\n}\n\n/* ==========================================================================\n   Popover Text (Default Variant)\n   ========================================================================== */\n\n.popover-text {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 0;\n  padding: var(--sp-3, 12px);\n}\n\n.popover-text.with-title {\n  padding: var(--sp-3, 12px);\n  border-radius: var(--radius-md, 8px);\n  overflow: hidden;\n}\n\n.content-text {\n  font-family: var(--font-family-body, 'Inter', sans-serif);\n  font-size: var(--text-sm-size, 14px);\n  font-weight: var(--weight-medium, 500);\n  line-height: var(--text-xs-line, 18px);\n  letter-spacing: 0;\n  color: var(--color-neutral-600, #4a5578);\n  margin: 0;\n  white-space: pre-wrap;\n}\n\n/* ==========================================================================\n   Popover Header (With Title Variant)\n   ========================================================================== */\n\n.popover-header {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 0;\n  padding: 0;\n  width: 100%;\n  overflow: hidden;\n}\n\n.header-content {\n  display: flex;\n  gap: var(--sp-4, 16px);\n  align-items: flex-start;\n  padding: var(--sp-3, 12px);\n  width: 100%;\n}\n\n.header-text {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  gap: var(--sp-1, 4px);\n  align-items: flex-start;\n  min-height: 1px;\n  min-width: 1px;\n  padding: 0;\n}\n\n.title-text {\n  font-family: var(--font-family-body, 'Inter', sans-serif);\n  font-size: var(--text-sm-size, 14px);\n  font-weight: var(--weight-semibold, 600);\n  line-height: var(--text-sm-line, 20px);\n  letter-spacing: 0;\n  color: var(--color-neutral-900, #111322);\n  margin: 0;\n  width: 100%;\n  white-space: pre-wrap;\n}\n\n/* Divider */\n.divider {\n  width: 100%;\n  height: 1px;\n  background-color: var(--color-neutral-200, #dcdfea);\n}\n","import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'bh-popover',\n  styleUrl: 'bh-popover.css',\n  shadow: true,\n})\nexport class BhPopover {\n  /**\n   * Optional title for the popover. If provided, displays \"With title\" variant\n   * Named popoverTitle to avoid conflict with HTMLElement.title\n   */\n  @Prop() popoverTitle?: string;\n\n  /**\n   * Content text for the popover\n   */\n  @Prop() content?: string;\n\n  /**\n   * Maximum width of the popover\n   */\n  @Prop() maxWidth: string = '285px';\n\n  /**\n   * Position of the popover relative to the trigger element\n   */\n  @Prop() position: 'top' | 'bottom' = 'top'; // Default to top\n\n  render() {\n    const hasTitle = !!this.popoverTitle;\n\n    return (\n      // Move the style here so it controls the entire popover window\n      <div\n        class={`popover-wrapper ${this.position}`}\n        style={{ maxWidth: this.maxWidth }}\n      >\n        <div class=\"popover-content\">\n          {hasTitle && (\n            <div class=\"popover-header\">\n              <div class=\"header-content\">\n                <div class=\"header-text\">\n                  <p class=\"title-text\">{this.popoverTitle}</p>\n                </div>\n              </div>\n              <div class=\"divider\"></div>\n            </div>\n          )}\n\n          <div class={hasTitle ? 'popover-text with-title' : 'popover-text'}>\n            {this.content ? (\n              <p class=\"content-text\">{this.content}</p>\n            ) : (\n              <slot />\n            )}\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"],"names":["h"],"mappings":";;;;AAAA,MAAM,YAAY,GAAG,0vDAA0vD;;MCOlwD,SAAS,GAAA,MAAA;;;;AACpB;;;AAGG;AACK,IAAA,YAAY;AAEpB;;AAEG;AACK,IAAA,OAAO;AAEf;;AAEG;IACK,QAAQ,GAAW,OAAO;AAElC;;AAEG;AACK,IAAA,QAAQ,GAAqB,KAAK,CAAC;IAE3C,MAAM,GAAA;AACJ,QAAA,MAAM,QAAQ,GAAG,CAAC,CAAC,IAAI,CAAC,YAAY;QAEpC;;AAEE,QAAAA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,CAAmB,gBAAA,EAAA,IAAI,CAAC,QAAQ,CAAA,CAAE,EACzC,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,EAAA,EAElCA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,iBAAiB,EAAA,EACzB,QAAQ,KACPA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,gBAAgB,EAAA,EACzBA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,gBAAgB,EAAA,EACzBA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,aAAa,EAAA,EACtBA,OAAG,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,YAAY,EAAA,EAAE,IAAI,CAAC,YAAY,CAAK,CACzC,CACF,EACNA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,SAAS,EAAA,CAAO,CACvB,CACP,EAEDA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,QAAQ,GAAG,yBAAyB,GAAG,cAAc,EAC9D,EAAA,IAAI,CAAC,OAAO,IACXA,OAAG,CAAA,GAAA,EAAA,EAAA,KAAK,EAAC,cAAc,EAAA,EAAE,IAAI,CAAC,OAAO,CAAK,KAE1CA,OAAQ,CAAA,MAAA,EAAA,IAAA,CAAA,CACT,CACG,CACF,CACF;;;;;;;"}

package/dist/cjs/bh-property-switcher.cjs.entry.js

@@ -220,7 +220,7 @@ const BhPropertySwitcher = class {
         };
         const selectedProp = this.getSelectedProperty();
         const displayName = this.internalSelectedProperty || this.selectedProperty;
-        return (index.h(index.Host, { key: '02541bacd9b48dbf5c8939ed6b4f9a08393e788c' }, index.h("div", { key: 'cb0f6de5ee67caa19e6a7022ec89347d81dbda7e', ref: (el) => (this.switcherRef = el), class: containerClasses }, index.h("button", { key: '4fc5cd736389e8707d4c86ae319a721e685dc88a', class: "property-selector", onClick: () => this.handleToggle(), "aria-expanded": this.isExpanded ? 'true' : 'false', "aria-label": `Property selector: ${displayName}` }, selectedProp && (index.h("span", { key: 'dfe3c36f344113c8edb18c234dc0e9d81fbed9ef', class: "material-symbols-outlined selector-icon" }, this.getPropertyIcon(selectedProp.type))), index.h("span", { key: 'e83cbe7b26f6d8b94557003da87580dd00053acc', class: "property-name" }, displayName), index.h("span", { key: '4f6d01218d1d60afaa148d375d911d2701d9b5bd', class: "material-symbols-outlined expand-icon", "aria-label": this.isExpanded ? 'Collapse Options' : 'Expand Options' }, this.isExpanded ? 'unfold_less' : 'unfold_more')), this.isExpanded && (index.h("div", { key: '9c6ee765cd36535305b9236d46ba96657aeac308', class: "dropdown-panel" }, this.renderSearchInput(), index.h("div", { key: '5433d7a5ad985549a332cd7df7070d123ce98153', class: "dropdown-content" }, this.grouped
+        return (index.h(index.Host, { key: '7e3609a6aaf8106b84cf44bb14341d52577b9440' }, index.h("div", { key: 'ec38e607ef107488e0a82ff4a26f281ffb76671f', ref: (el) => (this.switcherRef = el), class: containerClasses }, index.h("button", { key: 'e6690cf6fe84ae83d918311e94216d9433447878', class: "property-selector", onClick: () => this.handleToggle(), "aria-expanded": this.isExpanded ? 'true' : 'false', "aria-label": `Property selector: ${displayName}` }, selectedProp && (index.h("span", { key: 'f1f90104f3f3a105eeeb1ed3ea4ce9dd4b685f6a', class: "material-symbols-outlined selector-icon" }, this.getPropertyIcon(selectedProp.type))), index.h("span", { key: 'c7b8b1eeb3f7d757e5758eb8a56057f6ef0b1734', class: "property-name" }, displayName), index.h("span", { key: 'ad1e8c8d784e23a17a71b8c826d8929e3caf833d', class: "material-symbols-outlined expand-icon", "aria-label": this.isExpanded ? 'Collapse Options' : 'Expand Options' }, this.isExpanded ? 'unfold_less' : 'unfold_more')), this.isExpanded && (index.h("div", { key: '76b349f2a94edfc69a17c3c58f4b7d3c5f1e3c64', class: "dropdown-panel" }, this.renderSearchInput(), index.h("div", { key: 'a10135c8a9f3b7962045a2eda1226ea5b104470d', class: "dropdown-content" }, this.grouped
             ? this.renderGroupedView()
             : this.renderFlatView()))))));
     }

package/dist/cjs/bh-sidebar.cjs.entry.js

@@ -110,7 +110,7 @@ const BhSidebar = class {
             { id: '12', divider: true },
             { id: '13', label: 'Sign out', icon: 'logout', shortcut: '⇧⌘Q' },
         ];
-        return (index.h(index.Host, { key: 'ec71c0ecf369a2f5fe1028c64509f0257257c20b' }, index.h("div", { key: '40508d1e275db38c62966af84ea11c343322690a', class: sidebarClasses }, index.h("div", { key: 'deda56dad78580220725a59440f960e70440302f', class: "navigation" }, index.h("div", { key: '77d3303bdce1b8fd1e61116888564690d557e34e', class: "gradient-bar" }, index.h("div", { key: 'd65349b1e37f6d1b344422cf96f1237e5c99407f', class: "detail-bar" })), index.h("div", { key: '6a2ae10b8b63e0c8732c166d62cbf43c58fb7c8d', class: "sidebar-content" }, index.h("bh-logo-box", { key: '4204dcb7f5a019c963cd6cf37039f9870e5633a6', logoType: this.logoType, logoSrc: this.logoSrc, assetBasePath: this.assetBasePath }), index.h("div", { key: '0ef83fbb295546ac57829fecb60a238d923e60e2', class: "navigation-section" }, index.h("div", { key: '91631f0e8dccd12bd9e9a02fdce17a2d7a4047e7', class: "search-container" }, index.h("bh-button-icon", { key: '770ce37a93945cc213117d2d54e6e92f9d432c8b', hierarchy: "secondary", size: "sm", iconName: "search", onClick: this.handleSearchClick })), index.h("div", { key: 'e6a86d4e308dff8c44e2875d7a18d11efa0d8451', class: "nav-items" }, this.menuItems.map((item) => (index.h("bh-nav-item", { key: item.label, icon: item.icon, label: item.label, isActive: this.activeItem === item.label, onBhClick: () => this.handleNavItemClick(item.label) }))))), index.h("div", { key: '5db852f9c05cc25175e95d091403d0020d1b730e', class: "sidebar-footer" }, index.h("div", { key: '1f39438f48d87c61d294c52f4bcd7e348bd8418f', class: "footer-navigation" }, this.footerItems.map((item) => (index.h("bh-nav-item", { key: item.label, icon: item.icon, label: item.label, isActive: false, onBhClick: () => this.handleNavItemClick(item.label) })))), index.h("bh-dropdown", { key: '39a0e3293013159a795ed01f856e44ce47cadad1', variant: "avatar", size: "md", avatarSize: "md", avatarSrc: this.avatarUrl, avatarName: this.avatarName, avatarEmail: this.avatarEmail, menuItems: avatarMenuItems, showIcons: true, onBhItemClick: this.handleAvatarMenuClick })))))));
+        return (index.h(index.Host, { key: 'a691fab176445fef65c964390d5277f41b0a6989' }, index.h("div", { key: '99bb35a4e97512d3cf973e6ed73baf44a0a9e71d', class: sidebarClasses }, index.h("div", { key: '74c23339a793aa9e16b9da18f7aa522d8f6b200e', class: "navigation" }, index.h("div", { key: '24e19625c3a9673881bf9b43a37d159250a516b0', class: "gradient-bar" }, index.h("div", { key: '8fbed7913283af8e79f3eea81d074631bb9362d3', class: "detail-bar" })), index.h("div", { key: 'a0063e7c8ca350d68ce51123e60d7783c0fac205', class: "sidebar-content" }, index.h("bh-logo-box", { key: 'cc95c2c8b47d13a2ead0dc412d4cc78ec8493c96', logoType: this.logoType, logoSrc: this.logoSrc, assetBasePath: this.assetBasePath }), index.h("div", { key: 'd58db9cca5be94792b6c7d8894736ba892a567c7', class: "navigation-section" }, index.h("div", { key: '0fabbe81f1f9caf658206cfaed30d712fbdb80a0', class: "search-container" }, index.h("bh-button-icon", { key: '5b57dc0af93d7012c61e4af2e4bd9e0a65d361cd', hierarchy: "secondary", size: "sm", iconName: "search", onClick: this.handleSearchClick })), index.h("div", { key: '11ce9862b88cbc7a416b7ff2005017cb8235d254', class: "nav-items" }, this.menuItems.map((item) => (index.h("bh-nav-item", { key: item.label, icon: item.icon, label: item.label, isActive: this.activeItem === item.label, onBhClick: () => this.handleNavItemClick(item.label) }))))), index.h("div", { key: '8f5e98d9a323da0db57a4e0d972d37fb6f6668d3', class: "sidebar-footer" }, index.h("div", { key: '605a964cee526b95b41080e6914ca58b8ab7dbd1', class: "footer-navigation" }, this.footerItems.map((item) => (index.h("bh-nav-item", { key: item.label, icon: item.icon, label: item.label, isActive: false, onBhClick: () => this.handleNavItemClick(item.label) })))), index.h("bh-dropdown", { key: '0d6026fcbe9fa91e202743beafed2137a7685b8c', variant: "avatar", size: "md", avatarSize: "md", avatarSrc: this.avatarUrl, avatarName: this.avatarName, avatarEmail: this.avatarEmail, menuItems: avatarMenuItems, showIcons: true, onBhItemClick: this.handleAvatarMenuClick })))))));
     }
 };
 BhSidebar.style = bhSidebarCss;

package/dist/cjs/bh-tab-item.cjs.entry.js

@@ -41,11 +41,11 @@ const BhTabItem = class {
             'tab-button-active': this.active,
             'tab-button-disabled': this.disabled,
         };
-        return (index.h(index.Host, { key: 'ef47c62d9595bb0f5648bacb3d4c8e1585d35a91', class: {
+        return (index.h(index.Host, { key: '4ad8e3e786f4a4c8a2c38e518e66ef2ded4c04ca', class: {
                 'tab-item': true,
                 'tab-item-active': this.active,
                 'tab-item-disabled': this.disabled,
-            } }, index.h("button", { key: 'a2e2130bc0cb369c456b9898732cd90350b69a79', class: buttonClasses, part: "button", role: "tab", "aria-selected": this.active ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', disabled: this.disabled, onClick: this.handleClick, type: "button" }, index.h("span", { key: '2c415f19e1901e3d36039b5960b8ba80dd58d545', class: "tab-label", part: "label" }, this.label), index.h("slot", { key: 'd4484b4a489ddd7babdfba449e023370ae9aaea5' }))));
+            } }, index.h("button", { key: 'b149a3ed3cdd49e887545281a5f9a1383443aeca', class: buttonClasses, part: "button", role: "tab", "aria-selected": this.active ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', disabled: this.disabled, onClick: this.handleClick, type: "button" }, index.h("span", { key: '03f58f2761a021310a6cd2f811795dbc95e02ea1', class: "tab-label", part: "label" }, this.label), index.h("slot", { key: 'd96a82e89d9d7c64d1f17c65da4a47f4774ed96a' }))));
     }
 };
 BhTabItem.style = bhTabItemCss;

package/dist/cjs/bh-tabs.cjs.entry.js

@@ -43,7 +43,7 @@ const BhTabs = class {
             [`tabs-${this.orientation}`]: true,
             'tabs-full-width': this.fullWidth,
         };
-        return (index.h(index.Host, { key: '93b74ceb1d093513ff2d5a167e3de238209411a4', class: hostClasses }, index.h("div", { key: '290c0e7ce4d1ae84e566237a122786e305522b9f', class: "tabs-container", part: "container" }, index.h("div", { key: '424276b73c8279c24441a389026c0c7db25e55b1', class: "tabs-list", part: "list", role: "tablist", "aria-orientation": this.orientation }, index.h("slot", { key: 'fe8030d885237dccbef3d1a70bc912c338b038c6' })))));
+        return (index.h(index.Host, { key: '915fc9dbab57751d9f6f862e368463a5b50fa30e', class: hostClasses }, index.h("div", { key: 'c552c2792097fb3bf1e619c992820bdce072e3ba', class: "tabs-container", part: "container" }, index.h("div", { key: 'd8b13f39e97ab56717715ef314be003ed7427d2c', class: "tabs-list", part: "list", role: "tablist", "aria-orientation": this.orientation }, index.h("slot", { key: '665f02ddebaa32b818c4d2b627e15eb878a09a30' })))));
     }
 };
 BhTabs.style = bhTabsCss;

package/dist/cjs/bh-textarea.cjs.entry.js

@@ -151,7 +151,7 @@ const BhTextarea = class {
             'textarea': true,
             'textarea-error': this.error,
         };
-        return (index.h("div", { key: 'a822380cef2104a61c1a8f2f79900b9ed9c12063', class: "textarea-wrapper", part: "wrapper" }, index.h("bh-label", { key: 'd8c77f1ddc75f6b42bc47bb8086ada57ca1c3e35', label: this.showLabel ? this.label : '', required: this.required, showHelpIcon: this.showHelpIcon, helpIconTooltip: this.helpIconTooltip, disabled: this.disabled, onBhHelpClick: this.handleHelpClick }, index.h("div", { key: '6d92f1c3a0f34729c24677c2a071559b5e7d527f', class: containerClasses }, index.h("div", { key: '9ac271fe196de95b9460eea3bf3cbfd1fd768c13', class: "textarea-content" }, index.h("textarea", { key: '1900eb1a188165ef624a41de391b5d0648d1b8b4', ref: (el) => (this.textareaEl = el), class: textareaClasses, name: this.name, value: this.value, placeholder: this.placeholder, disabled: this.disabled, required: this.required, rows: this.rows, maxLength: this.maxLength, style: { resize: this.resize }, "aria-label": this.label, "aria-describedby": this.showHintText && this.hintText ? 'hint-text' : undefined, "aria-invalid": String(this.error), onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, part: "textarea" })))), this.showHintText && this.hintText && (index.h("div", { key: '2733112bfee45f11e13d92631c5f17518634030b', class: { 'hint-text': true, 'hint-error': this.error }, id: "hint-text" }, this.hintText))));
+        return (index.h("div", { key: '3ba4ab7f69578f22fce54ccb4d5155410666ab09', class: "textarea-wrapper", part: "wrapper" }, index.h("bh-label", { key: '745029c57459ed19f51b434913d6a05f549237f4', label: this.showLabel ? this.label : '', required: this.required, showHelpIcon: this.showHelpIcon, helpIconTooltip: this.helpIconTooltip, disabled: this.disabled, onBhHelpClick: this.handleHelpClick }, index.h("div", { key: '0fb037fb570636815a56512170f328b398d9160b', class: containerClasses }, index.h("div", { key: '45608d2ef2fe516cc73c6a0a55b8ed206dd619be', class: "textarea-content" }, index.h("textarea", { key: '1fbf1ce8dff28f1d1350a7ce8bd4197a8fd1371e', ref: (el) => (this.textareaEl = el), class: textareaClasses, name: this.name, value: this.value, placeholder: this.placeholder, disabled: this.disabled, required: this.required, rows: this.rows, maxLength: this.maxLength, style: { resize: this.resize }, "aria-label": this.label, "aria-describedby": this.showHintText && this.hintText ? 'hint-text' : undefined, "aria-invalid": String(this.error), onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, part: "textarea" })))), this.showHintText && this.hintText && (index.h("div", { key: '846989dc96f482b76fdb6c11707568b38217782c', class: { 'hint-text': true, 'hint-error': this.error }, id: "hint-text" }, this.hintText))));
     }
     static get formAssociated() { return true; }
 };

package/dist/cjs/bh-toggle.cjs.entry.js

@@ -131,7 +131,7 @@ const BhToggle = class {
             'toggle-label': true,
             [`toggle-label-${this.size}`]: true,
         };
-        return (index.h("div", { key: 'd07f9c9302c21ab8ecd3e515fe3f1794c2d689b5', class: wrapperClasses, part: "wrapper" }, index.h("div", { key: 'cfb224564cd11c8dacbf9c2426329acc96b703bd', class: switchClasses, onClick: this.handleToggle, onKeyDown: this.handleKeyDown, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onFocus: this.handleFocus, onBlur: this.handleBlur, tabIndex: this.disabled ? -1 : 0, role: "switch", "aria-checked": this.checked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.label || undefined, part: "switch" }, index.h("div", { key: '3e120ce6b54cca6bf06b49ad78784b8f44c5221a', class: buttonClasses, part: "button" })), this.showText && (this.label || this.supportingText) && (index.h("div", { key: 'a4feeb01f7188d35f7871e27cebfb65e72ce580d', class: "toggle-text" }, this.label && (index.h("span", { key: 'dfa097818d779cc768cde6972c0618c26fca10fa', class: labelClasses }, this.label)), this.supportingText && (index.h("div", { key: '332221a6cee6770d1b4026076a35bb6ff53054b1', class: "toggle-supporting-text" }, this.supportingText))))));
+        return (index.h("div", { key: '3ca94d9e9e457008c1b62aa8a0c76ad4823ceb6d', class: wrapperClasses, part: "wrapper" }, index.h("div", { key: 'c7eb0b84e8deb15e3bc9b547992cb465f3dac3f2', class: switchClasses, onClick: this.handleToggle, onKeyDown: this.handleKeyDown, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onFocus: this.handleFocus, onBlur: this.handleBlur, tabIndex: this.disabled ? -1 : 0, role: "switch", "aria-checked": this.checked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.label || undefined, part: "switch" }, index.h("div", { key: 'fbdf8fcdacba58134258f6a1dd84f302149a0396', class: buttonClasses, part: "button" })), this.showText && (this.label || this.supportingText) && (index.h("div", { key: '7bd7f0fb7a5305d2c05d3277e2a6ee6d8c10a0b1', class: "toggle-text" }, this.label && (index.h("span", { key: 'a31d48b6dc2ad837be4c3c0f386720e64f0a8715', class: labelClasses }, this.label)), this.supportingText && (index.h("div", { key: '384b2c7b34396fc3da3ba51c96afe2d74c6de096', class: "toggle-supporting-text" }, this.supportingText))))));
     }
     static get formAssociated() { return true; }
 };

package/dist/cjs/bh-trend-chart.cjs.entry.js

@@ -107,12 +107,12 @@ const BhTrendChart = class {
         const strokeColor = this.getStrokeColor();
         const fillColor = this.getFillColor();
         const gradientId = `gradient-${this.trend}`;
-        return (index.h(index.Host, { key: '91f405355ae70923836b9d9e102cbe65421bef39' }, index.h("div", { key: '9f90f66d9ed904c74e1eb7fd2732ad3d32837eff', class: {
+        return (index.h(index.Host, { key: 'a9ae3f68d2c392e6f091629213174150677ed800' }, index.h("div", { key: '2da0f0cb39c640ebc9d742217640165b4ded870a', class: {
                 'trend-chart': true,
                 [`trend-chart-${this.trend}`]: true,
                 [`trend-chart-${this.variant}`]: true,
                 'trend-chart-animated': this.animated,
-            } }, index.h("svg", { key: '09ac67cf6b1d2e86f1551cc519963fcd826293b5', width: this.width, height: this.height, viewBox: `0 0 ${this.width} ${this.height}`, class: "chart-svg" }, index.h("defs", { key: 'cf3cfe308c1582c27798e2a2b63dd37a9f9452c8' }, index.h("linearGradient", { key: '805e2c9765638b0f872871df8444784297b8d7a1', id: gradientId, x1: "0%", y1: "0%", x2: "0%", y2: "100%" }, index.h("stop", { key: '88b695ba07624d062cead0dfea06e984b742bc82', offset: "0%", "stop-color": fillColor, "stop-opacity": this.variant === 'fill-only' ? 0.4 : 0.2 }), index.h("stop", { key: 'b8e060f9d822042766647ae602121d2fd7e1fa8d', offset: "100%", "stop-color": fillColor, "stop-opacity": this.variant === 'fill-only' ? 0.1 : 0.05 }))), backgroundPath && this.variant !== 'line-only' && (index.h("path", { key: '1866ab67357c0c2fe4c4cda0c0a571a8a0493af4', class: "chart-background", d: backgroundPath, fill: `url(#${gradientId})` })), pathData && this.variant !== 'fill-only' && (index.h("path", { key: '687052b87f652430caae40ac126b69cd2f30e9bc', class: "chart-line", d: pathData, stroke: strokeColor, "stroke-width": "2", fill: "none" }))))));
+            } }, index.h("svg", { key: 'b348daecc48805aa49e2dfc620998ae0f5747d6d', width: this.width, height: this.height, viewBox: `0 0 ${this.width} ${this.height}`, class: "chart-svg" }, index.h("defs", { key: '4c30e217105760d1034116463d2bd50e617fdc5b' }, index.h("linearGradient", { key: 'a58346f9dc4832157c4a1b7dab6df6672e9e110b', id: gradientId, x1: "0%", y1: "0%", x2: "0%", y2: "100%" }, index.h("stop", { key: 'ed3025b5a594bf8e8c9f615c65e0841847625800', offset: "0%", "stop-color": fillColor, "stop-opacity": this.variant === 'fill-only' ? 0.4 : 0.2 }), index.h("stop", { key: 'e6b9c70c81fd46a9798161964ebf9d30695461ed', offset: "100%", "stop-color": fillColor, "stop-opacity": this.variant === 'fill-only' ? 0.1 : 0.05 }))), backgroundPath && this.variant !== 'line-only' && (index.h("path", { key: 'b474572963d12be707798d0ccdf36af2cd74a19d', class: "chart-background", d: backgroundPath, fill: `url(#${gradientId})` })), pathData && this.variant !== 'fill-only' && (index.h("path", { key: '11044ee1046cc575479d1a3f5d30c70342111054', class: "chart-line", d: pathData, stroke: strokeColor, "stroke-width": "2", fill: "none" }))))));
     }
 };
 BhTrendChart.style = bhTrendChartCss;

package/dist/cjs/index-DQwSUT6k.js

@@ -171,14 +171,26 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
                     return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
                         /* webpackMode: "lazy" */
                         './bh-bar-chart.cjs.entry.js')); }).then(processMod, consoleError);
-                case 'bh-container.cjs':
+                case 'bh-card.cjs':
+                    return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
+                        /* webpackMode: "lazy" */
+                        './bh-card.cjs.entry.js')); }).then(processMod, consoleError);
+                case 'bh-card-footer.cjs':
+                    return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
+                        /* webpackMode: "lazy" */
+                        './bh-card-footer.cjs.entry.js')); }).then(processMod, consoleError);
+                case 'bh-card-header.cjs':
+                    return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
+                        /* webpackMode: "lazy" */
+                        './bh-card-header.cjs.entry.js')); }).then(processMod, consoleError);
+                case 'bh-checkbox-group.cjs':
                     return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
                         /* webpackMode: "lazy" */
-                        './bh-container.cjs.entry.js')); }).then(processMod, consoleError);
-                case 'bh-container-footer.cjs':
+                        './bh-checkbox-group.cjs.entry.js')); }).then(processMod, consoleError);
+                case 'bh-checkbox-group-item.cjs':
                     return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
                         /* webpackMode: "lazy" */
-                        './bh-container-footer.cjs.entry.js')); }).then(processMod, consoleError);
+                        './bh-checkbox-group-item.cjs.entry.js')); }).then(processMod, consoleError);
                 case 'bh-date-picker.cjs':
                     return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
                         /* webpackMode: "lazy" */
@@ -207,6 +219,10 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
                     return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
                         /* webpackMode: "lazy" */
                         './bh-input-verification.cjs.entry.js')); }).then(processMod, consoleError);
+                case 'bh-modal.cjs':
+                    return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
+                        /* webpackMode: "lazy" */
+                        './bh-modal.cjs.entry.js')); }).then(processMod, consoleError);
                 case 'bh-modal-actions.cjs':
                     return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
                         /* webpackMode: "lazy" */
@@ -255,6 +271,10 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
                     return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
                         /* webpackMode: "lazy" */
                         './bh-textarea.cjs.entry.js')); }).then(processMod, consoleError);
+                case 'bh-toggle.cjs':
+                    return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
+                        /* webpackMode: "lazy" */
+                        './bh-toggle.cjs.entry.js')); }).then(processMod, consoleError);
                 case 'bh-trend-chart.cjs':
                     return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
                         /* webpackMode: "lazy" */
@@ -263,6 +283,10 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
                     return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
                         /* webpackMode: "lazy" */
                         './bh-avatar-add.cjs.entry.js')); }).then(processMod, consoleError);
+                case 'bh-badge.cjs':
+                    return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
+                        /* webpackMode: "lazy" */
+                        './bh-badge.cjs.entry.js')); }).then(processMod, consoleError);
                 case 'bh-date-range-picker-content.cjs':
                     return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
                         /* webpackMode: "lazy" */
@@ -291,6 +315,10 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
                     return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
                         /* webpackMode: "lazy" */
                         './bh-featured-icon.cjs.entry.js')); }).then(processMod, consoleError);
+                case 'bh-avatar.cjs':
+                    return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
+                        /* webpackMode: "lazy" */
+                        './bh-avatar.cjs.entry.js')); }).then(processMod, consoleError);
                 case 'bh-month-picker-content.cjs':
                     return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
                         /* webpackMode: "lazy" */
@@ -299,14 +327,10 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
                     return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
                         /* webpackMode: "lazy" */
                         './bh-button-icon.cjs.entry.js')); }).then(processMod, consoleError);
-                case 'bh-label_2.cjs':
-                    return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
-                        /* webpackMode: "lazy" */
-                        './bh-label_2.cjs.entry.js')); }).then(processMod, consoleError);
-                case 'bh-button_2.cjs':
+                case 'bh-data-grid.cjs':
                     return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
                         /* webpackMode: "lazy" */
-                        './bh-button_2.cjs.entry.js')); }).then(processMod, consoleError);
+                        './bh-data-grid.cjs.entry.js')); }).then(processMod, consoleError);
                 case 'bh-autocomplete-menu_2.cjs':
                     return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
                         /* webpackMode: "lazy" */
@@ -315,10 +339,6 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
                     return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
                         /* webpackMode: "lazy" */
                         './bh-badge-dot_2.cjs.entry.js')); }).then(processMod, consoleError);
-                case 'bh-empty-state_3.cjs':
-                    return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
-                        /* webpackMode: "lazy" */
-                        './bh-empty-state_3.cjs.entry.js')); }).then(processMod, consoleError);
                 case 'bh-page-navigation-multi-level_2.cjs':
                     return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
                         /* webpackMode: "lazy" */
@@ -331,50 +351,22 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
                     return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
                         /* webpackMode: "lazy" */
                         './bh-input-text_2.cjs.entry.js')); }).then(processMod, consoleError);
-                case 'bh-dropdown_3.cjs':
-                    return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
-                        /* webpackMode: "lazy" */
-                        './bh-dropdown_3.cjs.entry.js')); }).then(processMod, consoleError);
-                case 'bh-card.cjs':
-                    return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
-                        /* webpackMode: "lazy" */
-                        './bh-card.cjs.entry.js')); }).then(processMod, consoleError);
-                case 'bh-card-footer.cjs':
-                    return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
-                        /* webpackMode: "lazy" */
-                        './bh-card-footer.cjs.entry.js')); }).then(processMod, consoleError);
-                case 'bh-card-header.cjs':
-                    return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
-                        /* webpackMode: "lazy" */
-                        './bh-card-header.cjs.entry.js')); }).then(processMod, consoleError);
-                case 'bh-checkbox-group.cjs':
-                    return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
-                        /* webpackMode: "lazy" */
-                        './bh-checkbox-group.cjs.entry.js')); }).then(processMod, consoleError);
-                case 'bh-checkbox-group-item.cjs':
-                    return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
-                        /* webpackMode: "lazy" */
-                        './bh-checkbox-group-item.cjs.entry.js')); }).then(processMod, consoleError);
-                case 'bh-data-grid.cjs':
-                    return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
-                        /* webpackMode: "lazy" */
-                        './bh-data-grid.cjs.entry.js')); }).then(processMod, consoleError);
-                case 'bh-modal.cjs':
+                case 'bh-label_2.cjs':
                     return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
                         /* webpackMode: "lazy" */
-                        './bh-modal.cjs.entry.js')); }).then(processMod, consoleError);
-                case 'bh-toggle.cjs':
+                        './bh-label_2.cjs.entry.js')); }).then(processMod, consoleError);
+                case 'bh-button_2.cjs':
                     return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
                         /* webpackMode: "lazy" */
-                        './bh-toggle.cjs.entry.js')); }).then(processMod, consoleError);
-                case 'bh-badge.cjs':
+                        './bh-button_2.cjs.entry.js')); }).then(processMod, consoleError);
+                case 'bh-empty-state_3.cjs':
                     return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
                         /* webpackMode: "lazy" */
-                        './bh-badge.cjs.entry.js')); }).then(processMod, consoleError);
-                case 'bh-avatar.cjs':
+                        './bh-empty-state_3.cjs.entry.js')); }).then(processMod, consoleError);
+                case 'bh-dropdown_3.cjs':
                     return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
                         /* webpackMode: "lazy" */
-                        './bh-avatar.cjs.entry.js')); }).then(processMod, consoleError);
+                        './bh-dropdown_3.cjs.entry.js')); }).then(processMod, consoleError);
           }
       }
   return (function (t) { return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(t)); }); })(