@asphalt-react/appbar/dist/index.js

Appbar

import React, { useState, forwardRef, useRef } from 'react';
import PropTypes from 'prop-types';
import cn from 'classnames';
import { sendStyles } from '@asphalt-react/context';
import { Button } from '@asphalt-react/button';
import { Cross, Menu } from '@asphalt-react/iconpack';
import { focusUtil, KEYCODES, propsUtil } from '@asphalt-react/helper';
import { SvgNormalizer } from '@asphalt-react/svg-normalizer';

function _extends() {
  return _extends = Object.assign ? Object.assign.bind() : function (n) {
    for (var e = 1; e < arguments.length; e++) {
      var t = arguments[e];
      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
    }
    return n;
  }, _extends.apply(null, arguments);
}

function styleInject(css, ref) {
  if ( ref === void 0 ) ref = {};
  var insertAt = ref.insertAt;

  if (!css || typeof document === 'undefined') { return; }

  var head = document.head || document.getElementsByTagName('head')[0];
  var style = document.createElement('style');
  style.type = 'text/css';

  if (insertAt === 'top') {
    if (head.firstChild) {
      head.insertBefore(style, head.firstChild);
    } else {
      head.appendChild(style);
    }
  } else {
    head.appendChild(style);
  }

  if (style.styleSheet) {
    style.styleSheet.cssText = css;
  } else {
    style.appendChild(document.createTextNode(css));
  }
}

var css_248z$a = ".Appbar__63dIe {\n  --surface: var(--static-surface-primary, #ffffff);\n  --border-color: var(--static-border-secondary, #dce5f0);\n  --border: 1px solid var(--border-color);\n\n  background-color: var(--surface);\n  border-bottom: var(--border);\n  min-height: 3.5rem;\n  display: flex;\n}\n\n.content__nqUsO {\n  display: flex;\n  overflow-y: unset;\n  flex: 1;\n}\n\n.toggleBtn__0VRqf {\n  display: none;\n}\n\n.head__5-R9i {\n  display: flex;\n  flex: none;\n  border-bottom: none;\n}\n\n.tail__Z5pxo {\n  display: flex;\n}\n\n.noContent__qAw3W {\n  flex: 1;\n}\n\n@media screen and (max-width: 600px) {\n  .Appbar__63dIe {\n    border-bottom: var(--border);\n  }\n\n  .AppbarExpanded__P514U {\n    position: fixed;\n    width: 100%;\n    height: 100%;\n    top: 0;\n    left: 0;\n    z-index: 1;\n    border-bottom: none;\n    display: block;\n  }\n\n  .headExpanded__ng5mo {\n    --border-color: var(--static-border-secondary, #dce5f0);\n    border-bottom: var(--border);\n  }\n\n  .content__nqUsO {\n    display: none;\n    overflow-y: auto;\n    overscroll-behavior: contain;\n    width: 100%;\n    flex: none;\n  }\n\n  .toggleBtn__0VRqf {\n    display: flex;\n  }\n\n  .contentExpanded__wy0Vn {\n    display: block;\n  }\n\n  .head__5-R9i {\n    display: flex;\n    flex: 1;\n    padding: 0.5rem;\n  }\n\n  .tail__Z5pxo {\n    padding: 0.5rem;\n  }\n\n  .tailExpanded__oa7Rz {\n    display: none;\n  }\n}\n";
var styles$a = {"Appbar":"Appbar__63dIe","content":"content__nqUsO","toggleBtn":"toggleBtn__0VRqf","head":"head__5-R9i","tail":"tail__Z5pxo","noContent":"noContent__qAw3W","AppbarExpanded":"AppbarExpanded__P514U","headExpanded":"headExpanded__ng5mo","contentExpanded":"contentExpanded__wy0Vn","tailExpanded":"tailExpanded__oa7Rz"};
var stylesheet$a=".Appbar__63dIe {\n  --surface: var(--static-surface-primary, #ffffff);\n  --border-color: var(--static-border-secondary, #dce5f0);\n  --border: 1px solid var(--border-color);\n\n  background-color: var(--surface);\n  border-bottom: var(--border);\n  min-height: 3.5rem;\n  display: flex;\n}\n\n.content__nqUsO {\n  display: flex;\n  overflow-y: unset;\n  flex: 1;\n}\n\n.toggleBtn__0VRqf {\n  display: none;\n}\n\n.head__5-R9i {\n  display: flex;\n  flex: none;\n  border-bottom: none;\n}\n\n.tail__Z5pxo {\n  display: flex;\n}\n\n.noContent__qAw3W {\n  flex: 1;\n}\n\n@media screen and (max-width: 600px) {\n  .Appbar__63dIe {\n    border-bottom: var(--border);\n  }\n\n  .AppbarExpanded__P514U {\n    position: fixed;\n    width: 100%;\n    height: 100%;\n    top: 0;\n    left: 0;\n    z-index: 1;\n    border-bottom: none;\n    display: block;\n  }\n\n  .headExpanded__ng5mo {\n    --border-color: var(--static-border-secondary, #dce5f0);\n    border-bottom: var(--border);\n  }\n\n  .content__nqUsO {\n    display: none;\n    overflow-y: auto;\n    overscroll-behavior: contain;\n    width: 100%;\n    flex: none;\n  }\n\n  .toggleBtn__0VRqf {\n    display: flex;\n  }\n\n  .contentExpanded__wy0Vn {\n    display: block;\n  }\n\n  .head__5-R9i {\n    display: flex;\n    flex: 1;\n    padding: 0.5rem;\n  }\n\n  .tail__Z5pxo {\n    padding: 0.5rem;\n  }\n\n  .tailExpanded__oa7Rz {\n    display: none;\n  }\n}\n";
styleInject(css_248z$a);

