@contentful/f36-navbar 5.0.0-alpha.23 → 5.0.0-alpha.25

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/esm/index.js +6 -6
  2. package/dist/esm/index.js.map +1 -1
  3. package/dist/index.d.mts +15 -1
  4. package/dist/index.d.ts +15 -1
  5. package/dist/index.js +9 -9
  6. package/dist/index.js.map +1 -1
  7. package/package.json +6 -6
package/dist/esm/index.js CHANGED
@@ -1,17 +1,17 @@
1
1
  import { MenuDivider, MenuSectionTitle, Menu } from '@contentful/f36-menu';
2
2
  import { Flex } from '@contentful/f36-core';
3
- import g from 'react';
3
+ import f from 'react';
4
4
  import { cx, css } from 'emotion';
5
- import i from '@contentful/f36-tokens';
5
+ import s from '@contentful/f36-tokens';
6
6
  import { generateComponentWithVariants, IconVariant, generateIconComponent } from '@contentful/f36-icon';
7
+ import { Button } from '@contentful/f36-button';
8
+ import { ArrowSquareOutIcon, ListIcon, EnvironmentAliasIcon, EnvironmentIcon } from '@contentful/f36-icons';
7
9
  import { hexToRGBA } from '@contentful/f36-utils';
8
10
  import { Avatar } from '@contentful/f36-avatar';
9
11
  import { SkeletonContainer, SkeletonImage, SkeletonText, SkeletonBodyText, SkeletonDisplayText } from '@contentful/f36-skeleton';
10
- import { ArrowSquareOutIcon, EnvironmentAliasIcon, EnvironmentIcon } from '@contentful/f36-icons';
11
- import { Button } from '@contentful/f36-button';
12
12
 
