@actabldesign/bellhop-core 0.0.3 → 0.0.6

package/cjs/bh-dropdown-menu.cjs.entry.js

@@ -1,114 +0,0 @@
-'use strict';
-
-var index = require('./index-tZqSQc8E.js');
-
-const bhDropdownMenuCss = ":host{display:block}.dropdown-menu{width:240px;background:var(--color-white);border-radius:var(--radius-md);box-shadow:0px 32px 64px -12px rgba(64, 73, 104, 0.14),\n    0px 0px 1px 1px rgba(64, 73, 104, 0.1);overflow:hidden;flex-shrink:0;position:relative;box-sizing:border-box}.animate-dropdown-enter{animation:dropdownEnter 0.15s ease-out forwards}.animate-dropdown-exit{animation:dropdownExit 0.15s ease-in forwards}@keyframes dropdownEnter{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@keyframes dropdownExit{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-8px)}}.dropdown-header{padding:var(--spacing-lg) var(--spacing-xl);border-bottom:1px solid var(--color-neutral-200)}.dropdown-header-avatar{padding:var(--spacing-lg) var(--spacing-xl)}.avatar-group{display:flex;align-items:center;gap:var(--spacing-lg);width:100%}.avatar-text{display:flex;flex-direction:column;flex:1;min-width:0}.avatar-name{font-family:var(--font-inter);font-weight:var(--weight-semibold);font-size:var(--text-sm-size);text-align:left;line-height:1.43;color:var(--color-neutral-800);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.avatar-email{font-family:var(--font-inter);font-weight:var(--weight-regular);font-size:var(--text-sm-size);line-height:1.43;color:var(--color-neutral-600);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.header-title{font-family:var(--font-inter);font-weight:var(--weight-semibold);font-size:var(--text-sm-size);line-height:1.43;color:var(--color-neutral-800);margin:0}.menu-items{padding:var(--spacing-xs) 0}.dropdown-item{padding:var(--spacing-none) var(--spacing-sm);cursor:pointer}.dropdown-item-disabled{opacity:0.5;cursor:not-allowed}.item-content{display:flex;align-items:center;gap:var(--spacing-lg);padding:var(--spacing-md) var(--spacing-md);border-radius:var(--radius-sm);transition:background-color 0.15s ease}.dropdown-item:hover:not(.dropdown-item-disabled) .item-content{background:var(--color-neutral-100)}.item-main{display:flex;align-items:center;gap:var(--spacing-md);flex:1;min-width:0}.item-icon{font-size:var(--icon-size-md, 20px);color:var(--color-neutral-600);flex-shrink:0;display:flex;align-items:center;justify-content:center}.item-text{font-family:var(--font-inter);font-weight:var(--weight-medium);font-size:var(--text-sm-size);line-height:var(--text-sm-line);color:var(--color-neutral-700);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.item-shortcut{font-family:var(--font-inter);font-weight:var(--weight-regular);font-size:var(--text-xs-size);line-height:1.5;color:var(--color-neutral-500);flex-shrink:0}.menu-divider{height:1px;background:var(--color-neutral-200);margin:var(--spacing-xs) 0}.dropdown-menu-scrollable .menu-items{max-height:280px;overflow-y:auto;overflow-x:hidden}.dropdown-menu-scrollable .menu-items::-webkit-scrollbar{width:6px}.dropdown-menu-scrollable .menu-items::-webkit-scrollbar-track{background:var(--color-neutral-50);border-radius:var(--radius-xs)}.dropdown-menu-scrollable .menu-items::-webkit-scrollbar-thumb{background:var(--color-neutral-200);border-radius:var(--radius-xs)}.dropdown-menu-scrollable .menu-items::-webkit-scrollbar-thumb:hover{background:var(--color-neutral-300)}.dropdown-menu-scrollable .menu-items{scrollbar-width:thin;scrollbar-color:var(--color-neutral-200) var(--color-neutral-50)}";
-
-const BhDropdownMenu = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.bhItemClick = index.createEvent(this, "bhItemClick");
-    }
-    /**
-     * Header configuration (JSON string or object)
-     */
-    header;
-    /**
-     * Menu items array (JSON string or array)
-     */
-    menuItems = [];
-    /**
-     * Whether the menu is visible
-     */
-    visible = true;
-    /**
-     * Whether to show icons in menu items
-     */
-    showIcons = true;
-    /**
-     * Whether the menu should be scrollable
-     */
-    scrollable = false;
-    isClosing = false;
-    shouldRender = true;
-    /**
-     * Event emitted when a menu item is clicked
-     */
-    bhItemClick;
-    get parsedHeader() {
-        if (!this.header)
-            return undefined;
-        if (typeof this.header === 'string') {
-            try {
-                return JSON.parse(this.header);
-            }
-            catch {
-                return undefined;
-            }
-        }
-        return this.header;
-    }
-    get parsedMenuItems() {
-        if (typeof this.menuItems === 'string') {
-            try {
-                return JSON.parse(this.menuItems);
-            }
-            catch {
-                return [];
-            }
-        }
-        return this.menuItems || [];
-    }
-    watchVisible(newValue) {
-        if (newValue) {
-            this.shouldRender = true;
-            this.isClosing = false;
-        }
-        else {
-            this.isClosing = true;
-            setTimeout(() => {
-                this.shouldRender = false;
-                this.isClosing = false;
-            }, 150);
-        }
-    }
-    componentWillLoad() {
-        this.shouldRender = this.visible;
-    }
-    handleItemClick(item) {
-        if (!item.disabled && !item.divider) {
-            this.bhItemClick.emit(item);
-        }
-    }
-    getMenuItemClasses(item) {
-        return {
-            'dropdown-item': true,
-            'dropdown-item-disabled': !!item.disabled,
-        };
-    }
-    render() {
-        if (!this.visible) {
-            return null;
-        }
-        const header = this.parsedHeader;
-        const items = this.parsedMenuItems;
-        const dropdownClasses = {
-            'dropdown-menu': true,
-            'dropdown-menu-scrollable': this.scrollable,
-            'animate-dropdown-enter': true,
-            'animate-dropdown-exit': false,
-        };
-        const headerClasses = {
-            'dropdown-header': true,
-            'dropdown-header-avatar': !!header?.avatarGroup,
-        };
-        return (index.h("div", { class: dropdownClasses }, header && (index.h("div", { class: headerClasses }, header.avatarGroup && (index.h("div", { class: "avatar-group" }, index.h("bh-avatar", { size: "md", type: "image", status: "online", imageSrc: header.avatarSrc || '', alt: header.name || 'Avatar' }), index.h("div", { class: "avatar-text" }, index.h("div", { class: "avatar-name" }, header.name), index.h("div", { class: "avatar-email" }, header.email)))), !header.avatarGroup && header.title && (index.h("div", { class: "header-title" }, header.title)))), index.h("div", { class: "menu-items" }, items.map((item) => (index.h("div", { key: item.id }, item.divider && index.h("div", { class: "menu-divider" }), !item.divider && (index.h("div", { class: this.getMenuItemClasses(item), onClick: () => this.handleItemClick(item) }, index.h("div", { class: "item-content" }, index.h("div", { class: "item-main" }, item.icon && this.showIcons && (index.h("span", { class: "material-symbols-outlined item-icon" }, item.icon)), index.h("span", { class: "item-text", title: item.label }, item.label)), item.shortcut && (index.h("span", { class: "item-shortcut" }, item.shortcut)))))))))));
-    }
-    static get watchers() { return {
-        "visible": ["watchVisible"]
-    }; }
-};
-BhDropdownMenu.style = bhDropdownMenuCss;
-
-exports.bh_dropdown_menu = BhDropdownMenu;
-//# sourceMappingURL=bh-dropdown-menu.entry.cjs.js.map