const useAppbar=({defaultVisible=false}={})=>{const[visible,setVisible]=useState(defaultVisible);const open=()=>{setVisible(true);};const close=()=>{setVisible(false);};return {visible,open,close}};

var css_248z$9 = ".BaseAppbar__g1OAe {\n  --surface: var(--static-surface-primary, #ffffff);\n\n  background: var(--surface);\n  display: flex;\n  flex: none;\n  align-items: center;\n  gap: 1rem;\n  padding-inline: 2rem;\n  box-sizing: border-box;\n  width: 100%;\n}\n\n.bezelless__nN1uY {\n  padding: 0;\n}\n\n@media screen and (max-width: 600px) {\n  .BaseAppbar__g1OAe {\n    padding: 0;\n    flex-wrap: wrap;\n    gap: 0;\n  }\n}\n";
var styles$9 = {"BaseAppbar":"BaseAppbar__g1OAe","bezelless":"bezelless__nN1uY"};
var stylesheet$9=".BaseAppbar__g1OAe {\n  --surface: var(--static-surface-primary, #ffffff);\n\n  background: var(--surface);\n  display: flex;\n  flex: none;\n  align-items: center;\n  gap: 1rem;\n  padding-inline: 2rem;\n  box-sizing: border-box;\n  width: 100%;\n}\n\n.bezelless__nN1uY {\n  padding: 0;\n}\n\n@media screen and (max-width: 600px) {\n  .BaseAppbar__g1OAe {\n    padding: 0;\n    flex-wrap: wrap;\n    gap: 0;\n  }\n}\n";
styleInject(css_248z$9);

const BaseAppbar=forwardRef(({children,bezel=true,...props},ref)=>{sendStyles(stylesheet$9);const{style,className,...rest}=props;return React.createElement("div",_extends({},rest,{className:cn(styles$9.BaseAppbar,{[styles$9.bezelless]:!bezel}),ref:ref}),children)});BaseAppbar.displayName="BaseAppbar";BaseAppbar.propTypes={children:PropTypes.node.isRequired,bezel:PropTypes.bool};BaseAppbar.defaultProps={bezel:true};

