@contentful/f36-navbar 5.0.0-alpha.9 → 5.1.1

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 +83 -45
  2. package/dist/esm/index.js +22 -210
  3. package/dist/esm/index.js.map +1 -1
  4. package/dist/index.d.mts +110 -65
  5. package/dist/index.d.ts +110 -65
  6. package/dist/index.js +24 -210
  7. package/dist/index.js.map +1 -1
  8. package/package.json +12 -9
package/README.mdx CHANGED
@@ -2,60 +2,84 @@
2
2
  title: 'Navbar'
3
3
  type: 'component'
4
4
  status: 'stable'
5
- isNew: true
6
5
  slug: /components/navbar/
7
6
  github: 'https://github.com/contentful/forma-36/tree/main/packages/components/navbar'
8
7
  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
8
+ typescript: ./src/Navbar.tsx,./src/NavbarAccount/NavbarAccount.tsx,./src/NavbarBadge/NavbarBadge.tsx,./src/NavbarItem/NavbarItem.tsx,./src/NavbarMenuItem/NavbarMenuItem.tsx,./src/NavbarSubmenu/NavbarSubmenu.tsx,./src/NavbarSwitcher/NavbarSwitcher.tsx,
10
9
  ---
11
10
 
12
- The Navbar component offers a unified navigation experience across all of Contentful's products.
13
- It consists of a top and bottom section, each serving specific purposes.
14
- The bottom section is dedicated to navigation items, while the top section provides additional context and actions.
15
- This ensures a consistent and intuitive navigation experience throughout the application.
11
+ The Navbar component represents the main top navigation across all Contentful Products.
12
+
13
+ ## Introduction
14
+
15
+ The `Navbar` component is composed of multiple predefined areas, each configurable through dedicated props. It does not accept children directly. All areas are designed with responsiveness in mind and will appear or disappear based on screen breakpoints.
16
+
17
+ ### Navbar Compound components
18
+
19
+ The `Navbar` exports the following compound components
20
+
21
+ | Compound Component | Description | Typical Usage Area |
22
+ | --------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------- |
23
+ | `<Navbar.Item>` | Represents a main navigation item. Use it as a child of the `<Navbar>` component or the `bottomRightItems` prop of Navbar. | `mainNavigation`, `secondaryNavigation` |
24
+ | `<Navbar.MenuItem>` | Represents an individual menu item, typically used to create dropdowns. Use it as a child of either `<Navbar.Item>` or `<Navbar.Account>`. | `mobileNavigation`, `account` |
25
+ | `<Navbar.Submenu>` | Wraps one or more `<Navbar.MenuItem>` components to create a nested menu within the `mobileNavigation` area. | `mobileNavigation` |
26
+ | `<Navbar.MenuDivider>` | A visual separator for menu items. Use it before or after a `<Navbar.MenuItem>`. Alias for `MenuDivider` from the `Menu` component. | `mobileNavigation`, `account` |
27
+ | `<Navbar.MenuSectionTitle>` | A title that can be used in the menu list. Use it before or after a `<Navbar.MenuItem>`. Alias for `MenuSectionTitle` from the `Menu` component. | `mobileNavigation`, `account` |
28
+ | `<Navbar.Switcher>` | Wrapper component for the space and environment information. Use it as a child of the Navbar `switcher` prop. | `switcher` |
29
+ | `<Navbar.Account>` | Trigger for the account menu. Use it as a child of the Navbar `account` prop. | `account` |
30
+ | `<Navbar.Badge>` | Represents an item that provides additional information, such as indicating that the user's space is on a trial. Use as a child of the Navbar `badge`. | `promotions`, `badge` |
31
+ | `<Navbar.ItemSkeleton>` | Loading skeleton for `<Navbar.Item>`. Use it as a child of the `<Navbar>` component or the `bottomRightItems` prop of Navbar. | `mainNavigation`, `secondaryNavigation` |
32
+ | `<Navbar.MenuItemSkeleton>` | Loading skeleton for `<Navbar.MenuItem>`. Use it as a child of `<Navbar.Item>`, `<Navbar.Account>`, or `<Navbar.Help>`. | `mobileNavigation`, `account`, `help` |
33
+ | `<Navbar.SwitcherSkeleton>` | Loading skeleton for `<Navbar.Switcher>`. Use it as a child of the Navbar `switcher` prop. | `switcher` |
34
+ | `<Navbar.AccountSkeleton>` | Loading skeleton for `<Navbar.Account>`. Use it as a child of the Navbar `account` prop. | `account` |
35
+
36
+ #### Navbar.Account
37
+
38
+ This compound component is used to generate the account menu; the user's avatar represents the menu trigger. It should be handed over to the `Navbar` via the `account` property, which will be rendered as the last element.
39
+
40
+ #### Navbar.Badge
41
+
42
+ This compound component is used for highlights and promotions. It should be used as a element applied to the `promotions` or `account` prop on the Navbar component
43
+
44
+ #### Navbar.Item
45
+
46
+ This component generates the individual Navigation Items. It expects a callback function and can not be used as a normal link. It is versatile and can be used with a title, as a Icon-Only element or as a dropdown menu. It should be used within the area properties `mainNavigation` `secondaryNavigation` or `account`
47
+ In the `secondaryNavigation` area, the `Navbar.Item`should only use an `icon` and not hand over a `title` property but `label` instead. To keep this icon-only `Navbar.Item` accessible, the label is required. This label will also be shown as a tooltip on hover of the element.
48
+ `Navbar.Item` accepts `Navbar.MenuItem` as children. When handing over the children, this `Navbar.Item` becomes a dropdown menu, listing all children inside the menu pop-out. It is possible to have a dropdown menu with `title` and `icon` or with `icon` and `label` for an icon-only menu.
49
+
50
+ #### Navbar.MenuItem, Navbar.MenuDivider, Navbar.MenuSectionTitle
51
+
52
+ These compound components are used as children of a `Navbar.Item` or as children to the `mobileNavigation`
53
+
54
+ #### Navbar.Submenu
55
+
56
+ `Navbar.Submenu` should only be used in the `mobileNavigation` area. It can be used to generate a nested Menu, it expects `Navbar.MenuItem` as children.
57
+
58
+ #### Navbar.Switcher
59
+
60
+ The `Navbar.Switcher` component is used for displaying the current space and environment names. It can also be used as trigger element to open a space switcher menu. It should always be used inside the `switcher` area property to ensure proper positioning.
16
61
 
