@contentful/f36-navbar 6.0.0-alpha.2 → 6.0.0

package/dist/esm/index.js

@@ -1,4 +1,4 @@
-import {MenuDivider,MenuSectionTitle,Menu}from'@contentful/f36-menu';import {Flex}from'@contentful/f36-core';import v from'react';import {css,cx}from'@emotion/css';import a from'@contentful/f36-tokens';import {generateComponentWithVariants,generateIconComponent,IconVariant}from'@contentful/f36-icon';import {Button}from'@contentful/f36-button';import {ArrowSquareOutIcon,ListIcon,CaretRightIcon,FlaskIcon,RocketLaunchIcon,EnvironmentAliasIcon,EnvironmentIcon}from'@contentful/f36-icons';import {Avatar}from'@contentful/f36-avatar';import {Tooltip}from'@contentful/f36-tooltip';import {SkeletonContainer,SkeletonText,SkeletonImage,SkeletonBodyText}from'@contentful/f36-skeleton';import {hexToRGBA}from'@contentful/f36-utils';import {Text}from'@contentful/f36-typography';var eo=Object.defineProperty,oo=Object.defineProperties;var to=Object.getOwnPropertyDescriptors;var Z=Object.getOwnPropertySymbols;var ue=Object.prototype.hasOwnProperty,ve=Object.prototype.propertyIsEnumerable;var ge=(e,o,t)=>o in e?eo(e,o,{enumerable:true,configurable:true,writable:true,value:t}):e[o]=t,p=(e,o)=>{for(var t in o||(o={}))ue.call(o,t)&&ge(e,t,o[t]);if(Z)for(var t of Z(o))ve.call(o,t)&&ge(e,t,o[t]);return e},d=(e,o)=>oo(e,to(o));var N=(e,o)=>{var t={};for(var r in e)ue.call(e,r)&&o.indexOf(r)<0&&(t[r]=e[r]);if(e!=null&&Z)for(var r of Z(e))o.indexOf(r)<0&&ve.call(e,r)&&(t[r]=e[r]);return t};var fe=60;var i={xsmall:"@media (min-width: 576px)",small:"@media (min-width: 867px)",medium:"@media (min-width: 1024px)",large:"@media (min-width: 1200px)",xlarge:"@media (min-width: 1920px)"},B=(e=a.glowPrimary)=>css({"&:focus":{boxShadow:e},"&:focus:not(:focus-visible)":{boxShadow:"unset"},"&:focus-visible":{boxShadow:e}}),W=(e="44px")=>css({overflow:"visible",position:"relative","&:after":{minHeight:e,minWidth:e,position:"absolute",width:"100%",content:'""',left:"50%",top:"50%",transform:"translate(-50%, -50%)"}});var he=({contentMaxWidth:e,variant:o})=>({container:css({justifyContent:"center",backgroundColor:a.gray100,width:"100%"}),logo:css({display:"none",[i.small]:{display:"block",height:"28px",width:"28px"}}),navigation:css({width:"100%",maxWidth:o==="wide"?"1920px":e,padding:`${a.spacingS} ${a.spacingM}`,height:`${60}px`,[i.small]:{padding:`${a.spacingM} ${a.spacingL}`}}),mainNavigation:t=>css({display:"none"},t==="small"?{[i.small]:{display:"flex"}}:{[i.medium]:{display:"flex"}}),mobileNavigationButton:t=>css({display:"flex",minHeight:"initial",height:"36px",padding:"0 12px",borderRadius:"10px"},t==="small"?{[i.small]:{display:"none"}}:{[i.medium]:{display:"none"}}),mobileNavigationIcon:css({heigt:"20px",width:"20px"}),secondaryNavigationWrapper:css({"> *:not(:first-child)":{display:"none",[i.xsmall]:{display:"flex"}}}),promoNavigationWrapper:css({display:"none",[i.large]:{display:"flex"}}),account:css({display:"none",[i.xsmall]:{display:"flex"}})});var Pe=generateComponentWithVariants({variants:{[IconVariant.Active]:generateIconComponent({path:v.createElement(v.Fragment,null,v.createElement("path",{d:"M10.0153 4.76531L6.2653 8.51531C6.23048 8.55018 6.18912 8.57784 6.14359 8.59671C6.09807 8.61558 6.04927 8.62529 5.99999 8.62529C5.95071 8.62529 5.90191 8.61558 5.85639 8.59671C5.81086 8.57784 5.76951 8.55018 5.73468 8.51531L1.98468 4.76531C1.93217 4.71287 1.89641 4.64602 1.88192 4.57324C1.86742 4.50046 1.87485 4.42501 1.90326 4.35645C1.93166 4.28789 1.97977 4.22931 2.0415 4.1881C2.10322 4.1469 2.17578 4.12494 2.24999 4.125H9.74999C9.8242 4.12494 9.89676 4.1469 9.95848 4.1881C10.0202 4.22931 10.0683 4.28789 10.0967 4.35645C10.1251 4.42501 10.1326 4.50046 10.1181 4.57324C10.1036 4.64602 10.0678 4.71287 10.0153 4.76531Z",fill:a.blue300})),viewBox:"0 0 12 12"}),[IconVariant.Default]:generateIconComponent({path:v.createElement(v.Fragment,null,v.createElement("path",{d:"M10.0153 4.76531L6.2653 8.51531C6.23048 8.55018 6.18912 8.57784 6.14359 8.59671C6.09807 8.61558 6.04927 8.62529 5.99999 8.62529C5.95071 8.62529 5.90191 8.61558 5.85639 8.59671C5.81086 8.57784 5.76951 8.55018 5.73468 8.51531L1.98468 4.76531C1.93217 4.71287 1.89641 4.64602 1.88192 4.57324C1.86742 4.50046 1.87485 4.42501 1.90326 4.35645C1.93166 4.28789 1.97977 4.22931 2.0415 4.1881C2.10322 4.1469 2.17578 4.12494 2.24999 4.125H9.74999C9.8242 4.12494 9.89676 4.1469 9.95848 4.1881C10.0202 4.22931 10.0683 4.28789 10.0967 4.35645C10.1251 4.42501 10.1326 4.50046 10.1181 4.57324C10.1036 4.64602 10.0678 4.71287 10.0153 4.76531Z",fill:a.gray400})),viewBox:"0 0 12 12"})}});var Se=generateIconComponent({name:"ContentfulLogoIcon",viewBox:"0 0 28 28",path:v.createElement(v.Fragment,null,v.createElement("path",{fill:"#1773EB",d:"M10.713 5.001c.845.843 1.167 2.079.845 3.228A6.663 6.663 0 0 1 15 7.276h.026a6.7 6.7 0 0 1 4.743 1.988 2.64 2.64 0 1 0 3.746-3.715A11.96 11.96 0 0 0 15.042 2h-.046a11.933 11.933 0 0 0-6.691 2.036h.074a3.287 3.287 0 0 1 2.334.967V5Z"}),v.createElement("path",{fill:"#E44F20",d:"M21.594 17.999a2.64 2.64 0 0 0-1.858.766 6.703 6.703 0 0 1-4.732 1.951h-.025a6.65 6.65 0 0 1-3.447-.968A3.3 3.3 0 0 1 8.35 23.93h-.086A11.926 11.926 0 0 0 14.96 26h.046a11.94 11.94 0 0 0 8.449-3.484 2.64 2.64 0 0 0-1.859-4.514V18h-.002Z"}),v.createElement("path",{fill:"#FFDA00",d:"M6.013 18.295a3.27 3.27 0 0 1 2.334-.967c.302 0 .603.04.894.122a6.7 6.7 0 0 1 .013-6.928A3.3 3.3 0 0 1 5.08 7.335v-.09a11.999 11.999 0 0 0-.032 13.453v-.07a3.27 3.27 0 0 1 .966-2.333Z"}),v.createElement("path",{fill:"#1773EB",d:"M8.379 4.62c-.75 0-1.276.312-1.913.949-.607.605-.798 1.135-.8 1.766A2.712 2.712 0 1 0 8.38 4.62Z"}),v.createElement("path",{fill:"#E44F20",d:"M5.628 20.631c0 .75.31 1.276.946 1.912.607.606 1.136.799 1.766.8a2.703 2.703 0 1 0-.017-5.407 2.703 2.703 0 0 0-2.695 2.704v-.009Z"}))});var Me=()=>({menuList:css({minWidth:0,[i.xsmall]:{minWidth:"250px"}})});var H=e=>{let{trigger:o,children:t,testId:r="cf-ui-navbar-menu-list",onOpen:n,onClose:s}=e,l=Me();return v.createElement(Menu,{onOpen:n,onClose:s},v.createElement(Menu.Trigger,null,o),v.createElement(Menu.List,{className:l.menuList,testId:r},t))};function lo(e,o){let C=e,{logo:t,promotions:r,switcher:n,mainNavigation:s,secondaryNavigation:l,account:c,mobileNavigation:b,mobileNavigationProps:g={breakpoint:"small",label:"Menu"},className:x,contentMaxWidth:A="100%",testId:u="cf-ui-navbar",variant:P="wide",aria:S={labelMainNavigation:"Main Navigation",labelSecondaryNavigation:"Secondary Navigation",labelPromotions:"Promotions",labelAccount:"Account Navigation"}}=C,q=N(C,["logo","promotions","switcher","mainNavigation","secondaryNavigation","account","mobileNavigation","mobileNavigationProps","className","contentMaxWidth","testId","variant","aria"]),y=he({contentMaxWidth:A,variant:P});return v.createElement(Flex,d(p({},q),{ref:o,testId:u,className:cx(y.container,x),as:"header"}),v.createElement(Flex,{as:"nav",className:y.navigation,justifyContent:"space-between",gap:"spacingXs"},v.createElement(Flex,{alignItems:"center",gap:"spacingL"},t||v.createElement(Se,{className:y.logo}),b&&v.createElement(H,{trigger:v.createElement(Button,{className:y.mobileNavigationButton(g.breakpoint),startIcon:v.createElement(ListIcon,{size:"medium"})},g.label)},b),s&&v.createElement(Flex,{className:y.mainNavigation(g.breakpoint),"aria-label":S.labelMainNavigation,gap:"spacingXs"},s)),v.createElement(Flex,{alignItems:"center",gap:"spacingXs"},v.createElement(Flex,{alignItems:"center",className:y.promoNavigationWrapper,"aria-label":S.labelPromotions,gap:"spacingXs"},r),v.createElement(Flex,{alignItems:"center"},n),v.createElement(Flex,{alignItems:"center",gap:"spacingXs"},l&&v.createElement(Flex,{className:y.secondaryNavigationWrapper,"aria-label":S.labelSecondaryNavigation,gap:"spacingXs"},l),c&&v.createElement(Flex,{className:y.account,"aria-label":S.labelAccount,gap:"spacingXs"},c)))))}var we=v.forwardRef(lo);var co={warning:a.colorWarning,negative:a.colorNegative,info:a.blue500},Ae=()=>({navbarAccount:css({cursor:"pointer",background:"none",position:"relative",outline:"none",overflow:"visible",borderRadius:"50%",border:"none",padding:0,"&:hover img":{filter:"brightness(0.9)"}},B(),W()),notificationIcon:e=>css({position:"absolute",top:0,right:0,height:a.spacingS,width:a.spacingS,borderRadius:"50%",border:`2px solid ${a.gray100}`,backgroundColor:co[e],transform:"translate(30%, -30%)",zIndex:1})});function Ce(e,o){let P=e,{children:t,className:r,testId:n="cf-ui-navbar-account-trigger",avatar:s,label:l="Account menu",initials:c,username:b,hasNotification:g,notificationVariant:x="warning"}=P,A=N(P,["children","className","testId","avatar","label","initials","username","hasNotification","notificationVariant"]),u=Ae();return v.createElement(H,{trigger:v.createElement("div",null,v.createElement(Tooltip,{placement:"bottom",content:l,showDelay:600,usePortal:true},v.createElement(Flex,d(p({as:"button"},A),{ref:o,className:cx(u.navbarAccount,r),testId:n,alignItems:"center","aria-label":l}),v.createElement(Avatar,{src:s,initials:c,size:"small",variant:"user"}),g?v.createElement("span",{className:u.notificationIcon(x)}):null)))},t)}Ce.displayName="NavbarAccount";var re=v.forwardRef(Ce);function j({ariaLabel:e}){return v.createElement(SkeletonContainer,{svgWidth:24,svgHeight:24,ariaLabel:e,backgroundColor:a.gray300,foregroundColor:a.gray200},v.createElement(SkeletonImage,{width:24,height:24,radiusX:12,radiusY:12}))}j.displayName="NavbarAccountSkeletton";var G="1px",ae=()=>css({backgroundColor:a.blue100,border:`${G} solid ${a.blue400}`,color:a.blue600,"&:focus,&:hover":{backgroundColor:a.blue100}}),ho=()=>css({border:"none",opacity:.5,pointerEvents:"none"}),Le={display:"flex",justifyContent:"center",padding:`calc(${a.spacing2Xs} - ${G}) calc(${a.spacingXs} - ${G})`,alignItems:"center",background:"none",gap:a.spacing2Xs},Be=({hasTitle:e})=>({navbarItem:css(Le,{appearance:"none",background:"none",outline:"none",border:`${G} solid transparent`,margin:0,fontSize:a.fontSizeM,lineHeight:a.lineHeightM,fontWeight:a.fontWeightMedium,position:"relative",textAlign:"left",whiteSpace:"nowrap",cursor:"pointer",hyphens:"auto",textDecoration:"none",color:a.gray800,boxSizing:"border-box",transition:`color ${a.transitionDurationShort} ${a.transitionEasingCubicBezier}`,borderRadius:a.borderRadiusMedium,height:"30px",padding:e?`${a.spacing2Xs} ${a.spacingXs}`:`calc(${a.spacing2Xs} - ${G})`,"&:focus, &:hover":{backgroundColor:a.gray200},"&:active":ae(),"&:disabled":{cursor:"auto"},"& svg":{transition:`fill ${a.transitionDurationShort} ${a.transitionEasingCubicBezier}`},"& > svg, & > span":{zIndex:a.zIndexDefault}},B(),W()),isActive:ae(),isDisabled:ho(),icon:css({height:"20px",width:"20px",boxSizing:"content-box",display:e?"none":"block",[i.small]:{height:"16px",width:"16px",padding:e?"2px 0":"2px"},[i.large]:{display:"block"}})}),We=()=>({itemSkeleton:css(Le)});var $e=()=>({navbarItemIcon:css({"&:last-child&:not(:only-child)":{marginLeft:a.spacing2Xs},"img&":{borderRadius:a.borderRadiusSmall,maxWidth:a.spacingM,maxHeight:a.spacingM}})});var w=({icon:e,isActive:o,className:t})=>{let c=e.props,{className:r,size:n}=c,s=N(c,["className","size"]),l=$e();return v.cloneElement(e,p({className:cx(r,l.navbarItemIcon,t),size:n||"small",isActive:o},s))};w.displayName="NavbarItemIcon";var He="button";function Fe(e,o){let be=e,{as:t=He,icon:r,label:n,title:s,children:l,className:c,isActive:b,isDisabled:g,testId:x="cf-ui-navbar-item",onOpen:A,onClose:u}=be,P=N(be,["as","icon","label","title","children","className","isActive","isDisabled","testId","onOpen","onClose"]),S=Be({hasTitle:!!s}),q=Mo(e),y=s&&q,C=v.createElement(t,p(p(d(p({},P),{ref:o,"data-test-id":x,className:cx(S.navbarItem,c,{[S.isActive]:b&&!g,[S.isDisabled]:g})}),!s&&{"aria-label":n}),g&&(t===He?{disabled:true}:{tabIndex:-1,"aria-disabled":true})),r&&v.createElement(w,{className:S.icon,icon:r,isActive:b}),s&&v.createElement("span",null,s),y&&v.createElement(Pe,{size:"tiny",isActive:b}));return s||(C=v.createElement("div",null,v.createElement(Tooltip,{content:n,placement:"bottom",showDelay:600,usePortal:true},C))),q?v.createElement(H,{trigger:C,testId:x,onOpen:A,onClose:u},l):C}var Mo=e=>!!e.children;Fe.displayName="NavbarItem";var ne=v.forwardRef(Fe);var J=({estimatedWidth:e})=>{let o=We();return v.createElement(SkeletonContainer,{className:o.itemSkeleton,svgWidth:e,svgHeight:28,backgroundColor:a.gray300,foregroundColor:a.gray200},v.createElement(SkeletonText,{lineHeight:18,numberOfLines:1,offsetTop:2,radiusX:a.borderRadiusSmall,radiusY:a.borderRadiusSmall}))};J.displayName="NavbarItemSkeleton";var Ve=()=>({navbarMenuItem:css({display:"flex",justifyContent:"flex-start",alignItems:"center"})});var Lo="button";function Bo(e,o){let g=e,{as:t=Lo,icon:r,title:n,className:s}=g,l=N(g,["as","icon","title","className"]),c=Ve(),b=Wo(e);return v.createElement(Menu.Item,d(p({},l),{ref:o,as:t,className:cx(c.navbarMenuItem,s)}),r?v.createElement(w,{icon:r}):b&&_e,v.createElement("span",null,n),r&&b?_e:null)}var _e=v.createElement(w,{icon:v.createElement(ArrowSquareOutIcon,null)}),Wo=e=>e.as==="a"&&e.target==="_blank",ie=v.forwardRef(Bo);var se=({ariaLabel:e})=>v.createElement(Menu.Item,null,v.createElement(Flex,{alignItems:"center",gap:a.spacingXs},v.createElement(SkeletonContainer,{svgHeight:16,svgWidth:18},v.createElement(SkeletonImage,{width:16,height:16})),v.createElement(SkeletonContainer,{svgHeight:16,svgWidth:190,ariaLabel:e},v.createElement(SkeletonBodyText,{numberOfLines:1}))));var _=1,Re=e=>({navbarSwitcher:({showSpaceEnv:o})=>css({color:a.gray600,flexShrink:1,fontWeight:a.fontWeightMedium,maxWidth:"50vw",minHeight:"unset",padding:`${a.spacing2Xs} ${a.spacingXs}`,"&:hover":{backgroundColor:hexToRGBA(a.gray900,.05)},[i.xsmall]:{maxWidth:"45vw"},[i.medium]:{maxWidth:"35vw"},[i.large]:{maxWidth:"25vw"},[i.xlarge]:{maxWidth:"600px"}},o&&Do(e),B(),W()),switcherWrapper:({showSpaceEnv:o})=>css({gap:a.spacingXs,alignItems:"center",minWidth:0,"&:has(> span:last-child:nth-child(3))":{minWidth:"12ch"},"&:before":css(d(p({content:'""',position:"absolute",display:"block",width:`calc(8px - ${_}px)`,height:o?"26px":"unset",borderTopLeftRadius:`calc(${a.borderRadiusMedium} - ${_}px)`,borderBottomLeftRadius:`calc(${a.borderRadiusMedium} - ${_}px)`},Ro(e)),{backgroundPosition:"bottom"}))}),switcherLabelWrapper:css({height:"26px",paddingLeft:`calc(${a.spacingXs} * 2)`,alignItems:"center",gap:a.spacing2Xs,maxWidth:"100%"}),switcherLabel:css({color:"currentcolor",fontWeight:"inherit",lineHeight:"unset",display:"inline-block",flexShrink:1,minWidth:"0",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}),switcherCaret:css({flexShrink:0,minWidth:0}),switcherEnvIcon:css({minWidth:"0",[i.small]:{width:"16px",height:"16px"}})}),Xe=e=>{switch(e){case "trial":return a.purple700;case "non-master":return a.orange700;default:return a.green700}},Do=e=>{let o={padding:"0",paddingRight:a.spacingXs};switch(e){case "trial":return d(p({},o),{color:a.purple700,backgroundColor:a.purple100,border:`${_}px solid ${a.purple400}`,"&:hover, &:active":{backgroundColor:a.purple200}});case "non-master":return d(p({},o),{color:a.orange700,backgroundColor:a.orange100,border:`${_}px solid ${a.orange400}`,"&:hover, &:active":{backgroundColor:a.orange200}});default:return d(p({},o),{color:a.green700,backgroundColor:a.green100,border:`${_}px solid ${a.green400}`,"&:hover, &:active":{backgroundColor:a.green200}})}},Ro=e=>{switch(e){case "trial":return {background:a.purple300};case "non-master":return {background:`linear-gradient(
+import {MenuDivider,MenuSectionTitle,Menu}from'@contentful/f36-menu';import {Flex}from'@contentful/f36-core';import v from'react';import {cx,css}from'@emotion/css';import a from'@contentful/f36-tokens';import {generateComponentWithVariants,IconVariant,generateIconComponent}from'@contentful/f36-icon';import {Button}from'@contentful/f36-button';import {ArrowSquareOutIcon,ListIcon,CaretRightIcon,FlaskIcon,RocketLaunchIcon,EnvironmentAliasIcon,EnvironmentIcon}from'@contentful/f36-icons';import {Avatar}from'@contentful/f36-avatar';import {Tooltip}from'@contentful/f36-tooltip';import {SkeletonContainer,SkeletonText,SkeletonImage,SkeletonBodyText}from'@contentful/f36-skeleton';import {hexToRGBA}from'@contentful/f36-utils';import {Text}from'@contentful/f36-typography';var eo=Object.defineProperty,oo=Object.defineProperties;var to=Object.getOwnPropertyDescriptors;var Z=Object.getOwnPropertySymbols;var ue=Object.prototype.hasOwnProperty,ve=Object.prototype.propertyIsEnumerable;var ge=(e,o,t)=>o in e?eo(e,o,{enumerable:true,configurable:true,writable:true,value:t}):e[o]=t,p=(e,o)=>{for(var t in o||(o={}))ue.call(o,t)&&ge(e,t,o[t]);if(Z)for(var t of Z(o))ve.call(o,t)&&ge(e,t,o[t]);return e},d=(e,o)=>oo(e,to(o));var N=(e,o)=>{var t={};for(var r in e)ue.call(e,r)&&o.indexOf(r)<0&&(t[r]=e[r]);if(e!=null&&Z)for(var r of Z(e))o.indexOf(r)<0&&ve.call(e,r)&&(t[r]=e[r]);return t};var fe=60;var i={xsmall:"@media (min-width: 576px)",small:"@media (min-width: 867px)",medium:"@media (min-width: 1024px)",large:"@media (min-width: 1200px)",xlarge:"@media (min-width: 1920px)"},B=(e=a.glowPrimary)=>css({"&:focus":{boxShadow:e},"&:focus:not(:focus-visible)":{boxShadow:"unset"},"&:focus-visible":{boxShadow:e}}),W=(e="44px")=>css({overflow:"visible",position:"relative","&:after":{minHeight:e,minWidth:e,position:"absolute",width:"100%",content:'""',left:"50%",top:"50%",transform:"translate(-50%, -50%)"}});var he=({contentMaxWidth:e,variant:o})=>({container:css({justifyContent:"center",backgroundColor:a.gray100,width:"100%"}),logo:css({display:"none",[i.small]:{display:"block",height:"28px",width:"28px"}}),navigation:css({width:"100%",maxWidth:o==="wide"?"1920px":e,padding:`${a.spacingS} ${a.spacingM}`,height:`${60}px`,[i.small]:{padding:`${a.spacingM} ${a.spacingL}`}}),mainNavigation:t=>css({display:"none"},t==="small"?{[i.small]:{display:"flex"}}:{[i.medium]:{display:"flex"}}),mobileNavigationButton:t=>css({display:"flex",minHeight:"initial",height:"36px",padding:"0 12px",borderRadius:"10px"},t==="small"?{[i.small]:{display:"none"}}:{[i.medium]:{display:"none"}}),mobileNavigationIcon:css({heigt:"20px",width:"20px"}),secondaryNavigationWrapper:css({"> *:not(:first-child)":{display:"none",[i.xsmall]:{display:"flex"}}}),promoNavigationWrapper:css({display:"none",[i.large]:{display:"flex"}}),account:css({display:"none",[i.xsmall]:{display:"flex"}})});var Pe=generateComponentWithVariants({variants:{[IconVariant.Active]:generateIconComponent({path:v.createElement(v.Fragment,null,v.createElement("path",{d:"M10.0153 4.76531L6.2653 8.51531C6.23048 8.55018 6.18912 8.57784 6.14359 8.59671C6.09807 8.61558 6.04927 8.62529 5.99999 8.62529C5.95071 8.62529 5.90191 8.61558 5.85639 8.59671C5.81086 8.57784 5.76951 8.55018 5.73468 8.51531L1.98468 4.76531C1.93217 4.71287 1.89641 4.64602 1.88192 4.57324C1.86742 4.50046 1.87485 4.42501 1.90326 4.35645C1.93166 4.28789 1.97977 4.22931 2.0415 4.1881C2.10322 4.1469 2.17578 4.12494 2.24999 4.125H9.74999C9.8242 4.12494 9.89676 4.1469 9.95848 4.1881C10.0202 4.22931 10.0683 4.28789 10.0967 4.35645C10.1251 4.42501 10.1326 4.50046 10.1181 4.57324C10.1036 4.64602 10.0678 4.71287 10.0153 4.76531Z",fill:a.blue300})),viewBox:"0 0 12 12"}),[IconVariant.Default]:generateIconComponent({path:v.createElement(v.Fragment,null,v.createElement("path",{d:"M10.0153 4.76531L6.2653 8.51531C6.23048 8.55018 6.18912 8.57784 6.14359 8.59671C6.09807 8.61558 6.04927 8.62529 5.99999 8.62529C5.95071 8.62529 5.90191 8.61558 5.85639 8.59671C5.81086 8.57784 5.76951 8.55018 5.73468 8.51531L1.98468 4.76531C1.93217 4.71287 1.89641 4.64602 1.88192 4.57324C1.86742 4.50046 1.87485 4.42501 1.90326 4.35645C1.93166 4.28789 1.97977 4.22931 2.0415 4.1881C2.10322 4.1469 2.17578 4.12494 2.24999 4.125H9.74999C9.8242 4.12494 9.89676 4.1469 9.95848 4.1881C10.0202 4.22931 10.0683 4.28789 10.0967 4.35645C10.1251 4.42501 10.1326 4.50046 10.1181 4.57324C10.1036 4.64602 10.0678 4.71287 10.0153 4.76531Z",fill:a.gray400})),viewBox:"0 0 12 12"})}});var Se=generateIconComponent({name:"ContentfulLogoIcon",viewBox:"0 0 28 28",path:v.createElement(v.Fragment,null,v.createElement("path",{fill:"#1773EB",d:"M10.713 5.001c.845.843 1.167 2.079.845 3.228A6.663 6.663 0 0 1 15 7.276h.026a6.7 6.7 0 0 1 4.743 1.988 2.64 2.64 0 1 0 3.746-3.715A11.96 11.96 0 0 0 15.042 2h-.046a11.933 11.933 0 0 0-6.691 2.036h.074a3.287 3.287 0 0 1 2.334.967V5Z"}),v.createElement("path",{fill:"#E44F20",d:"M21.594 17.999a2.64 2.64 0 0 0-1.858.766 6.703 6.703 0 0 1-4.732 1.951h-.025a6.65 6.65 0 0 1-3.447-.968A3.3 3.3 0 0 1 8.35 23.93h-.086A11.926 11.926 0 0 0 14.96 26h.046a11.94 11.94 0 0 0 8.449-3.484 2.64 2.64 0 0 0-1.859-4.514V18h-.002Z"}),v.createElement("path",{fill:"#FFDA00",d:"M6.013 18.295a3.27 3.27 0 0 1 2.334-.967c.302 0 .603.04.894.122a6.7 6.7 0 0 1 .013-6.928A3.3 3.3 0 0 1 5.08 7.335v-.09a11.999 11.999 0 0 0-.032 13.453v-.07a3.27 3.27 0 0 1 .966-2.333Z"}),v.createElement("path",{fill:"#1773EB",d:"M8.379 4.62c-.75 0-1.276.312-1.913.949-.607.605-.798 1.135-.8 1.766A2.712 2.712 0 1 0 8.38 4.62Z"}),v.createElement("path",{fill:"#E44F20",d:"M5.628 20.631c0 .75.31 1.276.946 1.912.607.606 1.136.799 1.766.8a2.703 2.703 0 1 0-.017-5.407 2.703 2.703 0 0 0-2.695 2.704v-.009Z"}))});var Me=()=>({menuList:css({minWidth:0,[i.xsmall]:{minWidth:"250px"}})});var H=e=>{let{trigger:o,children:t,testId:r="cf-ui-navbar-menu-list",onOpen:n,onClose:s}=e,l=Me();return v.createElement(Menu,{onOpen:n,onClose:s},v.createElement(Menu.Trigger,null,o),v.createElement(Menu.List,{className:l.menuList,testId:r},t))};function lo(e,o){let C=e,{logo:t,promotions:r,switcher:n,mainNavigation:s,secondaryNavigation:l,account:c,mobileNavigation:b,mobileNavigationProps:g={breakpoint:"small",label:"Menu"},className:x,contentMaxWidth:A="100%",testId:u="cf-ui-navbar",variant:P="wide",aria:S={labelMainNavigation:"Main Navigation",labelSecondaryNavigation:"Secondary Navigation",labelPromotions:"Promotions",labelAccount:"Account Navigation"}}=C,q=N(C,["logo","promotions","switcher","mainNavigation","secondaryNavigation","account","mobileNavigation","mobileNavigationProps","className","contentMaxWidth","testId","variant","aria"]),y=he({contentMaxWidth:A,variant:P});return v.createElement(Flex,d(p({},q),{ref:o,testId:u,className:cx(y.container,x),as:"header"}),v.createElement(Flex,{as:"nav",className:y.navigation,justifyContent:"space-between",gap:"spacingXs"},v.createElement(Flex,{alignItems:"center",gap:"spacingL"},t||v.createElement(Se,{className:y.logo}),b&&v.createElement(H,{trigger:v.createElement(Button,{className:y.mobileNavigationButton(g.breakpoint),startIcon:v.createElement(ListIcon,{size:"medium"})},g.label)},b),s&&v.createElement(Flex,{className:y.mainNavigation(g.breakpoint),"aria-label":S.labelMainNavigation,gap:"spacingXs"},s)),v.createElement(Flex,{alignItems:"center",gap:"spacingXs"},v.createElement(Flex,{alignItems:"center",className:y.promoNavigationWrapper,"aria-label":S.labelPromotions,gap:"spacingXs"},r),v.createElement(Flex,{alignItems:"center"},n),v.createElement(Flex,{alignItems:"center",gap:"spacingXs"},l&&v.createElement(Flex,{className:y.secondaryNavigationWrapper,"aria-label":S.labelSecondaryNavigation,gap:"spacingXs"},l),c&&v.createElement(Flex,{className:y.account,"aria-label":S.labelAccount,gap:"spacingXs"},c)))))}var we=v.forwardRef(lo);var co={warning:a.colorWarning,negative:a.colorNegative,info:a.blue500},Ae=()=>({navbarAccount:css({cursor:"pointer",background:"none",position:"relative",outline:"none",overflow:"visible",borderRadius:"50%",border:"none",padding:0,"&:hover img":{filter:"brightness(0.9)"}},B(),W()),notificationIcon:e=>css({position:"absolute",top:0,right:0,height:a.spacingS,width:a.spacingS,borderRadius:"50%",border:`2px solid ${a.gray100}`,backgroundColor:co[e],transform:"translate(30%, -30%)",zIndex:1})});function Ce(e,o){let P=e,{children:t,className:r,testId:n="cf-ui-navbar-account-trigger",avatar:s,label:l="Account menu",initials:c,username:b,hasNotification:g,notificationVariant:x="warning"}=P,A=N(P,["children","className","testId","avatar","label","initials","username","hasNotification","notificationVariant"]),u=Ae();return v.createElement(H,{trigger:v.createElement("div",null,v.createElement(Tooltip,{placement:"bottom",content:l,showDelay:600,usePortal:true},v.createElement(Flex,d(p({as:"button"},A),{ref:o,className:cx(u.navbarAccount,r),testId:n,alignItems:"center","aria-label":l}),v.createElement(Avatar,{src:s,initials:c,size:"small",variant:"user"}),g?v.createElement("span",{className:u.notificationIcon(x)}):null)))},t)}Ce.displayName="NavbarAccount";var re=v.forwardRef(Ce);function j({ariaLabel:e}){return v.createElement(SkeletonContainer,{svgWidth:24,svgHeight:24,ariaLabel:e,backgroundColor:a.gray300,foregroundColor:a.gray200},v.createElement(SkeletonImage,{width:24,height:24,radiusX:12,radiusY:12}))}j.displayName="NavbarAccountSkeletton";var G="1px",ae=()=>css({backgroundColor:a.blue100,border:`${G} solid ${a.blue400}`,color:a.blue600,"&:focus,&:hover":{backgroundColor:a.blue100}}),ho=()=>css({border:"none",opacity:.5,pointerEvents:"none"}),Le={display:"flex",justifyContent:"center",padding:`calc(${a.spacing2Xs} - ${G}) calc(${a.spacingXs} - ${G})`,alignItems:"center",background:"none",gap:a.spacing2Xs},Be=({hasTitle:e})=>({navbarItem:css(Le,{appearance:"none",background:"none",outline:"none",border:`${G} solid transparent`,margin:0,fontSize:a.fontSizeM,lineHeight:a.lineHeightM,fontWeight:a.fontWeightMedium,position:"relative",textAlign:"left",whiteSpace:"nowrap",cursor:"pointer",hyphens:"auto",textDecoration:"none",color:a.gray800,boxSizing:"border-box",transition:`color ${a.transitionDurationShort} ${a.transitionEasingCubicBezier}`,borderRadius:a.borderRadiusMedium,height:"30px",padding:e?`${a.spacing2Xs} ${a.spacingXs}`:`calc(${a.spacing2Xs} - ${G})`,"&:focus, &:hover":{backgroundColor:a.gray200},"&:active":ae(),"&:disabled":{cursor:"auto"},"& svg":{transition:`fill ${a.transitionDurationShort} ${a.transitionEasingCubicBezier}`},"& > svg, & > span":{zIndex:a.zIndexDefault}},B(),W()),isActive:ae(),isDisabled:ho(),icon:css({height:"20px",width:"20px",boxSizing:"content-box",display:e?"none":"block",[i.small]:{height:"16px",width:"16px",padding:e?"2px 0":"2px"},[i.large]:{display:"block"}})}),We=()=>({itemSkeleton:css(Le)});var $e=()=>({navbarItemIcon:css({"&:last-child&:not(:only-child)":{marginLeft:a.spacing2Xs},"img&":{borderRadius:a.borderRadiusSmall,maxWidth:a.spacingM,maxHeight:a.spacingM}})});var w=({icon:e,isActive:o,className:t})=>{let c=e.props,{className:r,size:n}=c,s=N(c,["className","size"]),l=$e();return v.cloneElement(e,p({className:cx(r,l.navbarItemIcon,t),size:n||"small",isActive:o},s))};w.displayName="NavbarItemIcon";var He="button";function Fe(e,o){let be=e,{as:t=He,icon:r,label:n,title:s,children:l,className:c,isActive:b,isDisabled:g,testId:x="cf-ui-navbar-item",onOpen:A,onClose:u}=be,P=N(be,["as","icon","label","title","children","className","isActive","isDisabled","testId","onOpen","onClose"]),S=Be({hasTitle:!!s}),q=Mo(e),y=s&&q,C=v.createElement(t,p(p(d(p({},P),{ref:o,"data-test-id":x,className:cx(S.navbarItem,c,{[S.isActive]:b&&!g,[S.isDisabled]:g})}),!s&&{"aria-label":n}),g&&(t===He?{disabled:true}:{tabIndex:-1,"aria-disabled":true})),r&&v.createElement(w,{className:S.icon,icon:r,isActive:b}),s&&v.createElement("span",null,s),y&&v.createElement(Pe,{size:"tiny",isActive:b}));return s||(C=v.createElement("div",null,v.createElement(Tooltip,{content:n,placement:"bottom",showDelay:600,usePortal:true},C))),q?v.createElement(H,{trigger:C,testId:x,onOpen:A,onClose:u},l):C}var Mo=e=>!!e.children;Fe.displayName="NavbarItem";var ne=v.forwardRef(Fe);var J=({estimatedWidth:e})=>{let o=We();return v.createElement(SkeletonContainer,{className:o.itemSkeleton,svgWidth:e,svgHeight:28,backgroundColor:a.gray300,foregroundColor:a.gray200},v.createElement(SkeletonText,{lineHeight:18,numberOfLines:1,offsetTop:2,radiusX:a.borderRadiusSmall,radiusY:a.borderRadiusSmall}))};J.displayName="NavbarItemSkeleton";var Ve=()=>({navbarMenuItem:css({display:"flex",justifyContent:"flex-start",alignItems:"center"})});var Lo="button";function Bo(e,o){let g=e,{as:t=Lo,icon:r,title:n,className:s}=g,l=N(g,["as","icon","title","className"]),c=Ve(),b=Wo(e);return v.createElement(Menu.Item,d(p({},l),{ref:o,as:t,className:cx(c.navbarMenuItem,s)}),r?v.createElement(w,{icon:r}):b&&_e,v.createElement("span",null,n),r&&b?_e:null)}var _e=v.createElement(w,{icon:v.createElement(ArrowSquareOutIcon,null)}),Wo=e=>e.as==="a"&&e.target==="_blank",ie=v.forwardRef(Bo);var se=({ariaLabel:e})=>v.createElement(Menu.Item,null,v.createElement(Flex,{alignItems:"center",gap:a.spacingXs},v.createElement(SkeletonContainer,{svgHeight:16,svgWidth:18},v.createElement(SkeletonImage,{width:16,height:16})),v.createElement(SkeletonContainer,{svgHeight:16,svgWidth:190,ariaLabel:e},v.createElement(SkeletonBodyText,{numberOfLines:1}))));var _=1,Re=e=>({navbarSwitcher:({showSpaceEnv:o})=>css({color:a.gray600,flexShrink:1,fontWeight:a.fontWeightMedium,maxWidth:"50vw",minHeight:"unset",padding:`${a.spacing2Xs} ${a.spacingXs}`,"&:hover":{backgroundColor:hexToRGBA(a.gray900,.05)},[i.xsmall]:{maxWidth:"45vw"},[i.medium]:{maxWidth:"35vw"},[i.large]:{maxWidth:"25vw"},[i.xlarge]:{maxWidth:"600px"}},o&&Do(e),B(),W()),switcherWrapper:({showSpaceEnv:o})=>css({gap:a.spacingXs,alignItems:"center",minWidth:0,"&:has(> span:last-child:nth-child(3))":{minWidth:"12ch"},"&:before":css(d(p({content:'""',position:"absolute",display:"block",width:`calc(8px - ${_}px)`,height:o?"26px":"unset",borderTopLeftRadius:`calc(${a.borderRadiusMedium} - ${_}px)`,borderBottomLeftRadius:`calc(${a.borderRadiusMedium} - ${_}px)`},Ro(e)),{backgroundPosition:"bottom"}))}),switcherLabelWrapper:css({height:"26px",paddingLeft:`calc(${a.spacingXs} * 2)`,alignItems:"center",gap:a.spacing2Xs,maxWidth:"100%"}),switcherLabel:css({color:"currentcolor",fontWeight:"inherit",lineHeight:"unset",display:"inline-block",flexShrink:1,minWidth:"0",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}),switcherCaret:css({flexShrink:0,minWidth:0}),switcherEnvIcon:css({minWidth:"0",[i.small]:{width:"16px",height:"16px"}})}),Xe=e=>{switch(e){case "trial":return a.purple700;case "non-master":return a.orange700;default:return a.green700}},Do=e=>{let o={padding:"0",paddingRight:a.spacingXs};switch(e){case "trial":return d(p({},o),{color:a.purple700,backgroundColor:a.purple100,border:`${_}px solid ${a.purple400}`,"&:hover, &:active":{backgroundColor:a.purple200}});case "non-master":return d(p({},o),{color:a.orange700,backgroundColor:a.orange100,border:`${_}px solid ${a.orange400}`,"&:hover, &:active":{backgroundColor:a.orange200}});default:return d(p({},o),{color:a.green700,backgroundColor:a.green100,border:`${_}px solid ${a.green400}`,"&:hover, &:active":{backgroundColor:a.green200}})}},Ro=e=>{switch(e){case "trial":return {background:a.purple300};case "non-master":return {background:`linear-gradient(
           -45deg,
           ${a.orange300} 28.57%,
           transparent 28.57%,

package/package.json

@@ -1,22 +1,22 @@
 {
   "name": "@contentful/f36-navbar",
-  "version": "6.0.0-alpha.2",
+  "version": "6.0.0",
   "description": "Forma 36: Navbar component",
   "scripts": {
     "build": "tsup"
   },
   "dependencies": {
-    "@contentful/f36-core": "^6.0.0-alpha.0",
-    "@contentful/f36-menu": "^6.0.0-alpha.0",
-    "@contentful/f36-avatar": "^6.0.0-alpha.0",
-    "@contentful/f36-button": "^6.0.0-alpha.0",
-    "@contentful/f36-tokens": "^6.0.0-alpha.0",
-    "@contentful/f36-icon": "^6.0.0-alpha.0",
-    "@contentful/f36-icons": "^6.0.0-alpha.0",
-    "@contentful/f36-tooltip": "^6.0.0-alpha.0",
-    "@contentful/f36-typography": "^6.0.0-alpha.0",
-    "@contentful/f36-utils": "^6.0.0-alpha.0",
-    "@contentful/f36-skeleton": "^6.0.0-alpha.0",
+    "@contentful/f36-core": "^6.0.0",
+    "@contentful/f36-menu": "^6.0.0",
+    "@contentful/f36-avatar": "^6.0.0",
+    "@contentful/f36-button": "^6.0.0",
+    "@contentful/f36-tokens": "^6.0.0",
+    "@contentful/f36-icon": "^6.0.0",
+    "@contentful/f36-icons": "^6.0.0",
+    "@contentful/f36-tooltip": "^6.0.0",
+    "@contentful/f36-typography": "^6.0.0",
+    "@contentful/f36-utils": "^6.0.0",
+    "@contentful/f36-skeleton": "^6.0.0",
     "@emotion/css": "^11.13.5"
   },
   "peerDependencies": {