@contentful/f36-navbar - npm Package Compare versions

Comparing version 5.0.0-alpha.31 to 5.0.0-alpha.32

dist/esm/index.js

 import { MenuDivider, MenuSectionTitle, Menu } from '@contentful/f36-menu';
 import { Flex } from '@contentful/f36-core';
-import c from 'react';
+import l from 'react';
 import { cx, css } from 'emotion';
-import i from '@contentful/f36-tokens';
+import c from '@contentful/f36-tokens';
 import { generateComponentWithVariants, IconVariant, generateIconComponent } from '@contentful/f36-icon';
 import { Button } from '@contentful/f36-button';
-import { ArrowSquareOutIcon, ListIcon, EnvironmentAliasIcon, EnvironmentIcon } from '@contentful/f36-icons';
+import { ArrowSquareOutIcon, ListIcon, CaretRightIcon, EnvironmentAliasIcon, EnvironmentIcon } from '@contentful/f36-icons';
+import { hexToRGBA } from '@contentful/f36-utils';
 import { Avatar } from '@contentful/f36-avatar';
-import { Tooltip } from '@contentful/f36-tooltip';
-import { SkeletonContainer, SkeletonImage, SkeletonText, SkeletonBodyText } from '@contentful/f36-skeleton';
-import { hexToRGBA } from '@contentful/f36-utils';
+import { SkeletonContainer, SkeletonImage, SkeletonText, SkeletonBodyText, SkeletonDisplayText } from '@contentful/f36-skeleton';
+import { Text } from '@contentful/f36-typography';
 
