@alixpartners/ui-components 2.0.0-beta.10 → 2.0.0-beta.12

package/dist/assets/Dropdown.css

@@ -1 +1 @@
-button{all:unset}.Dropdown-module__dropdownContainer___beNhQ{display:flex;flex-direction:column;gap:4px;width:100%;position:relative}.Dropdown-module__dropdownLabel___T9FmB{font-size:14px;font-weight:500;color:#4a4a4a;line-height:1.2;display:flex;align-items:center;gap:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.Dropdown-module__dropdownLabel___T9FmB.Dropdown-module__dropdownLabelDisabled___SLRmM{pointer-events:none;color:#b2b2b2}.Dropdown-module__dropdownLabel___T9FmB.Dropdown-module__dropdownLabelDisabled___SLRmM .Dropdown-module__label-tooltip-icon___JYVOm{color:#ccc}.Dropdown-module__required___ChI1m{color:#cb282e;font-weight:600}.Dropdown-module__label-tooltip-icon___JYVOm{color:#4a4a4a;font-size:16px;cursor:pointer}.Dropdown-module__dropdownWrapper___AUuWD{position:relative;width:100%}.Dropdown-module__dropdown-menu-trigger___fgqVT{display:inline-block;width:100%}.Dropdown-module__dropdownTrigger___Rue93{width:100%;height:32px;padding:6px 8px;background-color:#fff;border:1px solid #cccccc;border-radius:4px;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:240px;box-sizing:border-box}.Dropdown-module__dropdownTrigger___Rue93:hover:not(.Dropdown-module__dropdownTriggerDisabled___63wkd){border-color:#5cb335}.Dropdown-module__dropdownTrigger___Rue93:focus{outline:none;border-color:#5cb335}.Dropdown-module__dropdownTrigger___Rue93.Dropdown-module__dropdownTriggerOpen___cbm8V{border-color:#5cb335;border-radius:4px}.Dropdown-module__dropdownTrigger___Rue93.Dropdown-module__dropdownTriggerDisabled___63wkd{background-color:#f5f5f5;border-color:#ccc;cursor:not-allowed}.Dropdown-module__dropdownTrigger___Rue93.Dropdown-module__dropdownTriggerError___Uu02x{border-color:#bf494e}.Dropdown-module__dropdownContent___zLMhL{display:flex;align-items:center;gap:8px;width:100%;min-height:20px}.Dropdown-module__dropdownSelectedItems___iXnpQ{flex:1;min-width:0;display:flex;align-items:center}.Dropdown-module__selectedItemsList___uBD7x{display:flex;flex-wrap:wrap;gap:4px;width:100%}.Dropdown-module__selectedItemsCreatable___SCjLK{display:flex;align-items:center;gap:4px;flex:1}.Dropdown-module__selectedItemsCreatable___SCjLK .Dropdown-module__selectedItem___2jO4z{border-radius:240px;height:20px;padding:0 5px 0 9px}.Dropdown-module__selectedItemsCreatable___SCjLK .Dropdown-module__selectedItem___2jO4z .Dropdown-module__selectedItemLabel___efVI-{color:#3f7b25}.Dropdown-module__selectedItemsCreatable___SCjLK .Dropdown-module__selectedItem___2jO4z .Dropdown-module__removeButton___9r85B{border:none;background:none;cursor:pointer;padding:0;margin:0;display:flex;align-items:center}.Dropdown-module__selectedItemsCreatable___SCjLK .Dropdown-module__selectedItem___2jO4z .Dropdown-module__removeIcon___st3b-{font-size:12px;height:12px;width:12px;color:#727272}.Dropdown-module__selectedItemsCreatable___SCjLK .Dropdown-module__singleSelectedCreatableItem___BKFLb{display:flex;justify-content:space-between;flex:1;border-right:solid 1px #cccccc;padding-right:3px}.Dropdown-module__singleSelectedCreatableItemRemoveButton___w3XXp{transform:rotate(45deg)}.Dropdown-module__selectedItem___2jO4z{display:inline-flex;align-items:center;gap:4px;padding:2px 6px;background-color:#dff0db;border:1px solid #dff0db;border-radius:12px;font-size:12px;color:#4a4a4a;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.Dropdown-module__selectedOptionLabel___7Zdh3{color:#28292c;font-size:14px}.Dropdown-module__placeholder___fWdch{color:#878787;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.Dropdown-module__dropdownActions___d55Fa{display:flex;align-items:center;gap:4px;flex-shrink:0}.Dropdown-module__dropdownArrow___dLbrb{color:#4a4a4a;font-size:16px;width:16px;height:16px;transition:transform .2s ease}.Dropdown-module__dropdownArrow___dLbrb.Dropdown-module__dropdownArrowOpen___Z4Nh1{transform:rotate(180deg)}.Dropdown-module__dropdownMenu___toYcy{position:absolute;top:calc(100% + 6px);left:0;right:0;background-color:#fff;border:1px solid #cccccc;border-top:1px solid #cccccc;border-radius:4px;z-index:1000;max-height:300px;overflow:hidden;display:flex;flex-direction:column;width:fit-content;max-width:640px;min-width:80x;box-sizing:border-box;box-shadow:0 0 4px #00000029}.Dropdown-module__dropdownMenu___toYcy.Dropdown-module__dropdownMenuRight___n1aDk{left:auto;right:0}.Dropdown-module__dropdown-container-grouped___1twhU .Dropdown-module__dropdownMenu___toYcy{min-width:212px}.Dropdown-module__dropdown-container-multi-select___zdaum .Dropdown-module__dropdownMenu___toYcy{min-width:224px}.Dropdown-module__dropdownMenuToolbar___gFne0{display:flex;flex-direction:column;gap:16px;padding:8px 12px;border-bottom:1px solid #cccccc}.Dropdown-module__searchContainer___4kUvD{position:relative;display:flex;align-items:center;gap:16px}.Dropdown-module__dropdownCreatableSearchContainer___sbs0F{min-width:300px;display:flex;align-items:center;flex-wrap:wrap;gap:4px;background:#fff;border:1px solid #cccccc;border-radius:4px;min-height:32px;padding:0 8px}.Dropdown-module__dropdownCreatableSearchContainer___sbs0F:focus-within{border-color:#5cb335}.Dropdown-module__dropdownCreatableSearchContainer___sbs0F.Dropdown-module__disabled___0FjAX{cursor:not-allowed;opacity:.6}.Dropdown-module__dropdownCreatableError___gwBGw{border-color:#bf494e}.Dropdown-module__creatableInput___meKz6{flex:1 1 120px;min-width:80px;border:none;outline:none;background:transparent;height:20px;padding:6px 0;color:#28292c;font-size:14px}.Dropdown-module__creatableInput___meKz6::placeholder{color:#878787}.Dropdown-module__creatableInput___meKz6:disabled{color:#b2b2b2}.Dropdown-module__searchInput___2Ad09{width:100%;padding:8px 32px 8px 12px;border:1px solid #cccccc;border-radius:4px;font-size:14px;color:#28292c;background-color:#fff}.Dropdown-module__searchInput___2Ad09:focus{outline:none;border-color:#5cb335}.Dropdown-module__searchInput___2Ad09::placeholder{color:#878787}.Dropdown-module__searchIcon___QxaFA{position:absolute;right:20px;top:50%;transform:translateY(-50%);color:#4a4a4a;font-size:16px;pointer-events:none}.Dropdown-module__optionsList___rk2hi{padding:8px;flex:1;overflow-y:auto;max-height:200px}.Dropdown-module__categoryGroup___Np2bP{display:flex;flex-direction:column}.Dropdown-module__optionsList___rk2hi .Dropdown-module__categoryGroup___Np2bP:first-child .Dropdown-module__categoryDivider___Gh6F0{border-top:none}.Dropdown-module__categoryDivider___Gh6F0{padding:8px;border-top:1px solid #cccccc;background-color:#fff;display:flex;align-items:center}.Dropdown-module__categoryLabel___B9IDR{font-size:12px;font-weight:600;color:#727272;text-transform:uppercase;letter-spacing:.5px}.Dropdown-module__optionItem___7pi10{width:100%;padding:8px;border:none;background:none;cursor:pointer;display:flex;align-items:center;transition:background-color .2s ease;text-align:left;font-size:14px;color:#4a4a4a;min-height:32px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:4px;box-sizing:border-box}.Dropdown-module__optionItem___7pi10:hover:not(.Dropdown-module__optionItemDisabled___aepUD){background-color:#dff0db}.Dropdown-module__optionItem___7pi10:focus{outline:none}.Dropdown-module__optionItem___7pi10.Dropdown-module__optionItemDisabled___aepUD{color:#b2b2b2;cursor:not-allowed;opacity:.6}.Dropdown-module__optionItem___7pi10.Dropdown-module__optionItemFocused___u2781{background-color:#dff0db}.Dropdown-module__optionContent___nf1VC{display:flex;align-items:center;justify-content:space-between;width:100%}.Dropdown-module__optionLabel___sJerM{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:Roboto,sans-serif!important}.Dropdown-module__tickIcon___hYdCr{color:inherit;font-size:14px;flex-shrink:0;margin-left:8px}.Dropdown-module__creatableIcon___3zxIF{color:inherit;font-size:14px;flex-shrink:0;margin-right:8px}.Dropdown-module__noOptions___8vmhM{padding:8px;text-align:center;color:#878787;font-size:14px;font-style:italic}.Dropdown-module__maxItemsWarning___4F7o-{padding:8px;border-top:1px solid #cccccc;background-color:#f8f9fa;font-size:12px;color:#727272;text-align:center}.Dropdown-module__helpers___s4ulA{display:flex;justify-content:space-between;align-items:center;gap:6px;min-width:0}.Dropdown-module__helpText___YooJE{font-size:12px;color:#727272;line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.Dropdown-module__helpTextDisabled___Ct4qq{color:#b2b2b2}.Dropdown-module__helpLink___-Zwpq{color:#0369a3;font-size:12px;font-weight:500;line-height:1;text-decoration:none;flex-shrink:0}.Dropdown-module__helpLink___-Zwpq:hover{text-decoration:underline}.Dropdown-module__helpLinkDisabled___r-opC{color:#878787}.Dropdown-module__errorMessage___3Mopi{font-size:12px;color:#bf494e;line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.Dropdown-module__optionsList___rk2hi::-webkit-scrollbar{width:4px}.Dropdown-module__optionsList___rk2hi::-webkit-scrollbar-track{background:transparent}.Dropdown-module__optionsList___rk2hi::-webkit-scrollbar-thumb{background-color:#ccc;border-radius:240px}.Dropdown-module__optionsList___rk2hi::-webkit-scrollbar-thumb:hover{background-color:#878787}.Dropdown-module__optionsList___rk2hi::-webkit-scrollbar-thumb:active{background-color:#4a4a4a}.Dropdown-module__selectAllContainer___Dlk3J{display:flex;gap:16px;background-color:#fff;justify-content:space-between;align-items:center;padding-bottom:8px}.Dropdown-module__searchContainer___4kUvD:has(+.Dropdown-module__selectAllContainer___Dlk3J){border-bottom:none}.Dropdown-module__actionButtons___-2nvr{display:flex;justify-content:space-between;gap:8px;padding:12px;border-top:1px solid #cccccc;background-color:#fff}
+button{all:unset}.Dropdown-module__dropdownContainer___beNhQ{display:flex;flex-direction:column;gap:4px;width:100%;position:relative}.Dropdown-module__dropdownLabel___T9FmB{font-size:14px;font-weight:500;color:#4a4a4a;line-height:1.2;display:flex;align-items:center;gap:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.Dropdown-module__dropdownLabel___T9FmB.Dropdown-module__dropdownLabelDisabled___SLRmM{pointer-events:none;color:#b2b2b2}.Dropdown-module__dropdownLabel___T9FmB.Dropdown-module__dropdownLabelDisabled___SLRmM .Dropdown-module__label-tooltip-icon___JYVOm{color:#ccc}.Dropdown-module__required___ChI1m{color:#cb282e;font-weight:600}.Dropdown-module__label-tooltip-icon___JYVOm{color:#4a4a4a;font-size:16px;cursor:pointer}.Dropdown-module__dropdownWrapper___AUuWD{position:relative;width:100%}.Dropdown-module__dropdown-menu-trigger___fgqVT{display:inline-block;width:100%}.Dropdown-module__dropdownTrigger___Rue93{width:100%;height:32px;padding:6px 8px;background-color:#fff;border:1px solid #cccccc;border-radius:4px;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:240px;box-sizing:border-box}.Dropdown-module__dropdownTrigger___Rue93:hover:not(.Dropdown-module__dropdownTriggerDisabled___63wkd){border-color:#5cb335}.Dropdown-module__dropdownTrigger___Rue93:focus{outline:none;border-color:#5cb335}.Dropdown-module__dropdownTrigger___Rue93.Dropdown-module__dropdownTriggerOpen___cbm8V{border-color:#5cb335;border-radius:4px}.Dropdown-module__dropdownTrigger___Rue93.Dropdown-module__dropdownTriggerDisabled___63wkd{background-color:#f5f5f5;border-color:#ccc;cursor:not-allowed}.Dropdown-module__dropdownTrigger___Rue93.Dropdown-module__dropdownTriggerError___Uu02x{border-color:#bf494e}.Dropdown-module__dropdownContent___zLMhL{display:flex;align-items:center;gap:8px;width:100%;min-height:20px}.Dropdown-module__dropdownSelectedItems___iXnpQ{flex:1;min-width:0;display:flex;align-items:center;color:#28292c}.Dropdown-module__selectedItemsList___uBD7x{display:flex;flex-wrap:wrap;gap:4px;width:100%}.Dropdown-module__selectedItemsCreatable___SCjLK{display:flex;align-items:center;gap:4px;flex:1}.Dropdown-module__selectedItemsCreatable___SCjLK .Dropdown-module__selectedItem___2jO4z{border-radius:240px;height:20px;padding:0 5px 0 9px}.Dropdown-module__selectedItemsCreatable___SCjLK .Dropdown-module__selectedItem___2jO4z .Dropdown-module__selectedItemLabel___efVI-{color:#3f7b25}.Dropdown-module__selectedItemsCreatable___SCjLK .Dropdown-module__selectedItem___2jO4z .Dropdown-module__removeButton___9r85B{border:none;background:none;cursor:pointer;padding:0;margin:0;display:flex;align-items:center}.Dropdown-module__selectedItemsCreatable___SCjLK .Dropdown-module__selectedItem___2jO4z .Dropdown-module__removeIcon___st3b-{font-size:12px;height:12px;width:12px;color:#727272}.Dropdown-module__selectedItemsCreatable___SCjLK .Dropdown-module__singleSelectedCreatableItem___BKFLb{display:flex;justify-content:space-between;flex:1;border-right:solid 1px #cccccc;padding-right:3px}.Dropdown-module__singleSelectedCreatableItemRemoveButton___w3XXp{transform:rotate(45deg)}.Dropdown-module__selectedItem___2jO4z{display:inline-flex;align-items:center;gap:4px;padding:2px 6px;background-color:#dff0db;border:1px solid #dff0db;border-radius:12px;font-size:12px;color:#4a4a4a;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.Dropdown-module__selectedOptionLabel___7Zdh3{color:#28292c;font-size:14px}.Dropdown-module__placeholder___fWdch{color:#878787;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.Dropdown-module__dropdownActions___d55Fa{display:flex;align-items:center;gap:4px;flex-shrink:0}.Dropdown-module__dropdownArrow___dLbrb{color:#4a4a4a;font-size:16px;width:16px;height:16px;transition:transform .2s ease}.Dropdown-module__dropdownArrow___dLbrb.Dropdown-module__dropdownArrowOpen___Z4Nh1{transform:rotate(180deg)}.Dropdown-module__dropdownMenu___toYcy{position:absolute;top:calc(100% + 6px);left:0;right:0;background-color:#fff;border:1px solid #cccccc;border-top:1px solid #cccccc;border-radius:4px;z-index:1000;max-height:300px;overflow:hidden;display:flex;flex-direction:column;width:fit-content;max-width:640px;min-width:80x;box-sizing:border-box;box-shadow:0 0 4px #00000029}.Dropdown-module__dropdownMenu___toYcy.Dropdown-module__dropdownMenuRight___n1aDk{left:auto;right:0}.Dropdown-module__dropdown-container-grouped___1twhU .Dropdown-module__dropdownMenu___toYcy{min-width:212px}.Dropdown-module__dropdown-container-multi-select___zdaum .Dropdown-module__dropdownMenu___toYcy{min-width:224px}.Dropdown-module__dropdownMenuToolbar___gFne0{display:flex;flex-direction:column;gap:16px;padding:8px 12px;border-bottom:1px solid #cccccc}.Dropdown-module__searchContainer___4kUvD{position:relative;display:flex;align-items:center;gap:16px}.Dropdown-module__dropdownCreatableSearchContainer___sbs0F{min-width:300px;display:flex;align-items:center;flex-wrap:wrap;gap:4px;background:#fff;border:1px solid #cccccc;border-radius:4px;min-height:32px;padding:0 8px}.Dropdown-module__dropdownCreatableSearchContainer___sbs0F:focus-within{border-color:#5cb335}.Dropdown-module__dropdownCreatableSearchContainer___sbs0F.Dropdown-module__disabled___0FjAX{cursor:not-allowed;opacity:.6}.Dropdown-module__dropdownCreatableError___gwBGw{border-color:#bf494e}.Dropdown-module__creatableInput___meKz6{flex:1 1 120px;min-width:80px;border:none;outline:none;background:transparent;height:20px;padding:6px 0;color:#28292c;font-size:14px}.Dropdown-module__creatableInput___meKz6::placeholder{color:#878787}.Dropdown-module__creatableInput___meKz6:disabled{color:#b2b2b2}.Dropdown-module__searchInput___2Ad09{width:100%;padding:8px 32px 8px 12px;border:1px solid #cccccc;border-radius:4px;font-size:14px;color:#28292c;background-color:#fff}.Dropdown-module__searchInput___2Ad09:focus{outline:none;border-color:#5cb335}.Dropdown-module__searchInput___2Ad09::placeholder{color:#878787}.Dropdown-module__searchIcon___QxaFA{position:absolute;right:20px;top:50%;transform:translateY(-50%);color:#4a4a4a;font-size:16px;pointer-events:none}.Dropdown-module__optionsList___rk2hi{padding:8px;flex:1;overflow-y:auto;max-height:200px}.Dropdown-module__categoryGroup___Np2bP{display:flex;flex-direction:column}.Dropdown-module__optionsList___rk2hi .Dropdown-module__categoryGroup___Np2bP:first-child .Dropdown-module__categoryDivider___Gh6F0{border-top:none}.Dropdown-module__categoryDivider___Gh6F0{padding:8px;border-top:1px solid #cccccc;background-color:#fff;display:flex;align-items:center}.Dropdown-module__categoryLabel___B9IDR{font-size:12px;font-weight:600;color:#727272;text-transform:uppercase;letter-spacing:.5px}.Dropdown-module__optionItem___7pi10{width:100%;padding:8px;border:none;background:none;cursor:pointer;display:flex;align-items:center;transition:background-color .2s ease;text-align:left;font-size:14px;color:#4a4a4a;min-height:32px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:4px;box-sizing:border-box}.Dropdown-module__optionItem___7pi10:hover:not(.Dropdown-module__optionItemDisabled___aepUD){background-color:#dff0db}.Dropdown-module__optionItem___7pi10:focus{outline:none}.Dropdown-module__optionItem___7pi10.Dropdown-module__optionItemDisabled___aepUD{color:#b2b2b2;cursor:not-allowed;opacity:.6}.Dropdown-module__optionItem___7pi10.Dropdown-module__optionItemFocused___u2781{background-color:#dff0db}.Dropdown-module__optionContent___nf1VC{display:flex;align-items:center;justify-content:space-between;width:100%}.Dropdown-module__optionLabel___sJerM{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:Roboto,sans-serif!important}.Dropdown-module__tickIcon___hYdCr{color:inherit;font-size:14px;flex-shrink:0;margin-left:8px}.Dropdown-module__creatableIcon___3zxIF{color:inherit;font-size:14px;flex-shrink:0;margin-right:8px}.Dropdown-module__noOptions___8vmhM{padding:8px;text-align:center;color:#878787;font-size:14px;font-style:italic}.Dropdown-module__maxItemsWarning___4F7o-{padding:8px;border-top:1px solid #cccccc;background-color:#f8f9fa;font-size:12px;color:#727272;text-align:center}.Dropdown-module__helpers___s4ulA{display:flex;justify-content:space-between;align-items:center;gap:6px;min-width:0}.Dropdown-module__helpText___YooJE{font-size:12px;color:#727272;line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.Dropdown-module__helpTextDisabled___Ct4qq{color:#b2b2b2}.Dropdown-module__helpLink___-Zwpq{color:#0369a3;font-size:12px;font-weight:500;line-height:1;text-decoration:none;flex-shrink:0}.Dropdown-module__helpLink___-Zwpq:hover{text-decoration:underline}.Dropdown-module__helpLinkDisabled___r-opC{color:#878787}.Dropdown-module__errorMessage___3Mopi{font-size:12px;color:#bf494e;line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.Dropdown-module__optionsList___rk2hi::-webkit-scrollbar{width:4px}.Dropdown-module__optionsList___rk2hi::-webkit-scrollbar-track{background:transparent}.Dropdown-module__optionsList___rk2hi::-webkit-scrollbar-thumb{background-color:#ccc;border-radius:240px}.Dropdown-module__optionsList___rk2hi::-webkit-scrollbar-thumb:hover{background-color:#878787}.Dropdown-module__optionsList___rk2hi::-webkit-scrollbar-thumb:active{background-color:#4a4a4a}.Dropdown-module__selectAllContainer___Dlk3J{display:flex;gap:16px;background-color:#fff;justify-content:space-between;align-items:center;padding-bottom:8px}.Dropdown-module__searchContainer___4kUvD:has(+.Dropdown-module__selectAllContainer___Dlk3J){border-bottom:none}.Dropdown-module__actionButtons___-2nvr{display:flex;justify-content:space-between;gap:8px;padding:12px;border-top:1px solid #cccccc;background-color:#fff}

package/dist/assets/NavBar.css

@@ -1 +1 @@
-.NavBar-module__navbar-container___KnbUz{display:flex;align-items:center;justify-content:space-between;padding:10px;background-color:#333}.NavBar-module__navbar-logo-container___VXWAo{display:flex;align-items:center;gap:10px}.NavBar-module__navbar-project-name-separator___SmBBN{width:2px;align-self:stretch;background-color:#5cb335}.NavBar-module__navbar-project-name___zQY4u{color:#fff}.NavBar-module__navbar-menu___QDrB4{display:flex;align-items:center;gap:10px}.NavBar-module__navbar-menu-list___xZE02{display:flex;align-items:center;gap:10px;padding:0;margin:0}.NavBar-module__navbar-menu-list___xZE02 button{all:unset}.NavBar-module__navbar-menu-list___xZE02 .NavBar-module__navbar-menu-list-item___Y87cK{cursor:pointer;text-decoration:none;color:#fff}.NavBar-module__navbar-menu-list___xZE02 .NavBar-module__navbar-menu-list-item___Y87cK .NavBar-module__navbar-menu-list-item-trigger-container___OsXar,.NavBar-module__navbar-menu-list___xZE02 .NavBar-module__navbar-menu-list-item___Y87cK .NavBar-module__navbar-menu-list-item-action___MPFZz{display:flex;align-items:center;gap:4px;box-sizing:border-box;border-bottom:2px solid transparent;padding-top:16px;padding-bottom:16px}.NavBar-module__navbar-menu-list___xZE02 .NavBar-module__navbar-menu-list-item___Y87cK:hover .NavBar-module__navbar-menu-list-item-trigger-container___OsXar,.NavBar-module__navbar-menu-list___xZE02 .NavBar-module__navbar-menu-list-item___Y87cK:hover .NavBar-module__navbar-menu-list-item-action___MPFZz{border-bottom:2px solid #878787}.NavBar-module__navbar-menu-list___xZE02 .NavBar-module__navbar-menu-list-item___Y87cK[data-state=open] .NavBar-module__navbar-menu-list-item-trigger-container___OsXar,.NavBar-module__navbar-menu-list___xZE02 .NavBar-module__navbar-menu-list-item___Y87cK[data-state=open] .NavBar-module__navbar-menu-list-item-action___MPFZz{border-bottom:2px solid #5CB335}.NavBar-module__navbar-menu-list___xZE02 .NavBar-module__navbar-menu-list-item___Y87cK[data-state=open] .NavBar-module__navbar-menu-list-item-arrow___QoJsh{transform:rotate(180deg)}.NavBar-module__navbar-menu-list___xZE02 .NavBar-module__navbar-menu-list-item___Y87cK a{text-decoration:none;color:#fff}.NavBar-module__navbar-menu-list-item-arrow___QoJsh{color:#fff;font-size:16px;width:16px;height:16px;transition:transform .2s ease}.NavBar-module__navbar-menu-list-item-submenu___goVcf{margin-top:10px;background-color:#fff;border:1px solid #e0e0e0;border-radius:4px;z-index:1000;max-height:300px;overflow:hidden;display:flex;flex-direction:column;width:fit-content;box-sizing:border-box;box-shadow:0 0 4px #00000029;padding:4px 0}.NavBar-module__navbar-menu-list-item-submenu-item___sH6du{width:100%;padding:8px 12px;border:none;background:none;cursor:pointer;display:flex;align-items:center;transition:background-color .2s ease;text-align:left;font-size:14px;color:#333;min-height:32px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:4px}.NavBar-module__navbar-menu-list-item-submenu-item___sH6du:hover{background-color:#dff0db}.NavBar-module__navbar-menu-list-item-submenu-item___sH6du:focus{outline:none}.NavBar-module__navbar-menu-list-item-submenu-item___sH6du a{text-decoration:none;color:inherit;width:100%}.NavBar-module__navbar-menu-additional___B8kH-{display:flex;align-items:center;gap:8px}.NavBar-module__navbar-menu-additional-trigger___IpMHL{all:unset;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:8px;border-radius:4px;transition:background-color .2s ease}.NavBar-module__navbar-menu-additional-trigger___IpMHL:hover{background-color:#ffffff1a}.NavBar-module__navbar-menu-additional-trigger___IpMHL:focus{outline:2px solid #5CB335;outline-offset:2px}.NavBar-module__navbar-menu-additional-icon___jhULk{color:#fff;font-size:20px;width:20px;height:20px}.NavBar-module__navbar-menu-additional-user-profile___ujsEv{color:#fff;font-size:14px;width:32px;height:32px;border-radius:50%;background-color:#5cb335;display:flex;align-items:center;justify-content:center}.NavBar-module__navbar-notification-container___K2YeD{position:relative;display:inline-block}.NavBar-module__navbar-notification-badge___vp5bK{position:absolute;top:-6px;right:-6px;background-color:#5cb335;color:#fff;border-radius:50%;width:18px;height:18px;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:600;line-height:1;padding:0 4px;box-sizing:border-box;border:2px solid #333333}
+.NavBar-module__navbar-wrapper___e-f8y{background-color:#333;width:100%}.NavBar-module__navbar-container___KnbUz{display:flex;align-items:center;justify-content:space-between;padding:10px;margin-left:auto;margin-right:auto}.NavBar-module__navbar-logo-container___VXWAo{display:flex;align-items:center;gap:10px}.NavBar-module__navbar-project-name-separator___SmBBN{width:2px;align-self:stretch;background-color:#5cb335}.NavBar-module__navbar-project-name___zQY4u{font-size:18px;font-weight:500;letter-spacing:1px;color:#fff}.NavBar-module__navbar-menu___QDrB4{display:flex;align-items:center;gap:10px}.NavBar-module__navbar-menu-list___xZE02{display:flex;align-items:center;gap:10px;padding:0;margin:0}.NavBar-module__navbar-menu-list___xZE02 button{all:unset}.NavBar-module__navbar-menu-list___xZE02 .NavBar-module__navbar-menu-list-item___Y87cK{cursor:pointer;text-decoration:none;color:#fff}.NavBar-module__navbar-menu-list___xZE02 .NavBar-module__navbar-menu-list-item___Y87cK .NavBar-module__navbar-menu-list-item-trigger-container___OsXar,.NavBar-module__navbar-menu-list___xZE02 .NavBar-module__navbar-menu-list-item___Y87cK .NavBar-module__navbar-menu-list-item-action___MPFZz{display:flex;align-items:center;gap:4px;box-sizing:border-box;border-bottom:2px solid transparent;padding-top:16px;padding-bottom:16px}.NavBar-module__navbar-menu-list___xZE02 .NavBar-module__navbar-menu-list-item___Y87cK:hover .NavBar-module__navbar-menu-list-item-trigger-container___OsXar,.NavBar-module__navbar-menu-list___xZE02 .NavBar-module__navbar-menu-list-item___Y87cK:hover .NavBar-module__navbar-menu-list-item-action___MPFZz{border-bottom:2px solid #878787}.NavBar-module__navbar-menu-list___xZE02 .NavBar-module__navbar-menu-list-item___Y87cK .NavBar-module__navbar-menu-list-item-action-active___J7eRN{border-bottom:2px solid #5CB335}.NavBar-module__navbar-menu-list___xZE02 .NavBar-module__navbar-menu-list-item___Y87cK[data-state=open] .NavBar-module__navbar-menu-list-item-arrow___QoJsh{transform:rotate(180deg)}.NavBar-module__navbar-menu-list___xZE02 .NavBar-module__navbar-menu-list-item___Y87cK a{text-decoration:none;color:#fff}.NavBar-module__navbar-menu-list-item-arrow___QoJsh{color:#fff;font-size:16px;width:16px;height:16px;transition:transform .2s ease}.NavBar-module__navbar-menu-list-item-submenu___goVcf{margin-top:10px;background-color:#fff;border:1px solid #e0e0e0;border-radius:4px;z-index:1000;max-height:300px;overflow:hidden;display:flex;flex-direction:column;width:fit-content;box-sizing:border-box;box-shadow:0 0 4px #00000029;padding:4px 0}.NavBar-module__navbar-menu-list-item-submenu-item___sH6du{width:100%;padding:8px 12px;border:none;background:none;cursor:pointer;display:flex;align-items:center;transition:background-color .2s ease;text-align:left;font-size:14px;color:#333;min-height:32px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:4px}.NavBar-module__navbar-menu-list-item-submenu-item___sH6du:hover{background-color:#dff0db}.NavBar-module__navbar-menu-list-item-submenu-item___sH6du:focus{outline:none}.NavBar-module__navbar-menu-list-item-submenu-item___sH6du a{text-decoration:none;color:inherit;width:100%}.NavBar-module__navbar-menu-additional___B8kH-{display:flex;align-items:center;gap:8px}.NavBar-module__navbar-menu-additional-trigger___IpMHL{all:unset;cursor:pointer;padding:8px;border-radius:4px;transition:background-color .2s ease}.NavBar-module__navbar-menu-additional-trigger___IpMHL:hover{background-color:#ffffff1a}.NavBar-module__navbar-menu-additional-trigger___IpMHL:focus{outline:2px solid #5CB335;outline-offset:2px}.NavBar-module__navbar-menu-additional-icon___jhULk{color:#fff;font-size:20px!important;width:20px;height:20px}.NavBar-module__navbar-menu-additional-user-profile___ujsEv{color:#fff;font-size:14px;width:32px;height:32px;border-radius:50%;background-color:#5cb335;display:flex;align-items:center;justify-content:center}.NavBar-module__navbar-notification-container___K2YeD{position:relative;display:inline-block}.NavBar-module__navbar-notification-badge___vp5bK{position:absolute;top:-6px;right:-6px;background-color:#5cb335;color:#fff;border-radius:50%;width:18px;height:18px;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:600;line-height:1;padding:0 4px;box-sizing:border-box;border:2px solid #333333}

package/dist/components/NavBar/NavBar.d.ts

@@ -13,6 +13,7 @@ export type UserProfile = {
     content: React.ReactNode;
 };
 type NavBarProps = {
+    activeMenuItemHref?: string;
     className?: string;
     projectName: string;
     projectLogoSrc: string;
@@ -23,6 +24,7 @@ type NavBarProps = {
         help?: React.ReactNode;
         userProfile?: UserProfile;
     };
+    maxWidth?: string;
 } & DataAttributes;
 /**
  * NavBar is a top navigation component that displays project branding, menu items, and additional features like notifications, help, and user profile.
@@ -38,5 +40,5 @@ type NavBarProps = {
  * @param {UserProfile} [props.additionalItems.userProfile] - User profile configuration with initials and dropdown content
  * @returns {JSX.Element} The rendered NavBar component
  */
-export default function NavBar({ projectName, projectLogoSrc, projectTag, menuItems, additionalItems, className, }: NavBarProps): import("react/jsx-runtime").JSX.Element;
+export default function NavBar({ activeMenuItemHref, projectName, projectLogoSrc, projectTag, menuItems, additionalItems, className, maxWidth, }: NavBarProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/NavBar/NavBar.js

@@ -1,190 +1,190 @@
 import { jsx as e, jsxs as M } from "react/jsx-runtime";
 import q from "../Tag/Tag.js";
 import B from "../Icon/Icon.js";
-import { c as U } from "../../clsx-OuTLNxxd.js";
-import * as u from "react";
+import { c as T } from "../../clsx-OuTLNxxd.js";
+import * as c from "react";
 import { u as ee, c as j, a as ae, R as re, I as ne } from "../../index-CjQV7MmW.js";
 import { u as oe, c as te, P as V, d as ie, a as N } from "../../index-DWydnyjJ.js";
-import { u as T } from "../../index-2H7slGYV.js";
-import { c as ue, R as se, A as ce, P as le, C as me, I as de, G as be, L as pe, a as ve, b as _e, d as fe, e as ge, S as he, f as Me, g as Ne, h as Re } from "../../index-CVWHq7Pr.js";
-import '../../assets/NavBar.css';var x = "Menubar", [O, xe, Se] = ae(x), [z, ta] = te(x, [
-  Se,
+import { u as O } from "../../index-2H7slGYV.js";
+import { c as ue, R as se, A as ce, P as le, C as me, I as de, G as be, L as ve, a as pe, b as _e, d as fe, e as ge, S as he, f as Me, g as Ne, h as Re } from "../../index-CVWHq7Pr.js";
+import '../../assets/NavBar.css';var w = "Menubar", [I, we, xe] = ae(w), [z, ta] = te(w, [
+  xe,
   j
-]), p = ue(), H = j(), [we, G] = z(x), Y = u.forwardRef(
-  (a, t) => {
+]), _ = ue(), H = j(), [Se, K] = z(w), Y = c.forwardRef(
+  (a, o) => {
     const {
-      __scopeMenubar: n,
-      value: o,
-      onValueChange: r,
-      defaultValue: h,
-      loop: s = !0,
-      dir: c,
+      __scopeMenubar: r,
+      value: n,
+      onValueChange: t,
+      defaultValue: u,
+      loop: v = !0,
+      dir: d,
       ...m
-    } = a, v = ee(c), l = H(n), [f, b] = oe({
-      prop: o,
-      onChange: r,
-      defaultProp: h ?? "",
-      caller: x
-    }), [g, d] = u.useState(null);
+    } = a, s = ee(d), l = H(r), [g, p] = oe({
+      prop: n,
+      onChange: t,
+      defaultProp: u ?? "",
+      caller: w
+    }), [h, b] = c.useState(null);
     return /* @__PURE__ */ e(
-      we,
+      Se,
       {
-        scope: n,
-        value: f,
-        onMenuOpen: u.useCallback(
-          (_) => {
-            b(_), d(_);
+        scope: r,
+        value: g,
+        onMenuOpen: c.useCallback(
+          (f) => {
+            p(f), b(f);
           },
-          [b]
+          [p]
         ),
-        onMenuClose: u.useCallback(() => b(""), [b]),
-        onMenuToggle: u.useCallback(
-          (_) => {
-            b((k) => k ? "" : _), d(_);
+        onMenuClose: c.useCallback(() => p(""), [p]),
+        onMenuToggle: c.useCallback(
+          (f) => {
+            p((F) => F ? "" : f), b(f);
           },
-          [b]
+          [p]
         ),
-        dir: v,
-        loop: s,
-        children: /* @__PURE__ */ e(O.Provider, { scope: n, children: /* @__PURE__ */ e(O.Slot, { scope: n, children: /* @__PURE__ */ e(
+        dir: s,
+        loop: v,
+        children: /* @__PURE__ */ e(I.Provider, { scope: r, children: /* @__PURE__ */ e(I.Slot, { scope: r, children: /* @__PURE__ */ e(
           re,
           {
             asChild: !0,
             ...l,
             orientation: "horizontal",
-            loop: s,
-            dir: v,
-            currentTabStopId: g,
-            onCurrentTabStopIdChange: d,
-            children: /* @__PURE__ */ e(V.div, { role: "menubar", ...m, ref: t })
+            loop: v,
+            dir: s,
+            currentTabStopId: h,
+            onCurrentTabStopIdChange: b,
+            children: /* @__PURE__ */ e(V.div, { role: "menubar", ...m, ref: o })
           }
         ) }) })
       }
     );
   }
 );
-Y.displayName = x;
-var K = "MenubarMenu", [Ce, Q] = z(K), X = (a) => {
-  const { __scopeMenubar: t, value: n, ...o } = a, r = T(), h = n || r || "LEGACY_REACT_AUTO_VALUE", s = G(K, t), c = p(t), m = u.useRef(null), v = u.useRef(!1), l = s.value === h;
-  return u.useEffect(() => {
-    l || (v.current = !1);
+Y.displayName = w;
+var k = "MenubarMenu", [Ce, Q] = z(k), X = (a) => {
+  const { __scopeMenubar: o, value: r, ...n } = a, t = O(), u = r || t || "LEGACY_REACT_AUTO_VALUE", v = K(k, o), d = _(o), m = c.useRef(null), s = c.useRef(!1), l = v.value === u;
+  return c.useEffect(() => {
+    l || (s.current = !1);
   }, [l]), /* @__PURE__ */ e(
     Ce,
     {
-      scope: t,
-      value: h,
-      triggerId: T(),
+      scope: o,
+      value: u,
+      triggerId: O(),
       triggerRef: m,
-      contentId: T(),
-      wasKeyboardTriggerOpenRef: v,
+      contentId: O(),
+      wasKeyboardTriggerOpenRef: s,
       children: /* @__PURE__ */ e(
         se,
         {
-          ...c,
+          ...d,
           open: l,
-          onOpenChange: (f) => {
-            f || s.onMenuClose();
+          onOpenChange: (g) => {
+            g || v.onMenuClose();
           },
           modal: !1,
-          dir: s.dir,
-          ...o
+          dir: v.dir,
+          ...n
         }
       )
     }
   );
 };
-X.displayName = K;
-var I = "MenubarTrigger", W = u.forwardRef(
-  (a, t) => {
-    const { __scopeMenubar: n, disabled: o = !1, ...r } = a, h = H(n), s = p(n), c = G(I, n), m = Q(I, n), v = u.useRef(null), l = ie(t, v, m.triggerRef), [f, b] = u.useState(!1), g = c.value === m.value;
-    return /* @__PURE__ */ e(O.ItemSlot, { scope: n, value: m.value, disabled: o, children: /* @__PURE__ */ e(
+X.displayName = k;
+var D = "MenubarTrigger", J = c.forwardRef(
+  (a, o) => {
+    const { __scopeMenubar: r, disabled: n = !1, ...t } = a, u = H(r), v = _(r), d = K(D, r), m = Q(D, r), s = c.useRef(null), l = ie(o, s, m.triggerRef), [g, p] = c.useState(!1), h = d.value === m.value;
+    return /* @__PURE__ */ e(I.ItemSlot, { scope: r, value: m.value, disabled: n, children: /* @__PURE__ */ e(
       ne,
       {
         asChild: !0,
-        ...h,
-        focusable: !o,
+        ...u,
+        focusable: !n,
         tabStopId: m.value,
-        children: /* @__PURE__ */ e(ce, { asChild: !0, ...s, children: /* @__PURE__ */ e(
+        children: /* @__PURE__ */ e(ce, { asChild: !0, ...v, children: /* @__PURE__ */ e(
           V.button,
           {
             type: "button",
             role: "menuitem",
             id: m.triggerId,
             "aria-haspopup": "menu",
-            "aria-expanded": g,
-            "aria-controls": g ? m.contentId : void 0,
-            "data-highlighted": f ? "" : void 0,
-            "data-state": g ? "open" : "closed",
-            "data-disabled": o ? "" : void 0,
-            disabled: o,
-            ...r,
+            "aria-expanded": h,
+            "aria-controls": h ? m.contentId : void 0,
+            "data-highlighted": g ? "" : void 0,
+            "data-state": h ? "open" : "closed",
+            "data-disabled": n ? "" : void 0,
+            disabled: n,
+            ...t,
             ref: l,
-            onPointerDown: N(a.onPointerDown, (d) => {
-              !o && d.button === 0 && d.ctrlKey === !1 && (c.onMenuOpen(m.value), g || d.preventDefault());
+            onPointerDown: N(a.onPointerDown, (b) => {
+              !n && b.button === 0 && b.ctrlKey === !1 && (d.onMenuOpen(m.value), h || b.preventDefault());
             }),
             onPointerEnter: N(a.onPointerEnter, () => {
-              var _;
-              !!c.value && !g && (c.onMenuOpen(m.value), (_ = v.current) == null || _.focus());
+              var f;
+              !!d.value && !h && (d.onMenuOpen(m.value), (f = s.current) == null || f.focus());
             }),
-            onKeyDown: N(a.onKeyDown, (d) => {
-              o || (["Enter", " "].includes(d.key) && c.onMenuToggle(m.value), d.key === "ArrowDown" && c.onMenuOpen(m.value), ["Enter", " ", "ArrowDown"].includes(d.key) && (m.wasKeyboardTriggerOpenRef.current = !0, d.preventDefault()));
+            onKeyDown: N(a.onKeyDown, (b) => {
+              n || (["Enter", " "].includes(b.key) && d.onMenuToggle(m.value), b.key === "ArrowDown" && d.onMenuOpen(m.value), ["Enter", " ", "ArrowDown"].includes(b.key) && (m.wasKeyboardTriggerOpenRef.current = !0, b.preventDefault()));
             }),
-            onFocus: N(a.onFocus, () => b(!0)),
-            onBlur: N(a.onBlur, () => b(!1))
+            onFocus: N(a.onFocus, () => p(!0)),
+            onBlur: N(a.onBlur, () => p(!1))
           }
         ) })
       }
     ) });
   }
 );
-W.displayName = I;
-var Ae = "MenubarPortal", Z = (a) => {
-  const { __scopeMenubar: t, ...n } = a, o = p(t);
-  return /* @__PURE__ */ e(le, { ...o, ...n });
+J.displayName = D;
+var Ae = "MenubarPortal", W = (a) => {
+  const { __scopeMenubar: o, ...r } = a, n = _(o);
+  return /* @__PURE__ */ e(le, { ...n, ...r });
 };
-Z.displayName = Ae;
-var D = "MenubarContent", $ = u.forwardRef(
-  (a, t) => {
-    const { __scopeMenubar: n, align: o = "start", ...r } = a, h = p(n), s = G(D, n), c = Q(D, n), m = xe(n), v = u.useRef(!1);
+W.displayName = Ae;
+var G = "MenubarContent", Z = c.forwardRef(
+  (a, o) => {
+    const { __scopeMenubar: r, align: n = "start", ...t } = a, u = _(r), v = K(G, r), d = Q(G, r), m = we(r), s = c.useRef(!1);
     return /* @__PURE__ */ e(
       me,
       {
-        id: c.contentId,
-        "aria-labelledby": c.triggerId,
+        id: d.contentId,
+        "aria-labelledby": d.triggerId,
         "data-radix-menubar-content": "",
-        ...h,
-        ...r,
-        ref: t,
-        align: o,
+        ...u,
+        ...t,
+        ref: o,
+        align: n,
         onCloseAutoFocus: N(a.onCloseAutoFocus, (l) => {
-          var b;
-          !!!s.value && !v.current && ((b = c.triggerRef.current) == null || b.focus()), v.current = !1, l.preventDefault();
+          var p;
+          !!!v.value && !s.current && ((p = d.triggerRef.current) == null || p.focus()), s.current = !1, l.preventDefault();
         }),
         onFocusOutside: N(a.onFocusOutside, (l) => {
-          const f = l.target;
-          m().some((g) => {
-            var d;
-            return (d = g.ref.current) == null ? void 0 : d.contains(f);
+          const g = l.target;
+          m().some((h) => {
+            var b;
+            return (b = h.ref.current) == null ? void 0 : b.contains(g);
           }) && l.preventDefault();
         }),
         onInteractOutside: N(a.onInteractOutside, () => {
-          v.current = !0;
+          s.current = !0;
         }),
         onEntryFocus: (l) => {
-          c.wasKeyboardTriggerOpenRef.current || l.preventDefault();
+          d.wasKeyboardTriggerOpenRef.current || l.preventDefault();
         },
         onKeyDown: N(
           a.onKeyDown,
           (l) => {
             if (["ArrowRight", "ArrowLeft"].includes(l.key)) {
-              const f = l.target, b = f.hasAttribute("data-radix-menubar-subtrigger"), g = f.closest("[data-radix-menubar-content]") !== l.currentTarget, _ = (s.dir === "rtl" ? "ArrowRight" : "ArrowLeft") === l.key;
-              if (!_ && b || g && _) return;
+              const g = l.target, p = g.hasAttribute("data-radix-menubar-subtrigger"), h = g.closest("[data-radix-menubar-content]") !== l.currentTarget, f = (v.dir === "rtl" ? "ArrowRight" : "ArrowLeft") === l.key;
+              if (!f && p || h && f) return;
               let R = m().filter((E) => !E.disabled).map((E) => E.value);
-              _ && R.reverse();
-              const F = R.indexOf(c.value);
-              R = s.loop ? We(R, F + 1) : R.slice(F + 1);
-              const [L] = R;
-              L && s.onMenuOpen(L);
+              f && R.reverse();
+              const L = R.indexOf(d.value);
+              R = v.loop ? Je(R, L + 1) : R.slice(L + 1);
+              const [U] = R;
+              U && v.onMenuOpen(U);
             }
           },
           { checkForDefaultPrevented: !1 }
@@ -201,93 +201,93 @@ var D = "MenubarContent", $ = u.forwardRef(
     );
   }
 );
-$.displayName = D;
-var ye = "MenubarGroup", Pe = u.forwardRef(
-  (a, t) => {
-    const { __scopeMenubar: n, ...o } = a, r = p(n);
-    return /* @__PURE__ */ e(be, { ...r, ...o, ref: t });
+Z.displayName = G;
+var ye = "MenubarGroup", Pe = c.forwardRef(
+  (a, o) => {
+    const { __scopeMenubar: r, ...n } = a, t = _(r);
+    return /* @__PURE__ */ e(be, { ...t, ...n, ref: o });
   }
 );
 Pe.displayName = ye;
-var Ee = "MenubarLabel", Be = u.forwardRef(
-  (a, t) => {
-    const { __scopeMenubar: n, ...o } = a, r = p(n);
-    return /* @__PURE__ */ e(pe, { ...r, ...o, ref: t });
+var Ee = "MenubarLabel", Be = c.forwardRef(
+  (a, o) => {
+    const { __scopeMenubar: r, ...n } = a, t = _(r);
+    return /* @__PURE__ */ e(ve, { ...t, ...n, ref: o });
   }
 );
 Be.displayName = Ee;
-var Te = "MenubarItem", J = u.forwardRef(
-  (a, t) => {
-    const { __scopeMenubar: n, ...o } = a, r = p(n);
-    return /* @__PURE__ */ e(de, { ...r, ...o, ref: t });
+var Te = "MenubarItem", $ = c.forwardRef(
+  (a, o) => {
+    const { __scopeMenubar: r, ...n } = a, t = _(r);
+    return /* @__PURE__ */ e(de, { ...t, ...n, ref: o });
   }
 );
-J.displayName = Te;
-var Oe = "MenubarCheckboxItem", Ie = u.forwardRef(
-  (a, t) => {
-    const { __scopeMenubar: n, ...o } = a, r = p(n);
-    return /* @__PURE__ */ e(ve, { ...r, ...o, ref: t });
+$.displayName = Te;
+var Oe = "MenubarCheckboxItem", Ie = c.forwardRef(
+  (a, o) => {
+    const { __scopeMenubar: r, ...n } = a, t = _(r);
+    return /* @__PURE__ */ e(pe, { ...t, ...n, ref: o });
   }
 );
 Ie.displayName = Oe;
-var De = "MenubarRadioGroup", Ge = u.forwardRef(
-  (a, t) => {
-    const { __scopeMenubar: n, ...o } = a, r = p(n);
-    return /* @__PURE__ */ e(_e, { ...r, ...o, ref: t });
+var De = "MenubarRadioGroup", Ge = c.forwardRef(
+  (a, o) => {
+    const { __scopeMenubar: r, ...n } = a, t = _(r);
+    return /* @__PURE__ */ e(_e, { ...t, ...n, ref: o });
   }
 );
 Ge.displayName = De;
-var Ke = "MenubarRadioItem", ke = u.forwardRef(
-  (a, t) => {
-    const { __scopeMenubar: n, ...o } = a, r = p(n);
-    return /* @__PURE__ */ e(fe, { ...r, ...o, ref: t });
+var Ke = "MenubarRadioItem", ke = c.forwardRef(
+  (a, o) => {
+    const { __scopeMenubar: r, ...n } = a, t = _(r);
+    return /* @__PURE__ */ e(fe, { ...t, ...n, ref: o });
   }
 );
 ke.displayName = Ke;
-var Fe = "MenubarItemIndicator", Le = u.forwardRef((a, t) => {
-  const { __scopeMenubar: n, ...o } = a, r = p(n);
-  return /* @__PURE__ */ e(ge, { ...r, ...o, ref: t });
+var Fe = "MenubarItemIndicator", Le = c.forwardRef((a, o) => {
+  const { __scopeMenubar: r, ...n } = a, t = _(r);
+  return /* @__PURE__ */ e(ge, { ...t, ...n, ref: o });
 });
 Le.displayName = Fe;
-var Ue = "MenubarSeparator", je = u.forwardRef(
-  (a, t) => {
-    const { __scopeMenubar: n, ...o } = a, r = p(n);
-    return /* @__PURE__ */ e(he, { ...r, ...o, ref: t });
+var Ue = "MenubarSeparator", je = c.forwardRef(
+  (a, o) => {
+    const { __scopeMenubar: r, ...n } = a, t = _(r);
+    return /* @__PURE__ */ e(he, { ...t, ...n, ref: o });
   }
 );
 je.displayName = Ue;
-var Ve = "MenubarArrow", ze = u.forwardRef(
-  (a, t) => {
-    const { __scopeMenubar: n, ...o } = a, r = p(n);
-    return /* @__PURE__ */ e(Me, { ...r, ...o, ref: t });
+var Ve = "MenubarArrow", ze = c.forwardRef(
+  (a, o) => {
+    const { __scopeMenubar: r, ...n } = a, t = _(r);
+    return /* @__PURE__ */ e(Me, { ...t, ...n, ref: o });
   }
 );
 ze.displayName = Ve;
-var He = "MenubarSubTrigger", Ye = u.forwardRef(
-  (a, t) => {
-    const { __scopeMenubar: n, ...o } = a, r = p(n);
+var He = "MenubarSubTrigger", Ye = c.forwardRef(
+  (a, o) => {
+    const { __scopeMenubar: r, ...n } = a, t = _(r);
     return /* @__PURE__ */ e(
       Ne,
       {
         "data-radix-menubar-subtrigger": "",
-        ...r,
-        ...o,
-        ref: t
+        ...t,
+        ...n,
+        ref: o
       }
     );
   }
 );
 Ye.displayName = He;
-var Qe = "MenubarSubContent", Xe = u.forwardRef(
-  (a, t) => {
-    const { __scopeMenubar: n, ...o } = a, r = p(n);
+var Qe = "MenubarSubContent", Xe = c.forwardRef(
+  (a, o) => {
+    const { __scopeMenubar: r, ...n } = a, t = _(r);
     return /* @__PURE__ */ e(
       Re,
       {
-        ...r,
+        ...t,
         "data-radix-menubar-content": "",
-        ...o,
-        ref: t,
+        ...n,
+        ref: o,
         style: {
           ...a.style,
           "--radix-menubar-content-transform-origin": "var(--radix-popper-transform-origin)",
@@ -301,11 +301,12 @@ var Qe = "MenubarSubContent", Xe = u.forwardRef(
   }
 );
 Xe.displayName = Qe;
-function We(a, t) {
-  return a.map((n, o) => a[(t + o) % a.length]);
+function Je(a, o) {
+  return a.map((r, n) => a[(o + n) % a.length]);
 }
-var S = Y, w = X, C = W, A = Z, y = $, P = J;
+var x = Y, S = X, C = J, A = W, y = Z, P = $;
 const i = {
+  "navbar-wrapper": "NavBar-module__navbar-wrapper___e-f8y",
   "navbar-container": "NavBar-module__navbar-container___KnbUz",
   "navbar-logo-container": "NavBar-module__navbar-logo-container___VXWAo",
   "navbar-project-name-separator": "NavBar-module__navbar-project-name-separator___SmBBN",
@@ -315,6 +316,7 @@ const i = {
   "navbar-menu-list-item": "NavBar-module__navbar-menu-list-item___Y87cK",
   "navbar-menu-list-item-trigger-container": "NavBar-module__navbar-menu-list-item-trigger-container___OsXar",
   "navbar-menu-list-item-action": "NavBar-module__navbar-menu-list-item-action___MPFZz",
+  "navbar-menu-list-item-action-active": "NavBar-module__navbar-menu-list-item-action-active___J7eRN",
   "navbar-menu-list-item-arrow": "NavBar-module__navbar-menu-list-item-arrow___QoJsh",
   "navbar-menu-list-item-submenu": "NavBar-module__navbar-menu-list-item-submenu___goVcf",
   "navbar-menu-list-item-submenu-item": "NavBar-module__navbar-menu-list-item-submenu-item___sH6du",
@@ -326,47 +328,52 @@ const i = {
   "navbar-notification-badge": "NavBar-module__navbar-notification-badge___vp5bK"
 };
 function ia({
-  projectName: a,
-  projectLogoSrc: t,
+  activeMenuItemHref: a,
+  projectName: o,
+  projectLogoSrc: r,
   projectTag: n,
-  menuItems: o,
-  additionalItems: r,
-  className: h
+  menuItems: t,
+  additionalItems: u,
+  className: v,
+  maxWidth: d
 }) {
-  return /* @__PURE__ */ M("div", { className: U(i["navbar-container"], h), children: [
+  const m = (s) => s ? a === s : !1;
+  return /* @__PURE__ */ e("div", { className: T(i["navbar-wrapper"], v), children: /* @__PURE__ */ M("div", { className: i["navbar-container"], style: {
+    maxWidth: d
+  }, children: [
     /* @__PURE__ */ M("div", { className: i["navbar-logo-container"], children: [
-      /* @__PURE__ */ e("img", { src: t, alt: "NavBar" }),
+      /* @__PURE__ */ e("img", { src: r, alt: "NavBar" }),
       /* @__PURE__ */ e("span", { className: i["navbar-project-name-separator"] }),
-      /* @__PURE__ */ e("span", { className: i["navbar-project-name"], children: a }),
+      /* @__PURE__ */ e("span", { className: i["navbar-project-name"], children: o }),
       n && /* @__PURE__ */ e(q, { type: "success", size: "md", structure: "border", label: n })
     ] }),
     /* @__PURE__ */ M("div", { className: i["navbar-menu"], children: [
-      /* @__PURE__ */ e(S, { className: i["navbar-menu-list"], children: o == null ? void 0 : o.map((s) => /* @__PURE__ */ M(w, { children: [
+      /* @__PURE__ */ e(x, { className: i["navbar-menu-list"], children: t == null ? void 0 : t.map((s) => /* @__PURE__ */ M(S, { children: [
         /* @__PURE__ */ e(C, { className: i["navbar-menu-list-item"], children: s.menuItems ? /* @__PURE__ */ M("span", { className: i["navbar-menu-list-item-trigger-container"], children: [
           /* @__PURE__ */ e("span", { children: s.label }),
-          /* @__PURE__ */ e(B, { icon: "ap-icon-expand-more", className: U(i["navbar-menu-list-item-arrow"]) })
-        ] }) : /* @__PURE__ */ e("a", { className: i["navbar-menu-list-item-action"], href: s.href, children: s.label }) }),
-        s.menuItems && /* @__PURE__ */ e(A, { children: /* @__PURE__ */ e(y, { className: i["navbar-menu-list-item-submenu"], children: s.menuItems.map((c) => /* @__PURE__ */ e(P, { className: i["navbar-menu-list-item-submenu-item"], children: /* @__PURE__ */ e("a", { href: c.href, children: c.label }) }, c.label)) }) })
+          /* @__PURE__ */ e(B, { icon: "ap-icon-expand-more", className: T(i["navbar-menu-list-item-arrow"]) })
+        ] }) : /* @__PURE__ */ e("a", { className: T(i["navbar-menu-list-item-action"], m(s.href) && i["navbar-menu-list-item-action-active"]), href: s.href, children: s.label }) }),
+        s.menuItems && /* @__PURE__ */ e(A, { children: /* @__PURE__ */ e(y, { className: i["navbar-menu-list-item-submenu"], children: s.menuItems.map((l) => /* @__PURE__ */ e(P, { className: i["navbar-menu-list-item-submenu-item"], children: /* @__PURE__ */ e("a", { href: l.href, children: l.label }) }, l.label)) }) })
       ] }, s.label)) }),
       /* @__PURE__ */ M("div", { className: i["navbar-menu-additional"], children: [
-        (r == null ? void 0 : r.notifications) && /* @__PURE__ */ e(S, { children: /* @__PURE__ */ M(w, { children: [
+        (u == null ? void 0 : u.notifications) && /* @__PURE__ */ e(x, { children: /* @__PURE__ */ M(S, { children: [
           /* @__PURE__ */ e(C, { className: i["navbar-menu-additional-trigger"], children: /* @__PURE__ */ M("div", { className: i["navbar-notification-container"], children: [
             /* @__PURE__ */ e(B, { icon: "ap-icon-notification-filled", className: i["navbar-menu-additional-icon"] }),
-            r.notifications.count > 0 && /* @__PURE__ */ e("span", { className: i["navbar-notification-badge"], children: r.notifications.count > 99 ? "99+" : r.notifications.count })
+            u.notifications.count > 0 && /* @__PURE__ */ e("span", { className: i["navbar-notification-badge"], children: u.notifications.count > 99 ? "99+" : u.notifications.count })
           ] }) }),
-          /* @__PURE__ */ e(A, { children: /* @__PURE__ */ e(y, { align: "end", className: i["navbar-menu-list-item-submenu"], children: /* @__PURE__ */ e(P, { className: i["navbar-menu-list-item-submenu-item"], children: r.notifications.content }) }) })
+          /* @__PURE__ */ e(A, { children: /* @__PURE__ */ e(y, { align: "end", className: i["navbar-menu-list-item-submenu"], children: /* @__PURE__ */ e(P, { className: i["navbar-menu-list-item-submenu-item"], children: u.notifications.content }) }) })
         ] }) }),
-        (r == null ? void 0 : r.help) && /* @__PURE__ */ e(S, { children: /* @__PURE__ */ M(w, { children: [
+        (u == null ? void 0 : u.help) && /* @__PURE__ */ e(x, { children: /* @__PURE__ */ M(S, { children: [
           /* @__PURE__ */ e(C, { className: i["navbar-menu-additional-trigger"], children: /* @__PURE__ */ e(B, { icon: "ap-icon-help-filled", className: i["navbar-menu-additional-icon"] }) }),
-          /* @__PURE__ */ e(A, { children: /* @__PURE__ */ e(y, { align: "end", className: i["navbar-menu-list-item-submenu"], children: /* @__PURE__ */ e(P, { className: i["navbar-menu-list-item-submenu-item"], children: r.help }) }) })
+          /* @__PURE__ */ e(A, { children: /* @__PURE__ */ e(y, { align: "end", className: i["navbar-menu-list-item-submenu"], children: /* @__PURE__ */ e(P, { className: i["navbar-menu-list-item-submenu-item"], children: u.help }) }) })
         ] }) }),
-        (r == null ? void 0 : r.userProfile) && /* @__PURE__ */ e(S, { children: /* @__PURE__ */ M(w, { children: [
-          /* @__PURE__ */ e(C, { className: i["navbar-menu-additional-trigger"], children: /* @__PURE__ */ e("span", { className: i["navbar-menu-additional-user-profile"], children: r.userProfile.initials }) }),
-          /* @__PURE__ */ e(A, { children: /* @__PURE__ */ e(y, { align: "end", className: i["navbar-menu-list-item-submenu"], children: /* @__PURE__ */ e(P, { className: i["navbar-menu-list-item-submenu-item"], children: r.userProfile.content }) }) })
+        (u == null ? void 0 : u.userProfile) && /* @__PURE__ */ e(x, { children: /* @__PURE__ */ M(S, { children: [
+          /* @__PURE__ */ e(C, { className: i["navbar-menu-additional-trigger"], children: /* @__PURE__ */ e("span", { className: i["navbar-menu-additional-user-profile"], children: u.userProfile.initials }) }),
+          /* @__PURE__ */ e(A, { children: /* @__PURE__ */ e(y, { align: "end", className: i["navbar-menu-list-item-submenu"], children: /* @__PURE__ */ e(P, { className: i["navbar-menu-list-item-submenu-item"], children: u.userProfile.content }) }) })
         ] }) })
       ] })
     ] })
-  ] });
+  ] }) });
 }
 export {
   ia as default

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alixpartners/ui-components",
-  "version": "2.0.0-beta.10",
+  "version": "2.0.0-beta.12",
   "type": "module",
   "files": [
     "dist"