17
62
  ## Import
18
63
 
19
64
  ```jsx static=true
20
- import { Navbar } from '@contentful/f36-components';
21
- // or
22
65
  import { Navbar } from '@contentful/f36-navbar';
23
66
  ```
24
67
 
25
68
  ## Examples
26
69
 
27
- You can use following components to build a menu:
28
-
29
- 1. `<Navbar>`: The main wrapper component.
30
- 1. `<Navbar.Item>`: Represents a main navigation item. Use it as a child of the `<Navbar>` component or the `bottomRightItems` prop of Navbar.
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
- 1. `<Navbar.MenuDivider>`: A visual separator for menu items. Use it before or after a `<Navbar.MenuItem>`.
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>`.
36
- 1. `<Navbar.Search>`: Trigger for the global search. Use it as a child of the Navbar `search` prop.
37
- 1. `<Navbar.Help>`: Trigger for the help menu. Use it as a child of the Navbar `help` prop.
38
- 1. `<Navbar.Account>`: Trigger for the account menu. Use it as a child of the Navbar `account` prop.
39
- 1. `<Navbar.Badge>`: Represents an item that provides additional information, such as indicating that the user's space is on a trial. Use it as a child of the Navbar `badge` prop.
40
- 1. `<Navbar.TopbarItem>`: Represents an item that provides additional links or CTAs (Call to Actions), such as a link to the feedback form. Use it as a child of the Navbar `topRightItems` prop.
41
- 1. `<Navbar.ItemSkeleton>`: Loading skeleton for `<Navbar.Item>`. Use it as a child of the `<Navbar>` component or the `bottomRightItems` prop of Navbar.
42
- 1. `<Navbar.MenuItemSkeleton>`: Loading skeleton for `<Navbar.MenuItem>`. Use it as a child of the `<Navbar.Item>`, `<Navbar.Account>`, or `<Navbar.Help>` components.
43
- 1. `<Navbar.SwitcherSkeleton>`: Loading skeleton for `<Navbar.Switcher>`. Use it as a child of the Navbar `switcher` prop.
44
- 1. `<Navbar.AccountSkeleton>`: Loading skeleton for `<Navbar.Account>`. Use it as a child of the Navbar `account` prop.
45
-
46
70
  ### Basic usage
47
71
 
48
72
  ```tsx file=examples/BasicNavbarExample.tsx
49
73
 
50
74
  ```
51
75
 
52
- ### Complete Navbar
76
+ ### Complete Navbar including mobile navigation
53
77
 
54
78
  ```tsx file=examples/CompleteNavbarExample.tsx
55
79
 
56
80
  ```
57
81
 
58
- ### Navbar with different enviromnments
82
+ ### Navbar with different environments
59
83
 
60
84
  ```tsx file=examples/WithDifferentEnviromnmentsNavbarExample.tsx
61
85
 
@@ -73,6 +97,32 @@ You can use following components to build a menu:
73
97
 