package/cjs/bh-dropdown.bh-logo-box.bh-nav-item.entry.cjs.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"bh-dropdown.bh-logo-box.bh-nav-item.entry.cjs.js","sources":["src/components/bh-dropdown/bh-dropdown.css?tag=bh-dropdown&encapsulation=shadow","src/components/bh-dropdown/bh-dropdown.tsx","src/components/bh-logo-box/bh-logo-box.css?tag=bh-logo-box&encapsulation=shadow","src/components/bh-logo-box/bh-logo-box.tsx","src/components/bh-sidebar/bh-nav-item.css?tag=bh-nav-item&encapsulation=shadow","src/components/bh-sidebar/bh-nav-item.tsx"],"sourcesContent":["/* ==========================================================================\n   BH-DROPDOWN COMPONENT STYLES\n   ========================================================================== */\n\n:host {\n  display: inline-block;\n  position: relative;\n}\n\n.dropdown-container {\n  position: relative;\n  display: inline-block;\n}\n\n/* Position the dropdown menu */\n.dropdown-container bh-dropdown-menu {\n  position: absolute;\n  z-index: 1000;\n}\n\n/* Default positioning for button variants (below trigger) */\n.dropdown-container:not(.dropdown-avatar-variant) bh-dropdown-menu {\n  top: 100%;\n  right: 0;\n  margin-top: var(--spacing-sm);\n}\n\n/* Avatar variant positioning (to the left of avatar for sidebars) */\n.dropdown-avatar-variant bh-dropdown-menu {\n  bottom: 0;\n  left: calc(100% + var(--spacing-sm));\n}\n\n/* Avatar trigger styles */\n.dropdown-avatar {\n  cursor: pointer;\n  border-radius: 50%;\n  transition: box-shadow 0.2s ease;\n  outline: none;\n  display: inline-block;\n  user-select: none;\n}\n\n.dropdown-avatar:hover:not(.dropdown-avatar-disabled) {\n  box-shadow: 0 0 0 2px var(--color-neutral-200);\n}\n\n.dropdown-avatar:focus:not(.dropdown-avatar-disabled) {\n  box-shadow: 0 0 0 2px var(--color-brand-500);\n}\n\n.dropdown-avatar-focus {\n  box-shadow: 0 0 0 2px var(--color-brand-500);\n}\n\n.dropdown-avatar-disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n/* Button state when dropdown is open */\n.dropdown-open bh-button {\n  --button-focus-ring: 0 0 0 2px var(--color-brand-100);\n}\n","import {\n  Component,\n  Prop,\n  State,\n  Event,\n  EventEmitter,\n  Element,\n  h,\n  Listen,\n} from '@stencil/core';\nimport type {\n  DropdownMenuItem,\n  DropdownMenuHeader,\n} from '../bh-dropdown-menu/bh-dropdown-menu';\n\nexport type DropdownSize = 'sm' | 'md';\nexport type DropdownState = 'default' | 'focus' | 'disabled';\nexport type DropdownVariant =\n  | 'outlined'\n  | 'ghost'\n  | 'icon-only-outlined'\n  | 'icon-only-ghost'\n  | 'avatar';\n\n@Component({\n  tag: 'bh-dropdown',\n  styleUrl: 'bh-dropdown.css',\n  shadow: true,\n})\nexport class BhDropdown {\n  @Element() el!: HTMLElement;\n\n  /**\n   * Size of the dropdown trigger\n   */\n  @Prop() size: DropdownSize = 'md';\n\n  /**\n   * State of the dropdown\n   */\n  @Prop() state: DropdownState = 'default';\n\n  /**\n   * Visual variant of the dropdown trigger\n   */\n  @Prop() variant: DropdownVariant = 'outlined';\n\n  /**\n   * Label for the dropdown button\n   */\n  @Prop() label: string = 'Options';\n\n  /**\n   * Icon name for icon-only variants\n   */\n  @Prop() iconName: string = 'more_vert';\n\n  /**\n   * Whether the dropdown is disabled\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Menu items (JSON string or array)\n   */\n  @Prop() menuItems: DropdownMenuItem[] | string = [];\n\n  /**\n   * Header configuration (JSON string or object)\n   */\n  @Prop() header?: DropdownMenuHeader | string;\n\n  /**\n   * Avatar image source for avatar variant\n   */\n  @Prop() avatarSrc: string = '';\n\n  /**\n   * Avatar alt text\n   */\n  @Prop() avatarAlt: string = 'Avatar';\n\n  /**\n   * Avatar size for avatar variant\n   */\n  @Prop() avatarSize: 'sm' | 'md' | 'lg' = 'md';\n\n  /**\n   * Avatar name for header\n   */\n  @Prop() avatarName?: string;\n\n  /**\n   * Avatar email for header\n   */\n  @Prop() avatarEmail?: string;\n\n  /**\n   * Whether to show icons in menu items\n   */\n  @Prop() showIcons: boolean = true;\n\n  @State() isOpen: boolean = false;\n\n  /**\n   * Event emitted when a menu item is clicked\n   */\n  @Event() bhItemClick!: EventEmitter<DropdownMenuItem>;\n\n  @Listen('click', { target: 'document' })\n  handleClickOutside(event: MouseEvent) {\n    if (this.isOpen && !this.el.contains(event.target as Node)) {\n      this.isOpen = false;\n    }\n  }\n\n  private get parsedMenuItems(): DropdownMenuItem[] {\n    if (typeof this.menuItems === 'string') {\n      try {\n        return JSON.parse(this.menuItems);\n      } catch {\n        return [];\n      }\n    }\n    return this.menuItems || [];\n  }\n\n  private get parsedHeader(): DropdownMenuHeader | undefined {\n    if (this.variant === 'avatar') {\n      return {\n        avatarGroup: true,\n        avatarSrc: this.avatarSrc,\n        name: this.avatarName,\n        email: this.avatarEmail,\n      };\n    }\n    if (!this.header) return undefined;\n    if (typeof this.header === 'string') {\n      try {\n        return JSON.parse(this.header);\n      } catch {\n        return undefined;\n      }\n    }\n    return this.header;\n  }\n\n  private toggleDropdown = () => {\n    if (this.disabled) return;\n    this.isOpen = !this.isOpen;\n  };\n\n  private handleMenuItemClick = (event: CustomEvent<DropdownMenuItem>) => {\n    const item = event.detail;\n    if (!item.disabled) {\n      this.bhItemClick.emit(item);\n      this.isOpen = false;\n    }\n  };\n\n  private get isIconOnly(): boolean {\n    return (\n      this.variant === 'icon-only-outlined' ||\n      this.variant === 'icon-only-ghost'\n    );\n  }\n\n  private get showAvatar(): boolean {\n    return this.variant === 'avatar';\n  }\n\n  private get buttonHierarchy(): 'secondary' | 'tertiary' {\n    return this.variant === 'ghost' || this.variant === 'icon-only-ghost'\n      ? 'tertiary'\n      : 'secondary';\n  }\n\n  render() {\n    const containerClasses = {\n      'dropdown-container': true,\n      'dropdown-open': this.isOpen,\n      'dropdown-avatar-variant': this.variant === 'avatar',\n    };\n\n    const avatarClasses = {\n      'dropdown-avatar': true,\n      'dropdown-avatar-focus': this.isOpen,\n      'dropdown-avatar-disabled': this.disabled,\n    };\n\n    return (\n      <div class={containerClasses}>\n        {/* Button variants */}\n        {!this.showAvatar && (\n          <bh-button\n            hierarchy={this.buttonHierarchy}\n            icon={this.isIconOnly ? 'only' : 'trailing'}\n            size={this.size}\n            label={this.isIconOnly ? '' : this.label}\n            iconName={this.isIconOnly ? this.iconName : 'expand_more'}\n            disabled={this.disabled}\n            onClick={this.toggleDropdown}\n          />\n        )}\n\n        {/* Avatar variant */}\n        {this.showAvatar && (\n          <div\n            class={avatarClasses}\n            onClick={(e) => {\n              if (!this.disabled) {\n                e.stopPropagation();\n                this.toggleDropdown();\n              }\n            }}\n            role=\"button\"\n            tabindex={this.disabled ? -1 : 0}\n            onKeyDown={(e: KeyboardEvent) => {\n              if (!this.disabled && (e.key === 'Enter' || e.key === ' ')) {\n                e.preventDefault();\n                this.toggleDropdown();\n              }\n            }}\n          >\n            <bh-avatar\n              type=\"image\"\n              size={this.avatarSize}\n              imageSrc={this.avatarSrc}\n              alt={this.avatarAlt}\n            />\n          </div>\n        )}\n\n        {/* Menu */}\n        <bh-dropdown-menu\n          visible={this.isOpen}\n          showIcons={this.showIcons}\n          menuItems={JSON.stringify(this.parsedMenuItems)}\n          header={\n            this.parsedHeader ? JSON.stringify(this.parsedHeader) : undefined\n          }\n          onBhItemClick={this.handleMenuItemClick}\n        />\n      </div>\n    );\n  }\n}\n",".logo-box {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: flex-start;\n  position: relative;\n  width: 40px;\n  flex-shrink: 0;\n  isolation: isolate;\n}\n\n.logo-active {\n  background-color: var(--color-brand-600);\n  box-sizing: border-box;\n  display: flex;\n  gap: var(--spacing-lg);\n  align-items: center;\n  justify-content: center;\n  padding: var(--spacing-sm);\n  position: relative;\n  border-radius: var(--radius-md);\n  flex-shrink: 0;\n  width: 40px;\n  height: 40px;\n  z-index: 2;\n  transition: background-color 0.3s ease;\n  cursor: pointer;\n}\n\n/* Hover effect for logo-active */\n.logo-box:hover .logo-active,\n.logo-box.dropdown-open .logo-active {\n  background-color: var(--color-brand-700);\n}\n\n.logo {\n  overflow: hidden;\n  position: relative;\n  flex-shrink: 0;\n  width: 32px;\n  height: 32px;\n  background-size: contain;\n  background-repeat: no-repeat;\n  background-position: center;\n  transition: background-image 0.4s cubic-bezier(0.08, 0.52, 0.52, 1);\n}\n\n/* Logo variations - Background images must be configured by the consuming application */\n.logo-actabl {\n  /* background-image should be set by consuming application */\n}\n\n.logo-al {\n  /* background-image should be set by consuming application */\n}\n\n.logo-he {\n  /* background-image should be set by consuming application */\n}\n\n.logo-ps {\n  /* background-image should be set by consuming application */\n}\n\n.logo-tr {\n  /* background-image should be set by consuming application */\n}\n\n.logo-more-products {\n  position: absolute;\n  background-color: var(--color-brand-200);\n  right: 2px;\n  bottom: -4px;\n  border-radius: 5px;\n  width: 36px;\n  height: 35px;\n  z-index: 1;\n  transition: transform 0.3s ease;\n}\n\n/* Slide-up animation for logo-more-products */\n.logo-box:hover .logo-more-products,\n.logo-box.dropdown-open .logo-more-products {\n  transform: translateY(-4px);\n}\n","import { Component, Prop, Event, EventEmitter, State, h, Host } from '@stencil/core';\nimport { BhProduct } from '../bh-product-switcher/bh-product-switcher';\n\nexport type LogoType = 'actabl' | 'al' | 'he' | 'ps' | 'tr';\n\n@Component({\n  tag: 'bh-logo-box',\n  styleUrl: 'bh-logo-box.css',\n  shadow: true,\n})\nexport class BhLogoBox {\n  /**\n   * Type of logo to display\n   */\n  @Prop() logoType: LogoType = 'actabl';\n\n  /**\n   * Array of products to display in the switcher\n   */\n  @Prop() products: BhProduct[] = [\n    {\n      id: 'alice',\n      name: 'Alice',\n      description: 'Housekeeping & Guest Services',\n      logo: './assets/logos/AL.svg',\n    },\n    {\n      id: 'hotel-effectiveness',\n      name: 'Hotel Effectiveness',\n      description: 'Labor planning',\n      logo: './assets/logos/HE.svg',\n    },\n    {\n      id: 'profit-sword',\n      name: 'ProfitSword',\n      description: 'B.I and Finance',\n      logo: './assets/logos/PS.svg',\n    },\n    {\n      id: 'transcendent',\n      name: 'Transcendent',\n      description: 'Asset Management & CapEx',\n      logo: './assets/logos/TR.svg',\n    },\n  ];\n\n  /**\n   * Event emitted when a product is selected\n   */\n  @Event() bhProductSelect!: EventEmitter<BhProduct>;\n\n  @State() isOpen: boolean = false;\n  @State() anchorPosition = { top: 0, left: 0 };\n\n  private logoActiveRef?: HTMLDivElement;\n\n  private handleLogoClick = () => {\n    if (this.logoActiveRef) {\n      const rect = this.logoActiveRef.getBoundingClientRect();\n      this.anchorPosition = {\n        top: rect.bottom + 8,\n        left: rect.left,\n      };\n      this.isOpen = !this.isOpen;\n    }\n  };\n\n  private handleClose = () => {\n    this.isOpen = false;\n  };\n\n  private handleProductSelect = (event: CustomEvent<BhProduct>) => {\n    this.bhProductSelect.emit(event.detail);\n    this.isOpen = false;\n  };\n\n  private getLogoSrc = () => {\n    switch (this.logoType) {\n      case 'actabl':\n        return './assets/logos/actabl.svg';\n      case 'al':\n        return './assets/logos/AL.svg';\n      case 'he':\n        return './assets/logos/HE.svg';\n      case 'ps':\n        return './assets/logos/PS.svg';\n      case 'tr':\n        return './assets/logos/TR.svg';\n      default:\n        return './assets/logos/actabl.svg';\n    }\n  };\n\n  render() {\n    const logoBoxClasses = {\n      'logo-box': true,\n      'dropdown-open': this.isOpen,\n    };\n\n    const logoClasses = {\n      'logo': true,\n      [`logo-${this.logoType}`]: true,\n    };\n\n    return (\n      <Host>\n        <div class={logoBoxClasses}>\n          <div\n            ref={(el) => (this.logoActiveRef = el)}\n            class=\"logo-active\"\n            onClick={this.handleLogoClick}\n          >\n            <img\n              src={this.getLogoSrc()}\n              alt={`${this.logoType} logo`}\n              class={logoClasses}\n            />\n          </div>\n          <div class=\"logo-more-products\"></div>\n        </div>\n\n        <bh-product-switcher\n          isOpen={this.isOpen}\n          anchorPosition={this.anchorPosition}\n          products={this.products}\n          onBhClose={this.handleClose}\n          onBhProductSelect={this.handleProductSelect}\n        ></bh-product-switcher>\n      </Host>\n    );\n  }\n}\n","/* ==========================================================================\n   BH-NAV-ITEM COMPONENT STYLES\n   Navigation item for sidebar navigation\n   ========================================================================== */\n\n:host {\n  display: inline-block;\n}\n\n.nav-item {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: flex-start;\n  position: relative;\n  flex-shrink: 0;\n  width: 100%;\n  max-width: 52px;\n  height: fit-content;\n}\n\n.nav-item-button {\n  background-color: var(--color-white);\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  overflow: hidden;\n  padding: var(--spacing-md);\n  position: relative;\n  border-radius: var(--radius-sm);\n  flex-shrink: 0;\n  transition: background-color 0.2s ease;\n  cursor: pointer;\n  border: none;\n  outline: none;\n}\n\n.nav-item-button:hover {\n  background-color: var(--color-neutral-50);\n}\n\n.nav-item-button:focus-visible {\n  box-shadow: 0 0 0 2px var(--color-brand-100);\n}\n\n.nav-item.active .nav-item-button {\n  background-color: var(--color-brand-50);\n}\n\n.nav-item-button .icon {\n  width: 20px;\n  height: 20px;\n  display: block;\n  flex-shrink: 0;\n  color: var(--color-neutral-500);\n  transition: color 0.2s ease;\n  font-size: 20px;\n  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;\n}\n\n.nav-item-button:hover .icon {\n  color: var(--color-neutral-700);\n}\n\n.nav-item.active .nav-item-button .icon {\n  color: var(--color-brand-600);\n  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;\n}\n\n.nav-item-label {\n  font-family: var(--font-inter);\n  font-weight: var(--weight-medium);\n  height: 18px;\n  line-height: 18px;\n  font-style: normal;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  position: relative;\n  flex-shrink: 0;\n  color: var(--color-neutral-700);\n  font-size: 10px;\n  text-align: center;\n  white-space: nowrap;\n  width: 100%;\n  max-width: 100%;\n  margin: var(--spacing-none);\n  margin-top: var(--spacing-xxs);\n  box-sizing: border-box;\n  direction: ltr;\n}\n\n.nav-item.active .nav-item-label {\n  color: var(--color-neutral-700);\n  font-weight: var(--weight-semibold);\n}\n\n/* Disabled state */\n.nav-item.disabled .nav-item-button {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n.nav-item.disabled .nav-item-button:hover {\n  background-color: var(--color-white);\n}\n\n.nav-item.disabled .nav-item-button .icon {\n  color: var(--color-neutral-400);\n}\n\n.nav-item.disabled .nav-item-label {\n  color: var(--color-neutral-400);\n}\n","import { Component, Prop, Event, EventEmitter, h } from '@stencil/core';\n\n@Component({\n  tag: 'bh-nav-item',\n  styleUrl: 'bh-nav-item.css',\n  shadow: true,\n})\nexport class BhNavItem {\n  /**\n   * Material Symbols icon name\n   */\n  @Prop() icon: string = 'home';\n\n  /**\n   * Label text displayed below the icon\n   */\n  @Prop() label: string = 'Home';\n\n  /**\n   * Whether the nav item is active/selected\n   */\n  @Prop() isActive: boolean = false;\n\n  /**\n   * Whether the nav item is disabled\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Event emitted when the nav item is clicked\n   */\n  @Event() bhClick!: EventEmitter<void>;\n\n  private handleClick = () => {\n    if (!this.disabled) {\n      this.bhClick.emit();\n    }\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if ((event.key === 'Enter' || event.key === ' ') && !this.disabled) {\n      event.preventDefault();\n      this.bhClick.emit();\n    }\n  };\n\n  render() {\n    const navItemClasses = {\n      'nav-item': true,\n      'active': this.isActive,\n      'disabled': this.disabled,\n    };\n\n    return (\n      <div class={navItemClasses}>\n        <button\n          class=\"nav-item-button\"\n          aria-label={this.label}\n          type=\"button\"\n          onClick={this.handleClick}\n          onKeyDown={this.handleKeyDown}\n          disabled={this.disabled}\n          tabIndex={this.disabled ? -1 : 0}\n        >\n          <span class=\"material-symbols-outlined icon\">{this.icon}</span>\n        </button>\n        <p class=\"nav-item-label\">{this.label}</p>\n      </div>\n    );\n  }\n}\n"],"names":["h","Host"],"mappings":"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"}