var css_248z$8 = ".AppbarHead__IHqGF {\n  display: inline-flex;\n  gap: 1rem;\n  align-items: center;\n  box-sizing: border-box;\n  flex: none;\n}\n\n@media screen and (max-width: 600px) {\n  .AppbarHead__IHqGF {\n    flex: 1;\n    gap: 0.5rem;\n  }\n\n  .bezelless__9PCnv {\n    padding: 0;\n  }\n}\n";
var styles$8 = {"AppbarHead":"AppbarHead__IHqGF","bezelless":"bezelless__9PCnv"};
var stylesheet$8=".AppbarHead__IHqGF {\n  display: inline-flex;\n  gap: 1rem;\n  align-items: center;\n  box-sizing: border-box;\n  flex: none;\n}\n\n@media screen and (max-width: 600px) {\n  .AppbarHead__IHqGF {\n    flex: 1;\n    gap: 0.5rem;\n  }\n\n  .bezelless__9PCnv {\n    padding: 0;\n  }\n}\n";
styleInject(css_248z$8);

const AppbarHead=({children,bezel=true,...props})=>{sendStyles(stylesheet$8);const{style,className,...rest}=props;return React.createElement("div",_extends({},rest,{className:cn(styles$8.AppbarHead,{[styles$8.bezelless]:!bezel})}),children)};AppbarHead.displayName="AppbarHead";AppbarHead.propTypes={children:PropTypes.node,bezel:PropTypes.bool};AppbarHead.defaultProps={bezel:true};

var css_248z$7 = ".AppbarBody__s9hA8 {\n  box-sizing: border-box;\n  flex: 1;\n}\n";
var styles$7 = {"AppbarBody":"AppbarBody__s9hA8"};
var stylesheet$7=".AppbarBody__s9hA8 {\n  box-sizing: border-box;\n  flex: 1;\n}\n";
styleInject(css_248z$7);

const AppbarBody=({children,...props})=>{sendStyles(stylesheet$7);const{style,className,...rest}=props;return React.createElement("div",_extends({},rest,{className:styles$7.AppbarBody}),children)};AppbarBody.displayName="AppbarBody";AppbarBody.propTypes={children:PropTypes.node.isRequired};

var css_248z$6 = ".AppbarTail__WZuvH {\n  display: inline-flex;\n  flex: none;\n  gap: 1rem;\n  box-sizing: border-box;\n}\n\n@media screen and (max-width: 600px) {\n  .AppbarTail__WZuvH {\n    gap: 0.5rem;\n  }\n\n  .bezelless__yK8cL {\n    padding: 0;\n  }\n}\n";
var styles$6 = {"AppbarTail":"AppbarTail__WZuvH","bezelless":"bezelless__yK8cL"};
var stylesheet$6=".AppbarTail__WZuvH {\n  display: inline-flex;\n  flex: none;\n  gap: 1rem;\n  box-sizing: border-box;\n}\n\n@media screen and (max-width: 600px) {\n  .AppbarTail__WZuvH {\n    gap: 0.5rem;\n  }\n\n  .bezelless__yK8cL {\n    padding: 0;\n  }\n}\n";
styleInject(css_248z$6);

const AppbarTail=({children,bezel=true,...props})=>{sendStyles(stylesheet$6);const{style,className,...rest}=props;return React.createElement("div",_extends({},rest,{className:cn(styles$6.AppbarTail,{[styles$6.bezelless]:!bezel})}),children)};AppbarTail.displayName="AppbarTail";AppbarTail.propTypes={children:PropTypes.node.isRequired,bezel:PropTypes.bool};AppbarTail.defaultProps={bezel:true};

