@contentful/f36-navbar 5.0.0-alpha.2 → 5.0.0-alpha.21

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 (8) hide show
  1. package/README.mdx +2 -7
  2. package/dist/esm/index.js +9 -8
  3. package/dist/esm/index.js.map +1 -1
  4. package/dist/index.d.mts +46 -64
  5. package/dist/index.d.ts +46 -64
  6. package/dist/index.js +8 -7
  7. package/dist/index.js.map +1 -1
  8. package/package.json +8 -7
package/README.mdx CHANGED
@@ -6,7 +6,7 @@ isNew: true
6
6
  slug: /components/navbar/
7
7
  github: 'https://github.com/contentful/forma-36/tree/main/packages/components/navbar'
8
8
  storybook: 'https://f36-storybook.contentful.com/?path=/story/components-navbar'
9
- typescript: ./src/Navbar.tsx,./src/NavbarItem/NavbarItem.tsx,./src/NavbarMenuItem/NavbarMenuItem.tsx,./src/NavbarSwitcher/NavbarSwitcher.tsx,./src/NavbarSwitcherItem/NavbarSwitcherItem.tsx,./src/NavbarSearch/NavbarSearch.tsx,./src/NavbarHelp/NavbarHelp.tsx,./src/NavbarAccount/NavbarAccount.tsx,./src/NavbarBadge/NavbarBadge.tsx,./src/NavbarTopbarItem/NavbarTopbarItem.tsx
9
+ typescript: ./src/Navbar.tsx,./src/NavbarItem/NavbarItem.tsx,./src/NavbarMenuItem/NavbarMenuItem.tsx,./src/NavbarSwitcher/NavbarSwitcher.tsx,./src/NavbarSearch/NavbarSearch.tsx,./src/NavbarHelp/NavbarHelp.tsx,./src/NavbarAccount/NavbarAccount.tsx,./src/NavbarBadge/NavbarBadge.tsx,./src/NavbarTopbarItem/NavbarTopbarItem.tsx
10
10
  ---
11
11
 
12
12
  The Navbar component offers a unified navigation experience across all of Contentful's products.
@@ -31,8 +31,7 @@ You can use following components to build a menu:
31
31
  1. `<Navbar.MenuItem>`: Represents a menu item used to create dropdown menus. Use it as a child of the `<Navbar.Item>`, `<Navbar.Account>`, or `<Navbar.Help>` components.
32
32
  1. `<Navbar.MenuDivider>`: A visual separator for menu items. Use it before or after a `<Navbar.MenuItem>`.
33
33
  1. `<Navbar.MenuSectionTitle>`: A title that can be used in the menu list. Use it before or after a `<Navbar.MenuItem>`.
34
- 1. `<Navbar.Switcher>`: Wrapper component for the logotype, organization, space, and environment information. Use it as a child of the Navbar `switcher` prop.
35
- 1. `<Navbar.SwitcherItem>`: Represents an item within the `<Navbar.Switcher>`. Use it to render organization, space, and environment information in different states. Use it as a child of the `<Navbar.Switcher>`.
34
+ 1. `<Navbar.Switcher>`: Wrapper component for the space and environment information. Use it as a child of the Navbar `switcher` prop.
36
35
  1. `<Navbar.Search>`: Trigger for the global search. Use it as a child of the Navbar `search` prop.
37
36
  1. `<Navbar.Help>`: Trigger for the help menu. Use it as a child of the Navbar `help` prop.
38
37
  1. `<Navbar.Account>`: Trigger for the account menu. Use it as a child of the Navbar `account` prop.
@@ -95,10 +94,6 @@ You can use following components to build a menu:
95
94
 
96
95
  <PropsTable of="NavbarSwitcher" />
97
96
 
98
- ### Navbar.SwitcherItem
99
-
100
- <PropsTable of="NavbarSwitcherItem" />
101
-
102
97
  ### Navbar.Search
103
98
 
104
99
  <PropsTable of="NavbarSearch" />
package/dist/esm/index.js CHANGED
@@ -1,16 +1,17 @@
1
1
  import { MenuDivider, MenuSectionTitle, Menu } from '@contentful/f36-menu';
2
- import { Box, Flex } from '@contentful/f36-core';
3
- import v from 'react';
2
+ import { Flex } from '@contentful/f36-core';
3
+ import g from 'react';
4
4
  import { cx, css } from 'emotion';
5
- import f from '@contentful/f36-tokens';
5
+ import i from '@contentful/f36-tokens';
6
+ import { generateComponentWithVariants, IconVariant, generateIconComponent } from '@contentful/f36-icon';
6
7
  import { hexToRGBA } from '@contentful/f36-utils';
8
+ import { Avatar } from '@contentful/f36-avatar';
7
9
  import { SkeletonContainer, SkeletonImage, SkeletonText, SkeletonBodyText, SkeletonDisplayText } from '@contentful/f36-skeleton';
8
- import { generateIcon } from '@contentful/f36-icon';
9
- import { ExternalLinkIcon, MenuIcon, EnvironmentAliasIcon, EnvironmentIcon } from '@contentful/f36-icons';
10
- import { IconButton, Button } from '@contentful/f36-button';
10
+ import { ArrowSquareOutIcon, EnvironmentAliasIcon, EnvironmentIcon } from '@contentful/f36-icons';
11
+ import { Button } from '@contentful/f36-button';
11
12
 