package/cjs/bh-dropdown_3.cjs.entry.js

@@ -1,307 +0,0 @@
-'use strict';
-
-var index = require('./index-tZqSQc8E.js');
-
-const bhDropdownCss = ":host{display:inline-block;position:relative}.dropdown-container{position:relative;display:inline-block}.dropdown-container bh-dropdown-menu{position:absolute;z-index:1000}.dropdown-container:not(.dropdown-avatar-variant) bh-dropdown-menu{top:100%;right:0;margin-top:var(--spacing-sm)}.dropdown-avatar-variant bh-dropdown-menu{bottom:0;left:calc(100% + var(--spacing-sm))}.dropdown-avatar{cursor:pointer;border-radius:50%;transition:box-shadow 0.2s ease;outline:none;display:inline-block;user-select:none}.dropdown-avatar:hover:not(.dropdown-avatar-disabled){box-shadow:0 0 0 2px var(--color-neutral-200)}.dropdown-avatar:focus:not(.dropdown-avatar-disabled){box-shadow:0 0 0 2px var(--color-brand-500)}.dropdown-avatar-focus{box-shadow:0 0 0 2px var(--color-brand-500)}.dropdown-avatar-disabled{cursor:not-allowed;opacity:0.5}.dropdown-open bh-button{--button-focus-ring:0 0 0 2px var(--color-brand-100)}";
-
-const BhDropdown = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.bhItemClick = index.createEvent(this, "bhItemClick");
-    }
-    get el() { return index.getElement(this); }
-    /**
-     * Size of the dropdown trigger
-     */
-    size = 'md';
-    /**
-     * State of the dropdown
-     */
-    state = 'default';
-    /**
-     * Visual variant of the dropdown trigger
-     */
-    variant = 'outlined';
-    /**
-     * Label for the dropdown button
-     */
-    label = 'Options';
-    /**
-     * Icon name for icon-only variants
-     */
-    iconName = 'more_vert';
-    /**
-     * Whether the dropdown is disabled
-     */
-    disabled = false;
-    /**
-     * Menu items (JSON string or array)
-     */
-    menuItems = [];
-    /**
-     * Header configuration (JSON string or object)
-     */
-    header;
-    /**
-     * Avatar image source for avatar variant
-     */
-    avatarSrc = '';
-    /**
-     * Avatar alt text
-     */
-    avatarAlt = 'Avatar';
-    /**
-     * Avatar size for avatar variant
-     */
-    avatarSize = 'md';
-    /**
-     * Avatar name for header
-     */
-    avatarName;
-    /**
-     * Avatar email for header
-     */
-    avatarEmail;
-    /**
-     * Whether to show icons in menu items
-     */
-    showIcons = true;
-    isOpen = false;
-    /**
-     * Event emitted when a menu item is clicked
-     */
-    bhItemClick;
-    handleClickOutside(event) {
-        if (this.isOpen && !this.el.contains(event.target)) {
-            this.isOpen = false;
-        }
-    }
-    get parsedMenuItems() {
-        if (typeof this.menuItems === 'string') {
-            try {
-                return JSON.parse(this.menuItems);
-            }
-            catch {
-                return [];
-            }
-        }
-        return this.menuItems || [];
-    }
-    get parsedHeader() {
-        if (this.variant === 'avatar') {
-            return {
-                avatarGroup: true,
-                avatarSrc: this.avatarSrc,
-                name: this.avatarName,
-                email: this.avatarEmail,
-            };
-        }
-        if (!this.header)
-            return undefined;
-        if (typeof this.header === 'string') {
-            try {
-                return JSON.parse(this.header);
-            }
-            catch {
-                return undefined;
-            }
-        }
-        return this.header;
-    }
-    toggleDropdown = () => {
-        if (this.disabled)
-            return;
-        this.isOpen = !this.isOpen;
-    };
-    handleMenuItemClick = (event) => {
-        const item = event.detail;
-        if (!item.disabled) {
-            this.bhItemClick.emit(item);
-            this.isOpen = false;
-        }
-    };
-    get isIconOnly() {
-        return (this.variant === 'icon-only-outlined' ||
-            this.variant === 'icon-only-ghost');
-    }
-    get showAvatar() {
-        return this.variant === 'avatar';
-    }
-    get buttonHierarchy() {
-        return this.variant === 'ghost' || this.variant === 'icon-only-ghost'
-            ? 'tertiary'
-            : 'secondary';
-    }
-    render() {
-        const containerClasses = {
-            'dropdown-container': true,
-            'dropdown-open': this.isOpen,
-            'dropdown-avatar-variant': this.variant === 'avatar',
-        };
-        const avatarClasses = {
-            'dropdown-avatar': true,
-            'dropdown-avatar-focus': this.isOpen,
-            'dropdown-avatar-disabled': this.disabled,
-        };
-        return (index.h("div", { key: '203d4ee8afd1f081c90d19e3befb59794658bb86', class: containerClasses }, !this.showAvatar && (index.h("bh-button", { key: '43362ec4952a03d0b26676ac7b7a066e122da142', hierarchy: this.buttonHierarchy, icon: this.isIconOnly ? 'only' : 'trailing', size: this.size, label: this.isIconOnly ? '' : this.label, iconName: this.isIconOnly ? this.iconName : 'expand_more', disabled: this.disabled, onClick: this.toggleDropdown })), this.showAvatar && (index.h("div", { key: '44221c66ba3b6ed22dd877baf9d382d1408c8878', class: avatarClasses, onClick: (e) => {
-                if (!this.disabled) {
-                    e.stopPropagation();
-                    this.toggleDropdown();
-                }
-            }, role: "button", tabindex: this.disabled ? -1 : 0, onKeyDown: (e) => {
-                if (!this.disabled && (e.key === 'Enter' || e.key === ' ')) {
-                    e.preventDefault();
-                    this.toggleDropdown();
-                }
-            } }, index.h("bh-avatar", { key: '0eb6fd5ae65d93c996ba703f1ab044227760f78f', type: "image", size: this.avatarSize, imageSrc: this.avatarSrc, alt: this.avatarAlt }))), index.h("bh-dropdown-menu", { key: '5f5dc22d2983af6ba6f5331e4c2259555ed6d498', visible: this.isOpen, showIcons: this.showIcons, menuItems: JSON.stringify(this.parsedMenuItems), header: this.parsedHeader ? JSON.stringify(this.parsedHeader) : undefined, onBhItemClick: this.handleMenuItemClick })));
-    }
-};
-BhDropdown.style = bhDropdownCss;
-
-const bhLogoBoxCss = ".logo-box{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;position:relative;width:40px;flex-shrink:0;isolation:isolate}.logo-active{background-color:var(--color-brand-600);box-sizing:border-box;display:flex;gap:var(--spacing-lg);align-items:center;justify-content:center;padding:var(--spacing-sm);position:relative;border-radius:var(--radius-md);flex-shrink:0;width:40px;height:40px;z-index:2;transition:background-color 0.3s ease;cursor:pointer}.logo-box:hover .logo-active,.logo-box.dropdown-open .logo-active{background-color:var(--color-brand-700)}.logo{overflow:hidden;position:relative;flex-shrink:0;width:32px;height:32px;background-size:contain;background-repeat:no-repeat;background-position:center;transition:background-image 0.4s cubic-bezier(0.08, 0.52, 0.52, 1)}.logo-actabl{}.logo-al{}.logo-he{}.logo-ps{}.logo-tr{}.logo-more-products{position:absolute;background-color:var(--color-brand-200);right:2px;bottom:-4px;border-radius:5px;width:36px;height:35px;z-index:1;transition:transform 0.3s ease}.logo-box:hover .logo-more-products,.logo-box.dropdown-open .logo-more-products{transform:translateY(-4px)}";
-
-const BhLogoBox = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.bhProductSelect = index.createEvent(this, "bhProductSelect");
-    }
-    /**
-     * Type of logo to display
-     */
-    logoType = 'actabl';
-    /**
-     * Array of products to display in the switcher
-     */
-    products = [
-        {
-            id: 'alice',
-            name: 'Alice',
-            description: 'Housekeeping & Guest Services',
-            logo: './assets/logos/AL.svg',
-        },
-        {
-            id: 'hotel-effectiveness',
-            name: 'Hotel Effectiveness',
-            description: 'Labor planning',
-            logo: './assets/logos/HE.svg',
-        },
-        {
-            id: 'profit-sword',
-            name: 'ProfitSword',
-            description: 'B.I and Finance',
-            logo: './assets/logos/PS.svg',
-        },
-        {
-            id: 'transcendent',
-            name: 'Transcendent',
-            description: 'Asset Management & CapEx',
-            logo: './assets/logos/TR.svg',
-        },
-    ];
-    /**
-     * Event emitted when a product is selected
-     */
-    bhProductSelect;
-    isOpen = false;
-    anchorPosition = { top: 0, left: 0 };
-    logoActiveRef;
-    handleLogoClick = () => {
-        if (this.logoActiveRef) {
-            const rect = this.logoActiveRef.getBoundingClientRect();
-            this.anchorPosition = {
-                top: rect.bottom + 8,
-                left: rect.left,
-            };
-            this.isOpen = !this.isOpen;
-        }
-    };
-    handleClose = () => {
-        this.isOpen = false;
-    };
-    handleProductSelect = (event) => {
-        this.bhProductSelect.emit(event.detail);
-        this.isOpen = false;
-    };
-    getLogoSrc = () => {
-        switch (this.logoType) {
-            case 'actabl':
-                return './assets/logos/actabl.svg';
-            case 'al':
-                return './assets/logos/AL.svg';
-            case 'he':
-                return './assets/logos/HE.svg';
-            case 'ps':
-                return './assets/logos/PS.svg';
-            case 'tr':
-                return './assets/logos/TR.svg';
-            default:
-                return './assets/logos/actabl.svg';
-        }
-    };
-    render() {
-        const logoBoxClasses = {
-            'logo-box': true,
-            'dropdown-open': this.isOpen,
-        };
-        const logoClasses = {
-            'logo': true,
-            [`logo-${this.logoType}`]: true,
-        };
-        return (index.h(index.Host, { key: '7701200e2297867a3188f74663d5dcfc3c1bddbe' }, index.h("div", { key: 'c625d8d74cd94e2e2abfa283f45a79a6928e3868', class: logoBoxClasses }, index.h("div", { key: 'bcc3c1e4dfd02e590264ac1075632af0c0626edb', ref: (el) => (this.logoActiveRef = el), class: "logo-active", onClick: this.handleLogoClick }, index.h("img", { key: '592a65fe63945bcb878a0065c4427f19e1bac041', src: this.getLogoSrc(), alt: `${this.logoType} logo`, class: logoClasses })), index.h("div", { key: '552fbdbb59627349a60f86724677cbec7403ddf8', class: "logo-more-products" })), index.h("bh-product-switcher", { key: '588e16d9ad19f15c2c46509562ca78bd0aa5f7ae', isOpen: this.isOpen, anchorPosition: this.anchorPosition, products: this.products, onBhClose: this.handleClose, onBhProductSelect: this.handleProductSelect })));
-    }
-};
-BhLogoBox.style = bhLogoBoxCss;
-
-const bhNavItemCss = ":host{display:inline-block}.nav-item{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;position:relative;flex-shrink:0;width:100%;max-width:52px;height:fit-content}.nav-item-button{background-color:var(--color-white);box-sizing:border-box;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:var(--spacing-md);position:relative;border-radius:var(--radius-sm);flex-shrink:0;transition:background-color 0.2s ease;cursor:pointer;border:none;outline:none}.nav-item-button:hover{background-color:var(--color-neutral-50)}.nav-item-button:focus-visible{box-shadow:0 0 0 2px var(--color-brand-100)}.nav-item.active .nav-item-button{background-color:var(--color-brand-50)}.nav-item-button .icon{width:20px;height:20px;display:block;flex-shrink:0;color:var(--color-neutral-500);transition:color 0.2s ease;font-size:20px;font-variation-settings:'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20}.nav-item-button:hover .icon{color:var(--color-neutral-700)}.nav-item.active .nav-item-button .icon{color:var(--color-brand-600);font-variation-settings:'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20}.nav-item-label{font-family:var(--font-inter);font-weight:var(--weight-medium);height:18px;line-height:18px;font-style:normal;overflow:hidden;text-overflow:ellipsis;position:relative;flex-shrink:0;color:var(--color-neutral-700);font-size:10px;text-align:center;white-space:nowrap;width:100%;max-width:100%;margin:var(--spacing-none);margin-top:var(--spacing-xxs);box-sizing:border-box;direction:ltr}.nav-item.active .nav-item-label{color:var(--color-neutral-700);font-weight:var(--weight-semibold)}.nav-item.disabled .nav-item-button{cursor:not-allowed;opacity:0.5}.nav-item.disabled .nav-item-button:hover{background-color:var(--color-white)}.nav-item.disabled .nav-item-button .icon{color:var(--color-neutral-400)}.nav-item.disabled .nav-item-label{color:var(--color-neutral-400)}";
-
-const BhNavItem = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.bhClick = index.createEvent(this, "bhClick");
-    }
-    /**
-     * Material Symbols icon name
-     */
-    icon = 'home';
-    /**
-     * Label text displayed below the icon
-     */
-    label = 'Home';
-    /**
-     * Whether the nav item is active/selected
-     */
-    isActive = false;
-    /**
-     * Whether the nav item is disabled
-     */
-    disabled = false;
-    /**
-     * Event emitted when the nav item is clicked
-     */
-    bhClick;
-    handleClick = () => {
-        if (!this.disabled) {
-            this.bhClick.emit();
-        }
-    };
-    handleKeyDown = (event) => {
-        if ((event.key === 'Enter' || event.key === ' ') && !this.disabled) {
-            event.preventDefault();
-            this.bhClick.emit();
-        }
-    };
-    render() {
-        const navItemClasses = {
-            'nav-item': true,
-            'active': this.isActive,
-            'disabled': this.disabled,
-        };
-        return (index.h("div", { key: 'eff7adc93f70b788035ee175f06b84dfaa3eafaa', class: navItemClasses }, index.h("button", { key: '37cf2ec326fd00b03c71967e5395a9a64fabac2d', class: "nav-item-button", "aria-label": this.label, type: "button", onClick: this.handleClick, onKeyDown: this.handleKeyDown, disabled: this.disabled, tabIndex: this.disabled ? -1 : 0 }, index.h("span", { key: '098fb47a65ed3b3e2409273ae7932c820870484d', class: "material-symbols-outlined icon" }, this.icon)), index.h("p", { key: '112cc6fae3e4f5e9c44e2ffab69e86908b35c629', class: "nav-item-label" }, this.label)));
-    }
-};
-BhNavItem.style = bhNavItemCss;
-
-exports.bh_dropdown = BhDropdown;
-exports.bh_logo_box = BhLogoBox;
-exports.bh_nav_item = BhNavItem;
-//# sourceMappingURL=bh-dropdown.bh-logo-box.bh-nav-item.entry.cjs.js.map