const{focusTrap}=focusUtil;const Appbar=({children,head=null,tail=null,dismissLabel="close appbar navigation",menuLabel="open appbar navigation",defaultVisible=false,...props})=>{sendStyles(stylesheet$a);const{style,className,...rest}=props;const hasChildren=Boolean(children);const{visible,open,close}=useAppbar({defaultVisible});const appbarRef=useRef(null);Appbar.close=close;const onKeyDown=event=>{if(visible){const{ESC,TAB}=KEYCODES;if(!(event.keyCode===ESC||event.keyCode===TAB))return;if(event.keyCode===ESC){close();}if(event.keyCode===TAB){focusTrap(appbarRef.current,event);}}};const wrapperClass=cn(styles$a.Appbar,{[styles$a.AppbarExpanded]:visible});const contentClass=cn(styles$a.content,{[styles$a.contentExpanded]:visible});const headClass=cn(styles$a.head,{[styles$a.headExpanded]:visible},{[styles$a.noContent]:!hasChildren});const tailClass=cn(styles$a.tail,{[styles$a.tailExpanded]:visible});return React.createElement("div",{className:wrapperClass},React.createElement(BaseAppbar,_extends({},rest,{onKeyDown:onKeyDown,ref:appbarRef}),React.createElement("div",{className:headClass},React.createElement(AppbarHead,null,hasChildren&&(visible?React.createElement("span",{className:styles$a.toggleBtn},React.createElement(Button,{size:"l",icon:true,system:true,nude:true,compact:true,onClick:close,"aria-haspopup":"menu","aria-expanded":true,"aria-label":dismissLabel,id:"appbar-cross"},React.createElement(Cross,null))):React.createElement("span",{className:styles$a.toggleBtn},React.createElement(Button,{size:"l",icon:true,system:true,nude:true,compact:true,onClick:open,"aria-haspopup":"menu","aria-expanded":false,"aria-label":menuLabel,id:"appbar-hamburger"},React.createElement(Menu,null)))),head)),hasChildren&&React.createElement("div",{className:contentClass},React.createElement(AppbarBody,null,children)),tail&&React.createElement("div",{className:tailClass},React.createElement(AppbarTail,null,tail))))};Appbar.displayName="Appbar";Appbar.propTypes={children:PropTypes.node,head:PropTypes.node,tail:PropTypes.node,dismissLabel:PropTypes.string,menuLabel:PropTypes.string,defaultVisible:PropTypes.bool};Appbar.defaultProps={head:null,tail:null,dismissLabel:"close appbar navigation",menuLabel:"open appbar navigation",defaultVisible:false};

var css_248z$5 = ".List__Sk5tG {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  display: flex;\n  gap: 0.125rem;\n}\n\n@media screen and (max-width: 600px) {\n  .List__Sk5tG {\n    flex-direction: column;\n    gap: 0;\n  }\n}\n";
var styles$5 = {"List":"List__Sk5tG"};
var stylesheet$5=".List__Sk5tG {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  display: flex;\n  gap: 0.125rem;\n}\n\n@media screen and (max-width: 600px) {\n  .List__Sk5tG {\n    flex-direction: column;\n    gap: 0;\n  }\n}\n";
styleInject(css_248z$5);

const Nav=({children,...props})=>{sendStyles(stylesheet$5);const{style,className,...rest}=props;return React.createElement("nav",null,React.createElement("ul",_extends({role:"menubar","aria-labelledby":"appbar-hamburger",className:cn(styles$5.List)},rest),children))};Nav.displayName="Nav";Nav.propTypes={children:PropTypes.node.isRequired};

var css_248z$4 = ".NavItem__QrR3L {\n  margin: 0;\n}\n";
var styles$4 = {"NavItem":"NavItem__QrR3L"};
var stylesheet$4=".NavItem__QrR3L {\n  margin: 0;\n}\n";
styleInject(css_248z$4);

const NavItem=({children,...props})=>{sendStyles(stylesheet$4);const{style,className,...rest}=props;return React.createElement("li",_extends({},rest,{role:"none",className:styles$4.NavItem}),children)};NavItem.displayName="NavItem";NavItem.propTypes={children:PropTypes.node.isRequired};

var css_248z$3 = ".NavItemIcon__-NAaQ {\n  flex: 0 0 auto;\n  display: inline-flex;\n  align-items: center;\n  color: inherit;\n}\n";
var styles$3 = {"NavItemIcon":"NavItemIcon__-NAaQ"};
var stylesheet$3=".NavItemIcon__-NAaQ {\n  flex: 0 0 auto;\n  display: inline-flex;\n  align-items: center;\n  color: inherit;\n}\n";
styleInject(css_248z$3);

const navItemIconSize={height:"16",width:"16"};const activeStyles={prominent:"prominent",highlight:"highlight"};const DEFAULT_ACTIVE_STYLE=activeStyles.prominent;

