@contentful/f36-navbar 5.0.0-alpha.6 → 5.0.0-alpha.8

package/dist/esm/index.js

@@ -1,17 +1,216 @@
 import { MenuDivider, MenuSectionTitle, Menu } from '@contentful/f36-menu';
-import { Box, Flex } from '@contentful/f36-core';
-import v from 'react';
-import { cx, css } from 'emotion';
-import f from '@contentful/f36-tokens';
-import { hexToRGBA } from '@contentful/f36-utils';
+import { Box, Flex, Stack } from '@contentful/f36-core';
+import u, { forwardRef } from 'react';
+import { cx, css, keyframes } from 'emotion';
+import o from '@contentful/f36-tokens';
+import { generateIcon } from '@contentful/f36-icon-alpha';
+import { useDensity, hexToRGBA } from '@contentful/f36-utils';
 import { Avatar } from '@contentful/f36-avatar';
 import { SkeletonContainer, SkeletonImage, SkeletonText, SkeletonBodyText, SkeletonDisplayText } from '@contentful/f36-skeleton';
-import { generateIcon } from '@contentful/f36-icon';
-import { ExternalLinkIcon, MenuIcon, EnvironmentAliasIcon, EnvironmentIcon } from '@contentful/f36-icons';
-import { IconButton, Button } from '@contentful/f36-button';
+import { ExternalLinkIcon, EnvironmentAliasIcon, EnvironmentIcon } from '@contentful/f36-icons';
 
