@asphalt-react/appbar - npm Package Compare versions

Comparing version 2.12.2 to 2.13.0

dist/index.css

+.Appbar__63dIe {
+  --surface: var(--static-surface-primary, #ffffff);
+  --border-color: var(--static-border-secondary, #dce5f0);
+  --border: 1px solid var(--border-color);
+
+  background-color: var(--surface);
+  border-bottom: var(--border);
+  min-height: 3.5rem;
+  display: flex;
+}
+
+.content__nqUsO {
+  display: flex;
+  overflow-y: unset;
+  flex: 1;
+}
+
+.toggleBtn__0VRqf {
+  display: none;
+}
+
+.head__5-R9i {
+  display: flex;
+  flex: none;
+  border-bottom: none;
+}
+
+.tail__Z5pxo {
+  display: flex;
+}
+
+.noContent__qAw3W {
+  flex: 1;
+}
+
+@media screen and (max-width: 600px) {
+  .Appbar__63dIe {
+    border-bottom: var(--border);
+  }
+
+  .AppbarExpanded__P514U {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    z-index: 1;
+    border-bottom: none;
+    display: block;
+  }
+
+  .headExpanded__ng5mo {
+    --border-color: var(--static-border-secondary, #dce5f0);
+    border-bottom: var(--border);
+  }
+
+  .content__nqUsO {
+    display: none;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    width: 100%;
+    flex: none;
+  }
+
+  .toggleBtn__0VRqf {
+    display: flex;
+  }
+
+  .contentExpanded__wy0Vn {
+    display: block;
+  }
+
+  .head__5-R9i {
+    display: flex;
+    flex: 1;
+    padding: var(--space-navigation-XS, 0.5rem);
+  }
+
+  .tail__Z5pxo {
+    padding: var(--space-navigation-XS, 0.5rem);
+  }
+
+  .tailExpanded__oa7Rz {
+    display: none;
+  }
+}
+
+.BaseAppbar__g1OAe {
+  --surface: var(--static-surface-primary, #ffffff);
+
+  background: var(--surface);
+  display: flex;
+  flex: none;
+  align-items: center;
+  gap: var(--space-navigation-L, 1rem);
+  padding-inline: calc(var(--space-navigation-L, 1rem) * 2);
+  box-sizing: border-box;
+  width: 100%;
+}
+
+.bezelless__nN1uY {
+  padding: 0;
+}
+
+@media screen and (max-width: 600px) {
+  .BaseAppbar__g1OAe {
+    padding: 0;
+    flex-wrap: wrap;
+    gap: 0;
+  }
+}
+
+.AppbarHead__IHqGF {
+  display: inline-flex;
+  gap: var(--space-navigation-L, 1rem);
+  align-items: center;
+  box-sizing: border-box;
+  flex: none;
+}
+
+@media screen and (max-width: 600px) {
+  .AppbarHead__IHqGF {
+    flex: 1;
+    gap: var(--space-navigation-XS, 0.5rem);
+  }
+
+  .bezelless__9PCnv {
+    padding: 0;
+  }
+}
+
+.AppbarBody__s9hA8 {
+  box-sizing: border-box;
+  flex: 1;
+}
+
+.AppbarTail__WZuvH {
+  display: inline-flex;
+  flex: none;
+  gap: var(--space-navigation-L, 1rem);
+  box-sizing: border-box;
+}
+
+@media screen and (max-width: 600px) {
+  .AppbarTail__WZuvH {
+    gap: var(--space-navigation-XS, 0.5rem);
+  }
+
+  .bezelless__yK8cL {
+    padding: 0;
+  }
+}
+
+.List__Sk5tG {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  gap: var(--space-navigation-2XS, 0.125rem);
+}
+
+@media screen and (max-width: 600px) {
+  .List__Sk5tG {
+    flex-direction: column;
+    gap: 0;
+  }
+}
+
+.NavItem__QrR3L {
+  margin: 0;
+}
+
+.NavItemIcon__-NAaQ {
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+  color: inherit;
+}
+
+.NavItemCaption__3opuI {
+  flex: 1;
+}
+
+.NavItemAction__yHcxq {
+  display: inline-flex;
+  gap: var(--space-navigation-XS, 0.5rem);
+  flex: 0 0 auto;
+  align-items: center;
+}
+
+.NavLink__AztJU {
+  --surface: transparent;
+  --font: var(
+    --text-bold-S,
+    600 0.875rem/1.5 Maison Neue,
+    Helvetica,
+    Open Sans,
+    sans-serif
+  );
+  --font-color: var(--content-muted, #8e919b);
+  --indicator-thickness: var(--indicator, 0.25rem);
+  --border-radius: var(--roundness-menu, 0.375rem);
+  --focus-appearance: var(--focus-outline, 2px solid);
+  --focus-color: var(--interactive-focus, #86afff);
+  --focus: var(--focus-appearance) var(--focus-color);
+
+  background: var(--surface);
+  color: var(--font-color);
+  font: var(--font);
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  outline-offset: 0;
+  cursor: pointer;
+  text-decoration: none;
+  border-radius: var(--border-radius);
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .NavLink__AztJU:hover {
+    --font-color: var(--content-primary, #2d2e34);
+    --surface: var(--interactive-surface-primary-hover, #f5f7fa);
+    text-decoration: none;
+  }
+}
+
+.NavLink__AztJU:active {
+  text-decoration: none;
+  /* To add border styles for active state without taking space for border in box model */
+  box-shadow: inset 0px 0px 0px 1px var(--interactive-active, #1c3abb);
+}
+
+@supports not selector(:focus-visible) {
+  .NavLink__AztJU:focus {
+    outline: var(--focus);
+  }
+}
+
+.NavLink__AztJU:focus-visible {
+  outline: var(--focus);
+}
+
+.indicatorWrap__kdNqF {
+  width: 100%;
+  padding-inline: var(--space-navigation-XS, 0.5rem);
+  display: none;
+}
+
+.indicator__-zWqN {
+  display: block;
+  width: 100%;
+  border-radius: 2px;
+  height: var(--indicator-thickness);
+  background: transparent;
+}
+
+.NavItemContent__JVCbs {
+  display: flex;
+  gap: var(--space-navigation-XS, 0.5rem);
+  align-items: center;
+  box-sizing: border-box;
+  padding: var(--space-navigation-XL, 1.125rem)
+    var(--space-navigation-2XL, 1.5rem);
+}
+
+.prominentContent__4-Hlf {
+  padding: var(--space-navigation-XL, 1.125rem)
+    var(--space-navigation-2XL, 1.5rem)
+    calc(var(--space-navigation-XL, 1.125rem) - var(--indicator-thickness));
+}
+
+.prominent__uo64x,
+.highlight__F8mqc {
+  --font-color: var(--content-primary, #2d2e34);
+  --surface: var(--interactive-highlighted-secondary, #f0f2f4);
+}
+
+.showIndicator__lcY-8 {
+  display: flex;
+}
+
+.visible__OKX7Z {
+  background: var(--interactive-accent, #5070fd);
+}
+
+.prominentContent__4-Hlf.icon__YsBio {
+  padding: var(--space-navigation-XL, 1.125rem)
+    var(--space-navigation-2XL, 1.5rem)
+    calc(var(--space-navigation-XL, 1.125rem) - var(--indicator-thickness));
+}
+
+.icon__YsBio {
+  padding: var(--space-navigation-XL, 1.125rem)
+    var(--space-navigation-2XL, 1.5rem);
+}
+
+.bezelless__ICNkD {
+  padding: 0;
+}
+
+@media screen and (max-width: 600px) {
+  .NavLink__AztJU {
+    --font: var(
+      --text-bold-S,
+      600 0.875rem/1.5 Maison Neue,
+      Helvetica,
+      Open Sans,
+      sans-serif
+    );
+    --border-radius: var(--roundness-sharp, 0rem);
+    flex-direction: row;
+    outline-offset: -2px;
+    padding: var(--space-navigation-XL, 1.125rem)
+      var(--space-navigation-2XL, 1.5rem);
+    gap: calc(
+      var(--space-navigation-XS, 0.5rem) + var(--space-navigation-2XS, 0.125rem)
+    );
+  }
+
+  .NavItemContent__JVCbs {
+    flex: 1;
+    padding: 0;
+  }
+
+  .indicatorWrap__kdNqF {
+    width: var(--indicator-thickness);
+    align-self: stretch;
+    padding-inline: 0;
+  }
+
+  .indicator__-zWqN {
+    height: 100%;
+  }
+
+  .prominentContent__4-Hlf.icon__YsBio {
+    padding: 0;
+  }
+
+  .bezelless__ICNkD {
+    padding: 0;
+  }
+}

dist/index.cjs

@@ -0,1 +1,2 @@
+require("./index.css");
 'use strict';
@@ -6,3 +7,2 @@
 var cn = require('classnames');
-var context = require('@asphalt-react/context');
 var button = require('@asphalt-react/button');
@@ -23,111 +23,51 @@ var iconpack = require('@asphalt-react/iconpack');
 
-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]=React.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=React.forwardRef(({children,bezel=true,...props},ref)=>{context.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};
+const BaseAppbar=React.forwardRef(({children,bezel=true,...props},ref)=>{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})=>{context.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};
+const AppbarHead=({children,bezel=true,...props})=>{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})=>{context.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};
+const AppbarBody=({children,...props})=>{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})=>{context.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 AppbarTail=({children,bezel=true,...props})=>{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}=helper.focusUtil;const Appbar=({children,head=null,tail=null,dismissLabel="close appbar navigation",menuLabel="open appbar navigation",defaultVisible=false,...props})=>{context.sendStyles(stylesheet$a);const{style,className,...rest}=props;const hasChildren=Boolean(children);const{visible,open,close}=useAppbar({defaultVisible});const appbarRef=React.useRef(null);Appbar.close=close;const onKeyDown=event=>{if(visible){const{ESC,TAB}=helper.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.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(iconpack.Cross,null))):React.createElement("span",{className:styles$a.toggleBtn},React.createElement(button.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(iconpack.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};
+const{focusTrap}=helper.focusUtil;const Appbar=({children,head=null,tail=null,dismissLabel="close appbar navigation",menuLabel="open appbar navigation",defaultVisible=false,...props})=>{const{style,className,...rest}=props;const hasChildren=Boolean(children);const{visible,open,close}=useAppbar({defaultVisible});const appbarRef=React.useRef(null);Appbar.close=close;const onKeyDown=event=>{if(visible){const{ESC,TAB}=helper.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.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(iconpack.Cross,null))):React.createElement("span",{className:styles$a.toggleBtn},React.createElement(button.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(iconpack.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})=>{context.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};
+const Nav=({children,...props})=>{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})=>{context.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};
+const NavItem=({children,...props})=>{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})=>{context.sendStyles(stylesheet$3);const{style,className,...rest}=props;return React.createElement("div",_extends({},rest,{className:styles$3.NavItemIcon}),React.createElement(svgNormalizer.SvgNormalizer,{dimension:navItemIconSize},children))};NavItemIcon.displayName="NavItemIcon";NavItemIcon.propTypes={children:PropTypes.node};
+const NavItemIcon=({children,...props})=>{const{style,className,...rest}=props;return React.createElement("div",_extends({},rest,{className:styles$3.NavItemIcon}),React.createElement(svgNormalizer.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})=>{context.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};
+const NavItemCaption=({children,...props})=>{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})=>{context.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};
+const NavItemAction=({children,propagateEvent=false,...props})=>{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@media (hover: hover) and (pointer: fine) {\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\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@media (hover: hover) and (pointer: fine) {\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\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}=helper.propsUtil;const NavLink=React.forwardRef(({children,as:Link="a",asProps={},active=false,prominent=false,highlight=false,icon=false,bezel=true,...props},ref)=>{context.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};
+const{resolvePropCollision}=helper.propsUtil;const NavLink=React.forwardRef(({children,as:Link="a",asProps={},active=false,prominent=false,highlight=false,icon=false,bezel=true,...props},ref)=>{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};
 
@@ -134,0 +74,0 @@ exports.Appbar = Appbar;

dist/index.js

@@ -0,5 +1,5 @@
+import "./index.css";
 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';
@@ -20,112 +20,52 @@ import { Cross, Menu } from '@asphalt-react/iconpack';
 
-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};
+const BaseAppbar=forwardRef(({children,bezel=true,...props},ref)=>{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};
+const AppbarHead=({children,bezel=true,...props})=>{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};
+const AppbarBody=({children,...props})=>{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 AppbarTail=({children,bezel=true,...props})=>{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};
+const{focusTrap}=focusUtil;const Appbar=({children,head=null,tail=null,dismissLabel="close appbar navigation",menuLabel="open appbar navigation",defaultVisible=false,...props})=>{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};
+const Nav=({children,...props})=>{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};
+const NavItem=({children,...props})=>{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};
+const NavItemIcon=({children,...props})=>{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};
+const NavItemCaption=({children,...props})=>{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};
+const NavItemAction=({children,propagateEvent=false,...props})=>{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@media (hover: hover) and (pointer: fine) {\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\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@media (hover: hover) and (pointer: fine) {\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\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};
+const{resolvePropCollision}=propsUtil;const NavLink=forwardRef(({children,as:Link="a",asProps={},active=false,prominent=false,highlight=false,icon=false,bezel=true,...props},ref)=>{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 };

package.json

 {
   "name": "@asphalt-react/appbar",
-  "version": "2.12.2",
+  "version": "2.13.0",
   "description": "Appbar",
@@ -41,11 +41,10 @@ "keywords": [
   "devDependencies": {
-    "@asphalt-react/build": "^2.12.0",
+    "@asphalt-react/build": "^2.13.0",
     "@testing-library/react": "^11.2.7"
   },
   "dependencies": {
-    "@asphalt-react/button": "^2.12.2",
-    "@asphalt-react/context": "^2.12.0",
-    "@asphalt-react/helper": "^2.12.0",
-    "@asphalt-react/iconpack": "^2.12.0",
-    "@asphalt-react/svg-normalizer": "^2.12.0",
+    "@asphalt-react/button": "^2.13.0",
+    "@asphalt-react/helper": "^2.13.0",
+    "@asphalt-react/iconpack": "^2.13.0",
+    "@asphalt-react/svg-normalizer": "^2.13.0",
     "classnames": "^2.5.1",
@@ -55,3 +54,6 @@ "prop-types": "^15.8.1"
   "license": "UNLICENSED",
-  "gitHead": "37abc774b63d4cf0a1d699371d887524b1819a4d"
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "gitHead": "6238a81dad8246006beb0bea5148a283f34b22ed"
 }

New alerts

Explicitly Unlicensed Item

License

Something was found which is explicitly marked as unlicensed.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Explicitly Unlicensed Item

License

Something was found which is explicitly marked as unlicensed.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Dependency count

7

-12.5%

Number of package files

6

20%

Lines of code

616

23.45%

Number of low supply chain risk alerts

2

-80%

Worsened metrics

Total package byte prevSize

41547

-33.68%

Number of medium supply chain risk alerts

1

Infinity%

Dependency changes

• - Removed

  @asphalt-react/context@^2.12.0

• - Removed

  @asphalt-react/context@2.15.0
  (transitive)

• Updated

  @asphalt-react/button@^2.13.0

• Updated

  @asphalt-react/helper@^2.13.0

• Updated

  @asphalt-react/iconpack@^2.13.0

• Updated

  @asphalt-react/svg-normalizer@^2.13.0