const NavItemIcon=({children,...props})=>{sendStyles(stylesheet$3);const{style,className,...rest}=props;return React.createElement("div",_extends({},rest,{className:styles$3.NavItemIcon}),React.createElement(SvgNormalizer,{dimension:navItemIconSize},children))};NavItemIcon.displayName="NavItemIcon";NavItemIcon.propTypes={children:PropTypes.node};

var css_248z$2 = ".NavItemCaption__3opuI {\n  flex: 1;\n}\n";
var styles$2 = {"NavItemCaption":"NavItemCaption__3opuI"};
var stylesheet$2=".NavItemCaption__3opuI {\n  flex: 1;\n}\n";
styleInject(css_248z$2);

const NavItemCaption=({children,...props})=>{sendStyles(stylesheet$2);const{style,className,...rest}=props;return React.createElement("div",_extends({},rest,{className:styles$2.NavItemCaption}),children)};NavItemCaption.displayName="NavItemCaption";NavItemCaption.propTypes={children:PropTypes.node};

var css_248z$1 = ".NavItemAction__yHcxq {\n  display: inline-flex;\n  gap: 0.5rem;\n  flex: 0 0 auto;\n  align-items: center;\n}\n";
var styles$1 = {"NavItemAction":"NavItemAction__yHcxq"};
var stylesheet$1=".NavItemAction__yHcxq {\n  display: inline-flex;\n  gap: 0.5rem;\n  flex: 0 0 auto;\n  align-items: center;\n}\n";
styleInject(css_248z$1);

const NavItemAction=({children,propagateEvent=false,...props})=>{sendStyles(stylesheet$1);const{style,className,...rest}=props;const handleClick=event=>{event.preventDefault();event.stopPropagation();};return React.createElement("div",_extends({},rest,{className:styles$1.NavItemAction,onClick:propagateEvent?null:handleClick}),children)};NavItemAction.displayName="NavItemAction";NavItemAction.propTypes={children:PropTypes.node,propagateEvent:PropTypes.bool};NavItemAction.defaultProps={propagateEvent:false};