-var $e=Object.defineProperty,Xe=Object.defineProperties;var Ge=Object.getOwnPropertyDescriptors;var G=Object.getOwnPropertySymbols;var me=Object.prototype.hasOwnProperty,pe=Object.prototype.propertyIsEnumerable;var se=(e,o,t)=>o in e?$e(e,o,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[o]=t,d=(e,o)=>{for(var t in o||(o={}))me.call(o,t)&&se(e,t,o[t]);if(G)for(var t of G(o))pe.call(o,t)&&se(e,t,o[t]);return e},v=(e,o)=>Xe(e,Ge(o));var b=(e,o)=>{var t={};for(var r in e)me.call(e,r)&&o.indexOf(r)<0&&(t[r]=e[r]);if(e!=null&&G)for(var r of G(e))o.indexOf(r)<0&&pe.call(e,r)&&(t[r]=e[r]);return t};var m={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)"},k=(e=i.glowPrimary)=>({"&:focus":{boxShadow:e},"&:focus:not(:focus-visible)":{boxShadow:"unset"},"&:focus-visible":{boxShadow:e}}),E=(e="44px")=>({overflow:"visible",position:"relative","&:after":{minHeight:e,minWidth:e,position:"absolute",width:"100%",content:'""',left:"50%",top:"50%",transform:"translate(-50%, -50%)"}});var le=({contentMaxWidth:e,variant:o})=>({container:css({justifyContent:"center",backgroundColor:i.gray100,width:"100%"}),logo:css({display:"none",[m.small]:{display:"block",height:"28px",width:"28px"}}),navigation:css({width:"100%",maxWidth:o==="wide"?"1920px":e,padding:`${i.spacingS} ${i.spacingM}`,minHeight:i.spacingL,[m.small]:{padding:`${i.spacingM} ${i.spacingL}`}}),mainNavigation:css({display:"none",[m.small]:{display:"flex"}}),mobileNavigationButton:css({display:"flex",minHeight:"initial",height:"36px",padding:"0 12px",borderRadius:"10px",[m.small]:{display:"none"}}),mobileNavigationIcon:css({heigt:"20px",width:"20px"}),secondaryNavigationWrapper:css({"> *:not(:first-child)":{display:"none",[m.xsmall]:{display:"flex"}}}),account:css({display:"none",[m.xsmall]:{display:"flex"}})});var be=generateComponentWithVariants({variants:{[IconVariant.Active]:generateIconComponent({path:c.createElement(c.Fragment,null,c.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:i.blue300})),viewBox:"0 0 12 12"}),[IconVariant.Default]:generateIconComponent({path:c.createElement(c.Fragment,null,c.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:i.gray400})),viewBox:"0 0 12 12"})}});var ge=generateIconComponent({name:"ContentfulLogoIcon",viewBox:"0 0 28 28",path:c.createElement(c.Fragment,null,c.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"}),c.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"}),c.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"}),c.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"}),c.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 fe=()=>({menuList:css({minWidth:0,[m.xsmall]:{minWidth:"250px"}})});var B=e=>{let{trigger:o,children:t,testId:r="cf-ui-navbar-menu-list",onOpen:a,onClose:n}=e,s=fe();return c.createElement(Menu,{onOpen:a,onClose:n},c.createElement(Menu.Trigger,null,o),c.createElement(Menu.List,{className:s.menuList,testId:r},t))};function Ke(e,o){let D=e,{logo:t,promotions:r,switcher:a,mainNavigation:n,secondaryNavigation:s,account:p,mobileNavigation:l,className:u,contentMaxWidth:I="100%",testId:S="cf-ui-navbar",variant:x="wide"}=D,f=b(D,["logo","promotions","switcher","mainNavigation","secondaryNavigation","account","mobileNavigation","className","contentMaxWidth","testId","variant"]),N=le({contentMaxWidth:I,variant:x});return c.createElement(Flex,v(d({},f),{ref:o,testId:S,className:cx(N.container,u),as:"header"}),c.createElement(Flex,{as:"nav",className:N.navigation,justifyContent:"space-between",gap:"spacingXs"},c.createElement(Flex,{alignItems:"center",gap:"spacingL"},t||c.createElement(ge,{className:N.logo}),l&&c.createElement(B,{trigger:c.createElement(Button,{className:N.mobileNavigationButton,startIcon:c.createElement(ListIcon,{size:"medium"})},"Menu")},l),n&&c.createElement(Flex,{className:N.mainNavigation,"aria-label":"Main Navigation",gap:"spacingXs"},n)),c.createElement(Flex,{alignItems:"center",gap:"spacingXs"},c.createElement(Flex,{alignItems:"center"},r),c.createElement(Flex,{alignItems:"center"},a),c.createElement(Flex,{alignItems:"center",gap:"spacingXs"},s&&c.createElement(Flex,{className:N.secondaryNavigationWrapper,"aria-label":"Secondary Navigation",gap:"spacingXs"},s),p&&c.createElement(Flex,{className:N.account,"aria-label":"Account Navigation",gap:"spacingXs"},p)))))}var ve=c.forwardRef(Ke);var Qe={warning:i.colorWarning,negative:i.colorNegative,info:i.blue500},he=()=>({navbarAccount:css({cursor:"pointer",background:"none",position:"relative",outline:"none",overflow:"visible",borderRadius:"50%",border:"none",padding:0,"&:hover img":{filter:"brightness(0.9)"}},k(),E()),notificationIcon:e=>css({position:"absolute",top:0,right:0,height:i.spacingS,width:i.spacingS,borderRadius:"50%",border:`2px solid ${i.gray100}`,backgroundColor:Qe[e],transform:"translate(30%, -30%)"})});function no(e,o){let f=e,{children:t,className:r,testId:a="cf-ui-navbar-account-trigger",avatar:n,label:s="Account menu",initials:p,username:l,hasNotification:u,notificationVariant:I="warning"}=f,S=b(f,["children","className","testId","avatar","label","initials","username","hasNotification","notificationVariant"]),x=he();return c.createElement(B,{trigger:c.createElement("div",null,c.createElement(Tooltip,{placement:"bottom",content:s,showDelay:600,usePortal:!0},c.createElement(Flex,v(d({as:"button"},S),{ref:o,className:cx(x.navbarAccount,r),testId:a,alignItems:"center","aria-label":s}),c.createElement(Avatar,{src:n,initials:p,size:"small",variant:"user"}),u?c.createElement("span",{className:x.notificationIcon(I)}):null)))},t)}var J=c.forwardRef(no);function K({ariaLabel:e}){return c.createElement(SkeletonContainer,{svgWidth:24,svgHeight:24,ariaLabel:e,backgroundColor:i.gray300,foregroundColor:i.gray200},c.createElement(SkeletonImage,{width:24,height:24,radiusX:12,radiusY:12}))}var R="1px",Ie=()=>css({backgroundColor:i.blue100,border:`${R} solid ${i.blue400}`,color:i.blue600,"&:hover":{backgroundColor:i.blue100}}),Se={display:"flex",justifyContent:"center",padding:`calc(${i.spacing2Xs} - ${R}) calc(${i.spacingXs} - ${R})`,alignItems:"center",background:"none",gap:i.spacing2Xs},Pe=({hasTitle:e})=>({navbarItem:css(Se,{appearance:"none",background:"none",border:`${R} solid transparent`,margin:0,outline:"none",fontSize:i.fontSizeM,lineHeight:i.lineHeightM,fontWeight:i.fontWeightMedium,position:"relative",textAlign:"left",whiteSpace:"nowrap",cursor:"pointer",hyphens:"auto",textDecoration:"none",color:i.gray800,boxSizing:"border-box",transition:`color ${i.transitionDurationShort} ${i.transitionEasingCubicBezier}`,borderRadius:i.borderRadiusMedium,height:"30px",padding:e?void 0:`calc(${i.spacing2Xs} - ${R})`,"&:hover":{backgroundColor:hexToRGBA(i.gray900,.05)},"&:hover::before":{opacity:1,scale:"1"},"&:active::before":{backgroundColor:"rgba(255, 255, 255, 0.1)"},"&:disabled":{cursor:"auto"},"& svg":{transition:`fill ${i.transitionDurationShort} ${i.transitionEasingCubicBezier}`},"& > svg, & > span":{zIndex:i.zIndexDefault}},k(),E()),navbarItemMenuTrigger:css({paddingRight:i.spacingXs}),isActive:Ie(),icon:css({height:"20px",width:"20px",boxSizing:"content-box",display:e?"none":"block",[m.small]:{height:"16px",width:"16px",padding:e?"2px 0":"2px"},[m.large]:{display:"block"}})}),Me=()=>({itemSkeleton:css(Se)});var we=()=>({navbarItemIcon:css({"&:last-child&:not(:only-child)":{marginLeft:i.spacing2Xs},"img&":{borderRadius:i.borderRadiusSmall,maxWidth:i.spacingM,maxHeight:i.spacingM}})});var A=({icon:e,isActive:o,className:t})=>{let p=e.props,{className:r,size:a}=p,n=b(p,["className","size"]),s=we();return c.cloneElement(e,d({className:cx(r,s.navbarItemIcon,t),size:a||"small",isActive:o},n))};var bo="button";function go(e,o){let ie=e,{as:t=bo,icon:r,label:a,title:n,children:s,className:p,isActive:l,testId:u="cf-ui-navbar-item",onOpen:I,onClose:S}=ie,x=b(ie,["as","icon","label","title","children","className","isActive","testId","onOpen","onClose"]),f=Pe({hasTitle:!!n}),N=fo(e),D=n&&N,X=c.createElement(t,v(d({},x),{ref:o,"data-test-id":u,className:cx(f.navbarItem,p,{[f.navbarItemMenuTrigger]:D,[f.isActive]:l}),"aria-label":n?"":a}),r&&c.createElement(A,{className:f.icon,icon:r,isActive:l}),n&&c.createElement("span",null,n),D&&c.createElement(be,{size:"tiny",isActive:l}));return n||(X=c.createElement("div",null,c.createElement(Tooltip,{content:a,placement:"bottom",showDelay:600,usePortal:!0},X))),N?c.createElement(B,{trigger:X,testId:u,onOpen:I,onClose:S},s):X}var fo=e=>!!e.children,Q=c.forwardRef(go);var ee=({estimatedWidth:e})=>{let o=Me();return c.createElement(SkeletonContainer,{className:o.itemSkeleton,svgWidth:e,svgHeight:28,backgroundColor:i.gray300,foregroundColor:i.gray200},c.createElement(SkeletonText,{lineHeight:18,numberOfLines:1,offsetTop:2,radiusX:i.borderRadiusSmall,radiusY:i.borderRadiusSmall}))};var Ae=()=>({navbarMenuItem:css({display:"flex",justifyContent:"flex-start",alignItems:"center"})});var So="button";function Po(e,o){let u=e,{as:t=So,icon:r,title:a,className:n}=u,s=b(u,["as","icon","title","className"]),p=Ae(),l=Mo(e);return c.createElement(Menu.Item,v(d({},s),{ref:o,as:t,className:cx(p.navbarMenuItem,n)}),r?c.createElement(A,{icon:r}):l&&ke,c.createElement("span",null,a),r&&l?ke:null)}var ke=c.createElement(A,{icon:c.createElement(ArrowSquareOutIcon,null)}),Mo=e=>e.as==="a"&&e.target==="_blank",oe=c.forwardRef(Po);var te=({ariaLabel:e})=>c.createElement(Menu.Item,null,c.createElement(Flex,{alignItems:"center",gap:i.spacingXs},c.createElement(SkeletonContainer,{svgHeight:16,svgWidth:18},c.createElement(SkeletonImage,{width:16,height:16})),c.createElement(SkeletonContainer,{svgHeight:16,svgWidth:190,ariaLabel:e},c.createElement(SkeletonBodyText,{numberOfLines:1}))));var Te=()=>({navbarSwitcher:css({color:i.gray600,flexShrink:1,fontWeight:i.fontWeightMedium,maxWidth:"100%",minHeight:"unset",padding:`${i.spacing2Xs} ${i.spacingXs}`,"&:hover":{backgroundColor:hexToRGBA(i.gray900,.05)}},k(),E()),switcherSpaceName:css({"&:has(> span:last-child:nth-child(3))":{minWidth:"12ch"},maxWidth:"15vw",[m.xsmall]:{maxWidth:"50vw"},[m.small]:{maxWidth:"10vw"},[m.medium]:{maxWidth:"50vw"}}),switcherEnvIcon:css({[m.small]:{width:"16px",height:"16px"}}),switcherSpaceNameTruncation:css({flexShrink:1,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"})});function Oe({isAlias:e,envVariant:o,className:t}){let r=o==="master"?i.green600:i.orange500;return e?c.createElement(EnvironmentAliasIcon,{color:r,className:t,size:"medium"}):c.createElement(EnvironmentIcon,{color:r,className:t,size:"medium"})}function Fo(e,{start:o=5,end:t=6}={}){if(e.length<=o+t)return [e,void 0,void 0];let r=o>0?e.slice(0,o):"",a=t>0?e.slice(-t):"",n=e.slice(o,e.length-t);return [r,n,a]}function Ho(e,o){let f=e,{children:t,className:r,envVariant:a,isAlias:n,testId:s="cf-ui-navbar-switcher",ariaLabel:p="Space and Environment Navigation"}=f,l=b(f,["children","className","envVariant","isAlias","testId","ariaLabel"]),u=Te(),[I,S,x]=typeof t=="string"?Fo(t):[];return c.createElement(Button,v(d({},l),{"aria-label":p,className:cx(u.navbarSwitcher,r),endIcon:a&&c.createElement(Oe,{envVariant:a,isAlias:n,className:u.switcherEnvIcon}),ref:o,testId:s,variant:"transparent"}),c.createElement(Flex,{alignItems:"center",className:u.switcherSpaceName,flexDirection:"row"},I!==void 0?c.createElement(c.Fragment,null,c.createElement("span",null,I),S&&c.createElement("span",{className:u.switcherSpaceNameTruncation},S),x&&c.createElement("span",null,x)):t))}var re=c.forwardRef(Ho);var ne=({estimatedWidth:e})=>c.createElement(SkeletonContainer,{svgWidth:e,svgHeight:18,backgroundColor:i.gray300,foregroundColor:i.gray200},c.createElement(SkeletonText,{lineHeight:18,numberOfLines:1,radiusX:i.borderRadiusSmall,radiusY:i.borderRadiusSmall}));var _e=()=>({navbarBadge:css({display:"flex",justifyContent:"center",alignItems:"center",background:"none",border:`1px solid ${i.purple600}`,margin:0,outline:"none",fontSize:i.fontSizeS,lineHeight:i.lineHeightS,fontWeight:i.fontWeightMedium,textAlign:"center",padding:`0 ${i.spacingXs}`,textDecoration:"none",color:`${i.purple600}!important`,borderRadius:"1.75rem",userSelect:"none"})});var Xo="div";function Go(e,o){let l=e,{as:t=Xo,children:r,className:a,testId:n="cf-ui-navbar-badge"}=l,s=b(l,["as","children","className","testId"]),p=_e();return c.createElement(t,v(d({},s),{ref:o,className:cx(p.navbarBadge,a),"data-test-id":n}),r)}var He=c.forwardRef(Go);var Ve=()=>({navbarMenuItem:css({display:"flex",justifyContent:"flex-start",alignItems:"center",gap:i.spacingXs}),menuList:css({minWidth:0,marginLeft:"-24px",marginTop:"10px",[m.xsmall]:{minWidth:"250px",margin:0}})});var Re=e=>{let{title:o,icon:t,children:r,testId:a="cf-ui-navbar-submenu-list",onOpen:n,onClose:s}=e,p=Ve();return c.createElement(Menu.Submenu,{onOpen:n,onClose:s},c.createElement(Menu.SubmenuTrigger,null,c.createElement(Flex,{className:p.navbarMenuItem},t&&c.createElement(A,{icon:t}),c.createElement("span",null,o))),c.createElement(Menu.List,{className:p.menuList,testId:a},r))};var g=ve;g.Item=Q;g.ItemSkeleton=ee;g.MenuItem=oe;g.MenuItemSkeleton=te;g.MenuDivider=MenuDivider;g.MenuSectionTitle=MenuSectionTitle;g.Submenu=Re;g.Switcher=re;g.SwitcherSkeleton=ne;g.Account=J;g.AccountSkeleton=K;g.Badge=He;
+var Ge=Object.defineProperty,Xe=Object.defineProperties;var ze=Object.getOwnPropertyDescriptors;var z=Object.getOwnPropertySymbols;var ie=Object.prototype.hasOwnProperty,se=Object.prototype.propertyIsEnumerable;var ae=(e,t,o)=>t in e?Ge(e,t,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[t]=o,b=(e,t)=>{for(var o in t||(t={}))ie.call(t,o)&&ae(e,o,t[o]);if(z)for(var o of z(t))se.call(t,o)&&ae(e,o,t[o]);return e},f=(e,t)=>Xe(e,ze(t));var d=(e,t)=>{var o={};for(var r in e)ie.call(e,r)&&t.indexOf(r)<0&&(o[r]=e[r]);if(e!=null&&z)for(var r of z(e))t.indexOf(r)<0&&se.call(e,r)&&(o[r]=e[r]);return o};var p={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)"},A=(e=c.glowPrimary)=>({"&:focus":{boxShadow:e},"&:focus:not(:focus-visible)":{boxShadow:"unset"},"&:focus-visible":{boxShadow:e}}),k=(e="44px")=>({overflow:"visible",position:"relative","&:after":{minHeight:e,minWidth:e,position:"absolute",width:"100%",content:'""',left:"50%",top:"50%",transform:"translate(-50%, -50%)"}});var me=({contentMaxWidth:e,variant:t})=>({container:css({justifyContent:"center",backgroundColor:c.gray100,width:"100%"}),logo:css({display:"none",[p.small]:{display:"block",height:"28px",width:"28px"}}),navigation:css({width:"100%",maxWidth:t==="wide"?"1920px":e,padding:`${c.spacingS} ${c.spacingM}`,minHeight:c.spacingL,[p.small]:{padding:`${c.spacingM} ${c.spacingL}`}}),mainNavigation:css({display:"none",[p.small]:{display:"flex"}}),mobileNavigationButton:css({display:"flex",height:"36px",borderRadius:"10px",[p.small]:{display:"none"}}),mobileNavigationIcon:css({heigt:"20px",width:"20px"}),secondaryNavigationWrapper:css({"> *:not(:first-child)":{display:"none",[p.xsmall]:{display:"flex"}}}),account:css({display:"none",[p.xsmall]:{display:"flex"}})});var ue=generateComponentWithVariants({variants:{[IconVariant.Active]:generateIconComponent({path:l.createElement(l.Fragment,null,l.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:c.blue300})),viewBox:"0 0 12 12"}),[IconVariant.Default]:generateIconComponent({path:l.createElement(l.Fragment,null,l.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:c.gray400})),viewBox:"0 0 12 12"})}});var be=generateIconComponent({name:"ContentfulLogoIcon",viewBox:"0 0 28 28",path:l.createElement(l.Fragment,null,l.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"}),l.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"}),l.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"}),l.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"}),l.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 de=()=>({menuList:css({minWidth:0,[p.xsmall]:{minWidth:"250px"}})});var L=e=>{let{trigger:t,children:o,testId:r="cf-ui-navbar-menu-list",onOpen:a,onClose:n}=e,i=de();return l.createElement(Menu,{onOpen:a,onClose:n},l.createElement(Menu.Trigger,null,t),l.createElement(Menu.List,{className:i.menuList,testId:r},o))};function Ke(e,t){let V=e,{logo:o,promotions:r,switcher:a,mainNavigation:n,secondaryNavigation:i,account:s,mobileNavigation:m,className:N,contentMaxWidth:P="100%",testId:I="cf-ui-navbar",variant:g="wide"}=V,x=d(V,["logo","promotions","switcher","mainNavigation","secondaryNavigation","account","mobileNavigation","className","contentMaxWidth","testId","variant"]),h=me({contentMaxWidth:P,variant:g});return l.createElement(Flex,f(b({},x),{ref:t,testId:I,className:cx(h.container,N),as:"header"}),l.createElement(Flex,{as:"nav",className:h.navigation,justifyContent:"space-between",gap:"spacingXs"},l.createElement(Flex,{alignItems:"center",gap:"spacingL"},o||l.createElement(be,{className:h.logo}),m&&l.createElement(L,{trigger:l.createElement(Button,{className:h.mobileNavigationButton,startIcon:l.createElement(ListIcon,{size:"medium"})},"Menu")},m),n&&l.createElement(Flex,{className:h.mainNavigation,"aria-label":"Main Navigation",gap:"spacingXs"},n)),l.createElement(Flex,{alignItems:"center",gap:"spacingXs"},l.createElement(Flex,{alignItems:"center"},r),l.createElement(Flex,{alignItems:"center"},a),l.createElement(Flex,{alignItems:"center",gap:"spacingXs"},i&&l.createElement(Flex,{className:h.secondaryNavigationWrapper,"aria-label":"Secondary Navigation",gap:"spacingXs"},i),s&&l.createElement(Flex,{className:h.account,"aria-label":"Account Navigation",gap:"spacingXs"},s)))))}var ve=l.forwardRef(Ke);var et={warning:c.colorWarning,negative:c.colorNegative,info:c.blue500},ge=()=>({navbarAccount:css({margin:0,padding:0,border:0,cursor:"pointer",background:"none",position:"relative",outline:"none",overflow:"visible",borderRadius:"50%","&:before":css({content:'""',display:"block",position:"absolute",height:"24px",width:"24px",backgroundColor:"transparent",borderRadius:"50%"}),"&:hover:before":css({backgroundColor:hexToRGBA(c.gray300,.15)})},A(),k()),avatar:css({borderRadius:"50%",display:"block",height:"24px",width:"24px"}),notificationIcon:e=>css({position:"absolute",top:0,right:0,height:c.spacingS,width:c.spacingS,borderRadius:"50%",border:`2px solid ${c.gray100}`,backgroundColor:et[e],transform:"translate(30%, -30%)"})});function nt(e,t){let g=e,{children:o,className:r,testId:a="cf-ui-navbar-account-trigger",avatar:n,initials:i,username:s,hasNotification:m,notificationVariant:N="warning"}=g,P=d(g,["children","className","testId","avatar","initials","username","hasNotification","notificationVariant"]),I=ge();return l.createElement(L,{trigger:l.createElement(Flex,f(b({as:"button"},P),{ref:t,className:cx(I.navbarAccount,r),testId:a,alignItems:"center","aria-label":"Account Menu"}),l.createElement(Avatar,{src:n,initials:i,size:"small",variant:"user"}),m?l.createElement("span",{className:I.notificationIcon(N)}):null)},o)}var Y=l.forwardRef(nt);function J({ariaLabel:e}){return l.createElement(SkeletonContainer,{svgWidth:24,svgHeight:24,ariaLabel:e,backgroundColor:c.gray300,foregroundColor:c.gray200},l.createElement(SkeletonImage,{width:24,height:24,radiusX:12,radiusY:12}))}var he=()=>css({backgroundColor:c.blue100,border:`1px solid ${c.blue400}`,color:c.blue600,"&:hover":{backgroundColor:c.blue100}}),ye={display:"flex",justifyContent:"center",padding:`${c.spacing2Xs} ${c.spacingXs}`,alignItems:"center",background:"none",gap:c.spacing2Xs},xe=({title:e})=>({navbarItem:css(ye,{appearance:"none",background:"none",border:"1px solid transparent",margin:0,outline:"none",fontSize:c.fontSizeM,lineHeight:c.lineHeightM,fontWeight:c.fontWeightMedium,position:"relative",textAlign:"left",whiteSpace:"nowrap",cursor:"pointer",hyphens:"auto",textDecoration:"none",color:c.gray800,boxSizing:"border-box",transition:`color ${c.transitionDurationShort} ${c.transitionEasingCubicBezier}`,borderRadius:c.borderRadiusMedium,"&:hover":{backgroundColor:hexToRGBA(c.gray900,.05)},"&:hover::before":{opacity:1,scale:"1"},"&:active::before":{backgroundColor:"rgba(255, 255, 255, 0.1)"},"&:disabled":{cursor:"auto"},"& svg":{transition:`fill ${c.transitionDurationShort} ${c.transitionEasingCubicBezier}`},"& > svg, & > span":{zIndex:c.zIndexDefault}},A(),k()),navbarItemMenuTrigger:css({paddingRight:c.spacingXs}),isActive:he(),icon:css({height:"20px",width:"20px",display:e?"none":"block",[p.small]:{height:"16px",width:"16px"},[p.large]:{display:"block"}})}),Ie=()=>({itemSkeleton:css(ye)});var Se=()=>({navbarItemIcon:css({"&:last-child&:not(:only-child)":{marginLeft:c.spacing2Xs},"img&":{borderRadius:c.borderRadiusSmall,maxWidth:c.spacingM,maxHeight:c.spacingM}})});var C=({icon:e,isActive:t,className:o})=>{let s=e.props,{className:r,size:a}=s,n=d(s,["className","size"]),i=Se();return l.cloneElement(e,b({className:cx(r,i.navbarItemIcon,o),size:a||"small",isActive:t},n))};var ut="button";function bt(e,t){let ne=e,{as:o=ut,icon:r,label:a,title:n,children:i,className:s,isActive:m,testId:N="cf-ui-navbar-item",onOpen:P,onClose:I}=ne,g=d(ne,["as","icon","label","title","children","className","isActive","testId","onOpen","onClose"]),x=xe({title:n}),h=dt(e),V=l.createElement(o,f(b({},g),{ref:t,"data-test-id":N,className:cx(x.navbarItem,h&&x.navbarItemMenuTrigger,m&&x.isActive,s),"aria-label":n?"":a}),r&&l.createElement(C,{className:x.icon,icon:r,isActive:m}),n&&l.createElement("span",null,n),n&&h&&l.createElement(ue,{size:"tiny",isActive:m}));return h?l.createElement(L,{trigger:V,testId:N,onOpen:P,onClose:I},i):V}var dt=e=>!!e.children,K=l.forwardRef(bt);var Q=({estimatedWidth:e})=>{let t=Ie();return l.createElement(SkeletonContainer,{className:t.itemSkeleton,svgWidth:e,svgHeight:32,backgroundColor:c.gray300,foregroundColor:c.gray200},l.createElement(SkeletonText,{lineHeight:6,numberOfLines:1,offsetTop:10,radiusX:c.borderRadiusSmall,radiusY:c.borderRadiusSmall}))};var Me=()=>({navbarMenuItem:css({display:"flex",justifyContent:"flex-start",alignItems:"center"})});var xt="button";function It(e,t){let N=e,{as:o=xt,icon:r,title:a,className:n}=N,i=d(N,["as","icon","title","className"]),s=Me(),m=St(e);return l.createElement(Menu.Item,f(b({},i),{ref:t,as:o,className:cx(s.navbarMenuItem,n)}),r?l.createElement(C,{icon:r}):m&&we,l.createElement("span",null,a),r&&m?we:null)}var we=l.createElement(C,{icon:l.createElement(ArrowSquareOutIcon,null)}),St=e=>e.as==="a"&&e.target==="_blank",ee=l.forwardRef(It);var te=({ariaLabel:e})=>l.createElement(Menu.Item,null,l.createElement(Flex,{alignItems:"center",gap:c.spacingXs},l.createElement(SkeletonContainer,{svgHeight:16,svgWidth:18},l.createElement(SkeletonImage,{width:16,height:16})),l.createElement(SkeletonContainer,{svgHeight:16,svgWidth:190,ariaLabel:e},l.createElement(SkeletonBodyText,{numberOfLines:1}))));var Ae=()=>({navbarSwitcher:css({color:c.gray600,flexShrink:1,fontWeight:c.fontWeightMedium,maxWidth:"100%",minHeight:"unset",padding:`${c.spacing2Xs} ${c.spacingXs}`,"&:hover":{backgroundColor:hexToRGBA(c.gray900,.05)}},A(),k()),switcherSpaceName:css({"&:has(> span:last-child:nth-child(3))":{minWidth:"12ch"},maxWidth:"15vw",[p.xsmall]:{maxWidth:"50vw"},[p.small]:{maxWidth:"10vw"},[p.medium]:{maxWidth:"50vw"}}),switcherEnvIcon:css({[p.small]:{width:"16px",height:"16px"}}),switcherSpaceNameTruncation:css({flexShrink:1,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"})});function Te({isAlias:e,envVariant:t,className:o}){let r=t==="master"?c.green600:c.orange500;return e?l.createElement(EnvironmentAliasIcon,{color:r,className:o,size:"medium"}):l.createElement(EnvironmentIcon,{color:r,className:o,size:"medium"})}var X=({estimatedWidth:e})=>l.createElement(SkeletonContainer,{svgWidth:e,svgHeight:24,backgroundColor:c.gray300,foregroundColor:c.gray200},l.createElement(SkeletonDisplayText,{lineHeight:24,numberOfLines:1,radiusX:12,radiusY:12}));function Ht(e,{start:t=5,end:o=6}={}){if(e.length<=t+o)return [e,void 0,void 0];let r=t>0?e.slice(0,t):"",a=o>0?e.slice(-o):"",n=e.slice(t,e.length-o);return [r,n,a]}var We=({value:e,styles:t,envVariant:o,type:r})=>{let[a,n,i]=typeof e=="string"?Ht(e):[],s=r==="environment",m=o==="master"?"green600":"orange500";return a!==void 0?l.createElement(Text,{fontColor:s?m:void 0},l.createElement("span",null,a),n&&l.createElement("span",{className:t.switcherSpaceNameTruncation},n),i&&l.createElement("span",null,i)):l.createElement(Text,{fontColor:s?m:void 0},e)};function Rt(e,t){let x=e,{children:o,className:r,envVariant:a,isAlias:n,testId:i="cf-ui-navbar-switcher",ariaLabel:s="Space and Environment Navigation",space:m,environment:N,isLoading:P}=x,I=d(x,["children","className","envVariant","isAlias","testId","ariaLabel","space","environment","isLoading"]),g=Ae();return l.createElement(Button,f(b({},I),{"aria-label":s,className:cx(g.navbarSwitcher,r),endIcon:a&&l.createElement(Te,{envVariant:a,isAlias:n,className:g.switcherEnvIcon}),ref:t,testId:i,variant:"transparent"}),l.createElement(Flex,{alignItems:"center",className:g.switcherSpaceName,flexDirection:"row"},P?l.createElement(X,{estimatedWidth:148}):l.createElement(l.Fragment,null,l.createElement(We,{type:"space",value:m,styles:g}),l.createElement(CaretRightIcon,{size:"tiny",color:c.gray400}),l.createElement(We,{envVariant:a,type:"environment",value:N,styles:g}))))}var oe=l.forwardRef(Rt);var _e=()=>({navbarBadge:css({display:"flex",justifyContent:"center",alignItems:"center",background:"none",border:`1px solid ${c.purple600}`,margin:0,outline:"none",fontSize:c.fontSizeS,lineHeight:c.lineHeightS,fontWeight:c.fontWeightMedium,textAlign:"center",padding:`0 ${c.spacingXs}`,textDecoration:"none",color:`${c.purple600}!important`,borderRadius:"1.75rem",userSelect:"none"})});var Xt="div";function zt(e,t){let m=e,{as:o=Xt,children:r,className:a,testId:n="cf-ui-navbar-badge"}=m,i=d(m,["as","children","className","testId"]),s=_e();return l.createElement(o,f(b({},i),{ref:t,className:cx(s.navbarBadge,a),"data-test-id":n}),r)}var Ve=l.forwardRef(zt);var Re=()=>({navbarMenuItem:css({display:"flex",justifyContent:"flex-start",alignItems:"center",gap:c.spacingXs}),menuList:css({minWidth:0,marginLeft:"-24px",marginTop:"10px",[p.xsmall]:{minWidth:"250px",margin:0}})});var De=e=>{let{title:t,icon:o,children:r,testId:a="cf-ui-navbar-submenu-list",onOpen:n,onClose:i}=e,s=Re();return l.createElement(Menu.Submenu,{onOpen:n,onClose:i},l.createElement(Menu.SubmenuTrigger,null,l.createElement(Flex,{className:s.navbarMenuItem},o&&l.createElement(C,{icon:o}),l.createElement("span",null,t))),l.createElement(Menu.List,{className:s.menuList,testId:a},r))};var v=ve;v.Item=K;v.ItemSkeleton=Q;v.MenuItem=ee;v.MenuItemSkeleton=te;v.MenuDivider=MenuDivider;v.MenuSectionTitle=MenuSectionTitle;v.Submenu=De;v.Switcher=oe;v.SwitcherSkeleton=X;v.Account=Y;v.AccountSkeleton=J;v.Badge=Ve;
 