package/cjs/bh-featured-icon.cjs.entry.js

@@ -1,41 +0,0 @@
-'use strict';
-
-var index = require('./index-tZqSQc8E.js');
-
-const bhFeaturedIconCss = ":host{display:inline-block}.featured-icon{display:inline-flex;align-items:center;justify-content:center;transition:all 0.2s ease}.featured-icon-sm{width:32px;height:32px;border-radius:6px}.featured-icon-md{width:40px;height:40px;border-radius:8px}.featured-icon-lg{width:48px;height:48px;border-radius:10px}.featured-icon-xl{width:56px;height:56px;border-radius:12px}.icon-sm{font-size:var(--icon-size-xs);width:var(--icon-size-xs);height:var(--icon-size-xs);line-height:1}.icon-md{font-size:var(--icon-size-md);width:var(--icon-size-md);height:var(--icon-size-md);line-height:1}.icon-lg{font-size:var(--icon-size-lg);width:var(--icon-size-lg);height:var(--icon-size-lg);line-height:1}.icon-xl{font-size:var(--icon-size-2xl);width:var(--icon-size-2xl);height:var(--icon-size-2xl);line-height:1}.featured-icon-brand.featured-icon-outlined{background-color:transparent;border:1px solid var(--color-neutral-200)}.featured-icon-brand.featured-icon-outlined .material-symbols-outlined{color:var(--color-brand-600)}.featured-icon-gray.featured-icon-outlined{border:1px solid var(--color-neutral-200)}.featured-icon-gray.featured-icon-outlined .material-symbols-outlined{color:var(--color-neutral-600)}.featured-icon-error.featured-icon-outlined{border:1px solid var(--color-neutral-200)}.featured-icon-error.featured-icon-outlined .material-symbols-outlined{color:var(--color-error-600)}.featured-icon-warning.featured-icon-outlined{border:1px solid var(--color-neutral-200)}.featured-icon-warning.featured-icon-outlined .material-symbols-outlined{color:var(--color-warning-600)}.featured-icon-success.featured-icon-outlined{border:1px solid var(--color-neutral-200)}.featured-icon-success.featured-icon-outlined .material-symbols-outlined{color:var(--color-success-600)}.featured-icon-highlight.featured-icon-outlined{border:1px solid var(--color-neutral-200)}.featured-icon-highlight.featured-icon-outlined .material-symbols-outlined{color:var(--color-purple-600)}.featured-icon-brand.featured-icon-filled{background-color:var(--color-brand-100);border:none}.featured-icon-brand.featured-icon-filled .material-symbols-outlined{color:var(--color-brand-600)}.featured-icon-gray.featured-icon-filled{background-color:var(--color-neutral-100);border:none}.featured-icon-gray.featured-icon-filled .material-symbols-outlined{color:var(--color-neutral-600)}.featured-icon-error.featured-icon-filled{background-color:var(--color-error-100);border:none}.featured-icon-error.featured-icon-filled .material-symbols-outlined{color:var(--color-error-600)}.featured-icon-warning.featured-icon-filled{background-color:var(--color-warning-200);border:none}.featured-icon-warning.featured-icon-filled .material-symbols-outlined{color:var(--color-warning-600)}.featured-icon-success.featured-icon-filled{background-color:var(--color-success-100);border:none}.featured-icon-success.featured-icon-filled .material-symbols-outlined{color:var(--color-success-600)}.featured-icon-highlight.featured-icon-filled{background-color:var(--color-purple-200);border:none}.featured-icon-highlight.featured-icon-filled .material-symbols-outlined{color:var(--color-purple-600)}.material-symbols-outlined{font-family:'Material Symbols Outlined';font-variation-settings:'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;user-select:none}";
-
-const BhFeaturedIcon = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-    }
-    /**
-     * The size of the featured icon
-     */
-    size = 'md';
-    /**
-     * The color theme of the featured icon
-     */
-    color = 'gray';
-    /**
-     * The style variant (outlined or filled)
-     */
-    iconStyle = 'outlined';
-    /**
-     * The Material Symbol icon name
-     */
-    icon = 'star';
-    render() {
-        const containerClasses = {
-            'featured-icon': true,
-            [`featured-icon-${this.size}`]: true,
-            [`featured-icon-${this.color}`]: true,
-            [`featured-icon-${this.iconStyle}`]: true,
-        };
-        const iconClasses = `material-symbols-outlined icon-${this.size}`;
-        return (index.h("div", { key: 'f28b347b9594d65de9d253da980bd43da0d02055', class: containerClasses, part: "container" }, index.h("span", { key: '9986022247eb8e6f3cde419b22d5f277796386f3', class: iconClasses }, this.icon)));
-    }
-};
-BhFeaturedIcon.style = bhFeaturedIconCss;
-
-exports.bh_featured_icon = BhFeaturedIcon;
-//# sourceMappingURL=bh-featured-icon.entry.cjs.js.map