var css_248z = ".NavLink__AztJU {\n  --surface: transparent;\n  --font: var(\n    --text-bold-S,\n    600 0.875rem/1.5 Maison Neue,\n    Helvetica,\n    Open Sans,\n    sans-serif\n  );\n  --font-color: var(--content-muted, #8e919b);\n  --indicator-thickness: var(--indicator, 0.25rem);\n  --border-radius: var(--roundness-menu, 0.375rem);\n  --focus-appearance: var(--focus-outline, 2px solid);\n  --focus-color: var(--interactive-focus, #86afff);\n  --focus: var(--focus-appearance) var(--focus-color);\n\n  background: var(--surface);\n  color: var(--font-color);\n  font: var(--font);\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  outline-offset: 0;\n  cursor: pointer;\n  text-decoration: none;\n  border-radius: var(--border-radius);\n}\n\n.NavLink__AztJU:hover {\n  --font-color: var(--content-primary, #2d2e34);\n  --surface: var(--interactive-surface-primary-hover, #f5f7fa);\n  text-decoration: none;\n}\n\n.NavLink__AztJU:active {\n  text-decoration: none;\n  /* To add border styles for active state without taking space for border in box model */\n  box-shadow: inset 0px 0px 0px 1px var(--interactive-active, #1c3abb);\n}\n\n@supports not selector(:focus-visible) {\n  .NavLink__AztJU:focus {\n    outline: var(--focus);\n  }\n}\n\n.NavLink__AztJU:focus-visible {\n  outline: var(--focus);\n}\n\n.indicatorWrap__kdNqF {\n  width: 100%;\n  padding-inline: 0.5rem;\n  display: none;\n}\n\n.indicator__-zWqN {\n  display: block;\n  width: 100%;\n  border-radius: 2px;\n  height: var(--indicator-thickness);\n  background: transparent;\n}\n\n.NavItemContent__JVCbs {\n  display: flex;\n  gap: 0.5rem;\n  align-items: center;\n  box-sizing: border-box;\n  padding: 1.125rem 1.5rem;\n}\n\n.prominentContent__4-Hlf {\n  padding: 1.125rem 1.5rem calc(1.125rem - var(--indicator-thickness)) 1.5rem;\n}\n\n.prominent__uo64x,\n.highlight__F8mqc {\n  --font-color: var(--content-primary, #2d2e34);\n  --surface: var(--interactive-highlighted-secondary, #f0f2f4);\n}\n\n.showIndicator__lcY-8 {\n  display: flex;\n}\n\n.visible__OKX7Z {\n  background: var(--interactive-accent, #5070fd);\n}\n\n.prominentContent__4-Hlf.icon__YsBio {\n  padding: 1.25rem 1.5rem calc(1.25rem - var(--indicator-thickness)) 1.5rem;\n}\n\n.icon__YsBio {\n  padding: 1.25rem 1.5rem;\n}\n\n.bezelless__ICNkD {\n  padding: 0;\n}\n\n@media screen and (max-width: 600px) {\n  .NavLink__AztJU {\n    --font: var(\n      --text-bold-S,\n      600 0.875rem/1.5 Maison Neue,\n      Helvetica,\n      Open Sans,\n      sans-serif\n    );\n    --border-radius: var(--roundness-sharp, 0rem);\n    flex-direction: row;\n    outline-offset: -2px;\n    padding: 1.125rem 1.5rem;\n    gap: 0.625rem;\n  }\n\n  .NavItemContent__JVCbs {\n    flex: 1;\n    padding: 0;\n  }\n\n  .indicatorWrap__kdNqF {\n    width: var(--indicator-thickness);\n    align-self: stretch;\n    padding-inline: 0;\n  }\n\n  .indicator__-zWqN {\n    height: 100%;\n  }\n\n  .prominentContent__4-Hlf.icon__YsBio {\n    padding: 0;\n  }\n\n  .bezelless__ICNkD {\n    padding: 0;\n  }\n}\n";
var styles = {"NavLink":"NavLink__AztJU","indicatorWrap":"indicatorWrap__kdNqF","indicator":"indicator__-zWqN","NavItemContent":"NavItemContent__JVCbs","prominentContent":"prominentContent__4-Hlf","prominent":"prominent__uo64x","highlight":"highlight__F8mqc","showIndicator":"showIndicator__lcY-8","visible":"visible__OKX7Z","icon":"icon__YsBio","bezelless":"bezelless__ICNkD"};
var stylesheet=".NavLink__AztJU {\n  --surface: transparent;\n  --font: var(\n    --text-bold-S,\n    600 0.875rem/1.5 Maison Neue,\n    Helvetica,\n    Open Sans,\n    sans-serif\n  );\n  --font-color: var(--content-muted, #8e919b);\n  --indicator-thickness: var(--indicator, 0.25rem);\n  --border-radius: var(--roundness-menu, 0.375rem);\n  --focus-appearance: var(--focus-outline, 2px solid);\n  --focus-color: var(--interactive-focus, #86afff);\n  --focus: var(--focus-appearance) var(--focus-color);\n\n  background: var(--surface);\n  color: var(--font-color);\n  font: var(--font);\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  outline-offset: 0;\n  cursor: pointer;\n  text-decoration: none;\n  border-radius: var(--border-radius);\n}\n\n.NavLink__AztJU:hover {\n  --font-color: var(--content-primary, #2d2e34);\n  --surface: var(--interactive-surface-primary-hover, #f5f7fa);\n  text-decoration: none;\n}\n\n.NavLink__AztJU:active {\n  text-decoration: none;\n  /* To add border styles for active state without taking space for border in box model */\n  box-shadow: inset 0px 0px 0px 1px var(--interactive-active, #1c3abb);\n}\n\n@supports not selector(:focus-visible) {\n  .NavLink__AztJU:focus {\n    outline: var(--focus);\n  }\n}\n\n.NavLink__AztJU:focus-visible {\n  outline: var(--focus);\n}\n\n.indicatorWrap__kdNqF {\n  width: 100%;\n  padding-inline: 0.5rem;\n  display: none;\n}\n\n.indicator__-zWqN {\n  display: block;\n  width: 100%;\n  border-radius: 2px;\n  height: var(--indicator-thickness);\n  background: transparent;\n}\n\n.NavItemContent__JVCbs {\n  display: flex;\n  gap: 0.5rem;\n  align-items: center;\n  box-sizing: border-box;\n  padding: 1.125rem 1.5rem;\n}\n\n.prominentContent__4-Hlf {\n  padding: 1.125rem 1.5rem calc(1.125rem - var(--indicator-thickness)) 1.5rem;\n}\n\n.prominent__uo64x,\n.highlight__F8mqc {\n  --font-color: var(--content-primary, #2d2e34);\n  --surface: var(--interactive-highlighted-secondary, #f0f2f4);\n}\n\n.showIndicator__lcY-8 {\n  display: flex;\n}\n\n.visible__OKX7Z {\n  background: var(--interactive-accent, #5070fd);\n}\n\n.prominentContent__4-Hlf.icon__YsBio {\n  padding: 1.25rem 1.5rem calc(1.25rem - var(--indicator-thickness)) 1.5rem;\n}\n\n.icon__YsBio {\n  padding: 1.25rem 1.5rem;\n}\n\n.bezelless__ICNkD {\n  padding: 0;\n}\n\n@media screen and (max-width: 600px) {\n  .NavLink__AztJU {\n    --font: var(\n      --text-bold-S,\n      600 0.875rem/1.5 Maison Neue,\n      Helvetica,\n      Open Sans,\n      sans-serif\n    );\n    --border-radius: var(--roundness-sharp, 0rem);\n    flex-direction: row;\n    outline-offset: -2px;\n    padding: 1.125rem 1.5rem;\n    gap: 0.625rem;\n  }\n\n  .NavItemContent__JVCbs {\n    flex: 1;\n    padding: 0;\n  }\n\n  .indicatorWrap__kdNqF {\n    width: var(--indicator-thickness);\n    align-self: stretch;\n    padding-inline: 0;\n  }\n\n  .indicator__-zWqN {\n    height: 100%;\n  }\n\n  .prominentContent__4-Hlf.icon__YsBio {\n    padding: 0;\n  }\n\n  .bezelless__ICNkD {\n    padding: 0;\n  }\n}\n";
styleInject(css_248z);