12
- var Qe=Object.defineProperty,Je=Object.defineProperties;var Ke=Object.getOwnPropertyDescriptors;var X=Object.getOwnPropertySymbols;var le=Object.prototype.hasOwnProperty,fe=Object.prototype.propertyIsEnumerable;var ce=(e,t,o)=>t in e?Qe(e,t,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[t]=o,i=(e,t)=>{for(var o in t||(t={}))le.call(t,o)&&ce(e,o,t[o]);if(X)for(var o of X(t))fe.call(t,o)&&ce(e,o,t[o]);return e},s=(e,t)=>Je(e,Ke(t));var l=(e,t)=>{var o={};for(var r in e)le.call(e,r)&&t.indexOf(r)<0&&(o[r]=e[r]);if(e!=null&&X)for(var r of X(e))t.indexOf(r)<0&&fe.call(e,r)&&(o[r]=e[r]);return o};var x={medium:"@media (min-width: 480px)",large:"@media (min-width: 768px)",xlarge:"@media (min-width: 1920px)"},u=(e=f.glowPrimary)=>({"&:focus":{boxShadow:e},"&:focus:not(:focus-visible)":{boxShadow:"unset"},"&:focus-visible":{boxShadow:e}});var de=e=>({containerTop:css({justifyContent:"center",backgroundColor:f.gray100}),containerBottom:css({justifyContent:"center",backgroundColor:f.gray100}),containerTopContent:css({width:"100%",maxWidth:e,padding:f.spacingXs,minHeight:f.spacingL,[x.medium]:{padding:`${f.spacingXs} 20px`}}),containerBottomContent:css({width:"100%",maxWidth:e,padding:0,paddingTop:f.spacing2Xs,minHeight:"2.5rem",overflow:"auto",[x.medium]:{padding:`${f.spacing2Xs} ${f.spacingXs}`}})});function ot(e,t){let F=e,{children:o,account:r,search:n,switcher:a,help:p,badge:c,bottomRightItems:m,topRightItems:g,contentMaxWidth:N="100%",testId:y="cf-ui-navbar"}=F,R=l(F,["children","account","search","switcher","help","badge","bottomRightItems","topRightItems","contentMaxWidth","testId"]),I=de(N);return v.createElement(Box,s(i({},R),{ref:t,testId:y}),v.createElement(Flex,{className:I.containerTop},v.createElement(Flex,{className:I.containerTopContent,justifyContent:"space-between"},v.createElement(Flex,null,a),v.createElement(Flex,{alignItems:"center",gap:"spacingXs"},g,c,n,p,r))),v.createElement(Flex,{className:I.containerBottom},v.createElement(Flex,{className:I.containerBottomContent,justifyContent:"space-between"},v.createElement(Flex,{as:"nav","aria-label":"Main Navigation"},o),m&&v.createElement(Flex,null,m))))}var be=v.forwardRef(ot);var at={warning:f.colorWarning,negative:f.colorNegative,info:f.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(f.gray300,.15)})},u()),avatar:css({borderRadius:"50%",display:"block",height:"24px",width:"24px"}),notificationIcon:e=>css({position:"absolute",top:0,right:0,height:f.spacingS,width:f.spacingS,borderRadius:"50%",border:`2px solid ${f.gray100}`,backgroundColor:at[e],transform:"translate(30%, -30%)"})});var ue=()=>({menuList:css({minWidth:"250px"})});var T=e=>{let{trigger:t,children:o,testId:r="cf-ui-navbar-menu-list",onOpen:n,onClose:a}=e,p=ue();return v.createElement(Menu,{onOpen:n,onClose:a},v.createElement(Menu.Trigger,null,t),v.createElement(Menu.List,{className:p.menuList,testId:r},o))};function pt(e,t){let y=e,{children:o,className:r,testId:n="cf-ui-navbar-account-trigger",avatar:a,username:p,hasNotification:c,notificationVariant:m="warning"}=y,g=l(y,["children","className","testId","avatar","username","hasNotification","notificationVariant"]),N=ge();return v.createElement(T,{trigger:v.createElement(Flex,s(i({as:"button"},g),{ref:t,className:cx(N.navbarAccount,r),testId:n,alignItems:"center"}),v.createElement("img",{src:a,alt:`Avatar for user ${p}`,className:N.avatar}),c?v.createElement("span",{className:N.notificationIcon(m)}):null)},o)}var K=v.forwardRef(pt);function ee({ariaLabel:e}){return v.createElement(SkeletonContainer,{svgWidth:24,svgHeight:24,ariaLabel:e,backgroundColor:f.gray300,foregroundColor:f.gray200},v.createElement(SkeletonImage,{width:24,height:24,radiusX:12,radiusY:12}))}var Ne=()=>css({"&::after":{content:'""',position:"absolute",width:`calc(100% - ${f.spacingM})`,height:"2px",bottom:`-${f.spacing2Xs}`,left:0,right:0,margin:"auto",backgroundColor:f.blue600,zIndex:0}}),ye={display:"flex",justifyContent:"center",padding:`${f.spacing2Xs} ${f.spacingS}`,alignItems:"center",background:"none"},Ie=()=>({navbarItem:css(ye,{alignItems:"center",background:"none",border:0,margin:0,outline:"none",fontSize:f.fontSizeM,lineHeight:f.lineHeightS,fontWeight:f.fontWeightMedium,position:"relative",textAlign:"left",whiteSpace:"nowrap",cursor:"pointer",hyphens:"auto",textDecoration:"none",color:f.gray700,boxSizing:"border-box",transition:`color ${f.transitionDurationShort} ${f.transitionEasingCubicBezier}`,borderRadius:f.borderRadiusMedium,"&:hover":{backgroundColor:hexToRGBA(f.gray900,.05)},"&:hover::before":{opacity:1,scale:"1"},"&:active::before":{backgroundColor:"rgba(255, 255, 255, 0.1)"},"&:disabled":{cursor:"auto"},"& svg":{transition:`fill ${f.transitionDurationShort} ${f.transitionEasingCubicBezier}`},"& > svg, & > span":{zIndex:f.zIndexDefault}},u(`inset ${f.glowPrimary}`)),navbarItemMenuTrigger:css({paddingRight:f.spacingXs}),isActive:Ne()}),xe=()=>({itemSkeleton:css(ye)});var Pe=()=>({navbarItemIcon:css({fill:f.gray700,"&:first-child":{marginRight:f.spacing2Xs},"&:last-child":{marginLeft:f.spacing2Xs},"img&":{borderRadius:f.borderRadiusSmall,maxWidth:f.spacingM,maxHeight:f.spacingM}})});var z=e=>{var n,a;let{icon:t,variant:o}=e,r=Pe();return v.cloneElement(t,{className:cx(t.props.className,r.navbarItemIcon),size:(n=t.props.size)!=null?n:"tiny",variant:(a=t.props.variant)!=null?a:o})};var Se=generateIcon({name:"CircleIcon",viewBox:"0 0 24 24",path:v.createElement("path",{d:"M11.994 6.526A5.47 5.47 0 0 0 6.526 12a5.47 5.47 0 0 0 5.468 5.473A5.476 5.476 0 0 0 17.473 12a5.477 5.477 0 0 0-5.479-5.474ZM12 15.447a3.448 3.448 0 1 1 0-6.896 3.448 3.448 0 0 1 0 6.896Z",fill:"currentFill"})});var Me=generateIcon({name:"ArrowDownIcon",viewBox:"0 0 12 20",path:v.createElement("path",{d:"M3.03076 8C2.20109 8 1.73228 8.95209 2.23814 9.60971L5.20727 13.4696C5.60757 13.99 6.39223 13.99 6.79252 13.4696L9.76166 9.60971C10.2675 8.95209 9.79871 8 8.96904 8L3.03076 8Z",fill:"#9FA8B2"})});var we=generateIcon({name:"HelpIcon",viewBox:"0 0 24 24",path:v.createElement(v.Fragment,null,v.createElement("g",{clipPath:"url(#HelpIcon_svg__a)"},v.createElement("path",{d:"M12 2.25A9.75 9.75 0 1 0 21.75 12 9.769 9.769 0 0 0 12 2.25ZM12 18a1.125 1.125 0 1 1 0-2.25A1.125 1.125 0 0 1 12 18Zm.75-4.584v.084a.75.75 0 1 1-1.5 0v-.75A.75.75 0 0 1 12 12a1.875 1.875 0 1 0-1.875-1.875.75.75 0 1 1-1.5 0 3.375 3.375 0 1 1 4.125 3.29Z",fill:"currentFill"})),v.createElement("defs",null,v.createElement("clipPath",{id:"HelpIcon_svg__a"},v.createElement("path",{fill:"currentFill",d:"M0 0h24v24H0z"}))))});var Ae=generateIcon({name:"SearchIcon",viewBox:"0 0 24 24",path:v.createElement(v.Fragment,null,v.createElement("g",{clipPath:"url(#SearchIcon_svg__a)"},v.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M6 11.125a5.125 5.125 0 1 1 10.25 0 5.125 5.125 0 0 1-10.25 0ZM11.125 4a7.125 7.125 0 1 0 4.282 12.82l2.886 2.887a1 1 0 0 0 1.414-1.414l-2.886-2.887A7.125 7.125 0 0 0 11.125 4Z",fill:"currentFill"})),v.createElement("defs",null,v.createElement("clipPath",{id:"SearchIcon_svg__a"},v.createElement("path",{fill:"#fff",d:"M0 0h24v24H0z"}))))});var Ee=generateIcon({name:"ContentfulLogoIcon",viewBox:"0 0 24 24",path:v.createElement(v.Fragment,null,v.createElement("g",{clipPath:"url(#a)"},v.createElement("path",{d:"M8.71 3.007c.844.843 1.17 2.078.844 3.228a6.683 6.683 0 0 1 3.444-.953h.025a6.701 6.701 0 0 1 4.743 1.988 2.637 2.637 0 0 0 3.73.093 2.637 2.637 0 0 0 .094-3.731c-.025-.027-.052-.052-.08-.08A11.95 11.95 0 0 0 13.036.006h-.046a11.92 11.92 0 0 0-6.691 2.038h.074c.876 0 1.715.346 2.335.966l.002-.002Z",fill:"#1773EB"}),v.createElement("path",{d:"M19.593 16.006c-.696 0-1.365.276-1.86.765a6.706 6.706 0 0 1-4.732 1.953h-.025a6.617 6.617 0 0 1-3.446-.97c.079.287.117.584.117.882a3.3 3.3 0 0 1-3.299 3.3h-.087a11.929 11.929 0 0 0 6.696 2.07h.046a11.934 11.934 0 0 0 8.45-3.486 2.64 2.64 0 0 0-1.857-4.514h-.003Z",fill:"#E44F20"}),v.createElement("path",{d:"M4.013 16.301a3.283 3.283 0 0 1 2.335-.967c.303 0 .604.041.893.123a6.696 6.696 0 0 1 .014-6.928 3.302 3.302 0 0 1-4.176-3.187v-.09a12 12 0 0 0-.033 13.452v-.068c0-.877.344-1.715.967-2.335Z",fill:"#FFDA00"}),v.createElement("path",{d:"M6.378 2.627c-.751 0-1.275.311-1.912.948-.606.606-.797 1.136-.8 1.767a2.712 2.712 0 1 0 5.427-.003A2.713 2.713 0 0 0 6.38 2.627h-.003Z",fill:"#1773EB"}),v.createElement("path",{d:"M3.628 18.639c0 .748.311 1.275.948 1.912.606.606 1.136.8 1.767.8a2.703 2.703 0 1 0-.017-5.408 2.703 2.703 0 0 0-2.695 2.704v-.008h-.003Z",fill:"#E44F20"})),v.createElement("defs",null,v.createElement("clipPath",{id:"a"},v.createElement("path",{fill:"#fff",d:"M0 0h24v24H0z"}))))});var Pt="button";function St(e,t){let me=e,{as:o=Pt,icon:r,title:n,children:a,className:p,isActive:c,testId:m="cf-ui-navbar-item",onOpen:g,onClose:N}=me,y=l(me,["as","icon","title","children","className","isActive","testId","onOpen","onClose"]),R=Ie(),I=Mt(e),F=v.createElement(o,s(i({},y),{ref:t,"data-test-id":m,className:cx(R.navbarItem,I&&R.navbarItemMenuTrigger,c&&R.isActive,p)}),r&&v.createElement(z,{icon:r,variant:"secondary"}),v.createElement("span",null,n),I&&v.createElement(Me,null));return I?v.createElement(T,{trigger:F,testId:m,onOpen:g,onClose:N},a):F}var Mt=e=>!!e.children,te=v.forwardRef(St);var oe=({estimatedWidth:e})=>{let t=xe();return v.createElement(SkeletonContainer,{className:t.itemSkeleton,svgWidth:e,svgHeight:32,backgroundColor:f.gray300,foregroundColor:f.gray200},v.createElement(SkeletonText,{lineHeight:6,numberOfLines:1,offsetTop:10,radiusX:f.borderRadiusSmall,radiusY:f.borderRadiusSmall}))};var Ce=()=>({navbarMenuItem:css({display:"flex",justifyContent:"flex-start",alignItems:"center"})});var Bt="button";function _t(e,t){let g=e,{as:o=Bt,icon:r,title:n,className:a}=g,p=l(g,["as","icon","title","className"]),c=Ce(),m=Ht(e);return v.createElement(Menu.Item,s(i({},p),{ref:t,as:o,className:cx(c.navbarMenuItem,a)}),r?v.createElement(z,{icon:r,variant:"secondary"}):m&&ke,v.createElement("span",null,n),r&&m?ke:null)}var ke=v.createElement(z,{icon:v.createElement(ExternalLinkIcon,null),variant:"muted"}),Ht=e=>e.as==="a"&&e.target==="_blank",re=v.forwardRef(_t);var ae=({ariaLabel:e})=>v.createElement(Menu.Item,null,v.createElement(Flex,{alignItems:"center",gap:f.spacingXs},v.createElement(SkeletonContainer,{svgHeight:16,svgWidth:18},v.createElement(SkeletonImage,{width:16,height:16})),v.createElement(SkeletonContainer,{svgHeight:16,svgWidth:190,ariaLabel:e},v.createElement(SkeletonBodyText,{numberOfLines:1}))));var _e=()=>({navbarSwitcher:css({margin:0,padding:0,background:"none",border:"none",height:"max-content",color:f.gray700,cursor:"pointer",fontSize:f.fontSizeS,fontWeight:f.fontWeightMedium,position:"relative",outline:"none",borderRadius:"3rem","&:after":{content:'""',border:"1px solid #353A41",boxSizing:"border-box",height:"16px",right:"-1px",position:"absolute",width:0},"&:last-child:after":{display:"none"},"&:hover li":{backgroundColor:"#f2f4f6"}},u()),switcherMenuIcon:css({height:f.spacingM,width:f.spacingM,fill:f.gray700}),switcherBreadcrumbs:css({listStyleType:"none",margin:0,padding:0,position:"relative"})});function Gt(e,t){let m=e,{children:o,className:r,logo:n,testId:a="cf-ui-navbar-switcher"}=m,p=l(m,["children","className","logo","testId"]),c=_e();return v.createElement(Flex,s(i({},p),{as:"button",ref:t,className:cx(c.navbarSwitcher,r),testId:a,alignItems:"center",fullHeight:!0,gap:"spacingXs"}),n||v.createElement(Ee,null),v.createElement(MenuIcon,{size:"small",className:c.switcherMenuIcon}),v.createElement(Flex,{as:"ul",alignItems:"center",className:c.switcherBreadcrumbs},o))}var ie=v.forwardRef(Gt);var se=({estimatedWidth:e})=>v.createElement(SkeletonContainer,{svgWidth:e,svgHeight:24,backgroundColor:f.gray300,foregroundColor:f.gray200},v.createElement(SkeletonDisplayText,{lineHeight:24,numberOfLines:1,radiusX:12,radiusY:12}));var Fe=()=>({navbarSearch:css({minWidth:"24px",width:"24px",minHeight:"24px",height:"24px",svg:{fill:f.gray700}},u())});function qt(e,t){let p=e,{className:o,testId:r="cf-ui-navbar-search"}=p,n=l(p,["className","testId"]),a=Fe();return v.createElement(IconButton,s(i({"aria-label":"Quick Search"},n),{variant:"transparent",ref:t,size:"small",className:cx(a.navbarSearch,o),testId:r,icon:v.createElement(Ae,{size:"medium"})}))}var Oe=v.forwardRef(qt);var We={display:"none","&:first-child":{display:"block"},[x.medium]:{display:"block","&:first-child":{display:"none"}}},ze=()=>({breadcrumbsItem:css({position:"relative",alignItems:"center",justifyContent:"center",border:`solid 1px ${f.gray300}`,borderLeft:"none",display:"inline-flex",margin:0,minWidth:0,padding:`0 ${f.spacingXs}`,height:f.spacingL,borderRadius:"3rem",zIndex:2,whiteSpace:"nowrap","&:first-child":{minWidth:"24px"},"&:nth-child(2)":{zIndex:1,marginLeft:"-10px",paddingLeft:f.spacingM,borderRadius:"0 3rem 3rem 0",span:{maxWidth:"80px",textOverflow:"ellipsis",overflow:"hidden",[x.large]:{maxWidth:"100%"}}},"&:nth-child(3)":{marginLeft:"-10px",paddingLeft:f.spacingM,borderRadius:"0 3rem 3rem 0",fontFamily:f.fontStackMonospace,fontSize:f.fontSizeS,fontWeight:f.fontWeightMedium,zIndex:0,span:{maxWidth:"40px",textOverflow:"ellipsis",overflow:"hidden",[x.large]:{maxWidth:"100%"}},"> div":{[x.medium]:{gap:f.spacing2Xs}}}}),breadcrumbsItemCircle:css({border:`solid 1px ${f.gray300}`,borderRadius:"50%",color:f.gray400,padding:0,display:"flex",justifyContent:"center",fontSize:"11px",width:f.spacingL,height:f.spacingL}),breadcrumbsItemEnvMaster:css({color:f.green600," svg":s(i({},We),{fill:f.green600})}),breadcrumbsItemEnvNonMaster:css({color:f.orange500,svg:s(i({},We),{fill:f.orange500})})});function De({isAlias:e}){return v.createElement(v.Fragment,null,v.createElement(Se,{key:"mobile-icon",size:"tiny"}),e?v.createElement(EnvironmentAliasIcon,{key:"full-icon",size:"tiny"}):v.createElement(EnvironmentIcon,{key:"full-icon",size:"tiny"}))}function eo(e,t){let y=e,{children:o,isCircle:r,className:n,envVariant:a,isAlias:p,testId:c="cf-ui-navbar-switcher-item"}=y,m=l(y,["children","isCircle","className","envVariant","isAlias","testId"]),g=ze(),N=cx(g.breadcrumbsItem,n,{[g.breadcrumbsItemCircle]:r,[g.breadcrumbsItemEnvMaster]:a==="master",[g.breadcrumbsItemEnvNonMaster]:a==="non-master"});return v.createElement("li",s(i({},m),{ref:t,className:N,"data-test-id":c}),v.createElement(Flex,{fullHeight:!0,justifyContent:"center",alignItems:"center"},a&&v.createElement(De,{isAlias:p}),v.createElement("span",null,o)))}var Ge=v.forwardRef(eo);var Ve=()=>({navbarHelp:css({fontSize:f.fontSizeS,padding:`0 ${f.spacing2Xs}`,width:"max-content",minHeight:"24px",height:"24px",color:f.gray700,svg:{fill:f.gray700}},u())});function ao(e,t){let c=e,{children:o,className:r,testId:n="cf-ui-navbar-help-trigger"}=c,a=l(c,["children","className","testId"]),p=Ve();return v.createElement(T,{testId:"cf-ui-navbar-help-menu",trigger:v.createElement(Button,s(i({"aria-label":"Help Menu"},a),{as:"button",ref:t,className:cx(p.navbarHelp,r),testId:n,variant:"transparent",size:"small",startIcon:v.createElement(we,{size:"medium"})}),"Help")},o)}var Xe=v.forwardRef(ao);var $e=()=>({navbarBadge:css({display:"flex",justifyContent:"center",alignItems:"center",background:"none",border:`1px solid ${f.purple600}`,margin:0,outline:"none",fontSize:f.fontSizeS,lineHeight:f.lineHeightS,fontWeight:f.fontWeightMedium,textAlign:"center",padding:`0 ${f.spacingXs}`,textDecoration:"none",color:`${f.purple600}!important`,borderRadius:"1.75rem"})});var so="div";function po(e,t){let m=e,{as:o=so,children:r,className:n,testId:a="cf-ui-navbar-badge"}=m,p=l(m,["as","children","className","testId"]),c=$e();return v.createElement(o,s(i({},p),{ref:t,className:cx(c.navbarBadge,n),"data-test-id":a}),r)}var Ze=v.forwardRef(po);var je=()=>({navbarTopItem:css({margin:0,background:"none",border:"1px solid",borderColor:"transparent",cursor:"pointer",display:"flex",gap:f.spacing2Xs,alignItems:"center",lineHeight:f.lineHeightDefault,color:f.gray700,padding:`0 ${f.spacing2Xs}`,minHeight:"24px",fontSize:f.fontSizeS,fontWeight:f.fontWeightMedium,outline:"none",borderRadius:f.borderRadiusMedium,"&:hover":{backgroundColor:hexToRGBA(f.gray900,.05)},svg:{fill:"currentColor"}},u())});var fo="button";function bo(e,t){let m=e,{as:o=fo,children:r,className:n,testId:a="cf-ui-navbar-topbar-item"}=m,p=l(m,["as","children","className","testId"]),c=je();return v.createElement(o,s(i({},p),{ref:t,className:cx(c.navbarTopItem,n),"data-test-id":a}),r)}var Ye=v.forwardRef(bo);var b=be;b.Item=te;b.ItemSkeleton=oe;b.MenuItem=re;b.MenuItemSkeleton=ae;b.MenuDivider=MenuDivider;b.MenuSectionTitle=MenuSectionTitle;b.Switcher=ie;b.SwitcherSkeleton=se;b.SwitcherItem=Ge;b.Search=Oe;b.Help=Xe;b.Account=K;b.AccountSkeleton=ee;b.Badge=Ze;b.TopbarItem=Ye;
13
+ var _e=Object.defineProperty,Oe=Object.defineProperties;var Re=Object.getOwnPropertyDescriptors;var L=Object.getOwnPropertySymbols;var te=Object.prototype.hasOwnProperty,re=Object.prototype.propertyIsEnumerable;var oe=(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={}))te.call(o,t)&&oe(e,t,o[t]);if(L)for(var t of L(o))re.call(o,t)&&oe(e,t,o[t]);return e},u=(e,o)=>Oe(e,Re(o));var c=(e,o)=>{var t={};for(var r in e)te.call(e,r)&&o.indexOf(r)<0&&(t[r]=e[r]);if(e!=null&&L)for(var r of L(e))o.indexOf(r)<0&&re.call(e,r)&&(t[r]=e[r]);return t};var ne={medium:"@media (min-width: 480px)",large:"@media (min-width: 768px)",xlarge:"@media (min-width: 1920px)"},S=(e=i.glowPrimary)=>({"&:focus":{boxShadow:e},"&:focus:not(:focus-visible)":{boxShadow:"unset"},"&:focus-visible":{boxShadow:e}});var ae=(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.spacingXs,minHeight:i.spacingL,[ne.medium]:{padding:`${i.spacingXs} 20px`}})});var me=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 ce=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 We(e,o){let P=e,{logo:t,switcher:r,mainNavigation:a,secondaryNavigation:n,account:s,className:d,contentMaxWidth:p="100%",testId:l="cf-ui-navbar",variant:h="wide"}=P,v=c(P,["logo","switcher","mainNavigation","secondaryNavigation","account","className","contentMaxWidth","testId","variant"]),f=ae(p,h);return g.createElement(Flex,u(m({},v),{ref:o,testId:l,className:cx(f.container,d),as:"header"}),g.createElement(Flex,{as:"nav",className:f.navigation,justifyContent:"space-between"},g.createElement(Flex,{alignItems:"center",gap:"spacingL"},t||g.createElement(ce,{className:f.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 le=g.forwardRef(We);var Xe={warning:i.colorWarning,negative:i.colorNegative,info:i.blue500},ue=()=>({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)})},S()),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:Xe[e],transform:"translate(30%, -30%)"})});var be=()=>({menuList:css({minWidth:"250px"})});var O=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 je(e,o){let f=e,{children:t,className:r,testId:a="cf-ui-navbar-account-trigger",avatar:n,initials:s,username:d,hasNotification:p,notificationVariant:l="warning"}=f,h=c(f,["children","className","testId","avatar","initials","username","hasNotification","notificationVariant"]),v=ue();return g.createElement(O,{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(je);function z({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 ve=()=>css({backgroundColor:i.blue100,border:`1px solid ${i.blue400}`,color:i.blue600,"&:hover":{backgroundColor:i.blue100}}),ge={display:"flex",justifyContent:"center",padding:`${i.spacing2Xs} ${i.spacingXs}`,alignItems:"center",background:"none",gap:i.spacing2Xs},Ne=()=>({navbarItem:css(ge,{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,"&: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}},S()),navbarItemMenuTrigger:css({paddingRight:i.spacingXs}),isActive:ve()}),he=()=>({itemSkeleton:css(ge)});var ye=()=>({navbarItemIcon:css({"&:last-child&:not(:only-child)":{marginLeft:i.spacing2Xs},"img&":{borderRadius:i.borderRadiusSmall,maxWidth:i.spacingM,maxHeight:i.spacingM}})});var B=({icon:e,isActive:o})=>{let s=e.props,{className:t,size:r}=s,a=c(s,["className","size"]),n=ye();return g.cloneElement(e,m({className:cx(t,n.navbarItemIcon),size:r||"small",isActive:o},a))};var to="button";function ro(e,o){let ee=e,{as:t=to,icon:r,label:a,title:n,children:s,className:d,isActive:p,testId:l="cf-ui-navbar-item",onOpen:h,onClose:v}=ee,f=c(ee,["as","icon","label","title","children","className","isActive","testId","onOpen","onClose"]),P=Ne(),V=no(e),Q=g.createElement(t,u(m({},f),{ref:o,"data-test-id":l,className:cx(P.navbarItem,V&&P.navbarItemMenuTrigger,p&&P.isActive,d),"aria-label":n?"":a}),r&&g.createElement(B,{icon:r,isActive:p}),n&&g.createElement("span",null,n),n&&V&&g.createElement(me,{size:"tiny",isActive:p}));return V?g.createElement(O,{trigger:Q,testId:l,onOpen:h,onClose:v},s):Q}var no=e=>!!e.children,$=g.forwardRef(ro);var U=({estimatedWidth:e})=>{let o=he();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 xe=()=>({navbarMenuItem:css({display:"flex",justifyContent:"flex-start",alignItems:"center"})});var lo="button";function uo(e,o){let l=e,{as:t=lo,icon:r,title:a,className:n}=l,s=c(l,["as","icon","title","className"]),d=xe(),p=bo(e);return g.createElement(Menu.Item,u(m({},s),{ref:o,as:t,className:cx(d.navbarMenuItem,n)}),r?g.createElement(B,{icon:r}):p&&Pe,g.createElement("span",null,a),r&&p?Pe:null)}var Pe=g.createElement(B,{icon:g.createElement(ArrowSquareOutIcon,null)}),bo=e=>e.as==="a"&&e.target==="_blank",Z=g.forwardRef(uo);var j=({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 Me=()=>({navbarSwitcher:css({flexShrink:1,maxWidth:"100%",minHeight:"unset",padding:`${i.spacing2Xs} ${i.spacingXs}`,"&:hover":{backgroundColor:hexToRGBA(i.gray900,.05)}},S()),switcherSpaceName:css({"&:has(> span:last-child:nth-child(3))":{minWidth:"12ch"}}),switcherSpaceNameTruncation:css({flexShrink:1,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"})});function we({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 Ao(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 Co(e,o){let f=e,{children:t,className:r,envVariant:a,isAlias:n,testId:s="cf-ui-navbar-switcher"}=f,d=c(f,["children","className","envVariant","isAlias","testId"]),p=Me(),[l,h,v]=typeof t=="string"?Ao(t):[];return g.createElement(Button,u(m({},d),{"aria-label":"Space and Environment Navigation",className:cx(p.navbarSwitcher,r),endIcon:a&&g.createElement(we,{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 J=g.forwardRef(Co);var K=({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 Te=()=>({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 Bo="div";function Lo(e,o){let p=e,{as:t=Bo,children:r,className:a,testId:n="cf-ui-navbar-badge"}=p,s=c(p,["as","children","className","testId"]),d=Te();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 b=le;b.Item=$;b.ItemSkeleton=U;b.MenuItem=Z;b.MenuItemSkeleton=j;b.MenuDivider=MenuDivider;b.MenuSectionTitle=MenuSectionTitle;b.Switcher=J;b.SwitcherSkeleton=K;b.Account=X;b.AccountSkeleton=z;b.Badge=Le;
13
14
 
14
- export { b as Navbar, Ne as getNavbarItemActiveStyles };
15
+ export { b as Navbar, ve as getNavbarItemActiveStyles };
15
16
  //# sourceMappingURL=out.js.map
16
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/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/icons/CircleIcon.tsx","../../src/icons/ArrowDownIcon.tsx","../../src/icons/HelpIcon.tsx","../../src/icons/SearchIcon.tsx","../../src/icons/ContentfulLogoIcon.tsx","../../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/NavbarSwitcherSkeleton.tsx","../../src/NavbarSearch/NavbarSearch.tsx","../../src/NavbarSearch/NavbarSearch.styles.ts","../../src/NavbarSwitcherItem/NavbarSwitcherItem.tsx","../../src/NavbarSwitcherItem/NavbarSwitcherItem.styles.ts","../../src/NavbarSwitcherItem/NavbarEnvVariant.tsx","../../src/NavbarHelp/NavbarHelp.tsx","../../src/NavbarHelp/NavbarHelp.styles.ts","../../src/NavbarBadge/NavbarBadge.tsx","../../src/NavbarBadge/NavbarBadge.styles.ts","../../src/NavbarTopbarItem/NavbarTopbarItem.tsx","../../src/NavbarTopbarItem/NavbarTopbarItem.styles.ts"],"names":["MenuDivider","MenuSectionTitle","Box","Flex","React","css","tokens","mqs","getGlowOnFocusStyles","shadow","getNavbarStyles","maxWidth","_Navbar","props","ref","_a","children","account","search","switcher","help","badge","bottomRightItems","topRightItems","contentMaxWidth","testId","otherProps","__objRest","styles","__spreadProps","__spreadValues","Navbar","cx","hexToRGBA","notificationVarianColorMap","getNavbarAccountStyles","variant","Menu","getNavbarMenuStyles","NavbarMenu","trigger","onOpen","onClose","_NavbarAccount","className","avatar","username","hasNotification","notificationVariant","NavbarAccount","SkeletonContainer","SkeletonImage","NavbarAccountSkeleton","ariaLabel","getNavbarItemActiveStyles","commonItemStyles","getNavbarItemStyles","getNavbarItemSkeletonStyles","getNavbarItemIconStyles","NavbarItemIcon","_b","icon","generateIcon","CircleIcon","ArrowDownIcon","HelpIcon","SearchIcon","ContentfulLogoIcon","NAVBAR_ITEM_DEFAULT_TAG","_NavbarItem","Comp","title","isActive","isMenuTrigger","isNavbarItemHasMenu","item","NavbarItem","SkeletonText","NavbarItemSkeleton","estimatedWidth","getNavbarMenuItemStyles","ExternalLinkIcon","NAVBAR_MENU_ITEM_DEFAULT_TAG","_NavbarMenuItem","itemIsExternalLink","isExternalLink","externalIcon","NavbarMenuItem","SkeletonBodyText","NavbarMenuItemSkeleton","getNavbarSwitcherStyles","MenuIcon","_NavbarSwitcher","logo","NavbarSwitcher","SkeletonDisplayText","NavbarSwitcherSkeleton","IconButton","getNavbarSearchStyles","_NavbarSearch","NavbarSearch","mobileIcon","getNavbarSwitcherItemStyles","EnvironmentAliasIcon","EnvironmentIcon","NavbarEnvVariant","isAlias","_NavbarSwitcherItem","isCircle","envVariant","classes","NavbarSwitcherItem","Button","getNavbarHelpStyles","_NavbarHelp","NavbarHelp","getNavbarBadgeStyles","NAVBAR_BADGE_DEFAULT_TAG","_NavbarBadge","NavbarBadge","getNavbarTopbarItemStyles","_NavbarTopbarItem","NavbarTopbarItem"],"mappings":"8lBAAA,OAAS,eAAAA,OAAmB,uBAC5B,OAAS,oBAAAC,OAAwB,uBCDjC,OACE,OAAAC,GAGA,QAAAC,MACK,uBACP,OAAOC,MAAW,QCNlB,OAAS,OAAAC,MAAW,UACpB,OAAOC,MAAY,yBCDnB,OAAOA,OAAY,yBAIZ,IAAMC,EAAoB,CAC/B,OAAQ,4BACR,MAAO,4BACP,OAAQ,4BACV,EAEaC,EAAuB,CAACC,EAAiBH,GAAO,eAAiB,CAC5E,UAAW,CACT,UAAWG,CACb,EACA,8BAA+B,CAC7B,UAAW,OACb,EACA,kBAAmB,CACjB,UAAWA,CACb,CACF,GDhBO,IAAMC,GAAmBC,IAAsB,CACpD,aAAcN,EAAI,CAChB,eAAgB,SAChB,gBAAiBC,EAAO,OAC1B,CAAC,EACD,gBAAiBD,EAAI,CACnB,eAAgB,SAChB,gBAAiBC,EAAO,OAC1B,CAAC,EACD,oBAAqBD,EAAI,CACvB,MAAO,OACP,SAAUM,EACV,QAASL,EAAO,UAChB,UAAWA,EAAO,SAClB,CAACC,EAAI,MAAM,EAAG,CACZ,QAAS,GAAGD,EAAO,SAAS,OAC9B,CACF,CAAC,EACD,uBAAwBD,EAAI,CAC1B,MAAO,OACP,SAAUM,EACV,QAAS,EACT,WAAYL,EAAO,WACnB,UAAW,SACX,SAAU,OACV,CAACC,EAAI,MAAM,EAAG,CACZ,QAAS,GAAGD,EAAO,UAAU,IAAIA,EAAO,SAAS,EACnD,CACF,CAAC,CACH,GDKA,SAASM,GAAQC,EAAiCC,EAA6B,CAC7E,IAYIC,EAAAF,EAXF,UAAAG,EACA,QAAAC,EACA,OAAAC,EACA,SAAAC,EACA,KAAAC,EACA,MAAAC,EACA,iBAAAC,EACA,cAAAC,EACA,gBAAAC,EAAkB,OAClB,OAAAC,EAAS,cAjDb,EAmDMV,EADCW,EAAAC,EACDZ,EADC,CAVH,WACA,UACA,SACA,WACA,OACA,QACA,mBACA,gBACA,kBACA,WAGIa,EAASlB,GAAgBc,CAAe,EAE9C,OACEpB,EAAA,cAACF,GAAA2B,EAAAC,EAAA,GAAQJ,GAAR,CAAoB,IAAKZ,EAAK,OAAQW,IACrCrB,EAAA,cAACD,EAAA,CAAK,UAAWyB,EAAO,cACtBxB,EAAA,cAACD,EAAA,CACC,UAAWyB,EAAO,oBAClB,eAAe,iBAEfxB,EAAA,cAACD,EAAA,KAAMgB,CAAS,EAChBf,EAAA,cAACD,EAAA,CAAK,WAAW,SAAS,IAAI,aAC3BoB,EACAF,EACAH,EACAE,EACAH,CACH,CACF,CACF,EAEAb,EAAA,cAACD,EAAA,CAAK,UAAWyB,EAAO,iBACtBxB,EAAA,cAACD,EAAA,CACC,UAAWyB,EAAO,uBAClB,eAAe,iBAEfxB,EAAA,cAACD,EAAA,CAAK,GAAG,MAAM,aAAW,mBACvBa,CACH,EACCM,GAAoBlB,EAAA,cAACD,EAAA,KAAMmB,CAAiB,CAC/C,CACF,CACF,CAEJ,CAEO,IAAMS,GAAS3B,EAAM,WAAWQ,EAAO,EGvF9C,OAAOR,MAAW,QAClB,OAAS,MAAA4B,OAAU,UCDnB,OAAS,OAAA3B,MAAW,UACpB,OAAOC,MAAY,yBAGnB,OAAS,aAAA2B,OAAiB,wBAE1B,IAAMC,GAGF,CACF,QAAS5B,EAAO,aAChB,SAAUA,EAAO,cACjB,KAAMA,EAAO,OACf,EAEa6B,GAAyB,KAAO,CAC3C,cAAe9B,EACb,CAEE,OAAQ,EACR,QAAS,EACT,OAAQ,EACR,OAAQ,UACR,WAAY,OACZ,SAAU,WACV,QAAS,OACT,SAAU,UACV,aAAc,MACd,WAAYA,EAAI,CACd,QAAS,KACT,QAAS,QACT,SAAU,WACV,OAAQ,OACR,MAAO,OACP,gBAAiB,cACjB,aAAc,KAChB,CAAC,EACD,iBAAkBA,EAAI,CACpB,gBAAiB4B,GAAU3B,EAAO,QAAS,GAAI,CACjD,CAAC,CACH,EACAE,EAAqB,CACvB,EACA,OAAQH,EAAI,CACV,aAAc,MACd,QAAS,QACT,OAAQ,OACR,MAAO,MACT,CAAC,EACD,iBAAmB+B,GACjB/B,EAAI,CACF,SAAU,WACV,IAAK,EACL,MAAO,EACP,OAAQC,EAAO,SACf,MAAOA,EAAO,SACd,aAAc,MACd,OAAQ,aAAaA,EAAO,OAAO,GACnC,gBAAiB4B,GAA2BE,CAAO,EACnD,UAAW,sBACb,CAAC,CACL,GC7DA,OAAOhC,MAAW,QAClB,OAAS,QAAAiC,MAAgD,uBCDzD,OAAS,OAAAhC,OAAW,UAEb,IAAMiC,GAAsB,KAAO,CACxC,SAAUjC,GAAI,CACZ,SAAU,OACZ,CAAC,CACH,GDIO,IAAMkC,EAAc1B,GAA2B,CACpD,GAAM,CACJ,QAAA2B,EACA,SAAAxB,EACA,OAAAS,EAAS,yBACT,OAAAgB,EACA,QAAAC,CACF,EAAI7B,EACEe,EAASU,GAAoB,EAEnC,OACElC,EAAA,cAACiC,EAAA,CAAK,OAAQI,EAAQ,QAASC,GAC7BtC,EAAA,cAACiC,EAAK,QAAL,KAAcG,CAAQ,EACvBpC,EAAA,cAACiC,EAAK,KAAL,CAAU,UAAWT,EAAO,SAAU,OAAQH,GAC5CT,CACH,CACF,CAEJ,EFnBA,OAAS,QAAAb,OAAY,uBAkBrB,SAASwC,GACP9B,EACAC,EACA,CACA,IASIC,EAAAF,EARF,UAAAG,EACA,UAAA4B,EACA,OAAAnB,EAAS,+BACT,OAAAoB,EACA,SAAAC,EACA,gBAAAC,EACA,oBAAAC,EAAsB,SAtC1B,EAwCMjC,EADCW,EAAAC,EACDZ,EADC,CAPH,WACA,YACA,SACA,SACA,WACA,kBACA,wBAGIa,EAASO,GAAuB,EAEtC,OACE/B,EAAA,cAACmC,EAAA,CACC,QACEnC,EAAA,cAACD,GAAA0B,EAAAC,EAAA,CACC,GAAG,UACCJ,GAFL,CAGC,IAAKZ,EACL,UAAWkB,GAAGJ,EAAO,cAAegB,CAAS,EAC7C,OAAQnB,EACR,WAAW,WAEXrB,EAAA,cAAC,OACC,IAAKyC,EACL,IAAK,mBAAmBC,CAAQ,GAChC,UAAWlB,EAAO,OACpB,EACCmB,EACC3C,EAAA,cAAC,QAAK,UAAWwB,EAAO,iBAAiBoB,CAAmB,EAAG,EAC7D,IACN,GAGDhC,CACH,CAEJ,CAEO,IAAMiC,EAAgB7C,EAAM,WAAWuC,EAAc,EItE5D,OAAOvC,OAAW,QAClB,OAAS,qBAAA8C,GAAmB,iBAAAC,OAAqB,2BACjD,OAAO7C,OAAY,yBAEZ,SAAS8C,GAAsB,CAAE,UAAAC,CAAU,EAA2B,CAC3E,OACEjD,GAAA,cAAC8C,GAAA,CACC,SAAU,GACV,UAAW,GACX,UAAWG,EACX,gBAAiB/C,GAAO,QACxB,gBAAiBA,GAAO,SAExBF,GAAA,cAAC+C,GAAA,CAAc,MAAO,GAAI,OAAQ,GAAI,QAAS,GAAI,QAAS,GAAI,CAClE,CAEJ,CChBA,OAAO/C,MAAW,QAClB,OAAS,MAAA4B,OAAU,UCDnB,OAAS,OAAA3B,MAAW,UACpB,OAAOC,MAAY,yBACnB,OAAS,aAAA2B,OAAiB,wBAGnB,IAAMqB,GAA4B,IACvCjD,EAAI,CACF,WAAY,CACV,QAAS,KACT,SAAU,WACV,MAAO,eAAeC,EAAO,QAAQ,IACrC,OAAQ,MACR,OAAQ,IAAIA,EAAO,UAAU,GAC7B,KAAM,EACN,MAAO,EACP,OAAQ,OACR,gBAAiBA,EAAO,QACxB,OAAQ,CACV,CACF,CAAC,EAEGiD,GAAmB,CACvB,QAAS,OACT,eAAgB,SAChB,QAAS,GAAGjD,EAAO,UAAU,IAAIA,EAAO,QAAQ,GAChD,WAAY,SACZ,WAAY,MACd,EAEakD,GAAsB,KAAO,CACxC,WAAYnD,EACVkD,GACA,CACE,WAAY,SACZ,WAAY,OACZ,OAAQ,EACR,OAAQ,EACR,QAAS,OACT,SAAUjD,EAAO,UACjB,WAAYA,EAAO,YACnB,WAAYA,EAAO,iBACnB,SAAU,WACV,UAAW,OACX,WAAY,SACZ,OAAQ,UACR,QAAS,OACT,eAAgB,OAChB,MAAOA,EAAO,QACd,UAAW,aACX,WAAY,SAASA,EAAO,uBAAuB,IAAIA,EAAO,2BAA2B,GACzF,aAAcA,EAAO,mBAErB,UAAW,CACT,gBAAiB2B,GAAU3B,EAAO,QAAS,GAAI,CACjD,EAEA,kBAAmB,CACjB,QAAS,EACT,MAAO,GACT,EAEA,mBAAoB,CAClB,gBAAiB,0BACnB,EACA,aAAc,CACZ,OAAQ,MACV,EAEA,QAAS,CACP,WAAY,QAAQA,EAAO,uBAAuB,IAAIA,EAAO,2BAA2B,EAC1F,EACA,oBAAqB,CACnB,OAAQA,EAAO,aACjB,CACF,EACAE,EAAqB,SAASF,EAAO,WAAW,EAAE,CACpD,EACA,sBAAuBD,EAAI,CACzB,aAAcC,EAAO,SACvB,CAAC,EACD,SAAUgD,GAA0B,CACtC,GAEaG,GAA8B,KAAO,CAChD,aAAcpD,EAAIkD,EAAgB,CACpC,GCrFA,OAAOnD,OAAW,QCAlB,OAAS,OAAAC,OAAW,UACpB,OAAOC,MAAY,yBAEZ,IAAMoD,GAA0B,KAAO,CAC5C,eAAgBrD,GAAI,CAClB,KAAMC,EAAO,QACb,gBAAiB,CACf,YAAaA,EAAO,UACtB,EACA,eAAgB,CACd,WAAYA,EAAO,UACrB,EACA,OAAQ,CACN,aAAcA,EAAO,kBACrB,SAAUA,EAAO,SACjB,UAAWA,EAAO,QACpB,CACF,CAAC,CACH,GDfA,OAAS,MAAA0B,OAAU,UAMZ,IAAM2B,EAAkB9C,GAA+B,CAT9D,IAAAE,EAAA6C,EAUE,GAAM,CAAE,KAAAC,EAAM,QAAAzB,CAAQ,EAAIvB,EACpBe,EAAS8B,GAAwB,EAEvC,OAAOtD,GAAM,aAAayD,EAAM,CAC9B,UAAW7B,GAAG6B,EAAK,MAAM,UAAWjC,EAAO,cAAc,EACzD,MAAMb,EAAA8C,EAAK,MAAM,OAAX,KAAA9C,EAAmB,OACzB,SAAS6C,EAAAC,EAAK,MAAM,UAAX,KAAAD,EAAsBxB,CACjC,CAAC,CACH,EElBA,OAAOhC,OAAW,QAClB,OAAS,gBAAA0D,OAAoB,uBAEtB,IAAMC,GAA2BD,GAAa,CACnD,KAAM,aACN,QAAS,YACT,KACE1D,GAAA,cAAC,QACC,EAAE,+LACF,KAAK,cACP,CAEJ,CAAC,ECZD,OAAOA,OAAW,QAClB,OAAS,gBAAA0D,OAAoB,uBAEtB,IAAME,GAA8BF,GAAa,CACtD,KAAM,gBACN,QAAS,YACT,KACE1D,GAAA,cAAC,QACC,EAAE,kLACF,KAAK,UACP,CAEJ,CAAC,ECZD,OAAOA,MAAW,QAClB,OAAS,gBAAA0D,OAAoB,uBAEtB,IAAMG,GAAyBH,GAAa,CACjD,KAAM,WACN,QAAS,YACT,KACE1D,EAAA,cAAAA,EAAA,cACEA,EAAA,cAAC,KAAE,SAAS,yBACVA,EAAA,cAAC,QACC,EAAE,+PACF,KAAK,cACP,CACF,EACAA,EAAA,cAAC,YACCA,EAAA,cAAC,YAAS,GAAG,mBACXA,EAAA,cAAC,QAAK,KAAK,cAAc,EAAE,gBAAgB,CAC7C,CACF,CACF,CAEJ,CAAC,ECrBD,OAAOA,MAAW,QAClB,OAAS,gBAAA0D,OAAoB,uBAEtB,IAAMI,GAA2BJ,GAAa,CACnD,KAAM,aACN,QAAS,YACT,KACE1D,EAAA,cAAAA,EAAA,cACEA,EAAA,cAAC,KAAE,SAAS,2BACVA,EAAA,cAAC,QACC,SAAS,UACT,SAAS,UACT,EAAE,mLACF,KAAK,cACP,CACF,EACAA,EAAA,cAAC,YACCA,EAAA,cAAC,YAAS,GAAG,qBACXA,EAAA,cAAC,QAAK,KAAK,OAAO,EAAE,gBAAgB,CACtC,CACF,CACF,CAEJ,CAAC,ECvBD,OAAOA,MAAW,QAClB,OAAS,gBAAA0D,OAAoB,uBAEtB,IAAMK,GAAmCL,GAAa,CAC3D,KAAM,qBACN,QAAS,YACT,KACE1D,EAAA,cAAAA,EAAA,cACEA,EAAA,cAAC,KAAE,SAAS,WACVA,EAAA,cAAC,QACC,EAAE,6SACF,KAAK,UACP,EACAA,EAAA,cAAC,QACC,EAAE,yQACF,KAAK,UACP,EACAA,EAAA,cAAC,QACC,EAAE,+LACF,KAAK,UACP,EACAA,EAAA,cAAC,QACC,EAAE,yIACF,KAAK,UACP,EACAA,EAAA,cAAC,QACC,EAAE,2IACF,KAAK,UACP,CACF,EACAA,EAAA,cAAC,YACCA,EAAA,cAAC,YAAS,GAAG,KACXA,EAAA,cAAC,QAAK,KAAK,OAAO,EAAE,gBAAgB,CACtC,CACF,CACF,CAEJ,CAAC,ERrBD,IAAMgE,GAA0B,SAwBhC,SAASC,GACPxD,EACAC,EACA,CACA,IAWIC,GAAAF,EAVF,IAAIyD,EAAOF,GACX,KAAAP,EACA,MAAAU,EACA,SAAAvD,EACA,UAAA4B,EACA,SAAA4B,EACA,OAAA/C,EAAS,oBACT,OAAAgB,EACA,QAAAC,CArDJ,EAuDM3B,GADCW,EAAAC,EACDZ,GADC,CATH,KACA,OACA,QACA,WACA,YACA,WACA,SACA,SACA,YAGIa,EAAS4B,GAAoB,EAC7BiB,EAAgBC,GAAoB7D,CAAK,EACzC8D,EACJvE,EAAA,cAACkE,EAAAzC,EAAAC,EAAA,GACKJ,GADL,CAEC,IAAKZ,EACL,eAAcW,EACd,UAAWO,GACTJ,EAAO,WACP6C,GAAiB7C,EAAO,sBACxB4C,GAAY5C,EAAO,SACnBgB,CACF,IAECiB,GAAQzD,EAAA,cAACuD,EAAA,CAAe,KAAME,EAAM,QAAQ,YAAY,EACzDzD,EAAA,cAAC,YAAMmE,CAAM,EACZE,GAAiBrE,EAAA,cAAC4D,GAAA,IAAc,CACnC,EAGF,OAAIS,EAEArE,EAAA,cAACmC,EAAA,CACC,QAASoC,EACT,OAAQlD,EACR,OAAQgB,EACR,QAASC,GAER1B,CACH,EAIG2D,CACT,CAEA,IAAMD,GACJ7D,GAEA,EAAQA,EAAM,SAEH+D,GAGTxE,EAAM,WAAWiE,EAAW,ESpGhC,OAAOjE,OAAW,QAClB,OAAS,qBAAA8C,GAAmB,gBAAA2B,OAAoB,2BAChD,OAAOvE,MAAY,yBAGZ,IAAMwE,GAAqB,CAAC,CACjC,eAAAC,CACF,IAEM,CACJ,IAAMnD,EAAS6B,GAA4B,EAE3C,OACErD,GAAA,cAAC8C,GAAA,CACC,UAAWtB,EAAO,aAClB,SAAUmD,EACV,UAAW,GACX,gBAAiBzE,EAAO,QACxB,gBAAiBA,EAAO,SAExBF,GAAA,cAACyE,GAAA,CACC,WAAY,EACZ,cAAe,EACf,UAAW,GACX,QAASvE,EAAO,kBAChB,QAASA,EAAO,kBAClB,CACF,CAEJ,EC7BA,OAAOF,MAAW,QAClB,OAAS,MAAA4B,OAAU,UCDnB,OAAS,OAAA3B,OAAW,UACb,IAAM2E,GAA0B,KAAO,CAC5C,eAAgB3E,GAAI,CAClB,QAAS,OACT,eAAgB,aAChB,WAAY,QACd,CAAC,CACH,GDJA,OAAS,QAAAgC,OAAgC,uBAKzC,OAAS,oBAAA4C,OAAwB,wBAOjC,IAAMC,GAA+B,SAarC,SAASC,GACPtE,EACAC,EACA,CACA,IAMIC,EAAAF,EALF,IAAIyD,EAAOY,GACX,KAAArB,EACA,MAAAU,EACA,UAAA3B,CApCJ,EAsCM7B,EADCW,EAAAC,EACDZ,EADC,CAJH,KACA,OACA,QACA,cAGIa,EAASoD,GAAwB,EAEjCI,EAAqBC,GACzBxE,CACF,EAEA,OACET,EAAA,cAACiC,GAAK,KAALR,EAAAC,EAAA,GACKJ,GADL,CAEC,IAAKZ,EACL,GAAIwD,EACJ,UAAWtC,GAAGJ,EAAO,eAAgBgB,CAAS,IAE7CiB,EACCzD,EAAA,cAACuD,EAAA,CAAe,KAAME,EAAM,QAAQ,YAAY,EAEhDuB,GAAsBE,GAExBlF,EAAA,cAAC,YAAMmE,CAAM,EACZV,GAAQuB,EAAqBE,GAAe,IAC/C,CAEJ,CAEA,IAAMA,GACJlF,EAAA,cAACuD,EAAA,CAAe,KAAMvD,EAAA,cAAC6E,GAAA,IAAiB,EAAI,QAAQ,QAAQ,EAGxDI,GAAkBxE,GACtBA,EAAM,KAAO,KAAOA,EAAM,SAAW,SAE1B0E,GAGTnF,EAAM,WAAW+E,EAAe,EEzEpC,OAAO/E,MAAW,QAClB,OAAS,QAAAiC,OAAY,uBACrB,OACE,oBAAAmD,GACA,qBAAAtC,GACA,iBAAAC,OACK,2BACP,OAAS,QAAAhD,OAAY,uBAErB,OAAOG,OAAY,yBAEZ,IAAMmF,GAAyB,CAAC,CACrC,UAAApC,CACF,IAGEjD,EAAA,cAACiC,GAAK,KAAL,KACCjC,EAAA,cAACD,GAAA,CAAK,WAAW,SAAS,IAAKG,GAAO,WACpCF,EAAA,cAAC8C,GAAA,CAAkB,UAAW,GAAI,SAAU,IAC1C9C,EAAA,cAAC+C,GAAA,CAAc,MAAO,GAAI,OAAQ,GAAI,CACxC,EACA/C,EAAA,cAAC8C,GAAA,CAAkB,UAAW,GAAI,SAAU,IAAK,UAAWG,GAC1DjD,EAAA,cAACoF,GAAA,CAAiB,cAAe,EAAG,CACtC,CACF,CACF,ECzBF,OAAOpF,MAAW,QCAlB,OAAS,OAAAC,OAAW,UACpB,OAAOC,MAAY,yBAGZ,IAAMoF,GAA0B,KAAO,CAC5C,eAAgBrF,GACd,CAEE,OAAQ,EACR,QAAS,EACT,WAAY,OACZ,OAAQ,OACR,OAAQ,cAER,MAAOC,EAAO,QACd,OAAQ,UACR,SAAUA,EAAO,UACjB,WAAYA,EAAO,iBACnB,SAAU,WACV,QAAS,OACT,aAAc,OAEd,UAAW,CACT,QAAS,KACT,OAAQ,oBACR,UAAW,aACX,OAAQ,OACR,MAAO,OACP,SAAU,WACV,MAAO,CACT,EACA,qBAAsB,CACpB,QAAS,MACX,EACA,aAAc,CACZ,gBAAiB,SACnB,CACF,EACAE,EAAqB,CACvB,EACA,iBAAkBH,GAAI,CACpB,OAAQC,EAAO,SACf,MAAOA,EAAO,SACd,KAAMA,EAAO,OACf,CAAC,EACD,oBAAqBD,GAAI,CACvB,cAAe,OACf,OAAQ,EACR,QAAS,EACT,SAAU,UACZ,CAAC,CACH,GDjDA,OACE,QAAAF,OAIK,uBACP,OAAS,YAAAwF,OAAgB,wBACzB,OAAS,MAAA3D,OAAU,UAgBnB,SAAS4D,GACP/E,EACAC,EACA,CACA,IAMIC,EAAAF,EALF,UAAAG,EACA,UAAA4B,EACA,KAAAiD,EACA,OAAApE,EAAS,uBAjCb,EAmCMV,EADCW,EAAAC,EACDZ,EADC,CAJH,WACA,YACA,OACA,WAGIa,EAAS8D,GAAwB,EAEvC,OACEtF,EAAA,cAACD,GAAA0B,EAAAC,EAAA,GACKJ,GADL,CAEC,GAAG,SACH,IAAKZ,EACL,UAAWkB,GAAGJ,EAAO,eAAgBgB,CAAS,EAC9C,OAAQnB,EACR,WAAW,SACX,WAAU,GACV,IAAI,cAEHoE,GAAQzF,EAAA,cAAC+D,GAAA,IAAmB,EAC7B/D,EAAA,cAACuF,GAAA,CAAS,KAAK,QAAQ,UAAW/D,EAAO,iBAAkB,EAE3DxB,EAAA,cAACD,GAAA,CAAK,GAAG,KAAK,WAAW,SAAS,UAAWyB,EAAO,qBACjDZ,CACH,CACF,CAEJ,CAEO,IAAM8E,GAAiB1F,EAAM,WAAWwF,EAAe,EE3D9D,OAAOxF,OAAW,QAClB,OACE,qBAAA8C,GACA,uBAAA6C,OACK,2BACP,OAAOzF,OAAY,yBAEZ,IAAM0F,GAAyB,CAAC,CACrC,eAAAjB,CACF,IAGE3E,GAAA,cAAC8C,GAAA,CACC,SAAU6B,EACV,UAAW,GACX,gBAAiBzE,GAAO,QACxB,gBAAiBA,GAAO,SAExBF,GAAA,cAAC2F,GAAA,CACC,WAAY,GACZ,cAAe,EACf,QAAS,GACT,QAAS,GACX,CACF,ECxBF,OAAS,MAAA/D,OAAU,UACnB,OAAO5B,OAAW,QAOlB,OAAS,cAAA6F,OAAkB,yBCR3B,OAAS,OAAA5F,OAAW,UAEpB,OAAOC,OAAY,yBAEZ,IAAM4F,GAAwB,KAAO,CAC1C,aAAc7F,GACZ,CAEE,SAAU,OACV,MAAO,OACP,UAAW,OACX,OAAQ,OACR,IAAK,CACH,KAAMC,GAAO,OACf,CACF,EACAE,EAAqB,CACvB,CACF,GDDA,SAAS2F,GACPtF,EACAC,EACA,CACA,IAAqEC,EAAAF,EAA7D,WAAA+B,EAAW,OAAAnB,EAAS,qBArB9B,EAqBuEV,EAAfW,EAAAC,EAAeZ,EAAf,CAA9C,YAAW,WACba,EAASsE,GAAsB,EACrC,OACE9F,GAAA,cAAC6F,GAAApE,EAAAC,EAAA,CACC,aAAW,gBACPJ,GAFL,CAGC,QAAQ,cACR,IAAKZ,EACL,KAAK,QACL,UAAWkB,GAAGJ,EAAO,aAAcgB,CAAS,EAC5C,OAAQnB,EACR,KAAMrB,GAAA,cAAC8D,GAAA,CAAW,KAAK,SAAS,GAClC,CAEJ,CAEO,IAAMkC,GAAehG,GAAM,WAAW+F,EAAa,EErC1D,OAAO/F,MAAW,QAClB,OAAS,MAAA4B,OAAU,UCDnB,OAAS,OAAA3B,MAAW,UACpB,OAAOC,MAAY,yBAGnB,IAAM+F,GAAa,CACjB,QAAS,OACT,gBAAiB,CACf,QAAS,OACX,EAEA,CAAC9F,EAAI,MAAM,EAAG,CACZ,QAAS,QACT,gBAAiB,CACf,QAAS,MACX,CACF,CACF,EAEa+F,GAA8B,KAAO,CAChD,gBAAiBjG,EAAI,CACnB,SAAU,WACV,WAAY,SACZ,eAAgB,SAChB,OAAQ,aAAaC,EAAO,OAAO,GACnC,WAAY,OACZ,QAAS,cACT,OAAQ,EACR,SAAU,EACV,QAAS,KAAKA,EAAO,SAAS,GAC9B,OAAQA,EAAO,SACf,aAAc,OACd,OAAQ,EAER,WAAY,SACZ,gBAAiB,CACf,SAAU,MACZ,EACA,iBAAkB,CAChB,OAAQ,EACR,WAAY,QACZ,YAAaA,EAAO,SACpB,aAAc,gBACd,KAAM,CACJ,SAAU,OACV,aAAc,WACd,SAAU,SACV,CAACC,EAAI,KAAK,EAAG,CACX,SAAU,MACZ,CACF,CACF,EACA,iBAAkB,CAChB,WAAY,QACZ,YAAaD,EAAO,SACpB,aAAc,gBACd,WAAYA,EAAO,mBACnB,SAAUA,EAAO,UACjB,WAAYA,EAAO,iBACnB,OAAQ,EACR,KAAM,CACJ,SAAU,OACV,aAAc,WACd,SAAU,SACV,CAACC,EAAI,KAAK,EAAG,CACX,SAAU,MACZ,CACF,EACA,QAAS,CACP,CAACA,EAAI,MAAM,EAAG,CACZ,IAAKD,EAAO,UACd,CACF,CACF,CACF,CAAC,EACD,sBAAuBD,EAAI,CACzB,OAAQ,aAAaC,EAAO,OAAO,GACnC,aAAc,MACd,MAAOA,EAAO,QACd,QAAS,EACT,QAAS,OACT,eAAgB,SAChB,SAAU,OACV,MAAOA,EAAO,SACd,OAAQA,EAAO,QACjB,CAAC,EACD,yBAA0BD,EAAI,CAC5B,MAAOC,EAAO,SACd,OAAQuB,EAAAC,EAAA,GACHuE,IADG,CAEN,KAAM/F,EAAO,QACf,EACF,CAAC,EACD,4BAA6BD,EAAI,CAC/B,MAAOC,EAAO,UACd,IAAKuB,EAAAC,EAAA,GACAuE,IADA,CAEH,KAAM/F,EAAO,SACf,EACF,CAAC,CACH,GCnGA,OAAOF,MAAW,QAGlB,OAAS,wBAAAmG,GAAsB,mBAAAC,OAAuB,wBAI/C,SAASC,GAAiB,CAAE,QAAAC,CAAQ,EAA0B,CACnE,OACEtG,EAAA,cAAAA,EAAA,cACEA,EAAA,cAAC2D,GAAA,CAAW,IAAI,cAAc,KAAK,OAAO,EACzC2C,EACCtG,EAAA,cAACmG,GAAA,CAAqB,IAAI,YAAY,KAAK,OAAO,EAElDnG,EAAA,cAACoG,GAAA,CAAgB,IAAI,YAAY,KAAK,OAAO,CAEjD,CAEJ,CFdA,OACE,QAAArG,OAIK,uBAcP,SAASwG,GACP9F,EACAC,EACA,CACA,IAQIC,EAAAF,EAPF,UAAAG,EACA,SAAA4F,EACA,UAAAhE,EACA,WAAAiE,EACA,QAAAH,EACA,OAAAjF,EAAS,4BAjCb,EAmCMV,EADCW,EAAAC,EACDZ,EADC,CANH,WACA,WACA,YACA,aACA,UACA,WAGIa,EAAS0E,GAA4B,EACrCQ,EAAU9E,GAAGJ,EAAO,gBAAiBgB,EAAW,CACpD,CAAChB,EAAO,qBAAqB,EAAGgF,EAChC,CAAChF,EAAO,wBAAwB,EAAGiF,IAAe,SAClD,CAACjF,EAAO,2BAA2B,EAAGiF,IAAe,YACvD,CAAC,EAED,OACEzG,EAAA,cAAC,KAAAyB,EAAAC,EAAA,GAAOJ,GAAP,CAAmB,IAAKZ,EAAK,UAAWgG,EAAS,eAAcrF,IAC9DrB,EAAA,cAACD,GAAA,CAAK,WAAU,GAAC,eAAe,SAAS,WAAW,UACjD0G,GAAczG,EAAA,cAACqG,GAAA,CAAiB,QAASC,EAAS,EACnDtG,EAAA,cAAC,YAAMY,CAAS,CAClB,CACF,CAEJ,CAEO,IAAM+F,GAAqB3G,EAAM,WAAWuG,EAAmB,EGrDtE,OAAOvG,MAAW,QAClB,OAAS,MAAA4B,OAAU,UAOnB,OAAS,UAAAgF,OAAc,yBCRvB,OAAS,OAAA3G,OAAW,UAEpB,OAAOC,MAAY,yBAEZ,IAAM2G,GAAsB,KAAO,CACxC,WAAY5G,GACV,CAEE,SAAUC,EAAO,UACjB,QAAS,KAAKA,EAAO,UAAU,GAC/B,MAAO,cACP,UAAW,OACX,OAAQ,OACR,MAAOA,EAAO,QACd,IAAK,CACH,KAAMA,EAAO,OACf,CACF,EACAE,EAAqB,CACvB,CACF,GDCA,SAAS0G,GACPrG,EACAC,EACA,CACA,IAKIC,EAAAF,EAJF,UAAAG,EACA,UAAA4B,EACA,OAAAnB,EAAS,2BA5Bb,EA8BMV,EADCW,EAAAC,EACDZ,EADC,CAHH,WACA,YACA,WAIIa,EAASqF,GAAoB,EAEnC,OACE7G,EAAA,cAACmC,EAAA,CACC,OAAO,yBACP,QACEnC,EAAA,cAAC4G,GAAAnF,EAAAC,EAAA,CACC,aAAW,aACPJ,GAFL,CAGC,GAAG,SACH,IAAKZ,EACL,UAAWkB,GAAGJ,EAAO,WAAYgB,CAAS,EAC1C,OAAQnB,EACR,QAAQ,cACR,KAAK,QACL,UAAWrB,EAAA,cAAC6D,GAAA,CAAS,KAAK,SAAS,IACpC,MAED,GAGDjD,CACH,CAEJ,CAEO,IAAMmG,GAAa/G,EAAM,WAAW8G,EAAW,EE1DtD,OAAO9G,OAAW,QAClB,OAAS,MAAA4B,OAAU,UCDnB,OAAS,OAAA3B,OAAW,UACpB,OAAOC,MAAY,yBAEZ,IAAM8G,GAAuB,KAAO,CACzC,YAAa/G,GAAI,CACf,QAAS,OACT,eAAgB,SAChB,WAAY,SACZ,WAAY,OACZ,OAAQ,aAAaC,EAAO,SAAS,GACrC,OAAQ,EACR,QAAS,OACT,SAAUA,EAAO,UACjB,WAAYA,EAAO,YACnB,WAAYA,EAAO,iBACnB,UAAW,SACX,QAAS,KAAKA,EAAO,SAAS,GAC9B,eAAgB,OAChB,MAAO,GAAGA,EAAO,SAAS,aAC1B,aAAc,SAChB,CAAC,CACH,GDXA,IAAM+G,GAA2B,MAWjC,SAASC,GACPzG,EACAC,EACA,CACA,IAMIC,EAAAF,EALF,IAAIyD,EAAO+C,GACX,SAAArG,EACA,UAAA4B,EACA,OAAAnB,EAAS,oBA7Bb,EA+BMV,EADCW,EAAAC,EACDZ,EADC,CAJH,KACA,WACA,YACA,WAGIa,EAASwF,GAAqB,EAEpC,OACEhH,GAAA,cAACkE,EAAAzC,EAAAC,EAAA,GACKJ,GADL,CAEC,IAAKZ,EACL,UAAWkB,GAAGJ,EAAO,YAAagB,CAAS,EAC3C,eAAcnB,IAEbT,CACH,CAEJ,CAEO,IAAMuG,GAGTnH,GAAM,WAAWkH,EAAY,EEjDjC,OAAOlH,OAAW,QAClB,OAAS,MAAA4B,OAAU,UCDnB,OAAS,OAAA3B,OAAW,UACpB,OAAOC,MAAY,yBAEnB,OAAS,aAAA2B,OAAiB,wBACnB,IAAMuF,GAA4B,KAAO,CAC9C,cAAenH,GACb,CAEE,OAAQ,EACR,WAAY,OACZ,OAAQ,YACR,YAAa,cACb,OAAQ,UACR,QAAS,OACT,IAAKC,EAAO,WACZ,WAAY,SACZ,WAAYA,EAAO,kBACnB,MAAOA,EAAO,QACd,QAAS,KAAKA,EAAO,UAAU,GAC/B,UAAW,OACX,SAAUA,EAAO,UACjB,WAAYA,EAAO,iBACnB,QAAS,OACT,aAAcA,EAAO,mBAErB,UAAW,CACT,gBAAiB2B,GAAU3B,EAAO,QAAS,GAAI,CACjD,EACA,IAAK,CACH,KAAM,cACR,CACF,EACAE,EAAqB,CACvB,CACF,GDxBA,IAAM6G,GAA2B,SAUjC,SAASI,GAEP5G,EAAiCC,EAAqB,CACtD,IAMIC,EAAAF,EALF,IAAIyD,EAAO+C,GACX,SAAArG,EACA,UAAA4B,EACA,OAAAnB,EAAS,0BA3Bb,EA6BMV,EADCW,EAAAC,EACDZ,EADC,CAJH,KACA,WACA,YACA,WAGIa,EAAS4F,GAA0B,EAEzC,OACEpH,GAAA,cAACkE,EAAAzC,EAAAC,EAAA,GACKJ,GADL,CAEC,IAAKZ,EACL,UAAWkB,GAAGJ,EAAO,cAAegB,CAAS,EAC7C,eAAcnB,IAEbT,CACH,CAEJ,CAEO,IAAM0G,GAGTtH,GAAM,WAAWqH,EAAiB,ElCd/B,IAAM1F,EAASA,GACtBA,EAAO,KAAO6C,GACd7C,EAAO,aAAe+C,GACtB/C,EAAO,SAAWwD,GAClBxD,EAAO,iBAAmB0D,GAC1B1D,EAAO,YAAc/B,GACrB+B,EAAO,iBAAmB9B,GAC1B8B,EAAO,SAAW+D,GAClB/D,EAAO,iBAAmBiE,GAC1BjE,EAAO,aAAegF,GACtBhF,EAAO,OAASqE,GAChBrE,EAAO,KAAOoF,GACdpF,EAAO,QAAUkB,EACjBlB,EAAO,gBAAkBqB,GACzBrB,EAAO,MAAQwF,GACfxF,EAAO,WAAa2F","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';\n\nimport { NavbarSearch } from './NavbarSearch/NavbarSearch';\nimport { NavbarSwitcherItem } from './NavbarSwitcherItem/NavbarSwitcherItem';\nimport { NavbarHelp } from './NavbarHelp/NavbarHelp';\nimport { NavbarBadge } from './NavbarBadge/NavbarBadge';\nimport { NavbarTopbarItem } from './NavbarTopbarItem/NavbarTopbarItem';\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 SwitcherItem: typeof NavbarSwitcherItem;\n Search: typeof NavbarSearch;\n Help: typeof NavbarHelp;\n Account: typeof NavbarAccount;\n AccountSkeleton: typeof NavbarAccountSkeleton;\n Badge: typeof NavbarBadge;\n TopbarItem: typeof NavbarTopbarItem;\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.SwitcherItem = NavbarSwitcherItem;\nNavbar.Search = NavbarSearch;\nNavbar.Help = NavbarHelp;\nNavbar.Account = NavbarAccount;\nNavbar.AccountSkeleton = NavbarAccountSkeleton;\nNavbar.Badge = NavbarBadge;\nNavbar.TopbarItem = NavbarTopbarItem;\n","import {\n Box,\n type CommonProps,\n type ExpandProps,\n Flex,\n} from '@contentful/f36-core';\nimport React from 'react';\nimport { getNavbarStyles } from './Navbar.styles';\n\ntype NavbarOwnProps = CommonProps & {\n children?: React.ReactNode;\n account?: React.ReactNode;\n search?: React.ReactNode;\n switcher?: React.ReactNode;\n help?: React.ReactNode;\n badge?: React.ReactNode;\n /**\n * Items that will be rendered on the bottom-right of the navbar.\n * Useful for separating other navigation items from main ones, (e.g. separating \"Settings\" from all other navigation items).\n */\n bottomRightItems?: React.ReactNode;\n /**\n * Items that will be rendered on the top-right of the navbar.\n * Useful for providing additional context or actions to the user (e.g. a Feedback form link).\n */\n topRightItems?: React.ReactNode;\n /**\n * Defines the max-width of the content inside the navbar.\n * @default '100%'\n */\n contentMaxWidth?: string;\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 children,\n account,\n search,\n switcher,\n help,\n badge,\n bottomRightItems,\n topRightItems,\n contentMaxWidth = '100%',\n testId = 'cf-ui-navbar',\n ...otherProps\n } = props;\n const styles = getNavbarStyles(contentMaxWidth);\n\n return (\n <Box {...otherProps} ref={ref} testId={testId}>\n <Flex className={styles.containerTop}>\n <Flex\n className={styles.containerTopContent}\n justifyContent=\"space-between\"\n >\n <Flex>{switcher}</Flex>\n <Flex alignItems=\"center\" gap=\"spacingXs\">\n {topRightItems}\n {badge}\n {search}\n {help}\n {account}\n </Flex>\n </Flex>\n </Flex>\n\n <Flex className={styles.containerBottom}>\n <Flex\n className={styles.containerBottomContent}\n justifyContent=\"space-between\"\n >\n <Flex as=\"nav\" aria-label=\"Main Navigation\">\n {children}\n </Flex>\n {bottomRightItems && <Flex>{bottomRightItems}</Flex>}\n </Flex>\n </Flex>\n </Box>\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) => ({\n containerTop: css({\n justifyContent: 'center',\n backgroundColor: tokens.gray100,\n }),\n containerBottom: css({\n justifyContent: 'center',\n backgroundColor: tokens.gray100,\n }),\n containerTopContent: css({\n width: '100%',\n maxWidth: maxWidth,\n padding: tokens.spacingXs,\n minHeight: tokens.spacingL,\n [mqs.medium]: {\n padding: `${tokens.spacingXs} 20px`,\n },\n }),\n containerBottomContent: css({\n width: '100%',\n maxWidth: maxWidth,\n padding: 0,\n paddingTop: tokens.spacing2Xs,\n minHeight: '2.5rem',\n overflow: 'auto',\n [mqs.medium]: {\n padding: `${tokens.spacing2Xs} ${tokens.spacingXs}`,\n },\n }),\n});\n","import tokens from '@contentful/f36-tokens';\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 = (shadow: string = tokens.glowPrimary) => ({\n '&:focus': {\n boxShadow: shadow,\n },\n '&:focus:not(:focus-visible)': {\n boxShadow: 'unset',\n },\n '&:focus-visible': {\n boxShadow: shadow,\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 { Flex } from '@contentful/f36-core';\n\ntype NavbarAccountOwnProps = CommonProps & {\n children: React.ReactNode;\n username: string;\n avatar: 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 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 >\n <img\n src={avatar}\n alt={`Avatar for user ${username}`}\n className={styles.avatar}\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 } 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 ),\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 { ArrowDownIcon } 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 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 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 >\n {icon && <NavbarItemIcon icon={icon} variant=\"secondary\" />}\n <span>{title}</span>\n {isMenuTrigger && <ArrowDownIcon />}\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 } from '../utils.styles';\n\nexport const getNavbarItemActiveStyles = () =>\n css({\n '&::after': {\n content: '\"\"',\n position: 'absolute',\n width: `calc(100% - ${tokens.spacingM})`,\n height: '2px',\n bottom: `-${tokens.spacing2Xs}`,\n left: 0,\n right: 0,\n margin: 'auto',\n backgroundColor: tokens.blue600,\n zIndex: 0,\n },\n });\n\nconst commonItemStyles = {\n display: 'flex',\n justifyContent: 'center',\n padding: `${tokens.spacing2Xs} ${tokens.spacingS}`,\n alignItems: 'center',\n background: 'none',\n};\n\nexport const getNavbarItemStyles = () => ({\n navbarItem: css(\n commonItemStyles,\n {\n alignItems: 'center',\n background: 'none',\n border: 0,\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.gray700,\n boxSizing: 'border-box',\n transition: `color ${tokens.transitionDurationShort} ${tokens.transitionEasingCubicBezier}`,\n borderRadius: tokens.borderRadiusMedium,\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(`inset ${tokens.glowPrimary}`),\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} & Pick<IconProps, 'variant'>;\n\nexport const NavbarItemIcon = (props: NavbarItemIconProps) => {\n const { icon, variant } = props;\n const styles = getNavbarItemIconStyles();\n\n return React.cloneElement(icon, {\n className: cx(icon.props.className, styles.navbarItemIcon),\n size: icon.props.size ?? 'tiny',\n variant: icon.props.variant ?? variant,\n });\n};\n","import { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\nexport const getNavbarItemIconStyles = () => ({\n navbarItemIcon: css({\n fill: tokens.gray700,\n '&:first-child': {\n marginRight: tokens.spacing2Xs,\n },\n '&:last-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 { generateIcon } from '@contentful/f36-icon';\n\nexport const CircleIcon = /*#__PURE__*/ generateIcon({\n name: 'CircleIcon',\n viewBox: '0 0 24 24',\n path: (\n <path\n d=\"M11.994 6.526A5.47 5.47 0 0 0 6.526 12a5.47 5.47 0 0 0 5.468 5.473A5.476 5.476 0 0 0 17.473 12a5.477 5.477 0 0 0-5.479-5.474ZM12 15.447a3.448 3.448 0 1 1 0-6.896 3.448 3.448 0 0 1 0 6.896Z\"\n fill=\"currentFill\"\n />\n ),\n});\n","import React from 'react';\nimport { generateIcon } from '@contentful/f36-icon';\n\nexport const ArrowDownIcon = /*#__PURE__*/ generateIcon({\n name: 'ArrowDownIcon',\n viewBox: '0 0 12 20',\n path: (\n <path\n d=\"M3.03076 8C2.20109 8 1.73228 8.95209 2.23814 9.60971L5.20727 13.4696C5.60757 13.99 6.39223 13.99 6.79252 13.4696L9.76166 9.60971C10.2675 8.95209 9.79871 8 8.96904 8L3.03076 8Z\"\n fill=\"#9FA8B2\"\n />\n ),\n});\n","import React from 'react';\nimport { generateIcon } from '@contentful/f36-icon';\n\nexport const HelpIcon = /*#__PURE__*/ generateIcon({\n name: 'HelpIcon',\n viewBox: '0 0 24 24',\n path: (\n <>\n <g clipPath=\"url(#HelpIcon_svg__a)\">\n <path\n d=\"M12 2.25A9.75 9.75 0 1 0 21.75 12 9.769 9.769 0 0 0 12 2.25ZM12 18a1.125 1.125 0 1 1 0-2.25A1.125 1.125 0 0 1 12 18Zm.75-4.584v.084a.75.75 0 1 1-1.5 0v-.75A.75.75 0 0 1 12 12a1.875 1.875 0 1 0-1.875-1.875.75.75 0 1 1-1.5 0 3.375 3.375 0 1 1 4.125 3.29Z\"\n fill=\"currentFill\"\n />\n </g>\n <defs>\n <clipPath id=\"HelpIcon_svg__a\">\n <path fill=\"currentFill\" d=\"M0 0h24v24H0z\" />\n </clipPath>\n </defs>\n </>\n ),\n});\n","import React from 'react';\nimport { generateIcon } from '@contentful/f36-icon';\n\nexport const SearchIcon = /*#__PURE__*/ generateIcon({\n name: 'SearchIcon',\n viewBox: '0 0 24 24',\n path: (\n <>\n <g clipPath=\"url(#SearchIcon_svg__a)\">\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M6 11.125a5.125 5.125 0 1 1 10.25 0 5.125 5.125 0 0 1-10.25 0ZM11.125 4a7.125 7.125 0 1 0 4.282 12.82l2.886 2.887a1 1 0 0 0 1.414-1.414l-2.886-2.887A7.125 7.125 0 0 0 11.125 4Z\"\n fill=\"currentFill\"\n />\n </g>\n <defs>\n <clipPath id=\"SearchIcon_svg__a\">\n <path fill=\"#fff\" d=\"M0 0h24v24H0z\" />\n </clipPath>\n </defs>\n </>\n ),\n});\n","import React from 'react';\nimport { generateIcon } from '@contentful/f36-icon';\n\nexport const ContentfulLogoIcon = /*#__PURE__*/ generateIcon({\n name: 'ContentfulLogoIcon',\n viewBox: '0 0 24 24',\n path: (\n <>\n <g clipPath=\"url(#a)\">\n <path\n d=\"M8.71 3.007c.844.843 1.17 2.078.844 3.228a6.683 6.683 0 0 1 3.444-.953h.025a6.701 6.701 0 0 1 4.743 1.988 2.637 2.637 0 0 0 3.73.093 2.637 2.637 0 0 0 .094-3.731c-.025-.027-.052-.052-.08-.08A11.95 11.95 0 0 0 13.036.006h-.046a11.92 11.92 0 0 0-6.691 2.038h.074c.876 0 1.715.346 2.335.966l.002-.002Z\"\n fill=\"#1773EB\"\n />\n <path\n d=\"M19.593 16.006c-.696 0-1.365.276-1.86.765a6.706 6.706 0 0 1-4.732 1.953h-.025a6.617 6.617 0 0 1-3.446-.97c.079.287.117.584.117.882a3.3 3.3 0 0 1-3.299 3.3h-.087a11.929 11.929 0 0 0 6.696 2.07h.046a11.934 11.934 0 0 0 8.45-3.486 2.64 2.64 0 0 0-1.857-4.514h-.003Z\"\n fill=\"#E44F20\"\n />\n <path\n d=\"M4.013 16.301a3.283 3.283 0 0 1 2.335-.967c.303 0 .604.041.893.123a6.696 6.696 0 0 1 .014-6.928 3.302 3.302 0 0 1-4.176-3.187v-.09a12 12 0 0 0-.033 13.452v-.068c0-.877.344-1.715.967-2.335Z\"\n fill=\"#FFDA00\"\n />\n <path\n d=\"M6.378 2.627c-.751 0-1.275.311-1.912.948-.606.606-.797 1.136-.8 1.767a2.712 2.712 0 1 0 5.427-.003A2.713 2.713 0 0 0 6.38 2.627h-.003Z\"\n fill=\"#1773EB\"\n />\n <path\n d=\"M3.628 18.639c0 .748.311 1.275.948 1.912.606.606 1.136.8 1.767.8a2.703 2.703 0 1 0-.017-5.408 2.703 2.703 0 0 0-2.695 2.704v-.008h-.003Z\"\n fill=\"#E44F20\"\n />\n </g>\n <defs>\n <clipPath id=\"a\">\n <path fill=\"#fff\" d=\"M0 0h24v24H0z\" />\n </clipPath>\n </defs>\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 { ExternalLinkIcon } 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} variant=\"secondary\" />\n ) : (\n itemIsExternalLink && externalIcon\n )}\n <span>{title}</span>\n {icon && itemIsExternalLink ? externalIcon : null}\n </Menu.Item>\n );\n}\n\nconst externalIcon = (\n <NavbarItemIcon icon={<ExternalLinkIcon />} variant=\"muted\" />\n);\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 from 'react';\nimport { getNavbarSwitcherStyles } from './NavbarSwitcher.styles';\nimport {\n Flex,\n type CommonProps,\n type PropsWithHTMLElement,\n type ExpandProps,\n} from '@contentful/f36-core';\nimport { MenuIcon } from '@contentful/f36-icons';\nimport { cx } from 'emotion';\nimport { ContentfulLogoIcon } from '../icons';\n\ntype NavbarSwitcherOwnProps = CommonProps & {\n children?: React.ReactNode;\n /**\n * Will be displayed instead of the default Contentful logo\n */\n logo?: React.ReactNode;\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 logo,\n testId = 'cf-ui-navbar-switcher',\n ...otherProps\n } = props;\n const styles = getNavbarSwitcherStyles();\n\n return (\n <Flex\n {...otherProps}\n as=\"button\"\n ref={ref}\n className={cx(styles.navbarSwitcher, className)}\n testId={testId}\n alignItems=\"center\"\n fullHeight\n gap=\"spacingXs\"\n >\n {logo || <ContentfulLogoIcon />}\n <MenuIcon size=\"small\" className={styles.switcherMenuIcon} />\n\n <Flex as=\"ul\" alignItems=\"center\" className={styles.switcherBreadcrumbs}>\n {children}\n </Flex>\n </Flex>\n );\n}\n\nexport const NavbarSwitcher = React.forwardRef(_NavbarSwitcher);\n","import { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\nimport { getGlowOnFocusStyles } from '../utils.styles';\n\nexport const getNavbarSwitcherStyles = () => ({\n navbarSwitcher: css(\n {\n // default button reset styles\n margin: 0,\n padding: 0,\n background: 'none',\n border: 'none',\n height: 'max-content',\n\n color: tokens.gray700,\n cursor: 'pointer',\n fontSize: tokens.fontSizeS,\n fontWeight: tokens.fontWeightMedium,\n position: 'relative',\n outline: 'none',\n borderRadius: '3rem',\n\n '&:after': {\n content: '\"\"',\n border: '1px solid #353A41',\n boxSizing: 'border-box',\n height: '16px',\n right: '-1px',\n position: 'absolute',\n width: 0,\n },\n '&:last-child:after': {\n display: 'none',\n },\n '&:hover li': {\n backgroundColor: '#f2f4f6', // Using a calculated hover alpha color because when using a RGBA value layers overlapping occur and show darker areas\n },\n },\n getGlowOnFocusStyles(),\n ),\n switcherMenuIcon: css({\n height: tokens.spacingM,\n width: tokens.spacingM,\n fill: tokens.gray700,\n }),\n switcherBreadcrumbs: css({\n listStyleType: 'none',\n margin: 0,\n padding: 0,\n position: 'relative',\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 { cx } from 'emotion';\nimport React from 'react';\nimport { SearchIcon } from '../icons';\nimport {\n type CommonProps,\n type ExpandProps,\n type PropsWithHTMLElement,\n} from '@contentful/f36-core';\nimport { IconButton } from '@contentful/f36-button';\nimport { getNavbarSearchStyles } from './NavbarSearch.styles';\ntype NavbarSearchOwnProps = CommonProps;\n\nexport type NavbarSearchProps = PropsWithHTMLElement<\n NavbarSearchOwnProps,\n 'button'\n>;\n\nfunction _NavbarSearch(\n props: ExpandProps<NavbarSearchProps>,\n ref: React.Ref<HTMLButtonElement>,\n) {\n const { className, testId = 'cf-ui-navbar-search', ...otherProps } = props;\n const styles = getNavbarSearchStyles();\n return (\n <IconButton\n aria-label=\"Quick Search\"\n {...otherProps}\n variant=\"transparent\"\n ref={ref}\n size=\"small\"\n className={cx(styles.navbarSearch, className)}\n testId={testId}\n icon={<SearchIcon size=\"medium\" />}\n />\n );\n}\n\nexport const NavbarSearch = React.forwardRef(_NavbarSearch);\n","import { css } from 'emotion';\nimport { getGlowOnFocusStyles } from '../utils.styles';\nimport tokens from '@contentful/f36-tokens';\n\nexport const getNavbarSearchStyles = () => ({\n navbarSearch: css(\n {\n // default button reset styles\n minWidth: '24px',\n width: '24px',\n minHeight: '24px',\n height: '24px',\n svg: {\n fill: tokens.gray700,\n },\n },\n getGlowOnFocusStyles(),\n ),\n});\n","import React from 'react';\nimport { cx } from 'emotion';\nimport { getNavbarSwitcherItemStyles } from './NavbarSwitcherItem.styles';\nimport { NavbarEnvVariant } from './NavbarEnvVariant';\nimport {\n Flex,\n type CommonProps,\n type ExpandProps,\n type PropsWithHTMLElement,\n} from '@contentful/f36-core';\n\ntype NavbarSwitcherItemOwnProps = CommonProps & {\n children?: React.ReactNode;\n isCircle?: boolean;\n envVariant?: 'master' | 'non-master';\n isAlias?: boolean;\n};\n\nexport type NavbarSwitcherItemProps = PropsWithHTMLElement<\n NavbarSwitcherItemOwnProps,\n 'li'\n>;\n\nfunction _NavbarSwitcherItem(\n props: ExpandProps<NavbarSwitcherItemProps>,\n ref: React.Ref<HTMLLIElement>,\n) {\n const {\n children,\n isCircle,\n className,\n envVariant,\n isAlias,\n testId = 'cf-ui-navbar-switcher-item',\n ...otherProps\n } = props;\n const styles = getNavbarSwitcherItemStyles();\n const classes = cx(styles.breadcrumbsItem, className, {\n [styles.breadcrumbsItemCircle]: isCircle,\n [styles.breadcrumbsItemEnvMaster]: envVariant === 'master',\n [styles.breadcrumbsItemEnvNonMaster]: envVariant === 'non-master',\n });\n\n return (\n <li {...otherProps} ref={ref} className={classes} data-test-id={testId}>\n <Flex fullHeight justifyContent=\"center\" alignItems=\"center\">\n {envVariant && <NavbarEnvVariant isAlias={isAlias} />}\n <span>{children}</span>\n </Flex>\n </li>\n );\n}\n\nexport const NavbarSwitcherItem = React.forwardRef(_NavbarSwitcherItem);\n","import { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\nimport { mqs } from '../utils.styles';\n\nconst mobileIcon = {\n display: 'none',\n '&:first-child': {\n display: 'block',\n },\n\n [mqs.medium]: {\n display: 'block',\n '&:first-child': {\n display: 'none',\n },\n },\n};\n\nexport const getNavbarSwitcherItemStyles = () => ({\n breadcrumbsItem: css({\n position: 'relative',\n alignItems: 'center',\n justifyContent: 'center',\n border: `solid 1px ${tokens.gray300}`,\n borderLeft: 'none',\n display: 'inline-flex',\n margin: 0,\n minWidth: 0,\n padding: `0 ${tokens.spacingXs}`,\n height: tokens.spacingL,\n borderRadius: '3rem',\n zIndex: 2,\n\n whiteSpace: 'nowrap',\n '&:first-child': {\n minWidth: '24px',\n },\n '&:nth-child(2)': {\n zIndex: 1,\n marginLeft: '-10px',\n paddingLeft: tokens.spacingM,\n borderRadius: `0 3rem 3rem 0`,\n span: {\n maxWidth: '80px',\n textOverflow: 'ellipsis',\n overflow: 'hidden',\n [mqs.large]: {\n maxWidth: '100%',\n },\n },\n },\n '&:nth-child(3)': {\n marginLeft: '-10px',\n paddingLeft: tokens.spacingM,\n borderRadius: `0 3rem 3rem 0`,\n fontFamily: tokens.fontStackMonospace,\n fontSize: tokens.fontSizeS,\n fontWeight: tokens.fontWeightMedium,\n zIndex: 0,\n span: {\n maxWidth: '40px',\n textOverflow: 'ellipsis',\n overflow: 'hidden',\n [mqs.large]: {\n maxWidth: '100%',\n },\n },\n '> div': {\n [mqs.medium]: {\n gap: tokens.spacing2Xs,\n },\n },\n },\n }),\n breadcrumbsItemCircle: css({\n border: `solid 1px ${tokens.gray300}`,\n borderRadius: '50%',\n color: tokens.gray400,\n padding: 0,\n display: 'flex',\n justifyContent: 'center',\n fontSize: '11px',\n width: tokens.spacingL,\n height: tokens.spacingL,\n }),\n breadcrumbsItemEnvMaster: css({\n color: tokens.green600,\n ' svg': {\n ...mobileIcon,\n fill: tokens.green600,\n },\n }),\n breadcrumbsItemEnvNonMaster: css({\n color: tokens.orange500,\n svg: {\n ...mobileIcon,\n fill: tokens.orange500,\n },\n }),\n});\n","import React from 'react';\nimport { NavbarSwitcherItemProps } from './NavbarSwitcherItem';\nimport { CircleIcon } from '../icons';\nimport { EnvironmentAliasIcon, EnvironmentIcon } from '@contentful/f36-icons';\n\nexport type NavbarEnvVariantProps = Pick<NavbarSwitcherItemProps, 'isAlias'>;\n\nexport function NavbarEnvVariant({ isAlias }: NavbarEnvVariantProps) {\n return (\n <>\n <CircleIcon key=\"mobile-icon\" size=\"tiny\" />\n {isAlias ? (\n <EnvironmentAliasIcon key=\"full-icon\" size=\"tiny\" />\n ) : (\n <EnvironmentIcon key=\"full-icon\" size=\"tiny\" />\n )}\n </>\n );\n}\n","import React from 'react';\nimport { cx } from 'emotion';\nimport { HelpIcon } from '../icons';\nimport {\n type CommonProps,\n type PropsWithHTMLElement,\n type ExpandProps,\n} from '@contentful/f36-core';\nimport { Button } from '@contentful/f36-button';\nimport { NavbarMenu } from '../NavbarMenu/NavbarMenu';\nimport { getNavbarHelpStyles } from './NavbarHelp.styles';\n\ntype NavbarHelpOwnProps = CommonProps & {\n children: React.ReactNode;\n};\n\nexport type NavbarHelpProps = PropsWithHTMLElement<\n NavbarHelpOwnProps,\n 'button'\n>;\n\nfunction _NavbarHelp(\n props: ExpandProps<NavbarHelpProps>,\n ref: React.Ref<HTMLButtonElement>,\n) {\n const {\n children,\n className,\n testId = 'cf-ui-navbar-help-trigger',\n ...otherProps\n } = props;\n\n const styles = getNavbarHelpStyles();\n\n return (\n <NavbarMenu\n testId=\"cf-ui-navbar-help-menu\"\n trigger={\n <Button\n aria-label=\"Help Menu\"\n {...otherProps}\n as=\"button\"\n ref={ref}\n className={cx(styles.navbarHelp, className)}\n testId={testId}\n variant=\"transparent\"\n size=\"small\"\n startIcon={<HelpIcon size=\"medium\" />}\n >\n Help\n </Button>\n }\n >\n {children}\n </NavbarMenu>\n );\n}\n\nexport const NavbarHelp = React.forwardRef(_NavbarHelp);\n","import { css } from 'emotion';\nimport { getGlowOnFocusStyles } from '../utils.styles';\nimport tokens from '@contentful/f36-tokens';\n\nexport const getNavbarHelpStyles = () => ({\n navbarHelp: css(\n {\n // default button reset styles\n fontSize: tokens.fontSizeS,\n padding: `0 ${tokens.spacing2Xs}`,\n width: 'max-content',\n minHeight: '24px',\n height: '24px',\n color: tokens.gray700,\n svg: {\n fill: tokens.gray700,\n },\n },\n getGlowOnFocusStyles(),\n ),\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 }),\n});\n","import React from 'react';\nimport { cx } from 'emotion';\nimport { getNavbarTopbarItemStyles } from './NavbarTopbarItem.styles';\nimport type {\n CommonProps,\n ExpandProps,\n PolymorphicComponent,\n PolymorphicProps,\n} from '@contentful/f36-core';\n\nconst NAVBAR_BADGE_DEFAULT_TAG = 'button';\n\ntype NavbarTopbarItemOwnProps = CommonProps & {\n children?: React.ReactNode;\n};\n\nexport type NavbarTopbarItemProps<\n E extends React.ElementType = typeof NAVBAR_BADGE_DEFAULT_TAG,\n> = PolymorphicProps<NavbarTopbarItemOwnProps, E>;\n\nfunction _NavbarTopbarItem<\n E extends React.ElementType = typeof NAVBAR_BADGE_DEFAULT_TAG,\n>(props: NavbarTopbarItemProps<E>, ref: React.Ref<any>) {\n const {\n as: Comp = NAVBAR_BADGE_DEFAULT_TAG,\n children,\n className,\n testId = 'cf-ui-navbar-topbar-item',\n ...otherProps\n } = props;\n const styles = getNavbarTopbarItemStyles();\n\n return (\n <Comp\n {...otherProps}\n ref={ref}\n className={cx(styles.navbarTopItem, className)}\n data-test-id={testId}\n >\n {children}\n </Comp>\n );\n}\n\nexport const NavbarTopbarItem: PolymorphicComponent<\n ExpandProps<NavbarTopbarItemOwnProps>,\n typeof NAVBAR_BADGE_DEFAULT_TAG\n> = React.forwardRef(_NavbarTopbarItem);\n","import { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\nimport { getGlowOnFocusStyles } from '../utils.styles';\nimport { hexToRGBA } from '@contentful/f36-utils';\nexport const getNavbarTopbarItemStyles = () => ({\n navbarTopItem: css(\n {\n // default button reset styles\n margin: 0,\n background: 'none',\n border: '1px solid',\n borderColor: 'transparent',\n cursor: 'pointer',\n display: 'flex',\n gap: tokens.spacing2Xs,\n alignItems: 'center',\n lineHeight: tokens.lineHeightDefault,\n color: tokens.gray700,\n padding: `0 ${tokens.spacing2Xs}`,\n minHeight: '24px',\n fontSize: tokens.fontSizeS,\n fontWeight: tokens.fontWeightMedium,\n outline: 'none',\n borderRadius: tokens.borderRadiusMedium,\n\n '&:hover': {\n backgroundColor: hexToRGBA(tokens.gray900, 0.05),\n },\n svg: {\n fill: 'currentColor',\n },\n },\n getGlowOnFocusStyles(),\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/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","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.spacingXs,\n minHeight: tokens.spacingL,\n [mqs.medium]: {\n padding: `${tokens.spacingXs} 20px`,\n },\n }),\n});\n","import tokens from '@contentful/f36-tokens';\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 = (shadow: string = tokens.glowPrimary) => ({\n '&:focus': {\n boxShadow: shadow,\n },\n '&:focus:not(:focus-visible)': {\n boxShadow: 'unset',\n },\n '&:focus-visible': {\n boxShadow: shadow,\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 } 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 ),\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 } 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 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\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 ),\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 } from '../utils.styles';\n\nexport const getNavbarSwitcherStyles = () => ({\n navbarSwitcher: css(\n {\n flexShrink: 1,\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 ),\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"]}
package/dist/index.d.mts CHANGED
@@ -1,61 +1,66 @@
1
1
  import { MenuListProps, MenuProps, MenuItemProps, MenuDivider, MenuSectionTitle } from '@contentful/f36-menu';
2
2
  import { CommonProps, PolymorphicComponent, ExpandProps } from '@contentful/f36-core';
3
- import React from 'react';
3
+ import React, { ReactNode } from 'react';
4
4
  import { IconProps } from '@contentful/f36-icons';
5
5
 
6
6
  declare type NavbarOwnProps = CommonProps & {
7
- children?: React.ReactNode;
8
- account?: React.ReactNode;
9
- search?: React.ReactNode;
10
- switcher?: React.ReactNode;
11
- help?: React.ReactNode;
12
- badge?: React.ReactNode;
13
- /**
14
- * Items that will be rendered on the bottom-right of the navbar.
15
- * Useful for separating other navigation items from main ones, (e.g. separating "Settings" from all other navigation items).
16
- */
17
- bottomRightItems?: React.ReactNode;
18
7
  /**
19
- * Items that will be rendered on the top-right of the navbar.
20
- * Useful for providing additional context or actions to the user (e.g. a Feedback form link).
8
+ * Accepts a React Component that will be displayed
9
+ * instead of the Contentful Logo
21
10
  */
22
- topRightItems?: React.ReactNode;
11
+ logo?: React.ReactNode;
12
+ /** Environment Switcher component */
13
+ switcher?: React.ReactNode;
14
+ /** Main Navigation Elements */
15
+ mainNavigation?: React.ReactNode;
16
+ /** Secondary Navigation Elements, displayed in the right side */
17
+ secondaryNavigation?: React.ReactNode;
18
+ /** User Account Component */
19
+ account?: React.ReactNode;
23
20
  /**
24
21
  * Defines the max-width of the content inside the navbar.
25
22
  * @default '100%'
26
23
  */
27
24
  contentMaxWidth?: string;
25
+ /**
26
+ * Describes the size variation of the Navbar
27
+ * Variant wide will set the contentMaxWidth to 1524px
28
+ */
29
+ variant?: 'wide' | 'fullscreen';
28
30
  };
29
31
  declare type NavbarHTMLElementProps = Pick<React.ComponentPropsWithoutRef<'div'>, 'id'>;
30
32
  declare type NavbarProps = NavbarHTMLElementProps & NavbarOwnProps;
31
33
  declare const Navbar$1: React.ForwardRefExoticComponent<NavbarHTMLElementProps & CommonProps & {
32
- children?: React.ReactNode;
33
- account?: React.ReactNode;
34
- search?: React.ReactNode;
35
- switcher?: React.ReactNode;
36
- help?: React.ReactNode;
37
- badge?: React.ReactNode;
38
- /**
39
- * Items that will be rendered on the bottom-right of the navbar.
40
- * Useful for separating other navigation items from main ones, (e.g. separating "Settings" from all other navigation items).
41
- */
42
- bottomRightItems?: React.ReactNode;
43
34
  /**
44
- * Items that will be rendered on the top-right of the navbar.
45
- * Useful for providing additional context or actions to the user (e.g. a Feedback form link).
35
+ * Accepts a React Component that will be displayed
36
+ * instead of the Contentful Logo
46
37
  */
47
- topRightItems?: React.ReactNode;
38
+ logo?: React.ReactNode;
39
+ /** Environment Switcher component */
40
+ switcher?: React.ReactNode;
41
+ /** Main Navigation Elements */
42
+ mainNavigation?: React.ReactNode;
43
+ /** Secondary Navigation Elements, displayed in the right side */
44
+ secondaryNavigation?: React.ReactNode;
45
+ /** User Account Component */
46
+ account?: React.ReactNode;
48
47
  /**
49
48
  * Defines the max-width of the content inside the navbar.
50
49
  * @default '100%'
51
50
  */
52
51
  contentMaxWidth?: string;
52
+ /**
53
+ * Describes the size variation of the Navbar
54
+ * Variant wide will set the contentMaxWidth to 1524px
55
+ */
56
+ variant?: 'wide' | 'fullscreen';
53
57
  } & React.RefAttributes<HTMLElement>>;
54
58
 
55
- declare const NavbarAccount: React.ForwardRefExoticComponent<Omit<Omit<Pick<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof React.ButtonHTMLAttributes<HTMLButtonElement>>, never>, "children" | keyof CommonProps | "username" | "avatar" | "hasNotification" | "notificationVariant"> & CommonProps & {
59
+ declare const NavbarAccount: React.ForwardRefExoticComponent<Omit<Omit<Pick<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof React.ButtonHTMLAttributes<HTMLButtonElement>>, never>, "children" | keyof CommonProps | "username" | "avatar" | "initials" | "hasNotification" | "notificationVariant"> & CommonProps & {
56
60
  children: React.ReactNode;
57
61
  username: string;
58
- avatar: string;
62
+ avatar?: string;
63
+ initials?: string;
59
64
  hasNotification?: boolean;
60
65
  /**
61
66
  * @default 'warning'
@@ -74,11 +79,12 @@ declare type NavbarMenuProps = {
74
79
 
75
80
  declare type NavbarItemIconProps = {
76
81
  icon: React.ReactElement<IconProps>;
77
- } & Pick<IconProps, 'variant'>;
82
+ } & Partial<Pick<IconProps, 'isActive'>>;
78
83
 
79
84
  declare const NAVBAR_ITEM_DEFAULT_TAG = "button";
80
85
  declare type NavbarItemTriggerProps = CommonProps & {
81
- title: string;
86
+ label?: string;
87
+ title?: string;
82
88
  icon?: NavbarItemIconProps['icon'];
83
89
  isActive?: boolean;
84
90
  as?: React.ElementType;
@@ -111,43 +117,23 @@ declare const NavbarMenuItemSkeleton: ({ ariaLabel, }: {
111
117
  ariaLabel?: string;
112
118
  }) => JSX.Element;
113
119
 
114
- declare const NavbarSwitcher: React.ForwardRefExoticComponent<Omit<Omit<Pick<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof React.ButtonHTMLAttributes<HTMLButtonElement>>, never>, "children" | keyof CommonProps | "logo"> & CommonProps & {
115
- children?: React.ReactNode;
116
- /**
117
- * Will be displayed instead of the default Contentful logo
118
- */
119
- logo?: React.ReactNode;
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 & {
121
+ children: ReactNode;
122
+ isCircle?: boolean;
123
+ envVariant?: 'master' | 'non-master';
124
+ isAlias?: boolean;
120
125
  } & React.RefAttributes<HTMLButtonElement>>;
121
126
 
122
127
  declare const NavbarSwitcherSkeleton: ({ estimatedWidth, }: {
123
128
  estimatedWidth: number;
124
129
  }) => JSX.Element;
125
130
 
126
- declare const NavbarSearch: React.ForwardRefExoticComponent<Omit<Omit<Pick<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof React.ButtonHTMLAttributes<HTMLButtonElement>>, never>, keyof CommonProps> & CommonProps & React.RefAttributes<HTMLButtonElement>>;
127
-
128
- declare const NavbarSwitcherItem: React.ForwardRefExoticComponent<Omit<Omit<Pick<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "key" | keyof React.LiHTMLAttributes<HTMLLIElement>>, never>, "children" | keyof CommonProps | "isCircle" | "envVariant" | "isAlias"> & CommonProps & {
129
- children?: React.ReactNode;
130
- isCircle?: boolean;
131
- envVariant?: 'master' | 'non-master';
132
- isAlias?: boolean;
133
- } & React.RefAttributes<HTMLLIElement>>;
134
-
135
- declare const NavbarHelp: React.ForwardRefExoticComponent<Omit<Omit<Pick<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof React.ButtonHTMLAttributes<HTMLButtonElement>>, never>, "children" | keyof CommonProps> & CommonProps & {
136
- children: React.ReactNode;
137
- } & React.RefAttributes<HTMLButtonElement>>;
138
-
139
- declare const NAVBAR_BADGE_DEFAULT_TAG$1 = "div";
131
+ declare const NAVBAR_BADGE_DEFAULT_TAG = "div";
140
132
  declare type NavbarBadgeOwnProps = CommonProps & {
141
133
  children?: React.ReactNode;
142
134
  as?: React.ElementType;
143
135
  };
144
- declare const NavbarBadge: PolymorphicComponent<ExpandProps<NavbarBadgeOwnProps>, typeof NAVBAR_BADGE_DEFAULT_TAG$1>;
145
-
146
- declare const NAVBAR_BADGE_DEFAULT_TAG = "button";
147
- declare type NavbarTopbarItemOwnProps = CommonProps & {
148
- children?: React.ReactNode;
149
- };
150
- declare const NavbarTopbarItem: PolymorphicComponent<ExpandProps<NavbarTopbarItemOwnProps>, typeof NAVBAR_BADGE_DEFAULT_TAG>;
136
+ declare const NavbarBadge: PolymorphicComponent<ExpandProps<NavbarBadgeOwnProps>, typeof NAVBAR_BADGE_DEFAULT_TAG>;
151
137
 
152
138
  declare type CompoundNavbar = typeof Navbar$1 & {
153
139
  Item: typeof NavbarItem;
@@ -158,13 +144,9 @@ declare type CompoundNavbar = typeof Navbar$1 & {
158
144
  MenuSectionTitle: typeof MenuSectionTitle;
159
145
  Switcher: typeof NavbarSwitcher;
160
146
  SwitcherSkeleton: typeof NavbarSwitcherSkeleton;
161
- SwitcherItem: typeof NavbarSwitcherItem;
162
- Search: typeof NavbarSearch;
163
- Help: typeof NavbarHelp;
164
147
  Account: typeof NavbarAccount;
165
148
  AccountSkeleton: typeof NavbarAccountSkeleton;
166
149
  Badge: typeof NavbarBadge;
167
- TopbarItem: typeof NavbarTopbarItem;
168
150
  };
169
151
  declare const Navbar: CompoundNavbar;
170
152
 
package/dist/index.d.ts CHANGED
@@ -1,61 +1,66 @@
1
1
  import { MenuListProps, MenuProps, MenuItemProps, MenuDivider, MenuSectionTitle } from '@contentful/f36-menu';
2
2
  import { CommonProps, PolymorphicComponent, ExpandProps } from '@contentful/f36-core';
3
- import React from 'react';
3
+ import React, { ReactNode } from 'react';
4
4
  import { IconProps } from '@contentful/f36-icons';
5
5
 
6
6
  declare type NavbarOwnProps = CommonProps & {
7
- children?: React.ReactNode;
8
- account?: React.ReactNode;
9
- search?: React.ReactNode;
10
- switcher?: React.ReactNode;
11
- help?: React.ReactNode;
12
- badge?: React.ReactNode;
13
- /**
14
- * Items that will be rendered on the bottom-right of the navbar.
15
- * Useful for separating other navigation items from main ones, (e.g. separating "Settings" from all other navigation items).
16
- */
17
- bottomRightItems?: React.ReactNode;
18
7
  /**
19
- * Items that will be rendered on the top-right of the navbar.
20
- * Useful for providing additional context or actions to the user (e.g. a Feedback form link).
8
+ * Accepts a React Component that will be displayed
9
+ * instead of the Contentful Logo
21
10
  */
22
- topRightItems?: React.ReactNode;
11
+ logo?: React.ReactNode;
12
+ /** Environment Switcher component */
13
+ switcher?: React.ReactNode;
14
+ /** Main Navigation Elements */
15
+ mainNavigation?: React.ReactNode;
16
+ /** Secondary Navigation Elements, displayed in the right side */
17
+ secondaryNavigation?: React.ReactNode;
18
+ /** User Account Component */
19
+ account?: React.ReactNode;
23
20
  /**
24
21
  * Defines the max-width of the content inside the navbar.
25
22
  * @default '100%'
26
23
  */
27
24
  contentMaxWidth?: string;
25
+ /**
26
+ * Describes the size variation of the Navbar
27
+ * Variant wide will set the contentMaxWidth to 1524px
28
+ */
29
+ variant?: 'wide' | 'fullscreen';
28
30
  };
29
31
  declare type NavbarHTMLElementProps = Pick<React.ComponentPropsWithoutRef<'div'>, 'id'>;
30
32
  declare type NavbarProps = NavbarHTMLElementProps & NavbarOwnProps;
31
33
  declare const Navbar$1: React.ForwardRefExoticComponent<NavbarHTMLElementProps & CommonProps & {
32
- children?: React.ReactNode;
33
- account?: React.ReactNode;
34
- search?: React.ReactNode;
35
- switcher?: React.ReactNode;
36
- help?: React.ReactNode;
37
- badge?: React.ReactNode;
38
- /**
39
- * Items that will be rendered on the bottom-right of the navbar.
40
- * Useful for separating other navigation items from main ones, (e.g. separating "Settings" from all other navigation items).
41
- */
42
- bottomRightItems?: React.ReactNode;
43
34
  /**
44
- * Items that will be rendered on the top-right of the navbar.
45
- * Useful for providing additional context or actions to the user (e.g. a Feedback form link).
35
+ * Accepts a React Component that will be displayed
36
+ * instead of the Contentful Logo
46
37
  */
47
- topRightItems?: React.ReactNode;
38
+ logo?: React.ReactNode;
39
+ /** Environment Switcher component */
40
+ switcher?: React.ReactNode;
41
+ /** Main Navigation Elements */
42
+ mainNavigation?: React.ReactNode;
43
+ /** Secondary Navigation Elements, displayed in the right side */
44
+ secondaryNavigation?: React.ReactNode;
45
+ /** User Account Component */
46
+ account?: React.ReactNode;
48
47
  /**
49
48
  * Defines the max-width of the content inside the navbar.
50
49
  * @default '100%'
51
50
  */
52
51
  contentMaxWidth?: string;
52
+ /**
53
+ * Describes the size variation of the Navbar
54
+ * Variant wide will set the contentMaxWidth to 1524px
55
+ */
56
+ variant?: 'wide' | 'fullscreen';
53
57
  } & React.RefAttributes<HTMLElement>>;
54
58
 
55
- declare const NavbarAccount: React.ForwardRefExoticComponent<Omit<Omit<Pick<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof React.ButtonHTMLAttributes<HTMLButtonElement>>, never>, "children" | keyof CommonProps | "username" | "avatar" | "hasNotification" | "notificationVariant"> & CommonProps & {
59
+ declare const NavbarAccount: React.ForwardRefExoticComponent<Omit<Omit<Pick<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof React.ButtonHTMLAttributes<HTMLButtonElement>>, never>, "children" | keyof CommonProps | "username" | "avatar" | "initials" | "hasNotification" | "notificationVariant"> & CommonProps & {
56
60
  children: React.ReactNode;
57
61
  username: string;
58
- avatar: string;
62
+ avatar?: string;
63
+ initials?: string;
59
64
  hasNotification?: boolean;
60
65
  /**
61
66
  * @default 'warning'
@@ -74,11 +79,12 @@ declare type NavbarMenuProps = {
74
79
 
75
80
  declare type NavbarItemIconProps = {
76
81
  icon: React.ReactElement<IconProps>;
77
- } & Pick<IconProps, 'variant'>;
82
+ } & Partial<Pick<IconProps, 'isActive'>>;
78
83
 
79
84
  declare const NAVBAR_ITEM_DEFAULT_TAG = "button";
80
85
  declare type NavbarItemTriggerProps = CommonProps & {
81
- title: string;
86
+ label?: string;
87
+ title?: string;
82
88
  icon?: NavbarItemIconProps['icon'];
83
89
  isActive?: boolean;
84
90
  as?: React.ElementType;
@@ -111,43 +117,23 @@ declare const NavbarMenuItemSkeleton: ({ ariaLabel, }: {
111
117
  ariaLabel?: string;
112
118
  }) => JSX.Element;
113
119
 
114
- declare const NavbarSwitcher: React.ForwardRefExoticComponent<Omit<Omit<Pick<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof React.ButtonHTMLAttributes<HTMLButtonElement>>, never>, "children" | keyof CommonProps | "logo"> & CommonProps & {
115
- children?: React.ReactNode;
116
- /**
117
- * Will be displayed instead of the default Contentful logo
118
- */
119
- logo?: React.ReactNode;
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 & {
121
+ children: ReactNode;
122
+ isCircle?: boolean;
123
+ envVariant?: 'master' | 'non-master';
124
+ isAlias?: boolean;
120
125
  } & React.RefAttributes<HTMLButtonElement>>;
121
126
 
122
127
  declare const NavbarSwitcherSkeleton: ({ estimatedWidth, }: {
123
128
  estimatedWidth: number;
124
129
  }) => JSX.Element;
125
130
 
126
- declare const NavbarSearch: React.ForwardRefExoticComponent<Omit<Omit<Pick<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof React.ButtonHTMLAttributes<HTMLButtonElement>>, never>, keyof CommonProps> & CommonProps & React.RefAttributes<HTMLButtonElement>>;
127
-
128
- declare const NavbarSwitcherItem: React.ForwardRefExoticComponent<Omit<Omit<Pick<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "key" | keyof React.LiHTMLAttributes<HTMLLIElement>>, never>, "children" | keyof CommonProps | "isCircle" | "envVariant" | "isAlias"> & CommonProps & {
129
- children?: React.ReactNode;
130
- isCircle?: boolean;
131
- envVariant?: 'master' | 'non-master';
132
- isAlias?: boolean;
133
- } & React.RefAttributes<HTMLLIElement>>;
134
-
135
- declare const NavbarHelp: React.ForwardRefExoticComponent<Omit<Omit<Pick<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof React.ButtonHTMLAttributes<HTMLButtonElement>>, never>, "children" | keyof CommonProps> & CommonProps & {
136
- children: React.ReactNode;
137
- } & React.RefAttributes<HTMLButtonElement>>;
138
-
139
- declare const NAVBAR_BADGE_DEFAULT_TAG$1 = "div";
131
+ declare const NAVBAR_BADGE_DEFAULT_TAG = "div";
140
132
  declare type NavbarBadgeOwnProps = CommonProps & {
141
133
  children?: React.ReactNode;
142
134
  as?: React.ElementType;
143
135
  };
144
- declare const NavbarBadge: PolymorphicComponent<ExpandProps<NavbarBadgeOwnProps>, typeof NAVBAR_BADGE_DEFAULT_TAG$1>;
145
-
146
- declare const NAVBAR_BADGE_DEFAULT_TAG = "button";
147
- declare type NavbarTopbarItemOwnProps = CommonProps & {
148
- children?: React.ReactNode;
149
- };
150
- declare const NavbarTopbarItem: PolymorphicComponent<ExpandProps<NavbarTopbarItemOwnProps>, typeof NAVBAR_BADGE_DEFAULT_TAG>;
136
+ declare const NavbarBadge: PolymorphicComponent<ExpandProps<NavbarBadgeOwnProps>, typeof NAVBAR_BADGE_DEFAULT_TAG>;
151
137
 
152
138
  declare type CompoundNavbar = typeof Navbar$1 & {
153
139
  Item: typeof NavbarItem;
@@ -158,13 +144,9 @@ declare type CompoundNavbar = typeof Navbar$1 & {
158
144
  MenuSectionTitle: typeof MenuSectionTitle;
159
145
  Switcher: typeof NavbarSwitcher;
160
146
  SwitcherSkeleton: typeof NavbarSwitcherSkeleton;
161
- SwitcherItem: typeof NavbarSwitcherItem;
162
- Search: typeof NavbarSearch;
163
- Help: typeof NavbarHelp;
164
147
  Account: typeof NavbarAccount;
165
148
  AccountSkeleton: typeof NavbarAccountSkeleton;
166
149
  Badge: typeof NavbarBadge;
167
- TopbarItem: typeof NavbarTopbarItem;
168
150
  };
169
151
  declare const Navbar: CompoundNavbar;
170
152
 
package/dist/index.js CHANGED
@@ -2,23 +2,24 @@
2
2
 
3
3
  var f36Menu = require('@contentful/f36-menu');
4
4
  var f36Core = require('@contentful/f36-core');
5
- var v = require('react');
5
+ var g = require('react');
6
6
  var emotion = require('emotion');
7
- var f = require('@contentful/f36-tokens');
7
+ var i = require('@contentful/f36-tokens');
8
+ var f36Icon = require('@contentful/f36-icon');
8
9
  var f36Utils = require('@contentful/f36-utils');
10
+ var f36Avatar = require('@contentful/f36-avatar');
9
11
  var f36Skeleton = require('@contentful/f36-skeleton');
10
- var f36Icon = require('@contentful/f36-icon');
11
12
  var f36Icons = require('@contentful/f36-icons');
12
13
  var f36Button = require('@contentful/f36-button');
13
14
 
14
15
  function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
15
16
 
16
- var v__default = /*#__PURE__*/_interopDefault(v);
17
- var f__default = /*#__PURE__*/_interopDefault(f);
17
+ var g__default = /*#__PURE__*/_interopDefault(g);
18
+ var i__default = /*#__PURE__*/_interopDefault(i);
18
19
 
19
- var Qe=Object.defineProperty,Je=Object.defineProperties;var Ke=Object.getOwnPropertyDescriptors;var X=Object.getOwnPropertySymbols;var le=Object.prototype.hasOwnProperty,fe=Object.prototype.propertyIsEnumerable;var ce=(e,t,o)=>t in e?Qe(e,t,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[t]=o,i=(e,t)=>{for(var o in t||(t={}))le.call(t,o)&&ce(e,o,t[o]);if(X)for(var o of X(t))fe.call(t,o)&&ce(e,o,t[o]);return e},s=(e,t)=>Je(e,Ke(t));var l=(e,t)=>{var o={};for(var r in e)le.call(e,r)&&t.indexOf(r)<0&&(o[r]=e[r]);if(e!=null&&X)for(var r of X(e))t.indexOf(r)<0&&fe.call(e,r)&&(o[r]=e[r]);return o};var x={medium:"@media (min-width: 480px)",large:"@media (min-width: 768px)",xlarge:"@media (min-width: 1920px)"},u=(e=f__default.default.glowPrimary)=>({"&:focus":{boxShadow:e},"&:focus:not(:focus-visible)":{boxShadow:"unset"},"&:focus-visible":{boxShadow:e}});var de=e=>({containerTop:emotion.css({justifyContent:"center",backgroundColor:f__default.default.gray100}),containerBottom:emotion.css({justifyContent:"center",backgroundColor:f__default.default.gray100}),containerTopContent:emotion.css({width:"100%",maxWidth:e,padding:f__default.default.spacingXs,minHeight:f__default.default.spacingL,[x.medium]:{padding:`${f__default.default.spacingXs} 20px`}}),containerBottomContent:emotion.css({width:"100%",maxWidth:e,padding:0,paddingTop:f__default.default.spacing2Xs,minHeight:"2.5rem",overflow:"auto",[x.medium]:{padding:`${f__default.default.spacing2Xs} ${f__default.default.spacingXs}`}})});function ot(e,t){let F=e,{children:o,account:r,search:n,switcher:a,help:p,badge:c,bottomRightItems:m,topRightItems:g,contentMaxWidth:N="100%",testId:y="cf-ui-navbar"}=F,R=l(F,["children","account","search","switcher","help","badge","bottomRightItems","topRightItems","contentMaxWidth","testId"]),I=de(N);return v__default.default.createElement(f36Core.Box,s(i({},R),{ref:t,testId:y}),v__default.default.createElement(f36Core.Flex,{className:I.containerTop},v__default.default.createElement(f36Core.Flex,{className:I.containerTopContent,justifyContent:"space-between"},v__default.default.createElement(f36Core.Flex,null,a),v__default.default.createElement(f36Core.Flex,{alignItems:"center",gap:"spacingXs"},g,c,n,p,r))),v__default.default.createElement(f36Core.Flex,{className:I.containerBottom},v__default.default.createElement(f36Core.Flex,{className:I.containerBottomContent,justifyContent:"space-between"},v__default.default.createElement(f36Core.Flex,{as:"nav","aria-label":"Main Navigation"},o),m&&v__default.default.createElement(f36Core.Flex,null,m))))}var be=v__default.default.forwardRef(ot);var at={warning:f__default.default.colorWarning,negative:f__default.default.colorNegative,info:f__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(f__default.default.gray300,.15)})},u()),avatar:emotion.css({borderRadius:"50%",display:"block",height:"24px",width:"24px"}),notificationIcon:e=>emotion.css({position:"absolute",top:0,right:0,height:f__default.default.spacingS,width:f__default.default.spacingS,borderRadius:"50%",border:`2px solid ${f__default.default.gray100}`,backgroundColor:at[e],transform:"translate(30%, -30%)"})});var ue=()=>({menuList:emotion.css({minWidth:"250px"})});var T=e=>{let{trigger:t,children:o,testId:r="cf-ui-navbar-menu-list",onOpen:n,onClose:a}=e,p=ue();return v__default.default.createElement(f36Menu.Menu,{onOpen:n,onClose:a},v__default.default.createElement(f36Menu.Menu.Trigger,null,t),v__default.default.createElement(f36Menu.Menu.List,{className:p.menuList,testId:r},o))};function pt(e,t){let y=e,{children:o,className:r,testId:n="cf-ui-navbar-account-trigger",avatar:a,username:p,hasNotification:c,notificationVariant:m="warning"}=y,g=l(y,["children","className","testId","avatar","username","hasNotification","notificationVariant"]),N=ge();return v__default.default.createElement(T,{trigger:v__default.default.createElement(f36Core.Flex,s(i({as:"button"},g),{ref:t,className:emotion.cx(N.navbarAccount,r),testId:n,alignItems:"center"}),v__default.default.createElement("img",{src:a,alt:`Avatar for user ${p}`,className:N.avatar}),c?v__default.default.createElement("span",{className:N.notificationIcon(m)}):null)},o)}var K=v__default.default.forwardRef(pt);function ee({ariaLabel:e}){return v__default.default.createElement(f36Skeleton.SkeletonContainer,{svgWidth:24,svgHeight:24,ariaLabel:e,backgroundColor:f__default.default.gray300,foregroundColor:f__default.default.gray200},v__default.default.createElement(f36Skeleton.SkeletonImage,{width:24,height:24,radiusX:12,radiusY:12}))}var Ne=()=>emotion.css({"&::after":{content:'""',position:"absolute",width:`calc(100% - ${f__default.default.spacingM})`,height:"2px",bottom:`-${f__default.default.spacing2Xs}`,left:0,right:0,margin:"auto",backgroundColor:f__default.default.blue600,zIndex:0}}),ye={display:"flex",justifyContent:"center",padding:`${f__default.default.spacing2Xs} ${f__default.default.spacingS}`,alignItems:"center",background:"none"},Ie=()=>({navbarItem:emotion.css(ye,{alignItems:"center",background:"none",border:0,margin:0,outline:"none",fontSize:f__default.default.fontSizeM,lineHeight:f__default.default.lineHeightS,fontWeight:f__default.default.fontWeightMedium,position:"relative",textAlign:"left",whiteSpace:"nowrap",cursor:"pointer",hyphens:"auto",textDecoration:"none",color:f__default.default.gray700,boxSizing:"border-box",transition:`color ${f__default.default.transitionDurationShort} ${f__default.default.transitionEasingCubicBezier}`,borderRadius:f__default.default.borderRadiusMedium,"&:hover":{backgroundColor:f36Utils.hexToRGBA(f__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 ${f__default.default.transitionDurationShort} ${f__default.default.transitionEasingCubicBezier}`},"& > svg, & > span":{zIndex:f__default.default.zIndexDefault}},u(`inset ${f__default.default.glowPrimary}`)),navbarItemMenuTrigger:emotion.css({paddingRight:f__default.default.spacingXs}),isActive:Ne()}),xe=()=>({itemSkeleton:emotion.css(ye)});var Pe=()=>({navbarItemIcon:emotion.css({fill:f__default.default.gray700,"&:first-child":{marginRight:f__default.default.spacing2Xs},"&:last-child":{marginLeft:f__default.default.spacing2Xs},"img&":{borderRadius:f__default.default.borderRadiusSmall,maxWidth:f__default.default.spacingM,maxHeight:f__default.default.spacingM}})});var z=e=>{var n,a;let{icon:t,variant:o}=e,r=Pe();return v__default.default.cloneElement(t,{className:emotion.cx(t.props.className,r.navbarItemIcon),size:(n=t.props.size)!=null?n:"tiny",variant:(a=t.props.variant)!=null?a:o})};var Se=f36Icon.generateIcon({name:"CircleIcon",viewBox:"0 0 24 24",path:v__default.default.createElement("path",{d:"M11.994 6.526A5.47 5.47 0 0 0 6.526 12a5.47 5.47 0 0 0 5.468 5.473A5.476 5.476 0 0 0 17.473 12a5.477 5.477 0 0 0-5.479-5.474ZM12 15.447a3.448 3.448 0 1 1 0-6.896 3.448 3.448 0 0 1 0 6.896Z",fill:"currentFill"})});var Me=f36Icon.generateIcon({name:"ArrowDownIcon",viewBox:"0 0 12 20",path:v__default.default.createElement("path",{d:"M3.03076 8C2.20109 8 1.73228 8.95209 2.23814 9.60971L5.20727 13.4696C5.60757 13.99 6.39223 13.99 6.79252 13.4696L9.76166 9.60971C10.2675 8.95209 9.79871 8 8.96904 8L3.03076 8Z",fill:"#9FA8B2"})});var we=f36Icon.generateIcon({name:"HelpIcon",viewBox:"0 0 24 24",path:v__default.default.createElement(v__default.default.Fragment,null,v__default.default.createElement("g",{clipPath:"url(#HelpIcon_svg__a)"},v__default.default.createElement("path",{d:"M12 2.25A9.75 9.75 0 1 0 21.75 12 9.769 9.769 0 0 0 12 2.25ZM12 18a1.125 1.125 0 1 1 0-2.25A1.125 1.125 0 0 1 12 18Zm.75-4.584v.084a.75.75 0 1 1-1.5 0v-.75A.75.75 0 0 1 12 12a1.875 1.875 0 1 0-1.875-1.875.75.75 0 1 1-1.5 0 3.375 3.375 0 1 1 4.125 3.29Z",fill:"currentFill"})),v__default.default.createElement("defs",null,v__default.default.createElement("clipPath",{id:"HelpIcon_svg__a"},v__default.default.createElement("path",{fill:"currentFill",d:"M0 0h24v24H0z"}))))});var Ae=f36Icon.generateIcon({name:"SearchIcon",viewBox:"0 0 24 24",path:v__default.default.createElement(v__default.default.Fragment,null,v__default.default.createElement("g",{clipPath:"url(#SearchIcon_svg__a)"},v__default.default.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M6 11.125a5.125 5.125 0 1 1 10.25 0 5.125 5.125 0 0 1-10.25 0ZM11.125 4a7.125 7.125 0 1 0 4.282 12.82l2.886 2.887a1 1 0 0 0 1.414-1.414l-2.886-2.887A7.125 7.125 0 0 0 11.125 4Z",fill:"currentFill"})),v__default.default.createElement("defs",null,v__default.default.createElement("clipPath",{id:"SearchIcon_svg__a"},v__default.default.createElement("path",{fill:"#fff",d:"M0 0h24v24H0z"}))))});var Ee=f36Icon.generateIcon({name:"ContentfulLogoIcon",viewBox:"0 0 24 24",path:v__default.default.createElement(v__default.default.Fragment,null,v__default.default.createElement("g",{clipPath:"url(#a)"},v__default.default.createElement("path",{d:"M8.71 3.007c.844.843 1.17 2.078.844 3.228a6.683 6.683 0 0 1 3.444-.953h.025a6.701 6.701 0 0 1 4.743 1.988 2.637 2.637 0 0 0 3.73.093 2.637 2.637 0 0 0 .094-3.731c-.025-.027-.052-.052-.08-.08A11.95 11.95 0 0 0 13.036.006h-.046a11.92 11.92 0 0 0-6.691 2.038h.074c.876 0 1.715.346 2.335.966l.002-.002Z",fill:"#1773EB"}),v__default.default.createElement("path",{d:"M19.593 16.006c-.696 0-1.365.276-1.86.765a6.706 6.706 0 0 1-4.732 1.953h-.025a6.617 6.617 0 0 1-3.446-.97c.079.287.117.584.117.882a3.3 3.3 0 0 1-3.299 3.3h-.087a11.929 11.929 0 0 0 6.696 2.07h.046a11.934 11.934 0 0 0 8.45-3.486 2.64 2.64 0 0 0-1.857-4.514h-.003Z",fill:"#E44F20"}),v__default.default.createElement("path",{d:"M4.013 16.301a3.283 3.283 0 0 1 2.335-.967c.303 0 .604.041.893.123a6.696 6.696 0 0 1 .014-6.928 3.302 3.302 0 0 1-4.176-3.187v-.09a12 12 0 0 0-.033 13.452v-.068c0-.877.344-1.715.967-2.335Z",fill:"#FFDA00"}),v__default.default.createElement("path",{d:"M6.378 2.627c-.751 0-1.275.311-1.912.948-.606.606-.797 1.136-.8 1.767a2.712 2.712 0 1 0 5.427-.003A2.713 2.713 0 0 0 6.38 2.627h-.003Z",fill:"#1773EB"}),v__default.default.createElement("path",{d:"M3.628 18.639c0 .748.311 1.275.948 1.912.606.606 1.136.8 1.767.8a2.703 2.703 0 1 0-.017-5.408 2.703 2.703 0 0 0-2.695 2.704v-.008h-.003Z",fill:"#E44F20"})),v__default.default.createElement("defs",null,v__default.default.createElement("clipPath",{id:"a"},v__default.default.createElement("path",{fill:"#fff",d:"M0 0h24v24H0z"}))))});var Pt="button";function St(e,t){let me=e,{as:o=Pt,icon:r,title:n,children:a,className:p,isActive:c,testId:m="cf-ui-navbar-item",onOpen:g,onClose:N}=me,y=l(me,["as","icon","title","children","className","isActive","testId","onOpen","onClose"]),R=Ie(),I=Mt(e),F=v__default.default.createElement(o,s(i({},y),{ref:t,"data-test-id":m,className:emotion.cx(R.navbarItem,I&&R.navbarItemMenuTrigger,c&&R.isActive,p)}),r&&v__default.default.createElement(z,{icon:r,variant:"secondary"}),v__default.default.createElement("span",null,n),I&&v__default.default.createElement(Me,null));return I?v__default.default.createElement(T,{trigger:F,testId:m,onOpen:g,onClose:N},a):F}var Mt=e=>!!e.children,te=v__default.default.forwardRef(St);var oe=({estimatedWidth:e})=>{let t=xe();return v__default.default.createElement(f36Skeleton.SkeletonContainer,{className:t.itemSkeleton,svgWidth:e,svgHeight:32,backgroundColor:f__default.default.gray300,foregroundColor:f__default.default.gray200},v__default.default.createElement(f36Skeleton.SkeletonText,{lineHeight:6,numberOfLines:1,offsetTop:10,radiusX:f__default.default.borderRadiusSmall,radiusY:f__default.default.borderRadiusSmall}))};var Ce=()=>({navbarMenuItem:emotion.css({display:"flex",justifyContent:"flex-start",alignItems:"center"})});var Bt="button";function _t(e,t){let g=e,{as:o=Bt,icon:r,title:n,className:a}=g,p=l(g,["as","icon","title","className"]),c=Ce(),m=Ht(e);return v__default.default.createElement(f36Menu.Menu.Item,s(i({},p),{ref:t,as:o,className:emotion.cx(c.navbarMenuItem,a)}),r?v__default.default.createElement(z,{icon:r,variant:"secondary"}):m&&ke,v__default.default.createElement("span",null,n),r&&m?ke:null)}var ke=v__default.default.createElement(z,{icon:v__default.default.createElement(f36Icons.ExternalLinkIcon,null),variant:"muted"}),Ht=e=>e.as==="a"&&e.target==="_blank",re=v__default.default.forwardRef(_t);var ae=({ariaLabel:e})=>v__default.default.createElement(f36Menu.Menu.Item,null,v__default.default.createElement(f36Core.Flex,{alignItems:"center",gap:f__default.default.spacingXs},v__default.default.createElement(f36Skeleton.SkeletonContainer,{svgHeight:16,svgWidth:18},v__default.default.createElement(f36Skeleton.SkeletonImage,{width:16,height:16})),v__default.default.createElement(f36Skeleton.SkeletonContainer,{svgHeight:16,svgWidth:190,ariaLabel:e},v__default.default.createElement(f36Skeleton.SkeletonBodyText,{numberOfLines:1}))));var _e=()=>({navbarSwitcher:emotion.css({margin:0,padding:0,background:"none",border:"none",height:"max-content",color:f__default.default.gray700,cursor:"pointer",fontSize:f__default.default.fontSizeS,fontWeight:f__default.default.fontWeightMedium,position:"relative",outline:"none",borderRadius:"3rem","&:after":{content:'""',border:"1px solid #353A41",boxSizing:"border-box",height:"16px",right:"-1px",position:"absolute",width:0},"&:last-child:after":{display:"none"},"&:hover li":{backgroundColor:"#f2f4f6"}},u()),switcherMenuIcon:emotion.css({height:f__default.default.spacingM,width:f__default.default.spacingM,fill:f__default.default.gray700}),switcherBreadcrumbs:emotion.css({listStyleType:"none",margin:0,padding:0,position:"relative"})});function Gt(e,t){let m=e,{children:o,className:r,logo:n,testId:a="cf-ui-navbar-switcher"}=m,p=l(m,["children","className","logo","testId"]),c=_e();return v__default.default.createElement(f36Core.Flex,s(i({},p),{as:"button",ref:t,className:emotion.cx(c.navbarSwitcher,r),testId:a,alignItems:"center",fullHeight:!0,gap:"spacingXs"}),n||v__default.default.createElement(Ee,null),v__default.default.createElement(f36Icons.MenuIcon,{size:"small",className:c.switcherMenuIcon}),v__default.default.createElement(f36Core.Flex,{as:"ul",alignItems:"center",className:c.switcherBreadcrumbs},o))}var ie=v__default.default.forwardRef(Gt);var se=({estimatedWidth:e})=>v__default.default.createElement(f36Skeleton.SkeletonContainer,{svgWidth:e,svgHeight:24,backgroundColor:f__default.default.gray300,foregroundColor:f__default.default.gray200},v__default.default.createElement(f36Skeleton.SkeletonDisplayText,{lineHeight:24,numberOfLines:1,radiusX:12,radiusY:12}));var Fe=()=>({navbarSearch:emotion.css({minWidth:"24px",width:"24px",minHeight:"24px",height:"24px",svg:{fill:f__default.default.gray700}},u())});function qt(e,t){let p=e,{className:o,testId:r="cf-ui-navbar-search"}=p,n=l(p,["className","testId"]),a=Fe();return v__default.default.createElement(f36Button.IconButton,s(i({"aria-label":"Quick Search"},n),{variant:"transparent",ref:t,size:"small",className:emotion.cx(a.navbarSearch,o),testId:r,icon:v__default.default.createElement(Ae,{size:"medium"})}))}var Oe=v__default.default.forwardRef(qt);var We={display:"none","&:first-child":{display:"block"},[x.medium]:{display:"block","&:first-child":{display:"none"}}},ze=()=>({breadcrumbsItem:emotion.css({position:"relative",alignItems:"center",justifyContent:"center",border:`solid 1px ${f__default.default.gray300}`,borderLeft:"none",display:"inline-flex",margin:0,minWidth:0,padding:`0 ${f__default.default.spacingXs}`,height:f__default.default.spacingL,borderRadius:"3rem",zIndex:2,whiteSpace:"nowrap","&:first-child":{minWidth:"24px"},"&:nth-child(2)":{zIndex:1,marginLeft:"-10px",paddingLeft:f__default.default.spacingM,borderRadius:"0 3rem 3rem 0",span:{maxWidth:"80px",textOverflow:"ellipsis",overflow:"hidden",[x.large]:{maxWidth:"100%"}}},"&:nth-child(3)":{marginLeft:"-10px",paddingLeft:f__default.default.spacingM,borderRadius:"0 3rem 3rem 0",fontFamily:f__default.default.fontStackMonospace,fontSize:f__default.default.fontSizeS,fontWeight:f__default.default.fontWeightMedium,zIndex:0,span:{maxWidth:"40px",textOverflow:"ellipsis",overflow:"hidden",[x.large]:{maxWidth:"100%"}},"> div":{[x.medium]:{gap:f__default.default.spacing2Xs}}}}),breadcrumbsItemCircle:emotion.css({border:`solid 1px ${f__default.default.gray300}`,borderRadius:"50%",color:f__default.default.gray400,padding:0,display:"flex",justifyContent:"center",fontSize:"11px",width:f__default.default.spacingL,height:f__default.default.spacingL}),breadcrumbsItemEnvMaster:emotion.css({color:f__default.default.green600," svg":s(i({},We),{fill:f__default.default.green600})}),breadcrumbsItemEnvNonMaster:emotion.css({color:f__default.default.orange500,svg:s(i({},We),{fill:f__default.default.orange500})})});function De({isAlias:e}){return v__default.default.createElement(v__default.default.Fragment,null,v__default.default.createElement(Se,{key:"mobile-icon",size:"tiny"}),e?v__default.default.createElement(f36Icons.EnvironmentAliasIcon,{key:"full-icon",size:"tiny"}):v__default.default.createElement(f36Icons.EnvironmentIcon,{key:"full-icon",size:"tiny"}))}function eo(e,t){let y=e,{children:o,isCircle:r,className:n,envVariant:a,isAlias:p,testId:c="cf-ui-navbar-switcher-item"}=y,m=l(y,["children","isCircle","className","envVariant","isAlias","testId"]),g=ze(),N=emotion.cx(g.breadcrumbsItem,n,{[g.breadcrumbsItemCircle]:r,[g.breadcrumbsItemEnvMaster]:a==="master",[g.breadcrumbsItemEnvNonMaster]:a==="non-master"});return v__default.default.createElement("li",s(i({},m),{ref:t,className:N,"data-test-id":c}),v__default.default.createElement(f36Core.Flex,{fullHeight:!0,justifyContent:"center",alignItems:"center"},a&&v__default.default.createElement(De,{isAlias:p}),v__default.default.createElement("span",null,o)))}var Ge=v__default.default.forwardRef(eo);var Ve=()=>({navbarHelp:emotion.css({fontSize:f__default.default.fontSizeS,padding:`0 ${f__default.default.spacing2Xs}`,width:"max-content",minHeight:"24px",height:"24px",color:f__default.default.gray700,svg:{fill:f__default.default.gray700}},u())});function ao(e,t){let c=e,{children:o,className:r,testId:n="cf-ui-navbar-help-trigger"}=c,a=l(c,["children","className","testId"]),p=Ve();return v__default.default.createElement(T,{testId:"cf-ui-navbar-help-menu",trigger:v__default.default.createElement(f36Button.Button,s(i({"aria-label":"Help Menu"},a),{as:"button",ref:t,className:emotion.cx(p.navbarHelp,r),testId:n,variant:"transparent",size:"small",startIcon:v__default.default.createElement(we,{size:"medium"})}),"Help")},o)}var Xe=v__default.default.forwardRef(ao);var $e=()=>({navbarBadge:emotion.css({display:"flex",justifyContent:"center",alignItems:"center",background:"none",border:`1px solid ${f__default.default.purple600}`,margin:0,outline:"none",fontSize:f__default.default.fontSizeS,lineHeight:f__default.default.lineHeightS,fontWeight:f__default.default.fontWeightMedium,textAlign:"center",padding:`0 ${f__default.default.spacingXs}`,textDecoration:"none",color:`${f__default.default.purple600}!important`,borderRadius:"1.75rem"})});var so="div";function po(e,t){let m=e,{as:o=so,children:r,className:n,testId:a="cf-ui-navbar-badge"}=m,p=l(m,["as","children","className","testId"]),c=$e();return v__default.default.createElement(o,s(i({},p),{ref:t,className:emotion.cx(c.navbarBadge,n),"data-test-id":a}),r)}var Ze=v__default.default.forwardRef(po);var je=()=>({navbarTopItem:emotion.css({margin:0,background:"none",border:"1px solid",borderColor:"transparent",cursor:"pointer",display:"flex",gap:f__default.default.spacing2Xs,alignItems:"center",lineHeight:f__default.default.lineHeightDefault,color:f__default.default.gray700,padding:`0 ${f__default.default.spacing2Xs}`,minHeight:"24px",fontSize:f__default.default.fontSizeS,fontWeight:f__default.default.fontWeightMedium,outline:"none",borderRadius:f__default.default.borderRadiusMedium,"&:hover":{backgroundColor:f36Utils.hexToRGBA(f__default.default.gray900,.05)},svg:{fill:"currentColor"}},u())});var fo="button";function bo(e,t){let m=e,{as:o=fo,children:r,className:n,testId:a="cf-ui-navbar-topbar-item"}=m,p=l(m,["as","children","className","testId"]),c=je();return v__default.default.createElement(o,s(i({},p),{ref:t,className:emotion.cx(c.navbarTopItem,n),"data-test-id":a}),r)}var Ye=v__default.default.forwardRef(bo);var b=be;b.Item=te;b.ItemSkeleton=oe;b.MenuItem=re;b.MenuItemSkeleton=ae;b.MenuDivider=f36Menu.MenuDivider;b.MenuSectionTitle=f36Menu.MenuSectionTitle;b.Switcher=ie;b.SwitcherSkeleton=se;b.SwitcherItem=Ge;b.Search=Oe;b.Help=Xe;b.Account=K;b.AccountSkeleton=ee;b.Badge=Ze;b.TopbarItem=Ye;
20
+ var _e=Object.defineProperty,Oe=Object.defineProperties;var Re=Object.getOwnPropertyDescriptors;var L=Object.getOwnPropertySymbols;var te=Object.prototype.hasOwnProperty,re=Object.prototype.propertyIsEnumerable;var oe=(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={}))te.call(o,t)&&oe(e,t,o[t]);if(L)for(var t of L(o))re.call(o,t)&&oe(e,t,o[t]);return e},u=(e,o)=>Oe(e,Re(o));var c=(e,o)=>{var t={};for(var r in e)te.call(e,r)&&o.indexOf(r)<0&&(t[r]=e[r]);if(e!=null&&L)for(var r of L(e))o.indexOf(r)<0&&re.call(e,r)&&(t[r]=e[r]);return t};var ne={medium:"@media (min-width: 480px)",large:"@media (min-width: 768px)",xlarge:"@media (min-width: 1920px)"},S=(e=i__default.default.glowPrimary)=>({"&:focus":{boxShadow:e},"&:focus:not(:focus-visible)":{boxShadow:"unset"},"&:focus-visible":{boxShadow:e}});var ae=(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.spacingXs,minHeight:i__default.default.spacingL,[ne.medium]:{padding:`${i__default.default.spacingXs} 20px`}})});var me=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 ce=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 We(e,o){let P=e,{logo:t,switcher:r,mainNavigation:a,secondaryNavigation:n,account:s,className:d,contentMaxWidth:p="100%",testId:l="cf-ui-navbar",variant:h="wide"}=P,v=c(P,["logo","switcher","mainNavigation","secondaryNavigation","account","className","contentMaxWidth","testId","variant"]),f=ae(p,h);return g__default.default.createElement(f36Core.Flex,u(m({},v),{ref:o,testId:l,className:emotion.cx(f.container,d),as:"header"}),g__default.default.createElement(f36Core.Flex,{as:"nav",className:f.navigation,justifyContent:"space-between"},g__default.default.createElement(f36Core.Flex,{alignItems:"center",gap:"spacingL"},t||g__default.default.createElement(ce,{className:f.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 le=g__default.default.forwardRef(We);var Xe={warning:i__default.default.colorWarning,negative:i__default.default.colorNegative,info:i__default.default.blue500},ue=()=>({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)})},S()),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:Xe[e],transform:"translate(30%, -30%)"})});var be=()=>({menuList:emotion.css({minWidth:"250px"})});var O=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 je(e,o){let f=e,{children:t,className:r,testId:a="cf-ui-navbar-account-trigger",avatar:n,initials:s,username:d,hasNotification:p,notificationVariant:l="warning"}=f,h=c(f,["children","className","testId","avatar","initials","username","hasNotification","notificationVariant"]),v=ue();return g__default.default.createElement(O,{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(je);function z({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 ve=()=>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}}),ge={display:"flex",justifyContent:"center",padding:`${i__default.default.spacing2Xs} ${i__default.default.spacingXs}`,alignItems:"center",background:"none",gap:i__default.default.spacing2Xs},Ne=()=>({navbarItem:emotion.css(ge,{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,"&: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}},S()),navbarItemMenuTrigger:emotion.css({paddingRight:i__default.default.spacingXs}),isActive:ve()}),he=()=>({itemSkeleton:emotion.css(ge)});var ye=()=>({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 B=({icon:e,isActive:o})=>{let s=e.props,{className:t,size:r}=s,a=c(s,["className","size"]),n=ye();return g__default.default.cloneElement(e,m({className:emotion.cx(t,n.navbarItemIcon),size:r||"small",isActive:o},a))};var to="button";function ro(e,o){let ee=e,{as:t=to,icon:r,label:a,title:n,children:s,className:d,isActive:p,testId:l="cf-ui-navbar-item",onOpen:h,onClose:v}=ee,f=c(ee,["as","icon","label","title","children","className","isActive","testId","onOpen","onClose"]),P=Ne(),V=no(e),Q=g__default.default.createElement(t,u(m({},f),{ref:o,"data-test-id":l,className:emotion.cx(P.navbarItem,V&&P.navbarItemMenuTrigger,p&&P.isActive,d),"aria-label":n?"":a}),r&&g__default.default.createElement(B,{icon:r,isActive:p}),n&&g__default.default.createElement("span",null,n),n&&V&&g__default.default.createElement(me,{size:"tiny",isActive:p}));return V?g__default.default.createElement(O,{trigger:Q,testId:l,onOpen:h,onClose:v},s):Q}var no=e=>!!e.children,$=g__default.default.forwardRef(ro);var U=({estimatedWidth:e})=>{let o=he();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 xe=()=>({navbarMenuItem:emotion.css({display:"flex",justifyContent:"flex-start",alignItems:"center"})});var lo="button";function uo(e,o){let l=e,{as:t=lo,icon:r,title:a,className:n}=l,s=c(l,["as","icon","title","className"]),d=xe(),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(B,{icon:r}):p&&Pe,g__default.default.createElement("span",null,a),r&&p?Pe:null)}var Pe=g__default.default.createElement(B,{icon:g__default.default.createElement(f36Icons.ArrowSquareOutIcon,null)}),bo=e=>e.as==="a"&&e.target==="_blank",Z=g__default.default.forwardRef(uo);var j=({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 Me=()=>({navbarSwitcher:emotion.css({flexShrink:1,maxWidth:"100%",minHeight:"unset",padding:`${i__default.default.spacing2Xs} ${i__default.default.spacingXs}`,"&:hover":{backgroundColor:f36Utils.hexToRGBA(i__default.default.gray900,.05)}},S()),switcherSpaceName:emotion.css({"&:has(> span:last-child:nth-child(3))":{minWidth:"12ch"}}),switcherSpaceNameTruncation:emotion.css({flexShrink:1,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"})});function we({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 Ao(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 Co(e,o){let f=e,{children:t,className:r,envVariant:a,isAlias:n,testId:s="cf-ui-navbar-switcher"}=f,d=c(f,["children","className","envVariant","isAlias","testId"]),p=Me(),[l,h,v]=typeof t=="string"?Ao(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(we,{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 J=g__default.default.forwardRef(Co);var K=({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 Te=()=>({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 Bo="div";function Lo(e,o){let p=e,{as:t=Bo,children:r,className:a,testId:n="cf-ui-navbar-badge"}=p,s=c(p,["as","children","className","testId"]),d=Te();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 b=le;b.Item=$;b.ItemSkeleton=U;b.MenuItem=Z;b.MenuItemSkeleton=j;b.MenuDivider=f36Menu.MenuDivider;b.MenuSectionTitle=f36Menu.MenuSectionTitle;b.Switcher=J;b.SwitcherSkeleton=K;b.Account=X;b.AccountSkeleton=z;b.Badge=Le;
20
21
 
21
22
  exports.Navbar = b;
22
- exports.getNavbarItemActiveStyles = Ne;
23
+ exports.getNavbarItemActiveStyles = ve;
23
24
  //# sourceMappingURL=out.js.map
24
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/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/icons/CircleIcon.tsx","../src/icons/ArrowDownIcon.tsx","../src/icons/HelpIcon.tsx","../src/icons/SearchIcon.tsx","../src/icons/ContentfulLogoIcon.tsx","../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/NavbarSwitcherSkeleton.tsx","../src/NavbarSearch/NavbarSearch.tsx","../src/NavbarSearch/NavbarSearch.styles.ts","../src/NavbarSwitcherItem/NavbarSwitcherItem.tsx","../src/NavbarSwitcherItem/NavbarSwitcherItem.styles.ts","../src/NavbarSwitcherItem/NavbarEnvVariant.tsx","../src/NavbarHelp/NavbarHelp.tsx","../src/NavbarHelp/NavbarHelp.styles.ts","../src/NavbarBadge/NavbarBadge.tsx","../src/NavbarBadge/NavbarBadge.styles.ts","../src/NavbarTopbarItem/NavbarTopbarItem.tsx","../src/NavbarTopbarItem/NavbarTopbarItem.styles.ts"],"names":["MenuDivider","MenuSectionTitle","Box","Flex","React","css","tokens","mqs","getGlowOnFocusStyles","shadow","getNavbarStyles","maxWidth","_Navbar","props","ref","_a","children","account","search","switcher","help","badge","bottomRightItems","topRightItems","contentMaxWidth","testId","otherProps","__objRest","styles","__spreadProps","__spreadValues","Navbar","cx","hexToRGBA","notificationVarianColorMap","getNavbarAccountStyles","variant","Menu","getNavbarMenuStyles","NavbarMenu","trigger","onOpen","onClose","_NavbarAccount","className","avatar","username","hasNotification","notificationVariant","NavbarAccount","SkeletonContainer","SkeletonImage","NavbarAccountSkeleton","ariaLabel","getNavbarItemActiveStyles","commonItemStyles","getNavbarItemStyles","getNavbarItemSkeletonStyles","getNavbarItemIconStyles","NavbarItemIcon","_b","icon","generateIcon","CircleIcon","ArrowDownIcon","HelpIcon","SearchIcon","ContentfulLogoIcon","NAVBAR_ITEM_DEFAULT_TAG","_NavbarItem","Comp","title","isActive","isMenuTrigger","isNavbarItemHasMenu","item","NavbarItem","SkeletonText","NavbarItemSkeleton","estimatedWidth","getNavbarMenuItemStyles","ExternalLinkIcon","NAVBAR_MENU_ITEM_DEFAULT_TAG","_NavbarMenuItem","itemIsExternalLink","isExternalLink","externalIcon","NavbarMenuItem","SkeletonBodyText","NavbarMenuItemSkeleton","getNavbarSwitcherStyles","MenuIcon","_NavbarSwitcher","logo","NavbarSwitcher","SkeletonDisplayText","NavbarSwitcherSkeleton","IconButton","getNavbarSearchStyles","_NavbarSearch","NavbarSearch","mobileIcon","getNavbarSwitcherItemStyles","EnvironmentAliasIcon","EnvironmentIcon","NavbarEnvVariant","isAlias","_NavbarSwitcherItem","isCircle","envVariant","classes","NavbarSwitcherItem","Button","getNavbarHelpStyles","_NavbarHelp","NavbarHelp","getNavbarBadgeStyles","NAVBAR_BADGE_DEFAULT_TAG","_NavbarBadge","NavbarBadge","getNavbarTopbarItemStyles","_NavbarTopbarItem","NavbarTopbarItem"],"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';\n\nimport { NavbarSearch } from './NavbarSearch/NavbarSearch';\nimport { NavbarSwitcherItem } from './NavbarSwitcherItem/NavbarSwitcherItem';\nimport { NavbarHelp } from './NavbarHelp/NavbarHelp';\nimport { NavbarBadge } from './NavbarBadge/NavbarBadge';\nimport { NavbarTopbarItem } from './NavbarTopbarItem/NavbarTopbarItem';\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 SwitcherItem: typeof NavbarSwitcherItem;\n Search: typeof NavbarSearch;\n Help: typeof NavbarHelp;\n Account: typeof NavbarAccount;\n AccountSkeleton: typeof NavbarAccountSkeleton;\n Badge: typeof NavbarBadge;\n TopbarItem: typeof NavbarTopbarItem;\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.SwitcherItem = NavbarSwitcherItem;\nNavbar.Search = NavbarSearch;\nNavbar.Help = NavbarHelp;\nNavbar.Account = NavbarAccount;\nNavbar.AccountSkeleton = NavbarAccountSkeleton;\nNavbar.Badge = NavbarBadge;\nNavbar.TopbarItem = NavbarTopbarItem;\n","import {\n Box,\n type CommonProps,\n type ExpandProps,\n Flex,\n} from '@contentful/f36-core';\nimport React from 'react';\nimport { getNavbarStyles } from './Navbar.styles';\n\ntype NavbarOwnProps = CommonProps & {\n children?: React.ReactNode;\n account?: React.ReactNode;\n search?: React.ReactNode;\n switcher?: React.ReactNode;\n help?: React.ReactNode;\n badge?: React.ReactNode;\n /**\n * Items that will be rendered on the bottom-right of the navbar.\n * Useful for separating other navigation items from main ones, (e.g. separating \"Settings\" from all other navigation items).\n */\n bottomRightItems?: React.ReactNode;\n /**\n * Items that will be rendered on the top-right of the navbar.\n * Useful for providing additional context or actions to the user (e.g. a Feedback form link).\n */\n topRightItems?: React.ReactNode;\n /**\n * Defines the max-width of the content inside the navbar.\n * @default '100%'\n */\n contentMaxWidth?: string;\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 children,\n account,\n search,\n switcher,\n help,\n badge,\n bottomRightItems,\n topRightItems,\n contentMaxWidth = '100%',\n testId = 'cf-ui-navbar',\n ...otherProps\n } = props;\n const styles = getNavbarStyles(contentMaxWidth);\n\n return (\n <Box {...otherProps} ref={ref} testId={testId}>\n <Flex className={styles.containerTop}>\n <Flex\n className={styles.containerTopContent}\n justifyContent=\"space-between\"\n >\n <Flex>{switcher}</Flex>\n <Flex alignItems=\"center\" gap=\"spacingXs\">\n {topRightItems}\n {badge}\n {search}\n {help}\n {account}\n </Flex>\n </Flex>\n </Flex>\n\n <Flex className={styles.containerBottom}>\n <Flex\n className={styles.containerBottomContent}\n justifyContent=\"space-between\"\n >\n <Flex as=\"nav\" aria-label=\"Main Navigation\">\n {children}\n </Flex>\n {bottomRightItems && <Flex>{bottomRightItems}</Flex>}\n </Flex>\n </Flex>\n </Box>\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) => ({\n containerTop: css({\n justifyContent: 'center',\n backgroundColor: tokens.gray100,\n }),\n containerBottom: css({\n justifyContent: 'center',\n backgroundColor: tokens.gray100,\n }),\n containerTopContent: css({\n width: '100%',\n maxWidth: maxWidth,\n padding: tokens.spacingXs,\n minHeight: tokens.spacingL,\n [mqs.medium]: {\n padding: `${tokens.spacingXs} 20px`,\n },\n }),\n containerBottomContent: css({\n width: '100%',\n maxWidth: maxWidth,\n padding: 0,\n paddingTop: tokens.spacing2Xs,\n minHeight: '2.5rem',\n overflow: 'auto',\n [mqs.medium]: {\n padding: `${tokens.spacing2Xs} ${tokens.spacingXs}`,\n },\n }),\n});\n","import tokens from '@contentful/f36-tokens';\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 = (shadow: string = tokens.glowPrimary) => ({\n '&:focus': {\n boxShadow: shadow,\n },\n '&:focus:not(:focus-visible)': {\n boxShadow: 'unset',\n },\n '&:focus-visible': {\n boxShadow: shadow,\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 { Flex } from '@contentful/f36-core';\n\ntype NavbarAccountOwnProps = CommonProps & {\n children: React.ReactNode;\n username: string;\n avatar: 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 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 >\n <img\n src={avatar}\n alt={`Avatar for user ${username}`}\n className={styles.avatar}\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 } 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 ),\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 { ArrowDownIcon } 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 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 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 >\n {icon && <NavbarItemIcon icon={icon} variant=\"secondary\" />}\n <span>{title}</span>\n {isMenuTrigger && <ArrowDownIcon />}\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 } from '../utils.styles';\n\nexport const getNavbarItemActiveStyles = () =>\n css({\n '&::after': {\n content: '\"\"',\n position: 'absolute',\n width: `calc(100% - ${tokens.spacingM})`,\n height: '2px',\n bottom: `-${tokens.spacing2Xs}`,\n left: 0,\n right: 0,\n margin: 'auto',\n backgroundColor: tokens.blue600,\n zIndex: 0,\n },\n });\n\nconst commonItemStyles = {\n display: 'flex',\n justifyContent: 'center',\n padding: `${tokens.spacing2Xs} ${tokens.spacingS}`,\n alignItems: 'center',\n background: 'none',\n};\n\nexport const getNavbarItemStyles = () => ({\n navbarItem: css(\n commonItemStyles,\n {\n alignItems: 'center',\n background: 'none',\n border: 0,\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.gray700,\n boxSizing: 'border-box',\n transition: `color ${tokens.transitionDurationShort} ${tokens.transitionEasingCubicBezier}`,\n borderRadius: tokens.borderRadiusMedium,\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(`inset ${tokens.glowPrimary}`),\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} & Pick<IconProps, 'variant'>;\n\nexport const NavbarItemIcon = (props: NavbarItemIconProps) => {\n const { icon, variant } = props;\n const styles = getNavbarItemIconStyles();\n\n return React.cloneElement(icon, {\n className: cx(icon.props.className, styles.navbarItemIcon),\n size: icon.props.size ?? 'tiny',\n variant: icon.props.variant ?? variant,\n });\n};\n","import { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\nexport const getNavbarItemIconStyles = () => ({\n navbarItemIcon: css({\n fill: tokens.gray700,\n '&:first-child': {\n marginRight: tokens.spacing2Xs,\n },\n '&:last-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 { generateIcon } from '@contentful/f36-icon';\n\nexport const CircleIcon = /*#__PURE__*/ generateIcon({\n name: 'CircleIcon',\n viewBox: '0 0 24 24',\n path: (\n <path\n d=\"M11.994 6.526A5.47 5.47 0 0 0 6.526 12a5.47 5.47 0 0 0 5.468 5.473A5.476 5.476 0 0 0 17.473 12a5.477 5.477 0 0 0-5.479-5.474ZM12 15.447a3.448 3.448 0 1 1 0-6.896 3.448 3.448 0 0 1 0 6.896Z\"\n fill=\"currentFill\"\n />\n ),\n});\n","import React from 'react';\nimport { generateIcon } from '@contentful/f36-icon';\n\nexport const ArrowDownIcon = /*#__PURE__*/ generateIcon({\n name: 'ArrowDownIcon',\n viewBox: '0 0 12 20',\n path: (\n <path\n d=\"M3.03076 8C2.20109 8 1.73228 8.95209 2.23814 9.60971L5.20727 13.4696C5.60757 13.99 6.39223 13.99 6.79252 13.4696L9.76166 9.60971C10.2675 8.95209 9.79871 8 8.96904 8L3.03076 8Z\"\n fill=\"#9FA8B2\"\n />\n ),\n});\n","import React from 'react';\nimport { generateIcon } from '@contentful/f36-icon';\n\nexport const HelpIcon = /*#__PURE__*/ generateIcon({\n name: 'HelpIcon',\n viewBox: '0 0 24 24',\n path: (\n <>\n <g clipPath=\"url(#HelpIcon_svg__a)\">\n <path\n d=\"M12 2.25A9.75 9.75 0 1 0 21.75 12 9.769 9.769 0 0 0 12 2.25ZM12 18a1.125 1.125 0 1 1 0-2.25A1.125 1.125 0 0 1 12 18Zm.75-4.584v.084a.75.75 0 1 1-1.5 0v-.75A.75.75 0 0 1 12 12a1.875 1.875 0 1 0-1.875-1.875.75.75 0 1 1-1.5 0 3.375 3.375 0 1 1 4.125 3.29Z\"\n fill=\"currentFill\"\n />\n </g>\n <defs>\n <clipPath id=\"HelpIcon_svg__a\">\n <path fill=\"currentFill\" d=\"M0 0h24v24H0z\" />\n </clipPath>\n </defs>\n </>\n ),\n});\n","import React from 'react';\nimport { generateIcon } from '@contentful/f36-icon';\n\nexport const SearchIcon = /*#__PURE__*/ generateIcon({\n name: 'SearchIcon',\n viewBox: '0 0 24 24',\n path: (\n <>\n <g clipPath=\"url(#SearchIcon_svg__a)\">\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M6 11.125a5.125 5.125 0 1 1 10.25 0 5.125 5.125 0 0 1-10.25 0ZM11.125 4a7.125 7.125 0 1 0 4.282 12.82l2.886 2.887a1 1 0 0 0 1.414-1.414l-2.886-2.887A7.125 7.125 0 0 0 11.125 4Z\"\n fill=\"currentFill\"\n />\n </g>\n <defs>\n <clipPath id=\"SearchIcon_svg__a\">\n <path fill=\"#fff\" d=\"M0 0h24v24H0z\" />\n </clipPath>\n </defs>\n </>\n ),\n});\n","import React from 'react';\nimport { generateIcon } from '@contentful/f36-icon';\n\nexport const ContentfulLogoIcon = /*#__PURE__*/ generateIcon({\n name: 'ContentfulLogoIcon',\n viewBox: '0 0 24 24',\n path: (\n <>\n <g clipPath=\"url(#a)\">\n <path\n d=\"M8.71 3.007c.844.843 1.17 2.078.844 3.228a6.683 6.683 0 0 1 3.444-.953h.025a6.701 6.701 0 0 1 4.743 1.988 2.637 2.637 0 0 0 3.73.093 2.637 2.637 0 0 0 .094-3.731c-.025-.027-.052-.052-.08-.08A11.95 11.95 0 0 0 13.036.006h-.046a11.92 11.92 0 0 0-6.691 2.038h.074c.876 0 1.715.346 2.335.966l.002-.002Z\"\n fill=\"#1773EB\"\n />\n <path\n d=\"M19.593 16.006c-.696 0-1.365.276-1.86.765a6.706 6.706 0 0 1-4.732 1.953h-.025a6.617 6.617 0 0 1-3.446-.97c.079.287.117.584.117.882a3.3 3.3 0 0 1-3.299 3.3h-.087a11.929 11.929 0 0 0 6.696 2.07h.046a11.934 11.934 0 0 0 8.45-3.486 2.64 2.64 0 0 0-1.857-4.514h-.003Z\"\n fill=\"#E44F20\"\n />\n <path\n d=\"M4.013 16.301a3.283 3.283 0 0 1 2.335-.967c.303 0 .604.041.893.123a6.696 6.696 0 0 1 .014-6.928 3.302 3.302 0 0 1-4.176-3.187v-.09a12 12 0 0 0-.033 13.452v-.068c0-.877.344-1.715.967-2.335Z\"\n fill=\"#FFDA00\"\n />\n <path\n d=\"M6.378 2.627c-.751 0-1.275.311-1.912.948-.606.606-.797 1.136-.8 1.767a2.712 2.712 0 1 0 5.427-.003A2.713 2.713 0 0 0 6.38 2.627h-.003Z\"\n fill=\"#1773EB\"\n />\n <path\n d=\"M3.628 18.639c0 .748.311 1.275.948 1.912.606.606 1.136.8 1.767.8a2.703 2.703 0 1 0-.017-5.408 2.703 2.703 0 0 0-2.695 2.704v-.008h-.003Z\"\n fill=\"#E44F20\"\n />\n </g>\n <defs>\n <clipPath id=\"a\">\n <path fill=\"#fff\" d=\"M0 0h24v24H0z\" />\n </clipPath>\n </defs>\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 { ExternalLinkIcon } 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} variant=\"secondary\" />\n ) : (\n itemIsExternalLink && externalIcon\n )}\n <span>{title}</span>\n {icon && itemIsExternalLink ? externalIcon : null}\n </Menu.Item>\n );\n}\n\nconst externalIcon = (\n <NavbarItemIcon icon={<ExternalLinkIcon />} variant=\"muted\" />\n);\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 from 'react';\nimport { getNavbarSwitcherStyles } from './NavbarSwitcher.styles';\nimport {\n Flex,\n type CommonProps,\n type PropsWithHTMLElement,\n type ExpandProps,\n} from '@contentful/f36-core';\nimport { MenuIcon } from '@contentful/f36-icons';\nimport { cx } from 'emotion';\nimport { ContentfulLogoIcon } from '../icons';\n\ntype NavbarSwitcherOwnProps = CommonProps & {\n children?: React.ReactNode;\n /**\n * Will be displayed instead of the default Contentful logo\n */\n logo?: React.ReactNode;\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 logo,\n testId = 'cf-ui-navbar-switcher',\n ...otherProps\n } = props;\n const styles = getNavbarSwitcherStyles();\n\n return (\n <Flex\n {...otherProps}\n as=\"button\"\n ref={ref}\n className={cx(styles.navbarSwitcher, className)}\n testId={testId}\n alignItems=\"center\"\n fullHeight\n gap=\"spacingXs\"\n >\n {logo || <ContentfulLogoIcon />}\n <MenuIcon size=\"small\" className={styles.switcherMenuIcon} />\n\n <Flex as=\"ul\" alignItems=\"center\" className={styles.switcherBreadcrumbs}>\n {children}\n </Flex>\n </Flex>\n );\n}\n\nexport const NavbarSwitcher = React.forwardRef(_NavbarSwitcher);\n","import { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\nimport { getGlowOnFocusStyles } from '../utils.styles';\n\nexport const getNavbarSwitcherStyles = () => ({\n navbarSwitcher: css(\n {\n // default button reset styles\n margin: 0,\n padding: 0,\n background: 'none',\n border: 'none',\n height: 'max-content',\n\n color: tokens.gray700,\n cursor: 'pointer',\n fontSize: tokens.fontSizeS,\n fontWeight: tokens.fontWeightMedium,\n position: 'relative',\n outline: 'none',\n borderRadius: '3rem',\n\n '&:after': {\n content: '\"\"',\n border: '1px solid #353A41',\n boxSizing: 'border-box',\n height: '16px',\n right: '-1px',\n position: 'absolute',\n width: 0,\n },\n '&:last-child:after': {\n display: 'none',\n },\n '&:hover li': {\n backgroundColor: '#f2f4f6', // Using a calculated hover alpha color because when using a RGBA value layers overlapping occur and show darker areas\n },\n },\n getGlowOnFocusStyles(),\n ),\n switcherMenuIcon: css({\n height: tokens.spacingM,\n width: tokens.spacingM,\n fill: tokens.gray700,\n }),\n switcherBreadcrumbs: css({\n listStyleType: 'none',\n margin: 0,\n padding: 0,\n position: 'relative',\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 { cx } from 'emotion';\nimport React from 'react';\nimport { SearchIcon } from '../icons';\nimport {\n type CommonProps,\n type ExpandProps,\n type PropsWithHTMLElement,\n} from '@contentful/f36-core';\nimport { IconButton } from '@contentful/f36-button';\nimport { getNavbarSearchStyles } from './NavbarSearch.styles';\ntype NavbarSearchOwnProps = CommonProps;\n\nexport type NavbarSearchProps = PropsWithHTMLElement<\n NavbarSearchOwnProps,\n 'button'\n>;\n\nfunction _NavbarSearch(\n props: ExpandProps<NavbarSearchProps>,\n ref: React.Ref<HTMLButtonElement>,\n) {\n const { className, testId = 'cf-ui-navbar-search', ...otherProps } = props;\n const styles = getNavbarSearchStyles();\n return (\n <IconButton\n aria-label=\"Quick Search\"\n {...otherProps}\n variant=\"transparent\"\n ref={ref}\n size=\"small\"\n className={cx(styles.navbarSearch, className)}\n testId={testId}\n icon={<SearchIcon size=\"medium\" />}\n />\n );\n}\n\nexport const NavbarSearch = React.forwardRef(_NavbarSearch);\n","import { css } from 'emotion';\nimport { getGlowOnFocusStyles } from '../utils.styles';\nimport tokens from '@contentful/f36-tokens';\n\nexport const getNavbarSearchStyles = () => ({\n navbarSearch: css(\n {\n // default button reset styles\n minWidth: '24px',\n width: '24px',\n minHeight: '24px',\n height: '24px',\n svg: {\n fill: tokens.gray700,\n },\n },\n getGlowOnFocusStyles(),\n ),\n});\n","import React from 'react';\nimport { cx } from 'emotion';\nimport { getNavbarSwitcherItemStyles } from './NavbarSwitcherItem.styles';\nimport { NavbarEnvVariant } from './NavbarEnvVariant';\nimport {\n Flex,\n type CommonProps,\n type ExpandProps,\n type PropsWithHTMLElement,\n} from '@contentful/f36-core';\n\ntype NavbarSwitcherItemOwnProps = CommonProps & {\n children?: React.ReactNode;\n isCircle?: boolean;\n envVariant?: 'master' | 'non-master';\n isAlias?: boolean;\n};\n\nexport type NavbarSwitcherItemProps = PropsWithHTMLElement<\n NavbarSwitcherItemOwnProps,\n 'li'\n>;\n\nfunction _NavbarSwitcherItem(\n props: ExpandProps<NavbarSwitcherItemProps>,\n ref: React.Ref<HTMLLIElement>,\n) {\n const {\n children,\n isCircle,\n className,\n envVariant,\n isAlias,\n testId = 'cf-ui-navbar-switcher-item',\n ...otherProps\n } = props;\n const styles = getNavbarSwitcherItemStyles();\n const classes = cx(styles.breadcrumbsItem, className, {\n [styles.breadcrumbsItemCircle]: isCircle,\n [styles.breadcrumbsItemEnvMaster]: envVariant === 'master',\n [styles.breadcrumbsItemEnvNonMaster]: envVariant === 'non-master',\n });\n\n return (\n <li {...otherProps} ref={ref} className={classes} data-test-id={testId}>\n <Flex fullHeight justifyContent=\"center\" alignItems=\"center\">\n {envVariant && <NavbarEnvVariant isAlias={isAlias} />}\n <span>{children}</span>\n </Flex>\n </li>\n );\n}\n\nexport const NavbarSwitcherItem = React.forwardRef(_NavbarSwitcherItem);\n","import { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\nimport { mqs } from '../utils.styles';\n\nconst mobileIcon = {\n display: 'none',\n '&:first-child': {\n display: 'block',\n },\n\n [mqs.medium]: {\n display: 'block',\n '&:first-child': {\n display: 'none',\n },\n },\n};\n\nexport const getNavbarSwitcherItemStyles = () => ({\n breadcrumbsItem: css({\n position: 'relative',\n alignItems: 'center',\n justifyContent: 'center',\n border: `solid 1px ${tokens.gray300}`,\n borderLeft: 'none',\n display: 'inline-flex',\n margin: 0,\n minWidth: 0,\n padding: `0 ${tokens.spacingXs}`,\n height: tokens.spacingL,\n borderRadius: '3rem',\n zIndex: 2,\n\n whiteSpace: 'nowrap',\n '&:first-child': {\n minWidth: '24px',\n },\n '&:nth-child(2)': {\n zIndex: 1,\n marginLeft: '-10px',\n paddingLeft: tokens.spacingM,\n borderRadius: `0 3rem 3rem 0`,\n span: {\n maxWidth: '80px',\n textOverflow: 'ellipsis',\n overflow: 'hidden',\n [mqs.large]: {\n maxWidth: '100%',\n },\n },\n },\n '&:nth-child(3)': {\n marginLeft: '-10px',\n paddingLeft: tokens.spacingM,\n borderRadius: `0 3rem 3rem 0`,\n fontFamily: tokens.fontStackMonospace,\n fontSize: tokens.fontSizeS,\n fontWeight: tokens.fontWeightMedium,\n zIndex: 0,\n span: {\n maxWidth: '40px',\n textOverflow: 'ellipsis',\n overflow: 'hidden',\n [mqs.large]: {\n maxWidth: '100%',\n },\n },\n '> div': {\n [mqs.medium]: {\n gap: tokens.spacing2Xs,\n },\n },\n },\n }),\n breadcrumbsItemCircle: css({\n border: `solid 1px ${tokens.gray300}`,\n borderRadius: '50%',\n color: tokens.gray400,\n padding: 0,\n display: 'flex',\n justifyContent: 'center',\n fontSize: '11px',\n width: tokens.spacingL,\n height: tokens.spacingL,\n }),\n breadcrumbsItemEnvMaster: css({\n color: tokens.green600,\n ' svg': {\n ...mobileIcon,\n fill: tokens.green600,\n },\n }),\n breadcrumbsItemEnvNonMaster: css({\n color: tokens.orange500,\n svg: {\n ...mobileIcon,\n fill: tokens.orange500,\n },\n }),\n});\n","import React from 'react';\nimport { NavbarSwitcherItemProps } from './NavbarSwitcherItem';\nimport { CircleIcon } from '../icons';\nimport { EnvironmentAliasIcon, EnvironmentIcon } from '@contentful/f36-icons';\n\nexport type NavbarEnvVariantProps = Pick<NavbarSwitcherItemProps, 'isAlias'>;\n\nexport function NavbarEnvVariant({ isAlias }: NavbarEnvVariantProps) {\n return (\n <>\n <CircleIcon key=\"mobile-icon\" size=\"tiny\" />\n {isAlias ? (\n <EnvironmentAliasIcon key=\"full-icon\" size=\"tiny\" />\n ) : (\n <EnvironmentIcon key=\"full-icon\" size=\"tiny\" />\n )}\n </>\n );\n}\n","import React from 'react';\nimport { cx } from 'emotion';\nimport { HelpIcon } from '../icons';\nimport {\n type CommonProps,\n type PropsWithHTMLElement,\n type ExpandProps,\n} from '@contentful/f36-core';\nimport { Button } from '@contentful/f36-button';\nimport { NavbarMenu } from '../NavbarMenu/NavbarMenu';\nimport { getNavbarHelpStyles } from './NavbarHelp.styles';\n\ntype NavbarHelpOwnProps = CommonProps & {\n children: React.ReactNode;\n};\n\nexport type NavbarHelpProps = PropsWithHTMLElement<\n NavbarHelpOwnProps,\n 'button'\n>;\n\nfunction _NavbarHelp(\n props: ExpandProps<NavbarHelpProps>,\n ref: React.Ref<HTMLButtonElement>,\n) {\n const {\n children,\n className,\n testId = 'cf-ui-navbar-help-trigger',\n ...otherProps\n } = props;\n\n const styles = getNavbarHelpStyles();\n\n return (\n <NavbarMenu\n testId=\"cf-ui-navbar-help-menu\"\n trigger={\n <Button\n aria-label=\"Help Menu\"\n {...otherProps}\n as=\"button\"\n ref={ref}\n className={cx(styles.navbarHelp, className)}\n testId={testId}\n variant=\"transparent\"\n size=\"small\"\n startIcon={<HelpIcon size=\"medium\" />}\n >\n Help\n </Button>\n }\n >\n {children}\n </NavbarMenu>\n );\n}\n\nexport const NavbarHelp = React.forwardRef(_NavbarHelp);\n","import { css } from 'emotion';\nimport { getGlowOnFocusStyles } from '../utils.styles';\nimport tokens from '@contentful/f36-tokens';\n\nexport const getNavbarHelpStyles = () => ({\n navbarHelp: css(\n {\n // default button reset styles\n fontSize: tokens.fontSizeS,\n padding: `0 ${tokens.spacing2Xs}`,\n width: 'max-content',\n minHeight: '24px',\n height: '24px',\n color: tokens.gray700,\n svg: {\n fill: tokens.gray700,\n },\n },\n getGlowOnFocusStyles(),\n ),\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 }),\n});\n","import React from 'react';\nimport { cx } from 'emotion';\nimport { getNavbarTopbarItemStyles } from './NavbarTopbarItem.styles';\nimport type {\n CommonProps,\n ExpandProps,\n PolymorphicComponent,\n PolymorphicProps,\n} from '@contentful/f36-core';\n\nconst NAVBAR_BADGE_DEFAULT_TAG = 'button';\n\ntype NavbarTopbarItemOwnProps = CommonProps & {\n children?: React.ReactNode;\n};\n\nexport type NavbarTopbarItemProps<\n E extends React.ElementType = typeof NAVBAR_BADGE_DEFAULT_TAG,\n> = PolymorphicProps<NavbarTopbarItemOwnProps, E>;\n\nfunction _NavbarTopbarItem<\n E extends React.ElementType = typeof NAVBAR_BADGE_DEFAULT_TAG,\n>(props: NavbarTopbarItemProps<E>, ref: React.Ref<any>) {\n const {\n as: Comp = NAVBAR_BADGE_DEFAULT_TAG,\n children,\n className,\n testId = 'cf-ui-navbar-topbar-item',\n ...otherProps\n } = props;\n const styles = getNavbarTopbarItemStyles();\n\n return (\n <Comp\n {...otherProps}\n ref={ref}\n className={cx(styles.navbarTopItem, className)}\n data-test-id={testId}\n >\n {children}\n </Comp>\n );\n}\n\nexport const NavbarTopbarItem: PolymorphicComponent<\n ExpandProps<NavbarTopbarItemOwnProps>,\n typeof NAVBAR_BADGE_DEFAULT_TAG\n> = React.forwardRef(_NavbarTopbarItem);\n","import { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\nimport { getGlowOnFocusStyles } from '../utils.styles';\nimport { hexToRGBA } from '@contentful/f36-utils';\nexport const getNavbarTopbarItemStyles = () => ({\n navbarTopItem: css(\n {\n // default button reset styles\n margin: 0,\n background: 'none',\n border: '1px solid',\n borderColor: 'transparent',\n cursor: 'pointer',\n display: 'flex',\n gap: tokens.spacing2Xs,\n alignItems: 'center',\n lineHeight: tokens.lineHeightDefault,\n color: tokens.gray700,\n padding: `0 ${tokens.spacing2Xs}`,\n minHeight: '24px',\n fontSize: tokens.fontSizeS,\n fontWeight: tokens.fontWeightMedium,\n outline: 'none',\n borderRadius: tokens.borderRadiusMedium,\n\n '&:hover': {\n backgroundColor: hexToRGBA(tokens.gray900, 0.05),\n },\n svg: {\n fill: 'currentColor',\n },\n },\n getGlowOnFocusStyles(),\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/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","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.spacingXs,\n minHeight: tokens.spacingL,\n [mqs.medium]: {\n padding: `${tokens.spacingXs} 20px`,\n },\n }),\n});\n","import tokens from '@contentful/f36-tokens';\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 = (shadow: string = tokens.glowPrimary) => ({\n '&:focus': {\n boxShadow: shadow,\n },\n '&:focus:not(:focus-visible)': {\n boxShadow: 'unset',\n },\n '&:focus-visible': {\n boxShadow: shadow,\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 } 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 ),\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 } 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 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\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 ),\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 } from '../utils.styles';\n\nexport const getNavbarSwitcherStyles = () => ({\n navbarSwitcher: css(\n {\n flexShrink: 1,\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 ),\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"]}
package/package.json CHANGED
@@ -1,19 +1,20 @@
1
1
  {
2
2
  "name": "@contentful/f36-navbar",
3
- "version": "5.0.0-alpha.2",
3
+ "version": "5.0.0-alpha.21",
4
4
  "description": "Forma 36: Navbar component",
5
5
  "scripts": {
6
6
  "build": "tsup"
7
7
  },
8
8
  "dependencies": {
9
- "@contentful/f36-button": "^4.65.0",
10
- "@contentful/f36-core": "^4.45.0",
11
- "@contentful/f36-icon": "^4.45.0",
12
- "@contentful/f36-icons": "^4.23.2",
13
- "@contentful/f36-menu": "^4.45.0",
14
- "@contentful/f36-skeleton": "^4.45.0",
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",
13
+ "@contentful/f36-icon": "5.0.0-alpha.20",
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
18
  "emotion": "^10.0.17"
18
19
  },
19
20
  "peerDependencies": {