-export { g as Navbar, Ie as getNavbarItemActiveStyles };
+export { v as Navbar, he as getNavbarItemActiveStyles };
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.js.map

dist/index.d.ts

 import { MenuListProps, MenuProps, MenuItemProps, MenuDivider, MenuSectionTitle } from '@contentful/f36-menu';
-import { CommonProps, PolymorphicComponent, ExpandProps } from '@contentful/f36-core';
-import React, { ReactNode } from 'react';
+import { CommonProps, PolymorphicComponent, ExpandProps, PropsWithHTMLElement } from '@contentful/f36-core';
+import React from 'react';
 import { IconProps } from '@contentful/f36-icons';
@@ -67,3 +67,3 @@
 
-declare const NavbarAccount: React.ForwardRefExoticComponent<Omit<Omit<Pick<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof React.ButtonHTMLAttributes<HTMLButtonElement>>, never>, "label" | "children" | keyof CommonProps | "username" | "avatar" | "initials" | "hasNotification" | "notificationVariant"> & CommonProps & {
+declare const NavbarAccount: React.ForwardRefExoticComponent<Omit<Omit<Pick<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof React.ButtonHTMLAttributes<HTMLButtonElement>>, never>, "children" | keyof CommonProps | "username" | "avatar" | "initials" | "hasNotification" | "notificationVariant"> & CommonProps & {
     children: React.ReactNode;
@@ -74,3 +74,2 @@ username: string;
     hasNotification?: boolean;
-    label?: string;
     /**
@@ -132,4 +131,12 @@ * @default 'warning'
 
-declare const NavbarSwitcher: React.ForwardRefExoticComponent<Omit<Omit<Pick<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof React.ButtonHTMLAttributes<HTMLButtonElement>>, never>, "children" | keyof CommonProps | "ariaLabel" | "isCircle" | "envVariant" | "isAlias"> & CommonProps & {
-    children: ReactNode;
+declare type NavbarLoadingProps = {
+    isLoading?: true;
+    environemnt?: never;
+    space?: never;
+} | {
+    isLoading?: false;
+    environemnt?: string;
+    space?: string;
+};
+declare type NavbarSwitcherOwnProps = CommonProps & NavbarLoadingProps & {
     isCircle?: boolean;
@@ -139,3 +146,7 @@ envVariant?: 'master' | 'non-master';
     ariaLabel?: string;
-} & React.RefAttributes<HTMLButtonElement>>;
+    environment?: React.ReactNode;
+    space?: React.ReactNode;
+};
+declare type NavbarSwitcherProps = PropsWithHTMLElement<NavbarSwitcherOwnProps, 'button'>;
+declare const NavbarSwitcher: React.ForwardRefExoticComponent<NavbarSwitcherProps & React.RefAttributes<HTMLButtonElement>>;
 
@@ -142,0 +153,0 @@ declare const NavbarSwitcherSkeleton: ({ estimatedWidth, }: {

dist/index.js

@@ -5,23 +5,23 @@ 'use strict';
 var f36Core = require('@contentful/f36-core');
-var c = require('react');
+var l = require('react');
 var emotion = require('emotion');
-var i = require('@contentful/f36-tokens');
+var c = require('@contentful/f36-tokens');
 var f36Icon = require('@contentful/f36-icon');
 var f36Button = require('@contentful/f36-button');
 var f36Icons = require('@contentful/f36-icons');
+var f36Utils = require('@contentful/f36-utils');
 var f36Avatar = require('@contentful/f36-avatar');
-var f36Tooltip = require('@contentful/f36-tooltip');
 var f36Skeleton = require('@contentful/f36-skeleton');
-var f36Utils = require('@contentful/f36-utils');
+var f36Typography = require('@contentful/f36-typography');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
+var l__default = /*#__PURE__*/_interopDefault(l);
 var c__default = /*#__PURE__*/_interopDefault(c);
-var i__default = /*#__PURE__*/_interopDefault(i);
 
-var $e=Object.defineProperty,Xe=Object.defineProperties;var Ge=Object.getOwnPropertyDescriptors;var G=Object.getOwnPropertySymbols;var me=Object.prototype.hasOwnProperty,pe=Object.prototype.propertyIsEnumerable;var se=(e,o,t)=>o in e?$e(e,o,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[o]=t,d=(e,o)=>{for(var t in o||(o={}))me.call(o,t)&&se(e,t,o[t]);if(G)for(var t of G(o))pe.call(o,t)&&se(e,t,o[t]);return e},v=(e,o)=>Xe(e,Ge(o));var b=(e,o)=>{var t={};for(var r in e)me.call(e,r)&&o.indexOf(r)<0&&(t[r]=e[r]);if(e!=null&&G)for(var r of G(e))o.indexOf(r)<0&&pe.call(e,r)&&(t[r]=e[r]);return t};var m={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)"},k=(e=i__default.default.glowPrimary)=>({"&:focus":{boxShadow:e},"&:focus:not(:focus-visible)":{boxShadow:"unset"},"&:focus-visible":{boxShadow:e}}),E=(e="44px")=>({overflow:"visible",position:"relative","&:after":{minHeight:e,minWidth:e,position:"absolute",width:"100%",content:'""',left:"50%",top:"50%",transform:"translate(-50%, -50%)"}});var le=({contentMaxWidth:e,variant:o})=>({container:emotion.css({justifyContent:"center",backgroundColor:i__default.default.gray100,width:"100%"}),logo:emotion.css({display:"none",[m.small]:{display:"block",height:"28px",width:"28px"}}),navigation:emotion.css({width:"100%",maxWidth:o==="wide"?"1920px":e,padding:`${i__default.default.spacingS} ${i__default.default.spacingM}`,minHeight:i__default.default.spacingL,[m.small]:{padding:`${i__default.default.spacingM} ${i__default.default.spacingL}`}}),mainNavigation:emotion.css({display:"none",[m.small]:{display:"flex"}}),mobileNavigationButton:emotion.css({display:"flex",minHeight:"initial",height:"36px",padding:"0 12px",borderRadius:"10px",[m.small]:{display:"none"}}),mobileNavigationIcon:emotion.css({heigt:"20px",width:"20px"}),secondaryNavigationWrapper:emotion.css({"> *:not(:first-child)":{display:"none",[m.xsmall]:{display:"flex"}}}),account:emotion.css({display:"none",[m.xsmall]:{display:"flex"}})});var be=f36Icon.generateComponentWithVariants({variants:{[f36Icon.IconVariant.Active]:f36Icon.generateIconComponent({path:c__default.default.createElement(c__default.default.Fragment,null,c__default.default.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:i__default.default.blue300})),viewBox:"0 0 12 12"}),[f36Icon.IconVariant.Default]:f36Icon.generateIconComponent({path:c__default.default.createElement(c__default.default.Fragment,null,c__default.default.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:i__default.default.gray400})),viewBox:"0 0 12 12"})}});var ge=f36Icon.generateIconComponent({name:"ContentfulLogoIcon",viewBox:"0 0 28 28",path:c__default.default.createElement(c__default.default.Fragment,null,c__default.default.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"}),c__default.default.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"}),c__default.default.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"}),c__default.default.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"}),c__default.default.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 fe=()=>({menuList:emotion.css({minWidth:0,[m.xsmall]:{minWidth:"250px"}})});var B=e=>{let{trigger:o,children:t,testId:r="cf-ui-navbar-menu-list",onOpen:a,onClose:n}=e,s=fe();return c__default.default.createElement(f36Menu.Menu,{onOpen:a,onClose:n},c__default.default.createElement(f36Menu.Menu.Trigger,null,o),c__default.default.createElement(f36Menu.Menu.List,{className:s.menuList,testId:r},t))};function Ke(e,o){let D=e,{logo:t,promotions:r,switcher:a,mainNavigation:n,secondaryNavigation:s,account:p,mobileNavigation:l,className:u,contentMaxWidth:I="100%",testId:S="cf-ui-navbar",variant:x="wide"}=D,f=b(D,["logo","promotions","switcher","mainNavigation","secondaryNavigation","account","mobileNavigation","className","contentMaxWidth","testId","variant"]),N=le({contentMaxWidth:I,variant:x});return c__default.default.createElement(f36Core.Flex,v(d({},f),{ref:o,testId:S,className:emotion.cx(N.container,u),as:"header"}),c__default.default.createElement(f36Core.Flex,{as:"nav",className:N.navigation,justifyContent:"space-between",gap:"spacingXs"},c__default.default.createElement(f36Core.Flex,{alignItems:"center",gap:"spacingL"},t||c__default.default.createElement(ge,{className:N.logo}),l&&c__default.default.createElement(B,{trigger:c__default.default.createElement(f36Button.Button,{className:N.mobileNavigationButton,startIcon:c__default.default.createElement(f36Icons.ListIcon,{size:"medium"})},"Menu")},l),n&&c__default.default.createElement(f36Core.Flex,{className:N.mainNavigation,"aria-label":"Main Navigation",gap:"spacingXs"},n)),c__default.default.createElement(f36Core.Flex,{alignItems:"center",gap:"spacingXs"},c__default.default.createElement(f36Core.Flex,{alignItems:"center"},r),c__default.default.createElement(f36Core.Flex,{alignItems:"center"},a),c__default.default.createElement(f36Core.Flex,{alignItems:"center",gap:"spacingXs"},s&&c__default.default.createElement(f36Core.Flex,{className:N.secondaryNavigationWrapper,"aria-label":"Secondary Navigation",gap:"spacingXs"},s),p&&c__default.default.createElement(f36Core.Flex,{className:N.account,"aria-label":"Account Navigation",gap:"spacingXs"},p)))))}var ve=c__default.default.forwardRef(Ke);var Qe={warning:i__default.default.colorWarning,negative:i__default.default.colorNegative,info:i__default.default.blue500},he=()=>({navbarAccount:emotion.css({cursor:"pointer",background:"none",position:"relative",outline:"none",overflow:"visible",borderRadius:"50%",border:"none",padding:0,"&:hover img":{filter:"brightness(0.9)"}},k(),E()),notificationIcon:e=>emotion.css({position:"absolute",top:0,right:0,height:i__default.default.spacingS,width:i__default.default.spacingS,borderRadius:"50%",border:`2px solid ${i__default.default.gray100}`,backgroundColor:Qe[e],transform:"translate(30%, -30%)"})});function no(e,o){let f=e,{children:t,className:r,testId:a="cf-ui-navbar-account-trigger",avatar:n,label:s="Account menu",initials:p,username:l,hasNotification:u,notificationVariant:I="warning"}=f,S=b(f,["children","className","testId","avatar","label","initials","username","hasNotification","notificationVariant"]),x=he();return c__default.default.createElement(B,{trigger:c__default.default.createElement("div",null,c__default.default.createElement(f36Tooltip.Tooltip,{placement:"bottom",content:s,showDelay:600,usePortal:!0},c__default.default.createElement(f36Core.Flex,v(d({as:"button"},S),{ref:o,className:emotion.cx(x.navbarAccount,r),testId:a,alignItems:"center","aria-label":s}),c__default.default.createElement(f36Avatar.Avatar,{src:n,initials:p,size:"small",variant:"user"}),u?c__default.default.createElement("span",{className:x.notificationIcon(I)}):null)))},t)}var J=c__default.default.forwardRef(no);function K({ariaLabel:e}){return c__default.default.createElement(f36Skeleton.SkeletonContainer,{svgWidth:24,svgHeight:24,ariaLabel:e,backgroundColor:i__default.default.gray300,foregroundColor:i__default.default.gray200},c__default.default.createElement(f36Skeleton.SkeletonImage,{width:24,height:24,radiusX:12,radiusY:12}))}var R="1px",Ie=()=>emotion.css({backgroundColor:i__default.default.blue100,border:`${R} solid ${i__default.default.blue400}`,color:i__default.default.blue600,"&:hover":{backgroundColor:i__default.default.blue100}}),Se={display:"flex",justifyContent:"center",padding:`calc(${i__default.default.spacing2Xs} - ${R}) calc(${i__default.default.spacingXs} - ${R})`,alignItems:"center",background:"none",gap:i__default.default.spacing2Xs},Pe=({hasTitle:e})=>({navbarItem:emotion.css(Se,{appearance:"none",background:"none",border:`${R} solid transparent`,margin:0,outline:"none",fontSize:i__default.default.fontSizeM,lineHeight:i__default.default.lineHeightM,fontWeight:i__default.default.fontWeightMedium,position:"relative",textAlign:"left",whiteSpace:"nowrap",cursor:"pointer",hyphens:"auto",textDecoration:"none",color:i__default.default.gray800,boxSizing:"border-box",transition:`color ${i__default.default.transitionDurationShort} ${i__default.default.transitionEasingCubicBezier}`,borderRadius:i__default.default.borderRadiusMedium,height:"30px",padding:e?void 0:`calc(${i__default.default.spacing2Xs} - ${R})`,"&:hover":{backgroundColor:f36Utils.hexToRGBA(i__default.default.gray900,.05)},"&:hover::before":{opacity:1,scale:"1"},"&:active::before":{backgroundColor:"rgba(255, 255, 255, 0.1)"},"&:disabled":{cursor:"auto"},"& svg":{transition:`fill ${i__default.default.transitionDurationShort} ${i__default.default.transitionEasingCubicBezier}`},"& > svg, & > span":{zIndex:i__default.default.zIndexDefault}},k(),E()),navbarItemMenuTrigger:emotion.css({paddingRight:i__default.default.spacingXs}),isActive:Ie(),icon:emotion.css({height:"20px",width:"20px",boxSizing:"content-box",display:e?"none":"block",[m.small]:{height:"16px",width:"16px",padding:e?"2px 0":"2px"},[m.large]:{display:"block"}})}),Me=()=>({itemSkeleton:emotion.css(Se)});var we=()=>({navbarItemIcon:emotion.css({"&:last-child&:not(:only-child)":{marginLeft:i__default.default.spacing2Xs},"img&":{borderRadius:i__default.default.borderRadiusSmall,maxWidth:i__default.default.spacingM,maxHeight:i__default.default.spacingM}})});var A=({icon:e,isActive:o,className:t})=>{let p=e.props,{className:r,size:a}=p,n=b(p,["className","size"]),s=we();return c__default.default.cloneElement(e,d({className:emotion.cx(r,s.navbarItemIcon,t),size:a||"small",isActive:o},n))};var bo="button";function go(e,o){let ie=e,{as:t=bo,icon:r,label:a,title:n,children:s,className:p,isActive:l,testId:u="cf-ui-navbar-item",onOpen:I,onClose:S}=ie,x=b(ie,["as","icon","label","title","children","className","isActive","testId","onOpen","onClose"]),f=Pe({hasTitle:!!n}),N=fo(e),D=n&&N,X=c__default.default.createElement(t,v(d({},x),{ref:o,"data-test-id":u,className:emotion.cx(f.navbarItem,p,{[f.navbarItemMenuTrigger]:D,[f.isActive]:l}),"aria-label":n?"":a}),r&&c__default.default.createElement(A,{className:f.icon,icon:r,isActive:l}),n&&c__default.default.createElement("span",null,n),D&&c__default.default.createElement(be,{size:"tiny",isActive:l}));return n||(X=c__default.default.createElement("div",null,c__default.default.createElement(f36Tooltip.Tooltip,{content:a,placement:"bottom",showDelay:600,usePortal:!0},X))),N?c__default.default.createElement(B,{trigger:X,testId:u,onOpen:I,onClose:S},s):X}var fo=e=>!!e.children,Q=c__default.default.forwardRef(go);var ee=({estimatedWidth:e})=>{let o=Me();return c__default.default.createElement(f36Skeleton.SkeletonContainer,{className:o.itemSkeleton,svgWidth:e,svgHeight:28,backgroundColor:i__default.default.gray300,foregroundColor:i__default.default.gray200},c__default.default.createElement(f36Skeleton.SkeletonText,{lineHeight:18,numberOfLines:1,offsetTop:2,radiusX:i__default.default.borderRadiusSmall,radiusY:i__default.default.borderRadiusSmall}))};var Ae=()=>({navbarMenuItem:emotion.css({display:"flex",justifyContent:"flex-start",alignItems:"center"})});var So="button";function Po(e,o){let u=e,{as:t=So,icon:r,title:a,className:n}=u,s=b(u,["as","icon","title","className"]),p=Ae(),l=Mo(e);return c__default.default.createElement(f36Menu.Menu.Item,v(d({},s),{ref:o,as:t,className:emotion.cx(p.navbarMenuItem,n)}),r?c__default.default.createElement(A,{icon:r}):l&&ke,c__default.default.createElement("span",null,a),r&&l?ke:null)}var ke=c__default.default.createElement(A,{icon:c__default.default.createElement(f36Icons.ArrowSquareOutIcon,null)}),Mo=e=>e.as==="a"&&e.target==="_blank",oe=c__default.default.forwardRef(Po);var te=({ariaLabel:e})=>c__default.default.createElement(f36Menu.Menu.Item,null,c__default.default.createElement(f36Core.Flex,{alignItems:"center",gap:i__default.default.spacingXs},c__default.default.createElement(f36Skeleton.SkeletonContainer,{svgHeight:16,svgWidth:18},c__default.default.createElement(f36Skeleton.SkeletonImage,{width:16,height:16})),c__default.default.createElement(f36Skeleton.SkeletonContainer,{svgHeight:16,svgWidth:190,ariaLabel:e},c__default.default.createElement(f36Skeleton.SkeletonBodyText,{numberOfLines:1}))));var Te=()=>({navbarSwitcher:emotion.css({color:i__default.default.gray600,flexShrink:1,fontWeight:i__default.default.fontWeightMedium,maxWidth:"100%",minHeight:"unset",padding:`${i__default.default.spacing2Xs} ${i__default.default.spacingXs}`,"&:hover":{backgroundColor:f36Utils.hexToRGBA(i__default.default.gray900,.05)}},k(),E()),switcherSpaceName:emotion.css({"&:has(> span:last-child:nth-child(3))":{minWidth:"12ch"},maxWidth:"15vw",[m.xsmall]:{maxWidth:"50vw"},[m.small]:{maxWidth:"10vw"},[m.medium]:{maxWidth:"50vw"}}),switcherEnvIcon:emotion.css({[m.small]:{width:"16px",height:"16px"}}),switcherSpaceNameTruncation:emotion.css({flexShrink:1,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"})});function Oe({isAlias:e,envVariant:o,className:t}){let r=o==="master"?i__default.default.green600:i__default.default.orange500;return e?c__default.default.createElement(f36Icons.EnvironmentAliasIcon,{color:r,className:t,size:"medium"}):c__default.default.createElement(f36Icons.EnvironmentIcon,{color:r,className:t,size:"medium"})}function Fo(e,{start:o=5,end:t=6}={}){if(e.length<=o+t)return [e,void 0,void 0];let r=o>0?e.slice(0,o):"",a=t>0?e.slice(-t):"",n=e.slice(o,e.length-t);return [r,n,a]}function Ho(e,o){let f=e,{children:t,className:r,envVariant:a,isAlias:n,testId:s="cf-ui-navbar-switcher",ariaLabel:p="Space and Environment Navigation"}=f,l=b(f,["children","className","envVariant","isAlias","testId","ariaLabel"]),u=Te(),[I,S,x]=typeof t=="string"?Fo(t):[];return c__default.default.createElement(f36Button.Button,v(d({},l),{"aria-label":p,className:emotion.cx(u.navbarSwitcher,r),endIcon:a&&c__default.default.createElement(Oe,{envVariant:a,isAlias:n,className:u.switcherEnvIcon}),ref:o,testId:s,variant:"transparent"}),c__default.default.createElement(f36Core.Flex,{alignItems:"center",className:u.switcherSpaceName,flexDirection:"row"},I!==void 0?c__default.default.createElement(c__default.default.Fragment,null,c__default.default.createElement("span",null,I),S&&c__default.default.createElement("span",{className:u.switcherSpaceNameTruncation},S),x&&c__default.default.createElement("span",null,x)):t))}var re=c__default.default.forwardRef(Ho);var ne=({estimatedWidth:e})=>c__default.default.createElement(f36Skeleton.SkeletonContainer,{svgWidth:e,svgHeight:18,backgroundColor:i__default.default.gray300,foregroundColor:i__default.default.gray200},c__default.default.createElement(f36Skeleton.SkeletonText,{lineHeight:18,numberOfLines:1,radiusX:i__default.default.borderRadiusSmall,radiusY:i__default.default.borderRadiusSmall}));var _e=()=>({navbarBadge:emotion.css({display:"flex",justifyContent:"center",alignItems:"center",background:"none",border:`1px solid ${i__default.default.purple600}`,margin:0,outline:"none",fontSize:i__default.default.fontSizeS,lineHeight:i__default.default.lineHeightS,fontWeight:i__default.default.fontWeightMedium,textAlign:"center",padding:`0 ${i__default.default.spacingXs}`,textDecoration:"none",color:`${i__default.default.purple600}!important`,borderRadius:"1.75rem",userSelect:"none"})});var Xo="div";function Go(e,o){let l=e,{as:t=Xo,children:r,className:a,testId:n="cf-ui-navbar-badge"}=l,s=b(l,["as","children","className","testId"]),p=_e();return c__default.default.createElement(t,v(d({},s),{ref:o,className:emotion.cx(p.navbarBadge,a),"data-test-id":n}),r)}var He=c__default.default.forwardRef(Go);var Ve=()=>({navbarMenuItem:emotion.css({display:"flex",justifyContent:"flex-start",alignItems:"center",gap:i__default.default.spacingXs}),menuList:emotion.css({minWidth:0,marginLeft:"-24px",marginTop:"10px",[m.xsmall]:{minWidth:"250px",margin:0}})});var Re=e=>{let{title:o,icon:t,children:r,testId:a="cf-ui-navbar-submenu-list",onOpen:n,onClose:s}=e,p=Ve();return c__default.default.createElement(f36Menu.Menu.Submenu,{onOpen:n,onClose:s},c__default.default.createElement(f36Menu.Menu.SubmenuTrigger,null,c__default.default.createElement(f36Core.Flex,{className:p.navbarMenuItem},t&&c__default.default.createElement(A,{icon:t}),c__default.default.createElement("span",null,o))),c__default.default.createElement(f36Menu.Menu.List,{className:p.menuList,testId:a},r))};var g=ve;g.Item=Q;g.ItemSkeleton=ee;g.MenuItem=oe;g.MenuItemSkeleton=te;g.MenuDivider=f36Menu.MenuDivider;g.MenuSectionTitle=f36Menu.MenuSectionTitle;g.Submenu=Re;g.Switcher=re;g.SwitcherSkeleton=ne;g.Account=J;g.AccountSkeleton=K;g.Badge=He;
+var Ge=Object.defineProperty,Xe=Object.defineProperties;var ze=Object.getOwnPropertyDescriptors;var z=Object.getOwnPropertySymbols;var ie=Object.prototype.hasOwnProperty,se=Object.prototype.propertyIsEnumerable;var ae=(e,t,o)=>t in e?Ge(e,t,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[t]=o,b=(e,t)=>{for(var o in t||(t={}))ie.call(t,o)&&ae(e,o,t[o]);if(z)for(var o of z(t))se.call(t,o)&&ae(e,o,t[o]);return e},f=(e,t)=>Xe(e,ze(t));var d=(e,t)=>{var o={};for(var r in e)ie.call(e,r)&&t.indexOf(r)<0&&(o[r]=e[r]);if(e!=null&&z)for(var r of z(e))t.indexOf(r)<0&&se.call(e,r)&&(o[r]=e[r]);return o};var p={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)"},A=(e=c__default.default.glowPrimary)=>({"&:focus":{boxShadow:e},"&:focus:not(:focus-visible)":{boxShadow:"unset"},"&:focus-visible":{boxShadow:e}}),k=(e="44px")=>({overflow:"visible",position:"relative","&:after":{minHeight:e,minWidth:e,position:"absolute",width:"100%",content:'""',left:"50%",top:"50%",transform:"translate(-50%, -50%)"}});var me=({contentMaxWidth:e,variant:t})=>({container:emotion.css({justifyContent:"center",backgroundColor:c__default.default.gray100,width:"100%"}),logo:emotion.css({display:"none",[p.small]:{display:"block",height:"28px",width:"28px"}}),navigation:emotion.css({width:"100%",maxWidth:t==="wide"?"1920px":e,padding:`${c__default.default.spacingS} ${c__default.default.spacingM}`,minHeight:c__default.default.spacingL,[p.small]:{padding:`${c__default.default.spacingM} ${c__default.default.spacingL}`}}),mainNavigation:emotion.css({display:"none",[p.small]:{display:"flex"}}),mobileNavigationButton:emotion.css({display:"flex",height:"36px",borderRadius:"10px",[p.small]:{display:"none"}}),mobileNavigationIcon:emotion.css({heigt:"20px",width:"20px"}),secondaryNavigationWrapper:emotion.css({"> *:not(:first-child)":{display:"none",[p.xsmall]:{display:"flex"}}}),account:emotion.css({display:"none",[p.xsmall]:{display:"flex"}})});var ue=f36Icon.generateComponentWithVariants({variants:{[f36Icon.IconVariant.Active]:f36Icon.generateIconComponent({path:l__default.default.createElement(l__default.default.Fragment,null,l__default.default.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:c__default.default.blue300})),viewBox:"0 0 12 12"}),[f36Icon.IconVariant.Default]:f36Icon.generateIconComponent({path:l__default.default.createElement(l__default.default.Fragment,null,l__default.default.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:c__default.default.gray400})),viewBox:"0 0 12 12"})}});var be=f36Icon.generateIconComponent({name:"ContentfulLogoIcon",viewBox:"0 0 28 28",path:l__default.default.createElement(l__default.default.Fragment,null,l__default.default.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"}),l__default.default.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"}),l__default.default.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"}),l__default.default.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"}),l__default.default.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 de=()=>({menuList:emotion.css({minWidth:0,[p.xsmall]:{minWidth:"250px"}})});var L=e=>{let{trigger:t,children:o,testId:r="cf-ui-navbar-menu-list",onOpen:a,onClose:n}=e,i=de();return l__default.default.createElement(f36Menu.Menu,{onOpen:a,onClose:n},l__default.default.createElement(f36Menu.Menu.Trigger,null,t),l__default.default.createElement(f36Menu.Menu.List,{className:i.menuList,testId:r},o))};function Ke(e,t){let V=e,{logo:o,promotions:r,switcher:a,mainNavigation:n,secondaryNavigation:i,account:s,mobileNavigation:m,className:N,contentMaxWidth:P="100%",testId:I="cf-ui-navbar",variant:g="wide"}=V,x=d(V,["logo","promotions","switcher","mainNavigation","secondaryNavigation","account","mobileNavigation","className","contentMaxWidth","testId","variant"]),h=me({contentMaxWidth:P,variant:g});return l__default.default.createElement(f36Core.Flex,f(b({},x),{ref:t,testId:I,className:emotion.cx(h.container,N),as:"header"}),l__default.default.createElement(f36Core.Flex,{as:"nav",className:h.navigation,justifyContent:"space-between",gap:"spacingXs"},l__default.default.createElement(f36Core.Flex,{alignItems:"center",gap:"spacingL"},o||l__default.default.createElement(be,{className:h.logo}),m&&l__default.default.createElement(L,{trigger:l__default.default.createElement(f36Button.Button,{className:h.mobileNavigationButton,startIcon:l__default.default.createElement(f36Icons.ListIcon,{size:"medium"})},"Menu")},m),n&&l__default.default.createElement(f36Core.Flex,{className:h.mainNavigation,"aria-label":"Main Navigation",gap:"spacingXs"},n)),l__default.default.createElement(f36Core.Flex,{alignItems:"center",gap:"spacingXs"},l__default.default.createElement(f36Core.Flex,{alignItems:"center"},r),l__default.default.createElement(f36Core.Flex,{alignItems:"center"},a),l__default.default.createElement(f36Core.Flex,{alignItems:"center",gap:"spacingXs"},i&&l__default.default.createElement(f36Core.Flex,{className:h.secondaryNavigationWrapper,"aria-label":"Secondary Navigation",gap:"spacingXs"},i),s&&l__default.default.createElement(f36Core.Flex,{className:h.account,"aria-label":"Account Navigation",gap:"spacingXs"},s)))))}var ve=l__default.default.forwardRef(Ke);var et={warning:c__default.default.colorWarning,negative:c__default.default.colorNegative,info:c__default.default.blue500},ge=()=>({navbarAccount:emotion.css({margin:0,padding:0,border:0,cursor:"pointer",background:"none",position:"relative",outline:"none",overflow:"visible",borderRadius:"50%","&:before":emotion.css({content:'""',display:"block",position:"absolute",height:"24px",width:"24px",backgroundColor:"transparent",borderRadius:"50%"}),"&:hover:before":emotion.css({backgroundColor:f36Utils.hexToRGBA(c__default.default.gray300,.15)})},A(),k()),avatar:emotion.css({borderRadius:"50%",display:"block",height:"24px",width:"24px"}),notificationIcon:e=>emotion.css({position:"absolute",top:0,right:0,height:c__default.default.spacingS,width:c__default.default.spacingS,borderRadius:"50%",border:`2px solid ${c__default.default.gray100}`,backgroundColor:et[e],transform:"translate(30%, -30%)"})});function nt(e,t){let g=e,{children:o,className:r,testId:a="cf-ui-navbar-account-trigger",avatar:n,initials:i,username:s,hasNotification:m,notificationVariant:N="warning"}=g,P=d(g,["children","className","testId","avatar","initials","username","hasNotification","notificationVariant"]),I=ge();return l__default.default.createElement(L,{trigger:l__default.default.createElement(f36Core.Flex,f(b({as:"button"},P),{ref:t,className:emotion.cx(I.navbarAccount,r),testId:a,alignItems:"center","aria-label":"Account Menu"}),l__default.default.createElement(f36Avatar.Avatar,{src:n,initials:i,size:"small",variant:"user"}),m?l__default.default.createElement("span",{className:I.notificationIcon(N)}):null)},o)}var Y=l__default.default.forwardRef(nt);function J({ariaLabel:e}){return l__default.default.createElement(f36Skeleton.SkeletonContainer,{svgWidth:24,svgHeight:24,ariaLabel:e,backgroundColor:c__default.default.gray300,foregroundColor:c__default.default.gray200},l__default.default.createElement(f36Skeleton.SkeletonImage,{width:24,height:24,radiusX:12,radiusY:12}))}var he=()=>emotion.css({backgroundColor:c__default.default.blue100,border:`1px solid ${c__default.default.blue400}`,color:c__default.default.blue600,"&:hover":{backgroundColor:c__default.default.blue100}}),ye={display:"flex",justifyContent:"center",padding:`${c__default.default.spacing2Xs} ${c__default.default.spacingXs}`,alignItems:"center",background:"none",gap:c__default.default.spacing2Xs},xe=({title:e})=>({navbarItem:emotion.css(ye,{appearance:"none",background:"none",border:"1px solid transparent",margin:0,outline:"none",fontSize:c__default.default.fontSizeM,lineHeight:c__default.default.lineHeightM,fontWeight:c__default.default.fontWeightMedium,position:"relative",textAlign:"left",whiteSpace:"nowrap",cursor:"pointer",hyphens:"auto",textDecoration:"none",color:c__default.default.gray800,boxSizing:"border-box",transition:`color ${c__default.default.transitionDurationShort} ${c__default.default.transitionEasingCubicBezier}`,borderRadius:c__default.default.borderRadiusMedium,"&:hover":{backgroundColor:f36Utils.hexToRGBA(c__default.default.gray900,.05)},"&:hover::before":{opacity:1,scale:"1"},"&:active::before":{backgroundColor:"rgba(255, 255, 255, 0.1)"},"&:disabled":{cursor:"auto"},"& svg":{transition:`fill ${c__default.default.transitionDurationShort} ${c__default.default.transitionEasingCubicBezier}`},"& > svg, & > span":{zIndex:c__default.default.zIndexDefault}},A(),k()),navbarItemMenuTrigger:emotion.css({paddingRight:c__default.default.spacingXs}),isActive:he(),icon:emotion.css({height:"20px",width:"20px",display:e?"none":"block",[p.small]:{height:"16px",width:"16px"},[p.large]:{display:"block"}})}),Ie=()=>({itemSkeleton:emotion.css(ye)});var Se=()=>({navbarItemIcon:emotion.css({"&:last-child&:not(:only-child)":{marginLeft:c__default.default.spacing2Xs},"img&":{borderRadius:c__default.default.borderRadiusSmall,maxWidth:c__default.default.spacingM,maxHeight:c__default.default.spacingM}})});var C=({icon:e,isActive:t,className:o})=>{let s=e.props,{className:r,size:a}=s,n=d(s,["className","size"]),i=Se();return l__default.default.cloneElement(e,b({className:emotion.cx(r,i.navbarItemIcon,o),size:a||"small",isActive:t},n))};var ut="button";function bt(e,t){let ne=e,{as:o=ut,icon:r,label:a,title:n,children:i,className:s,isActive:m,testId:N="cf-ui-navbar-item",onOpen:P,onClose:I}=ne,g=d(ne,["as","icon","label","title","children","className","isActive","testId","onOpen","onClose"]),x=xe({title:n}),h=dt(e),V=l__default.default.createElement(o,f(b({},g),{ref:t,"data-test-id":N,className:emotion.cx(x.navbarItem,h&&x.navbarItemMenuTrigger,m&&x.isActive,s),"aria-label":n?"":a}),r&&l__default.default.createElement(C,{className:x.icon,icon:r,isActive:m}),n&&l__default.default.createElement("span",null,n),n&&h&&l__default.default.createElement(ue,{size:"tiny",isActive:m}));return h?l__default.default.createElement(L,{trigger:V,testId:N,onOpen:P,onClose:I},i):V}var dt=e=>!!e.children,K=l__default.default.forwardRef(bt);var Q=({estimatedWidth:e})=>{let t=Ie();return l__default.default.createElement(f36Skeleton.SkeletonContainer,{className:t.itemSkeleton,svgWidth:e,svgHeight:32,backgroundColor:c__default.default.gray300,foregroundColor:c__default.default.gray200},l__default.default.createElement(f36Skeleton.SkeletonText,{lineHeight:6,numberOfLines:1,offsetTop:10,radiusX:c__default.default.borderRadiusSmall,radiusY:c__default.default.borderRadiusSmall}))};var Me=()=>({navbarMenuItem:emotion.css({display:"flex",justifyContent:"flex-start",alignItems:"center"})});var xt="button";function It(e,t){let N=e,{as:o=xt,icon:r,title:a,className:n}=N,i=d(N,["as","icon","title","className"]),s=Me(),m=St(e);return l__default.default.createElement(f36Menu.Menu.Item,f(b({},i),{ref:t,as:o,className:emotion.cx(s.navbarMenuItem,n)}),r?l__default.default.createElement(C,{icon:r}):m&&we,l__default.default.createElement("span",null,a),r&&m?we:null)}var we=l__default.default.createElement(C,{icon:l__default.default.createElement(f36Icons.ArrowSquareOutIcon,null)}),St=e=>e.as==="a"&&e.target==="_blank",ee=l__default.default.forwardRef(It);var te=({ariaLabel:e})=>l__default.default.createElement(f36Menu.Menu.Item,null,l__default.default.createElement(f36Core.Flex,{alignItems:"center",gap:c__default.default.spacingXs},l__default.default.createElement(f36Skeleton.SkeletonContainer,{svgHeight:16,svgWidth:18},l__default.default.createElement(f36Skeleton.SkeletonImage,{width:16,height:16})),l__default.default.createElement(f36Skeleton.SkeletonContainer,{svgHeight:16,svgWidth:190,ariaLabel:e},l__default.default.createElement(f36Skeleton.SkeletonBodyText,{numberOfLines:1}))));var Ae=()=>({navbarSwitcher:emotion.css({color:c__default.default.gray600,flexShrink:1,fontWeight:c__default.default.fontWeightMedium,maxWidth:"100%",minHeight:"unset",padding:`${c__default.default.spacing2Xs} ${c__default.default.spacingXs}`,"&:hover":{backgroundColor:f36Utils.hexToRGBA(c__default.default.gray900,.05)}},A(),k()),switcherSpaceName:emotion.css({"&:has(> span:last-child:nth-child(3))":{minWidth:"12ch"},maxWidth:"15vw",[p.xsmall]:{maxWidth:"50vw"},[p.small]:{maxWidth:"10vw"},[p.medium]:{maxWidth:"50vw"}}),switcherEnvIcon:emotion.css({[p.small]:{width:"16px",height:"16px"}}),switcherSpaceNameTruncation:emotion.css({flexShrink:1,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"})});function Te({isAlias:e,envVariant:t,className:o}){let r=t==="master"?c__default.default.green600:c__default.default.orange500;return e?l__default.default.createElement(f36Icons.EnvironmentAliasIcon,{color:r,className:o,size:"medium"}):l__default.default.createElement(f36Icons.EnvironmentIcon,{color:r,className:o,size:"medium"})}var X=({estimatedWidth:e})=>l__default.default.createElement(f36Skeleton.SkeletonContainer,{svgWidth:e,svgHeight:24,backgroundColor:c__default.default.gray300,foregroundColor:c__default.default.gray200},l__default.default.createElement(f36Skeleton.SkeletonDisplayText,{lineHeight:24,numberOfLines:1,radiusX:12,radiusY:12}));function Ht(e,{start:t=5,end:o=6}={}){if(e.length<=t+o)return [e,void 0,void 0];let r=t>0?e.slice(0,t):"",a=o>0?e.slice(-o):"",n=e.slice(t,e.length-o);return [r,n,a]}var We=({value:e,styles:t,envVariant:o,type:r})=>{let[a,n,i]=typeof e=="string"?Ht(e):[],s=r==="environment",m=o==="master"?"green600":"orange500";return a!==void 0?l__default.default.createElement(f36Typography.Text,{fontColor:s?m:void 0},l__default.default.createElement("span",null,a),n&&l__default.default.createElement("span",{className:t.switcherSpaceNameTruncation},n),i&&l__default.default.createElement("span",null,i)):l__default.default.createElement(f36Typography.Text,{fontColor:s?m:void 0},e)};function Rt(e,t){let x=e,{children:o,className:r,envVariant:a,isAlias:n,testId:i="cf-ui-navbar-switcher",ariaLabel:s="Space and Environment Navigation",space:m,environment:N,isLoading:P}=x,I=d(x,["children","className","envVariant","isAlias","testId","ariaLabel","space","environment","isLoading"]),g=Ae();return l__default.default.createElement(f36Button.Button,f(b({},I),{"aria-label":s,className:emotion.cx(g.navbarSwitcher,r),endIcon:a&&l__default.default.createElement(Te,{envVariant:a,isAlias:n,className:g.switcherEnvIcon}),ref:t,testId:i,variant:"transparent"}),l__default.default.createElement(f36Core.Flex,{alignItems:"center",className:g.switcherSpaceName,flexDirection:"row"},P?l__default.default.createElement(X,{estimatedWidth:148}):l__default.default.createElement(l__default.default.Fragment,null,l__default.default.createElement(We,{type:"space",value:m,styles:g}),l__default.default.createElement(f36Icons.CaretRightIcon,{size:"tiny",color:c__default.default.gray400}),l__default.default.createElement(We,{envVariant:a,type:"environment",value:N,styles:g}))))}var oe=l__default.default.forwardRef(Rt);var _e=()=>({navbarBadge:emotion.css({display:"flex",justifyContent:"center",alignItems:"center",background:"none",border:`1px solid ${c__default.default.purple600}`,margin:0,outline:"none",fontSize:c__default.default.fontSizeS,lineHeight:c__default.default.lineHeightS,fontWeight:c__default.default.fontWeightMedium,textAlign:"center",padding:`0 ${c__default.default.spacingXs}`,textDecoration:"none",color:`${c__default.default.purple600}!important`,borderRadius:"1.75rem",userSelect:"none"})});var Xt="div";function zt(e,t){let m=e,{as:o=Xt,children:r,className:a,testId:n="cf-ui-navbar-badge"}=m,i=d(m,["as","children","className","testId"]),s=_e();return l__default.default.createElement(o,f(b({},i),{ref:t,className:emotion.cx(s.navbarBadge,a),"data-test-id":n}),r)}var Ve=l__default.default.forwardRef(zt);var Re=()=>({navbarMenuItem:emotion.css({display:"flex",justifyContent:"flex-start",alignItems:"center",gap:c__default.default.spacingXs}),menuList:emotion.css({minWidth:0,marginLeft:"-24px",marginTop:"10px",[p.xsmall]:{minWidth:"250px",margin:0}})});var De=e=>{let{title:t,icon:o,children:r,testId:a="cf-ui-navbar-submenu-list",onOpen:n,onClose:i}=e,s=Re();return l__default.default.createElement(f36Menu.Menu.Submenu,{onOpen:n,onClose:i},l__default.default.createElement(f36Menu.Menu.SubmenuTrigger,null,l__default.default.createElement(f36Core.Flex,{className:s.navbarMenuItem},o&&l__default.default.createElement(C,{icon:o}),l__default.default.createElement("span",null,t))),l__default.default.createElement(f36Menu.Menu.List,{className:s.menuList,testId:a},r))};var v=ve;v.Item=K;v.ItemSkeleton=Q;v.MenuItem=ee;v.MenuItemSkeleton=te;v.MenuDivider=f36Menu.MenuDivider;v.MenuSectionTitle=f36Menu.MenuSectionTitle;v.Submenu=De;v.Switcher=oe;v.SwitcherSkeleton=X;v.Account=Y;v.AccountSkeleton=J;v.Badge=Ve;
 
-exports.Navbar = g;
-exports.getNavbarItemActiveStyles = Ie;
+exports.Navbar = v;
+exports.getNavbarItemActiveStyles = he;
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "@contentful/f36-navbar",
-  "version": "5.0.0-alpha.31",
+  "version": "5.0.0-alpha.32",
   "description": "Forma 36: Navbar component",
@@ -18,2 +18,3 @@ "scripts": {
     "@contentful/f36-tooltip": "^4.68.1",
+    "@contentful/f36-typography": "5.0.0-alpha.1",
     "@contentful/f36-utils": "^4.23.2",
@@ -20,0 +21,0 @@ "emotion": "^10.0.17"

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

166533

increased by2.29%

Lines of code

336

increased by3.7%

Worsened metrics

Dependency count

14

increased by7.69%

Dependency changes

• + Added@contentful/f36-typography@5.0.0-alpha.1

• + Added@contentful/f36-typography@5.0.0-alpha.1(transitive)