13
- var _e=Object.defineProperty,Re=Object.defineProperties;var Fe=Object.getOwnPropertyDescriptors;var R=Object.getOwnPropertySymbols;var re=Object.prototype.hasOwnProperty,ne=Object.prototype.propertyIsEnumerable;var te=(e,o,t)=>o in e?_e(e,o,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[o]=t,m=(e,o)=>{for(var t in o||(o={}))re.call(o,t)&&te(e,t,o[t]);if(R)for(var t of R(o))ne.call(o,t)&&te(e,t,o[t]);return e},u=(e,o)=>Re(e,Fe(o));var c=(e,o)=>{var t={};for(var r in e)re.call(e,r)&&o.indexOf(r)<0&&(t[r]=e[r]);if(e!=null&&R)for(var r of R(e))o.indexOf(r)<0&&ne.call(e,r)&&(t[r]=e[r]);return t};var ae={medium:"@media (min-width: 480px)",large:"@media (min-width: 768px)",xlarge:"@media (min-width: 1920px)"},P=(e=i.glowPrimary)=>({"&:focus":{boxShadow:e},"&:focus:not(:focus-visible)":{boxShadow:"unset"},"&:focus-visible":{boxShadow:e}}),M=(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 ie=(e,o)=>({container:css({justifyContent:"center",backgroundColor:i.gray100,width:"100%"}),logo:css({height:"28px",width:"28px"}),navigation:css({width:"100%",maxWidth:o==="wide"?"1524px":e,padding:`${i.spacingS} ${i.spacingM}`,minHeight:i.spacingL,[ae.medium]:{padding:`${i.spacingM} ${i.spacingL}`}})});var ce=generateComponentWithVariants({variants:{[IconVariant.Active]:generateIconComponent({path:g.createElement(g.Fragment,null,g.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:g.createElement(g.Fragment,null,g.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 le=generateIconComponent({name:"ContentfulLogoIcon",viewBox:"0 0 28 28",path:g.createElement(g.Fragment,null,g.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"}),g.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"}),g.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"}),g.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"}),g.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"}))});function Ge(e,o){let S=e,{logo:t,switcher:r,mainNavigation:a,secondaryNavigation:n,account:s,className:d,contentMaxWidth:p="100%",testId:l="cf-ui-navbar",variant:h="wide"}=S,v=c(S,["logo","switcher","mainNavigation","secondaryNavigation","account","className","contentMaxWidth","testId","variant"]),b=ie(p,h);return g.createElement(Flex,u(m({},v),{ref:o,testId:l,className:cx(b.container,d),as:"header"}),g.createElement(Flex,{as:"nav",className:b.navigation,justifyContent:"space-between"},g.createElement(Flex,{alignItems:"center",gap:"spacingL"},t||g.createElement(le,{className:b.logo}),a&&g.createElement(Flex,{"aria-label":"Main Navigation",gap:"spacingXs"},a)),g.createElement(Flex,{alignItems:"center",gap:"spacingXs"},r,n&&g.createElement(Flex,{"aria-label":"Secondary Navigation"},n),s&&g.createElement(Flex,{"aria-label":"Account Navigation",gap:"spacingXs"},s))))}var ue=g.forwardRef(Ge);var ze={warning:i.colorWarning,negative:i.colorNegative,info:i.blue500},fe=()=>({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(i.gray300,.15)})},P(),M()),avatar:css({borderRadius:"50%",display:"block",height:"24px",width:"24px"}),notificationIcon:e=>css({position:"absolute",top:0,right:0,height:i.spacingS,width:i.spacingS,borderRadius:"50%",border:`2px solid ${i.gray100}`,backgroundColor:ze[e],transform:"translate(30%, -30%)"})});var be=()=>({menuList:css({minWidth:"250px"})});var F=e=>{let{trigger:o,children:t,testId:r="cf-ui-navbar-menu-list",onOpen:a,onClose:n}=e,s=be();return g.createElement(Menu,{onOpen:a,onClose:n},g.createElement(Menu.Trigger,null,o),g.createElement(Menu.List,{className:s.menuList,testId:r},t))};function qe(e,o){let b=e,{children:t,className:r,testId:a="cf-ui-navbar-account-trigger",avatar:n,initials:s,username:d,hasNotification:p,notificationVariant:l="warning"}=b,h=c(b,["children","className","testId","avatar","initials","username","hasNotification","notificationVariant"]),v=fe();return g.createElement(F,{trigger:g.createElement(Flex,u(m({as:"button"},h),{ref:o,className:cx(v.navbarAccount,r),testId:a,alignItems:"center","aria-label":"Account Menu"}),g.createElement(Avatar,{src:n,initials:s,size:"small",variant:"user"}),p?g.createElement("span",{className:v.notificationIcon(l)}):null)},t)}var X=g.forwardRef(qe);function U({ariaLabel:e}){return g.createElement(SkeletonContainer,{svgWidth:24,svgHeight:24,ariaLabel:e,backgroundColor:i.gray300,foregroundColor:i.gray200},g.createElement(SkeletonImage,{width:24,height:24,radiusX:12,radiusY:12}))}var ge=()=>css({backgroundColor:i.blue100,border:`1px solid ${i.blue400}`,color:i.blue600,"&:hover":{backgroundColor:i.blue100}}),Ne={display:"flex",justifyContent:"center",padding:`${i.spacing2Xs} ${i.spacingXs}`,alignItems:"center",background:"none",gap:i.spacing2Xs},he=()=>({navbarItem:css(Ne,{appearance:"none",background:"none",border:"1px solid transparent",margin:0,outline:"none",fontSize:i.fontSizeM,lineHeight:i.lineHeightS,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,minWidth:"44px","&: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}},P(),M()),navbarItemMenuTrigger:css({paddingRight:i.spacingXs}),isActive:ge()}),ye=()=>({itemSkeleton:css(Ne)});var Ie=()=>({navbarItemIcon:css({"&:last-child&:not(:only-child)":{marginLeft:i.spacing2Xs},"img&":{borderRadius:i.borderRadiusSmall,maxWidth:i.spacingM,maxHeight:i.spacingM}})});var L=({icon:e,isActive:o})=>{let s=e.props,{className:t,size:r}=s,a=c(s,["className","size"]),n=Ie();return g.cloneElement(e,m({className:cx(t,n.navbarItemIcon),size:r||"small",isActive:o},a))};var ro="button";function no(e,o){let oe=e,{as:t=ro,icon:r,label:a,title:n,children:s,className:d,isActive:p,testId:l="cf-ui-navbar-item",onOpen:h,onClose:v}=oe,b=c(oe,["as","icon","label","title","children","className","isActive","testId","onOpen","onClose"]),S=he(),D=ao(e),ee=g.createElement(t,u(m({},b),{ref:o,"data-test-id":l,className:cx(S.navbarItem,D&&S.navbarItemMenuTrigger,p&&S.isActive,d),"aria-label":n?"":a}),r&&g.createElement(L,{icon:r,isActive:p}),n&&g.createElement("span",null,n),n&&D&&g.createElement(ce,{size:"tiny",isActive:p}));return D?g.createElement(F,{trigger:ee,testId:l,onOpen:h,onClose:v},s):ee}var ao=e=>!!e.children,j=g.forwardRef(no);var Z=({estimatedWidth:e})=>{let o=ye();return g.createElement(SkeletonContainer,{className:o.itemSkeleton,svgWidth:e,svgHeight:32,backgroundColor:i.gray300,foregroundColor:i.gray200},g.createElement(SkeletonText,{lineHeight:6,numberOfLines:1,offsetTop:10,radiusX:i.borderRadiusSmall,radiusY:i.borderRadiusSmall}))};var Se=()=>({navbarMenuItem:css({display:"flex",justifyContent:"flex-start",alignItems:"center"})});var uo="button";function fo(e,o){let l=e,{as:t=uo,icon:r,title:a,className:n}=l,s=c(l,["as","icon","title","className"]),d=Se(),p=bo(e);return g.createElement(Menu.Item,u(m({},s),{ref:o,as:t,className:cx(d.navbarMenuItem,n)}),r?g.createElement(L,{icon:r}):p&&Pe,g.createElement("span",null,a),r&&p?Pe:null)}var Pe=g.createElement(L,{icon:g.createElement(ArrowSquareOutIcon,null)}),bo=e=>e.as==="a"&&e.target==="_blank",q=g.forwardRef(fo);var Y=({ariaLabel:e})=>g.createElement(Menu.Item,null,g.createElement(Flex,{alignItems:"center",gap:i.spacingXs},g.createElement(SkeletonContainer,{svgHeight:16,svgWidth:18},g.createElement(SkeletonImage,{width:16,height:16})),g.createElement(SkeletonContainer,{svgHeight:16,svgWidth:190,ariaLabel:e},g.createElement(SkeletonBodyText,{numberOfLines:1}))));var Ae=()=>({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)}},P(),M()),switcherSpaceName:css({"&:has(> span:last-child:nth-child(3))":{minWidth:"12ch"}}),switcherSpaceNameTruncation:css({flexShrink:1,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"})});function ke({isAlias:e,envVariant:o}){let t=o==="master"?i.green600:i.orange500;return e?g.createElement(EnvironmentAliasIcon,{color:t,size:"tiny"}):g.createElement(EnvironmentIcon,{color:t,size:"tiny"})}function Co(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 wo(e,o){let b=e,{children:t,className:r,envVariant:a,isAlias:n,testId:s="cf-ui-navbar-switcher"}=b,d=c(b,["children","className","envVariant","isAlias","testId"]),p=Ae(),[l,h,v]=typeof t=="string"?Co(t):[];return g.createElement(Button,u(m({},d),{"aria-label":"Space and Environment Navigation",className:cx(p.navbarSwitcher,r),endIcon:a&&g.createElement(ke,{envVariant:a,isAlias:n}),ref:o,testId:s,variant:"transparent"}),g.createElement(Flex,{alignItems:"center",className:p.switcherSpaceName,flexDirection:"row"},l!==void 0?g.createElement(g.Fragment,null,g.createElement("span",null,l),h&&g.createElement("span",{className:p.switcherSpaceNameTruncation},h),v&&g.createElement("span",null,v)):t))}var K=g.forwardRef(wo);var Q=({estimatedWidth:e})=>g.createElement(SkeletonContainer,{svgWidth:e,svgHeight:24,backgroundColor:i.gray300,foregroundColor:i.gray200},g.createElement(SkeletonDisplayText,{lineHeight:24,numberOfLines:1,radiusX:12,radiusY:12}));var Be=()=>({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 Oo="div";function Lo(e,o){let p=e,{as:t=Oo,children:r,className:a,testId:n="cf-ui-navbar-badge"}=p,s=c(p,["as","children","className","testId"]),d=Be();return g.createElement(t,u(m({},s),{ref:o,className:cx(d.navbarBadge,a),"data-test-id":n}),r)}var Le=g.forwardRef(Lo);var f=ue;f.Item=j;f.ItemSkeleton=Z;f.MenuItem=q;f.MenuItemSkeleton=Y;f.MenuDivider=MenuDivider;f.MenuSectionTitle=MenuSectionTitle;f.Switcher=K;f.SwitcherSkeleton=Q;f.Account=X;f.AccountSkeleton=U;f.Badge=Le;
13
+ var Ve=Object.defineProperty,De=Object.defineProperties;var Ge=Object.getOwnPropertyDescriptors;var G=Object.getOwnPropertySymbols;var ie=Object.prototype.hasOwnProperty,se=Object.prototype.propertyIsEnumerable;var ae=(e,o,t)=>o in e?Ve(e,o,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[o]=t,b=(e,o)=>{for(var t in o||(o={}))ie.call(o,t)&&ae(e,t,o[t]);if(G)for(var t of G(o))se.call(o,t)&&ae(e,t,o[t]);return e},v=(e,o)=>De(e,Ge(o));var d=(e,o)=>{var t={};for(var r in e)ie.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&&se.call(e,r)&&(t[r]=e[r]);return t};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)"},A=(e=s.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=(e,o)=>({container:css({justifyContent:"center",backgroundColor:s.gray100,width:"100%"}),logo:css({display:"none",[i.small]:{display:"block",height:"28px",width:"28px"}}),navigation:css({width:"100%",maxWidth:o==="wide"?"1524px":e,padding:`${s.spacingS} ${s.spacingM}`,minHeight:s.spacingL,[i.small]:{padding:`${s.spacingM} ${s.spacingL}`}}),mainNavigation:css({display:"none",[i.small]:{display:"flex"}}),mobileNavigationButton:css({display:"flex",height:"36px",borderRadius:"10px",[i.small]:{display:"none"}}),mobileNavigationIcon:css({heigt:"20px",width:"20px"}),secondaryNavigationWrapper:css({"> *:not(:first-child)":{display:"none",[i.xsmall]:{display:"flex"}}}),account:css({display:"none",[i.xsmall]:{display:"flex"}})});var ue=generateComponentWithVariants({variants:{[IconVariant.Active]:generateIconComponent({path:f.createElement(f.Fragment,null,f.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:s.blue300})),viewBox:"0 0 12 12"}),[IconVariant.Default]:generateIconComponent({path:f.createElement(f.Fragment,null,f.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:s.gray400})),viewBox:"0 0 12 12"})}});var be=generateIconComponent({name:"ContentfulLogoIcon",viewBox:"0 0 28 28",path:f.createElement(f.Fragment,null,f.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"}),f.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"}),f.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"}),f.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"}),f.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,[i.xsmall]:{minWidth:"250px"}})});var L=e=>{let{trigger:o,children:t,testId:r="cf-ui-navbar-menu-list",onOpen:a,onClose:n}=e,m=de();return f.createElement(Menu,{onOpen:a,onClose:n},f.createElement(Menu.Trigger,null,o),f.createElement(Menu.List,{className:m.menuList,testId:r},t))};function Ye(e,o){let w=e,{logo:t,switcher:r,mainNavigation:a,secondaryNavigation:n,account:m,mobileNavigation:p,className:c,contentMaxWidth:u="100%",testId:I="cf-ui-navbar",variant:N="wide"}=w,h=d(w,["logo","switcher","mainNavigation","secondaryNavigation","account","mobileNavigation","className","contentMaxWidth","testId","variant"]),l=me(u,N);return f.createElement(Flex,v(b({},h),{ref:o,testId:I,className:cx(l.container,c),as:"header"}),f.createElement(Flex,{as:"nav",className:l.navigation,justifyContent:"space-between",gap:"spacingXs"},f.createElement(Flex,{alignItems:"center",gap:"spacingL"},t||f.createElement(be,{className:l.logo}),p&&f.createElement(L,{trigger:f.createElement(Button,{className:l.mobileNavigationButton,startIcon:f.createElement(ListIcon,{size:"medium"})},"Menu")},p),a&&f.createElement(Flex,{className:l.mainNavigation,"aria-label":"Main Navigation",gap:"spacingXs"},a)),f.createElement(Flex,{alignItems:"center",gap:"spacingXs"},f.createElement(Flex,{alignItems:"center"},r),f.createElement(Flex,{alignItems:"center",gap:"spacingXs"},n&&f.createElement(Flex,{className:l.secondaryNavigationWrapper,"aria-label":"Secondary Navigation"},n),m&&f.createElement(Flex,{className:l.account,"aria-label":"Account Navigation",gap:"spacingXs"},m)))))}var fe=f.forwardRef(Ye);var Ke={warning:s.colorWarning,negative:s.colorNegative,info:s.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(s.gray300,.15)})},A(),k()),avatar:css({borderRadius:"50%",display:"block",height:"24px",width:"24px"}),notificationIcon:e=>css({position:"absolute",top:0,right:0,height:s.spacingS,width:s.spacingS,borderRadius:"50%",border:`2px solid ${s.gray100}`,backgroundColor:Ke[e],transform:"translate(30%, -30%)"})});function to(e,o){let h=e,{children:t,className:r,testId:a="cf-ui-navbar-account-trigger",avatar:n,initials:m,username:p,hasNotification:c,notificationVariant:u="warning"}=h,I=d(h,["children","className","testId","avatar","initials","username","hasNotification","notificationVariant"]),N=ge();return f.createElement(L,{trigger:f.createElement(Flex,v(b({as:"button"},I),{ref:o,className:cx(N.navbarAccount,r),testId:a,alignItems:"center","aria-label":"Account Menu"}),f.createElement(Avatar,{src:n,initials:m,size:"small",variant:"user"}),c?f.createElement("span",{className:N.notificationIcon(u)}):null)},t)}var q=f.forwardRef(to);function Z({ariaLabel:e}){return f.createElement(SkeletonContainer,{svgWidth:24,svgHeight:24,ariaLabel:e,backgroundColor:s.gray300,foregroundColor:s.gray200},f.createElement(SkeletonImage,{width:24,height:24,radiusX:12,radiusY:12}))}var he=()=>css({backgroundColor:s.blue100,border:`1px solid ${s.blue400}`,color:s.blue600,"&:hover":{backgroundColor:s.blue100}}),xe={display:"flex",justifyContent:"center",padding:`${s.spacing2Xs} ${s.spacingXs}`,alignItems:"center",background:"none",gap:s.spacing2Xs},ye=({title:e})=>({navbarItem:css(xe,{appearance:"none",background:"none",border:"1px solid transparent",margin:0,outline:"none",fontSize:s.fontSizeM,lineHeight:s.lineHeightS,fontWeight:s.fontWeightMedium,position:"relative",textAlign:"left",whiteSpace:"nowrap",cursor:"pointer",hyphens:"auto",textDecoration:"none",color:s.gray800,boxSizing:"border-box",transition:`color ${s.transitionDurationShort} ${s.transitionEasingCubicBezier}`,borderRadius:s.borderRadiusMedium,minWidth:"44px","&:hover":{backgroundColor:hexToRGBA(s.gray900,.05)},"&:hover::before":{opacity:1,scale:"1"},"&:active::before":{backgroundColor:"rgba(255, 255, 255, 0.1)"},"&:disabled":{cursor:"auto"},"& svg":{transition:`fill ${s.transitionDurationShort} ${s.transitionEasingCubicBezier}`},"& > svg, & > span":{zIndex:s.zIndexDefault}},A(),k()),navbarItemMenuTrigger:css({paddingRight:s.spacingXs}),isActive:he(),icon:css({height:"20px",width:"20px",display:e?"none":"block",[i.small]:{height:"16px",width:"16px"},[i.large]:{display:"block"}})}),Ie=()=>({itemSkeleton:css(xe)});var Se=()=>({navbarItemIcon:css({"&:last-child&:not(:only-child)":{marginLeft:s.spacing2Xs},"img&":{borderRadius:s.borderRadiusSmall,maxWidth:s.spacingM,maxHeight:s.spacingM}})});var C=({icon:e,isActive:o,className:t})=>{let p=e.props,{className:r,size:a}=p,n=d(p,["className","size"]),m=Se();return f.cloneElement(e,b({className:cx(r,m.navbarItemIcon,t),size:a||"small",isActive:o},n))};var co="button";function lo(e,o){let ne=e,{as:t=co,icon:r,label:a,title:n,children:m,className:p,isActive:c,testId:u="cf-ui-navbar-item",onOpen:I,onClose:N}=ne,h=d(ne,["as","icon","label","title","children","className","isActive","testId","onOpen","onClose"]),l=ye({title:n}),w=uo(e),re=f.createElement(t,v(b({},h),{ref:o,"data-test-id":u,className:cx(l.navbarItem,w&&l.navbarItemMenuTrigger,c&&l.isActive,p),"aria-label":n?"":a}),r&&f.createElement(C,{className:l.icon,icon:r,isActive:c}),n&&f.createElement("span",null,n),n&&w&&f.createElement(ue,{size:"tiny",isActive:c}));return w?f.createElement(L,{trigger:re,testId:u,onOpen:I,onClose:N},m):re}var uo=e=>!!e.children,Y=f.forwardRef(lo);var J=({estimatedWidth:e})=>{let o=Ie();return f.createElement(SkeletonContainer,{className:o.itemSkeleton,svgWidth:e,svgHeight:32,backgroundColor:s.gray300,foregroundColor:s.gray200},f.createElement(SkeletonText,{lineHeight:6,numberOfLines:1,offsetTop:10,radiusX:s.borderRadiusSmall,radiusY:s.borderRadiusSmall}))};var Me=()=>({navbarMenuItem:css({display:"flex",justifyContent:"flex-start",alignItems:"center"})});var xo="button";function yo(e,o){let u=e,{as:t=xo,icon:r,title:a,className:n}=u,m=d(u,["as","icon","title","className"]),p=Me(),c=Io(e);return f.createElement(Menu.Item,v(b({},m),{ref:o,as:t,className:cx(p.navbarMenuItem,n)}),r?f.createElement(C,{icon:r}):c&&Ce,f.createElement("span",null,a),r&&c?Ce:null)}var Ce=f.createElement(C,{icon:f.createElement(ArrowSquareOutIcon,null)}),Io=e=>e.as==="a"&&e.target==="_blank",K=f.forwardRef(yo);var Q=({ariaLabel:e})=>f.createElement(Menu.Item,null,f.createElement(Flex,{alignItems:"center",gap:s.spacingXs},f.createElement(SkeletonContainer,{svgHeight:16,svgWidth:18},f.createElement(SkeletonImage,{width:16,height:16})),f.createElement(SkeletonContainer,{svgHeight:16,svgWidth:190,ariaLabel:e},f.createElement(SkeletonBodyText,{numberOfLines:1}))));var Ae=()=>({navbarSwitcher:css({color:s.gray600,flexShrink:1,fontWeight:s.fontWeightMedium,maxWidth:"100%",minHeight:"unset",padding:`${s.spacing2Xs} ${s.spacingXs}`,"&:hover":{backgroundColor:hexToRGBA(s.gray900,.05)}},A(),k()),switcherSpaceName:css({"&:has(> span:last-child:nth-child(3))":{minWidth:"12ch"},maxWidth:"15vw",[i.xsmall]:{maxWidth:"50vw"},[i.small]:{maxWidth:"10vw"},[i.medium]:{maxWidth:"50vw"}}),switcherEnvIcon:css({[i.small]:{width:"16px",height:"16px"}}),switcherSpaceNameTruncation:css({flexShrink:1,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"})});function Te({isAlias:e,envVariant:o,className:t}){let r=o==="master"?s.green600:s.orange500;return e?f.createElement(EnvironmentAliasIcon,{color:r,className:t,size:"medium"}):f.createElement(EnvironmentIcon,{color:r,className:t,size:"medium"})}function Oo(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 Wo(e,o){let l=e,{children:t,className:r,envVariant:a,isAlias:n,testId:m="cf-ui-navbar-switcher",ariaLabel:p="Space and Environment Navigation"}=l,c=d(l,["children","className","envVariant","isAlias","testId","ariaLabel"]),u=Ae(),[I,N,h]=typeof t=="string"?Oo(t):[];return f.createElement(Button,v(b({},c),{"aria-label":p,className:cx(u.navbarSwitcher,r),endIcon:a&&f.createElement(Te,{envVariant:a,isAlias:n,className:u.switcherEnvIcon}),ref:o,testId:m,variant:"transparent"}),f.createElement(Flex,{alignItems:"center",className:u.switcherSpaceName,flexDirection:"row"},I!==void 0?f.createElement(f.Fragment,null,f.createElement("span",null,I),N&&f.createElement("span",{className:u.switcherSpaceNameTruncation},N),h&&f.createElement("span",null,h)):t))}var ee=f.forwardRef(Wo);var oe=({estimatedWidth:e})=>f.createElement(SkeletonContainer,{svgWidth:e,svgHeight:24,backgroundColor:s.gray300,foregroundColor:s.gray200},f.createElement(SkeletonDisplayText,{lineHeight:24,numberOfLines:1,radiusX:12,radiusY:12}));var Oe=()=>({navbarBadge:css({display:"flex",justifyContent:"center",alignItems:"center",background:"none",border:`1px solid ${s.purple600}`,margin:0,outline:"none",fontSize:s.fontSizeS,lineHeight:s.lineHeightS,fontWeight:s.fontWeightMedium,textAlign:"center",padding:`0 ${s.spacingXs}`,textDecoration:"none",color:`${s.purple600}!important`,borderRadius:"1.75rem",userSelect:"none"})});var Vo="div";function Do(e,o){let c=e,{as:t=Vo,children:r,className:a,testId:n="cf-ui-navbar-badge"}=c,m=d(c,["as","children","className","testId"]),p=Oe();return f.createElement(t,v(b({},m),{ref:o,className:cx(p.navbarBadge,a),"data-test-id":n}),r)}var _e=f.forwardRef(Do);var He=()=>({navbarMenuItem:css({display:"flex",justifyContent:"flex-start",alignItems:"center",gap:s.spacingXs}),menuList:css({minWidth:0,marginLeft:"-24px",marginTop:"10px",[i.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:m}=e,p=He();return f.createElement(Menu.Submenu,{onOpen:n,onClose:m},f.createElement(Menu.SubmenuTrigger,null,f.createElement(Flex,{className:p.navbarMenuItem},t&&f.createElement(C,{icon:t}),f.createElement("span",null,o))),f.createElement(Menu.List,{className:p.menuList,testId:a},r))};var g=fe;g.Item=Y;g.ItemSkeleton=J;g.MenuItem=K;g.MenuItemSkeleton=Q;g.MenuDivider=MenuDivider;g.MenuSectionTitle=MenuSectionTitle;g.Submenu=Re;g.Switcher=ee;g.SwitcherSkeleton=oe;g.Account=q;g.AccountSkeleton=Z;g.Badge=_e;
14
14
 
15
- export { f as Navbar, ge as getNavbarItemActiveStyles };
15
+ export { g as Navbar, he as getNavbarItemActiveStyles };
16
16
  //# sourceMappingURL=out.js.map
17
17
  //# sourceMappingURL=index.js.map
package/dist/esm/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/CompoundNavbar.ts","../../src/Navbar.tsx","../../src/Navbar.styles.ts","../../src/utils.styles.ts","../../src/icons/CaretIcon.tsx","../../src/icons/ContentfulLogoIcon.tsx","../../src/NavbarAccount/NavbarAccount.tsx","../../src/NavbarAccount/NavbarAccount.styles.ts","../../src/NavbarMenu/NavbarMenu.tsx","../../src/NavbarMenu/NavbarMenu.styles.ts","../../src/NavbarAccount/NavbarAccountSkeleton.tsx","../../src/NavbarItem/NavbarItem.tsx","../../src/NavbarItem/NavbarItem.styles.ts","../../src/NavbarItemIcon/NavbarItemIcon.tsx","../../src/NavbarItemIcon/NavbarItemIcon.styles.ts","../../src/NavbarItem/NavbarItemSkeleton.tsx","../../src/NavbarMenuItem/NavbarMenuItem.tsx","../../src/NavbarMenuItem/NavbarMenuItem.styles.ts","../../src/NavbarMenuItem/NavbarMenuItemSkeleton.tsx","../../src/NavbarSwitcher/NavbarSwitcher.tsx","../../src/NavbarSwitcher/NavbarSwitcher.styles.ts","../../src/NavbarSwitcher/NavbarEnvVariant.tsx","../../src/NavbarSwitcher/NavbarSwitcherSkeleton.tsx","../../src/NavbarBadge/NavbarBadge.tsx","../../src/NavbarBadge/NavbarBadge.styles.ts"],"names":["MenuDivider","MenuSectionTitle","Flex","React","css","tokens","mqs","getGlowOnFocusStyles","shadow","increaseHitArea","minSize","getNavbarStyles","maxWidth","variant","generateComponentWithVariants","generateIconComponent","IconVariant","CaretIcon","ContentfulLogoIcon","cx","_Navbar","props","ref","_a","logo","switcher","mainNavigation","secondaryNavigation","account","className","contentMaxWidth","testId","otherProps","__objRest","styles","__spreadProps","__spreadValues","Navbar","hexToRGBA","notificationVarianColorMap","getNavbarAccountStyles","Menu","getNavbarMenuStyles","NavbarMenu","trigger","children","onOpen","onClose","Avatar","_NavbarAccount","avatar","initials","username","hasNotification","notificationVariant","NavbarAccount","SkeletonContainer","SkeletonImage","NavbarAccountSkeleton","ariaLabel","getNavbarItemActiveStyles","commonItemStyles","getNavbarItemStyles","getNavbarItemSkeletonStyles","getNavbarItemIconStyles","NavbarItemIcon","icon","isActive","size","rest","NAVBAR_ITEM_DEFAULT_TAG","_NavbarItem","Comp","label","title","isMenuTrigger","isNavbarItemHasMenu","item","NavbarItem","SkeletonText","NavbarItemSkeleton","estimatedWidth","getNavbarMenuItemStyles","ArrowSquareOutIcon","NAVBAR_MENU_ITEM_DEFAULT_TAG","_NavbarMenuItem","itemIsExternalLink","isExternalLink","externalIcon","NavbarMenuItem","SkeletonBodyText","NavbarMenuItemSkeleton","getNavbarSwitcherStyles","Button","EnvironmentAliasIcon","EnvironmentIcon","NavbarEnvVariant","isAlias","envVariant","color","splitSpaceName","string","startLength","endLength","start","end","remainder","_NavbarSwitcher","middle","NavbarSwitcher","SkeletonDisplayText","NavbarSwitcherSkeleton","getNavbarBadgeStyles","NAVBAR_BADGE_DEFAULT_TAG","_NavbarBadge","NavbarBadge"],"mappings":"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","sourcesContent":["import { MenuDivider } from '@contentful/f36-menu';\nimport { MenuSectionTitle } from '@contentful/f36-menu';\nimport { Navbar as OriginalNavbar } from './Navbar';\n\nimport { NavbarAccount, NavbarAccountSkeleton } from './NavbarAccount';\nimport { NavbarItem, NavbarItemSkeleton } from './NavbarItem';\nimport { NavbarMenuItem, NavbarMenuItemSkeleton } from './NavbarMenuItem';\nimport { NavbarSwitcher, NavbarSwitcherSkeleton } from './NavbarSwitcher';\nimport { NavbarBadge } from './NavbarBadge/NavbarBadge';\n\ntype CompoundNavbar = typeof OriginalNavbar & {\n Item: typeof NavbarItem;\n ItemSkeleton: typeof NavbarItemSkeleton;\n MenuItem: typeof NavbarMenuItem;\n MenuItemSkeleton: typeof NavbarMenuItemSkeleton;\n MenuDivider: typeof MenuDivider;\n MenuSectionTitle: typeof MenuSectionTitle;\n Switcher: typeof NavbarSwitcher;\n SwitcherSkeleton: typeof NavbarSwitcherSkeleton;\n Account: typeof NavbarAccount;\n AccountSkeleton: typeof NavbarAccountSkeleton;\n Badge: typeof NavbarBadge;\n};\n\nexport const Navbar = OriginalNavbar as CompoundNavbar;\nNavbar.Item = NavbarItem;\nNavbar.ItemSkeleton = NavbarItemSkeleton;\nNavbar.MenuItem = NavbarMenuItem;\nNavbar.MenuItemSkeleton = NavbarMenuItemSkeleton;\nNavbar.MenuDivider = MenuDivider;\nNavbar.MenuSectionTitle = MenuSectionTitle;\nNavbar.Switcher = NavbarSwitcher;\nNavbar.SwitcherSkeleton = NavbarSwitcherSkeleton;\nNavbar.Account = NavbarAccount;\nNavbar.AccountSkeleton = NavbarAccountSkeleton;\nNavbar.Badge = NavbarBadge;\n","import { type CommonProps, type ExpandProps, Flex } from '@contentful/f36-core';\nimport React from 'react';\nimport { getNavbarStyles } from './Navbar.styles';\nimport { ContentfulLogoIcon } from './icons';\nimport { cx } from 'emotion';\n\ntype NavbarOwnProps = CommonProps & {\n /**\n * Accepts a React Component that will be displayed\n * instead of the Contentful Logo\n */\n logo?: React.ReactNode;\n\n /** Environment Switcher component */\n switcher?: React.ReactNode;\n\n /** Main Navigation Elements */\n mainNavigation?: React.ReactNode;\n\n /** Secondary Navigation Elements, displayed in the right side */\n secondaryNavigation?: React.ReactNode;\n\n /** User Account Component */\n account?: React.ReactNode;\n\n /**\n * Defines the max-width of the content inside the navbar.\n * @default '100%'\n */\n contentMaxWidth?: string;\n\n /**\n * Describes the size variation of the Navbar\n * Variant wide will set the contentMaxWidth to 1524px\n */\n variant?: 'wide' | 'fullscreen';\n};\n\n// expose only the HTML props that are needed to not pollute the API\ntype NavbarHTMLElementProps = Pick<React.ComponentPropsWithoutRef<'div'>, 'id'>;\n\nexport type NavbarProps = NavbarHTMLElementProps & NavbarOwnProps;\n\nfunction _Navbar(props: ExpandProps<NavbarProps>, ref: React.Ref<HTMLElement>) {\n const {\n logo,\n switcher,\n mainNavigation,\n secondaryNavigation,\n account,\n className,\n contentMaxWidth = '100%',\n testId = 'cf-ui-navbar',\n variant = 'wide',\n ...otherProps\n } = props;\n const styles = getNavbarStyles(contentMaxWidth, variant);\n\n return (\n <Flex\n {...otherProps}\n ref={ref}\n testId={testId}\n className={cx(styles.container, className)}\n as=\"header\"\n >\n <Flex\n as=\"nav\"\n className={styles.navigation}\n justifyContent=\"space-between\"\n >\n <Flex alignItems=\"center\" gap=\"spacingL\">\n {logo || <ContentfulLogoIcon className={styles.logo} />}\n {mainNavigation && (\n <Flex aria-label=\"Main Navigation\" gap=\"spacingXs\">\n {mainNavigation}\n </Flex>\n )}\n </Flex>\n <Flex alignItems=\"center\" gap=\"spacingXs\">\n {switcher}\n {secondaryNavigation && (\n <Flex aria-label=\"Secondary Navigation\">{secondaryNavigation}</Flex>\n )}\n {account && (\n <Flex aria-label=\"Account Navigation\" gap=\"spacingXs\">\n {account}\n </Flex>\n )}\n </Flex>\n </Flex>\n </Flex>\n );\n}\n\nexport const Navbar = React.forwardRef(_Navbar);\n","import { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\nimport { mqs } from './utils.styles';\n\nexport const getNavbarStyles = (maxWidth: string, variant: string) => ({\n container: css({\n justifyContent: 'center',\n backgroundColor: tokens.gray100,\n width: '100%',\n }),\n logo: css({\n height: '28px',\n width: '28px',\n }),\n navigation: css({\n width: '100%',\n maxWidth: variant === 'wide' ? '1524px' : maxWidth,\n padding: `${tokens.spacingS} ${tokens.spacingM}`,\n minHeight: tokens.spacingL,\n [mqs.medium]: {\n padding: `${tokens.spacingM} ${tokens.spacingL}`,\n },\n }),\n});\n","import tokens from '@contentful/f36-tokens';\nimport type { CSSObject } from '@emotion/serialize';\n\ntype screens = 'medium' | 'large' | 'xlarge';\ntype mediaqueries = Record<screens, string>;\nexport const mqs: mediaqueries = {\n medium: '@media (min-width: 480px)',\n large: '@media (min-width: 768px)',\n xlarge: '@media (min-width: 1920px)',\n};\n\nexport const getGlowOnFocusStyles = (\n shadow: string = tokens.glowPrimary,\n): CSSObject => ({\n '&:focus': {\n boxShadow: shadow,\n },\n '&:focus:not(:focus-visible)': {\n boxShadow: 'unset',\n },\n '&:focus-visible': {\n boxShadow: shadow,\n },\n});\n\nexport const increaseHitArea = (minSize = '44px'): CSSObject => ({\n overflow: 'visible',\n position: 'relative',\n '&:after': {\n minHeight: minSize,\n minWidth: minSize,\n position: 'absolute',\n width: '100%',\n content: '\"\"',\n left: '50%',\n top: '50%',\n transform: 'translate(-50%, -50%)',\n },\n});\n","import React from 'react';\nimport tokens from '@contentful/f36-tokens';\nimport {\n generateComponentWithVariants,\n generateIconComponent,\n IconVariant,\n} from '@contentful/f36-icon';\n\nexport const CaretIcon = generateComponentWithVariants({\n variants: {\n [IconVariant.Active]: generateIconComponent({\n path: (\n <>\n <path\n 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\"\n fill={tokens.blue300}\n />\n </>\n ),\n viewBox: '0 0 12 12',\n }),\n [IconVariant.Default]: generateIconComponent({\n path: (\n <>\n <path\n 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\"\n fill={tokens.gray400}\n />\n </>\n ),\n viewBox: '0 0 12 12',\n }),\n },\n});\n","import React from 'react';\nimport { generateIconComponent } from '@contentful/f36-icon';\n\nexport const ContentfulLogoIcon = /*#__PURE__*/ generateIconComponent({\n name: 'ContentfulLogoIcon',\n viewBox: '0 0 28 28',\n path: (\n <>\n <path\n fill=\"#1773EB\"\n 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\"\n />\n <path\n fill=\"#E44F20\"\n 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\"\n />\n <path\n fill=\"#FFDA00\"\n 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\"\n />\n <path\n fill=\"#1773EB\"\n 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\"\n />\n <path\n fill=\"#E44F20\"\n 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\"\n />\n </>\n ),\n});\n","import React from 'react';\nimport { cx } from 'emotion';\nimport { getNavbarAccountStyles } from './NavbarAccount.styles';\nimport {\n type PropsWithHTMLElement,\n type CommonProps,\n type ExpandProps,\n} from '@contentful/f36-core';\nimport { NavbarMenu } from '../NavbarMenu/NavbarMenu';\nimport { Avatar } from '@contentful/f36-avatar';\nimport { Flex } from '@contentful/f36-core';\n\ntype NavbarAccountOwnProps = CommonProps & {\n children: React.ReactNode;\n username: string;\n avatar?: string;\n initials?: string;\n hasNotification?: boolean;\n /**\n * @default 'warning'\n */\n notificationVariant?: 'warning' | 'negative' | 'info';\n};\n\nexport type NavbarAccountProps = PropsWithHTMLElement<\n NavbarAccountOwnProps,\n 'button'\n>;\n\nfunction _NavbarAccount(\n props: ExpandProps<NavbarAccountProps>,\n ref: React.Ref<HTMLButtonElement>,\n) {\n const {\n children,\n className,\n testId = 'cf-ui-navbar-account-trigger',\n avatar,\n initials,\n username,\n hasNotification,\n notificationVariant = 'warning',\n ...otherProps\n } = props;\n const styles = getNavbarAccountStyles();\n\n return (\n <NavbarMenu\n trigger={\n <Flex\n as=\"button\"\n {...otherProps}\n ref={ref}\n className={cx(styles.navbarAccount, className)}\n testId={testId}\n alignItems=\"center\"\n aria-label=\"Account Menu\"\n >\n <Avatar\n src={avatar}\n initials={initials}\n size=\"small\"\n variant=\"user\"\n />\n {hasNotification ? (\n <span className={styles.notificationIcon(notificationVariant)} />\n ) : null}\n </Flex>\n }\n >\n {children}\n </NavbarMenu>\n );\n}\n\nexport const NavbarAccount = React.forwardRef(_NavbarAccount);\n","import { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\nimport { NavbarAccountProps } from './NavbarAccount';\nimport { getGlowOnFocusStyles, increaseHitArea } from '../utils.styles';\nimport { hexToRGBA } from '@contentful/f36-utils';\n\nconst notificationVarianColorMap: Record<\n NavbarAccountProps['notificationVariant'],\n string\n> = {\n warning: tokens.colorWarning,\n negative: tokens.colorNegative,\n info: tokens.blue500,\n};\n\nexport const getNavbarAccountStyles = () => ({\n navbarAccount: css(\n {\n // default button reset styles\n margin: 0,\n padding: 0,\n border: 0,\n cursor: 'pointer',\n background: 'none',\n position: 'relative',\n outline: 'none',\n overflow: 'visible',\n borderRadius: '50%',\n '&:before': css({\n content: '\"\"',\n display: 'block',\n position: 'absolute',\n height: '24px',\n width: '24px',\n backgroundColor: 'transparent',\n borderRadius: '50%',\n }),\n '&:hover:before': css({\n backgroundColor: hexToRGBA(tokens.gray300, 0.15),\n }),\n },\n getGlowOnFocusStyles(),\n increaseHitArea(),\n ),\n avatar: css({\n borderRadius: '50%',\n display: 'block',\n height: '24px',\n width: '24px',\n }),\n notificationIcon: (variant: NavbarAccountProps['notificationVariant']) =>\n css({\n position: 'absolute',\n top: 0,\n right: 0,\n height: tokens.spacingS,\n width: tokens.spacingS,\n borderRadius: '50%',\n border: `2px solid ${tokens.gray100}`,\n backgroundColor: notificationVarianColorMap[variant],\n transform: 'translate(30%, -30%)',\n }),\n});\n","import React from 'react';\nimport { Menu, type MenuListProps, type MenuProps } from '@contentful/f36-menu';\nimport { getNavbarMenuStyles } from './NavbarMenu.styles';\n\nexport type NavbarMenuProps = {\n trigger: React.ReactNode;\n children?: React.ReactNode;\n} & Pick<MenuListProps, 'testId'> &\n Pick<MenuProps, 'onOpen' | 'onClose'>;\n\nexport const NavbarMenu = (props: NavbarMenuProps) => {\n const {\n trigger,\n children,\n testId = 'cf-ui-navbar-menu-list',\n onOpen,\n onClose,\n } = props;\n const styles = getNavbarMenuStyles();\n\n return (\n <Menu onOpen={onOpen} onClose={onClose}>\n <Menu.Trigger>{trigger}</Menu.Trigger>\n <Menu.List className={styles.menuList} testId={testId}>\n {children}\n </Menu.List>\n </Menu>\n );\n};\n","import { css } from 'emotion';\n\nexport const getNavbarMenuStyles = () => ({\n menuList: css({\n minWidth: '250px',\n }),\n});\n","import React from 'react';\nimport { SkeletonContainer, SkeletonImage } from '@contentful/f36-skeleton';\nimport tokens from '@contentful/f36-tokens';\n\nexport function NavbarAccountSkeleton({ ariaLabel }: { ariaLabel?: string }) {\n return (\n <SkeletonContainer\n svgWidth={24}\n svgHeight={24}\n ariaLabel={ariaLabel}\n backgroundColor={tokens.gray300}\n foregroundColor={tokens.gray200}\n >\n <SkeletonImage width={24} height={24} radiusX={12} radiusY={12} />\n </SkeletonContainer>\n );\n}\n","import React from 'react';\nimport { cx } from 'emotion';\nimport { getNavbarItemStyles } from './NavbarItem.styles';\nimport { NavbarMenu, type NavbarMenuProps } from '../NavbarMenu/NavbarMenu';\nimport {\n NavbarItemIcon,\n type NavbarItemIconProps,\n} from '../NavbarItemIcon/NavbarItemIcon';\nimport { CaretIcon } from '../icons';\nimport type {\n CommonProps,\n ExpandProps,\n PolymorphicComponent,\n PolymorphicProps,\n} from '@contentful/f36-core';\n\nconst NAVBAR_ITEM_DEFAULT_TAG = 'button';\n\ntype NavbarItemTriggerProps = CommonProps & {\n label?: string;\n title?: string;\n icon?: NavbarItemIconProps['icon'];\n isActive?: boolean;\n as?: React.ElementType;\n};\n\ntype NavbarItemAsMenuProps = NavbarItemTriggerProps &\n Pick<NavbarMenuProps, 'onOpen' | 'onClose'> & {\n children: React.ReactNode;\n };\ntype NavbarItemAsItemProps = NavbarItemTriggerProps & {\n children?: never;\n onOpen?: never;\n onClose?: never;\n};\ntype NavbarItemOwnProps = NavbarItemAsItemProps | NavbarItemAsMenuProps;\n\nexport type NavbarItemProps<\n E extends React.ElementType = typeof NAVBAR_ITEM_DEFAULT_TAG,\n> = PolymorphicProps<NavbarItemOwnProps, E>;\n\nfunction _NavbarItem(\n props: NavbarItemProps<React.ElementType>,\n ref: React.Ref<any>,\n) {\n const {\n as: Comp = NAVBAR_ITEM_DEFAULT_TAG,\n icon,\n label,\n title,\n children,\n className,\n isActive,\n testId = 'cf-ui-navbar-item',\n onOpen,\n onClose,\n ...otherProps\n } = props;\n const styles = getNavbarItemStyles();\n const isMenuTrigger = isNavbarItemHasMenu(props);\n const item = (\n <Comp\n {...otherProps}\n ref={ref}\n data-test-id={testId}\n className={cx(\n styles.navbarItem,\n isMenuTrigger && styles.navbarItemMenuTrigger,\n isActive && styles.isActive,\n className,\n )}\n aria-label={title ? '' : label}\n >\n {icon && <NavbarItemIcon icon={icon} isActive={isActive} />}\n {title && <span>{title}</span>}\n {title && isMenuTrigger && <CaretIcon size=\"tiny\" isActive={isActive} />}\n </Comp>\n );\n\n if (isMenuTrigger) {\n return (\n <NavbarMenu\n trigger={item}\n testId={testId}\n onOpen={onOpen}\n onClose={onClose}\n >\n {children}\n </NavbarMenu>\n );\n }\n\n return item;\n}\n\nconst isNavbarItemHasMenu = <E extends React.ElementType>(\n props: NavbarItemProps<E>,\n): props is PolymorphicProps<NavbarItemAsMenuProps, E> =>\n Boolean(props.children);\n\nexport const NavbarItem: PolymorphicComponent<\n ExpandProps<NavbarItemOwnProps>,\n typeof NAVBAR_ITEM_DEFAULT_TAG\n> = React.forwardRef(_NavbarItem);\n","import { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\nimport { hexToRGBA } from '@contentful/f36-utils';\nimport { getGlowOnFocusStyles, increaseHitArea } from '../utils.styles';\n\nexport const getNavbarItemActiveStyles = () =>\n css({\n backgroundColor: tokens.blue100,\n border: `1px solid ${tokens.blue400}`,\n color: tokens.blue600,\n '&:hover': {\n backgroundColor: tokens.blue100,\n },\n });\n\nconst commonItemStyles = {\n display: 'flex',\n justifyContent: 'center',\n padding: `${tokens.spacing2Xs} ${tokens.spacingXs}`,\n alignItems: 'center',\n background: 'none',\n gap: tokens.spacing2Xs,\n};\n\nexport const getNavbarItemStyles = () => ({\n navbarItem: css(\n commonItemStyles,\n {\n appearance: 'none',\n background: 'none',\n border: '1px solid transparent',\n margin: 0,\n outline: 'none',\n fontSize: tokens.fontSizeM,\n lineHeight: tokens.lineHeightS,\n fontWeight: tokens.fontWeightMedium,\n position: 'relative',\n textAlign: 'left',\n whiteSpace: 'nowrap',\n cursor: 'pointer',\n hyphens: 'auto',\n textDecoration: 'none',\n color: tokens.gray800,\n boxSizing: 'border-box',\n transition: `color ${tokens.transitionDurationShort} ${tokens.transitionEasingCubicBezier}`,\n borderRadius: tokens.borderRadiusMedium,\n minWidth: '44px',\n\n '&:hover': {\n backgroundColor: hexToRGBA(tokens.gray900, 0.05),\n },\n\n '&:hover::before': {\n opacity: 1,\n scale: '1',\n },\n\n '&:active::before': {\n backgroundColor: `rgba(255, 255, 255, 0.1)`,\n },\n '&:disabled': {\n cursor: 'auto',\n },\n\n '& svg': {\n transition: `fill ${tokens.transitionDurationShort} ${tokens.transitionEasingCubicBezier}`,\n },\n '& > svg, & > span': {\n zIndex: tokens.zIndexDefault,\n },\n },\n getGlowOnFocusStyles(),\n increaseHitArea(),\n ),\n navbarItemMenuTrigger: css({\n paddingRight: tokens.spacingXs,\n }),\n isActive: getNavbarItemActiveStyles(),\n});\n\nexport const getNavbarItemSkeletonStyles = () => ({\n itemSkeleton: css(commonItemStyles),\n});\n","import React from 'react';\nimport type { IconProps } from '@contentful/f36-icons';\nimport { getNavbarItemIconStyles } from './NavbarItemIcon.styles';\nimport { cx } from 'emotion';\n\nexport type NavbarItemIconProps = {\n icon: React.ReactElement<IconProps>;\n} & Partial<Pick<IconProps, 'isActive'>>;\n\nexport const NavbarItemIcon = ({ icon, isActive }: NavbarItemIconProps) => {\n const { className, size, ...rest } = icon.props;\n const styles = getNavbarItemIconStyles();\n\n return React.cloneElement(icon, {\n className: cx(className, styles.navbarItemIcon),\n size: size || 'small',\n isActive,\n ...rest,\n });\n};\n","import { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\nexport const getNavbarItemIconStyles = () => ({\n navbarItemIcon: css({\n '&:last-child&:not(:only-child)': {\n marginLeft: tokens.spacing2Xs,\n },\n 'img&': {\n borderRadius: tokens.borderRadiusSmall,\n maxWidth: tokens.spacingM,\n maxHeight: tokens.spacingM,\n },\n }),\n});\n","import React from 'react';\nimport { SkeletonContainer, SkeletonText } from '@contentful/f36-skeleton';\nimport tokens from '@contentful/f36-tokens';\nimport { getNavbarItemSkeletonStyles } from './NavbarItem.styles';\n\nexport const NavbarItemSkeleton = ({\n estimatedWidth,\n}: {\n estimatedWidth: number;\n}) => {\n const styles = getNavbarItemSkeletonStyles();\n\n return (\n <SkeletonContainer\n className={styles.itemSkeleton}\n svgWidth={estimatedWidth}\n svgHeight={32}\n backgroundColor={tokens.gray300}\n foregroundColor={tokens.gray200}\n >\n <SkeletonText\n lineHeight={6}\n numberOfLines={1}\n offsetTop={10}\n radiusX={tokens.borderRadiusSmall}\n radiusY={tokens.borderRadiusSmall}\n />\n </SkeletonContainer>\n );\n};\n","import React from 'react';\nimport { cx } from 'emotion';\nimport { getNavbarMenuItemStyles } from './NavbarMenuItem.styles';\nimport { Menu, type MenuItemProps } from '@contentful/f36-menu';\nimport {\n NavbarItemIcon,\n type NavbarItemIconProps,\n} from '../NavbarItemIcon/NavbarItemIcon';\nimport { ArrowSquareOutIcon } from '@contentful/f36-icons';\nimport type {\n ExpandProps,\n PolymorphicComponent,\n PolymorphicProps,\n} from '@contentful/f36-core';\n\nconst NAVBAR_MENU_ITEM_DEFAULT_TAG = 'button';\n\ntype NavbarMenuItemOwnProps = {\n children?: null;\n title: string;\n icon?: NavbarItemIconProps['icon'];\n as?: React.ElementType;\n} & Omit<MenuItemProps, 'children' | 'as'>;\n\nexport type NavbarMenuItemProps<\n E extends React.ElementType = typeof NAVBAR_MENU_ITEM_DEFAULT_TAG,\n> = PolymorphicProps<NavbarMenuItemOwnProps, E>;\n\nfunction _NavbarMenuItem(\n props: NavbarMenuItemProps<React.ElementType>,\n ref: React.Ref<any>,\n) {\n const {\n as: Comp = NAVBAR_MENU_ITEM_DEFAULT_TAG,\n icon,\n title,\n className,\n ...otherProps\n } = props;\n const styles = getNavbarMenuItemStyles();\n\n const itemIsExternalLink = isExternalLink(\n props as unknown as NavbarMenuItemProps<'a'>,\n );\n\n return (\n <Menu.Item\n {...otherProps}\n ref={ref}\n as={Comp as MenuItemProps['as']}\n className={cx(styles.navbarMenuItem, className)}\n >\n {icon ? (\n <NavbarItemIcon icon={icon} />\n ) : (\n itemIsExternalLink && externalIcon\n )}\n <span>{title}</span>\n {icon && itemIsExternalLink ? externalIcon : null}\n </Menu.Item>\n );\n}\n\nconst externalIcon = <NavbarItemIcon icon={<ArrowSquareOutIcon />} />;\n\nconst isExternalLink = (props: NavbarMenuItemProps<'a'>) =>\n props.as === 'a' && props.target === '_blank';\n\nexport const NavbarMenuItem: PolymorphicComponent<\n ExpandProps<NavbarMenuItemOwnProps>,\n typeof NAVBAR_MENU_ITEM_DEFAULT_TAG\n> = React.forwardRef(_NavbarMenuItem);\n","import { css } from 'emotion';\nexport const getNavbarMenuItemStyles = () => ({\n navbarMenuItem: css({\n display: 'flex',\n justifyContent: 'flex-start',\n alignItems: 'center',\n }),\n});\n","import React from 'react';\nimport { Menu } from '@contentful/f36-menu';\nimport {\n SkeletonBodyText,\n SkeletonContainer,\n SkeletonImage,\n} from '@contentful/f36-skeleton';\nimport { Flex } from '@contentful/f36-core';\n\nimport tokens from '@contentful/f36-tokens';\n\nexport const NavbarMenuItemSkeleton = ({\n ariaLabel,\n}: {\n ariaLabel?: string;\n}) => (\n <Menu.Item>\n <Flex alignItems=\"center\" gap={tokens.spacingXs}>\n <SkeletonContainer svgHeight={16} svgWidth={18}>\n <SkeletonImage width={16} height={16} />\n </SkeletonContainer>\n <SkeletonContainer svgHeight={16} svgWidth={190} ariaLabel={ariaLabel}>\n <SkeletonBodyText numberOfLines={1} />\n </SkeletonContainer>\n </Flex>\n </Menu.Item>\n);\n","import React, { type ReactNode } from 'react';\nimport { getNavbarSwitcherStyles } from './NavbarSwitcher.styles';\nimport { Button } from '@contentful/f36-button';\nimport {\n Flex,\n type CommonProps,\n type PropsWithHTMLElement,\n type ExpandProps,\n} from '@contentful/f36-core';\nimport { cx } from 'emotion';\nimport { NavbarEnvVariant } from './NavbarEnvVariant';\n\ntype TruncateOptions = {\n /**\n * Number of characters to keep at the start of the string\n * @default 5\n */\n start?: number;\n /**\n * Number of characters to keep at the end of the string\n * @default 6\n */\n end?: number;\n};\n\nfunction splitSpaceName(\n string: string,\n {\n start: startLength = 5,\n end: endLength = 6,\n }: TruncateOptions | undefined = {},\n) {\n if (string.length <= startLength + endLength) {\n return [string, undefined, undefined];\n }\n\n const start = startLength > 0 ? string.slice(0, startLength) : '';\n const end = endLength > 0 ? string.slice(-endLength) : '';\n const remainder = string.slice(startLength, string.length - endLength);\n\n return [start, remainder, end];\n}\n\ntype NavbarSwitcherOwnProps = CommonProps & {\n children: ReactNode;\n isCircle?: boolean;\n envVariant?: 'master' | 'non-master';\n isAlias?: boolean;\n};\n\nexport type NavbarSwitcherProps = PropsWithHTMLElement<\n NavbarSwitcherOwnProps,\n 'button'\n>;\n\nfunction _NavbarSwitcher(\n props: ExpandProps<NavbarSwitcherProps>,\n ref: React.Ref<HTMLButtonElement>,\n) {\n const {\n children,\n className,\n envVariant,\n isAlias,\n testId = 'cf-ui-navbar-switcher',\n ...otherProps\n } = props;\n const styles = getNavbarSwitcherStyles();\n const [start, middle, end] =\n typeof children === 'string' ? splitSpaceName(children) : [];\n\n return (\n <Button\n {...otherProps}\n aria-label=\"Space and Environment Navigation\"\n className={cx(styles.navbarSwitcher, className)}\n endIcon={\n envVariant && (\n <NavbarEnvVariant envVariant={envVariant} isAlias={isAlias} />\n )\n }\n ref={ref}\n testId={testId}\n variant=\"transparent\"\n >\n <Flex\n alignItems=\"center\"\n className={styles.switcherSpaceName}\n flexDirection=\"row\"\n >\n {start !== undefined ? (\n <>\n <span>{start}</span>\n {middle && (\n <span className={styles.switcherSpaceNameTruncation}>\n {middle}\n </span>\n )}\n {end && <span>{end}</span>}\n </>\n ) : (\n children\n )}\n </Flex>\n </Button>\n );\n}\n\nexport const NavbarSwitcher = React.forwardRef(_NavbarSwitcher);\n","import { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\nimport { hexToRGBA } from '@contentful/f36-utils';\n\nimport { getGlowOnFocusStyles, increaseHitArea } from '../utils.styles';\n\nexport const getNavbarSwitcherStyles = () => ({\n navbarSwitcher: css(\n {\n color: tokens.gray600,\n flexShrink: 1,\n fontWeight: tokens.fontWeightMedium,\n maxWidth: '100%',\n minHeight: 'unset',\n padding: `${tokens.spacing2Xs} ${tokens.spacingXs}`,\n '&:hover': {\n backgroundColor: hexToRGBA(tokens.gray900, 0.05),\n },\n },\n getGlowOnFocusStyles(),\n increaseHitArea(),\n ),\n\n switcherSpaceName: css({\n // Set min-width only when there are three span children\n '&:has(> span:last-child:nth-child(3))': {\n minWidth: '12ch',\n },\n }),\n\n switcherSpaceNameTruncation: css({\n flexShrink: 1,\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n }),\n});\n","import React from 'react';\nimport { NavbarSwitcherProps } from '../NavbarSwitcher/NavbarSwitcher';\nimport { EnvironmentAliasIcon, EnvironmentIcon } from '@contentful/f36-icons';\nimport tokens from '@contentful/f36-tokens';\n\nexport type NavbarEnvVariantProps = Pick<\n NavbarSwitcherProps,\n 'isAlias' | 'envVariant'\n>;\n\nexport function NavbarEnvVariant({\n isAlias,\n envVariant,\n}: NavbarEnvVariantProps) {\n const color = envVariant === 'master' ? tokens.green600 : tokens.orange500;\n\n return isAlias ? (\n <EnvironmentAliasIcon color={color} size=\"tiny\" />\n ) : (\n <EnvironmentIcon color={color} size=\"tiny\" />\n );\n}\n","import React from 'react';\nimport {\n SkeletonContainer,\n SkeletonDisplayText,\n} from '@contentful/f36-skeleton';\nimport tokens from '@contentful/f36-tokens';\n\nexport const NavbarSwitcherSkeleton = ({\n estimatedWidth,\n}: {\n estimatedWidth: number;\n}) => (\n <SkeletonContainer\n svgWidth={estimatedWidth}\n svgHeight={24}\n backgroundColor={tokens.gray300}\n foregroundColor={tokens.gray200}\n >\n <SkeletonDisplayText\n lineHeight={24}\n numberOfLines={1}\n radiusX={12}\n radiusY={12}\n />\n </SkeletonContainer>\n);\n","import React from 'react';\nimport { cx } from 'emotion';\nimport { getNavbarBadgeStyles } from './NavbarBadge.styles';\nimport type {\n CommonProps,\n ExpandProps,\n PolymorphicComponent,\n PolymorphicProps,\n} from '@contentful/f36-core';\n\nconst NAVBAR_BADGE_DEFAULT_TAG = 'div';\n\ntype NavbarBadgeOwnProps = CommonProps & {\n children?: React.ReactNode;\n as?: React.ElementType;\n};\n\nexport type NavbarBadgeProps<\n E extends React.ElementType = typeof NAVBAR_BADGE_DEFAULT_TAG,\n> = PolymorphicProps<NavbarBadgeOwnProps, E>;\n\nfunction _NavbarBadge(\n props: NavbarBadgeProps<React.ElementType>,\n ref: React.Ref<any>,\n) {\n const {\n as: Comp = NAVBAR_BADGE_DEFAULT_TAG,\n children,\n className,\n testId = 'cf-ui-navbar-badge',\n ...otherProps\n } = props;\n const styles = getNavbarBadgeStyles();\n\n return (\n <Comp\n {...otherProps}\n ref={ref}\n className={cx(styles.navbarBadge, className)}\n data-test-id={testId}\n >\n {children}\n </Comp>\n );\n}\n\nexport const NavbarBadge: PolymorphicComponent<\n ExpandProps<NavbarBadgeOwnProps>,\n typeof NAVBAR_BADGE_DEFAULT_TAG\n> = React.forwardRef(_NavbarBadge);\n","import { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\nexport const getNavbarBadgeStyles = () => ({\n navbarBadge: css({\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n background: 'none',\n border: `1px solid ${tokens.purple600}`,\n margin: 0,\n outline: 'none',\n fontSize: tokens.fontSizeS,\n lineHeight: tokens.lineHeightS,\n fontWeight: tokens.fontWeightMedium,\n textAlign: 'center',\n padding: `0 ${tokens.spacingXs}`,\n textDecoration: 'none',\n color: `${tokens.purple600}!important`,\n borderRadius: '1.75rem',\n userSelect: 'none',\n }),\n});\n"]}
1
+ {"version":3,"sources":["../../src/CompoundNavbar.ts","../../src/Navbar.tsx","../../src/Navbar.styles.ts","../../src/utils.styles.ts","../../src/icons/CaretIcon.tsx","../../src/icons/ContentfulLogoIcon.tsx","../../src/NavbarMenu/NavbarMenu.tsx","../../src/NavbarMenu/NavbarMenu.styles.ts","../../src/NavbarAccount/NavbarAccount.tsx","../../src/NavbarAccount/NavbarAccount.styles.ts","../../src/NavbarAccount/NavbarAccountSkeleton.tsx","../../src/NavbarItem/NavbarItem.tsx","../../src/NavbarItem/NavbarItem.styles.ts","../../src/NavbarItemIcon/NavbarItemIcon.tsx","../../src/NavbarItemIcon/NavbarItemIcon.styles.ts","../../src/NavbarItem/NavbarItemSkeleton.tsx","../../src/NavbarMenuItem/NavbarMenuItem.tsx","../../src/NavbarMenuItem/NavbarMenuItem.styles.ts","../../src/NavbarMenuItem/NavbarMenuItemSkeleton.tsx","../../src/NavbarSwitcher/NavbarSwitcher.tsx","../../src/NavbarSwitcher/NavbarSwitcher.styles.ts","../../src/NavbarSwitcher/NavbarEnvVariant.tsx","../../src/NavbarSwitcher/NavbarSwitcherSkeleton.tsx","../../src/NavbarBadge/NavbarBadge.tsx","../../src/NavbarBadge/NavbarBadge.styles.ts","../../src/NavbarSubmenu/NavbarSubmenu.tsx","../../src/NavbarSubmenu/NavbarMenu.styles.ts"],"names":["MenuDivider","MenuSectionTitle","Flex","React","css","tokens","mqs","getGlowOnFocusStyles","shadow","increaseHitArea","minSize","getNavbarStyles","maxWidth","variant","generateComponentWithVariants","generateIconComponent","IconVariant","CaretIcon","ContentfulLogoIcon","cx","Button","ListIcon","Menu","getNavbarMenuStyles","NavbarMenu","props","trigger","children","testId","onOpen","onClose","styles","_Navbar","ref","_a","logo","switcher","mainNavigation","secondaryNavigation","account","mobileNavigation","className","contentMaxWidth","otherProps","__objRest","__spreadProps","__spreadValues","Navbar","hexToRGBA","notificationVarianColorMap","getNavbarAccountStyles","Avatar","_NavbarAccount","avatar","initials","username","hasNotification","notificationVariant","NavbarAccount","SkeletonContainer","SkeletonImage","NavbarAccountSkeleton","ariaLabel","getNavbarItemActiveStyles","commonItemStyles","getNavbarItemStyles","title","getNavbarItemSkeletonStyles","getNavbarItemIconStyles","NavbarItemIcon","icon","isActive","iconClassName","size","rest","NAVBAR_ITEM_DEFAULT_TAG","_NavbarItem","Comp","label","isMenuTrigger","isNavbarItemHasMenu","item","NavbarItem","SkeletonText","NavbarItemSkeleton","estimatedWidth","getNavbarMenuItemStyles","ArrowSquareOutIcon","NAVBAR_MENU_ITEM_DEFAULT_TAG","_NavbarMenuItem","itemIsExternalLink","isExternalLink","externalIcon","NavbarMenuItem","SkeletonBodyText","NavbarMenuItemSkeleton","getNavbarSwitcherStyles","EnvironmentAliasIcon","EnvironmentIcon","NavbarEnvVariant","isAlias","envVariant","color","splitSpaceName","string","startLength","endLength","start","end","remainder","_NavbarSwitcher","middle","NavbarSwitcher","SkeletonDisplayText","NavbarSwitcherSkeleton","getNavbarBadgeStyles","NAVBAR_BADGE_DEFAULT_TAG","_NavbarBadge","NavbarBadge","getNavbarSubmenuStyles","NavbarSubmenu"],"mappings":"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","sourcesContent":["import { MenuDivider } from '@contentful/f36-menu';\nimport { MenuSectionTitle } from '@contentful/f36-menu';\nimport { Navbar as OriginalNavbar } from './Navbar';\n\nimport { NavbarAccount, NavbarAccountSkeleton } from './NavbarAccount';\nimport { NavbarItem, NavbarItemSkeleton } from './NavbarItem';\nimport { NavbarMenuItem, NavbarMenuItemSkeleton } from './NavbarMenuItem';\nimport { NavbarSwitcher, NavbarSwitcherSkeleton } from './NavbarSwitcher';\nimport { NavbarBadge } from './NavbarBadge/NavbarBadge';\nimport { NavbarSubmenu } from './NavbarSubmenu/NavbarSubmenu';\n\ntype CompoundNavbar = typeof OriginalNavbar & {\n Item: typeof NavbarItem;\n ItemSkeleton: typeof NavbarItemSkeleton;\n MenuItem: typeof NavbarMenuItem;\n MenuItemSkeleton: typeof NavbarMenuItemSkeleton;\n MenuDivider: typeof MenuDivider;\n MenuSectionTitle: typeof MenuSectionTitle;\n Submenu: typeof NavbarSubmenu;\n Switcher: typeof NavbarSwitcher;\n SwitcherSkeleton: typeof NavbarSwitcherSkeleton;\n Account: typeof NavbarAccount;\n AccountSkeleton: typeof NavbarAccountSkeleton;\n Badge: typeof NavbarBadge;\n};\n\nexport const Navbar = OriginalNavbar as CompoundNavbar;\nNavbar.Item = NavbarItem;\nNavbar.ItemSkeleton = NavbarItemSkeleton;\nNavbar.MenuItem = NavbarMenuItem;\nNavbar.MenuItemSkeleton = NavbarMenuItemSkeleton;\nNavbar.MenuDivider = MenuDivider;\nNavbar.MenuSectionTitle = MenuSectionTitle;\nNavbar.Submenu = NavbarSubmenu;\nNavbar.Switcher = NavbarSwitcher;\nNavbar.SwitcherSkeleton = NavbarSwitcherSkeleton;\nNavbar.Account = NavbarAccount;\nNavbar.AccountSkeleton = NavbarAccountSkeleton;\nNavbar.Badge = NavbarBadge;\n","import { type CommonProps, type ExpandProps, Flex } from '@contentful/f36-core';\nimport React from 'react';\nimport { getNavbarStyles } from './Navbar.styles';\nimport { ContentfulLogoIcon } from './icons';\nimport { cx } from 'emotion';\nimport { Button } from '@contentful/f36-button';\nimport { ListIcon } from '@contentful/f36-icons';\nimport { NavbarMenu } from './NavbarMenu/NavbarMenu';\n\ntype NavbarOwnProps = CommonProps & {\n /**\n * Accepts a React Component that will be displayed\n * instead of the Contentful Logo\n */\n logo?: React.ReactNode;\n\n /** Environment Switcher component */\n switcher?: React.ReactNode;\n\n /** Main Navigation Elements */\n mainNavigation?: React.ReactNode;\n\n /** Secondary Navigation Elements, displayed in the right side */\n secondaryNavigation?: React.ReactNode;\n\n /** User Account Component */\n account?: React.ReactNode;\n\n /** Navigation displayed on mobile versions */\n mobileNavigation?: React.ReactNode;\n\n /**\n * Defines the max-width of the content inside the navbar.\n * @default '100%'\n */\n contentMaxWidth?: string;\n\n /**\n * Describes the size variation of the Navbar\n * Variant wide will set the contentMaxWidth to 1524px\n */\n variant?: 'wide' | 'fullscreen';\n};\n\n// expose only the HTML props that are needed to not pollute the API\ntype NavbarHTMLElementProps = Pick<React.ComponentPropsWithoutRef<'div'>, 'id'>;\n\nexport type NavbarProps = NavbarHTMLElementProps & NavbarOwnProps;\n\nfunction _Navbar(props: ExpandProps<NavbarProps>, ref: React.Ref<HTMLElement>) {\n const {\n logo,\n switcher,\n mainNavigation,\n secondaryNavigation,\n account,\n mobileNavigation,\n className,\n contentMaxWidth = '100%',\n testId = 'cf-ui-navbar',\n variant = 'wide',\n ...otherProps\n } = props;\n const styles = getNavbarStyles(contentMaxWidth, variant);\n\n return (\n <Flex\n {...otherProps}\n ref={ref}\n testId={testId}\n className={cx(styles.container, className)}\n as=\"header\"\n >\n <Flex\n as=\"nav\"\n className={styles.navigation}\n justifyContent=\"space-between\"\n gap=\"spacingXs\"\n >\n <Flex alignItems=\"center\" gap=\"spacingL\">\n {logo || <ContentfulLogoIcon className={styles.logo} />}\n {mobileNavigation && (\n <NavbarMenu\n trigger={\n <Button\n className={styles.mobileNavigationButton}\n startIcon={<ListIcon size=\"medium\" />}\n >\n Menu\n </Button>\n }\n >\n {mobileNavigation}\n </NavbarMenu>\n )}\n {mainNavigation && (\n <Flex\n className={styles.mainNavigation}\n aria-label=\"Main Navigation\"\n gap=\"spacingXs\"\n >\n {mainNavigation}\n </Flex>\n )}\n </Flex>\n <Flex alignItems=\"center\" gap=\"spacingXs\">\n <Flex alignItems=\"center\">{switcher}</Flex>\n <Flex alignItems=\"center\" gap=\"spacingXs\">\n {secondaryNavigation && (\n <Flex\n className={styles.secondaryNavigationWrapper}\n aria-label=\"Secondary Navigation\"\n >\n {secondaryNavigation}\n </Flex>\n )}\n {account && (\n <Flex\n className={styles.account}\n aria-label=\"Account Navigation\"\n gap=\"spacingXs\"\n >\n {account}\n </Flex>\n )}\n </Flex>\n </Flex>\n </Flex>\n </Flex>\n );\n}\n\nexport const Navbar = React.forwardRef(_Navbar);\n","import { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\nimport { mqs } from './utils.styles';\n\nexport const getNavbarStyles = (maxWidth: string, variant: string) => ({\n container: css({\n justifyContent: 'center',\n backgroundColor: tokens.gray100,\n width: '100%',\n }),\n logo: css({\n display: 'none',\n [mqs.small]: {\n display: 'block',\n height: '28px',\n width: '28px',\n },\n }),\n\n navigation: css({\n width: '100%',\n maxWidth: variant === 'wide' ? '1524px' : maxWidth,\n padding: `${tokens.spacingS} ${tokens.spacingM}`,\n minHeight: tokens.spacingL,\n [mqs.small]: {\n padding: `${tokens.spacingM} ${tokens.spacingL}`,\n },\n }),\n\n mainNavigation: css({\n display: 'none',\n [mqs.small]: {\n display: 'flex',\n },\n }),\n\n mobileNavigationButton: css({\n display: 'flex',\n height: '36px',\n borderRadius: '10px',\n [mqs.small]: {\n display: 'none',\n },\n }),\n mobileNavigationIcon: css({\n heigt: '20px',\n width: '20px',\n }),\n\n secondaryNavigationWrapper: css({\n '> *:not(:first-child)': {\n display: 'none',\n [mqs.xsmall]: {\n display: 'flex',\n },\n },\n }),\n\n account: css({\n display: 'none',\n [mqs.xsmall]: {\n display: 'flex',\n },\n }),\n});\n","import tokens from '@contentful/f36-tokens';\nimport type { CSSObject } from '@emotion/serialize';\n\ntype screens = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';\ntype mediaqueries = Record<screens, string>;\nexport const mqs: mediaqueries = {\n xsmall: '@media (min-width: 576px)',\n small: '@media (min-width: 867px)',\n medium: '@media (min-width: 1024px)',\n large: '@media (min-width: 1200px)',\n xlarge: '@media (min-width: 1920px)',\n};\n\nexport const getGlowOnFocusStyles = (\n shadow: string = tokens.glowPrimary,\n): CSSObject => ({\n '&:focus': {\n boxShadow: shadow,\n },\n '&:focus:not(:focus-visible)': {\n boxShadow: 'unset',\n },\n '&:focus-visible': {\n boxShadow: shadow,\n },\n});\n\nexport const increaseHitArea = (minSize = '44px'): CSSObject => ({\n overflow: 'visible',\n position: 'relative',\n '&:after': {\n minHeight: minSize,\n minWidth: minSize,\n position: 'absolute',\n width: '100%',\n content: '\"\"',\n left: '50%',\n top: '50%',\n transform: 'translate(-50%, -50%)',\n },\n});\n","import React from 'react';\nimport tokens from '@contentful/f36-tokens';\nimport {\n generateComponentWithVariants,\n generateIconComponent,\n IconVariant,\n} from '@contentful/f36-icon';\n\nexport const CaretIcon = generateComponentWithVariants({\n variants: {\n [IconVariant.Active]: generateIconComponent({\n path: (\n <>\n <path\n 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\"\n fill={tokens.blue300}\n />\n </>\n ),\n viewBox: '0 0 12 12',\n }),\n [IconVariant.Default]: generateIconComponent({\n path: (\n <>\n <path\n 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\"\n fill={tokens.gray400}\n />\n </>\n ),\n viewBox: '0 0 12 12',\n }),\n },\n});\n","import React from 'react';\nimport { generateIconComponent } from '@contentful/f36-icon';\n\nexport const ContentfulLogoIcon = /*#__PURE__*/ generateIconComponent({\n name: 'ContentfulLogoIcon',\n viewBox: '0 0 28 28',\n path: (\n <>\n <path\n fill=\"#1773EB\"\n 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\"\n />\n <path\n fill=\"#E44F20\"\n 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\"\n />\n <path\n fill=\"#FFDA00\"\n 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\"\n />\n <path\n fill=\"#1773EB\"\n 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\"\n />\n <path\n fill=\"#E44F20\"\n 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\"\n />\n </>\n ),\n});\n","import React from 'react';\nimport { Menu, type MenuListProps, type MenuProps } from '@contentful/f36-menu';\nimport { getNavbarMenuStyles } from './NavbarMenu.styles';\n\nexport type NavbarMenuProps = {\n trigger: React.ReactNode;\n children?: React.ReactNode;\n} & Pick<MenuListProps, 'testId'> &\n Pick<MenuProps, 'onOpen' | 'onClose'>;\n\nexport const NavbarMenu = (props: NavbarMenuProps) => {\n const {\n trigger,\n children,\n testId = 'cf-ui-navbar-menu-list',\n onOpen,\n onClose,\n } = props;\n const styles = getNavbarMenuStyles();\n\n return (\n <Menu onOpen={onOpen} onClose={onClose}>\n <Menu.Trigger>{trigger}</Menu.Trigger>\n <Menu.List className={styles.menuList} testId={testId}>\n {children}\n </Menu.List>\n </Menu>\n );\n};\n","import { css } from 'emotion';\nimport { mqs } from '../utils.styles';\n\nexport const getNavbarMenuStyles = () => ({\n menuList: css({\n minWidth: 0,\n [mqs.xsmall]: {\n minWidth: '250px',\n },\n }),\n});\n","import React from 'react';\nimport { cx } from 'emotion';\nimport { getNavbarAccountStyles } from './NavbarAccount.styles';\nimport {\n type PropsWithHTMLElement,\n type CommonProps,\n type ExpandProps,\n} from '@contentful/f36-core';\nimport { NavbarMenu } from '../NavbarMenu/NavbarMenu';\nimport { Avatar } from '@contentful/f36-avatar';\nimport { Flex } from '@contentful/f36-core';\n\ntype NavbarAccountOwnProps = CommonProps & {\n children: React.ReactNode;\n username: string;\n avatar?: string;\n initials?: string;\n hasNotification?: boolean;\n /**\n * @default 'warning'\n */\n notificationVariant?: 'warning' | 'negative' | 'info';\n};\n\nexport type NavbarAccountProps = PropsWithHTMLElement<\n NavbarAccountOwnProps,\n 'button'\n>;\n\nfunction _NavbarAccount(\n props: ExpandProps<NavbarAccountProps>,\n ref: React.Ref<HTMLButtonElement>,\n) {\n const {\n children,\n className,\n testId = 'cf-ui-navbar-account-trigger',\n avatar,\n initials,\n username,\n hasNotification,\n notificationVariant = 'warning',\n ...otherProps\n } = props;\n const styles = getNavbarAccountStyles();\n\n return (\n <NavbarMenu\n trigger={\n <Flex\n as=\"button\"\n {...otherProps}\n ref={ref}\n className={cx(styles.navbarAccount, className)}\n testId={testId}\n alignItems=\"center\"\n aria-label=\"Account Menu\"\n >\n <Avatar\n src={avatar}\n initials={initials}\n size=\"small\"\n variant=\"user\"\n />\n {hasNotification ? (\n <span className={styles.notificationIcon(notificationVariant)} />\n ) : null}\n </Flex>\n }\n >\n {children}\n </NavbarMenu>\n );\n}\n\nexport const NavbarAccount = React.forwardRef(_NavbarAccount);\n","import { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\nimport { NavbarAccountProps } from './NavbarAccount';\nimport { getGlowOnFocusStyles, increaseHitArea } from '../utils.styles';\nimport { hexToRGBA } from '@contentful/f36-utils';\n\nconst notificationVarianColorMap: Record<\n NavbarAccountProps['notificationVariant'],\n string\n> = {\n warning: tokens.colorWarning,\n negative: tokens.colorNegative,\n info: tokens.blue500,\n};\n\nexport const getNavbarAccountStyles = () => ({\n navbarAccount: css(\n {\n // default button reset styles\n margin: 0,\n padding: 0,\n border: 0,\n cursor: 'pointer',\n background: 'none',\n position: 'relative',\n outline: 'none',\n overflow: 'visible',\n borderRadius: '50%',\n '&:before': css({\n content: '\"\"',\n display: 'block',\n position: 'absolute',\n height: '24px',\n width: '24px',\n backgroundColor: 'transparent',\n borderRadius: '50%',\n }),\n '&:hover:before': css({\n backgroundColor: hexToRGBA(tokens.gray300, 0.15),\n }),\n },\n getGlowOnFocusStyles(),\n increaseHitArea(),\n ),\n avatar: css({\n borderRadius: '50%',\n display: 'block',\n height: '24px',\n width: '24px',\n }),\n notificationIcon: (variant: NavbarAccountProps['notificationVariant']) =>\n css({\n position: 'absolute',\n top: 0,\n right: 0,\n height: tokens.spacingS,\n width: tokens.spacingS,\n borderRadius: '50%',\n border: `2px solid ${tokens.gray100}`,\n backgroundColor: notificationVarianColorMap[variant],\n transform: 'translate(30%, -30%)',\n }),\n});\n","import React from 'react';\nimport { SkeletonContainer, SkeletonImage } from '@contentful/f36-skeleton';\nimport tokens from '@contentful/f36-tokens';\n\nexport function NavbarAccountSkeleton({ ariaLabel }: { ariaLabel?: string }) {\n return (\n <SkeletonContainer\n svgWidth={24}\n svgHeight={24}\n ariaLabel={ariaLabel}\n backgroundColor={tokens.gray300}\n foregroundColor={tokens.gray200}\n >\n <SkeletonImage width={24} height={24} radiusX={12} radiusY={12} />\n </SkeletonContainer>\n );\n}\n","import React from 'react';\nimport { cx } from 'emotion';\nimport { getNavbarItemStyles } from './NavbarItem.styles';\nimport { NavbarMenu, type NavbarMenuProps } from '../NavbarMenu/NavbarMenu';\nimport {\n NavbarItemIcon,\n type NavbarItemIconProps,\n} from '../NavbarItemIcon/NavbarItemIcon';\nimport { CaretIcon } from '../icons';\nimport type {\n CommonProps,\n ExpandProps,\n PolymorphicComponent,\n PolymorphicProps,\n} from '@contentful/f36-core';\n\nconst NAVBAR_ITEM_DEFAULT_TAG = 'button';\n\ntype NavbarItemTriggerProps = CommonProps & {\n label?: string;\n title?: string;\n icon?: NavbarItemIconProps['icon'];\n isActive?: boolean;\n as?: React.ElementType;\n};\n\ntype NavbarItemAsMenuProps = NavbarItemTriggerProps &\n Pick<NavbarMenuProps, 'onOpen' | 'onClose'> & {\n children: React.ReactNode;\n };\ntype NavbarItemAsItemProps = NavbarItemTriggerProps & {\n children?: never;\n onOpen?: never;\n onClose?: never;\n};\ntype NavbarItemOwnProps = NavbarItemAsItemProps | NavbarItemAsMenuProps;\n\nexport type NavbarItemProps<\n E extends React.ElementType = typeof NAVBAR_ITEM_DEFAULT_TAG,\n> = PolymorphicProps<NavbarItemOwnProps, E>;\n\nfunction _NavbarItem(\n props: NavbarItemProps<React.ElementType>,\n ref: React.Ref<any>,\n) {\n const {\n as: Comp = NAVBAR_ITEM_DEFAULT_TAG,\n icon,\n label,\n title,\n children,\n className,\n isActive,\n testId = 'cf-ui-navbar-item',\n onOpen,\n onClose,\n ...otherProps\n } = props;\n const styles = getNavbarItemStyles({ title });\n const isMenuTrigger = isNavbarItemHasMenu(props);\n const item = (\n <Comp\n {...otherProps}\n ref={ref}\n data-test-id={testId}\n className={cx(\n styles.navbarItem,\n isMenuTrigger && styles.navbarItemMenuTrigger,\n isActive && styles.isActive,\n className,\n )}\n aria-label={title ? '' : label}\n >\n {icon && (\n <NavbarItemIcon\n className={styles.icon}\n icon={icon}\n isActive={isActive}\n />\n )}\n {title && <span>{title}</span>}\n {title && isMenuTrigger && <CaretIcon size=\"tiny\" isActive={isActive} />}\n </Comp>\n );\n\n if (isMenuTrigger) {\n return (\n <NavbarMenu\n trigger={item}\n testId={testId}\n onOpen={onOpen}\n onClose={onClose}\n >\n {children}\n </NavbarMenu>\n );\n }\n\n return item;\n}\n\nconst isNavbarItemHasMenu = <E extends React.ElementType>(\n props: NavbarItemProps<E>,\n): props is PolymorphicProps<NavbarItemAsMenuProps, E> =>\n Boolean(props.children);\n\nexport const NavbarItem: PolymorphicComponent<\n ExpandProps<NavbarItemOwnProps>,\n typeof NAVBAR_ITEM_DEFAULT_TAG\n> = React.forwardRef(_NavbarItem);\n","import { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\nimport { hexToRGBA } from '@contentful/f36-utils';\nimport { getGlowOnFocusStyles, increaseHitArea, mqs } from '../utils.styles';\n\nexport const getNavbarItemActiveStyles = () =>\n css({\n backgroundColor: tokens.blue100,\n border: `1px solid ${tokens.blue400}`,\n color: tokens.blue600,\n '&:hover': {\n backgroundColor: tokens.blue100,\n },\n });\n\nconst commonItemStyles = {\n display: 'flex',\n justifyContent: 'center',\n padding: `${tokens.spacing2Xs} ${tokens.spacingXs}`,\n alignItems: 'center',\n background: 'none',\n gap: tokens.spacing2Xs,\n};\n\nexport const getNavbarItemStyles = ({ title }) => ({\n navbarItem: css(\n commonItemStyles,\n {\n appearance: 'none',\n background: 'none',\n border: '1px solid transparent',\n margin: 0,\n outline: 'none',\n fontSize: tokens.fontSizeM,\n lineHeight: tokens.lineHeightS,\n fontWeight: tokens.fontWeightMedium,\n position: 'relative',\n textAlign: 'left',\n whiteSpace: 'nowrap',\n cursor: 'pointer',\n hyphens: 'auto',\n textDecoration: 'none',\n color: tokens.gray800,\n boxSizing: 'border-box',\n transition: `color ${tokens.transitionDurationShort} ${tokens.transitionEasingCubicBezier}`,\n borderRadius: tokens.borderRadiusMedium,\n minWidth: '44px',\n\n '&:hover': {\n backgroundColor: hexToRGBA(tokens.gray900, 0.05),\n },\n\n '&:hover::before': {\n opacity: 1,\n scale: '1',\n },\n\n '&:active::before': {\n backgroundColor: `rgba(255, 255, 255, 0.1)`,\n },\n '&:disabled': {\n cursor: 'auto',\n },\n\n '& svg': {\n transition: `fill ${tokens.transitionDurationShort} ${tokens.transitionEasingCubicBezier}`,\n },\n '& > svg, & > span': {\n zIndex: tokens.zIndexDefault,\n },\n },\n getGlowOnFocusStyles(),\n increaseHitArea(),\n ),\n navbarItemMenuTrigger: css({\n paddingRight: tokens.spacingXs,\n }),\n isActive: getNavbarItemActiveStyles(),\n icon: css({\n height: '20px',\n width: '20px',\n display: !title ? 'block' : 'none',\n [mqs.small]: {\n height: '16px',\n width: '16px',\n },\n [mqs.large]: {\n display: 'block',\n },\n }),\n});\n\nexport const getNavbarItemSkeletonStyles = () => ({\n itemSkeleton: css(commonItemStyles),\n});\n","import React from 'react';\nimport type { IconProps } from '@contentful/f36-icons';\nimport { getNavbarItemIconStyles } from './NavbarItemIcon.styles';\nimport { cx } from 'emotion';\n\nexport type NavbarItemIconProps = {\n icon: React.ReactElement<IconProps>;\n className?: string;\n} & Partial<Pick<IconProps, 'isActive'>>;\n\nexport const NavbarItemIcon = ({\n icon,\n isActive,\n className,\n}: NavbarItemIconProps) => {\n const { className: iconClassName, size, ...rest } = icon.props;\n const styles = getNavbarItemIconStyles();\n\n return React.cloneElement(icon, {\n className: cx(iconClassName, styles.navbarItemIcon, className),\n size: size || 'small',\n isActive,\n ...rest,\n });\n};\n","import { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\nexport const getNavbarItemIconStyles = () => ({\n navbarItemIcon: css({\n '&:last-child&:not(:only-child)': {\n marginLeft: tokens.spacing2Xs,\n },\n 'img&': {\n borderRadius: tokens.borderRadiusSmall,\n maxWidth: tokens.spacingM,\n maxHeight: tokens.spacingM,\n },\n }),\n});\n","import React from 'react';\nimport { SkeletonContainer, SkeletonText } from '@contentful/f36-skeleton';\nimport tokens from '@contentful/f36-tokens';\nimport { getNavbarItemSkeletonStyles } from './NavbarItem.styles';\n\nexport const NavbarItemSkeleton = ({\n estimatedWidth,\n}: {\n estimatedWidth: number;\n}) => {\n const styles = getNavbarItemSkeletonStyles();\n\n return (\n <SkeletonContainer\n className={styles.itemSkeleton}\n svgWidth={estimatedWidth}\n svgHeight={32}\n backgroundColor={tokens.gray300}\n foregroundColor={tokens.gray200}\n >\n <SkeletonText\n lineHeight={6}\n numberOfLines={1}\n offsetTop={10}\n radiusX={tokens.borderRadiusSmall}\n radiusY={tokens.borderRadiusSmall}\n />\n </SkeletonContainer>\n );\n};\n","import React from 'react';\nimport { cx } from 'emotion';\nimport { getNavbarMenuItemStyles } from './NavbarMenuItem.styles';\nimport { Menu, type MenuItemProps } from '@contentful/f36-menu';\nimport {\n NavbarItemIcon,\n type NavbarItemIconProps,\n} from '../NavbarItemIcon/NavbarItemIcon';\nimport { ArrowSquareOutIcon } from '@contentful/f36-icons';\nimport type {\n ExpandProps,\n PolymorphicComponent,\n PolymorphicProps,\n} from '@contentful/f36-core';\n\nconst NAVBAR_MENU_ITEM_DEFAULT_TAG = 'button';\n\ntype NavbarMenuItemOwnProps = {\n children?: null;\n title: string;\n icon?: NavbarItemIconProps['icon'];\n as?: React.ElementType;\n} & Omit<MenuItemProps, 'children' | 'as'>;\n\nexport type NavbarMenuItemProps<\n E extends React.ElementType = typeof NAVBAR_MENU_ITEM_DEFAULT_TAG,\n> = PolymorphicProps<NavbarMenuItemOwnProps, E>;\n\nfunction _NavbarMenuItem(\n props: NavbarMenuItemProps<React.ElementType>,\n ref: React.Ref<any>,\n) {\n const {\n as: Comp = NAVBAR_MENU_ITEM_DEFAULT_TAG,\n icon,\n title,\n className,\n ...otherProps\n } = props;\n const styles = getNavbarMenuItemStyles();\n\n const itemIsExternalLink = isExternalLink(\n props as unknown as NavbarMenuItemProps<'a'>,\n );\n\n return (\n <Menu.Item\n {...otherProps}\n ref={ref}\n as={Comp as MenuItemProps['as']}\n className={cx(styles.navbarMenuItem, className)}\n >\n {icon ? (\n <NavbarItemIcon icon={icon} />\n ) : (\n itemIsExternalLink && externalIcon\n )}\n <span>{title}</span>\n {icon && itemIsExternalLink ? externalIcon : null}\n </Menu.Item>\n );\n}\n\nconst externalIcon = <NavbarItemIcon icon={<ArrowSquareOutIcon />} />;\n\nconst isExternalLink = (props: NavbarMenuItemProps<'a'>) =>\n props.as === 'a' && props.target === '_blank';\n\nexport const NavbarMenuItem: PolymorphicComponent<\n ExpandProps<NavbarMenuItemOwnProps>,\n typeof NAVBAR_MENU_ITEM_DEFAULT_TAG\n> = React.forwardRef(_NavbarMenuItem);\n","import { css } from 'emotion';\nexport const getNavbarMenuItemStyles = () => ({\n navbarMenuItem: css({\n display: 'flex',\n justifyContent: 'flex-start',\n alignItems: 'center',\n }),\n});\n","import React from 'react';\nimport { Menu } from '@contentful/f36-menu';\nimport {\n SkeletonBodyText,\n SkeletonContainer,\n SkeletonImage,\n} from '@contentful/f36-skeleton';\nimport { Flex } from '@contentful/f36-core';\n\nimport tokens from '@contentful/f36-tokens';\n\nexport const NavbarMenuItemSkeleton = ({\n ariaLabel,\n}: {\n ariaLabel?: string;\n}) => (\n <Menu.Item>\n <Flex alignItems=\"center\" gap={tokens.spacingXs}>\n <SkeletonContainer svgHeight={16} svgWidth={18}>\n <SkeletonImage width={16} height={16} />\n </SkeletonContainer>\n <SkeletonContainer svgHeight={16} svgWidth={190} ariaLabel={ariaLabel}>\n <SkeletonBodyText numberOfLines={1} />\n </SkeletonContainer>\n </Flex>\n </Menu.Item>\n);\n","import React, { type ReactNode } from 'react';\nimport { getNavbarSwitcherStyles } from './NavbarSwitcher.styles';\nimport { Button } from '@contentful/f36-button';\nimport {\n Flex,\n type CommonProps,\n type PropsWithHTMLElement,\n type ExpandProps,\n} from '@contentful/f36-core';\nimport { cx } from 'emotion';\nimport { NavbarEnvVariant } from './NavbarEnvVariant';\n\ntype TruncateOptions = {\n /**\n * Number of characters to keep at the start of the string\n * @default 5\n */\n start?: number;\n /**\n * Number of characters to keep at the end of the string\n * @default 6\n */\n end?: number;\n};\n\nfunction splitSpaceName(\n string: string,\n {\n start: startLength = 5,\n end: endLength = 6,\n }: TruncateOptions | undefined = {},\n) {\n if (string.length <= startLength + endLength) {\n return [string, undefined, undefined];\n }\n\n const start = startLength > 0 ? string.slice(0, startLength) : '';\n const end = endLength > 0 ? string.slice(-endLength) : '';\n const remainder = string.slice(startLength, string.length - endLength);\n\n return [start, remainder, end];\n}\n\ntype NavbarSwitcherOwnProps = CommonProps & {\n children: ReactNode;\n isCircle?: boolean;\n envVariant?: 'master' | 'non-master';\n isAlias?: boolean;\n ariaLabel?: string;\n};\n\nexport type NavbarSwitcherProps = PropsWithHTMLElement<\n NavbarSwitcherOwnProps,\n 'button'\n>;\n\nfunction _NavbarSwitcher(\n props: ExpandProps<NavbarSwitcherProps>,\n ref: React.Ref<HTMLButtonElement>,\n) {\n const {\n children,\n className,\n envVariant,\n isAlias,\n testId = 'cf-ui-navbar-switcher',\n ariaLabel = 'Space and Environment Navigation',\n ...otherProps\n } = props;\n const styles = getNavbarSwitcherStyles();\n const [start, middle, end] =\n typeof children === 'string' ? splitSpaceName(children) : [];\n\n return (\n <Button\n {...otherProps}\n aria-label={ariaLabel}\n className={cx(styles.navbarSwitcher, className)}\n endIcon={\n envVariant && (\n <NavbarEnvVariant\n envVariant={envVariant}\n isAlias={isAlias}\n className={styles.switcherEnvIcon}\n />\n )\n }\n ref={ref}\n testId={testId}\n variant=\"transparent\"\n >\n <Flex\n alignItems=\"center\"\n className={styles.switcherSpaceName}\n flexDirection=\"row\"\n >\n {start !== undefined ? (\n <>\n <span>{start}</span>\n {middle && (\n <span className={styles.switcherSpaceNameTruncation}>\n {middle}\n </span>\n )}\n {end && <span>{end}</span>}\n </>\n ) : (\n children\n )}\n </Flex>\n </Button>\n );\n}\n\nexport const NavbarSwitcher = React.forwardRef(_NavbarSwitcher);\n","import { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\nimport { hexToRGBA } from '@contentful/f36-utils';\n\nimport { getGlowOnFocusStyles, increaseHitArea, mqs } from '../utils.styles';\n\nexport const getNavbarSwitcherStyles = () => ({\n navbarSwitcher: css(\n {\n color: tokens.gray600,\n flexShrink: 1,\n fontWeight: tokens.fontWeightMedium,\n maxWidth: '100%',\n minHeight: 'unset',\n padding: `${tokens.spacing2Xs} ${tokens.spacingXs}`,\n '&:hover': {\n backgroundColor: hexToRGBA(tokens.gray900, 0.05),\n },\n },\n getGlowOnFocusStyles(),\n increaseHitArea(),\n ),\n\n switcherSpaceName: css({\n // Set min-width only when there are three span children\n '&:has(> span:last-child:nth-child(3))': {\n minWidth: '12ch',\n },\n maxWidth: '15vw',\n [mqs.xsmall]: {\n maxWidth: '50vw',\n },\n [mqs.small]: {\n maxWidth: '10vw',\n },\n [mqs.medium]: {\n maxWidth: '50vw',\n },\n }),\n\n switcherEnvIcon: css({\n [mqs.small]: {\n width: '16px',\n height: '16px',\n },\n }),\n\n switcherSpaceNameTruncation: css({\n flexShrink: 1,\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n }),\n});\n","import React from 'react';\nimport { NavbarSwitcherProps } from '../NavbarSwitcher/NavbarSwitcher';\nimport { EnvironmentAliasIcon, EnvironmentIcon } from '@contentful/f36-icons';\nimport tokens from '@contentful/f36-tokens';\n\nexport type NavbarEnvVariantProps = Pick<\n NavbarSwitcherProps,\n 'isAlias' | 'envVariant'\n> & {\n className?: string;\n};\n\nexport function NavbarEnvVariant({\n isAlias,\n envVariant,\n className,\n}: NavbarEnvVariantProps) {\n const color = envVariant === 'master' ? tokens.green600 : tokens.orange500;\n\n return isAlias ? (\n <EnvironmentAliasIcon color={color} className={className} size=\"medium\" />\n ) : (\n <EnvironmentIcon color={color} className={className} size=\"medium\" />\n );\n}\n","import React from 'react';\nimport {\n SkeletonContainer,\n SkeletonDisplayText,\n} from '@contentful/f36-skeleton';\nimport tokens from '@contentful/f36-tokens';\n\nexport const NavbarSwitcherSkeleton = ({\n estimatedWidth,\n}: {\n estimatedWidth: number;\n}) => (\n <SkeletonContainer\n svgWidth={estimatedWidth}\n svgHeight={24}\n backgroundColor={tokens.gray300}\n foregroundColor={tokens.gray200}\n >\n <SkeletonDisplayText\n lineHeight={24}\n numberOfLines={1}\n radiusX={12}\n radiusY={12}\n />\n </SkeletonContainer>\n);\n","import React from 'react';\nimport { cx } from 'emotion';\nimport { getNavbarBadgeStyles } from './NavbarBadge.styles';\nimport type {\n CommonProps,\n ExpandProps,\n PolymorphicComponent,\n PolymorphicProps,\n} from '@contentful/f36-core';\n\nconst NAVBAR_BADGE_DEFAULT_TAG = 'div';\n\ntype NavbarBadgeOwnProps = CommonProps & {\n children?: React.ReactNode;\n as?: React.ElementType;\n};\n\nexport type NavbarBadgeProps<\n E extends React.ElementType = typeof NAVBAR_BADGE_DEFAULT_TAG,\n> = PolymorphicProps<NavbarBadgeOwnProps, E>;\n\nfunction _NavbarBadge(\n props: NavbarBadgeProps<React.ElementType>,\n ref: React.Ref<any>,\n) {\n const {\n as: Comp = NAVBAR_BADGE_DEFAULT_TAG,\n children,\n className,\n testId = 'cf-ui-navbar-badge',\n ...otherProps\n } = props;\n const styles = getNavbarBadgeStyles();\n\n return (\n <Comp\n {...otherProps}\n ref={ref}\n className={cx(styles.navbarBadge, className)}\n data-test-id={testId}\n >\n {children}\n </Comp>\n );\n}\n\nexport const NavbarBadge: PolymorphicComponent<\n ExpandProps<NavbarBadgeOwnProps>,\n typeof NAVBAR_BADGE_DEFAULT_TAG\n> = React.forwardRef(_NavbarBadge);\n","import { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\nexport const getNavbarBadgeStyles = () => ({\n navbarBadge: css({\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n background: 'none',\n border: `1px solid ${tokens.purple600}`,\n margin: 0,\n outline: 'none',\n fontSize: tokens.fontSizeS,\n lineHeight: tokens.lineHeightS,\n fontWeight: tokens.fontWeightMedium,\n textAlign: 'center',\n padding: `0 ${tokens.spacingXs}`,\n textDecoration: 'none',\n color: `${tokens.purple600}!important`,\n borderRadius: '1.75rem',\n userSelect: 'none',\n }),\n});\n","import React from 'react';\nimport { Menu, type MenuListProps, type MenuProps } from '@contentful/f36-menu';\nimport { getNavbarSubmenuStyles } from './NavbarMenu.styles';\nimport {\n NavbarItemIcon,\n type NavbarItemIconProps,\n} from '../NavbarItemIcon/NavbarItemIcon';\nimport { Flex } from '@contentful/f36-core';\n\nexport type NavbarSubmenuProps = {\n title: string;\n icon?: NavbarItemIconProps['icon'];\n children?: React.ReactNode;\n} & Pick<MenuListProps, 'testId'> &\n Pick<MenuProps, 'onOpen' | 'onClose'>;\n\nexport const NavbarSubmenu = (props: NavbarSubmenuProps) => {\n const {\n title,\n icon,\n children,\n testId = 'cf-ui-navbar-submenu-list',\n onOpen,\n onClose,\n } = props;\n const styles = getNavbarSubmenuStyles();\n\n return (\n <Menu.Submenu onOpen={onOpen} onClose={onClose}>\n <Menu.SubmenuTrigger>\n <Flex className={styles.navbarMenuItem}>\n {icon && <NavbarItemIcon icon={icon} />}\n <span>{title}</span>\n </Flex>\n </Menu.SubmenuTrigger>\n <Menu.List className={styles.menuList} testId={testId}>\n {children}\n </Menu.List>\n </Menu.Submenu>\n );\n};\n","import tokens from '@contentful/f36-tokens';\nimport { css } from 'emotion';\nimport { mqs } from '../utils.styles';\n\nexport const getNavbarSubmenuStyles = () => ({\n navbarMenuItem: css({\n display: 'flex',\n justifyContent: 'flex-start',\n alignItems: 'center',\n gap: tokens.spacingXs,\n }),\n menuList: css({\n minWidth: 0,\n marginLeft: '-24px',\n marginTop: '10px',\n [mqs.xsmall]: {\n minWidth: '250px',\n margin: 0,\n },\n }),\n});\n"]}
package/dist/index.d.mts CHANGED
@@ -17,6 +17,8 @@ declare type NavbarOwnProps = CommonProps & {
17
17
  secondaryNavigation?: React.ReactNode;
18
18
  /** User Account Component */
19
19
  account?: React.ReactNode;
20
+ /** Navigation displayed on mobile versions */
21
+ mobileNavigation?: React.ReactNode;
20
22
  /**
21
23
  * Defines the max-width of the content inside the navbar.
22
24
  * @default '100%'
@@ -44,6 +46,8 @@ declare const Navbar$1: React.ForwardRefExoticComponent<NavbarHTMLElementProps &
44
46
  secondaryNavigation?: React.ReactNode;
45
47
  /** User Account Component */
46
48
  account?: React.ReactNode;
49
+ /** Navigation displayed on mobile versions */
50
+ mobileNavigation?: React.ReactNode;
47
51
  /**
48
52
  * Defines the max-width of the content inside the navbar.
49
53
  * @default '100%'
@@ -79,6 +83,7 @@ declare type NavbarMenuProps = {
79
83
 
80
84
  declare type NavbarItemIconProps = {
81
85
  icon: React.ReactElement<IconProps>;
86
+ className?: string;
82
87
  } & Partial<Pick<IconProps, 'isActive'>>;
83
88
 
84
89
  declare const NAVBAR_ITEM_DEFAULT_TAG = "button";
@@ -117,11 +122,12 @@ declare const NavbarMenuItemSkeleton: ({ ariaLabel, }: {
117
122
  ariaLabel?: string;
118
123
  }) => JSX.Element;
119
124
 
120
- declare const NavbarSwitcher: React.ForwardRefExoticComponent<Omit<Omit<Pick<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof React.ButtonHTMLAttributes<HTMLButtonElement>>, never>, "children" | keyof CommonProps | "isCircle" | "envVariant" | "isAlias"> & CommonProps & {
125
+ 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 & {
121
126
  children: ReactNode;
122
127
  isCircle?: boolean;
123
128
  envVariant?: 'master' | 'non-master';
124
129
  isAlias?: boolean;
130
+ ariaLabel?: string;
125
131
  } & React.RefAttributes<HTMLButtonElement>>;
126
132
 
127
133
  declare const NavbarSwitcherSkeleton: ({ estimatedWidth, }: {
@@ -135,6 +141,13 @@ declare type NavbarBadgeOwnProps = CommonProps & {
135
141
  };
136
142
  declare const NavbarBadge: PolymorphicComponent<ExpandProps<NavbarBadgeOwnProps>, typeof NAVBAR_BADGE_DEFAULT_TAG>;
137
143
 
144
+ declare type NavbarSubmenuProps = {
145
+ title: string;
146
+ icon?: NavbarItemIconProps['icon'];
147
+ children?: React.ReactNode;
148
+ } & Pick<MenuListProps, 'testId'> & Pick<MenuProps, 'onOpen' | 'onClose'>;
149
+ declare const NavbarSubmenu: (props: NavbarSubmenuProps) => JSX.Element;
150
+
138
151
  declare type CompoundNavbar = typeof Navbar$1 & {
139
152
  Item: typeof NavbarItem;
140
153
  ItemSkeleton: typeof NavbarItemSkeleton;
@@ -142,6 +155,7 @@ declare type CompoundNavbar = typeof Navbar$1 & {
142
155
  MenuItemSkeleton: typeof NavbarMenuItemSkeleton;
143
156
  MenuDivider: typeof MenuDivider;
144
157
  MenuSectionTitle: typeof MenuSectionTitle;
158
+ Submenu: typeof NavbarSubmenu;
145
159
  Switcher: typeof NavbarSwitcher;
146
160
  SwitcherSkeleton: typeof NavbarSwitcherSkeleton;
147
161
  Account: typeof NavbarAccount;
package/dist/index.d.ts CHANGED
@@ -17,6 +17,8 @@ declare type NavbarOwnProps = CommonProps & {
17
17
  secondaryNavigation?: React.ReactNode;
18
18
  /** User Account Component */
19
19
  account?: React.ReactNode;
20
+ /** Navigation displayed on mobile versions */
21
+ mobileNavigation?: React.ReactNode;
20
22
  /**
21
23
  * Defines the max-width of the content inside the navbar.
22
24
  * @default '100%'
@@ -44,6 +46,8 @@ declare const Navbar$1: React.ForwardRefExoticComponent<NavbarHTMLElementProps &
44
46
  secondaryNavigation?: React.ReactNode;
45
47
  /** User Account Component */
46
48
  account?: React.ReactNode;
49
+ /** Navigation displayed on mobile versions */
50
+ mobileNavigation?: React.ReactNode;
47
51
  /**
48
52
  * Defines the max-width of the content inside the navbar.
49
53
  * @default '100%'
@@ -79,6 +83,7 @@ declare type NavbarMenuProps = {
79
83
 
80
84
  declare type NavbarItemIconProps = {
81
85
  icon: React.ReactElement<IconProps>;
86
+ className?: string;
82
87
  } & Partial<Pick<IconProps, 'isActive'>>;
83
88
 
84
89
  declare const NAVBAR_ITEM_DEFAULT_TAG = "button";
@@ -117,11 +122,12 @@ declare const NavbarMenuItemSkeleton: ({ ariaLabel, }: {
117
122
  ariaLabel?: string;
118
123
  }) => JSX.Element;
119
124
 
120
- declare const NavbarSwitcher: React.ForwardRefExoticComponent<Omit<Omit<Pick<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof React.ButtonHTMLAttributes<HTMLButtonElement>>, never>, "children" | keyof CommonProps | "isCircle" | "envVariant" | "isAlias"> & CommonProps & {
125
+ 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 & {
121
126
  children: ReactNode;
122
127
  isCircle?: boolean;
123
128
  envVariant?: 'master' | 'non-master';
124
129
  isAlias?: boolean;
130
+ ariaLabel?: string;
125
131
  } & React.RefAttributes<HTMLButtonElement>>;
126
132
 
127
133
  declare const NavbarSwitcherSkeleton: ({ estimatedWidth, }: {
@@ -135,6 +141,13 @@ declare type NavbarBadgeOwnProps = CommonProps & {
135
141
  };
136
142
  declare const NavbarBadge: PolymorphicComponent<ExpandProps<NavbarBadgeOwnProps>, typeof NAVBAR_BADGE_DEFAULT_TAG>;
137
143
 
144
+ declare type NavbarSubmenuProps = {
145
+ title: string;
146
+ icon?: NavbarItemIconProps['icon'];
147
+ children?: React.ReactNode;
148
+ } & Pick<MenuListProps, 'testId'> & Pick<MenuProps, 'onOpen' | 'onClose'>;
149
+ declare const NavbarSubmenu: (props: NavbarSubmenuProps) => JSX.Element;
150
+
138
151
  declare type CompoundNavbar = typeof Navbar$1 & {
139
152
  Item: typeof NavbarItem;
140
153
  ItemSkeleton: typeof NavbarItemSkeleton;
@@ -142,6 +155,7 @@ declare type CompoundNavbar = typeof Navbar$1 & {
142
155
  MenuItemSkeleton: typeof NavbarMenuItemSkeleton;
143
156
  MenuDivider: typeof MenuDivider;
144
157
  MenuSectionTitle: typeof MenuSectionTitle;
158
+ Submenu: typeof NavbarSubmenu;
145
159
  Switcher: typeof NavbarSwitcher;
146
160
  SwitcherSkeleton: typeof NavbarSwitcherSkeleton;
147
161
  Account: typeof NavbarAccount;
package/dist/index.js CHANGED
@@ -2,24 +2,24 @@
2
2
 
3
3
  var f36Menu = require('@contentful/f36-menu');
4
4
  var f36Core = require('@contentful/f36-core');
5
- var g = require('react');
5
+ var f = require('react');
6
6
  var emotion = require('emotion');
7
- var i = require('@contentful/f36-tokens');
7
+ var s = require('@contentful/f36-tokens');
8
8
  var f36Icon = require('@contentful/f36-icon');
9
+ var f36Button = require('@contentful/f36-button');
10
+ var f36Icons = require('@contentful/f36-icons');
9
11
  var f36Utils = require('@contentful/f36-utils');
10
12
  var f36Avatar = require('@contentful/f36-avatar');
11
13
  var f36Skeleton = require('@contentful/f36-skeleton');
12
- var f36Icons = require('@contentful/f36-icons');
13
- var f36Button = require('@contentful/f36-button');
14
14
 
15
15
  function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
16
16
 
17
- var g__default = /*#__PURE__*/_interopDefault(g);
18
- var i__default = /*#__PURE__*/_interopDefault(i);
17
+ var f__default = /*#__PURE__*/_interopDefault(f);
18
+ var s__default = /*#__PURE__*/_interopDefault(s);
19
19
 
20
- var _e=Object.defineProperty,Re=Object.defineProperties;var Fe=Object.getOwnPropertyDescriptors;var R=Object.getOwnPropertySymbols;var re=Object.prototype.hasOwnProperty,ne=Object.prototype.propertyIsEnumerable;var te=(e,o,t)=>o in e?_e(e,o,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[o]=t,m=(e,o)=>{for(var t in o||(o={}))re.call(o,t)&&te(e,t,o[t]);if(R)for(var t of R(o))ne.call(o,t)&&te(e,t,o[t]);return e},u=(e,o)=>Re(e,Fe(o));var c=(e,o)=>{var t={};for(var r in e)re.call(e,r)&&o.indexOf(r)<0&&(t[r]=e[r]);if(e!=null&&R)for(var r of R(e))o.indexOf(r)<0&&ne.call(e,r)&&(t[r]=e[r]);return t};var ae={medium:"@media (min-width: 480px)",large:"@media (min-width: 768px)",xlarge:"@media (min-width: 1920px)"},P=(e=i__default.default.glowPrimary)=>({"&:focus":{boxShadow:e},"&:focus:not(:focus-visible)":{boxShadow:"unset"},"&:focus-visible":{boxShadow:e}}),M=(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 ie=(e,o)=>({container:emotion.css({justifyContent:"center",backgroundColor:i__default.default.gray100,width:"100%"}),logo:emotion.css({height:"28px",width:"28px"}),navigation:emotion.css({width:"100%",maxWidth:o==="wide"?"1524px":e,padding:`${i__default.default.spacingS} ${i__default.default.spacingM}`,minHeight:i__default.default.spacingL,[ae.medium]:{padding:`${i__default.default.spacingM} ${i__default.default.spacingL}`}})});var ce=f36Icon.generateComponentWithVariants({variants:{[f36Icon.IconVariant.Active]:f36Icon.generateIconComponent({path:g__default.default.createElement(g__default.default.Fragment,null,g__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:g__default.default.createElement(g__default.default.Fragment,null,g__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 le=f36Icon.generateIconComponent({name:"ContentfulLogoIcon",viewBox:"0 0 28 28",path:g__default.default.createElement(g__default.default.Fragment,null,g__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"}),g__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"}),g__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"}),g__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"}),g__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"}))});function Ge(e,o){let S=e,{logo:t,switcher:r,mainNavigation:a,secondaryNavigation:n,account:s,className:d,contentMaxWidth:p="100%",testId:l="cf-ui-navbar",variant:h="wide"}=S,v=c(S,["logo","switcher","mainNavigation","secondaryNavigation","account","className","contentMaxWidth","testId","variant"]),b=ie(p,h);return g__default.default.createElement(f36Core.Flex,u(m({},v),{ref:o,testId:l,className:emotion.cx(b.container,d),as:"header"}),g__default.default.createElement(f36Core.Flex,{as:"nav",className:b.navigation,justifyContent:"space-between"},g__default.default.createElement(f36Core.Flex,{alignItems:"center",gap:"spacingL"},t||g__default.default.createElement(le,{className:b.logo}),a&&g__default.default.createElement(f36Core.Flex,{"aria-label":"Main Navigation",gap:"spacingXs"},a)),g__default.default.createElement(f36Core.Flex,{alignItems:"center",gap:"spacingXs"},r,n&&g__default.default.createElement(f36Core.Flex,{"aria-label":"Secondary Navigation"},n),s&&g__default.default.createElement(f36Core.Flex,{"aria-label":"Account Navigation",gap:"spacingXs"},s))))}var ue=g__default.default.forwardRef(Ge);var ze={warning:i__default.default.colorWarning,negative:i__default.default.colorNegative,info:i__default.default.blue500},fe=()=>({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(i__default.default.gray300,.15)})},P(),M()),avatar:emotion.css({borderRadius:"50%",display:"block",height:"24px",width:"24px"}),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:ze[e],transform:"translate(30%, -30%)"})});var be=()=>({menuList:emotion.css({minWidth:"250px"})});var F=e=>{let{trigger:o,children:t,testId:r="cf-ui-navbar-menu-list",onOpen:a,onClose:n}=e,s=be();return g__default.default.createElement(f36Menu.Menu,{onOpen:a,onClose:n},g__default.default.createElement(f36Menu.Menu.Trigger,null,o),g__default.default.createElement(f36Menu.Menu.List,{className:s.menuList,testId:r},t))};function qe(e,o){let b=e,{children:t,className:r,testId:a="cf-ui-navbar-account-trigger",avatar:n,initials:s,username:d,hasNotification:p,notificationVariant:l="warning"}=b,h=c(b,["children","className","testId","avatar","initials","username","hasNotification","notificationVariant"]),v=fe();return g__default.default.createElement(F,{trigger:g__default.default.createElement(f36Core.Flex,u(m({as:"button"},h),{ref:o,className:emotion.cx(v.navbarAccount,r),testId:a,alignItems:"center","aria-label":"Account Menu"}),g__default.default.createElement(f36Avatar.Avatar,{src:n,initials:s,size:"small",variant:"user"}),p?g__default.default.createElement("span",{className:v.notificationIcon(l)}):null)},t)}var X=g__default.default.forwardRef(qe);function U({ariaLabel:e}){return g__default.default.createElement(f36Skeleton.SkeletonContainer,{svgWidth:24,svgHeight:24,ariaLabel:e,backgroundColor:i__default.default.gray300,foregroundColor:i__default.default.gray200},g__default.default.createElement(f36Skeleton.SkeletonImage,{width:24,height:24,radiusX:12,radiusY:12}))}var ge=()=>emotion.css({backgroundColor:i__default.default.blue100,border:`1px solid ${i__default.default.blue400}`,color:i__default.default.blue600,"&:hover":{backgroundColor:i__default.default.blue100}}),Ne={display:"flex",justifyContent:"center",padding:`${i__default.default.spacing2Xs} ${i__default.default.spacingXs}`,alignItems:"center",background:"none",gap:i__default.default.spacing2Xs},he=()=>({navbarItem:emotion.css(Ne,{appearance:"none",background:"none",border:"1px solid transparent",margin:0,outline:"none",fontSize:i__default.default.fontSizeM,lineHeight:i__default.default.lineHeightS,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,minWidth:"44px","&: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}},P(),M()),navbarItemMenuTrigger:emotion.css({paddingRight:i__default.default.spacingXs}),isActive:ge()}),ye=()=>({itemSkeleton:emotion.css(Ne)});var Ie=()=>({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 L=({icon:e,isActive:o})=>{let s=e.props,{className:t,size:r}=s,a=c(s,["className","size"]),n=Ie();return g__default.default.cloneElement(e,m({className:emotion.cx(t,n.navbarItemIcon),size:r||"small",isActive:o},a))};var ro="button";function no(e,o){let oe=e,{as:t=ro,icon:r,label:a,title:n,children:s,className:d,isActive:p,testId:l="cf-ui-navbar-item",onOpen:h,onClose:v}=oe,b=c(oe,["as","icon","label","title","children","className","isActive","testId","onOpen","onClose"]),S=he(),D=ao(e),ee=g__default.default.createElement(t,u(m({},b),{ref:o,"data-test-id":l,className:emotion.cx(S.navbarItem,D&&S.navbarItemMenuTrigger,p&&S.isActive,d),"aria-label":n?"":a}),r&&g__default.default.createElement(L,{icon:r,isActive:p}),n&&g__default.default.createElement("span",null,n),n&&D&&g__default.default.createElement(ce,{size:"tiny",isActive:p}));return D?g__default.default.createElement(F,{trigger:ee,testId:l,onOpen:h,onClose:v},s):ee}var ao=e=>!!e.children,j=g__default.default.forwardRef(no);var Z=({estimatedWidth:e})=>{let o=ye();return g__default.default.createElement(f36Skeleton.SkeletonContainer,{className:o.itemSkeleton,svgWidth:e,svgHeight:32,backgroundColor:i__default.default.gray300,foregroundColor:i__default.default.gray200},g__default.default.createElement(f36Skeleton.SkeletonText,{lineHeight:6,numberOfLines:1,offsetTop:10,radiusX:i__default.default.borderRadiusSmall,radiusY:i__default.default.borderRadiusSmall}))};var Se=()=>({navbarMenuItem:emotion.css({display:"flex",justifyContent:"flex-start",alignItems:"center"})});var uo="button";function fo(e,o){let l=e,{as:t=uo,icon:r,title:a,className:n}=l,s=c(l,["as","icon","title","className"]),d=Se(),p=bo(e);return g__default.default.createElement(f36Menu.Menu.Item,u(m({},s),{ref:o,as:t,className:emotion.cx(d.navbarMenuItem,n)}),r?g__default.default.createElement(L,{icon:r}):p&&Pe,g__default.default.createElement("span",null,a),r&&p?Pe:null)}var Pe=g__default.default.createElement(L,{icon:g__default.default.createElement(f36Icons.ArrowSquareOutIcon,null)}),bo=e=>e.as==="a"&&e.target==="_blank",q=g__default.default.forwardRef(fo);var Y=({ariaLabel:e})=>g__default.default.createElement(f36Menu.Menu.Item,null,g__default.default.createElement(f36Core.Flex,{alignItems:"center",gap:i__default.default.spacingXs},g__default.default.createElement(f36Skeleton.SkeletonContainer,{svgHeight:16,svgWidth:18},g__default.default.createElement(f36Skeleton.SkeletonImage,{width:16,height:16})),g__default.default.createElement(f36Skeleton.SkeletonContainer,{svgHeight:16,svgWidth:190,ariaLabel:e},g__default.default.createElement(f36Skeleton.SkeletonBodyText,{numberOfLines:1}))));var Ae=()=>({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)}},P(),M()),switcherSpaceName:emotion.css({"&:has(> span:last-child:nth-child(3))":{minWidth:"12ch"}}),switcherSpaceNameTruncation:emotion.css({flexShrink:1,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"})});function ke({isAlias:e,envVariant:o}){let t=o==="master"?i__default.default.green600:i__default.default.orange500;return e?g__default.default.createElement(f36Icons.EnvironmentAliasIcon,{color:t,size:"tiny"}):g__default.default.createElement(f36Icons.EnvironmentIcon,{color:t,size:"tiny"})}function Co(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 wo(e,o){let b=e,{children:t,className:r,envVariant:a,isAlias:n,testId:s="cf-ui-navbar-switcher"}=b,d=c(b,["children","className","envVariant","isAlias","testId"]),p=Ae(),[l,h,v]=typeof t=="string"?Co(t):[];return g__default.default.createElement(f36Button.Button,u(m({},d),{"aria-label":"Space and Environment Navigation",className:emotion.cx(p.navbarSwitcher,r),endIcon:a&&g__default.default.createElement(ke,{envVariant:a,isAlias:n}),ref:o,testId:s,variant:"transparent"}),g__default.default.createElement(f36Core.Flex,{alignItems:"center",className:p.switcherSpaceName,flexDirection:"row"},l!==void 0?g__default.default.createElement(g__default.default.Fragment,null,g__default.default.createElement("span",null,l),h&&g__default.default.createElement("span",{className:p.switcherSpaceNameTruncation},h),v&&g__default.default.createElement("span",null,v)):t))}var K=g__default.default.forwardRef(wo);var Q=({estimatedWidth:e})=>g__default.default.createElement(f36Skeleton.SkeletonContainer,{svgWidth:e,svgHeight:24,backgroundColor:i__default.default.gray300,foregroundColor:i__default.default.gray200},g__default.default.createElement(f36Skeleton.SkeletonDisplayText,{lineHeight:24,numberOfLines:1,radiusX:12,radiusY:12}));var Be=()=>({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 Oo="div";function Lo(e,o){let p=e,{as:t=Oo,children:r,className:a,testId:n="cf-ui-navbar-badge"}=p,s=c(p,["as","children","className","testId"]),d=Be();return g__default.default.createElement(t,u(m({},s),{ref:o,className:emotion.cx(d.navbarBadge,a),"data-test-id":n}),r)}var Le=g__default.default.forwardRef(Lo);var f=ue;f.Item=j;f.ItemSkeleton=Z;f.MenuItem=q;f.MenuItemSkeleton=Y;f.MenuDivider=f36Menu.MenuDivider;f.MenuSectionTitle=f36Menu.MenuSectionTitle;f.Switcher=K;f.SwitcherSkeleton=Q;f.Account=X;f.AccountSkeleton=U;f.Badge=Le;
20
+ var Ve=Object.defineProperty,De=Object.defineProperties;var Ge=Object.getOwnPropertyDescriptors;var G=Object.getOwnPropertySymbols;var ie=Object.prototype.hasOwnProperty,se=Object.prototype.propertyIsEnumerable;var ae=(e,o,t)=>o in e?Ve(e,o,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[o]=t,b=(e,o)=>{for(var t in o||(o={}))ie.call(o,t)&&ae(e,t,o[t]);if(G)for(var t of G(o))se.call(o,t)&&ae(e,t,o[t]);return e},v=(e,o)=>De(e,Ge(o));var d=(e,o)=>{var t={};for(var r in e)ie.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&&se.call(e,r)&&(t[r]=e[r]);return t};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)"},A=(e=s__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=(e,o)=>({container:emotion.css({justifyContent:"center",backgroundColor:s__default.default.gray100,width:"100%"}),logo:emotion.css({display:"none",[i.small]:{display:"block",height:"28px",width:"28px"}}),navigation:emotion.css({width:"100%",maxWidth:o==="wide"?"1524px":e,padding:`${s__default.default.spacingS} ${s__default.default.spacingM}`,minHeight:s__default.default.spacingL,[i.small]:{padding:`${s__default.default.spacingM} ${s__default.default.spacingL}`}}),mainNavigation:emotion.css({display:"none",[i.small]:{display:"flex"}}),mobileNavigationButton:emotion.css({display:"flex",height:"36px",borderRadius:"10px",[i.small]:{display:"none"}}),mobileNavigationIcon:emotion.css({heigt:"20px",width:"20px"}),secondaryNavigationWrapper:emotion.css({"> *:not(:first-child)":{display:"none",[i.xsmall]:{display:"flex"}}}),account:emotion.css({display:"none",[i.xsmall]:{display:"flex"}})});var ue=f36Icon.generateComponentWithVariants({variants:{[f36Icon.IconVariant.Active]:f36Icon.generateIconComponent({path:f__default.default.createElement(f__default.default.Fragment,null,f__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:s__default.default.blue300})),viewBox:"0 0 12 12"}),[f36Icon.IconVariant.Default]:f36Icon.generateIconComponent({path:f__default.default.createElement(f__default.default.Fragment,null,f__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:s__default.default.gray400})),viewBox:"0 0 12 12"})}});var be=f36Icon.generateIconComponent({name:"ContentfulLogoIcon",viewBox:"0 0 28 28",path:f__default.default.createElement(f__default.default.Fragment,null,f__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"}),f__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"}),f__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"}),f__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"}),f__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,[i.xsmall]:{minWidth:"250px"}})});var L=e=>{let{trigger:o,children:t,testId:r="cf-ui-navbar-menu-list",onOpen:a,onClose:n}=e,m=de();return f__default.default.createElement(f36Menu.Menu,{onOpen:a,onClose:n},f__default.default.createElement(f36Menu.Menu.Trigger,null,o),f__default.default.createElement(f36Menu.Menu.List,{className:m.menuList,testId:r},t))};function Ye(e,o){let w=e,{logo:t,switcher:r,mainNavigation:a,secondaryNavigation:n,account:m,mobileNavigation:p,className:c,contentMaxWidth:u="100%",testId:I="cf-ui-navbar",variant:N="wide"}=w,h=d(w,["logo","switcher","mainNavigation","secondaryNavigation","account","mobileNavigation","className","contentMaxWidth","testId","variant"]),l=me(u,N);return f__default.default.createElement(f36Core.Flex,v(b({},h),{ref:o,testId:I,className:emotion.cx(l.container,c),as:"header"}),f__default.default.createElement(f36Core.Flex,{as:"nav",className:l.navigation,justifyContent:"space-between",gap:"spacingXs"},f__default.default.createElement(f36Core.Flex,{alignItems:"center",gap:"spacingL"},t||f__default.default.createElement(be,{className:l.logo}),p&&f__default.default.createElement(L,{trigger:f__default.default.createElement(f36Button.Button,{className:l.mobileNavigationButton,startIcon:f__default.default.createElement(f36Icons.ListIcon,{size:"medium"})},"Menu")},p),a&&f__default.default.createElement(f36Core.Flex,{className:l.mainNavigation,"aria-label":"Main Navigation",gap:"spacingXs"},a)),f__default.default.createElement(f36Core.Flex,{alignItems:"center",gap:"spacingXs"},f__default.default.createElement(f36Core.Flex,{alignItems:"center"},r),f__default.default.createElement(f36Core.Flex,{alignItems:"center",gap:"spacingXs"},n&&f__default.default.createElement(f36Core.Flex,{className:l.secondaryNavigationWrapper,"aria-label":"Secondary Navigation"},n),m&&f__default.default.createElement(f36Core.Flex,{className:l.account,"aria-label":"Account Navigation",gap:"spacingXs"},m)))))}var fe=f__default.default.forwardRef(Ye);var Ke={warning:s__default.default.colorWarning,negative:s__default.default.colorNegative,info:s__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(s__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:s__default.default.spacingS,width:s__default.default.spacingS,borderRadius:"50%",border:`2px solid ${s__default.default.gray100}`,backgroundColor:Ke[e],transform:"translate(30%, -30%)"})});function to(e,o){let h=e,{children:t,className:r,testId:a="cf-ui-navbar-account-trigger",avatar:n,initials:m,username:p,hasNotification:c,notificationVariant:u="warning"}=h,I=d(h,["children","className","testId","avatar","initials","username","hasNotification","notificationVariant"]),N=ge();return f__default.default.createElement(L,{trigger:f__default.default.createElement(f36Core.Flex,v(b({as:"button"},I),{ref:o,className:emotion.cx(N.navbarAccount,r),testId:a,alignItems:"center","aria-label":"Account Menu"}),f__default.default.createElement(f36Avatar.Avatar,{src:n,initials:m,size:"small",variant:"user"}),c?f__default.default.createElement("span",{className:N.notificationIcon(u)}):null)},t)}var q=f__default.default.forwardRef(to);function Z({ariaLabel:e}){return f__default.default.createElement(f36Skeleton.SkeletonContainer,{svgWidth:24,svgHeight:24,ariaLabel:e,backgroundColor:s__default.default.gray300,foregroundColor:s__default.default.gray200},f__default.default.createElement(f36Skeleton.SkeletonImage,{width:24,height:24,radiusX:12,radiusY:12}))}var he=()=>emotion.css({backgroundColor:s__default.default.blue100,border:`1px solid ${s__default.default.blue400}`,color:s__default.default.blue600,"&:hover":{backgroundColor:s__default.default.blue100}}),xe={display:"flex",justifyContent:"center",padding:`${s__default.default.spacing2Xs} ${s__default.default.spacingXs}`,alignItems:"center",background:"none",gap:s__default.default.spacing2Xs},ye=({title:e})=>({navbarItem:emotion.css(xe,{appearance:"none",background:"none",border:"1px solid transparent",margin:0,outline:"none",fontSize:s__default.default.fontSizeM,lineHeight:s__default.default.lineHeightS,fontWeight:s__default.default.fontWeightMedium,position:"relative",textAlign:"left",whiteSpace:"nowrap",cursor:"pointer",hyphens:"auto",textDecoration:"none",color:s__default.default.gray800,boxSizing:"border-box",transition:`color ${s__default.default.transitionDurationShort} ${s__default.default.transitionEasingCubicBezier}`,borderRadius:s__default.default.borderRadiusMedium,minWidth:"44px","&:hover":{backgroundColor:f36Utils.hexToRGBA(s__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 ${s__default.default.transitionDurationShort} ${s__default.default.transitionEasingCubicBezier}`},"& > svg, & > span":{zIndex:s__default.default.zIndexDefault}},A(),k()),navbarItemMenuTrigger:emotion.css({paddingRight:s__default.default.spacingXs}),isActive:he(),icon:emotion.css({height:"20px",width:"20px",display:e?"none":"block",[i.small]:{height:"16px",width:"16px"},[i.large]:{display:"block"}})}),Ie=()=>({itemSkeleton:emotion.css(xe)});var Se=()=>({navbarItemIcon:emotion.css({"&:last-child&:not(:only-child)":{marginLeft:s__default.default.spacing2Xs},"img&":{borderRadius:s__default.default.borderRadiusSmall,maxWidth:s__default.default.spacingM,maxHeight:s__default.default.spacingM}})});var C=({icon:e,isActive:o,className:t})=>{let p=e.props,{className:r,size:a}=p,n=d(p,["className","size"]),m=Se();return f__default.default.cloneElement(e,b({className:emotion.cx(r,m.navbarItemIcon,t),size:a||"small",isActive:o},n))};var co="button";function lo(e,o){let ne=e,{as:t=co,icon:r,label:a,title:n,children:m,className:p,isActive:c,testId:u="cf-ui-navbar-item",onOpen:I,onClose:N}=ne,h=d(ne,["as","icon","label","title","children","className","isActive","testId","onOpen","onClose"]),l=ye({title:n}),w=uo(e),re=f__default.default.createElement(t,v(b({},h),{ref:o,"data-test-id":u,className:emotion.cx(l.navbarItem,w&&l.navbarItemMenuTrigger,c&&l.isActive,p),"aria-label":n?"":a}),r&&f__default.default.createElement(C,{className:l.icon,icon:r,isActive:c}),n&&f__default.default.createElement("span",null,n),n&&w&&f__default.default.createElement(ue,{size:"tiny",isActive:c}));return w?f__default.default.createElement(L,{trigger:re,testId:u,onOpen:I,onClose:N},m):re}var uo=e=>!!e.children,Y=f__default.default.forwardRef(lo);var J=({estimatedWidth:e})=>{let o=Ie();return f__default.default.createElement(f36Skeleton.SkeletonContainer,{className:o.itemSkeleton,svgWidth:e,svgHeight:32,backgroundColor:s__default.default.gray300,foregroundColor:s__default.default.gray200},f__default.default.createElement(f36Skeleton.SkeletonText,{lineHeight:6,numberOfLines:1,offsetTop:10,radiusX:s__default.default.borderRadiusSmall,radiusY:s__default.default.borderRadiusSmall}))};var Me=()=>({navbarMenuItem:emotion.css({display:"flex",justifyContent:"flex-start",alignItems:"center"})});var xo="button";function yo(e,o){let u=e,{as:t=xo,icon:r,title:a,className:n}=u,m=d(u,["as","icon","title","className"]),p=Me(),c=Io(e);return f__default.default.createElement(f36Menu.Menu.Item,v(b({},m),{ref:o,as:t,className:emotion.cx(p.navbarMenuItem,n)}),r?f__default.default.createElement(C,{icon:r}):c&&Ce,f__default.default.createElement("span",null,a),r&&c?Ce:null)}var Ce=f__default.default.createElement(C,{icon:f__default.default.createElement(f36Icons.ArrowSquareOutIcon,null)}),Io=e=>e.as==="a"&&e.target==="_blank",K=f__default.default.forwardRef(yo);var Q=({ariaLabel:e})=>f__default.default.createElement(f36Menu.Menu.Item,null,f__default.default.createElement(f36Core.Flex,{alignItems:"center",gap:s__default.default.spacingXs},f__default.default.createElement(f36Skeleton.SkeletonContainer,{svgHeight:16,svgWidth:18},f__default.default.createElement(f36Skeleton.SkeletonImage,{width:16,height:16})),f__default.default.createElement(f36Skeleton.SkeletonContainer,{svgHeight:16,svgWidth:190,ariaLabel:e},f__default.default.createElement(f36Skeleton.SkeletonBodyText,{numberOfLines:1}))));var Ae=()=>({navbarSwitcher:emotion.css({color:s__default.default.gray600,flexShrink:1,fontWeight:s__default.default.fontWeightMedium,maxWidth:"100%",minHeight:"unset",padding:`${s__default.default.spacing2Xs} ${s__default.default.spacingXs}`,"&:hover":{backgroundColor:f36Utils.hexToRGBA(s__default.default.gray900,.05)}},A(),k()),switcherSpaceName:emotion.css({"&:has(> span:last-child:nth-child(3))":{minWidth:"12ch"},maxWidth:"15vw",[i.xsmall]:{maxWidth:"50vw"},[i.small]:{maxWidth:"10vw"},[i.medium]:{maxWidth:"50vw"}}),switcherEnvIcon:emotion.css({[i.small]:{width:"16px",height:"16px"}}),switcherSpaceNameTruncation:emotion.css({flexShrink:1,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"})});function Te({isAlias:e,envVariant:o,className:t}){let r=o==="master"?s__default.default.green600:s__default.default.orange500;return e?f__default.default.createElement(f36Icons.EnvironmentAliasIcon,{color:r,className:t,size:"medium"}):f__default.default.createElement(f36Icons.EnvironmentIcon,{color:r,className:t,size:"medium"})}function Oo(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 Wo(e,o){let l=e,{children:t,className:r,envVariant:a,isAlias:n,testId:m="cf-ui-navbar-switcher",ariaLabel:p="Space and Environment Navigation"}=l,c=d(l,["children","className","envVariant","isAlias","testId","ariaLabel"]),u=Ae(),[I,N,h]=typeof t=="string"?Oo(t):[];return f__default.default.createElement(f36Button.Button,v(b({},c),{"aria-label":p,className:emotion.cx(u.navbarSwitcher,r),endIcon:a&&f__default.default.createElement(Te,{envVariant:a,isAlias:n,className:u.switcherEnvIcon}),ref:o,testId:m,variant:"transparent"}),f__default.default.createElement(f36Core.Flex,{alignItems:"center",className:u.switcherSpaceName,flexDirection:"row"},I!==void 0?f__default.default.createElement(f__default.default.Fragment,null,f__default.default.createElement("span",null,I),N&&f__default.default.createElement("span",{className:u.switcherSpaceNameTruncation},N),h&&f__default.default.createElement("span",null,h)):t))}var ee=f__default.default.forwardRef(Wo);var oe=({estimatedWidth:e})=>f__default.default.createElement(f36Skeleton.SkeletonContainer,{svgWidth:e,svgHeight:24,backgroundColor:s__default.default.gray300,foregroundColor:s__default.default.gray200},f__default.default.createElement(f36Skeleton.SkeletonDisplayText,{lineHeight:24,numberOfLines:1,radiusX:12,radiusY:12}));var Oe=()=>({navbarBadge:emotion.css({display:"flex",justifyContent:"center",alignItems:"center",background:"none",border:`1px solid ${s__default.default.purple600}`,margin:0,outline:"none",fontSize:s__default.default.fontSizeS,lineHeight:s__default.default.lineHeightS,fontWeight:s__default.default.fontWeightMedium,textAlign:"center",padding:`0 ${s__default.default.spacingXs}`,textDecoration:"none",color:`${s__default.default.purple600}!important`,borderRadius:"1.75rem",userSelect:"none"})});var Vo="div";function Do(e,o){let c=e,{as:t=Vo,children:r,className:a,testId:n="cf-ui-navbar-badge"}=c,m=d(c,["as","children","className","testId"]),p=Oe();return f__default.default.createElement(t,v(b({},m),{ref:o,className:emotion.cx(p.navbarBadge,a),"data-test-id":n}),r)}var _e=f__default.default.forwardRef(Do);var He=()=>({navbarMenuItem:emotion.css({display:"flex",justifyContent:"flex-start",alignItems:"center",gap:s__default.default.spacingXs}),menuList:emotion.css({minWidth:0,marginLeft:"-24px",marginTop:"10px",[i.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:m}=e,p=He();return f__default.default.createElement(f36Menu.Menu.Submenu,{onOpen:n,onClose:m},f__default.default.createElement(f36Menu.Menu.SubmenuTrigger,null,f__default.default.createElement(f36Core.Flex,{className:p.navbarMenuItem},t&&f__default.default.createElement(C,{icon:t}),f__default.default.createElement("span",null,o))),f__default.default.createElement(f36Menu.Menu.List,{className:p.menuList,testId:a},r))};var g=fe;g.Item=Y;g.ItemSkeleton=J;g.MenuItem=K;g.MenuItemSkeleton=Q;g.MenuDivider=f36Menu.MenuDivider;g.MenuSectionTitle=f36Menu.MenuSectionTitle;g.Submenu=Re;g.Switcher=ee;g.SwitcherSkeleton=oe;g.Account=q;g.AccountSkeleton=Z;g.Badge=_e;
21
21
 
22
- exports.Navbar = f;
23
- exports.getNavbarItemActiveStyles = ge;
22
+ exports.Navbar = g;
23
+ exports.getNavbarItemActiveStyles = he;
24
24
  //# sourceMappingURL=out.js.map
25
25
  //# sourceMappingURL=index.js.map
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/CompoundNavbar.ts","../src/Navbar.tsx","../src/Navbar.styles.ts","../src/utils.styles.ts","../src/icons/CaretIcon.tsx","../src/icons/ContentfulLogoIcon.tsx","../src/NavbarAccount/NavbarAccount.tsx","../src/NavbarAccount/NavbarAccount.styles.ts","../src/NavbarMenu/NavbarMenu.tsx","../src/NavbarMenu/NavbarMenu.styles.ts","../src/NavbarAccount/NavbarAccountSkeleton.tsx","../src/NavbarItem/NavbarItem.tsx","../src/NavbarItem/NavbarItem.styles.ts","../src/NavbarItemIcon/NavbarItemIcon.tsx","../src/NavbarItemIcon/NavbarItemIcon.styles.ts","../src/NavbarItem/NavbarItemSkeleton.tsx","../src/NavbarMenuItem/NavbarMenuItem.tsx","../src/NavbarMenuItem/NavbarMenuItem.styles.ts","../src/NavbarMenuItem/NavbarMenuItemSkeleton.tsx","../src/NavbarSwitcher/NavbarSwitcher.tsx","../src/NavbarSwitcher/NavbarSwitcher.styles.ts","../src/NavbarSwitcher/NavbarEnvVariant.tsx","../src/NavbarSwitcher/NavbarSwitcherSkeleton.tsx","../src/NavbarBadge/NavbarBadge.tsx","../src/NavbarBadge/NavbarBadge.styles.ts"],"names":["MenuDivider","MenuSectionTitle","Flex","React","css","tokens","mqs","getGlowOnFocusStyles","shadow","increaseHitArea","minSize","getNavbarStyles","maxWidth","variant","generateComponentWithVariants","generateIconComponent","IconVariant","CaretIcon","ContentfulLogoIcon","cx","_Navbar","props","ref","_a","logo","switcher","mainNavigation","secondaryNavigation","account","className","contentMaxWidth","testId","otherProps","__objRest","styles","__spreadProps","__spreadValues","Navbar","hexToRGBA","notificationVarianColorMap","getNavbarAccountStyles","Menu","getNavbarMenuStyles","NavbarMenu","trigger","children","onOpen","onClose","Avatar","_NavbarAccount","avatar","initials","username","hasNotification","notificationVariant","NavbarAccount","SkeletonContainer","SkeletonImage","NavbarAccountSkeleton","ariaLabel","getNavbarItemActiveStyles","commonItemStyles","getNavbarItemStyles","getNavbarItemSkeletonStyles","getNavbarItemIconStyles","NavbarItemIcon","icon","isActive","size","rest","NAVBAR_ITEM_DEFAULT_TAG","_NavbarItem","Comp","label","title","isMenuTrigger","isNavbarItemHasMenu","item","NavbarItem","SkeletonText","NavbarItemSkeleton","estimatedWidth","getNavbarMenuItemStyles","ArrowSquareOutIcon","NAVBAR_MENU_ITEM_DEFAULT_TAG","_NavbarMenuItem","itemIsExternalLink","isExternalLink","externalIcon","NavbarMenuItem","SkeletonBodyText","NavbarMenuItemSkeleton","getNavbarSwitcherStyles","Button","EnvironmentAliasIcon","EnvironmentIcon","NavbarEnvVariant","isAlias","envVariant","color","splitSpaceName","string","startLength","endLength","start","end","remainder","_NavbarSwitcher","middle","NavbarSwitcher","SkeletonDisplayText","NavbarSwitcherSkeleton","getNavbarBadgeStyles","NAVBAR_BADGE_DEFAULT_TAG","_NavbarBadge","NavbarBadge"],"mappings":"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","sourcesContent":["import { MenuDivider } from '@contentful/f36-menu';\nimport { MenuSectionTitle } from '@contentful/f36-menu';\nimport { Navbar as OriginalNavbar } from './Navbar';\n\nimport { NavbarAccount, NavbarAccountSkeleton } from './NavbarAccount';\nimport { NavbarItem, NavbarItemSkeleton } from './NavbarItem';\nimport { NavbarMenuItem, NavbarMenuItemSkeleton } from './NavbarMenuItem';\nimport { NavbarSwitcher, NavbarSwitcherSkeleton } from './NavbarSwitcher';\nimport { NavbarBadge } from './NavbarBadge/NavbarBadge';\n\ntype CompoundNavbar = typeof OriginalNavbar & {\n Item: typeof NavbarItem;\n ItemSkeleton: typeof NavbarItemSkeleton;\n MenuItem: typeof NavbarMenuItem;\n MenuItemSkeleton: typeof NavbarMenuItemSkeleton;\n MenuDivider: typeof MenuDivider;\n MenuSectionTitle: typeof MenuSectionTitle;\n Switcher: typeof NavbarSwitcher;\n SwitcherSkeleton: typeof NavbarSwitcherSkeleton;\n Account: typeof NavbarAccount;\n AccountSkeleton: typeof NavbarAccountSkeleton;\n Badge: typeof NavbarBadge;\n};\n\nexport const Navbar = OriginalNavbar as CompoundNavbar;\nNavbar.Item = NavbarItem;\nNavbar.ItemSkeleton = NavbarItemSkeleton;\nNavbar.MenuItem = NavbarMenuItem;\nNavbar.MenuItemSkeleton = NavbarMenuItemSkeleton;\nNavbar.MenuDivider = MenuDivider;\nNavbar.MenuSectionTitle = MenuSectionTitle;\nNavbar.Switcher = NavbarSwitcher;\nNavbar.SwitcherSkeleton = NavbarSwitcherSkeleton;\nNavbar.Account = NavbarAccount;\nNavbar.AccountSkeleton = NavbarAccountSkeleton;\nNavbar.Badge = NavbarBadge;\n","import { type CommonProps, type ExpandProps, Flex } from '@contentful/f36-core';\nimport React from 'react';\nimport { getNavbarStyles } from './Navbar.styles';\nimport { ContentfulLogoIcon } from './icons';\nimport { cx } from 'emotion';\n\ntype NavbarOwnProps = CommonProps & {\n /**\n * Accepts a React Component that will be displayed\n * instead of the Contentful Logo\n */\n logo?: React.ReactNode;\n\n /** Environment Switcher component */\n switcher?: React.ReactNode;\n\n /** Main Navigation Elements */\n mainNavigation?: React.ReactNode;\n\n /** Secondary Navigation Elements, displayed in the right side */\n secondaryNavigation?: React.ReactNode;\n\n /** User Account Component */\n account?: React.ReactNode;\n\n /**\n * Defines the max-width of the content inside the navbar.\n * @default '100%'\n */\n contentMaxWidth?: string;\n\n /**\n * Describes the size variation of the Navbar\n * Variant wide will set the contentMaxWidth to 1524px\n */\n variant?: 'wide' | 'fullscreen';\n};\n\n// expose only the HTML props that are needed to not pollute the API\ntype NavbarHTMLElementProps = Pick<React.ComponentPropsWithoutRef<'div'>, 'id'>;\n\nexport type NavbarProps = NavbarHTMLElementProps & NavbarOwnProps;\n\nfunction _Navbar(props: ExpandProps<NavbarProps>, ref: React.Ref<HTMLElement>) {\n const {\n logo,\n switcher,\n mainNavigation,\n secondaryNavigation,\n account,\n className,\n contentMaxWidth = '100%',\n testId = 'cf-ui-navbar',\n variant = 'wide',\n ...otherProps\n } = props;\n const styles = getNavbarStyles(contentMaxWidth, variant);\n\n return (\n <Flex\n {...otherProps}\n ref={ref}\n testId={testId}\n className={cx(styles.container, className)}\n as=\"header\"\n >\n <Flex\n as=\"nav\"\n className={styles.navigation}\n justifyContent=\"space-between\"\n >\n <Flex alignItems=\"center\" gap=\"spacingL\">\n {logo || <ContentfulLogoIcon className={styles.logo} />}\n {mainNavigation && (\n <Flex aria-label=\"Main Navigation\" gap=\"spacingXs\">\n {mainNavigation}\n </Flex>\n )}\n </Flex>\n <Flex alignItems=\"center\" gap=\"spacingXs\">\n {switcher}\n {secondaryNavigation && (\n <Flex aria-label=\"Secondary Navigation\">{secondaryNavigation}</Flex>\n )}\n {account && (\n <Flex aria-label=\"Account Navigation\" gap=\"spacingXs\">\n {account}\n </Flex>\n )}\n </Flex>\n </Flex>\n </Flex>\n );\n}\n\nexport const Navbar = React.forwardRef(_Navbar);\n","import { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\nimport { mqs } from './utils.styles';\n\nexport const getNavbarStyles = (maxWidth: string, variant: string) => ({\n container: css({\n justifyContent: 'center',\n backgroundColor: tokens.gray100,\n width: '100%',\n }),\n logo: css({\n height: '28px',\n width: '28px',\n }),\n navigation: css({\n width: '100%',\n maxWidth: variant === 'wide' ? '1524px' : maxWidth,\n padding: `${tokens.spacingS} ${tokens.spacingM}`,\n minHeight: tokens.spacingL,\n [mqs.medium]: {\n padding: `${tokens.spacingM} ${tokens.spacingL}`,\n },\n }),\n});\n","import tokens from '@contentful/f36-tokens';\nimport type { CSSObject } from '@emotion/serialize';\n\ntype screens = 'medium' | 'large' | 'xlarge';\ntype mediaqueries = Record<screens, string>;\nexport const mqs: mediaqueries = {\n medium: '@media (min-width: 480px)',\n large: '@media (min-width: 768px)',\n xlarge: '@media (min-width: 1920px)',\n};\n\nexport const getGlowOnFocusStyles = (\n shadow: string = tokens.glowPrimary,\n): CSSObject => ({\n '&:focus': {\n boxShadow: shadow,\n },\n '&:focus:not(:focus-visible)': {\n boxShadow: 'unset',\n },\n '&:focus-visible': {\n boxShadow: shadow,\n },\n});\n\nexport const increaseHitArea = (minSize = '44px'): CSSObject => ({\n overflow: 'visible',\n position: 'relative',\n '&:after': {\n minHeight: minSize,\n minWidth: minSize,\n position: 'absolute',\n width: '100%',\n content: '\"\"',\n left: '50%',\n top: '50%',\n transform: 'translate(-50%, -50%)',\n },\n});\n","import React from 'react';\nimport tokens from '@contentful/f36-tokens';\nimport {\n generateComponentWithVariants,\n generateIconComponent,\n IconVariant,\n} from '@contentful/f36-icon';\n\nexport const CaretIcon = generateComponentWithVariants({\n variants: {\n [IconVariant.Active]: generateIconComponent({\n path: (\n <>\n <path\n 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\"\n fill={tokens.blue300}\n />\n </>\n ),\n viewBox: '0 0 12 12',\n }),\n [IconVariant.Default]: generateIconComponent({\n path: (\n <>\n <path\n 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\"\n fill={tokens.gray400}\n />\n </>\n ),\n viewBox: '0 0 12 12',\n }),\n },\n});\n","import React from 'react';\nimport { generateIconComponent } from '@contentful/f36-icon';\n\nexport const ContentfulLogoIcon = /*#__PURE__*/ generateIconComponent({\n name: 'ContentfulLogoIcon',\n viewBox: '0 0 28 28',\n path: (\n <>\n <path\n fill=\"#1773EB\"\n 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\"\n />\n <path\n fill=\"#E44F20\"\n 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\"\n />\n <path\n fill=\"#FFDA00\"\n 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\"\n />\n <path\n fill=\"#1773EB\"\n 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\"\n />\n <path\n fill=\"#E44F20\"\n 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\"\n />\n </>\n ),\n});\n","import React from 'react';\nimport { cx } from 'emotion';\nimport { getNavbarAccountStyles } from './NavbarAccount.styles';\nimport {\n type PropsWithHTMLElement,\n type CommonProps,\n type ExpandProps,\n} from '@contentful/f36-core';\nimport { NavbarMenu } from '../NavbarMenu/NavbarMenu';\nimport { Avatar } from '@contentful/f36-avatar';\nimport { Flex } from '@contentful/f36-core';\n\ntype NavbarAccountOwnProps = CommonProps & {\n children: React.ReactNode;\n username: string;\n avatar?: string;\n initials?: string;\n hasNotification?: boolean;\n /**\n * @default 'warning'\n */\n notificationVariant?: 'warning' | 'negative' | 'info';\n};\n\nexport type NavbarAccountProps = PropsWithHTMLElement<\n NavbarAccountOwnProps,\n 'button'\n>;\n\nfunction _NavbarAccount(\n props: ExpandProps<NavbarAccountProps>,\n ref: React.Ref<HTMLButtonElement>,\n) {\n const {\n children,\n className,\n testId = 'cf-ui-navbar-account-trigger',\n avatar,\n initials,\n username,\n hasNotification,\n notificationVariant = 'warning',\n ...otherProps\n } = props;\n const styles = getNavbarAccountStyles();\n\n return (\n <NavbarMenu\n trigger={\n <Flex\n as=\"button\"\n {...otherProps}\n ref={ref}\n className={cx(styles.navbarAccount, className)}\n testId={testId}\n alignItems=\"center\"\n aria-label=\"Account Menu\"\n >\n <Avatar\n src={avatar}\n initials={initials}\n size=\"small\"\n variant=\"user\"\n />\n {hasNotification ? (\n <span className={styles.notificationIcon(notificationVariant)} />\n ) : null}\n </Flex>\n }\n >\n {children}\n </NavbarMenu>\n );\n}\n\nexport const NavbarAccount = React.forwardRef(_NavbarAccount);\n","import { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\nimport { NavbarAccountProps } from './NavbarAccount';\nimport { getGlowOnFocusStyles, increaseHitArea } from '../utils.styles';\nimport { hexToRGBA } from '@contentful/f36-utils';\n\nconst notificationVarianColorMap: Record<\n NavbarAccountProps['notificationVariant'],\n string\n> = {\n warning: tokens.colorWarning,\n negative: tokens.colorNegative,\n info: tokens.blue500,\n};\n\nexport const getNavbarAccountStyles = () => ({\n navbarAccount: css(\n {\n // default button reset styles\n margin: 0,\n padding: 0,\n border: 0,\n cursor: 'pointer',\n background: 'none',\n position: 'relative',\n outline: 'none',\n overflow: 'visible',\n borderRadius: '50%',\n '&:before': css({\n content: '\"\"',\n display: 'block',\n position: 'absolute',\n height: '24px',\n width: '24px',\n backgroundColor: 'transparent',\n borderRadius: '50%',\n }),\n '&:hover:before': css({\n backgroundColor: hexToRGBA(tokens.gray300, 0.15),\n }),\n },\n getGlowOnFocusStyles(),\n increaseHitArea(),\n ),\n avatar: css({\n borderRadius: '50%',\n display: 'block',\n height: '24px',\n width: '24px',\n }),\n notificationIcon: (variant: NavbarAccountProps['notificationVariant']) =>\n css({\n position: 'absolute',\n top: 0,\n right: 0,\n height: tokens.spacingS,\n width: tokens.spacingS,\n borderRadius: '50%',\n border: `2px solid ${tokens.gray100}`,\n backgroundColor: notificationVarianColorMap[variant],\n transform: 'translate(30%, -30%)',\n }),\n});\n","import React from 'react';\nimport { Menu, type MenuListProps, type MenuProps } from '@contentful/f36-menu';\nimport { getNavbarMenuStyles } from './NavbarMenu.styles';\n\nexport type NavbarMenuProps = {\n trigger: React.ReactNode;\n children?: React.ReactNode;\n} & Pick<MenuListProps, 'testId'> &\n Pick<MenuProps, 'onOpen' | 'onClose'>;\n\nexport const NavbarMenu = (props: NavbarMenuProps) => {\n const {\n trigger,\n children,\n testId = 'cf-ui-navbar-menu-list',\n onOpen,\n onClose,\n } = props;\n const styles = getNavbarMenuStyles();\n\n return (\n <Menu onOpen={onOpen} onClose={onClose}>\n <Menu.Trigger>{trigger}</Menu.Trigger>\n <Menu.List className={styles.menuList} testId={testId}>\n {children}\n </Menu.List>\n </Menu>\n );\n};\n","import { css } from 'emotion';\n\nexport const getNavbarMenuStyles = () => ({\n menuList: css({\n minWidth: '250px',\n }),\n});\n","import React from 'react';\nimport { SkeletonContainer, SkeletonImage } from '@contentful/f36-skeleton';\nimport tokens from '@contentful/f36-tokens';\n\nexport function NavbarAccountSkeleton({ ariaLabel }: { ariaLabel?: string }) {\n return (\n <SkeletonContainer\n svgWidth={24}\n svgHeight={24}\n ariaLabel={ariaLabel}\n backgroundColor={tokens.gray300}\n foregroundColor={tokens.gray200}\n >\n <SkeletonImage width={24} height={24} radiusX={12} radiusY={12} />\n </SkeletonContainer>\n );\n}\n","import React from 'react';\nimport { cx } from 'emotion';\nimport { getNavbarItemStyles } from './NavbarItem.styles';\nimport { NavbarMenu, type NavbarMenuProps } from '../NavbarMenu/NavbarMenu';\nimport {\n NavbarItemIcon,\n type NavbarItemIconProps,\n} from '../NavbarItemIcon/NavbarItemIcon';\nimport { CaretIcon } from '../icons';\nimport type {\n CommonProps,\n ExpandProps,\n PolymorphicComponent,\n PolymorphicProps,\n} from '@contentful/f36-core';\n\nconst NAVBAR_ITEM_DEFAULT_TAG = 'button';\n\ntype NavbarItemTriggerProps = CommonProps & {\n label?: string;\n title?: string;\n icon?: NavbarItemIconProps['icon'];\n isActive?: boolean;\n as?: React.ElementType;\n};\n\ntype NavbarItemAsMenuProps = NavbarItemTriggerProps &\n Pick<NavbarMenuProps, 'onOpen' | 'onClose'> & {\n children: React.ReactNode;\n };\ntype NavbarItemAsItemProps = NavbarItemTriggerProps & {\n children?: never;\n onOpen?: never;\n onClose?: never;\n};\ntype NavbarItemOwnProps = NavbarItemAsItemProps | NavbarItemAsMenuProps;\n\nexport type NavbarItemProps<\n E extends React.ElementType = typeof NAVBAR_ITEM_DEFAULT_TAG,\n> = PolymorphicProps<NavbarItemOwnProps, E>;\n\nfunction _NavbarItem(\n props: NavbarItemProps<React.ElementType>,\n ref: React.Ref<any>,\n) {\n const {\n as: Comp = NAVBAR_ITEM_DEFAULT_TAG,\n icon,\n label,\n title,\n children,\n className,\n isActive,\n testId = 'cf-ui-navbar-item',\n onOpen,\n onClose,\n ...otherProps\n } = props;\n const styles = getNavbarItemStyles();\n const isMenuTrigger = isNavbarItemHasMenu(props);\n const item = (\n <Comp\n {...otherProps}\n ref={ref}\n data-test-id={testId}\n className={cx(\n styles.navbarItem,\n isMenuTrigger && styles.navbarItemMenuTrigger,\n isActive && styles.isActive,\n className,\n )}\n aria-label={title ? '' : label}\n >\n {icon && <NavbarItemIcon icon={icon} isActive={isActive} />}\n {title && <span>{title}</span>}\n {title && isMenuTrigger && <CaretIcon size=\"tiny\" isActive={isActive} />}\n </Comp>\n );\n\n if (isMenuTrigger) {\n return (\n <NavbarMenu\n trigger={item}\n testId={testId}\n onOpen={onOpen}\n onClose={onClose}\n >\n {children}\n </NavbarMenu>\n );\n }\n\n return item;\n}\n\nconst isNavbarItemHasMenu = <E extends React.ElementType>(\n props: NavbarItemProps<E>,\n): props is PolymorphicProps<NavbarItemAsMenuProps, E> =>\n Boolean(props.children);\n\nexport const NavbarItem: PolymorphicComponent<\n ExpandProps<NavbarItemOwnProps>,\n typeof NAVBAR_ITEM_DEFAULT_TAG\n> = React.forwardRef(_NavbarItem);\n","import { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\nimport { hexToRGBA } from '@contentful/f36-utils';\nimport { getGlowOnFocusStyles, increaseHitArea } from '../utils.styles';\n\nexport const getNavbarItemActiveStyles = () =>\n css({\n backgroundColor: tokens.blue100,\n border: `1px solid ${tokens.blue400}`,\n color: tokens.blue600,\n '&:hover': {\n backgroundColor: tokens.blue100,\n },\n });\n\nconst commonItemStyles = {\n display: 'flex',\n justifyContent: 'center',\n padding: `${tokens.spacing2Xs} ${tokens.spacingXs}`,\n alignItems: 'center',\n background: 'none',\n gap: tokens.spacing2Xs,\n};\n\nexport const getNavbarItemStyles = () => ({\n navbarItem: css(\n commonItemStyles,\n {\n appearance: 'none',\n background: 'none',\n border: '1px solid transparent',\n margin: 0,\n outline: 'none',\n fontSize: tokens.fontSizeM,\n lineHeight: tokens.lineHeightS,\n fontWeight: tokens.fontWeightMedium,\n position: 'relative',\n textAlign: 'left',\n whiteSpace: 'nowrap',\n cursor: 'pointer',\n hyphens: 'auto',\n textDecoration: 'none',\n color: tokens.gray800,\n boxSizing: 'border-box',\n transition: `color ${tokens.transitionDurationShort} ${tokens.transitionEasingCubicBezier}`,\n borderRadius: tokens.borderRadiusMedium,\n minWidth: '44px',\n\n '&:hover': {\n backgroundColor: hexToRGBA(tokens.gray900, 0.05),\n },\n\n '&:hover::before': {\n opacity: 1,\n scale: '1',\n },\n\n '&:active::before': {\n backgroundColor: `rgba(255, 255, 255, 0.1)`,\n },\n '&:disabled': {\n cursor: 'auto',\n },\n\n '& svg': {\n transition: `fill ${tokens.transitionDurationShort} ${tokens.transitionEasingCubicBezier}`,\n },\n '& > svg, & > span': {\n zIndex: tokens.zIndexDefault,\n },\n },\n getGlowOnFocusStyles(),\n increaseHitArea(),\n ),\n navbarItemMenuTrigger: css({\n paddingRight: tokens.spacingXs,\n }),\n isActive: getNavbarItemActiveStyles(),\n});\n\nexport const getNavbarItemSkeletonStyles = () => ({\n itemSkeleton: css(commonItemStyles),\n});\n","import React from 'react';\nimport type { IconProps } from '@contentful/f36-icons';\nimport { getNavbarItemIconStyles } from './NavbarItemIcon.styles';\nimport { cx } from 'emotion';\n\nexport type NavbarItemIconProps = {\n icon: React.ReactElement<IconProps>;\n} & Partial<Pick<IconProps, 'isActive'>>;\n\nexport const NavbarItemIcon = ({ icon, isActive }: NavbarItemIconProps) => {\n const { className, size, ...rest } = icon.props;\n const styles = getNavbarItemIconStyles();\n\n return React.cloneElement(icon, {\n className: cx(className, styles.navbarItemIcon),\n size: size || 'small',\n isActive,\n ...rest,\n });\n};\n","import { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\nexport const getNavbarItemIconStyles = () => ({\n navbarItemIcon: css({\n '&:last-child&:not(:only-child)': {\n marginLeft: tokens.spacing2Xs,\n },\n 'img&': {\n borderRadius: tokens.borderRadiusSmall,\n maxWidth: tokens.spacingM,\n maxHeight: tokens.spacingM,\n },\n }),\n});\n","import React from 'react';\nimport { SkeletonContainer, SkeletonText } from '@contentful/f36-skeleton';\nimport tokens from '@contentful/f36-tokens';\nimport { getNavbarItemSkeletonStyles } from './NavbarItem.styles';\n\nexport const NavbarItemSkeleton = ({\n estimatedWidth,\n}: {\n estimatedWidth: number;\n}) => {\n const styles = getNavbarItemSkeletonStyles();\n\n return (\n <SkeletonContainer\n className={styles.itemSkeleton}\n svgWidth={estimatedWidth}\n svgHeight={32}\n backgroundColor={tokens.gray300}\n foregroundColor={tokens.gray200}\n >\n <SkeletonText\n lineHeight={6}\n numberOfLines={1}\n offsetTop={10}\n radiusX={tokens.borderRadiusSmall}\n radiusY={tokens.borderRadiusSmall}\n />\n </SkeletonContainer>\n );\n};\n","import React from 'react';\nimport { cx } from 'emotion';\nimport { getNavbarMenuItemStyles } from './NavbarMenuItem.styles';\nimport { Menu, type MenuItemProps } from '@contentful/f36-menu';\nimport {\n NavbarItemIcon,\n type NavbarItemIconProps,\n} from '../NavbarItemIcon/NavbarItemIcon';\nimport { ArrowSquareOutIcon } from '@contentful/f36-icons';\nimport type {\n ExpandProps,\n PolymorphicComponent,\n PolymorphicProps,\n} from '@contentful/f36-core';\n\nconst NAVBAR_MENU_ITEM_DEFAULT_TAG = 'button';\n\ntype NavbarMenuItemOwnProps = {\n children?: null;\n title: string;\n icon?: NavbarItemIconProps['icon'];\n as?: React.ElementType;\n} & Omit<MenuItemProps, 'children' | 'as'>;\n\nexport type NavbarMenuItemProps<\n E extends React.ElementType = typeof NAVBAR_MENU_ITEM_DEFAULT_TAG,\n> = PolymorphicProps<NavbarMenuItemOwnProps, E>;\n\nfunction _NavbarMenuItem(\n props: NavbarMenuItemProps<React.ElementType>,\n ref: React.Ref<any>,\n) {\n const {\n as: Comp = NAVBAR_MENU_ITEM_DEFAULT_TAG,\n icon,\n title,\n className,\n ...otherProps\n } = props;\n const styles = getNavbarMenuItemStyles();\n\n const itemIsExternalLink = isExternalLink(\n props as unknown as NavbarMenuItemProps<'a'>,\n );\n\n return (\n <Menu.Item\n {...otherProps}\n ref={ref}\n as={Comp as MenuItemProps['as']}\n className={cx(styles.navbarMenuItem, className)}\n >\n {icon ? (\n <NavbarItemIcon icon={icon} />\n ) : (\n itemIsExternalLink && externalIcon\n )}\n <span>{title}</span>\n {icon && itemIsExternalLink ? externalIcon : null}\n </Menu.Item>\n );\n}\n\nconst externalIcon = <NavbarItemIcon icon={<ArrowSquareOutIcon />} />;\n\nconst isExternalLink = (props: NavbarMenuItemProps<'a'>) =>\n props.as === 'a' && props.target === '_blank';\n\nexport const NavbarMenuItem: PolymorphicComponent<\n ExpandProps<NavbarMenuItemOwnProps>,\n typeof NAVBAR_MENU_ITEM_DEFAULT_TAG\n> = React.forwardRef(_NavbarMenuItem);\n","import { css } from 'emotion';\nexport const getNavbarMenuItemStyles = () => ({\n navbarMenuItem: css({\n display: 'flex',\n justifyContent: 'flex-start',\n alignItems: 'center',\n }),\n});\n","import React from 'react';\nimport { Menu } from '@contentful/f36-menu';\nimport {\n SkeletonBodyText,\n SkeletonContainer,\n SkeletonImage,\n} from '@contentful/f36-skeleton';\nimport { Flex } from '@contentful/f36-core';\n\nimport tokens from '@contentful/f36-tokens';\n\nexport const NavbarMenuItemSkeleton = ({\n ariaLabel,\n}: {\n ariaLabel?: string;\n}) => (\n <Menu.Item>\n <Flex alignItems=\"center\" gap={tokens.spacingXs}>\n <SkeletonContainer svgHeight={16} svgWidth={18}>\n <SkeletonImage width={16} height={16} />\n </SkeletonContainer>\n <SkeletonContainer svgHeight={16} svgWidth={190} ariaLabel={ariaLabel}>\n <SkeletonBodyText numberOfLines={1} />\n </SkeletonContainer>\n </Flex>\n </Menu.Item>\n);\n","import React, { type ReactNode } from 'react';\nimport { getNavbarSwitcherStyles } from './NavbarSwitcher.styles';\nimport { Button } from '@contentful/f36-button';\nimport {\n Flex,\n type CommonProps,\n type PropsWithHTMLElement,\n type ExpandProps,\n} from '@contentful/f36-core';\nimport { cx } from 'emotion';\nimport { NavbarEnvVariant } from './NavbarEnvVariant';\n\ntype TruncateOptions = {\n /**\n * Number of characters to keep at the start of the string\n * @default 5\n */\n start?: number;\n /**\n * Number of characters to keep at the end of the string\n * @default 6\n */\n end?: number;\n};\n\nfunction splitSpaceName(\n string: string,\n {\n start: startLength = 5,\n end: endLength = 6,\n }: TruncateOptions | undefined = {},\n) {\n if (string.length <= startLength + endLength) {\n return [string, undefined, undefined];\n }\n\n const start = startLength > 0 ? string.slice(0, startLength) : '';\n const end = endLength > 0 ? string.slice(-endLength) : '';\n const remainder = string.slice(startLength, string.length - endLength);\n\n return [start, remainder, end];\n}\n\ntype NavbarSwitcherOwnProps = CommonProps & {\n children: ReactNode;\n isCircle?: boolean;\n envVariant?: 'master' | 'non-master';\n isAlias?: boolean;\n};\n\nexport type NavbarSwitcherProps = PropsWithHTMLElement<\n NavbarSwitcherOwnProps,\n 'button'\n>;\n\nfunction _NavbarSwitcher(\n props: ExpandProps<NavbarSwitcherProps>,\n ref: React.Ref<HTMLButtonElement>,\n) {\n const {\n children,\n className,\n envVariant,\n isAlias,\n testId = 'cf-ui-navbar-switcher',\n ...otherProps\n } = props;\n const styles = getNavbarSwitcherStyles();\n const [start, middle, end] =\n typeof children === 'string' ? splitSpaceName(children) : [];\n\n return (\n <Button\n {...otherProps}\n aria-label=\"Space and Environment Navigation\"\n className={cx(styles.navbarSwitcher, className)}\n endIcon={\n envVariant && (\n <NavbarEnvVariant envVariant={envVariant} isAlias={isAlias} />\n )\n }\n ref={ref}\n testId={testId}\n variant=\"transparent\"\n >\n <Flex\n alignItems=\"center\"\n className={styles.switcherSpaceName}\n flexDirection=\"row\"\n >\n {start !== undefined ? (\n <>\n <span>{start}</span>\n {middle && (\n <span className={styles.switcherSpaceNameTruncation}>\n {middle}\n </span>\n )}\n {end && <span>{end}</span>}\n </>\n ) : (\n children\n )}\n </Flex>\n </Button>\n );\n}\n\nexport const NavbarSwitcher = React.forwardRef(_NavbarSwitcher);\n","import { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\nimport { hexToRGBA } from '@contentful/f36-utils';\n\nimport { getGlowOnFocusStyles, increaseHitArea } from '../utils.styles';\n\nexport const getNavbarSwitcherStyles = () => ({\n navbarSwitcher: css(\n {\n color: tokens.gray600,\n flexShrink: 1,\n fontWeight: tokens.fontWeightMedium,\n maxWidth: '100%',\n minHeight: 'unset',\n padding: `${tokens.spacing2Xs} ${tokens.spacingXs}`,\n '&:hover': {\n backgroundColor: hexToRGBA(tokens.gray900, 0.05),\n },\n },\n getGlowOnFocusStyles(),\n increaseHitArea(),\n ),\n\n switcherSpaceName: css({\n // Set min-width only when there are three span children\n '&:has(> span:last-child:nth-child(3))': {\n minWidth: '12ch',\n },\n }),\n\n switcherSpaceNameTruncation: css({\n flexShrink: 1,\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n }),\n});\n","import React from 'react';\nimport { NavbarSwitcherProps } from '../NavbarSwitcher/NavbarSwitcher';\nimport { EnvironmentAliasIcon, EnvironmentIcon } from '@contentful/f36-icons';\nimport tokens from '@contentful/f36-tokens';\n\nexport type NavbarEnvVariantProps = Pick<\n NavbarSwitcherProps,\n 'isAlias' | 'envVariant'\n>;\n\nexport function NavbarEnvVariant({\n isAlias,\n envVariant,\n}: NavbarEnvVariantProps) {\n const color = envVariant === 'master' ? tokens.green600 : tokens.orange500;\n\n return isAlias ? (\n <EnvironmentAliasIcon color={color} size=\"tiny\" />\n ) : (\n <EnvironmentIcon color={color} size=\"tiny\" />\n );\n}\n","import React from 'react';\nimport {\n SkeletonContainer,\n SkeletonDisplayText,\n} from '@contentful/f36-skeleton';\nimport tokens from '@contentful/f36-tokens';\n\nexport const NavbarSwitcherSkeleton = ({\n estimatedWidth,\n}: {\n estimatedWidth: number;\n}) => (\n <SkeletonContainer\n svgWidth={estimatedWidth}\n svgHeight={24}\n backgroundColor={tokens.gray300}\n foregroundColor={tokens.gray200}\n >\n <SkeletonDisplayText\n lineHeight={24}\n numberOfLines={1}\n radiusX={12}\n radiusY={12}\n />\n </SkeletonContainer>\n);\n","import React from 'react';\nimport { cx } from 'emotion';\nimport { getNavbarBadgeStyles } from './NavbarBadge.styles';\nimport type {\n CommonProps,\n ExpandProps,\n PolymorphicComponent,\n PolymorphicProps,\n} from '@contentful/f36-core';\n\nconst NAVBAR_BADGE_DEFAULT_TAG = 'div';\n\ntype NavbarBadgeOwnProps = CommonProps & {\n children?: React.ReactNode;\n as?: React.ElementType;\n};\n\nexport type NavbarBadgeProps<\n E extends React.ElementType = typeof NAVBAR_BADGE_DEFAULT_TAG,\n> = PolymorphicProps<NavbarBadgeOwnProps, E>;\n\nfunction _NavbarBadge(\n props: NavbarBadgeProps<React.ElementType>,\n ref: React.Ref<any>,\n) {\n const {\n as: Comp = NAVBAR_BADGE_DEFAULT_TAG,\n children,\n className,\n testId = 'cf-ui-navbar-badge',\n ...otherProps\n } = props;\n const styles = getNavbarBadgeStyles();\n\n return (\n <Comp\n {...otherProps}\n ref={ref}\n className={cx(styles.navbarBadge, className)}\n data-test-id={testId}\n >\n {children}\n </Comp>\n );\n}\n\nexport const NavbarBadge: PolymorphicComponent<\n ExpandProps<NavbarBadgeOwnProps>,\n typeof NAVBAR_BADGE_DEFAULT_TAG\n> = React.forwardRef(_NavbarBadge);\n","import { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\nexport const getNavbarBadgeStyles = () => ({\n navbarBadge: css({\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n background: 'none',\n border: `1px solid ${tokens.purple600}`,\n margin: 0,\n outline: 'none',\n fontSize: tokens.fontSizeS,\n lineHeight: tokens.lineHeightS,\n fontWeight: tokens.fontWeightMedium,\n textAlign: 'center',\n padding: `0 ${tokens.spacingXs}`,\n textDecoration: 'none',\n color: `${tokens.purple600}!important`,\n borderRadius: '1.75rem',\n userSelect: 'none',\n }),\n});\n"]}
1
+ {"version":3,"sources":["../src/CompoundNavbar.ts","../src/Navbar.tsx","../src/Navbar.styles.ts","../src/utils.styles.ts","../src/icons/CaretIcon.tsx","../src/icons/ContentfulLogoIcon.tsx","../src/NavbarMenu/NavbarMenu.tsx","../src/NavbarMenu/NavbarMenu.styles.ts","../src/NavbarAccount/NavbarAccount.tsx","../src/NavbarAccount/NavbarAccount.styles.ts","../src/NavbarAccount/NavbarAccountSkeleton.tsx","../src/NavbarItem/NavbarItem.tsx","../src/NavbarItem/NavbarItem.styles.ts","../src/NavbarItemIcon/NavbarItemIcon.tsx","../src/NavbarItemIcon/NavbarItemIcon.styles.ts","../src/NavbarItem/NavbarItemSkeleton.tsx","../src/NavbarMenuItem/NavbarMenuItem.tsx","../src/NavbarMenuItem/NavbarMenuItem.styles.ts","../src/NavbarMenuItem/NavbarMenuItemSkeleton.tsx","../src/NavbarSwitcher/NavbarSwitcher.tsx","../src/NavbarSwitcher/NavbarSwitcher.styles.ts","../src/NavbarSwitcher/NavbarEnvVariant.tsx","../src/NavbarSwitcher/NavbarSwitcherSkeleton.tsx","../src/NavbarBadge/NavbarBadge.tsx","../src/NavbarBadge/NavbarBadge.styles.ts","../src/NavbarSubmenu/NavbarSubmenu.tsx","../src/NavbarSubmenu/NavbarMenu.styles.ts"],"names":["MenuDivider","MenuSectionTitle","Flex","React","css","tokens","mqs","getGlowOnFocusStyles","shadow","increaseHitArea","minSize","getNavbarStyles","maxWidth","variant","generateComponentWithVariants","generateIconComponent","IconVariant","CaretIcon","ContentfulLogoIcon","cx","Button","ListIcon","Menu","getNavbarMenuStyles","NavbarMenu","props","trigger","children","testId","onOpen","onClose","styles","_Navbar","ref","_a","logo","switcher","mainNavigation","secondaryNavigation","account","mobileNavigation","className","contentMaxWidth","otherProps","__objRest","__spreadProps","__spreadValues","Navbar","hexToRGBA","notificationVarianColorMap","getNavbarAccountStyles","Avatar","_NavbarAccount","avatar","initials","username","hasNotification","notificationVariant","NavbarAccount","SkeletonContainer","SkeletonImage","NavbarAccountSkeleton","ariaLabel","getNavbarItemActiveStyles","commonItemStyles","getNavbarItemStyles","title","getNavbarItemSkeletonStyles","getNavbarItemIconStyles","NavbarItemIcon","icon","isActive","iconClassName","size","rest","NAVBAR_ITEM_DEFAULT_TAG","_NavbarItem","Comp","label","isMenuTrigger","isNavbarItemHasMenu","item","NavbarItem","SkeletonText","NavbarItemSkeleton","estimatedWidth","getNavbarMenuItemStyles","ArrowSquareOutIcon","NAVBAR_MENU_ITEM_DEFAULT_TAG","_NavbarMenuItem","itemIsExternalLink","isExternalLink","externalIcon","NavbarMenuItem","SkeletonBodyText","NavbarMenuItemSkeleton","getNavbarSwitcherStyles","EnvironmentAliasIcon","EnvironmentIcon","NavbarEnvVariant","isAlias","envVariant","color","splitSpaceName","string","startLength","endLength","start","end","remainder","_NavbarSwitcher","middle","NavbarSwitcher","SkeletonDisplayText","NavbarSwitcherSkeleton","getNavbarBadgeStyles","NAVBAR_BADGE_DEFAULT_TAG","_NavbarBadge","NavbarBadge","getNavbarSubmenuStyles","NavbarSubmenu"],"mappings":"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","sourcesContent":["import { MenuDivider } from '@contentful/f36-menu';\nimport { MenuSectionTitle } from '@contentful/f36-menu';\nimport { Navbar as OriginalNavbar } from './Navbar';\n\nimport { NavbarAccount, NavbarAccountSkeleton } from './NavbarAccount';\nimport { NavbarItem, NavbarItemSkeleton } from './NavbarItem';\nimport { NavbarMenuItem, NavbarMenuItemSkeleton } from './NavbarMenuItem';\nimport { NavbarSwitcher, NavbarSwitcherSkeleton } from './NavbarSwitcher';\nimport { NavbarBadge } from './NavbarBadge/NavbarBadge';\nimport { NavbarSubmenu } from './NavbarSubmenu/NavbarSubmenu';\n\ntype CompoundNavbar = typeof OriginalNavbar & {\n Item: typeof NavbarItem;\n ItemSkeleton: typeof NavbarItemSkeleton;\n MenuItem: typeof NavbarMenuItem;\n MenuItemSkeleton: typeof NavbarMenuItemSkeleton;\n MenuDivider: typeof MenuDivider;\n MenuSectionTitle: typeof MenuSectionTitle;\n Submenu: typeof NavbarSubmenu;\n Switcher: typeof NavbarSwitcher;\n SwitcherSkeleton: typeof NavbarSwitcherSkeleton;\n Account: typeof NavbarAccount;\n AccountSkeleton: typeof NavbarAccountSkeleton;\n Badge: typeof NavbarBadge;\n};\n\nexport const Navbar = OriginalNavbar as CompoundNavbar;\nNavbar.Item = NavbarItem;\nNavbar.ItemSkeleton = NavbarItemSkeleton;\nNavbar.MenuItem = NavbarMenuItem;\nNavbar.MenuItemSkeleton = NavbarMenuItemSkeleton;\nNavbar.MenuDivider = MenuDivider;\nNavbar.MenuSectionTitle = MenuSectionTitle;\nNavbar.Submenu = NavbarSubmenu;\nNavbar.Switcher = NavbarSwitcher;\nNavbar.SwitcherSkeleton = NavbarSwitcherSkeleton;\nNavbar.Account = NavbarAccount;\nNavbar.AccountSkeleton = NavbarAccountSkeleton;\nNavbar.Badge = NavbarBadge;\n","import { type CommonProps, type ExpandProps, Flex } from '@contentful/f36-core';\nimport React from 'react';\nimport { getNavbarStyles } from './Navbar.styles';\nimport { ContentfulLogoIcon } from './icons';\nimport { cx } from 'emotion';\nimport { Button } from '@contentful/f36-button';\nimport { ListIcon } from '@contentful/f36-icons';\nimport { NavbarMenu } from './NavbarMenu/NavbarMenu';\n\ntype NavbarOwnProps = CommonProps & {\n /**\n * Accepts a React Component that will be displayed\n * instead of the Contentful Logo\n */\n logo?: React.ReactNode;\n\n /** Environment Switcher component */\n switcher?: React.ReactNode;\n\n /** Main Navigation Elements */\n mainNavigation?: React.ReactNode;\n\n /** Secondary Navigation Elements, displayed in the right side */\n secondaryNavigation?: React.ReactNode;\n\n /** User Account Component */\n account?: React.ReactNode;\n\n /** Navigation displayed on mobile versions */\n mobileNavigation?: React.ReactNode;\n\n /**\n * Defines the max-width of the content inside the navbar.\n * @default '100%'\n */\n contentMaxWidth?: string;\n\n /**\n * Describes the size variation of the Navbar\n * Variant wide will set the contentMaxWidth to 1524px\n */\n variant?: 'wide' | 'fullscreen';\n};\n\n// expose only the HTML props that are needed to not pollute the API\ntype NavbarHTMLElementProps = Pick<React.ComponentPropsWithoutRef<'div'>, 'id'>;\n\nexport type NavbarProps = NavbarHTMLElementProps & NavbarOwnProps;\n\nfunction _Navbar(props: ExpandProps<NavbarProps>, ref: React.Ref<HTMLElement>) {\n const {\n logo,\n switcher,\n mainNavigation,\n secondaryNavigation,\n account,\n mobileNavigation,\n className,\n contentMaxWidth = '100%',\n testId = 'cf-ui-navbar',\n variant = 'wide',\n ...otherProps\n } = props;\n const styles = getNavbarStyles(contentMaxWidth, variant);\n\n return (\n <Flex\n {...otherProps}\n ref={ref}\n testId={testId}\n className={cx(styles.container, className)}\n as=\"header\"\n >\n <Flex\n as=\"nav\"\n className={styles.navigation}\n justifyContent=\"space-between\"\n gap=\"spacingXs\"\n >\n <Flex alignItems=\"center\" gap=\"spacingL\">\n {logo || <ContentfulLogoIcon className={styles.logo} />}\n {mobileNavigation && (\n <NavbarMenu\n trigger={\n <Button\n className={styles.mobileNavigationButton}\n startIcon={<ListIcon size=\"medium\" />}\n >\n Menu\n </Button>\n }\n >\n {mobileNavigation}\n </NavbarMenu>\n )}\n {mainNavigation && (\n <Flex\n className={styles.mainNavigation}\n aria-label=\"Main Navigation\"\n gap=\"spacingXs\"\n >\n {mainNavigation}\n </Flex>\n )}\n </Flex>\n <Flex alignItems=\"center\" gap=\"spacingXs\">\n <Flex alignItems=\"center\">{switcher}</Flex>\n <Flex alignItems=\"center\" gap=\"spacingXs\">\n {secondaryNavigation && (\n <Flex\n className={styles.secondaryNavigationWrapper}\n aria-label=\"Secondary Navigation\"\n >\n {secondaryNavigation}\n </Flex>\n )}\n {account && (\n <Flex\n className={styles.account}\n aria-label=\"Account Navigation\"\n gap=\"spacingXs\"\n >\n {account}\n </Flex>\n )}\n </Flex>\n </Flex>\n </Flex>\n </Flex>\n );\n}\n\nexport const Navbar = React.forwardRef(_Navbar);\n","import { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\nimport { mqs } from './utils.styles';\n\nexport const getNavbarStyles = (maxWidth: string, variant: string) => ({\n container: css({\n justifyContent: 'center',\n backgroundColor: tokens.gray100,\n width: '100%',\n }),\n logo: css({\n display: 'none',\n [mqs.small]: {\n display: 'block',\n height: '28px',\n width: '28px',\n },\n }),\n\n navigation: css({\n width: '100%',\n maxWidth: variant === 'wide' ? '1524px' : maxWidth,\n padding: `${tokens.spacingS} ${tokens.spacingM}`,\n minHeight: tokens.spacingL,\n [mqs.small]: {\n padding: `${tokens.spacingM} ${tokens.spacingL}`,\n },\n }),\n\n mainNavigation: css({\n display: 'none',\n [mqs.small]: {\n display: 'flex',\n },\n }),\n\n mobileNavigationButton: css({\n display: 'flex',\n height: '36px',\n borderRadius: '10px',\n [mqs.small]: {\n display: 'none',\n },\n }),\n mobileNavigationIcon: css({\n heigt: '20px',\n width: '20px',\n }),\n\n secondaryNavigationWrapper: css({\n '> *:not(:first-child)': {\n display: 'none',\n [mqs.xsmall]: {\n display: 'flex',\n },\n },\n }),\n\n account: css({\n display: 'none',\n [mqs.xsmall]: {\n display: 'flex',\n },\n }),\n});\n","import tokens from '@contentful/f36-tokens';\nimport type { CSSObject } from '@emotion/serialize';\n\ntype screens = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';\ntype mediaqueries = Record<screens, string>;\nexport const mqs: mediaqueries = {\n xsmall: '@media (min-width: 576px)',\n small: '@media (min-width: 867px)',\n medium: '@media (min-width: 1024px)',\n large: '@media (min-width: 1200px)',\n xlarge: '@media (min-width: 1920px)',\n};\n\nexport const getGlowOnFocusStyles = (\n shadow: string = tokens.glowPrimary,\n): CSSObject => ({\n '&:focus': {\n boxShadow: shadow,\n },\n '&:focus:not(:focus-visible)': {\n boxShadow: 'unset',\n },\n '&:focus-visible': {\n boxShadow: shadow,\n },\n});\n\nexport const increaseHitArea = (minSize = '44px'): CSSObject => ({\n overflow: 'visible',\n position: 'relative',\n '&:after': {\n minHeight: minSize,\n minWidth: minSize,\n position: 'absolute',\n width: '100%',\n content: '\"\"',\n left: '50%',\n top: '50%',\n transform: 'translate(-50%, -50%)',\n },\n});\n","import React from 'react';\nimport tokens from '@contentful/f36-tokens';\nimport {\n generateComponentWithVariants,\n generateIconComponent,\n IconVariant,\n} from '@contentful/f36-icon';\n\nexport const CaretIcon = generateComponentWithVariants({\n variants: {\n [IconVariant.Active]: generateIconComponent({\n path: (\n <>\n <path\n 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\"\n fill={tokens.blue300}\n />\n </>\n ),\n viewBox: '0 0 12 12',\n }),\n [IconVariant.Default]: generateIconComponent({\n path: (\n <>\n <path\n 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\"\n fill={tokens.gray400}\n />\n </>\n ),\n viewBox: '0 0 12 12',\n }),\n },\n});\n","import React from 'react';\nimport { generateIconComponent } from '@contentful/f36-icon';\n\nexport const ContentfulLogoIcon = /*#__PURE__*/ generateIconComponent({\n name: 'ContentfulLogoIcon',\n viewBox: '0 0 28 28',\n path: (\n <>\n <path\n fill=\"#1773EB\"\n 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\"\n />\n <path\n fill=\"#E44F20\"\n 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\"\n />\n <path\n fill=\"#FFDA00\"\n 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\"\n />\n <path\n fill=\"#1773EB\"\n 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\"\n />\n <path\n fill=\"#E44F20\"\n 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\"\n />\n </>\n ),\n});\n","import React from 'react';\nimport { Menu, type MenuListProps, type MenuProps } from '@contentful/f36-menu';\nimport { getNavbarMenuStyles } from './NavbarMenu.styles';\n\nexport type NavbarMenuProps = {\n trigger: React.ReactNode;\n children?: React.ReactNode;\n} & Pick<MenuListProps, 'testId'> &\n Pick<MenuProps, 'onOpen' | 'onClose'>;\n\nexport const NavbarMenu = (props: NavbarMenuProps) => {\n const {\n trigger,\n children,\n testId = 'cf-ui-navbar-menu-list',\n onOpen,\n onClose,\n } = props;\n const styles = getNavbarMenuStyles();\n\n return (\n <Menu onOpen={onOpen} onClose={onClose}>\n <Menu.Trigger>{trigger}</Menu.Trigger>\n <Menu.List className={styles.menuList} testId={testId}>\n {children}\n </Menu.List>\n </Menu>\n );\n};\n","import { css } from 'emotion';\nimport { mqs } from '../utils.styles';\n\nexport const getNavbarMenuStyles = () => ({\n menuList: css({\n minWidth: 0,\n [mqs.xsmall]: {\n minWidth: '250px',\n },\n }),\n});\n","import React from 'react';\nimport { cx } from 'emotion';\nimport { getNavbarAccountStyles } from './NavbarAccount.styles';\nimport {\n type PropsWithHTMLElement,\n type CommonProps,\n type ExpandProps,\n} from '@contentful/f36-core';\nimport { NavbarMenu } from '../NavbarMenu/NavbarMenu';\nimport { Avatar } from '@contentful/f36-avatar';\nimport { Flex } from '@contentful/f36-core';\n\ntype NavbarAccountOwnProps = CommonProps & {\n children: React.ReactNode;\n username: string;\n avatar?: string;\n initials?: string;\n hasNotification?: boolean;\n /**\n * @default 'warning'\n */\n notificationVariant?: 'warning' | 'negative' | 'info';\n};\n\nexport type NavbarAccountProps = PropsWithHTMLElement<\n NavbarAccountOwnProps,\n 'button'\n>;\n\nfunction _NavbarAccount(\n props: ExpandProps<NavbarAccountProps>,\n ref: React.Ref<HTMLButtonElement>,\n) {\n const {\n children,\n className,\n testId = 'cf-ui-navbar-account-trigger',\n avatar,\n initials,\n username,\n hasNotification,\n notificationVariant = 'warning',\n ...otherProps\n } = props;\n const styles = getNavbarAccountStyles();\n\n return (\n <NavbarMenu\n trigger={\n <Flex\n as=\"button\"\n {...otherProps}\n ref={ref}\n className={cx(styles.navbarAccount, className)}\n testId={testId}\n alignItems=\"center\"\n aria-label=\"Account Menu\"\n >\n <Avatar\n src={avatar}\n initials={initials}\n size=\"small\"\n variant=\"user\"\n />\n {hasNotification ? (\n <span className={styles.notificationIcon(notificationVariant)} />\n ) : null}\n </Flex>\n }\n >\n {children}\n </NavbarMenu>\n );\n}\n\nexport const NavbarAccount = React.forwardRef(_NavbarAccount);\n","import { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\nimport { NavbarAccountProps } from './NavbarAccount';\nimport { getGlowOnFocusStyles, increaseHitArea } from '../utils.styles';\nimport { hexToRGBA } from '@contentful/f36-utils';\n\nconst notificationVarianColorMap: Record<\n NavbarAccountProps['notificationVariant'],\n string\n> = {\n warning: tokens.colorWarning,\n negative: tokens.colorNegative,\n info: tokens.blue500,\n};\n\nexport const getNavbarAccountStyles = () => ({\n navbarAccount: css(\n {\n // default button reset styles\n margin: 0,\n padding: 0,\n border: 0,\n cursor: 'pointer',\n background: 'none',\n position: 'relative',\n outline: 'none',\n overflow: 'visible',\n borderRadius: '50%',\n '&:before': css({\n content: '\"\"',\n display: 'block',\n position: 'absolute',\n height: '24px',\n width: '24px',\n backgroundColor: 'transparent',\n borderRadius: '50%',\n }),\n '&:hover:before': css({\n backgroundColor: hexToRGBA(tokens.gray300, 0.15),\n }),\n },\n getGlowOnFocusStyles(),\n increaseHitArea(),\n ),\n avatar: css({\n borderRadius: '50%',\n display: 'block',\n height: '24px',\n width: '24px',\n }),\n notificationIcon: (variant: NavbarAccountProps['notificationVariant']) =>\n css({\n position: 'absolute',\n top: 0,\n right: 0,\n height: tokens.spacingS,\n width: tokens.spacingS,\n borderRadius: '50%',\n border: `2px solid ${tokens.gray100}`,\n backgroundColor: notificationVarianColorMap[variant],\n transform: 'translate(30%, -30%)',\n }),\n});\n","import React from 'react';\nimport { SkeletonContainer, SkeletonImage } from '@contentful/f36-skeleton';\nimport tokens from '@contentful/f36-tokens';\n\nexport function NavbarAccountSkeleton({ ariaLabel }: { ariaLabel?: string }) {\n return (\n <SkeletonContainer\n svgWidth={24}\n svgHeight={24}\n ariaLabel={ariaLabel}\n backgroundColor={tokens.gray300}\n foregroundColor={tokens.gray200}\n >\n <SkeletonImage width={24} height={24} radiusX={12} radiusY={12} />\n </SkeletonContainer>\n );\n}\n","import React from 'react';\nimport { cx } from 'emotion';\nimport { getNavbarItemStyles } from './NavbarItem.styles';\nimport { NavbarMenu, type NavbarMenuProps } from '../NavbarMenu/NavbarMenu';\nimport {\n NavbarItemIcon,\n type NavbarItemIconProps,\n} from '../NavbarItemIcon/NavbarItemIcon';\nimport { CaretIcon } from '../icons';\nimport type {\n CommonProps,\n ExpandProps,\n PolymorphicComponent,\n PolymorphicProps,\n} from '@contentful/f36-core';\n\nconst NAVBAR_ITEM_DEFAULT_TAG = 'button';\n\ntype NavbarItemTriggerProps = CommonProps & {\n label?: string;\n title?: string;\n icon?: NavbarItemIconProps['icon'];\n isActive?: boolean;\n as?: React.ElementType;\n};\n\ntype NavbarItemAsMenuProps = NavbarItemTriggerProps &\n Pick<NavbarMenuProps, 'onOpen' | 'onClose'> & {\n children: React.ReactNode;\n };\ntype NavbarItemAsItemProps = NavbarItemTriggerProps & {\n children?: never;\n onOpen?: never;\n onClose?: never;\n};\ntype NavbarItemOwnProps = NavbarItemAsItemProps | NavbarItemAsMenuProps;\n\nexport type NavbarItemProps<\n E extends React.ElementType = typeof NAVBAR_ITEM_DEFAULT_TAG,\n> = PolymorphicProps<NavbarItemOwnProps, E>;\n\nfunction _NavbarItem(\n props: NavbarItemProps<React.ElementType>,\n ref: React.Ref<any>,\n) {\n const {\n as: Comp = NAVBAR_ITEM_DEFAULT_TAG,\n icon,\n label,\n title,\n children,\n className,\n isActive,\n testId = 'cf-ui-navbar-item',\n onOpen,\n onClose,\n ...otherProps\n } = props;\n const styles = getNavbarItemStyles({ title });\n const isMenuTrigger = isNavbarItemHasMenu(props);\n const item = (\n <Comp\n {...otherProps}\n ref={ref}\n data-test-id={testId}\n className={cx(\n styles.navbarItem,\n isMenuTrigger && styles.navbarItemMenuTrigger,\n isActive && styles.isActive,\n className,\n )}\n aria-label={title ? '' : label}\n >\n {icon && (\n <NavbarItemIcon\n className={styles.icon}\n icon={icon}\n isActive={isActive}\n />\n )}\n {title && <span>{title}</span>}\n {title && isMenuTrigger && <CaretIcon size=\"tiny\" isActive={isActive} />}\n </Comp>\n );\n\n if (isMenuTrigger) {\n return (\n <NavbarMenu\n trigger={item}\n testId={testId}\n onOpen={onOpen}\n onClose={onClose}\n >\n {children}\n </NavbarMenu>\n );\n }\n\n return item;\n}\n\nconst isNavbarItemHasMenu = <E extends React.ElementType>(\n props: NavbarItemProps<E>,\n): props is PolymorphicProps<NavbarItemAsMenuProps, E> =>\n Boolean(props.children);\n\nexport const NavbarItem: PolymorphicComponent<\n ExpandProps<NavbarItemOwnProps>,\n typeof NAVBAR_ITEM_DEFAULT_TAG\n> = React.forwardRef(_NavbarItem);\n","import { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\nimport { hexToRGBA } from '@contentful/f36-utils';\nimport { getGlowOnFocusStyles, increaseHitArea, mqs } from '../utils.styles';\n\nexport const getNavbarItemActiveStyles = () =>\n css({\n backgroundColor: tokens.blue100,\n border: `1px solid ${tokens.blue400}`,\n color: tokens.blue600,\n '&:hover': {\n backgroundColor: tokens.blue100,\n },\n });\n\nconst commonItemStyles = {\n display: 'flex',\n justifyContent: 'center',\n padding: `${tokens.spacing2Xs} ${tokens.spacingXs}`,\n alignItems: 'center',\n background: 'none',\n gap: tokens.spacing2Xs,\n};\n\nexport const getNavbarItemStyles = ({ title }) => ({\n navbarItem: css(\n commonItemStyles,\n {\n appearance: 'none',\n background: 'none',\n border: '1px solid transparent',\n margin: 0,\n outline: 'none',\n fontSize: tokens.fontSizeM,\n lineHeight: tokens.lineHeightS,\n fontWeight: tokens.fontWeightMedium,\n position: 'relative',\n textAlign: 'left',\n whiteSpace: 'nowrap',\n cursor: 'pointer',\n hyphens: 'auto',\n textDecoration: 'none',\n color: tokens.gray800,\n boxSizing: 'border-box',\n transition: `color ${tokens.transitionDurationShort} ${tokens.transitionEasingCubicBezier}`,\n borderRadius: tokens.borderRadiusMedium,\n minWidth: '44px',\n\n '&:hover': {\n backgroundColor: hexToRGBA(tokens.gray900, 0.05),\n },\n\n '&:hover::before': {\n opacity: 1,\n scale: '1',\n },\n\n '&:active::before': {\n backgroundColor: `rgba(255, 255, 255, 0.1)`,\n },\n '&:disabled': {\n cursor: 'auto',\n },\n\n '& svg': {\n transition: `fill ${tokens.transitionDurationShort} ${tokens.transitionEasingCubicBezier}`,\n },\n '& > svg, & > span': {\n zIndex: tokens.zIndexDefault,\n },\n },\n getGlowOnFocusStyles(),\n increaseHitArea(),\n ),\n navbarItemMenuTrigger: css({\n paddingRight: tokens.spacingXs,\n }),\n isActive: getNavbarItemActiveStyles(),\n icon: css({\n height: '20px',\n width: '20px',\n display: !title ? 'block' : 'none',\n [mqs.small]: {\n height: '16px',\n width: '16px',\n },\n [mqs.large]: {\n display: 'block',\n },\n }),\n});\n\nexport const getNavbarItemSkeletonStyles = () => ({\n itemSkeleton: css(commonItemStyles),\n});\n","import React from 'react';\nimport type { IconProps } from '@contentful/f36-icons';\nimport { getNavbarItemIconStyles } from './NavbarItemIcon.styles';\nimport { cx } from 'emotion';\n\nexport type NavbarItemIconProps = {\n icon: React.ReactElement<IconProps>;\n className?: string;\n} & Partial<Pick<IconProps, 'isActive'>>;\n\nexport const NavbarItemIcon = ({\n icon,\n isActive,\n className,\n}: NavbarItemIconProps) => {\n const { className: iconClassName, size, ...rest } = icon.props;\n const styles = getNavbarItemIconStyles();\n\n return React.cloneElement(icon, {\n className: cx(iconClassName, styles.navbarItemIcon, className),\n size: size || 'small',\n isActive,\n ...rest,\n });\n};\n","import { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\nexport const getNavbarItemIconStyles = () => ({\n navbarItemIcon: css({\n '&:last-child&:not(:only-child)': {\n marginLeft: tokens.spacing2Xs,\n },\n 'img&': {\n borderRadius: tokens.borderRadiusSmall,\n maxWidth: tokens.spacingM,\n maxHeight: tokens.spacingM,\n },\n }),\n});\n","import React from 'react';\nimport { SkeletonContainer, SkeletonText } from '@contentful/f36-skeleton';\nimport tokens from '@contentful/f36-tokens';\nimport { getNavbarItemSkeletonStyles } from './NavbarItem.styles';\n\nexport const NavbarItemSkeleton = ({\n estimatedWidth,\n}: {\n estimatedWidth: number;\n}) => {\n const styles = getNavbarItemSkeletonStyles();\n\n return (\n <SkeletonContainer\n className={styles.itemSkeleton}\n svgWidth={estimatedWidth}\n svgHeight={32}\n backgroundColor={tokens.gray300}\n foregroundColor={tokens.gray200}\n >\n <SkeletonText\n lineHeight={6}\n numberOfLines={1}\n offsetTop={10}\n radiusX={tokens.borderRadiusSmall}\n radiusY={tokens.borderRadiusSmall}\n />\n </SkeletonContainer>\n );\n};\n","import React from 'react';\nimport { cx } from 'emotion';\nimport { getNavbarMenuItemStyles } from './NavbarMenuItem.styles';\nimport { Menu, type MenuItemProps } from '@contentful/f36-menu';\nimport {\n NavbarItemIcon,\n type NavbarItemIconProps,\n} from '../NavbarItemIcon/NavbarItemIcon';\nimport { ArrowSquareOutIcon } from '@contentful/f36-icons';\nimport type {\n ExpandProps,\n PolymorphicComponent,\n PolymorphicProps,\n} from '@contentful/f36-core';\n\nconst NAVBAR_MENU_ITEM_DEFAULT_TAG = 'button';\n\ntype NavbarMenuItemOwnProps = {\n children?: null;\n title: string;\n icon?: NavbarItemIconProps['icon'];\n as?: React.ElementType;\n} & Omit<MenuItemProps, 'children' | 'as'>;\n\nexport type NavbarMenuItemProps<\n E extends React.ElementType = typeof NAVBAR_MENU_ITEM_DEFAULT_TAG,\n> = PolymorphicProps<NavbarMenuItemOwnProps, E>;\n\nfunction _NavbarMenuItem(\n props: NavbarMenuItemProps<React.ElementType>,\n ref: React.Ref<any>,\n) {\n const {\n as: Comp = NAVBAR_MENU_ITEM_DEFAULT_TAG,\n icon,\n title,\n className,\n ...otherProps\n } = props;\n const styles = getNavbarMenuItemStyles();\n\n const itemIsExternalLink = isExternalLink(\n props as unknown as NavbarMenuItemProps<'a'>,\n );\n\n return (\n <Menu.Item\n {...otherProps}\n ref={ref}\n as={Comp as MenuItemProps['as']}\n className={cx(styles.navbarMenuItem, className)}\n >\n {icon ? (\n <NavbarItemIcon icon={icon} />\n ) : (\n itemIsExternalLink && externalIcon\n )}\n <span>{title}</span>\n {icon && itemIsExternalLink ? externalIcon : null}\n </Menu.Item>\n );\n}\n\nconst externalIcon = <NavbarItemIcon icon={<ArrowSquareOutIcon />} />;\n\nconst isExternalLink = (props: NavbarMenuItemProps<'a'>) =>\n props.as === 'a' && props.target === '_blank';\n\nexport const NavbarMenuItem: PolymorphicComponent<\n ExpandProps<NavbarMenuItemOwnProps>,\n typeof NAVBAR_MENU_ITEM_DEFAULT_TAG\n> = React.forwardRef(_NavbarMenuItem);\n","import { css } from 'emotion';\nexport const getNavbarMenuItemStyles = () => ({\n navbarMenuItem: css({\n display: 'flex',\n justifyContent: 'flex-start',\n alignItems: 'center',\n }),\n});\n","import React from 'react';\nimport { Menu } from '@contentful/f36-menu';\nimport {\n SkeletonBodyText,\n SkeletonContainer,\n SkeletonImage,\n} from '@contentful/f36-skeleton';\nimport { Flex } from '@contentful/f36-core';\n\nimport tokens from '@contentful/f36-tokens';\n\nexport const NavbarMenuItemSkeleton = ({\n ariaLabel,\n}: {\n ariaLabel?: string;\n}) => (\n <Menu.Item>\n <Flex alignItems=\"center\" gap={tokens.spacingXs}>\n <SkeletonContainer svgHeight={16} svgWidth={18}>\n <SkeletonImage width={16} height={16} />\n </SkeletonContainer>\n <SkeletonContainer svgHeight={16} svgWidth={190} ariaLabel={ariaLabel}>\n <SkeletonBodyText numberOfLines={1} />\n </SkeletonContainer>\n </Flex>\n </Menu.Item>\n);\n","import React, { type ReactNode } from 'react';\nimport { getNavbarSwitcherStyles } from './NavbarSwitcher.styles';\nimport { Button } from '@contentful/f36-button';\nimport {\n Flex,\n type CommonProps,\n type PropsWithHTMLElement,\n type ExpandProps,\n} from '@contentful/f36-core';\nimport { cx } from 'emotion';\nimport { NavbarEnvVariant } from './NavbarEnvVariant';\n\ntype TruncateOptions = {\n /**\n * Number of characters to keep at the start of the string\n * @default 5\n */\n start?: number;\n /**\n * Number of characters to keep at the end of the string\n * @default 6\n */\n end?: number;\n};\n\nfunction splitSpaceName(\n string: string,\n {\n start: startLength = 5,\n end: endLength = 6,\n }: TruncateOptions | undefined = {},\n) {\n if (string.length <= startLength + endLength) {\n return [string, undefined, undefined];\n }\n\n const start = startLength > 0 ? string.slice(0, startLength) : '';\n const end = endLength > 0 ? string.slice(-endLength) : '';\n const remainder = string.slice(startLength, string.length - endLength);\n\n return [start, remainder, end];\n}\n\ntype NavbarSwitcherOwnProps = CommonProps & {\n children: ReactNode;\n isCircle?: boolean;\n envVariant?: 'master' | 'non-master';\n isAlias?: boolean;\n ariaLabel?: string;\n};\n\nexport type NavbarSwitcherProps = PropsWithHTMLElement<\n NavbarSwitcherOwnProps,\n 'button'\n>;\n\nfunction _NavbarSwitcher(\n props: ExpandProps<NavbarSwitcherProps>,\n ref: React.Ref<HTMLButtonElement>,\n) {\n const {\n children,\n className,\n envVariant,\n isAlias,\n testId = 'cf-ui-navbar-switcher',\n ariaLabel = 'Space and Environment Navigation',\n ...otherProps\n } = props;\n const styles = getNavbarSwitcherStyles();\n const [start, middle, end] =\n typeof children === 'string' ? splitSpaceName(children) : [];\n\n return (\n <Button\n {...otherProps}\n aria-label={ariaLabel}\n className={cx(styles.navbarSwitcher, className)}\n endIcon={\n envVariant && (\n <NavbarEnvVariant\n envVariant={envVariant}\n isAlias={isAlias}\n className={styles.switcherEnvIcon}\n />\n )\n }\n ref={ref}\n testId={testId}\n variant=\"transparent\"\n >\n <Flex\n alignItems=\"center\"\n className={styles.switcherSpaceName}\n flexDirection=\"row\"\n >\n {start !== undefined ? (\n <>\n <span>{start}</span>\n {middle && (\n <span className={styles.switcherSpaceNameTruncation}>\n {middle}\n </span>\n )}\n {end && <span>{end}</span>}\n </>\n ) : (\n children\n )}\n </Flex>\n </Button>\n );\n}\n\nexport const NavbarSwitcher = React.forwardRef(_NavbarSwitcher);\n","import { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\nimport { hexToRGBA } from '@contentful/f36-utils';\n\nimport { getGlowOnFocusStyles, increaseHitArea, mqs } from '../utils.styles';\n\nexport const getNavbarSwitcherStyles = () => ({\n navbarSwitcher: css(\n {\n color: tokens.gray600,\n flexShrink: 1,\n fontWeight: tokens.fontWeightMedium,\n maxWidth: '100%',\n minHeight: 'unset',\n padding: `${tokens.spacing2Xs} ${tokens.spacingXs}`,\n '&:hover': {\n backgroundColor: hexToRGBA(tokens.gray900, 0.05),\n },\n },\n getGlowOnFocusStyles(),\n increaseHitArea(),\n ),\n\n switcherSpaceName: css({\n // Set min-width only when there are three span children\n '&:has(> span:last-child:nth-child(3))': {\n minWidth: '12ch',\n },\n maxWidth: '15vw',\n [mqs.xsmall]: {\n maxWidth: '50vw',\n },\n [mqs.small]: {\n maxWidth: '10vw',\n },\n [mqs.medium]: {\n maxWidth: '50vw',\n },\n }),\n\n switcherEnvIcon: css({\n [mqs.small]: {\n width: '16px',\n height: '16px',\n },\n }),\n\n switcherSpaceNameTruncation: css({\n flexShrink: 1,\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n }),\n});\n","import React from 'react';\nimport { NavbarSwitcherProps } from '../NavbarSwitcher/NavbarSwitcher';\nimport { EnvironmentAliasIcon, EnvironmentIcon } from '@contentful/f36-icons';\nimport tokens from '@contentful/f36-tokens';\n\nexport type NavbarEnvVariantProps = Pick<\n NavbarSwitcherProps,\n 'isAlias' | 'envVariant'\n> & {\n className?: string;\n};\n\nexport function NavbarEnvVariant({\n isAlias,\n envVariant,\n className,\n}: NavbarEnvVariantProps) {\n const color = envVariant === 'master' ? tokens.green600 : tokens.orange500;\n\n return isAlias ? (\n <EnvironmentAliasIcon color={color} className={className} size=\"medium\" />\n ) : (\n <EnvironmentIcon color={color} className={className} size=\"medium\" />\n );\n}\n","import React from 'react';\nimport {\n SkeletonContainer,\n SkeletonDisplayText,\n} from '@contentful/f36-skeleton';\nimport tokens from '@contentful/f36-tokens';\n\nexport const NavbarSwitcherSkeleton = ({\n estimatedWidth,\n}: {\n estimatedWidth: number;\n}) => (\n <SkeletonContainer\n svgWidth={estimatedWidth}\n svgHeight={24}\n backgroundColor={tokens.gray300}\n foregroundColor={tokens.gray200}\n >\n <SkeletonDisplayText\n lineHeight={24}\n numberOfLines={1}\n radiusX={12}\n radiusY={12}\n />\n </SkeletonContainer>\n);\n","import React from 'react';\nimport { cx } from 'emotion';\nimport { getNavbarBadgeStyles } from './NavbarBadge.styles';\nimport type {\n CommonProps,\n ExpandProps,\n PolymorphicComponent,\n PolymorphicProps,\n} from '@contentful/f36-core';\n\nconst NAVBAR_BADGE_DEFAULT_TAG = 'div';\n\ntype NavbarBadgeOwnProps = CommonProps & {\n children?: React.ReactNode;\n as?: React.ElementType;\n};\n\nexport type NavbarBadgeProps<\n E extends React.ElementType = typeof NAVBAR_BADGE_DEFAULT_TAG,\n> = PolymorphicProps<NavbarBadgeOwnProps, E>;\n\nfunction _NavbarBadge(\n props: NavbarBadgeProps<React.ElementType>,\n ref: React.Ref<any>,\n) {\n const {\n as: Comp = NAVBAR_BADGE_DEFAULT_TAG,\n children,\n className,\n testId = 'cf-ui-navbar-badge',\n ...otherProps\n } = props;\n const styles = getNavbarBadgeStyles();\n\n return (\n <Comp\n {...otherProps}\n ref={ref}\n className={cx(styles.navbarBadge, className)}\n data-test-id={testId}\n >\n {children}\n </Comp>\n );\n}\n\nexport const NavbarBadge: PolymorphicComponent<\n ExpandProps<NavbarBadgeOwnProps>,\n typeof NAVBAR_BADGE_DEFAULT_TAG\n> = React.forwardRef(_NavbarBadge);\n","import { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\nexport const getNavbarBadgeStyles = () => ({\n navbarBadge: css({\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n background: 'none',\n border: `1px solid ${tokens.purple600}`,\n margin: 0,\n outline: 'none',\n fontSize: tokens.fontSizeS,\n lineHeight: tokens.lineHeightS,\n fontWeight: tokens.fontWeightMedium,\n textAlign: 'center',\n padding: `0 ${tokens.spacingXs}`,\n textDecoration: 'none',\n color: `${tokens.purple600}!important`,\n borderRadius: '1.75rem',\n userSelect: 'none',\n }),\n});\n","import React from 'react';\nimport { Menu, type MenuListProps, type MenuProps } from '@contentful/f36-menu';\nimport { getNavbarSubmenuStyles } from './NavbarMenu.styles';\nimport {\n NavbarItemIcon,\n type NavbarItemIconProps,\n} from '../NavbarItemIcon/NavbarItemIcon';\nimport { Flex } from '@contentful/f36-core';\n\nexport type NavbarSubmenuProps = {\n title: string;\n icon?: NavbarItemIconProps['icon'];\n children?: React.ReactNode;\n} & Pick<MenuListProps, 'testId'> &\n Pick<MenuProps, 'onOpen' | 'onClose'>;\n\nexport const NavbarSubmenu = (props: NavbarSubmenuProps) => {\n const {\n title,\n icon,\n children,\n testId = 'cf-ui-navbar-submenu-list',\n onOpen,\n onClose,\n } = props;\n const styles = getNavbarSubmenuStyles();\n\n return (\n <Menu.Submenu onOpen={onOpen} onClose={onClose}>\n <Menu.SubmenuTrigger>\n <Flex className={styles.navbarMenuItem}>\n {icon && <NavbarItemIcon icon={icon} />}\n <span>{title}</span>\n </Flex>\n </Menu.SubmenuTrigger>\n <Menu.List className={styles.menuList} testId={testId}>\n {children}\n </Menu.List>\n </Menu.Submenu>\n );\n};\n","import tokens from '@contentful/f36-tokens';\nimport { css } from 'emotion';\nimport { mqs } from '../utils.styles';\n\nexport const getNavbarSubmenuStyles = () => ({\n navbarMenuItem: css({\n display: 'flex',\n justifyContent: 'flex-start',\n alignItems: 'center',\n gap: tokens.spacingXs,\n }),\n menuList: css({\n minWidth: 0,\n marginLeft: '-24px',\n marginTop: '10px',\n [mqs.xsmall]: {\n minWidth: '250px',\n margin: 0,\n },\n }),\n});\n"]}
package/package.json CHANGED
@@ -1,20 +1,20 @@
1
1
  {
2
2
  "name": "@contentful/f36-navbar",
3
- "version": "5.0.0-alpha.23",
3
+ "version": "5.0.0-alpha.25",
4
4
  "description": "Forma 36: Navbar component",
5
5
  "scripts": {
6
6
  "build": "tsup"
7
7
  },
8
8
  "dependencies": {
9
- "@contentful/f36-avatar": "4.67.0",
10
- "@contentful/f36-button": "4.67.0",
11
- "@contentful/f36-core": "^4.67.0",
12
- "@contentful/f36-menu": "^4.67.0",
9
+ "@contentful/f36-button": "^4.67.1",
10
+ "@contentful/f36-core": "^4.67.1",
11
+ "@contentful/f36-menu": "^4.67.1",
12
+ "@contentful/f36-avatar": "4.67.1",
13
13
  "@contentful/f36-icon": "5.0.0-alpha.20",
14
14
  "@contentful/f36-icons": "5.0.0-alpha.25",
15
15
  "@contentful/f36-tokens": "^4.0.1",
16
16
  "@contentful/f36-utils": "^4.23.2",
17
- "@contentful/f36-skeleton": "^4.67.0",
17
+ "@contentful/f36-skeleton": "^4.67.1",
18
18
  "emotion": "^10.0.17"
19
19
  },
20
20
  "peerDependencies": {