package/cjs/bh-illustrations.cjs.entry.js

@@ -1,65 +0,0 @@
-'use strict';
-
-var index = require('./index-tZqSQc8E.js');
-
-const bhIllustrationsCss = "@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap'); :root{--color-white:hsl(0, 0%, 100%);--color-black:hsl(0, 0%, 0%);--color-transparent:hsla(0, 0%, 100%, 0);--color-neutral-25:hsl(240, 20%, 99%);--color-neutral-50:hsl(240, 20%, 98%);--color-neutral-100:hsl(240, 17%, 95%);--color-neutral-200:hsl(227, 25%, 89%);--color-neutral-300:hsl(224, 24%, 78%);--color-neutral-400:hsl(226, 24%, 59%);--color-neutral-500:hsl(226, 24%, 48%);--color-neutral-600:hsl(226, 24%, 38%);--color-neutral-700:hsl(226, 24%, 25%);--color-neutral-800:hsl(233, 33%, 10%);--color-neutral-900:hsl(231, 32%, 8%);--color-neutral-950:hsl(231, 32%, 8%);--color-brand-25:hsl(220, 82%, 98%);--color-brand-50:hsl(222, 87%, 97%);--color-brand-100:hsl(221, 94%, 94%);--color-brand-200:hsl(221, 92%, 86%);--color-brand-300:hsl(224, 95%, 77%);--color-brand-400:hsl(224, 94%, 72%);--color-brand-500:hsl(230, 67%, 58%);--color-brand-600:hsl(230, 69%, 48%);--color-brand-700:hsl(230, 75%, 34%);--color-brand-800:hsl(243, 86%, 44%);--color-brand-900:hsl(237, 69%, 24%);--color-brand-950:hsl(237, 61%, 20%);--color-error-25:hsl(12, 100%, 99%);--color-error-50:hsl(5, 86%, 97%);--color-error-100:hsl(4, 93%, 94%);--color-error-200:hsl(3, 96%, 89%);--color-error-300:hsl(4, 96%, 80%);--color-error-400:hsl(4, 92%, 69%);--color-error-500:hsl(4, 86%, 58%);--color-error-600:hsl(4, 74%, 49%);--color-error-700:hsl(4, 76%, 40%);--color-error-800:hsl(4, 72%, 33%);--color-error-900:hsl(8, 65%, 29%);--color-error-950:hsl(8, 75%, 19%);--color-warning-25:hsl(42, 100%, 98%);--color-warning-50:hsl(45, 100%, 96%);--color-warning-100:hsl(45, 96%, 89%);--color-warning-200:hsl(44, 98%, 77%);--color-warning-300:hsl(42, 99%, 65%);--color-warning-400:hsl(39, 98%, 56%);--color-warning-500:hsl(34, 94%, 50%);--color-warning-600:hsl(28, 97%, 44%);--color-warning-700:hsl(22, 92%, 37%);--color-warning-800:hsl(19, 84%, 31%);--color-warning-900:hsl(18, 79%, 27%);--color-warning-950:hsl(17, 79%, 17%);--color-success-25:hsl(142, 80%, 98%);--color-success-50:hsl(145, 81%, 96%);--color-success-100:hsl(140, 80%, 90%);--color-success-200:hsl(144, 78%, 80%);--color-success-300:hsl(148, 63%, 67%);--color-success-400:hsl(150, 57%, 54%);--color-success-500:hsl(152, 77%, 39%);--color-success-600:hsl(153, 91%, 30%);--color-success-700:hsl(155, 90%, 24%);--color-success-800:hsl(155, 84%, 20%);--color-success-900:hsl(156, 83%, 16%);--color-success-950:hsl(157, 82%, 11%);--font-inter:'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI',\n    Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,\n    'Liberation Mono', 'Courier New', monospace;--weight-regular:400;--weight-medium:500;--weight-semibold:600;--weight-bold:700;--text-xl-size:1.25rem;--text-lg-size:1.125rem;--text-md-size:1rem;--text-sm-size:0.875rem;--text-xs-size:0.75rem;--text-xl-line:1.875rem;--text-lg-line:1.75rem;--text-md-line:1.5rem;--text-sm-line:1.25rem;--text-xs-line:1.125rem;--spacing-none:0rem;--spacing-xxs:0.125rem;--spacing-xs:0.25rem;--spacing-sm:0.375rem;--spacing-md:0.5rem;--spacing-lg:0.75rem;--spacing-xl:1rem;--spacing-2xl:1.25rem;--spacing-3xl:1.5rem;--spacing-4xl:2rem;--spacing-5xl:2.5rem;--spacing-6xl:3rem;--radius-none:0rem;--radius-xxs:0.125rem;--radius-xs:0.25rem;--radius-sm:0.375rem;--radius-md:0.5rem;--radius-lg:0.625rem;--radius-xl:0.75rem;--radius-2xl:1rem;--radius-3xl:1.25rem;--radius-4xl:1.5rem;--radius-full:9999px;--shadow-xs:0px 1px 2px rgba(16, 24, 40, 0.05);--shadow-sm:0px 1px 3px rgba(16, 24, 40, 0.1),\n    0px 1px 2px rgba(16, 24, 40, 0.06);--shadow-md:0px 4px 8px -2px rgba(16, 24, 40, 0.1),\n    0px 2px 4px -2px rgba(16, 24, 40, 0.06);--shadow-lg:0px 12px 16px -4px rgba(16, 24, 40, 0.08),\n    0px 4px 6px -2px rgba(16, 24, 40, 0.03);--shadow-xl:0px 20px 24px -4px rgba(16, 24, 40, 0.08),\n    0px 8px 8px -4px rgba(16, 24, 40, 0.03);--icon-compensation-xs-btn:calc(var(--spacing-lg) - var(--spacing-xs));--icon-compensation-sm-btn:calc(var(--spacing-xl) - var(--spacing-xs));--icon-compensation-md-btn:calc(var(--spacing-xl) - var(--spacing-xs));--icon-compensation-lg-btn:calc(var(--spacing-xl) - var(--spacing-xs))}*,*::before,*::after{box-sizing:border-box}.material-symbols-outlined{font-family:'Material Symbols Outlined';font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;font-feature-settings:'liga';-webkit-font-feature-settings:'liga';-webkit-font-smoothing:antialiased}:host{display:inline-flex}.illustration{display:inline-flex;align-items:center;justify-content:center;position:relative}.illustration-wrapper{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-3xl)}.illustration-svg-container{display:flex;align-items:center;justify-content:center;position:relative}.illustration-image{width:100%;height:100%;object-fit:contain}.illustration-content{text-align:center;max-width:480px}.illustration-title{font-family:var(--font-inter);font-size:var(--text-lg-size);font-weight:var(--weight-semibold);line-height:var(--text-lg-line);color:var(--color-neutral-900);margin:0 0 var(--spacing-md) 0}.illustration-description{font-family:var(--font-inter);font-size:var(--text-md-size);font-weight:var(--weight-regular);line-height:var(--text-md-line);color:var(--color-neutral-600);margin:0}.illustration-sm .illustration-svg-container{width:80px;height:80px}.illustration-md .illustration-svg-container{width:120px;height:120px}.illustration-lg .illustration-svg-container{width:160px;height:160px}.illustration-xl .illustration-svg-container{width:200px;height:200px}.illustration-2xl .illustration-svg-container{width:240px;height:240px}.illustration-3xl .illustration-svg-container{width:280px;height:280px}.illustration-4xl .illustration-svg-container{width:320px;height:320px}@media (max-width: 768px){.illustration-4xl .illustration-svg-container{width:400px;height:400px}.illustration-3xl .illustration-svg-container{width:320px;height:320px}.illustration-content{max-width:320px}}@media (max-width: 480px){.illustration-4xl .illustration-svg-container,.illustration-3xl .illustration-svg-container{width:280px;height:280px}.illustration-2xl .illustration-svg-container{width:240px;height:240px}}";
-
-const BhIllustrations = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-    }
-    /**
-     * Size of the illustration
-     */
-    size = 'lg';
-    /**
-     * Title text to display below the illustration
-     */
-    illustrationTitle;
-    /**
-     * Description text to display below the title
-     */
-    description;
-    /**
-     * Path to the SVG illustration
-     */
-    svgPath = '/illustrations/Search-not-found.svg';
-    /**
-     * Alt text for the illustration image
-     */
-    alt = 'Illustration';
-    getSvgDimensions() {
-        switch (this.size) {
-            case 'sm':
-                return { width: 120, height: 120 };
-            case 'md':
-                return { width: 160, height: 160 };
-            case 'lg':
-                return { width: 200, height: 200 };
-            case 'xl':
-                return { width: 280, height: 280 };
-            case '2xl':
-                return { width: 360, height: 360 };
-            case '3xl':
-                return { width: 480, height: 480 };
-            case '4xl':
-                return { width: 600, height: 600 };
-            default:
-                return { width: 200, height: 200 };
-        }
-    }
-    render() {
-        const dimensions = this.getSvgDimensions();
-        return (index.h(index.Host, { key: '673e24fb8f562656d47c1261fc3a2161086984af' }, index.h("div", { key: 'f2e405ef5a09b1e23e64fe1c4469a796b138902e', class: `illustration illustration-${this.size}` }, index.h("div", { key: '6b158db312cb292112fb8ff3c5b083d9dade7d3f', class: "illustration-wrapper" }, index.h("div", { key: '87f0d6895d021d1ee947b8f67cc306b6c6109330', class: "illustration-svg-container", style: {
-                width: `${dimensions.width}px`,
-                height: `${dimensions.height}px`,
-            } }, index.h("img", { key: '4b9552d1b82a0487248c57efaceb4c86258dc25e', src: this.svgPath, alt: this.alt, style: {
-                width: `${dimensions.width}px`,
-                height: `${dimensions.height}px`,
-            }, class: "illustration-image" })), (this.illustrationTitle || this.description) && (index.h("div", { key: 'f65786a700b2683beeb7f1e28fd64ef0edb6702b', class: "illustration-content" }, this.illustrationTitle && (index.h("h3", { key: '7095e9fd459a45141fe3ae83c2ee69be996eac0f', class: "illustration-title" }, this.illustrationTitle)), this.description && (index.h("p", { key: 'd10751d18943f0cca55cf2bc1f04514f94beceb9', class: "illustration-description" }, this.description))))))));
-    }
-};
-BhIllustrations.style = bhIllustrationsCss;
-
-exports.bh_illustrations = BhIllustrations;
-//# sourceMappingURL=bh-illustrations.entry.cjs.js.map