74
98
  ```
75
99
 
100
+ ## Navigation areas and responsive behaviour
101
+
102
+ The Navbar component supports responsiveness. Different areas of the navbar will disappear on some breakpoints. Find the detailed information in the table below.
103
+
104
+ | Prop | Description | Breakpoints | Recommended Compound Component |
105
+ | --------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------------------------------- |
106
+ | `logo` | Allows to overwrite the Contentful logo with a custom logo and link. This ensures a consistent and intuitive navigation experience throughout the application. | Always visible | Custom element |
107
+ | `mainNavigation` | Main navigation items. Each main navigation item should use the `Navbar.Item` compound component. This area is responsive and will be visible starting from the default breakpoint `867px`. This can be overwritten in the `mobileNavigationProps` and changed to `breakpoint: 'medium'` (`1024px`). | `867px` (default), configurable | `Navbar.Item` |
108
+ | `mobileNavigation` | Allows navigation on smaller screen devices. Visible until the default breakpoint of `867px`. Items in this area should use `Navbar.MenuItem` and `Navbar.Submenu` compound components. The breakpoint can be changed using `mobileNavigationProps` to `small: 867px` or `medium: 1024px`. You can also set a custom label for the mobile navigation trigger button. | `<867px` (default), configurable | `Navbar.MenuItem`, `Navbar.Submenu` |
109
+ | `secondaryNavigation` | Contains additional navigation items, like Search, Help, etc. Items in this area should use the `Navbar.Item` compound component with only an icon and no `title`. This area is responsive and will be visible starting from the breakpoint `576px`. | `576px` and up | `Navbar.Item` (icon-only) |
110
+ | `promotions` | In this area, you can add any additional items you want accessible on the Navbar, such as feedback links or other types of promotions. This area is responsive and will not be visible until the breakpoint `1200px`. | `1200px` and up | `Navbar.Badge` or Custom element |
111
+ | `switcher` | Reserved for the `Navbar.Switcher` component to display the name of the current space and environment. | Always visible | `Navbar.Switcher` |
112
+ | `account` | Meant for the user's account menu. Use the `Navbar.Account` compound component to build it. This area is responsive and will be visible starting from `576px`; before that, it should be made available inside the `mobileNavigation`. | `576px` and up | `Navbar.Account` |
113
+
114
+ ## Accessibility
115
+
116
+ Each `Menu.Item` offers and increased click-able area and the whole navigation is accessible via keyboard.
117
+ To further improve the accessibility, each Navbar area has a `aria-label`. These labels can be set via the `aria` prop oobject. Make sure to set a label for every `Menu.Item` in Icon-only modus, this is used to describe the Item for visually impaired users.
118
+
119
+ | Prop | Description | Default Setting |
120
+ | ------------------------------- | --------------------------------------------- | ------------------------ |
121
+ | `aria.labelMainNavigation` | Aria label for the main navigation area. | `'Main Navigation'` |
122
+ | `aria.labelSecondaryNavigation` | Aria label for the secondary navigation area. | `'Secondary Navigation'` |
123
+ | `aria.labelPromotions` | Aria label for the promotions area. | `'Promotions'` |
124
+ | `aria.labelAccount` | Aria label for the account navigation area. | `'Account Navigation'` |
125
+
76
126
  ## Props (API reference)
77
127
 
78
128
  ### Navbar
@@ -83,30 +133,18 @@ You can use following components to build a menu:
83
133
 
84
134
  <PropsTable of="NavbarItem" />
85
135
 
86
- ### Navbar.MenuItem
136
+ ### Navbar.Submenu
87
137
 
88
- <PropsTable of="NavbarMenuItem" />
138
+ <PropsTable of="NavbarSubmenu" />
89
139
 
90
- ### Navbar.TopbarItem
140
+ ### Navbar.MenuItem
91
141
 
92
- <PropsTable of="NavbarTopbarItem" />
142
+ <PropsTable of="NavbarMenuItem" />
93
143
 
94
144
  ### Navbar.Switcher
95
145
 
96
146
  <PropsTable of="NavbarSwitcher" />
97
147
 
98
- ### Navbar.SwitcherItem
99
-
100
- <PropsTable of="NavbarSwitcherItem" />
101
-
102
- ### Navbar.Search
103
-
104
- <PropsTable of="NavbarSearch" />
105
-
106
- ### Navbar.Help
107
-
108
- <PropsTable of="NavbarHelp" />
109
-
110
148
  ### Navbar.Account
111
149
 
112
150
  <PropsTable of="NavbarAccount" />
package/dist/esm/index.js CHANGED
@@ -1,216 +1,28 @@
1
1
  import { MenuDivider, MenuSectionTitle, Menu } from '@contentful/f36-menu';
2
- import { Box, Flex, Stack } from '@contentful/f36-core';
3
- import u, { forwardRef } from 'react';
4
- import { cx, css, keyframes } from 'emotion';
5
- import o from '@contentful/f36-tokens';
6
- import { generateIcon } from '@contentful/f36-icon-alpha';
7
- import { useDensity, hexToRGBA } from '@contentful/f36-utils';
2
+ import { Flex } from '@contentful/f36-core';
3
+ import v from 'react';
4
+ import { cx, css } from 'emotion';
5
+ import a from '@contentful/f36-tokens';
6
+ import { generateComponentWithVariants, IconVariant, generateIconComponent } from '@contentful/f36-icon';
7
+ import { Button } from '@contentful/f36-button';
8
+ import { ArrowSquareOutIcon, ListIcon, CaretRightIcon, FlaskIcon, RocketLaunchIcon, EnvironmentAliasIcon, EnvironmentIcon } from '@contentful/f36-icons';
8
9
  import { Avatar } from '@contentful/f36-avatar';
9
- import { SkeletonContainer, SkeletonImage, SkeletonText, SkeletonBodyText, SkeletonDisplayText } from '@contentful/f36-skeleton';
10
- import { ExternalLinkIcon, EnvironmentAliasIcon, EnvironmentIcon } from '@contentful/f36-icons';
10
+ import { Tooltip } from '@contentful/f36-tooltip';
11
+ import { SkeletonContainer, SkeletonImage, SkeletonText, SkeletonBodyText } from '@contentful/f36-skeleton';
12
+ import { hexToRGBA } from '@contentful/f36-utils';
13
+ import { Text } from '@contentful/f36-typography';
11
14
 
12
- 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`
13
- 0% {
14
- transform: scale(1, 1);
15
- }
16
- 6.666667% {
17
- transform: scale(1.5, 0.5);
18
- }
19
- 13.333333% {
20
- transform: scale(1, 1);
21
- }
22
- 26.666667% {
23
- transform: scale(1, 1);
24
- }
25
- 33.333333% {
26
- transform: scale(1, 1);
27
- }
28
- 40% {
29
- transform: scale(1, 1);
30
- }
31
- 53.333333% {
32
- transform: scale(1, 1);
33
- }
34
- 60% {
35
- transform: scale(1.5, 0.5);
36
- }
37
- 66.666667% {
38
- transform: scale(1, 1);
39
- }
40
- 100% {
41
- transform: scale(1, 1);
42
- }
43
- `,scale2:keyframes`
44
- 0% {
45
- transform: scale(1, 1);
46
- }
47
- 13.333333% {
48
- transform: scale(1, 1);
49
- }
50
- 20% {
51
- transform: scale(1.5, 0.5);
52
- }
53
- 26.666667% {
54
- transform: scale(1, 1);
55
- }
56
- 40% {
57
- transform: scale(1, 1);
58
- }
59
- 46.666667% {
60
- transform: scale(1, 1);
61
- }
62
- 53.333333% {
63
- transform: scale(1, 1);
64
- }
65
- 66.666667% {
66
- transform: scale(1, 1);
67
- }
68
- 73.333333% {
69
- transform: scale(1.5, 0.5);
70
- }
71
- 80% {
72
- transform: scale(1, 1);
73
- }
74
- 100% {
75
- transform: scale(1, 1);
76
- }
77
- `,scale3:keyframes`
78
- 0% {
79
- transform: scale(1, 1);
80
- }
81
- 26.666667% {
82
- transform: scale(1, 1);
83
- }
84
- 33.333333% {
85
- transform: scale(1.5, 0.5);
86
- }
87
- 40% {
88
- transform: scale(1, 1);
89
- }
90
- 53.333333% {
91
- transform: scale(1, 1);
92
- }
93
- 60% {
94
- transform: scale(1, 1);
95
- }
96
- 66.666667% {
97
- transform: scale(1, 1);
98
- }
99
- 80% {
100
- transform: scale(1, 1);
101
- }
102
- 86.666667% {
103
- transform: scale(1.5, 0.5);
104
- }
105
- 93.333333% {
106
- transform: scale(1, 1);
107
- }
108
- 100% {
109
- transform: scale(1, 1);
110
- }
111
- `,translate1:keyframes`
112
- 0% {
113
- transform: translate(10px, 33.528168px);
114
- }
115
- 6.666667% {
116
- transform: translate(10px, 41.764084px);
117
- }
118
- 13.333333% {
119
- transform: translate(10px, 33.528168px);
120
- }
121
- 26.666667% {
122
- transform: translate(10px, -2.651608px);
123
- }
124
- 33.333333% {
125
- transform: translate(10px, -4.471832px);
126
- }
127
- 40% {
128
- transform: translate(10px, -2.651608px);
129
- }
130
- 53.333333% {
131
- transform: translate(10px, 33.528168px);
132
- }
133
- 60% {
134
- transform: translate(10px, 41.764084px);
135
- }
136
- 66.666667% {
137
- transform: translate(10px, 33.528168px);
138
- }
139
- 100% {
140
- transform: translate(10px, 33.528168px);
141
- }
142
- `,translate2:keyframes`
143
- 0% {
144
- transform: translate(30px, 33.528168px);
145
- }
146
- 13.333333% {
147
- transform: translate(30px, 33.528168px);
148
- }
149
- 20% {
150
- transform: translate(30px, 41.764084px);
151
- }
152
- 26.666667% {
153
- transform: translate(30px, 33.528168px);
154
- }
155
- 40% {
156
- transform: translate(30px, -2.651608px);
157
- }
158
- 46.666667% {
159
- transform: translate(30px, -4.471832px);
160
- }
161
- 53.333333% {
162
- transform: translate(30px, -2.651608px);
163
- }
164
- 66.666667% {
165
- transform: translate(30px, 33.528168px);
166
- }
167
- 73.333333% {
168
- transform: translate(30px, 41.764084px);
169
- }
170
- 80% {
171
- transform: translate(30px, 33.528168px);
172
- }
173
- 100% {
174
- transform: translate(30px, 33.528168px);
175
- }
176
- `,translate3:keyframes`
177
- 0% {
178
- transform: translate(50px, 33.528168px);
179
- }
180
- 26.666667% {
181
- transform: translate(50px, 33.528168px);
182
- }
183
- 33.333333% {
184
- transform: translate(50px, 41.764084px);
185
- }
186
- 40% {
187
- transform: translate(50px, 33.528168px);
188
- }
189
- 53.333333% {
190
- transform: translate(50px, -2.651608px);
191
- }
192
- 60% {
193
- transform: translate(50px, -4.471832px);
194
- }
195
- 66.666667% {
196
- transform: translate(50px, -2.651608px);
197
- }
198
- 80% {
199
- transform: translate(50px, 33.528168px);
200
- }
201
- 86.666667% {
202
- transform: translate(50px, 41.764084px);
203
- }
204
- 93.333333% {
205
- transform: translate(50px, 33.528168px);
206
- }
207
- 100% {
208
- transform: translate(50px, 33.528168px);
209
- }
210
- `};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},
211
- opacity ${o.transitionDurationDefault} ${o.transitionEasingDefault},
212
- 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;
15
+ var Ye=Object.defineProperty,Qe=Object.defineProperties;var Je=Object.getOwnPropertyDescriptors;var Z=Object.getOwnPropertySymbols;var be=Object.prototype.hasOwnProperty,ve=Object.prototype.propertyIsEnumerable;var ue=(e,o,t)=>o in e?Ye(e,o,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[o]=t,p=(e,o)=>{for(var t in o||(o={}))be.call(o,t)&&ue(e,t,o[t]);if(Z)for(var t of Z(o))ve.call(o,t)&&ue(e,t,o[t]);return e},d=(e,o)=>Qe(e,Je(o));var N=(e,o)=>{var t={};for(var r in e)be.call(e,r)&&o.indexOf(r)<0&&(t[r]=e[r]);if(e!=null&&Z)for(var r of Z(e))o.indexOf(r)<0&&ve.call(e,r)&&(t[r]=e[r]);return t};var fe=60;var i={xsmall:"@media (min-width: 576px)",small:"@media (min-width: 867px)",medium:"@media (min-width: 1024px)",large:"@media (min-width: 1200px)",xlarge:"@media (min-width: 1920px)"},W=(e=a.glowPrimary)=>css({"&:focus":{boxShadow:e},"&:focus:not(:focus-visible)":{boxShadow:"unset"},"&:focus-visible":{boxShadow:e}}),B=(e="44px")=>css({overflow:"visible",position:"relative","&:after":{minHeight:e,minWidth:e,position:"absolute",width:"100%",content:'""',left:"50%",top:"50%",transform:"translate(-50%, -50%)"}});var he=({contentMaxWidth:e,variant:o})=>({container:css({justifyContent:"center",backgroundColor:a.gray100,width:"100%"}),logo:css({display:"none",[i.small]:{display:"block",height:"28px",width:"28px"}}),navigation:css({width:"100%",maxWidth:o==="wide"?"1920px":e,padding:`${a.spacingS} ${a.spacingM}`,height:`${60}px`,[i.small]:{padding:`${a.spacingM} ${a.spacingL}`}}),mainNavigation:t=>css({display:"none"},t==="small"?{[i.small]:{display:"flex"}}:{[i.medium]:{display:"flex"}}),mobileNavigationButton:t=>css({display:"flex",minHeight:"initial",height:"36px",padding:"0 12px",borderRadius:"10px"},t==="small"?{[i.small]:{display:"none"}}:{[i.medium]:{display:"none"}}),mobileNavigationIcon:css({heigt:"20px",width:"20px"}),secondaryNavigationWrapper:css({"> *:not(:first-child)":{display:"none",[i.xsmall]:{display:"flex"}}}),promoNavigationWrapper:css({display:"none",[i.large]:{display:"flex"}}),account:css({display:"none",[i.xsmall]:{display:"flex"}})});var Pe=generateComponentWithVariants({variants:{[IconVariant.Active]:generateIconComponent({path:v.createElement(v.Fragment,null,v.createElement("path",{d:"M10.0153 4.76531L6.2653 8.51531C6.23048 8.55018 6.18912 8.57784 6.14359 8.59671C6.09807 8.61558 6.04927 8.62529 5.99999 8.62529C5.95071 8.62529 5.90191 8.61558 5.85639 8.59671C5.81086 8.57784 5.76951 8.55018 5.73468 8.51531L1.98468 4.76531C1.93217 4.71287 1.89641 4.64602 1.88192 4.57324C1.86742 4.50046 1.87485 4.42501 1.90326 4.35645C1.93166 4.28789 1.97977 4.22931 2.0415 4.1881C2.10322 4.1469 2.17578 4.12494 2.24999 4.125H9.74999C9.8242 4.12494 9.89676 4.1469 9.95848 4.1881C10.0202 4.22931 10.0683 4.28789 10.0967 4.35645C10.1251 4.42501 10.1326 4.50046 10.1181 4.57324C10.1036 4.64602 10.0678 4.71287 10.0153 4.76531Z",fill:a.blue300})),viewBox:"0 0 12 12"}),[IconVariant.Default]:generateIconComponent({path:v.createElement(v.Fragment,null,v.createElement("path",{d:"M10.0153 4.76531L6.2653 8.51531C6.23048 8.55018 6.18912 8.57784 6.14359 8.59671C6.09807 8.61558 6.04927 8.62529 5.99999 8.62529C5.95071 8.62529 5.90191 8.61558 5.85639 8.59671C5.81086 8.57784 5.76951 8.55018 5.73468 8.51531L1.98468 4.76531C1.93217 4.71287 1.89641 4.64602 1.88192 4.57324C1.86742 4.50046 1.87485 4.42501 1.90326 4.35645C1.93166 4.28789 1.97977 4.22931 2.0415 4.1881C2.10322 4.1469 2.17578 4.12494 2.24999 4.125H9.74999C9.8242 4.12494 9.89676 4.1469 9.95848 4.1881C10.0202 4.22931 10.0683 4.28789 10.0967 4.35645C10.1251 4.42501 10.1326 4.50046 10.1181 4.57324C10.1036 4.64602 10.0678 4.71287 10.0153 4.76531Z",fill:a.gray400})),viewBox:"0 0 12 12"})}});var Se=generateIconComponent({name:"ContentfulLogoIcon",viewBox:"0 0 28 28",path:v.createElement(v.Fragment,null,v.createElement("path",{fill:"#1773EB",d:"M10.713 5.001c.845.843 1.167 2.079.845 3.228A6.663 6.663 0 0 1 15 7.276h.026a6.7 6.7 0 0 1 4.743 1.988 2.64 2.64 0 1 0 3.746-3.715A11.96 11.96 0 0 0 15.042 2h-.046a11.933 11.933 0 0 0-6.691 2.036h.074a3.287 3.287 0 0 1 2.334.967V5Z"}),v.createElement("path",{fill:"#E44F20",d:"M21.594 17.999a2.64 2.64 0 0 0-1.858.766 6.703 6.703 0 0 1-4.732 1.951h-.025a6.65 6.65 0 0 1-3.447-.968A3.3 3.3 0 0 1 8.35 23.93h-.086A11.926 11.926 0 0 0 14.96 26h.046a11.94 11.94 0 0 0 8.449-3.484 2.64 2.64 0 0 0-1.859-4.514V18h-.002Z"}),v.createElement("path",{fill:"#FFDA00",d:"M6.013 18.295a3.27 3.27 0 0 1 2.334-.967c.302 0 .603.04.894.122a6.7 6.7 0 0 1 .013-6.928A3.3 3.3 0 0 1 5.08 7.335v-.09a11.999 11.999 0 0 0-.032 13.453v-.07a3.27 3.27 0 0 1 .966-2.333Z"}),v.createElement("path",{fill:"#1773EB",d:"M8.379 4.62c-.75 0-1.276.312-1.913.949-.607.605-.798 1.135-.8 1.766A2.712 2.712 0 1 0 8.38 4.62Z"}),v.createElement("path",{fill:"#E44F20",d:"M5.628 20.631c0 .75.31 1.276.946 1.912.607.606 1.136.799 1.766.8a2.703 2.703 0 1 0-.017-5.407 2.703 2.703 0 0 0-2.695 2.704v-.009Z"}))});var Me=()=>({menuList:css({minWidth:0,[i.xsmall]:{minWidth:"250px"}})});var $=e=>{let{trigger:o,children:t,testId:r="cf-ui-navbar-menu-list",onOpen:n,onClose:s}=e,l=Me();return v.createElement(Menu,{onOpen:n,onClose:s},v.createElement(Menu.Trigger,null,o),v.createElement(Menu.List,{className:l.menuList,testId:r},t))};function io(e,o){let C=e,{logo:t,promotions:r,switcher:n,mainNavigation:s,secondaryNavigation:l,account:c,mobileNavigation:g,mobileNavigationProps:u={breakpoint:"small",label:"Menu"},className:x,contentMaxWidth:A="100%",testId:b="cf-ui-navbar",variant:P="wide",aria:S={labelMainNavigation:"Main Navigation",labelSecondaryNavigation:"Secondary Navigation",labelPromotions:"Promotions",labelAccount:"Account Navigation"}}=C,q=N(C,["logo","promotions","switcher","mainNavigation","secondaryNavigation","account","mobileNavigation","mobileNavigationProps","className","contentMaxWidth","testId","variant","aria"]),y=he({contentMaxWidth:A,variant:P});return v.createElement(Flex,d(p({},q),{ref:o,testId:b,className:cx(y.container,x),as:"header"}),v.createElement(Flex,{as:"nav",className:y.navigation,justifyContent:"space-between",gap:"spacingXs"},v.createElement(Flex,{alignItems:"center",gap:"spacingL"},t||v.createElement(Se,{className:y.logo}),g&&v.createElement($,{trigger:v.createElement(Button,{className:y.mobileNavigationButton(u.breakpoint),startIcon:v.createElement(ListIcon,{size:"medium"})},u.label)},g),s&&v.createElement(Flex,{className:y.mainNavigation(u.breakpoint),"aria-label":S.labelMainNavigation,gap:"spacingXs"},s)),v.createElement(Flex,{alignItems:"center",gap:"spacingXs"},v.createElement(Flex,{alignItems:"center",className:y.promoNavigationWrapper,"aria-label":S.labelPromotions,gap:"spacingXs"},r),v.createElement(Flex,{alignItems:"center"},n),v.createElement(Flex,{alignItems:"center",gap:"spacingXs"},l&&v.createElement(Flex,{className:y.secondaryNavigationWrapper,"aria-label":S.labelSecondaryNavigation,gap:"spacingXs"},l),c&&v.createElement(Flex,{className:y.account,"aria-label":S.labelAccount,gap:"spacingXs"},c)))))}var we=v.forwardRef(io);var so={warning:a.colorWarning,negative:a.colorNegative,info:a.blue500},Ce=()=>({navbarAccount:css({cursor:"pointer",background:"none",position:"relative",outline:"none",overflow:"visible",borderRadius:"50%",border:"none",padding:0,"&:hover img":{filter:"brightness(0.9)"}},W(),B()),notificationIcon:e=>css({position:"absolute",top:0,right:0,height:a.spacingS,width:a.spacingS,borderRadius:"50%",border:`2px solid ${a.gray100}`,backgroundColor:so[e],transform:"translate(30%, -30%)",zIndex:1})});function go(e,o){let P=e,{children:t,className:r,testId:n="cf-ui-navbar-account-trigger",avatar:s,label:l="Account menu",initials:c,username:g,hasNotification:u,notificationVariant:x="warning"}=P,A=N(P,["children","className","testId","avatar","label","initials","username","hasNotification","notificationVariant"]),b=Ce();return v.createElement($,{trigger:v.createElement("div",null,v.createElement(Tooltip,{placement:"bottom",content:l,showDelay:600,usePortal:!0},v.createElement(Flex,d(p({as:"button"},A),{ref:o,className:cx(b.navbarAccount,r),testId:n,alignItems:"center","aria-label":l}),v.createElement(Avatar,{src:s,initials:c,size:"small",variant:"user"}),u?v.createElement("span",{className:b.notificationIcon(x)}):null)))},t)}var oe=v.forwardRef(go);function te({ariaLabel:e}){return v.createElement(SkeletonContainer,{svgWidth:24,svgHeight:24,ariaLabel:e,backgroundColor:a.gray300,foregroundColor:a.gray200},v.createElement(SkeletonImage,{width:24,height:24,radiusX:12,radiusY:12}))}var G="1px",re=()=>css({backgroundColor:a.blue100,border:`${G} solid ${a.blue400}`,color:a.blue600,"&:focus,&:hover":{backgroundColor:a.blue100}}),vo=()=>css({border:"none",opacity:.5,pointerEvents:"none"}),Te={display:"flex",justifyContent:"center",padding:`calc(${a.spacing2Xs} - ${G}) calc(${a.spacingXs} - ${G})`,alignItems:"center",background:"none",gap:a.spacing2Xs},Le=({hasTitle:e})=>({navbarItem:css(Te,{appearance:"none",background:"none",outline:"none",border:`${G} solid transparent`,margin:0,fontSize:a.fontSizeM,lineHeight:a.lineHeightM,fontWeight:a.fontWeightMedium,position:"relative",textAlign:"left",whiteSpace:"nowrap",cursor:"pointer",hyphens:"auto",textDecoration:"none",color:a.gray800,boxSizing:"border-box",transition:`color ${a.transitionDurationShort} ${a.transitionEasingCubicBezier}`,borderRadius:a.borderRadiusMedium,height:"30px",padding:e?`${a.spacing2Xs} ${a.spacingXs}`:`calc(${a.spacing2Xs} - ${G})`,"&:focus, &:hover":{backgroundColor:a.gray200},"&:active":re(),"&:disabled":{cursor:"auto"},"& svg":{transition:`fill ${a.transitionDurationShort} ${a.transitionEasingCubicBezier}`},"& > svg, & > span":{zIndex:a.zIndexDefault}},W(),B()),isActive:re(),isDisabled:vo(),icon:css({height:"20px",width:"20px",boxSizing:"content-box",display:e?"none":"block",[i.small]:{height:"16px",width:"16px",padding:e?"2px 0":"2px"},[i.large]:{display:"block"}})}),We=()=>({itemSkeleton:css(Te)});var Be=()=>({navbarItemIcon:css({"&:last-child&:not(:only-child)":{marginLeft:a.spacing2Xs},"img&":{borderRadius:a.borderRadiusSmall,maxWidth:a.spacingM,maxHeight:a.spacingM}})});var T=({icon:e,isActive:o,className:t})=>{let c=e.props,{className:r,size:n}=c,s=N(c,["className","size"]),l=Be();return v.cloneElement(e,p({className:cx(r,l.navbarItemIcon,t),size:n||"small",isActive:o},s))};var _e="button";function Io(e,o){let ge=e,{as:t=_e,icon:r,label:n,title:s,children:l,className:c,isActive:g,isDisabled:u,testId:x="cf-ui-navbar-item",onOpen:A,onClose:b}=ge,P=N(ge,["as","icon","label","title","children","className","isActive","isDisabled","testId","onOpen","onClose"]),S=Le({hasTitle:!!s}),q=Po(e),y=s&&q,C=v.createElement(t,p(p(d(p({},P),{ref:o,"data-test-id":x,className:cx(S.navbarItem,c,{[S.isActive]:g&&!u,[S.isDisabled]:u})}),!s&&{"aria-label":n}),u&&(t===_e?{disabled:!0}:{tabIndex:-1,"aria-disabled":!0})),r&&v.createElement(T,{className:S.icon,icon:r,isActive:g}),s&&v.createElement("span",null,s),y&&v.createElement(Pe,{size:"tiny",isActive:g}));return s||(C=v.createElement("div",null,v.createElement(Tooltip,{content:n,placement:"bottom",showDelay:600,usePortal:!0},C))),q?v.createElement($,{trigger:C,testId:x,onOpen:A,onClose:b},l):C}var Po=e=>!!e.children,ae=v.forwardRef(Io);var ne=({estimatedWidth:e})=>{let o=We();return v.createElement(SkeletonContainer,{className:o.itemSkeleton,svgWidth:e,svgHeight:28,backgroundColor:a.gray300,foregroundColor:a.gray200},v.createElement(SkeletonText,{lineHeight:18,numberOfLines:1,offsetTop:2,radiusX:a.borderRadiusSmall,radiusY:a.borderRadiusSmall}))};var Fe=()=>({navbarMenuItem:css({display:"flex",justifyContent:"flex-start",alignItems:"center"})});var Eo="button";function To(e,o){let u=e,{as:t=Eo,icon:r,title:n,className:s}=u,l=N(u,["as","icon","title","className"]),c=Fe(),g=Lo(e);return v.createElement(Menu.Item,d(p({},l),{ref:o,as:t,className:cx(c.navbarMenuItem,s)}),r?v.createElement(T,{icon:r}):g&&He,v.createElement("span",null,n),r&&g?He:null)}var He=v.createElement(T,{icon:v.createElement(ArrowSquareOutIcon,null)}),Lo=e=>e.as==="a"&&e.target==="_blank",ie=v.forwardRef(To);var se=({ariaLabel:e})=>v.createElement(Menu.Item,null,v.createElement(Flex,{alignItems:"center",gap:a.spacingXs},v.createElement(SkeletonContainer,{svgHeight:16,svgWidth:18},v.createElement(SkeletonImage,{width:16,height:16})),v.createElement(SkeletonContainer,{svgHeight:16,svgWidth:190,ariaLabel:e},v.createElement(SkeletonBodyText,{numberOfLines:1}))));var V=1,Ve=e=>({navbarSwitcher:({showSpaceEnv:o})=>css({color:a.gray600,flexShrink:1,fontWeight:a.fontWeightMedium,maxWidth:"50vw",minHeight:"unset",padding:`${a.spacing2Xs} ${a.spacingXs}`,"&:hover":{backgroundColor:hexToRGBA(a.gray900,.05)},[i.xsmall]:{maxWidth:"45vw"},[i.medium]:{maxWidth:"35vw"},[i.large]:{maxWidth:"25vw"},[i.xlarge]:{maxWidth:"600px"}},o&&Oo(e),W(),B()),switcherWrapper:({showSpaceEnv:o})=>css({gap:a.spacingXs,alignItems:"center",minWidth:0,"&:has(> span:last-child:nth-child(3))":{minWidth:"12ch"},"&:before":css(d(p({content:'""',position:"absolute",display:"block",width:`calc(8px - ${V}px)`,height:o?"26px":"unset",borderTopLeftRadius:`calc(${a.borderRadiusMedium} - ${V}px)`,borderBottomLeftRadius:`calc(${a.borderRadiusMedium} - ${V}px)`},Vo(e)),{backgroundPosition:"bottom"}))}),switcherLabelWrapper:css({height:"26px",paddingLeft:`calc(${a.spacingXs} * 2)`,alignItems:"center",gap:a.spacing2Xs,maxWidth:"100%"}),switcherLabel:css({color:"currentcolor",fontWeight:"inherit",lineHeight:"unset",display:"inline-block",flexShrink:1,minWidth:"0",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}),switcherCaret:css({flexShrink:0,minWidth:0}),switcherEnvIcon:css({minWidth:"0",[i.small]:{width:"16px",height:"16px"}})}),De=e=>{switch(e){case"trial":return a.purple700;case"non-master":return a.orange700;default:return a.green700}},Oo=e=>{let o={padding:"0",paddingRight:a.spacingXs};switch(e){case"trial":return d(p({},o),{color:a.purple700,backgroundColor:a.purple100,border:`${V}px solid ${a.purple400}`,"&:hover, &:active":{backgroundColor:a.purple200}});case"non-master":return d(p({},o),{color:a.orange700,backgroundColor:a.orange100,border:`${V}px solid ${a.orange400}`,"&:hover, &:active":{backgroundColor:a.orange200}});default:return d(p({},o),{color:a.green700,backgroundColor:a.green100,border:`${V}px solid ${a.green400}`,"&:hover, &:active":{backgroundColor:a.green200}})}},Vo=e=>{switch(e){case"trial":return {background:a.purple300};case"non-master":return {background:`linear-gradient(
16
+ -45deg,
17
+ ${a.orange300} 28.57%,
18
+ transparent 28.57%,
19
+ transparent 50%,
20
+ ${a.orange300} 50%,
21
+ ${a.orange300} 78.57%,
22
+ transparent 78.57%,
23
+ transparent 100%
24
+ )`,backgroundSize:"9px 9px"};default:return {background:a.green300}}};function Re({isAlias:e,envVariant:o,className:t}){if(o==="trial")return v.createElement(FlaskIcon,{color:a.purple700,className:t,size:"medium"});let r=o==="master",n=r?a.green700:a.orange700;return r?v.createElement(RocketLaunchIcon,{color:n,className:t,size:"medium"}):e?v.createElement(EnvironmentAliasIcon,{color:n,className:t,size:"medium"}):v.createElement(EnvironmentIcon,{color:n,className:t,size:"medium"})}var U=({estimatedWidth:e})=>v.createElement(SkeletonContainer,{svgWidth:e,svgHeight:18,backgroundColor:a.gray300,foregroundColor:a.gray200},v.createElement(SkeletonText,{lineHeight:18,numberOfLines:1,radiusX:a.borderRadiusSmall,radiusY:a.borderRadiusSmall}));function Yo(e,o){let P=e,{children:t,className:r,envVariant:n,isAlias:s,testId:l="cf-ui-navbar-switcher",ariaLabel:c="Space and Environment Navigation",space:g,environment:u,isLoading:x}=P,A=N(P,["children","className","envVariant","isAlias","testId","ariaLabel","space","environment","isLoading"]),b=Ve(n);return v.createElement(Button,d(p({},A),{"aria-label":c,className:cx(b.navbarSwitcher({showSpaceEnv:!x&&!t}),r),endIcon:n&&v.createElement(Re,{envVariant:n,isAlias:s,className:b.switcherEnvIcon}),ref:o,testId:l,variant:"transparent"}),v.createElement(Flex,{className:b.switcherWrapper({showSpaceEnv:!x&&!t})},x?v.createElement(U,{estimatedWidth:148}):v.createElement(v.Fragment,null,t?v.createElement(Text,{className:b.switcherLabel},t):v.createElement(Flex,{className:b.switcherLabelWrapper},v.createElement(Text,{className:b.switcherLabel},g),u&&v.createElement(v.Fragment,null,v.createElement(Flex,{className:b.switcherCaret},v.createElement(CaretRightIcon,{size:"tiny",color:De(n)})),v.createElement(Text,{className:b.switcherLabel},u))))))}var ce=v.forwardRef(Yo);var ze=()=>({navbarBadge:css({display:"flex",justifyContent:"center",alignItems:"center",background:"none",border:`1px solid ${a.purple600}`,margin:0,outline:"none",fontSize:a.fontSizeS,lineHeight:a.lineHeightS,fontWeight:a.fontWeightMedium,textAlign:"center",padding:`0 ${a.spacingXs}`,textDecoration:"none",color:`${a.purple600}!important`,borderRadius:"1.75rem",userSelect:"none"})});var Ko="div";function et(e,o){let g=e,{as:t=Ko,children:r,className:n,testId:s="cf-ui-navbar-badge"}=g,l=N(g,["as","children","className","testId"]),c=ze();return v.createElement(t,d(p({},l),{ref:o,className:cx(c.navbarBadge,n),"data-test-id":s}),r)}var Ue=v.forwardRef(et);var Ze=()=>({navbarMenuItem:css({display:"flex",justifyContent:"flex-start",alignItems:"center",gap:a.spacingXs}),menuList:css({minWidth:0,marginLeft:"-24px",marginTop:"10px",[i.xsmall]:{minWidth:"250px",margin:0}})});var je=e=>{let{title:o,icon:t,children:r,testId:n="cf-ui-navbar-submenu-list",onOpen:s,onClose:l}=e,c=Ze();return v.createElement(Menu.Submenu,{onOpen:s,onClose:l},v.createElement(Menu.SubmenuTrigger,null,v.createElement(Flex,{className:c.navbarMenuItem},t&&v.createElement(T,{icon:t}),v.createElement("span",null,o))),v.createElement(Menu.List,{className:c.menuList,testId:n},r))};var h=we;h.Item=ae;h.ItemSkeleton=ne;h.MenuItem=ie;h.MenuItemSkeleton=se;h.MenuDivider=MenuDivider;h.MenuSectionTitle=MenuSectionTitle;h.Submenu=je;h.Switcher=ce;h.SwitcherSkeleton=U;h.Account=oe;h.AccountSkeleton=te;h.Badge=Ue;
213
25
 
214
- export { y as Navbar, ir as getNavbarItemActiveStyles };
26
+ export { fe as NAVBAR_HEIGHT, h as Navbar, re as getNavbarItemActiveStyles, i as navbarMediaQueries };
215
27
  //# sourceMappingURL=out.js.map
216
28
  //# sourceMappingURL=index.js.map