-var Je=Object.defineProperty,Ke=Object.defineProperties;var et=Object.getOwnPropertyDescriptors;var $=Object.getOwnPropertySymbols;var fe=Object.prototype.hasOwnProperty,de=Object.prototype.propertyIsEnumerable;var le=(e,t,o)=>t in e?Je(e,t,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[t]=o,i=(e,t)=>{for(var o in t||(t={}))fe.call(t,o)&&le(e,o,t[o]);if($)for(var o of $(t))de.call(t,o)&&le(e,o,t[o]);return e},s=(e,t)=>Ke(e,et(t));var c=(e,t)=>{var o={};for(var r in e)fe.call(e,r)&&t.indexOf(r)<0&&(o[r]=e[r]);if(e!=null&&$)for(var r of $(e))t.indexOf(r)<0&&de.call(e,r)&&(o[r]=e[r]);return o};var I={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 be=(e,t)=>({containerTop:css({justifyContent:"center",backgroundColor:f.gray100}),containerBottom:css({justifyContent:"center",backgroundColor:f.gray100}),containerTopContent:css({width:"100%",maxWidth:t==="wide"?"1524px":e,padding:f.spacingXs,minHeight:f.spacingL,[I.medium]:{padding:`${f.spacingXs} 20px`}}),containerBottomContent:css({width:"100%",maxWidth:t==="wide"?"1524px":e,padding:0,paddingTop:f.spacing2Xs,minHeight:"2.5rem",overflow:"auto",[I.medium]:{padding:`${f.spacing2Xs} ${f.spacingXs}`}})});function rt(e,t){let ce=e,{children:o,account:r,search:n,switcher:a,help:p,badge:l,bottomRightItems:m,topRightItems:g,contentMaxWidth:M="100%",testId:N="cf-ui-navbar",className:y,variant:F="wide"}=ce,X=c(ce,["children","account","search","switcher","help","badge","bottomRightItems","topRightItems","contentMaxWidth","testId","className","variant"]),w=be(M,F);return v.createElement(Box,s(i({},X),{ref:t,testId:N,className:y}),v.createElement(Flex,{className:w.containerTop},v.createElement(Flex,{className:w.containerTopContent,justifyContent:"space-between"},v.createElement(Flex,null,a),v.createElement(Flex,{alignItems:"center",gap:"spacingXs"},g,l,n,p,r))),v.createElement(Flex,{className:w.containerBottom},v.createElement(Flex,{className:w.containerBottomContent,justifyContent:"space-between"},v.createElement(Flex,{as:"nav","aria-label":"Main Navigation"},o),m&&v.createElement(Flex,null,m))))}var ge=v.forwardRef(rt);var nt={warning:f.colorWarning,negative:f.colorNegative,info:f.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(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:nt[e],transform:"translate(30%, -30%)"})});var ve=()=>({menuList:css({minWidth:"250px"})});var C=e=>{let{trigger:t,children:o,testId:r="cf-ui-navbar-menu-list",onOpen:n,onClose:a}=e,p=ve();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 ct(e,t){let y=e,{children:o,className:r,testId:n="cf-ui-navbar-account-trigger",avatar:a,initials:p,username:l,hasNotification:m,notificationVariant:g="warning"}=y,M=c(y,["children","className","testId","avatar","initials","username","hasNotification","notificationVariant"]),N=ue();return v.createElement(C,{trigger:v.createElement(Flex,s(i({as:"button"},M),{ref:t,className:cx(N.navbarAccount,r),testId:n,alignItems:"center"}),v.createElement(Avatar,{src:a,initials:p,size:"small",variant:"user"}),m?v.createElement("span",{className:N.notificationIcon(g)}):null)},o)}var ee=v.forwardRef(ct);function te({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 ye=()=>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}}),Ie={display:"flex",justifyContent:"center",padding:`${f.spacing2Xs} ${f.spacingS}`,alignItems:"center",background:"none"},xe=()=>({navbarItem:css(Ie,{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:ye()}),Pe=()=>({itemSkeleton:css(Ie)});var Se=()=>({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=Se();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 Me=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 we=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 Ae=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 Ee=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 Te=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 Mt="button";function wt(e,t){let w=e,{as:o=Mt,icon:r,title:n,children:a,className:p,isActive:l,testId:m="cf-ui-navbar-item",onOpen:g,onClose:M}=w,N=c(w,["as","icon","title","children","className","isActive","testId","onOpen","onClose"]),y=xe(),F=At(e),X=v.createElement(o,s(i({},N),{ref:t,"data-test-id":m,className:cx(y.navbarItem,F&&y.navbarItemMenuTrigger,l&&y.isActive,p)}),r&&v.createElement(z,{icon:r,variant:"secondary"}),v.createElement("span",null,n),F&&v.createElement(we,null));return F?v.createElement(C,{trigger:X,testId:m,onOpen:g,onClose:M},a):X}var At=e=>!!e.children,oe=v.forwardRef(wt);var re=({estimatedWidth:e})=>{let t=Pe();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 ke=()=>({navbarMenuItem:css({display:"flex",justifyContent:"flex-start",alignItems:"center"})});var Ht="button";function Lt(e,t){let g=e,{as:o=Ht,icon:r,title:n,className:a}=g,p=c(g,["as","icon","title","className"]),l=ke(),m=Rt(e);return v.createElement(Menu.Item,s(i({},p),{ref:t,as:o,className:cx(l.navbarMenuItem,a)}),r?v.createElement(z,{icon:r,variant:"secondary"}):m&&Be,v.createElement("span",null,n),r&&m?Be:null)}var Be=v.createElement(z,{icon:v.createElement(ExternalLinkIcon,null),variant:"muted"}),Rt=e=>e.as==="a"&&e.target==="_blank",ae=v.forwardRef(Lt);var ne=({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 He=()=>({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 Xt(e,t){let m=e,{children:o,className:r,logo:n,testId:a="cf-ui-navbar-switcher"}=m,p=c(m,["children","className","logo","testId"]),l=He();return v.createElement(Flex,s(i({},p),{as:"button",ref:t,className:cx(l.navbarSwitcher,r),testId:a,alignItems:"center",fullHeight:!0,gap:"spacingXs"}),n||v.createElement(Te,null),v.createElement(MenuIcon,{size:"small",className:l.switcherMenuIcon}),v.createElement(Flex,{as:"ul",alignItems:"center",className:l.switcherBreadcrumbs},o))}var se=v.forwardRef(Xt);var pe=({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 Oe=()=>({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=c(p,["className","testId"]),a=Oe();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(Ee,{size:"medium"})}))}var We=v.forwardRef(Qt);var ze={display:"none","&:first-child":{display:"block"},[I.medium]:{display:"block","&:first-child":{display:"none"}}},De=()=>({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",[I.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",[I.large]:{maxWidth:"100%"}},"> div":{[I.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({},ze),{fill:f.green600})}),breadcrumbsItemEnvNonMaster:css({color:f.orange500,svg:s(i({},ze),{fill:f.orange500})})});function Ge({isAlias:e}){return v.createElement(v.Fragment,null,v.createElement(Me,{key:"mobile-icon",size:"tiny"}),e?v.createElement(EnvironmentAliasIcon,{key:"full-icon",size:"tiny"}):v.createElement(EnvironmentIcon,{key:"full-icon",size:"tiny"}))}function oo(e,t){let N=e,{children:o,isCircle:r,className:n,envVariant:a,isAlias:p,testId:l="cf-ui-navbar-switcher-item"}=N,m=c(N,["children","isCircle","className","envVariant","isAlias","testId"]),g=De(),M=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:M,"data-test-id":l}),v.createElement(Flex,{fullHeight:!0,justifyContent:"center",alignItems:"center"},a&&v.createElement(Ge,{isAlias:p}),v.createElement("span",null,o)))}var Ve=v.forwardRef(oo);var Xe=()=>({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 io(e,t){let l=e,{children:o,className:r,testId:n="cf-ui-navbar-help-trigger"}=l,a=c(l,["children","className","testId"]),p=Xe();return v.createElement(C,{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(Ae,{size:"medium"})}),"Help")},o)}var $e=v.forwardRef(io);var Ue=()=>({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 mo="div";function co(e,t){let m=e,{as:o=mo,children:r,className:n,testId:a="cf-ui-navbar-badge"}=m,p=c(m,["as","children","className","testId"]),l=Ue();return v.createElement(o,s(i({},p),{ref:t,className:cx(l.navbarBadge,n),"data-test-id":a}),r)}var je=v.forwardRef(co);var qe=()=>({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 go="button";function uo(e,t){let m=e,{as:o=go,children:r,className:n,testId:a="cf-ui-navbar-topbar-item"}=m,p=c(m,["as","children","className","testId"]),l=qe();return v.createElement(o,s(i({},p),{ref:t,className:cx(l.navbarTopItem,n),"data-test-id":a}),r)}var Qe=v.forwardRef(uo);var b=ge;b.Item=oe;b.ItemSkeleton=re;b.MenuItem=ae;b.MenuItemSkeleton=ne;b.MenuDivider=MenuDivider;b.MenuSectionTitle=MenuSectionTitle;b.Switcher=se;b.SwitcherSkeleton=pe;b.SwitcherItem=Ve;b.Search=We;b.Help=$e;b.Account=ee;b.AccountSkeleton=te;b.Badge=je;b.TopbarItem=Qe;
+var Zr=Object.defineProperty,qr=Object.defineProperties;var Yr=Object.getOwnPropertyDescriptors;var ie=Object.getOwnPropertySymbols;var $e=Object.prototype.hasOwnProperty,Xe=Object.prototype.propertyIsEnumerable;var Fe=(e,r,t)=>r in e?Zr(e,r,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[r]=t,m=(e,r)=>{for(var t in r||(r={}))$e.call(r,t)&&Fe(e,t,r[t]);if(ie)for(var t of ie(r))Xe.call(r,t)&&Fe(e,t,r[t]);return e},d=(e,r)=>qr(e,Yr(r));var f=(e,r)=>{var t={};for(var a in e)$e.call(e,a)&&r.indexOf(a)<0&&(t[a]=e[a]);if(e!=null&&ie)for(var a of ie(e))r.indexOf(a)<0&&Xe.call(e,a)&&(t[a]=e[a]);return t};var M={medium:"@media (min-width: 480px)",large:"@media (min-width: 768px)",xlarge:"@media (min-width: 1920px)"},S=(e=o.glowPrimary)=>({"&:focus":{boxShadow:e},"&:focus:not(:focus-visible)":{boxShadow:"unset"},"&:focus-visible":{boxShadow:e}});var Ge=(e,r)=>({containerTop:css({justifyContent:"center",backgroundColor:o.gray100}),containerBottom:css({justifyContent:"center",backgroundColor:o.gray100}),containerTopContent:css({width:"100%",maxWidth:r==="wide"?"1524px":e,padding:o.spacingXs,minHeight:o.spacingL,[M.medium]:{padding:`${o.spacingXs} 20px`}}),containerBottomContent:css({width:"100%",maxWidth:r==="wide"?"1524px":e,padding:0,paddingTop:o.spacing2Xs,minHeight:"2.5rem",overflow:"auto",[M.medium]:{padding:`${o.spacing2Xs} ${o.spacingXs}`}}),logo:css({height:"28px",width:"28px"})});var rt=Object.defineProperty,tt=Object.defineProperties,ot=Object.getOwnPropertyDescriptors,se=Object.getOwnPropertySymbols,Ze=Object.prototype.hasOwnProperty,qe=Object.prototype.propertyIsEnumerable,Ve=(e,r,t)=>r in e?rt(e,r,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[r]=t,k=(e,r)=>{for(var t in r||(r={}))Ze.call(r,t)&&Ve(e,t,r[t]);if(se)for(var t of se(r))qe.call(r,t)&&Ve(e,t,r[t]);return e},ve=(e,r)=>tt(e,ot(r)),at=(e,r)=>{var t={};for(var a in e)Ze.call(e,a)&&r.indexOf(a)<0&&(t[a]=e[a]);if(e!=null&&se)for(var a of se(e))r.indexOf(a)<0&&qe.call(e,a)&&(t[a]=e[a]);return t},nt="svg",Ue={xlarge:{height:"48px",width:"48px"},large:{height:"32px",width:"32px"},medium:{height:"24px",width:"24px"},small:{height:"18px",width:"18px"},tiny:{height:"16px",width:"16px"}},it={muted:o.gray600,negative:o.red600,positive:o.green600,primary:o.blue600,secondary:o.gray900,warning:o.colorWarning,white:o.colorWhite,premium:o.purple500},st=e=>{let r=e["aria-label"],t=e["aria-labelledby"];return r||t?{}:{"aria-hidden":!0}};function lt(e,r){var t=e,{as:a,children:i,className:n,variant:s="primary",role:c="img",size:l="small",testId:p="cf-ui-icon",trimmed:g,viewBox:h="0 0 24 24"}=t,x=at(t,["as","children","className","variant","role","size","testId","trimmed","viewBox"]);let I={className:cx(css({fill:it[s],height:Ue[l].height,width:g?"auto":Ue[l].width}),n),ref:r,testId:p,role:c},P=st(x);return a?u.createElement(Box,ve(k(k(k({display:"inline-block"},P),x),I),{as:a})):u.createElement(Box,k(ve(k(k({viewBox:h,display:"inline-block"},P),x),{as:nt}),I),i)}var pt=forwardRef(lt);function T({name:e,path:r,props:t,trimmed:a,viewBox:i}){let n=function(s){return u.createElement(pt,ve(k(k({viewBox:i},t),s),{trimmed:a}),r)};return e&&(n.displayName=e),n}var Ye=T({name:"CircleIcon",viewBox:"0 0 24 24",path:u.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 Je=T({name:"ArrowDownIcon",viewBox:"0 0 12 20",path:u.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 Ke=T({name:"HelpIcon",viewBox:"0 0 24 24",path:u.createElement(u.Fragment,null,u.createElement("g",{clipPath:"url(#HelpIcon_svg__a)"},u.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"})),u.createElement("defs",null,u.createElement("clipPath",{id:"HelpIcon_svg__a"},u.createElement("path",{fill:"currentFill",d:"M0 0h24v24H0z"}))))});var Qe=T({name:"SearchIcon",viewBox:"0 0 24 24",path:u.createElement(u.Fragment,null,u.createElement("g",{clipPath:"url(#SearchIcon_svg__a)"},u.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"})),u.createElement("defs",null,u.createElement("clipPath",{id:"SearchIcon_svg__a"},u.createElement("path",{fill:"#fff",d:"M0 0h24v24H0z"}))))});var er=generateIcon({name:"ContentfulLogoIcon",viewBox:"0 0 28 28",path:u.createElement(u.Fragment,null,u.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"}),u.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"}),u.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"}),u.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"}),u.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 ut(e,r){let J=e,{account:t,badge:a,bottomRightItems:i,children:n,className:s,contentMaxWidth:c="100%",help:l,logo:p,search:g,switcher:h,testId:x="cf-ui-navbar",topRightItems:I,variant:P="wide"}=J,F=f(J,["account","badge","bottomRightItems","children","className","contentMaxWidth","help","logo","search","switcher","testId","topRightItems","variant"]),O=Ge(c,P);return u.createElement(Box,d(m({},F),{ref:r,testId:x,className:s}),u.createElement(Flex,{className:O.containerTop},u.createElement(Flex,{className:O.containerTopContent,justifyContent:"space-between"},u.createElement(Flex,{alignItems:"center",gap:"spacingL"},p||u.createElement(er,{className:O.logo}),h),u.createElement(Flex,{alignItems:"center",gap:"spacingXs"},I,a,g,l,t))),u.createElement(Flex,{className:O.containerBottom},u.createElement(Flex,{className:O.containerBottomContent,justifyContent:"space-between"},u.createElement(Flex,{as:"nav","aria-label":"Main Navigation"},n),i&&u.createElement(Flex,null,i))))}var rr=u.forwardRef(ut);var bt={warning:o.colorWarning,negative:o.colorNegative,info:o.blue500},tr=()=>({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(o.gray300,.15)})},S()),avatar:css({borderRadius:"50%",display:"block",height:"24px",width:"24px"}),notificationIcon:e=>css({position:"absolute",top:0,right:0,height:o.spacingS,width:o.spacingS,borderRadius:"50%",border:`2px solid ${o.gray100}`,backgroundColor:bt[e],transform:"translate(30%, -30%)"})});var or=()=>({menuList:css({minWidth:"250px"})});var $=e=>{let{trigger:r,children:t,testId:a="cf-ui-navbar-menu-list",onOpen:i,onClose:n}=e,s=or();return u.createElement(Menu,{onOpen:i,onClose:n},u.createElement(Menu.Trigger,null,r),u.createElement(Menu.List,{className:s.menuList,testId:a},t))};function Nt(e,r){let x=e,{children:t,className:a,testId:i="cf-ui-navbar-account-trigger",avatar:n,initials:s,username:c,hasNotification:l,notificationVariant:p="warning"}=x,g=f(x,["children","className","testId","avatar","initials","username","hasNotification","notificationVariant"]),h=tr();return u.createElement($,{trigger:u.createElement(Flex,d(m({as:"button"},g),{ref:r,className:cx(h.navbarAccount,a),testId:i,alignItems:"center"}),u.createElement(Avatar,{src:n,initials:s,size:"small",variant:"user"}),l?u.createElement("span",{className:h.notificationIcon(p)}):null)},t)}var ye=u.forwardRef(Nt);function Ne({ariaLabel:e}){return u.createElement(SkeletonContainer,{svgWidth:24,svgHeight:24,ariaLabel:e,backgroundColor:o.gray300,foregroundColor:o.gray200},u.createElement(SkeletonImage,{width:24,height:24,radiusX:12,radiusY:12}))}var ir=()=>css({"&::after":{content:'""',position:"absolute",width:`calc(100% - ${o.spacingM})`,height:"2px",bottom:`-${o.spacing2Xs}`,left:0,right:0,margin:"auto",backgroundColor:o.blue600,zIndex:0}}),sr={display:"flex",justifyContent:"center",padding:`${o.spacing2Xs} ${o.spacingS}`,alignItems:"center",background:"none"},lr=()=>({navbarItem:css(sr,{alignItems:"center",background:"none",border:0,margin:0,outline:"none",fontSize:o.fontSizeM,lineHeight:o.lineHeightS,fontWeight:o.fontWeightMedium,position:"relative",textAlign:"left",whiteSpace:"nowrap",cursor:"pointer",hyphens:"auto",textDecoration:"none",color:o.gray700,boxSizing:"border-box",transition:`color ${o.transitionDurationShort} ${o.transitionEasingCubicBezier}`,borderRadius:o.borderRadiusMedium,"&:hover":{backgroundColor:hexToRGBA(o.gray900,.05)},"&:hover::before":{opacity:1,scale:"1"},"&:active::before":{backgroundColor:"rgba(255, 255, 255, 0.1)"},"&:disabled":{cursor:"auto"},"& svg":{transition:`fill ${o.transitionDurationShort} ${o.transitionEasingCubicBezier}`},"& > svg, & > span":{zIndex:o.zIndexDefault}},S(`inset ${o.glowPrimary}`)),navbarItemMenuTrigger:css({paddingRight:o.spacingXs}),isActive:ir()}),pr=()=>({itemSkeleton:css(sr)});var cr=()=>({navbarItemIcon:css({fill:o.gray700,"&:first-child":{marginRight:o.spacing2Xs},"&:last-child":{marginLeft:o.spacing2Xs},"img&":{borderRadius:o.borderRadiusSmall,maxWidth:o.spacingM,maxHeight:o.spacingM}})});var te=e=>{var i,n;let{icon:r,variant:t}=e,a=cr();return u.cloneElement(r,{className:cx(r.props.className,a.navbarItemIcon),size:(i=r.props.size)!=null?i:"tiny",variant:(n=r.props.variant)!=null?n:t})};var At="button";function kt(e,r){let F=e,{as:t=At,icon:a,title:i,children:n,className:s,isActive:c,testId:l="cf-ui-navbar-item",onOpen:p,onClose:g}=F,h=f(F,["as","icon","title","children","className","isActive","testId","onOpen","onClose"]),x=lr(),I=Tt(e),P=u.createElement(t,d(m({},h),{ref:r,"data-test-id":l,className:cx(x.navbarItem,I&&x.navbarItemMenuTrigger,c&&x.isActive,s)}),a&&u.createElement(te,{icon:a,variant:"secondary"}),u.createElement("span",null,i),I&&u.createElement(Je,null));return I?u.createElement($,{trigger:P,testId:l,onOpen:p,onClose:g},n):P}var Tt=e=>!!e.children,Ie=u.forwardRef(kt);var Se=({estimatedWidth:e})=>{let r=pr();return u.createElement(SkeletonContainer,{className:r.itemSkeleton,svgWidth:e,svgHeight:32,backgroundColor:o.gray300,foregroundColor:o.gray200},u.createElement(SkeletonText,{lineHeight:6,numberOfLines:1,offsetTop:10,radiusX:o.borderRadiusSmall,radiusY:o.borderRadiusSmall}))};var dr=()=>({navbarMenuItem:css({display:"flex",justifyContent:"flex-start",alignItems:"center"})});var Dt="button";function _t(e,r){let p=e,{as:t=Dt,icon:a,title:i,className:n}=p,s=f(p,["as","icon","title","className"]),c=dr(),l=Wt(e);return u.createElement(Menu.Item,d(m({},s),{ref:r,as:t,className:cx(c.navbarMenuItem,n)}),a?u.createElement(te,{icon:a,variant:"secondary"}):l&&fr,u.createElement("span",null,i),a&&l?fr:null)}var fr=u.createElement(te,{icon:u.createElement(ExternalLinkIcon,null),variant:"muted"}),Wt=e=>e.as==="a"&&e.target==="_blank",we=u.forwardRef(_t);var Pe=({ariaLabel:e})=>u.createElement(Menu.Item,null,u.createElement(Flex,{alignItems:"center",gap:o.spacingXs},u.createElement(SkeletonContainer,{svgHeight:16,svgWidth:18},u.createElement(SkeletonImage,{width:16,height:16})),u.createElement(SkeletonContainer,{svgHeight:16,svgWidth:190,ariaLabel:e},u.createElement(SkeletonBodyText,{numberOfLines:1}))));var gr=()=>({navbarSwitcher:css({margin:0,padding:0,background:"none",border:"none",height:"max-content",color:o.gray700,cursor:"pointer",fontSize:o.fontSizeS,fontWeight:o.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"}},S()),switcherMenuIcon:css({height:o.spacingM,width:o.spacingM,fill:o.gray700}),switcherBreadcrumbs:css({listStyleType:"none",margin:0,padding:0,position:"relative"})});function Ut(e,r){let c=e,{children:t,className:a,testId:i="cf-ui-navbar-switcher"}=c,n=f(c,["children","className","testId"]),s=gr();return u.createElement(Flex,d(m({},n),{as:"button",ref:r,className:cx(s.navbarSwitcher,a),testId:i,alignItems:"center",fullHeight:!0,gap:"spacingXs"}),u.createElement(Flex,{as:"ul",alignItems:"center",className:s.switcherBreadcrumbs},t))}var Ce=u.forwardRef(Ut);var Ae=({estimatedWidth:e})=>u.createElement(SkeletonContainer,{svgWidth:e,svgHeight:24,backgroundColor:o.gray300,foregroundColor:o.gray200},u.createElement(SkeletonDisplayText,{lineHeight:24,numberOfLines:1,radiusX:12,radiusY:12}));var Qt=Object.defineProperty,eo=Object.defineProperties,ro=Object.getOwnPropertyDescriptors,ce=Object.getOwnPropertySymbols,yr=Object.prototype.hasOwnProperty,Nr=Object.prototype.propertyIsEnumerable,xr=(e,r,t)=>r in e?Qt(e,r,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[r]=t,to=(e,r)=>{for(var t in r||(r={}))yr.call(r,t)&&xr(e,t,r[t]);if(ce)for(var t of ce(r))Nr.call(r,t)&&xr(e,t,r[t]);return e},oo=(e,r)=>eo(e,ro(r)),ao=(e,r)=>{var t={};for(var a in e)yr.call(e,a)&&r.indexOf(a)<0&&(t[a]=e[a]);if(e!=null&&ce)for(var a of ce(e))r.indexOf(a)<0&&Nr.call(e,a)&&(t[a]=e[a]);return t},no={large:"36px",medium:"20px",small:"14px"},io=()=>{let e={scale1:keyframes`
+    0% {
+      transform: scale(1, 1);
+    }
+    6.666667% {
+      transform: scale(1.5, 0.5);
+    }
+    13.333333% {
+      transform: scale(1, 1);
+    }
+    26.666667% {
+      transform: scale(1, 1);
+    }
+    33.333333% {
+      transform: scale(1, 1);
+    }
+    40% {
+      transform: scale(1, 1);
+    }
+    53.333333% {
+      transform: scale(1, 1);
+    }
+    60% {
+      transform: scale(1.5, 0.5);
+    }
+    66.666667% {
+      transform: scale(1, 1);
+    }
+    100% {
+      transform: scale(1, 1);
+    }
+  `,scale2:keyframes`
+    0% {
+      transform: scale(1, 1);
+    }
+    13.333333% {
+      transform: scale(1, 1);
+    }
+    20% {
+      transform: scale(1.5, 0.5);
+    }
+    26.666667% {
+      transform: scale(1, 1);
+    }
+    40% {
+      transform: scale(1, 1);
+    }
+    46.666667% {
+      transform: scale(1, 1);
+    }
+    53.333333% {
+      transform: scale(1, 1);
+    }
+    66.666667% {
+      transform: scale(1, 1);
+    }
+    73.333333% {
+      transform: scale(1.5, 0.5);
+    }
+    80% {
+      transform: scale(1, 1);
+    }
+    100% {
+      transform: scale(1, 1);
+    }
+  `,scale3:keyframes`
+    0% {
+      transform: scale(1, 1);
+    }
+    26.666667% {
+      transform: scale(1, 1);
+    }
+    33.333333% {
+      transform: scale(1.5, 0.5);
+    }
+    40% {
+      transform: scale(1, 1);
+    }
+    53.333333% {
+      transform: scale(1, 1);
+    }
+    60% {
+      transform: scale(1, 1);
+    }
+    66.666667% {
+      transform: scale(1, 1);
+    }
+    80% {
+      transform: scale(1, 1);
+    }
+    86.666667% {
+      transform: scale(1.5, 0.5);
+    }
+    93.333333% {
+      transform: scale(1, 1);
+    }
+    100% {
+      transform: scale(1, 1);
+    }
+  `,translate1:keyframes`
+    0% {
+      transform: translate(10px, 33.528168px);
+    }
+    6.666667% {
+      transform: translate(10px, 41.764084px);
+    }
+    13.333333% {
+      transform: translate(10px, 33.528168px);
+    }
+    26.666667% {
+      transform: translate(10px, -2.651608px);
+    }
+    33.333333% {
+      transform: translate(10px, -4.471832px);
+    }
+    40% {
+      transform: translate(10px, -2.651608px);
+    }
+    53.333333% {
+      transform: translate(10px, 33.528168px);
+    }
+    60% {
+      transform: translate(10px, 41.764084px);
+    }
+    66.666667% {
+      transform: translate(10px, 33.528168px);
+    }
+    100% {
+      transform: translate(10px, 33.528168px);
+    }
+  `,translate2:keyframes`
+    0% {
+      transform: translate(30px, 33.528168px);
+    }
+    13.333333% {
+      transform: translate(30px, 33.528168px);
+    }
+    20% {
+      transform: translate(30px, 41.764084px);
+    }
+    26.666667% {
+      transform: translate(30px, 33.528168px);
+    }
+    40% {
+      transform: translate(30px, -2.651608px);
+    }
+    46.666667% {
+      transform: translate(30px, -4.471832px);
+    }
+    53.333333% {
+      transform: translate(30px, -2.651608px);
+    }
+    66.666667% {
+      transform: translate(30px, 33.528168px);
+    }
+    73.333333% {
+      transform: translate(30px, 41.764084px);
+    }
+    80% {
+      transform: translate(30px, 33.528168px);
+    }
+    100% {
+      transform: translate(30px, 33.528168px);
+    }
+  `,translate3:keyframes`
+    0% {
+      transform: translate(50px, 33.528168px);
+    }
+    26.666667% {
+      transform: translate(50px, 33.528168px);
+    }
+    33.333333% {
+      transform: translate(50px, 41.764084px);
+    }
+    40% {
+      transform: translate(50px, 33.528168px);
+    }
+    53.333333% {
+      transform: translate(50px, -2.651608px);
+    }
+    60% {
+      transform: translate(50px, -4.471832px);
+    }
+    66.666667% {
+      transform: translate(50px, -2.651608px);
+    }
+    80% {
+      transform: translate(50px, 33.528168px);
+    }
+    86.666667% {
+      transform: translate(50px, 41.764084px);
+    }
+    93.333333% {
+      transform: translate(50px, 33.528168px);
+    }
+    100% {
+      transform: translate(50px, 33.528168px);
+    }
+  `};return {root:r=>css({height:r.customSize?`${r.customSize}px`:void 0,verticalAlign:"middle",width:r.customSize?`${r.customSize}px`:no[r.size]}),circle1Scale:css({animation:`${e.scale1} 1s linear infinite normal forwards;`}),circle2Scale:css({animation:`${e.scale2} 1s linear infinite normal forwards;`}),circle3Scale:css({animation:`${e.scale3} 1s linear infinite normal forwards;`}),circle1Translate:css({animation:`${e.translate1} 1s linear infinite normal forwards;`}),circle2Translate:css({animation:`${e.translate2} 1s linear infinite normal forwards;`}),circle3Translate:css({animation:`${e.translate3} 1s linear infinite normal forwards;`})}},so="div",lo={default:o.gray700,primary:o.blue500,white:o.colorWhite},Te=forwardRef((e,r)=>{var t=e,{className:a,customSize:i,size:n="medium",variant:s="default",testId:c="cf-ui-spinner"}=t,l=ao(t,["className","customSize","size","variant","testId"]);let p=io();return u.createElement(Box,oo(to({as:so,display:"inline-block"},l),{className:cx(p.root({size:n,customSize:i}),a),ref:r,testId:c}),u.createElement("svg",{className:css({display:"block",fill:lo[s]}),viewBox:"0 0 60 51",xmlns:"http://www.w3.org/2000/svg"},u.createElement("title",null,"Loading\u2026"),u.createElement("g",{className:p.circle1Translate,transform:"translate(10,33.528168)"},u.createElement("g",{className:p.circle1Scale},u.createElement("circle",{r:"6",transform:"translate(0,10.471832)"}))),u.createElement("g",{className:p.circle2Translate,transform:"translate(30,33.528168)"},u.createElement("g",{className:p.circle2Scale},u.createElement("circle",{r:"6",transform:"translate(0,10.471832)"}))),u.createElement("g",{className:p.circle3Translate,transform:"translate(50,33.528168)"},u.createElement("g",{className:p.circle3Scale},u.createElement("circle",{r:"6",transform:"translate(0,10.471832)"})))))});Te.displayName="Spinner";var mo=Object.defineProperty,fo=Object.defineProperties,uo=Object.getOwnPropertyDescriptors,me=Object.getOwnPropertySymbols,wr=Object.prototype.hasOwnProperty,Pr=Object.prototype.propertyIsEnumerable,Ir=(e,r,t)=>r in e?mo(e,r,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[r]=t,N=(e,r)=>{for(var t in r||(r={}))wr.call(r,t)&&Ir(e,t,r[t]);if(me)for(var t of me(r))Pr.call(r,t)&&Ir(e,t,r[t]);return e},Be=(e,r)=>fo(e,uo(r)),Oe=(e,r)=>{var t={};for(var a in e)wr.call(e,a)&&r.indexOf(a)<0&&(t[a]=e[a]);if(e!=null&&me)for(var a of me(e))r.indexOf(a)<0&&Pr.call(e,a)&&(t[a]=e[a]);return t},go=({withDivider:e})=>{let r=bo(e);return {buttonGroup:css({display:"inline-flex",position:"relative"}),groupContent:css(N({borderRadius:"0 !important",marginRight:"-1px","&:first-child":{borderBottomLeftRadius:`${o.borderRadiusMedium} !important`,borderTopLeftRadius:`${o.borderRadiusMedium} !important`},"&:last-child":{borderBottomRightRadius:`${o.borderRadiusMedium} !important`,borderTopRightRadius:`${o.borderRadiusMedium} !important`,marginRight:0},"&:focus":{zIndex:o.zIndexDefault}},r))}},bo=e=>{if(!e)return {};let r=`1px solid ${hexToRGBA(o.colorWhite,.2)}`;return {borderTop:"none",borderBottom:"none","&:not(:first-child,:focus-visible)":{borderLeft:r},"&:not(:last-child,:focus-visible)":{borderRight:r}}};function Er(e,r){let{variant:t="merged",withDivider:a,testId:i="cf-ui-button-group",children:n,className:s,spacing:c}=e,l=go({withDivider:a});return t==="spaced"?u.createElement(Stack,{className:s,isInline:!0,flexDirection:"row",testId:i,ref:r,spacing:c},n):u.createElement(Box,{testId:i,ref:r,className:cx(l.buttonGroup,s)},u.Children.map(n,(p,g)=>p?u.cloneElement(p,{key:g,className:cx(l.groupContent,p.props.className)}):null))}Er.displayName="ButtonGroup";u.forwardRef(Er);var q=e=>{switch(e){case"primary":return {backgroundColor:o.blue700};case"secondary":return {backgroundColor:o.gray200};case"positive":return {backgroundColor:o.green700};case"negative":return {backgroundColor:o.gray200};case"transparent":return {backgroundColor:hexToRGBA(o.gray900,.1)};default:return {}}},vo=e=>{switch(e){case"primary":return {color:o.colorWhite,backgroundColor:o.blue500,borderColor:"transparent","&:hover":{backgroundColor:o.blue600,color:o.colorWhite},"&:active":q(e),"&:focus-visible":{boxShadow:o.glowPrimary}};case"secondary":return {color:o.gray900,backgroundColor:o.colorWhite,borderColor:o.gray300,"&:hover":{backgroundColor:o.gray100,color:o.gray900},"&:active":q(e),"&:focus":{boxShadow:o.glowPrimary},"&:focus:not(:focus-visible)":{boxShadow:"unset"},"&:focus-visible":{boxShadow:o.glowPrimary}};case"positive":return {color:o.colorWhite,backgroundColor:o.green500,borderColor:"transparent","&:hover":{backgroundColor:o.green600,color:o.colorWhite},"&:active":q(e),"&:focus-visible":{boxShadow:o.glowPositive}};case"negative":return {color:o.red600,backgroundColor:o.colorWhite,borderColor:o.gray300,"&:hover":{backgroundColor:o.gray100,color:o.red600},"&:active":q(e),"&:focus-visible":{boxShadow:o.glowNegative}};case"transparent":return {color:o.gray900,background:"none",borderColor:"transparent",boxShadow:"none","&:hover":{backgroundColor:hexToRGBA(o.gray900,.05)},"&:active":q(e),"&:focus":{boxShadow:o.glowPrimary},"&:focus:not(:focus-visible)":{boxShadow:"unset"},"&:focus-visible":{boxShadow:o.glowPrimary}};default:return {}}},ho=(e,r)=>{let t=r==="high";switch(e){case"small":return {fontSize:t?o.fontSizeS:o.fontSizeM,lineHeight:o.lineHeightCondensed,padding:t?`${o.spacing2Xs} ${o.spacingXs}`:`${o.spacing2Xs} ${o.spacingS}`,minHeight:t?o.spacingL:o.spacingXl};case"medium":return {fontSize:t?o.fontSizeS:o.fontSizeM,lineHeight:o.lineHeightCondensed,padding:t?`${o.spacingXs} ${o.spacingS}`:`${o.spacingXs} ${o.spacingM}`,minHeight:t?o.spacingXl:"40px"};case"large":return {fontSize:o.fontSizeXl,lineHeight:o.lineHeightXl,padding:`${o.spacingXs} ${o.spacingM}`,minHeight:"48px"};default:return {}}},xo=({hasChildren:e,variant:r})=>{let t={"&:first-child":{marginRight:o.spacing2Xs},"&:last-child":{marginLeft:o.spacing2Xs}};return css([e?t:{},r!=="transparent"&&e&&{"& svg":{fill:"currentColor"}}])},yo=()=>({button:({variant:e,size:r,density:t,isActive:a,isDisabled:i,isFullWidth:n})=>css(N(N(N({boxSizing:"border-box",border:"1px solid",boxShadow:"0px 1px 0px rgb(25, 37, 50, 0.08)",borderRadius:t==="high"?o.borderRadiusSmall:o.borderRadiusMedium,cursor:i?"not-allowed":"pointer",fontFamily:o.fontStackPrimary,opacity:i?.5:1,display:n?"flex":"inline-flex",minWidth:n?"100%":"auto",maxWidth:n?"100%":"240px",overflow:"hidden",flexShrink:0,justifyContent:"center",alignItems:"center",fontWeight:o.fontWeightMedium,outline:"none",textDecoration:"none",margin:0,transition:`background ${o.transitionDurationShort} ${o.transitionEasingDefault},
+        opacity ${o.transitionDurationDefault} ${o.transitionEasingDefault},
+        border-color ${o.transitionDurationDefault} ${o.transitionEasingDefault}`},vo(e)),ho(r,t)),a?{transition:"none","&, &:focus":q(e)}:{})),buttonIcon:xo,buttonContent:css({whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis"})}),No="button";function Mr(e,r){let t=yo(),a=e,{as:i=No,children:n,className:s,testId:c="cf-ui-button",variant:l="secondary",size:p="medium",startIcon:g,endIcon:h,isActive:x,isDisabled:I,isLoading:P,isFullWidth:F,style:O}=a,J=Oe(a,["as","children","className","testId","variant","size","startIcon","endIcon","isActive","isDisabled","isLoading","isFullWidth","style"]),jr=useDensity(),Vr=cx(t.button({variant:l,size:p,density:jr,isActive:x,isDisabled:I,isFullWidth:F}),s),He=K=>{var We;let Ur={primary:"white",secondary:"secondary",positive:"white",negative:"negative",transparent:"secondary"};return !P&&u.createElement(Flex,{as:"span",className:t.buttonIcon({hasChildren:!!n,variant:l})},u.cloneElement(K,{size:(We=K.props.size)!=null?We:`${p==="large"?"medium":"small"}`,color:l==="transparent"&&K.props.variant===void 0&&K.props.color||"currentColor",variant:l==="transparent"&&K.props.variant||Ur[l]}))},De=u.createElement(u.Fragment,null,g&&He(g),n&&u.createElement(Box,{as:"span",display:"block",className:t.buttonContent},n),h&&He(h),P&&u.createElement(Box,{as:"span",marginLeft:n||!P?"spacingXs":"none"},u.createElement(Te,{customSize:18,variant:l==="secondary"||l==="negative"||l==="transparent"?"default":"white"}))),_e={"data-test-id":c,className:Vr,ref:r,style:O};return i==="a"?u.createElement("a",Be(N(N({},J),_e),{disabled:I}),De):u.createElement("button",Be(N(N({type:"button"},J),_e),{disabled:I}),De)}Mr.displayName="Button";var de=u.forwardRef(Mr),Io=({isActive:e,isDisabled:r})=>{let t={background:o.blue100,borderColor:o.blue600,"&":{zIndex:o.zIndexDefault+1},"&:hover":{background:o.blue100}},a={"&:focus":{boxShadow:o.glowPrimary},"&:focus-visible:not([disabled])":{zIndex:o.zIndexDefault+2},"&:active, &:active:hover":r?{background:o.colorWhite,borderColor:o.gray300}:{background:o.blue100,borderColor:o.blue600}};return e?N(N({},a),t):a},So=({isActive:e,isDisabled:r})=>({toggleButton:css(Io({isActive:e,isDisabled:r}))});function Cr(e,r){let t=e,{testId:a="cf-ui-toggle-button",children:i,className:n,isDisabled:s=!1,isActive:c=!1,icon:l,onToggle:p,size:g="medium"}=t,h=Oe(t,["testId","children","className","isDisabled","isActive","icon","onToggle","size"]),x=So({isActive:c,isDisabled:s});return u.createElement(de,N({testId:a,type:"button",ref:r,size:g,onClick:()=>{!s&&p&&p();},className:cx(x.toggleButton,n),startIcon:l,isDisabled:s,"aria-pressed":c,"data-state":c?"on":"off"},h),i)}Cr.displayName="ToggleButton";u.forwardRef(Cr);function wo(e,r){let t=r==="high";switch(e){case"small":return {padding:t?`${o.spacing2Xs}`:o.spacing2Xs,minHeight:t?o.spacingL:o.spacingXl,minWidth:t?o.spacingL:o.spacingXl};case"medium":return {padding:o.spacingXs,minHeight:t?o.spacingXl:"40px",minWidth:t?o.spacingXl:"40px"};default:return {}}}function Po({size:e,density:r}){return {iconButton:css(N({},wo(e,r)))}}function Ar(e,r){let t=e,{testId:a="cf-ui-icon-button",variant:i="transparent",icon:n,className:s,size:c="medium"}=t,l=Oe(t,["testId","variant","icon","className","size"]),p=useDensity(),g=Po({size:c,density:p});return u.createElement(de,Be(N({testId:a,ref:r,variant:i,className:cx(g.iconButton,s),size:c},l),{startIcon:n}))}Ar.displayName="IconButton";var kr=u.forwardRef(Ar);var Tr=()=>({navbarSearch:css({minWidth:"24px",width:"24px",minHeight:"24px",height:"24px",svg:{fill:o.gray700}},S())});function Ao(e,r){let s=e,{className:t,testId:a="cf-ui-navbar-search"}=s,i=f(s,["className","testId"]),n=Tr();return u.createElement(kr,d(m({"aria-label":"Quick Search"},i),{variant:"transparent",ref:r,size:"small",className:cx(n.navbarSearch,t),testId:a,icon:u.createElement(Qe,{size:"medium"})}))}var Rr=u.forwardRef(Ao);var Br={display:"none","&:first-child":{display:"block"},[M.medium]:{display:"block","&:first-child":{display:"none"}}},zr=()=>({breadcrumbsItem:css({position:"relative",alignItems:"center",justifyContent:"center",border:`solid 1px ${o.gray300}`,borderLeft:"none",display:"inline-flex",margin:0,minWidth:0,padding:`0 ${o.spacingXs}`,height:o.spacingL,borderRadius:"3rem",zIndex:2,whiteSpace:"nowrap","&:first-child":{minWidth:"24px"},"&:nth-child(2)":{zIndex:1,marginLeft:"-10px",paddingLeft:o.spacingM,borderRadius:"0 3rem 3rem 0",span:{maxWidth:"80px",textOverflow:"ellipsis",overflow:"hidden",[M.large]:{maxWidth:"100%"}}},"&:nth-child(3)":{marginLeft:"-10px",paddingLeft:o.spacingM,borderRadius:"0 3rem 3rem 0",fontFamily:o.fontStackMonospace,fontSize:o.fontSizeS,fontWeight:o.fontWeightMedium,zIndex:0,span:{maxWidth:"40px",textOverflow:"ellipsis",overflow:"hidden",[M.large]:{maxWidth:"100%"}},"> div":{[M.medium]:{gap:o.spacing2Xs}}}}),breadcrumbsItemCircle:css({border:`solid 1px ${o.gray300}`,borderRadius:"50%",color:o.gray400,padding:0,display:"flex",justifyContent:"center",fontSize:"11px",width:o.spacingL,height:o.spacingL}),breadcrumbsItemEnvMaster:css({color:o.green600," svg":d(m({},Br),{fill:o.green600})}),breadcrumbsItemEnvNonMaster:css({color:o.orange500,svg:d(m({},Br),{fill:o.orange500})})});function Or({isAlias:e}){return u.createElement(u.Fragment,null,u.createElement(Ye,{key:"mobile-icon",size:"tiny"}),e?u.createElement(EnvironmentAliasIcon,{key:"full-icon",size:"tiny"}):u.createElement(EnvironmentIcon,{key:"full-icon",size:"tiny"}))}function zo(e,r){let h=e,{children:t,isCircle:a,className:i,envVariant:n,isAlias:s,testId:c="cf-ui-navbar-switcher-item"}=h,l=f(h,["children","isCircle","className","envVariant","isAlias","testId"]),p=zr(),g=cx(p.breadcrumbsItem,i,{[p.breadcrumbsItemCircle]:a,[p.breadcrumbsItemEnvMaster]:n==="master",[p.breadcrumbsItemEnvNonMaster]:n==="non-master"});return u.createElement("li",d(m({},l),{ref:r,className:g,"data-test-id":c}),u.createElement(Flex,{fullHeight:!0,justifyContent:"center",alignItems:"center"},n&&u.createElement(Or,{isAlias:s}),u.createElement("span",null,t)))}var Lr=u.forwardRef(zo);var Hr=()=>({navbarHelp:css({fontSize:o.fontSizeS,padding:`0 ${o.spacing2Xs}`,width:"max-content",minHeight:"24px",height:"24px",color:o.gray700,svg:{fill:o.gray700}},S())});function Ho(e,r){let c=e,{children:t,className:a,testId:i="cf-ui-navbar-help-trigger"}=c,n=f(c,["children","className","testId"]),s=Hr();return u.createElement($,{testId:"cf-ui-navbar-help-menu",trigger:u.createElement(de,d(m({"aria-label":"Help Menu"},n),{as:"button",ref:r,className:cx(s.navbarHelp,a),testId:i,variant:"transparent",size:"small",startIcon:u.createElement(Ke,{size:"medium"})}),"Help")},t)}var Dr=u.forwardRef(Ho);var _r=()=>({navbarBadge:css({display:"flex",justifyContent:"center",alignItems:"center",background:"none",border:`1px solid ${o.purple600}`,margin:0,outline:"none",fontSize:o.fontSizeS,lineHeight:o.lineHeightS,fontWeight:o.fontWeightMedium,textAlign:"center",padding:`0 ${o.spacingXs}`,textDecoration:"none",color:`${o.purple600}!important`,borderRadius:"1.75rem"})});var Wo="div";function Fo(e,r){let l=e,{as:t=Wo,children:a,className:i,testId:n="cf-ui-navbar-badge"}=l,s=f(l,["as","children","className","testId"]),c=_r();return u.createElement(t,d(m({},s),{ref:r,className:cx(c.navbarBadge,i),"data-test-id":n}),a)}var Fr=u.forwardRef(Fo);var $r=()=>({navbarTopItem:css({margin:0,background:"none",border:"1px solid",borderColor:"transparent",cursor:"pointer",display:"flex",gap:o.spacing2Xs,alignItems:"center",lineHeight:o.lineHeightDefault,color:o.gray700,padding:`0 ${o.spacing2Xs}`,minHeight:"24px",fontSize:o.fontSizeS,fontWeight:o.fontWeightMedium,outline:"none",borderRadius:o.borderRadiusMedium,"&:hover":{backgroundColor:hexToRGBA(o.gray900,.05)},svg:{fill:"currentColor"}},S())});var jo="button";function Vo(e,r){let l=e,{as:t=jo,children:a,className:i,testId:n="cf-ui-navbar-topbar-item"}=l,s=f(l,["as","children","className","testId"]),c=$r();return u.createElement(t,d(m({},s),{ref:r,className:cx(c.navbarTopItem,i),"data-test-id":n}),a)}var Gr=u.forwardRef(Vo);var y=rr;y.Item=Ie;y.ItemSkeleton=Se;y.MenuItem=we;y.MenuItemSkeleton=Pe;y.MenuDivider=MenuDivider;y.MenuSectionTitle=MenuSectionTitle;y.Switcher=Ce;y.SwitcherSkeleton=Ae;y.SwitcherItem=Lr;y.Search=Rr;y.Help=Dr;y.Account=ye;y.AccountSkeleton=Ne;y.Badge=Fr;y.TopbarItem=Gr;
 
-export { b as Navbar, ye as getNavbarItemActiveStyles };
+export { y as Navbar, ir as getNavbarItemActiveStyles };
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.js.map