const showIndicator=style=>{return style===activeStyles.highlight?false:true};

const{resolvePropCollision}=propsUtil;const NavLink=forwardRef(({children,as:Link="a",asProps={},active=false,prominent=false,highlight=false,icon=false,bezel=true,...props},ref)=>{sendStyles(stylesheet);const{style,className,...rest}=props;const{collision,value:activeStyle}=resolvePropCollision({highlight,prominent},DEFAULT_ACTIVE_STYLE);if(collision){console.warn(`NavLink: Multiple active styles detected. Falling back to "${DEFAULT_ACTIVE_STYLE}"`);}const{style:asStyle,className:asClass,...restProps}=asProps;const classes=cn(styles.NavLink,{[styles[activeStyle]]:active},{[styles.bezelless]:!bezel});const contentClasses=cn(styles.NavItemContent,styles[`${activeStyle}Content`],{[styles.bezelless]:!bezel},{[styles.icon]:icon});return React.createElement(Link,_extends({},rest,restProps,{className:classes,ref:ref,role:"menuitem"}),React.createElement("span",{className:contentClasses,"data-testid":"nav-item-content"},children),React.createElement("span",{className:cn(styles.indicatorWrap,{[styles.showIndicator]:showIndicator(activeStyle)})},React.createElement("span",{className:cn(styles.indicator,{[styles.visible]:active})})))});NavLink.displayName="NavLink";NavLink.propTypes={children:PropTypes.node,as:PropTypes.elementType,asProps:PropTypes.object,active:PropTypes.bool,prominent:PropTypes.bool,highlight:PropTypes.bool,icon:PropTypes.bool,bezel:PropTypes.bool};NavLink.defaultProps={as:"a",asProps:{},active:false,prominent:false,highlight:false,bezel:true,icon:false};

export { Appbar, AppbarBody, AppbarHead, AppbarTail, BaseAppbar, Nav, NavItem, NavItemAction, NavItemCaption, NavItemIcon, NavLink, useAppbar };