@contentful/f36-navbar 5.0.0-alpha.9 → 5.1.0
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.
- package/README.mdx +83 -45
- package/dist/esm/index.js +22 -210
- package/dist/esm/index.js.map +1 -1
- package/dist/index.d.mts +110 -65
- package/dist/index.d.ts +110 -65
- package/dist/index.js +24 -210
- package/dist/index.js.map +1 -1
- package/package.json +12 -9
package/dist/index.d.ts
CHANGED
|
@@ -1,79 +1,114 @@
|
|
|
1
1
|
import { MenuListProps, MenuProps, MenuItemProps, MenuDivider, MenuSectionTitle } from '@contentful/f36-menu';
|
|
2
|
-
import { CommonProps, PolymorphicComponent, ExpandProps } from '@contentful/f36-core';
|
|
2
|
+
import { CommonProps, PolymorphicComponent, ExpandProps, PropsWithHTMLElement } from '@contentful/f36-core';
|
|
3
3
|
import React from 'react';
|
|
4
4
|
import { IconProps } from '@contentful/f36-icons';
|
|
5
5
|
|
|
6
|
+
declare const NAVBAR_HEIGHT = 60;
|
|
7
|
+
|
|
6
8
|
declare type NavbarOwnProps = CommonProps & {
|
|
7
|
-
account?: React.ReactNode;
|
|
8
|
-
badge?: React.ReactNode;
|
|
9
9
|
/**
|
|
10
|
-
*
|
|
11
|
-
*
|
|
10
|
+
* Accepts a React Component that will be displayed
|
|
11
|
+
* instead of the Contentful Logo
|
|
12
12
|
*/
|
|
13
|
-
|
|
14
|
-
|
|
13
|
+
logo?: React.ReactNode;
|
|
14
|
+
/** Promotions component, displayed on most left side */
|
|
15
|
+
promotions?: React.ReactNode;
|
|
16
|
+
/** Environment Switcher component */
|
|
17
|
+
switcher?: React.ReactNode;
|
|
18
|
+
/** Main Navigation Elements */
|
|
19
|
+
mainNavigation?: React.ReactNode;
|
|
20
|
+
/** Secondary Navigation Elements, displayed in the right side */
|
|
21
|
+
secondaryNavigation?: React.ReactNode;
|
|
22
|
+
/** User Account Component */
|
|
23
|
+
account?: React.ReactNode;
|
|
24
|
+
/** Navigation displayed on mobile versions */
|
|
25
|
+
mobileNavigation?: React.ReactNode;
|
|
26
|
+
mobileNavigationProps?: {
|
|
27
|
+
/** breakpoint to determine when to show the mobile navigation */
|
|
28
|
+
breakpoint?: 'small' | 'medium';
|
|
29
|
+
/**
|
|
30
|
+
* label of the mobile navigation trigger button
|
|
31
|
+
* @default 'Menu'
|
|
32
|
+
*/
|
|
33
|
+
label?: string;
|
|
34
|
+
};
|
|
15
35
|
/**
|
|
16
36
|
* Defines the max-width of the content inside the navbar.
|
|
17
37
|
* @default '100%'
|
|
18
38
|
*/
|
|
19
39
|
contentMaxWidth?: string;
|
|
20
|
-
help?: React.ReactNode;
|
|
21
40
|
/**
|
|
22
|
-
*
|
|
41
|
+
* Describes the size variation of the Navbar
|
|
42
|
+
* Variant wide will set the contentMaxWidth to 1524px
|
|
23
43
|
*/
|
|
24
|
-
|
|
25
|
-
search?: React.ReactNode;
|
|
26
|
-
switcher?: React.ReactNode;
|
|
27
|
-
/**
|
|
28
|
-
* Items that will be rendered on the top-right of the navbar.
|
|
29
|
-
* Useful for providing additional context or actions to the user (e.g. a Feedback form link).
|
|
30
|
-
*/
|
|
31
|
-
topRightItems?: React.ReactNode;
|
|
44
|
+
variant?: 'wide' | 'fullscreen';
|
|
32
45
|
/**
|
|
33
|
-
*
|
|
46
|
+
* aria labels for different areas of the navigation bar
|
|
34
47
|
*/
|
|
35
|
-
|
|
48
|
+
aria?: {
|
|
49
|
+
labelMainNavigation?: string;
|
|
50
|
+
labelSecondaryNavigation?: string;
|
|
51
|
+
labelPromotions?: string;
|
|
52
|
+
labelAccount?: string;
|
|
53
|
+
};
|
|
36
54
|
};
|
|
37
55
|
declare type NavbarHTMLElementProps = Pick<React.ComponentPropsWithoutRef<'div'>, 'id'>;
|
|
38
56
|
declare type NavbarProps = NavbarHTMLElementProps & NavbarOwnProps;
|
|
39
57
|
declare const Navbar$1: React.ForwardRefExoticComponent<NavbarHTMLElementProps & CommonProps & {
|
|
40
|
-
account?: React.ReactNode;
|
|
41
|
-
badge?: React.ReactNode;
|
|
42
58
|
/**
|
|
43
|
-
*
|
|
44
|
-
*
|
|
59
|
+
* Accepts a React Component that will be displayed
|
|
60
|
+
* instead of the Contentful Logo
|
|
45
61
|
*/
|
|
46
|
-
|
|
47
|
-
|
|
62
|
+
logo?: React.ReactNode;
|
|
63
|
+
/** Promotions component, displayed on most left side */
|
|
64
|
+
promotions?: React.ReactNode;
|
|
65
|
+
/** Environment Switcher component */
|
|
66
|
+
switcher?: React.ReactNode;
|
|
67
|
+
/** Main Navigation Elements */
|
|
68
|
+
mainNavigation?: React.ReactNode;
|
|
69
|
+
/** Secondary Navigation Elements, displayed in the right side */
|
|
70
|
+
secondaryNavigation?: React.ReactNode;
|
|
71
|
+
/** User Account Component */
|
|
72
|
+
account?: React.ReactNode;
|
|
73
|
+
/** Navigation displayed on mobile versions */
|
|
74
|
+
mobileNavigation?: React.ReactNode;
|
|
75
|
+
mobileNavigationProps?: {
|
|
76
|
+
/** breakpoint to determine when to show the mobile navigation */
|
|
77
|
+
breakpoint?: 'small' | 'medium';
|
|
78
|
+
/**
|
|
79
|
+
* label of the mobile navigation trigger button
|
|
80
|
+
* @default 'Menu'
|
|
81
|
+
*/
|
|
82
|
+
label?: string;
|
|
83
|
+
};
|
|
48
84
|
/**
|
|
49
85
|
* Defines the max-width of the content inside the navbar.
|
|
50
86
|
* @default '100%'
|
|
51
87
|
*/
|
|
52
88
|
contentMaxWidth?: string;
|
|
53
|
-
help?: React.ReactNode;
|
|
54
|
-
/**
|
|
55
|
-
* Will be displayed instead of the default Contentful logo
|
|
56
|
-
*/
|
|
57
|
-
logo?: React.ReactNode;
|
|
58
|
-
search?: React.ReactNode;
|
|
59
|
-
switcher?: React.ReactNode;
|
|
60
89
|
/**
|
|
61
|
-
*
|
|
62
|
-
*
|
|
90
|
+
* Describes the size variation of the Navbar
|
|
91
|
+
* Variant wide will set the contentMaxWidth to 1524px
|
|
63
92
|
*/
|
|
64
|
-
|
|
93
|
+
variant?: 'wide' | 'fullscreen';
|
|
65
94
|
/**
|
|
66
|
-
*
|
|
95
|
+
* aria labels for different areas of the navigation bar
|
|
67
96
|
*/
|
|
68
|
-
|
|
97
|
+
aria?: {
|
|
98
|
+
labelMainNavigation?: string;
|
|
99
|
+
labelSecondaryNavigation?: string;
|
|
100
|
+
labelPromotions?: string;
|
|
101
|
+
labelAccount?: string;
|
|
102
|
+
};
|
|
69
103
|
} & React.RefAttributes<HTMLElement>>;
|
|
70
104
|
|
|
71
|
-
declare const NavbarAccount: React.ForwardRefExoticComponent<Omit<Omit<Pick<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof React.ButtonHTMLAttributes<HTMLButtonElement>>, never>, "children" | keyof CommonProps | "username" | "avatar" | "initials" | "hasNotification" | "notificationVariant"> & CommonProps & {
|
|
105
|
+
declare const NavbarAccount: React.ForwardRefExoticComponent<Omit<Omit<Pick<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof React.ButtonHTMLAttributes<HTMLButtonElement>>, never>, "label" | "children" | keyof CommonProps | "username" | "avatar" | "initials" | "hasNotification" | "notificationVariant"> & CommonProps & {
|
|
72
106
|
children: React.ReactNode;
|
|
73
107
|
username: string;
|
|
74
108
|
avatar?: string;
|
|
75
109
|
initials?: string;
|
|
76
110
|
hasNotification?: boolean;
|
|
111
|
+
label?: string;
|
|
77
112
|
/**
|
|
78
113
|
* @default 'warning'
|
|
79
114
|
*/
|
|
@@ -91,14 +126,17 @@ declare type NavbarMenuProps = {
|
|
|
91
126
|
|
|
92
127
|
declare type NavbarItemIconProps = {
|
|
93
128
|
icon: React.ReactElement<IconProps>;
|
|
94
|
-
|
|
129
|
+
className?: string;
|
|
130
|
+
} & Partial<Pick<IconProps, 'isActive'>>;
|
|
95
131
|
|
|
96
132
|
declare const NAVBAR_ITEM_DEFAULT_TAG = "button";
|
|
97
133
|
declare type NavbarItemTriggerProps = CommonProps & {
|
|
98
|
-
|
|
134
|
+
label?: string;
|
|
135
|
+
title?: string;
|
|
99
136
|
icon?: NavbarItemIconProps['icon'];
|
|
100
137
|
isActive?: boolean;
|
|
101
138
|
as?: React.ElementType;
|
|
139
|
+
isDisabled?: boolean;
|
|
102
140
|
};
|
|
103
141
|
declare type NavbarItemAsMenuProps = NavbarItemTriggerProps & Pick<NavbarMenuProps, 'onOpen' | 'onClose'> & {
|
|
104
142
|
children: React.ReactNode;
|
|
@@ -128,37 +166,43 @@ declare const NavbarMenuItemSkeleton: ({ ariaLabel, }: {
|
|
|
128
166
|
ariaLabel?: string;
|
|
129
167
|
}) => JSX.Element;
|
|
130
168
|
|
|
131
|
-
declare
|
|
169
|
+
declare type EnvVariant = 'master' | 'non-master' | 'trial';
|
|
170
|
+
declare type NavbarLoadingProps = {
|
|
171
|
+
isLoading?: true;
|
|
172
|
+
children?: React.ReactNode;
|
|
173
|
+
environment?: never;
|
|
174
|
+
space?: never;
|
|
175
|
+
} | {
|
|
176
|
+
isLoading?: false;
|
|
177
|
+
children?: never;
|
|
178
|
+
environment?: string;
|
|
179
|
+
space?: string;
|
|
180
|
+
};
|
|
181
|
+
declare type NavbarSwitcherOwnProps = CommonProps & NavbarLoadingProps & {
|
|
182
|
+
envVariant?: EnvVariant;
|
|
183
|
+
isAlias?: boolean;
|
|
184
|
+
ariaLabel?: string;
|
|
185
|
+
};
|
|
186
|
+
declare type NavbarSwitcherProps = PropsWithHTMLElement<NavbarSwitcherOwnProps, 'button'>;
|
|
187
|
+
declare const NavbarSwitcher: React.ForwardRefExoticComponent<NavbarSwitcherProps & React.RefAttributes<HTMLButtonElement>>;
|
|
132
188
|
|
|
133
189
|
declare const NavbarSwitcherSkeleton: ({ estimatedWidth, }: {
|
|
134
190
|
estimatedWidth: number;
|
|
135
191
|
}) => JSX.Element;
|
|
136
192
|
|
|
137
|
-
declare const
|
|
138
|
-
|
|
139
|
-
declare const NavbarSwitcherItem: React.ForwardRefExoticComponent<Omit<Omit<Pick<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "key" | keyof React.LiHTMLAttributes<HTMLLIElement>>, never>, "children" | keyof CommonProps | "isCircle" | "envVariant" | "isAlias"> & CommonProps & {
|
|
140
|
-
children?: React.ReactNode;
|
|
141
|
-
isCircle?: boolean;
|
|
142
|
-
envVariant?: 'master' | 'non-master';
|
|
143
|
-
isAlias?: boolean;
|
|
144
|
-
} & React.RefAttributes<HTMLLIElement>>;
|
|
145
|
-
|
|
146
|
-
declare const NavbarHelp: React.ForwardRefExoticComponent<Omit<Omit<Pick<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof React.ButtonHTMLAttributes<HTMLButtonElement>>, never>, "children" | keyof CommonProps> & CommonProps & {
|
|
147
|
-
children: React.ReactNode;
|
|
148
|
-
} & React.RefAttributes<HTMLButtonElement>>;
|
|
149
|
-
|
|
150
|
-
declare const NAVBAR_BADGE_DEFAULT_TAG$1 = "div";
|
|
193
|
+
declare const NAVBAR_BADGE_DEFAULT_TAG = "div";
|
|
151
194
|
declare type NavbarBadgeOwnProps = CommonProps & {
|
|
152
195
|
children?: React.ReactNode;
|
|
153
196
|
as?: React.ElementType;
|
|
154
197
|
};
|
|
155
|
-
declare const NavbarBadge: PolymorphicComponent<ExpandProps<NavbarBadgeOwnProps>, typeof NAVBAR_BADGE_DEFAULT_TAG
|
|
198
|
+
declare const NavbarBadge: PolymorphicComponent<ExpandProps<NavbarBadgeOwnProps>, typeof NAVBAR_BADGE_DEFAULT_TAG>;
|
|
156
199
|
|
|
157
|
-
declare
|
|
158
|
-
|
|
200
|
+
declare type NavbarSubmenuProps = {
|
|
201
|
+
title: string;
|
|
202
|
+
icon?: NavbarItemIconProps['icon'];
|
|
159
203
|
children?: React.ReactNode;
|
|
160
|
-
}
|
|
161
|
-
declare const
|
|
204
|
+
} & Pick<MenuListProps, 'testId'> & Pick<MenuProps, 'onOpen' | 'onClose'>;
|
|
205
|
+
declare const NavbarSubmenu: (props: NavbarSubmenuProps) => JSX.Element;
|
|
162
206
|
|
|
163
207
|
declare type CompoundNavbar = typeof Navbar$1 & {
|
|
164
208
|
Item: typeof NavbarItem;
|
|
@@ -167,18 +211,19 @@ declare type CompoundNavbar = typeof Navbar$1 & {
|
|
|
167
211
|
MenuItemSkeleton: typeof NavbarMenuItemSkeleton;
|
|
168
212
|
MenuDivider: typeof MenuDivider;
|
|
169
213
|
MenuSectionTitle: typeof MenuSectionTitle;
|
|
214
|
+
Submenu: typeof NavbarSubmenu;
|
|
170
215
|
Switcher: typeof NavbarSwitcher;
|
|
171
216
|
SwitcherSkeleton: typeof NavbarSwitcherSkeleton;
|
|
172
|
-
SwitcherItem: typeof NavbarSwitcherItem;
|
|
173
|
-
Search: typeof NavbarSearch;
|
|
174
|
-
Help: typeof NavbarHelp;
|
|
175
217
|
Account: typeof NavbarAccount;
|
|
176
218
|
AccountSkeleton: typeof NavbarAccountSkeleton;
|
|
177
219
|
Badge: typeof NavbarBadge;
|
|
178
|
-
TopbarItem: typeof NavbarTopbarItem;
|
|
179
220
|
};
|
|
180
221
|
declare const Navbar: CompoundNavbar;
|
|
181
222
|
|
|
182
223
|
declare const getNavbarItemActiveStyles: () => string;
|
|
183
224
|
|
|
184
|
-
|
|
225
|
+
declare type screens = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
|
|
226
|
+
declare type mediaqueries = Record<screens, string>;
|
|
227
|
+
declare const mqs: mediaqueries;
|
|
228
|
+
|
|
229
|
+
export { NAVBAR_HEIGHT, Navbar, NavbarProps, getNavbarItemActiveStyles, mqs as navbarMediaQueries };
|
package/dist/index.js
CHANGED
|
@@ -2,223 +2,37 @@
|
|
|
2
2
|
|
|
3
3
|
var f36Menu = require('@contentful/f36-menu');
|
|
4
4
|
var f36Core = require('@contentful/f36-core');
|
|
5
|
-
var
|
|
5
|
+
var v = require('react');
|
|
6
6
|
var emotion = require('emotion');
|
|
7
|
-
var
|
|
8
|
-
var
|
|
9
|
-
var
|
|
7
|
+
var a = require('@contentful/f36-tokens');
|
|
8
|
+
var f36Icon = require('@contentful/f36-icon');
|
|
9
|
+
var f36Button = require('@contentful/f36-button');
|
|
10
|
+
var f36Icons = require('@contentful/f36-icons');
|
|
10
11
|
var f36Avatar = require('@contentful/f36-avatar');
|
|
12
|
+
var f36Tooltip = require('@contentful/f36-tooltip');
|
|
11
13
|
var f36Skeleton = require('@contentful/f36-skeleton');
|
|
12
|
-
var
|
|
14
|
+
var f36Utils = require('@contentful/f36-utils');
|
|
15
|
+
var f36Typography = require('@contentful/f36-typography');
|
|
13
16
|
|
|
14
17
|
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
15
18
|
|
|
16
|
-
var
|
|
17
|
-
var
|
|
19
|
+
var v__default = /*#__PURE__*/_interopDefault(v);
|
|
20
|
+
var a__default = /*#__PURE__*/_interopDefault(a);
|
|
18
21
|
|
|
19
|
-
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__default.default.glowPrimary)=>({"&:focus":{boxShadow:e},"&:focus:not(:focus-visible)":{boxShadow:"unset"},"&:focus-visible":{boxShadow:e}});var Ge=(e,r)=>({containerTop:emotion.css({justifyContent:"center",backgroundColor:o__default.default.gray100}),containerBottom:emotion.css({justifyContent:"center",backgroundColor:o__default.default.gray100}),containerTopContent:emotion.css({width:"100%",maxWidth:r==="wide"?"1524px":e,padding:o__default.default.spacingXs,minHeight:o__default.default.spacingL,[M.medium]:{padding:`${o__default.default.spacingXs} 20px`}}),containerBottomContent:emotion.css({width:"100%",maxWidth:r==="wide"?"1524px":e,padding:0,paddingTop:o__default.default.spacing2Xs,minHeight:"2.5rem",overflow:"auto",[M.medium]:{padding:`${o__default.default.spacing2Xs} ${o__default.default.spacingXs}`}}),logo:emotion.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__default.default.gray600,negative:o__default.default.red600,positive:o__default.default.green600,primary:o__default.default.blue600,secondary:o__default.default.gray900,warning:o__default.default.colorWarning,white:o__default.default.colorWhite,premium:o__default.default.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:emotion.cx(emotion.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__default.default.createElement(f36Core.Box,ve(k(k(k({display:"inline-block"},P),x),I),{as:a})):u__default.default.createElement(f36Core.Box,k(ve(k(k({viewBox:h,display:"inline-block"},P),x),{as:nt}),I),i)}var pt=u.forwardRef(lt);function T({name:e,path:r,props:t,trimmed:a,viewBox:i}){let n=function(s){return u__default.default.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__default.default.createElement("path",{d:"M11.994 6.526A5.47 5.47 0 0 0 6.526 12a5.47 5.47 0 0 0 5.468 5.473A5.476 5.476 0 0 0 17.473 12a5.477 5.477 0 0 0-5.479-5.474ZM12 15.447a3.448 3.448 0 1 1 0-6.896 3.448 3.448 0 0 1 0 6.896Z",fill:"currentFill"})});var Je=T({name:"ArrowDownIcon",viewBox:"0 0 12 20",path:u__default.default.createElement("path",{d:"M3.03076 8C2.20109 8 1.73228 8.95209 2.23814 9.60971L5.20727 13.4696C5.60757 13.99 6.39223 13.99 6.79252 13.4696L9.76166 9.60971C10.2675 8.95209 9.79871 8 8.96904 8L3.03076 8Z",fill:"#9FA8B2"})});var Ke=T({name:"HelpIcon",viewBox:"0 0 24 24",path:u__default.default.createElement(u__default.default.Fragment,null,u__default.default.createElement("g",{clipPath:"url(#HelpIcon_svg__a)"},u__default.default.createElement("path",{d:"M12 2.25A9.75 9.75 0 1 0 21.75 12 9.769 9.769 0 0 0 12 2.25ZM12 18a1.125 1.125 0 1 1 0-2.25A1.125 1.125 0 0 1 12 18Zm.75-4.584v.084a.75.75 0 1 1-1.5 0v-.75A.75.75 0 0 1 12 12a1.875 1.875 0 1 0-1.875-1.875.75.75 0 1 1-1.5 0 3.375 3.375 0 1 1 4.125 3.29Z",fill:"currentFill"})),u__default.default.createElement("defs",null,u__default.default.createElement("clipPath",{id:"HelpIcon_svg__a"},u__default.default.createElement("path",{fill:"currentFill",d:"M0 0h24v24H0z"}))))});var Qe=T({name:"SearchIcon",viewBox:"0 0 24 24",path:u__default.default.createElement(u__default.default.Fragment,null,u__default.default.createElement("g",{clipPath:"url(#SearchIcon_svg__a)"},u__default.default.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M6 11.125a5.125 5.125 0 1 1 10.25 0 5.125 5.125 0 0 1-10.25 0ZM11.125 4a7.125 7.125 0 1 0 4.282 12.82l2.886 2.887a1 1 0 0 0 1.414-1.414l-2.886-2.887A7.125 7.125 0 0 0 11.125 4Z",fill:"currentFill"})),u__default.default.createElement("defs",null,u__default.default.createElement("clipPath",{id:"SearchIcon_svg__a"},u__default.default.createElement("path",{fill:"#fff",d:"M0 0h24v24H0z"}))))});var er=f36IconAlpha.generateIcon({name:"ContentfulLogoIcon",viewBox:"0 0 28 28",path:u__default.default.createElement(u__default.default.Fragment,null,u__default.default.createElement("path",{fill:"#1773EB",d:"M10.713 5.001c.845.843 1.167 2.079.845 3.228A6.663 6.663 0 0 1 15 7.276h.026a6.7 6.7 0 0 1 4.743 1.988 2.64 2.64 0 1 0 3.746-3.715A11.96 11.96 0 0 0 15.042 2h-.046a11.933 11.933 0 0 0-6.691 2.036h.074a3.287 3.287 0 0 1 2.334.967V5Z"}),u__default.default.createElement("path",{fill:"#E44F20",d:"M21.594 17.999a2.64 2.64 0 0 0-1.858.766 6.703 6.703 0 0 1-4.732 1.951h-.025a6.65 6.65 0 0 1-3.447-.968A3.3 3.3 0 0 1 8.35 23.93h-.086A11.926 11.926 0 0 0 14.96 26h.046a11.94 11.94 0 0 0 8.449-3.484 2.64 2.64 0 0 0-1.859-4.514V18h-.002Z"}),u__default.default.createElement("path",{fill:"#FFDA00",d:"M6.013 18.295a3.27 3.27 0 0 1 2.334-.967c.302 0 .603.04.894.122a6.7 6.7 0 0 1 .013-6.928A3.3 3.3 0 0 1 5.08 7.335v-.09a11.999 11.999 0 0 0-.032 13.453v-.07a3.27 3.27 0 0 1 .966-2.333Z"}),u__default.default.createElement("path",{fill:"#1773EB",d:"M8.379 4.62c-.75 0-1.276.312-1.913.949-.607.605-.798 1.135-.8 1.766A2.712 2.712 0 1 0 8.38 4.62Z"}),u__default.default.createElement("path",{fill:"#E44F20",d:"M5.628 20.631c0 .75.31 1.276.946 1.912.607.606 1.136.799 1.766.8a2.703 2.703 0 1 0-.017-5.407 2.703 2.703 0 0 0-2.695 2.704v-.009Z"}))});function 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__default.default.createElement(f36Core.Box,d(m({},F),{ref:r,testId:x,className:s}),u__default.default.createElement(f36Core.Flex,{className:O.containerTop},u__default.default.createElement(f36Core.Flex,{className:O.containerTopContent,justifyContent:"space-between"},u__default.default.createElement(f36Core.Flex,{alignItems:"center",gap:"spacingL"},p||u__default.default.createElement(er,{className:O.logo}),h),u__default.default.createElement(f36Core.Flex,{alignItems:"center",gap:"spacingXs"},I,a,g,l,t))),u__default.default.createElement(f36Core.Flex,{className:O.containerBottom},u__default.default.createElement(f36Core.Flex,{className:O.containerBottomContent,justifyContent:"space-between"},u__default.default.createElement(f36Core.Flex,{as:"nav","aria-label":"Main Navigation"},n),i&&u__default.default.createElement(f36Core.Flex,null,i))))}var rr=u__default.default.forwardRef(ut);var bt={warning:o__default.default.colorWarning,negative:o__default.default.colorNegative,info:o__default.default.blue500},tr=()=>({navbarAccount:emotion.css({margin:0,padding:0,border:0,cursor:"pointer",background:"none",position:"relative",outline:"none",overflow:"visible",borderRadius:"50%","&:before":emotion.css({content:'""',display:"block",position:"absolute",height:"24px",width:"24px",backgroundColor:"transparent",borderRadius:"50%"}),"&:hover:before":emotion.css({backgroundColor:f36Utils.hexToRGBA(o__default.default.gray300,.15)})},S()),avatar:emotion.css({borderRadius:"50%",display:"block",height:"24px",width:"24px"}),notificationIcon:e=>emotion.css({position:"absolute",top:0,right:0,height:o__default.default.spacingS,width:o__default.default.spacingS,borderRadius:"50%",border:`2px solid ${o__default.default.gray100}`,backgroundColor:bt[e],transform:"translate(30%, -30%)"})});var or=()=>({menuList:emotion.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__default.default.createElement(f36Menu.Menu,{onOpen:i,onClose:n},u__default.default.createElement(f36Menu.Menu.Trigger,null,r),u__default.default.createElement(f36Menu.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__default.default.createElement($,{trigger:u__default.default.createElement(f36Core.Flex,d(m({as:"button"},g),{ref:r,className:emotion.cx(h.navbarAccount,a),testId:i,alignItems:"center"}),u__default.default.createElement(f36Avatar.Avatar,{src:n,initials:s,size:"small",variant:"user"}),l?u__default.default.createElement("span",{className:h.notificationIcon(p)}):null)},t)}var ye=u__default.default.forwardRef(Nt);function Ne({ariaLabel:e}){return u__default.default.createElement(f36Skeleton.SkeletonContainer,{svgWidth:24,svgHeight:24,ariaLabel:e,backgroundColor:o__default.default.gray300,foregroundColor:o__default.default.gray200},u__default.default.createElement(f36Skeleton.SkeletonImage,{width:24,height:24,radiusX:12,radiusY:12}))}var ir=()=>emotion.css({"&::after":{content:'""',position:"absolute",width:`calc(100% - ${o__default.default.spacingM})`,height:"2px",bottom:`-${o__default.default.spacing2Xs}`,left:0,right:0,margin:"auto",backgroundColor:o__default.default.blue600,zIndex:0}}),sr={display:"flex",justifyContent:"center",padding:`${o__default.default.spacing2Xs} ${o__default.default.spacingS}`,alignItems:"center",background:"none"},lr=()=>({navbarItem:emotion.css(sr,{alignItems:"center",background:"none",border:0,margin:0,outline:"none",fontSize:o__default.default.fontSizeM,lineHeight:o__default.default.lineHeightS,fontWeight:o__default.default.fontWeightMedium,position:"relative",textAlign:"left",whiteSpace:"nowrap",cursor:"pointer",hyphens:"auto",textDecoration:"none",color:o__default.default.gray700,boxSizing:"border-box",transition:`color ${o__default.default.transitionDurationShort} ${o__default.default.transitionEasingCubicBezier}`,borderRadius:o__default.default.borderRadiusMedium,"&:hover":{backgroundColor:f36Utils.hexToRGBA(o__default.default.gray900,.05)},"&:hover::before":{opacity:1,scale:"1"},"&:active::before":{backgroundColor:"rgba(255, 255, 255, 0.1)"},"&:disabled":{cursor:"auto"},"& svg":{transition:`fill ${o__default.default.transitionDurationShort} ${o__default.default.transitionEasingCubicBezier}`},"& > svg, & > span":{zIndex:o__default.default.zIndexDefault}},S(`inset ${o__default.default.glowPrimary}`)),navbarItemMenuTrigger:emotion.css({paddingRight:o__default.default.spacingXs}),isActive:ir()}),pr=()=>({itemSkeleton:emotion.css(sr)});var cr=()=>({navbarItemIcon:emotion.css({fill:o__default.default.gray700,"&:first-child":{marginRight:o__default.default.spacing2Xs},"&:last-child":{marginLeft:o__default.default.spacing2Xs},"img&":{borderRadius:o__default.default.borderRadiusSmall,maxWidth:o__default.default.spacingM,maxHeight:o__default.default.spacingM}})});var te=e=>{var i,n;let{icon:r,variant:t}=e,a=cr();return u__default.default.cloneElement(r,{className:emotion.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__default.default.createElement(t,d(m({},h),{ref:r,"data-test-id":l,className:emotion.cx(x.navbarItem,I&&x.navbarItemMenuTrigger,c&&x.isActive,s)}),a&&u__default.default.createElement(te,{icon:a,variant:"secondary"}),u__default.default.createElement("span",null,i),I&&u__default.default.createElement(Je,null));return I?u__default.default.createElement($,{trigger:P,testId:l,onOpen:p,onClose:g},n):P}var Tt=e=>!!e.children,Ie=u__default.default.forwardRef(kt);var Se=({estimatedWidth:e})=>{let r=pr();return u__default.default.createElement(f36Skeleton.SkeletonContainer,{className:r.itemSkeleton,svgWidth:e,svgHeight:32,backgroundColor:o__default.default.gray300,foregroundColor:o__default.default.gray200},u__default.default.createElement(f36Skeleton.SkeletonText,{lineHeight:6,numberOfLines:1,offsetTop:10,radiusX:o__default.default.borderRadiusSmall,radiusY:o__default.default.borderRadiusSmall}))};var dr=()=>({navbarMenuItem:emotion.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__default.default.createElement(f36Menu.Menu.Item,d(m({},s),{ref:r,as:t,className:emotion.cx(c.navbarMenuItem,n)}),a?u__default.default.createElement(te,{icon:a,variant:"secondary"}):l&&fr,u__default.default.createElement("span",null,i),a&&l?fr:null)}var fr=u__default.default.createElement(te,{icon:u__default.default.createElement(f36Icons.ExternalLinkIcon,null),variant:"muted"}),Wt=e=>e.as==="a"&&e.target==="_blank",we=u__default.default.forwardRef(_t);var Pe=({ariaLabel:e})=>u__default.default.createElement(f36Menu.Menu.Item,null,u__default.default.createElement(f36Core.Flex,{alignItems:"center",gap:o__default.default.spacingXs},u__default.default.createElement(f36Skeleton.SkeletonContainer,{svgHeight:16,svgWidth:18},u__default.default.createElement(f36Skeleton.SkeletonImage,{width:16,height:16})),u__default.default.createElement(f36Skeleton.SkeletonContainer,{svgHeight:16,svgWidth:190,ariaLabel:e},u__default.default.createElement(f36Skeleton.SkeletonBodyText,{numberOfLines:1}))));var gr=()=>({navbarSwitcher:emotion.css({margin:0,padding:0,background:"none",border:"none",height:"max-content",color:o__default.default.gray700,cursor:"pointer",fontSize:o__default.default.fontSizeS,fontWeight:o__default.default.fontWeightMedium,position:"relative",outline:"none",borderRadius:"3rem","&:after":{content:'""',border:"1px solid #353A41",boxSizing:"border-box",height:"16px",right:"-1px",position:"absolute",width:0},"&:last-child:after":{display:"none"},"&:hover li":{backgroundColor:"#f2f4f6"}},S()),switcherMenuIcon:emotion.css({height:o__default.default.spacingM,width:o__default.default.spacingM,fill:o__default.default.gray700}),switcherBreadcrumbs:emotion.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__default.default.createElement(f36Core.Flex,d(m({},n),{as:"button",ref:r,className:emotion.cx(s.navbarSwitcher,a),testId:i,alignItems:"center",fullHeight:!0,gap:"spacingXs"}),u__default.default.createElement(f36Core.Flex,{as:"ul",alignItems:"center",className:s.switcherBreadcrumbs},t))}var Ce=u__default.default.forwardRef(Ut);var Ae=({estimatedWidth:e})=>u__default.default.createElement(f36Skeleton.SkeletonContainer,{svgWidth:e,svgHeight:24,backgroundColor:o__default.default.gray300,foregroundColor:o__default.default.gray200},u__default.default.createElement(f36Skeleton.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:emotion.keyframes`
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
26.666667% {
|
|
30
|
-
transform: scale(1, 1);
|
|
31
|
-
}
|
|
32
|
-
33.333333% {
|
|
33
|
-
transform: scale(1, 1);
|
|
34
|
-
}
|
|
35
|
-
40% {
|
|
36
|
-
transform: scale(1, 1);
|
|
37
|
-
}
|
|
38
|
-
53.333333% {
|
|
39
|
-
transform: scale(1, 1);
|
|
40
|
-
}
|
|
41
|
-
60% {
|
|
42
|
-
transform: scale(1.5, 0.5);
|
|
43
|
-
}
|
|
44
|
-
66.666667% {
|
|
45
|
-
transform: scale(1, 1);
|
|
46
|
-
}
|
|
47
|
-
100% {
|
|
48
|
-
transform: scale(1, 1);
|
|
49
|
-
}
|
|
50
|
-
`,scale2:emotion.keyframes`
|
|
51
|
-
0% {
|
|
52
|
-
transform: scale(1, 1);
|
|
53
|
-
}
|
|
54
|
-
13.333333% {
|
|
55
|
-
transform: scale(1, 1);
|
|
56
|
-
}
|
|
57
|
-
20% {
|
|
58
|
-
transform: scale(1.5, 0.5);
|
|
59
|
-
}
|
|
60
|
-
26.666667% {
|
|
61
|
-
transform: scale(1, 1);
|
|
62
|
-
}
|
|
63
|
-
40% {
|
|
64
|
-
transform: scale(1, 1);
|
|
65
|
-
}
|
|
66
|
-
46.666667% {
|
|
67
|
-
transform: scale(1, 1);
|
|
68
|
-
}
|
|
69
|
-
53.333333% {
|
|
70
|
-
transform: scale(1, 1);
|
|
71
|
-
}
|
|
72
|
-
66.666667% {
|
|
73
|
-
transform: scale(1, 1);
|
|
74
|
-
}
|
|
75
|
-
73.333333% {
|
|
76
|
-
transform: scale(1.5, 0.5);
|
|
77
|
-
}
|
|
78
|
-
80% {
|
|
79
|
-
transform: scale(1, 1);
|
|
80
|
-
}
|
|
81
|
-
100% {
|
|
82
|
-
transform: scale(1, 1);
|
|
83
|
-
}
|
|
84
|
-
`,scale3:emotion.keyframes`
|
|
85
|
-
0% {
|
|
86
|
-
transform: scale(1, 1);
|
|
87
|
-
}
|
|
88
|
-
26.666667% {
|
|
89
|
-
transform: scale(1, 1);
|
|
90
|
-
}
|
|
91
|
-
33.333333% {
|
|
92
|
-
transform: scale(1.5, 0.5);
|
|
93
|
-
}
|
|
94
|
-
40% {
|
|
95
|
-
transform: scale(1, 1);
|
|
96
|
-
}
|
|
97
|
-
53.333333% {
|
|
98
|
-
transform: scale(1, 1);
|
|
99
|
-
}
|
|
100
|
-
60% {
|
|
101
|
-
transform: scale(1, 1);
|
|
102
|
-
}
|
|
103
|
-
66.666667% {
|
|
104
|
-
transform: scale(1, 1);
|
|
105
|
-
}
|
|
106
|
-
80% {
|
|
107
|
-
transform: scale(1, 1);
|
|
108
|
-
}
|
|
109
|
-
86.666667% {
|
|
110
|
-
transform: scale(1.5, 0.5);
|
|
111
|
-
}
|
|
112
|
-
93.333333% {
|
|
113
|
-
transform: scale(1, 1);
|
|
114
|
-
}
|
|
115
|
-
100% {
|
|
116
|
-
transform: scale(1, 1);
|
|
117
|
-
}
|
|
118
|
-
`,translate1:emotion.keyframes`
|
|
119
|
-
0% {
|
|
120
|
-
transform: translate(10px, 33.528168px);
|
|
121
|
-
}
|
|
122
|
-
6.666667% {
|
|
123
|
-
transform: translate(10px, 41.764084px);
|
|
124
|
-
}
|
|
125
|
-
13.333333% {
|
|
126
|
-
transform: translate(10px, 33.528168px);
|
|
127
|
-
}
|
|
128
|
-
26.666667% {
|
|
129
|
-
transform: translate(10px, -2.651608px);
|
|
130
|
-
}
|
|
131
|
-
33.333333% {
|
|
132
|
-
transform: translate(10px, -4.471832px);
|
|
133
|
-
}
|
|
134
|
-
40% {
|
|
135
|
-
transform: translate(10px, -2.651608px);
|
|
136
|
-
}
|
|
137
|
-
53.333333% {
|
|
138
|
-
transform: translate(10px, 33.528168px);
|
|
139
|
-
}
|
|
140
|
-
60% {
|
|
141
|
-
transform: translate(10px, 41.764084px);
|
|
142
|
-
}
|
|
143
|
-
66.666667% {
|
|
144
|
-
transform: translate(10px, 33.528168px);
|
|
145
|
-
}
|
|
146
|
-
100% {
|
|
147
|
-
transform: translate(10px, 33.528168px);
|
|
148
|
-
}
|
|
149
|
-
`,translate2:emotion.keyframes`
|
|
150
|
-
0% {
|
|
151
|
-
transform: translate(30px, 33.528168px);
|
|
152
|
-
}
|
|
153
|
-
13.333333% {
|
|
154
|
-
transform: translate(30px, 33.528168px);
|
|
155
|
-
}
|
|
156
|
-
20% {
|
|
157
|
-
transform: translate(30px, 41.764084px);
|
|
158
|
-
}
|
|
159
|
-
26.666667% {
|
|
160
|
-
transform: translate(30px, 33.528168px);
|
|
161
|
-
}
|
|
162
|
-
40% {
|
|
163
|
-
transform: translate(30px, -2.651608px);
|
|
164
|
-
}
|
|
165
|
-
46.666667% {
|
|
166
|
-
transform: translate(30px, -4.471832px);
|
|
167
|
-
}
|
|
168
|
-
53.333333% {
|
|
169
|
-
transform: translate(30px, -2.651608px);
|
|
170
|
-
}
|
|
171
|
-
66.666667% {
|
|
172
|
-
transform: translate(30px, 33.528168px);
|
|
173
|
-
}
|
|
174
|
-
73.333333% {
|
|
175
|
-
transform: translate(30px, 41.764084px);
|
|
176
|
-
}
|
|
177
|
-
80% {
|
|
178
|
-
transform: translate(30px, 33.528168px);
|
|
179
|
-
}
|
|
180
|
-
100% {
|
|
181
|
-
transform: translate(30px, 33.528168px);
|
|
182
|
-
}
|
|
183
|
-
`,translate3:emotion.keyframes`
|
|
184
|
-
0% {
|
|
185
|
-
transform: translate(50px, 33.528168px);
|
|
186
|
-
}
|
|
187
|
-
26.666667% {
|
|
188
|
-
transform: translate(50px, 33.528168px);
|
|
189
|
-
}
|
|
190
|
-
33.333333% {
|
|
191
|
-
transform: translate(50px, 41.764084px);
|
|
192
|
-
}
|
|
193
|
-
40% {
|
|
194
|
-
transform: translate(50px, 33.528168px);
|
|
195
|
-
}
|
|
196
|
-
53.333333% {
|
|
197
|
-
transform: translate(50px, -2.651608px);
|
|
198
|
-
}
|
|
199
|
-
60% {
|
|
200
|
-
transform: translate(50px, -4.471832px);
|
|
201
|
-
}
|
|
202
|
-
66.666667% {
|
|
203
|
-
transform: translate(50px, -2.651608px);
|
|
204
|
-
}
|
|
205
|
-
80% {
|
|
206
|
-
transform: translate(50px, 33.528168px);
|
|
207
|
-
}
|
|
208
|
-
86.666667% {
|
|
209
|
-
transform: translate(50px, 41.764084px);
|
|
210
|
-
}
|
|
211
|
-
93.333333% {
|
|
212
|
-
transform: translate(50px, 33.528168px);
|
|
213
|
-
}
|
|
214
|
-
100% {
|
|
215
|
-
transform: translate(50px, 33.528168px);
|
|
216
|
-
}
|
|
217
|
-
`};return {root:r=>emotion.css({height:r.customSize?`${r.customSize}px`:void 0,verticalAlign:"middle",width:r.customSize?`${r.customSize}px`:no[r.size]}),circle1Scale:emotion.css({animation:`${e.scale1} 1s linear infinite normal forwards;`}),circle2Scale:emotion.css({animation:`${e.scale2} 1s linear infinite normal forwards;`}),circle3Scale:emotion.css({animation:`${e.scale3} 1s linear infinite normal forwards;`}),circle1Translate:emotion.css({animation:`${e.translate1} 1s linear infinite normal forwards;`}),circle2Translate:emotion.css({animation:`${e.translate2} 1s linear infinite normal forwards;`}),circle3Translate:emotion.css({animation:`${e.translate3} 1s linear infinite normal forwards;`})}},so="div",lo={default:o__default.default.gray700,primary:o__default.default.blue500,white:o__default.default.colorWhite},Te=u.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__default.default.createElement(f36Core.Box,oo(to({as:so,display:"inline-block"},l),{className:emotion.cx(p.root({size:n,customSize:i}),a),ref:r,testId:c}),u__default.default.createElement("svg",{className:emotion.css({display:"block",fill:lo[s]}),viewBox:"0 0 60 51",xmlns:"http://www.w3.org/2000/svg"},u__default.default.createElement("title",null,"Loading\u2026"),u__default.default.createElement("g",{className:p.circle1Translate,transform:"translate(10,33.528168)"},u__default.default.createElement("g",{className:p.circle1Scale},u__default.default.createElement("circle",{r:"6",transform:"translate(0,10.471832)"}))),u__default.default.createElement("g",{className:p.circle2Translate,transform:"translate(30,33.528168)"},u__default.default.createElement("g",{className:p.circle2Scale},u__default.default.createElement("circle",{r:"6",transform:"translate(0,10.471832)"}))),u__default.default.createElement("g",{className:p.circle3Translate,transform:"translate(50,33.528168)"},u__default.default.createElement("g",{className:p.circle3Scale},u__default.default.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:emotion.css({display:"inline-flex",position:"relative"}),groupContent:emotion.css(N({borderRadius:"0 !important",marginRight:"-1px","&:first-child":{borderBottomLeftRadius:`${o__default.default.borderRadiusMedium} !important`,borderTopLeftRadius:`${o__default.default.borderRadiusMedium} !important`},"&:last-child":{borderBottomRightRadius:`${o__default.default.borderRadiusMedium} !important`,borderTopRightRadius:`${o__default.default.borderRadiusMedium} !important`,marginRight:0},"&:focus":{zIndex:o__default.default.zIndexDefault}},r))}},bo=e=>{if(!e)return {};let r=`1px solid ${f36Utils.hexToRGBA(o__default.default.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__default.default.createElement(f36Core.Stack,{className:s,isInline:!0,flexDirection:"row",testId:i,ref:r,spacing:c},n):u__default.default.createElement(f36Core.Box,{testId:i,ref:r,className:emotion.cx(l.buttonGroup,s)},u__default.default.Children.map(n,(p,g)=>p?u__default.default.cloneElement(p,{key:g,className:emotion.cx(l.groupContent,p.props.className)}):null))}Er.displayName="ButtonGroup";u__default.default.forwardRef(Er);var q=e=>{switch(e){case"primary":return {backgroundColor:o__default.default.blue700};case"secondary":return {backgroundColor:o__default.default.gray200};case"positive":return {backgroundColor:o__default.default.green700};case"negative":return {backgroundColor:o__default.default.gray200};case"transparent":return {backgroundColor:f36Utils.hexToRGBA(o__default.default.gray900,.1)};default:return {}}},vo=e=>{switch(e){case"primary":return {color:o__default.default.colorWhite,backgroundColor:o__default.default.blue500,borderColor:"transparent","&:hover":{backgroundColor:o__default.default.blue600,color:o__default.default.colorWhite},"&:active":q(e),"&:focus-visible":{boxShadow:o__default.default.glowPrimary}};case"secondary":return {color:o__default.default.gray900,backgroundColor:o__default.default.colorWhite,borderColor:o__default.default.gray300,"&:hover":{backgroundColor:o__default.default.gray100,color:o__default.default.gray900},"&:active":q(e),"&:focus":{boxShadow:o__default.default.glowPrimary},"&:focus:not(:focus-visible)":{boxShadow:"unset"},"&:focus-visible":{boxShadow:o__default.default.glowPrimary}};case"positive":return {color:o__default.default.colorWhite,backgroundColor:o__default.default.green500,borderColor:"transparent","&:hover":{backgroundColor:o__default.default.green600,color:o__default.default.colorWhite},"&:active":q(e),"&:focus-visible":{boxShadow:o__default.default.glowPositive}};case"negative":return {color:o__default.default.red600,backgroundColor:o__default.default.colorWhite,borderColor:o__default.default.gray300,"&:hover":{backgroundColor:o__default.default.gray100,color:o__default.default.red600},"&:active":q(e),"&:focus-visible":{boxShadow:o__default.default.glowNegative}};case"transparent":return {color:o__default.default.gray900,background:"none",borderColor:"transparent",boxShadow:"none","&:hover":{backgroundColor:f36Utils.hexToRGBA(o__default.default.gray900,.05)},"&:active":q(e),"&:focus":{boxShadow:o__default.default.glowPrimary},"&:focus:not(:focus-visible)":{boxShadow:"unset"},"&:focus-visible":{boxShadow:o__default.default.glowPrimary}};default:return {}}},ho=(e,r)=>{let t=r==="high";switch(e){case"small":return {fontSize:t?o__default.default.fontSizeS:o__default.default.fontSizeM,lineHeight:o__default.default.lineHeightCondensed,padding:t?`${o__default.default.spacing2Xs} ${o__default.default.spacingXs}`:`${o__default.default.spacing2Xs} ${o__default.default.spacingS}`,minHeight:t?o__default.default.spacingL:o__default.default.spacingXl};case"medium":return {fontSize:t?o__default.default.fontSizeS:o__default.default.fontSizeM,lineHeight:o__default.default.lineHeightCondensed,padding:t?`${o__default.default.spacingXs} ${o__default.default.spacingS}`:`${o__default.default.spacingXs} ${o__default.default.spacingM}`,minHeight:t?o__default.default.spacingXl:"40px"};case"large":return {fontSize:o__default.default.fontSizeXl,lineHeight:o__default.default.lineHeightXl,padding:`${o__default.default.spacingXs} ${o__default.default.spacingM}`,minHeight:"48px"};default:return {}}},xo=({hasChildren:e,variant:r})=>{let t={"&:first-child":{marginRight:o__default.default.spacing2Xs},"&:last-child":{marginLeft:o__default.default.spacing2Xs}};return emotion.css([e?t:{},r!=="transparent"&&e&&{"& svg":{fill:"currentColor"}}])},yo=()=>({button:({variant:e,size:r,density:t,isActive:a,isDisabled:i,isFullWidth:n})=>emotion.css(N(N(N({boxSizing:"border-box",border:"1px solid",boxShadow:"0px 1px 0px rgb(25, 37, 50, 0.08)",borderRadius:t==="high"?o__default.default.borderRadiusSmall:o__default.default.borderRadiusMedium,cursor:i?"not-allowed":"pointer",fontFamily:o__default.default.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__default.default.fontWeightMedium,outline:"none",textDecoration:"none",margin:0,transition:`background ${o__default.default.transitionDurationShort} ${o__default.default.transitionEasingDefault},
|
|
218
|
-
opacity ${o__default.default.transitionDurationDefault} ${o__default.default.transitionEasingDefault},
|
|
219
|
-
border-color ${o__default.default.transitionDurationDefault} ${o__default.default.transitionEasingDefault}`},vo(e)),ho(r,t)),a?{transition:"none","&, &:focus":q(e)}:{})),buttonIcon:xo,buttonContent:emotion.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=f36Utils.useDensity(),Vr=emotion.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__default.default.createElement(f36Core.Flex,{as:"span",className:t.buttonIcon({hasChildren:!!n,variant:l})},u__default.default.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__default.default.createElement(u__default.default.Fragment,null,g&&He(g),n&&u__default.default.createElement(f36Core.Box,{as:"span",display:"block",className:t.buttonContent},n),h&&He(h),P&&u__default.default.createElement(f36Core.Box,{as:"span",marginLeft:n||!P?"spacingXs":"none"},u__default.default.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__default.default.createElement("a",Be(N(N({},J),_e),{disabled:I}),De):u__default.default.createElement("button",Be(N(N({type:"button"},J),_e),{disabled:I}),De)}Mr.displayName="Button";var de=u__default.default.forwardRef(Mr),Io=({isActive:e,isDisabled:r})=>{let t={background:o__default.default.blue100,borderColor:o__default.default.blue600,"&":{zIndex:o__default.default.zIndexDefault+1},"&:hover":{background:o__default.default.blue100}},a={"&:focus":{boxShadow:o__default.default.glowPrimary},"&:focus-visible:not([disabled])":{zIndex:o__default.default.zIndexDefault+2},"&:active, &:active:hover":r?{background:o__default.default.colorWhite,borderColor:o__default.default.gray300}:{background:o__default.default.blue100,borderColor:o__default.default.blue600}};return e?N(N({},a),t):a},So=({isActive:e,isDisabled:r})=>({toggleButton:emotion.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__default.default.createElement(de,N({testId:a,type:"button",ref:r,size:g,onClick:()=>{!s&&p&&p();},className:emotion.cx(x.toggleButton,n),startIcon:l,isDisabled:s,"aria-pressed":c,"data-state":c?"on":"off"},h),i)}Cr.displayName="ToggleButton";u__default.default.forwardRef(Cr);function wo(e,r){let t=r==="high";switch(e){case"small":return {padding:t?`${o__default.default.spacing2Xs}`:o__default.default.spacing2Xs,minHeight:t?o__default.default.spacingL:o__default.default.spacingXl,minWidth:t?o__default.default.spacingL:o__default.default.spacingXl};case"medium":return {padding:o__default.default.spacingXs,minHeight:t?o__default.default.spacingXl:"40px",minWidth:t?o__default.default.spacingXl:"40px"};default:return {}}}function Po({size:e,density:r}){return {iconButton:emotion.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=f36Utils.useDensity(),g=Po({size:c,density:p});return u__default.default.createElement(de,Be(N({testId:a,ref:r,variant:i,className:emotion.cx(g.iconButton,s),size:c},l),{startIcon:n}))}Ar.displayName="IconButton";var kr=u__default.default.forwardRef(Ar);var Tr=()=>({navbarSearch:emotion.css({minWidth:"24px",width:"24px",minHeight:"24px",height:"24px",svg:{fill:o__default.default.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__default.default.createElement(kr,d(m({"aria-label":"Quick Search"},i),{variant:"transparent",ref:r,size:"small",className:emotion.cx(n.navbarSearch,t),testId:a,icon:u__default.default.createElement(Qe,{size:"medium"})}))}var Rr=u__default.default.forwardRef(Ao);var Br={display:"none","&:first-child":{display:"block"},[M.medium]:{display:"block","&:first-child":{display:"none"}}},zr=()=>({breadcrumbsItem:emotion.css({position:"relative",alignItems:"center",justifyContent:"center",border:`solid 1px ${o__default.default.gray300}`,borderLeft:"none",display:"inline-flex",margin:0,minWidth:0,padding:`0 ${o__default.default.spacingXs}`,height:o__default.default.spacingL,borderRadius:"3rem",zIndex:2,whiteSpace:"nowrap","&:first-child":{minWidth:"24px"},"&:nth-child(2)":{zIndex:1,marginLeft:"-10px",paddingLeft:o__default.default.spacingM,borderRadius:"0 3rem 3rem 0",span:{maxWidth:"80px",textOverflow:"ellipsis",overflow:"hidden",[M.large]:{maxWidth:"100%"}}},"&:nth-child(3)":{marginLeft:"-10px",paddingLeft:o__default.default.spacingM,borderRadius:"0 3rem 3rem 0",fontFamily:o__default.default.fontStackMonospace,fontSize:o__default.default.fontSizeS,fontWeight:o__default.default.fontWeightMedium,zIndex:0,span:{maxWidth:"40px",textOverflow:"ellipsis",overflow:"hidden",[M.large]:{maxWidth:"100%"}},"> div":{[M.medium]:{gap:o__default.default.spacing2Xs}}}}),breadcrumbsItemCircle:emotion.css({border:`solid 1px ${o__default.default.gray300}`,borderRadius:"50%",color:o__default.default.gray400,padding:0,display:"flex",justifyContent:"center",fontSize:"11px",width:o__default.default.spacingL,height:o__default.default.spacingL}),breadcrumbsItemEnvMaster:emotion.css({color:o__default.default.green600," svg":d(m({},Br),{fill:o__default.default.green600})}),breadcrumbsItemEnvNonMaster:emotion.css({color:o__default.default.orange500,svg:d(m({},Br),{fill:o__default.default.orange500})})});function Or({isAlias:e}){return u__default.default.createElement(u__default.default.Fragment,null,u__default.default.createElement(Ye,{key:"mobile-icon",size:"tiny"}),e?u__default.default.createElement(f36Icons.EnvironmentAliasIcon,{key:"full-icon",size:"tiny"}):u__default.default.createElement(f36Icons.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=emotion.cx(p.breadcrumbsItem,i,{[p.breadcrumbsItemCircle]:a,[p.breadcrumbsItemEnvMaster]:n==="master",[p.breadcrumbsItemEnvNonMaster]:n==="non-master"});return u__default.default.createElement("li",d(m({},l),{ref:r,className:g,"data-test-id":c}),u__default.default.createElement(f36Core.Flex,{fullHeight:!0,justifyContent:"center",alignItems:"center"},n&&u__default.default.createElement(Or,{isAlias:s}),u__default.default.createElement("span",null,t)))}var Lr=u__default.default.forwardRef(zo);var Hr=()=>({navbarHelp:emotion.css({fontSize:o__default.default.fontSizeS,padding:`0 ${o__default.default.spacing2Xs}`,width:"max-content",minHeight:"24px",height:"24px",color:o__default.default.gray700,svg:{fill:o__default.default.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__default.default.createElement($,{testId:"cf-ui-navbar-help-menu",trigger:u__default.default.createElement(de,d(m({"aria-label":"Help Menu"},n),{as:"button",ref:r,className:emotion.cx(s.navbarHelp,a),testId:i,variant:"transparent",size:"small",startIcon:u__default.default.createElement(Ke,{size:"medium"})}),"Help")},t)}var Dr=u__default.default.forwardRef(Ho);var _r=()=>({navbarBadge:emotion.css({display:"flex",justifyContent:"center",alignItems:"center",background:"none",border:`1px solid ${o__default.default.purple600}`,margin:0,outline:"none",fontSize:o__default.default.fontSizeS,lineHeight:o__default.default.lineHeightS,fontWeight:o__default.default.fontWeightMedium,textAlign:"center",padding:`0 ${o__default.default.spacingXs}`,textDecoration:"none",color:`${o__default.default.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__default.default.createElement(t,d(m({},s),{ref:r,className:emotion.cx(c.navbarBadge,i),"data-test-id":n}),a)}var Fr=u__default.default.forwardRef(Fo);var $r=()=>({navbarTopItem:emotion.css({margin:0,background:"none",border:"1px solid",borderColor:"transparent",cursor:"pointer",display:"flex",gap:o__default.default.spacing2Xs,alignItems:"center",lineHeight:o__default.default.lineHeightDefault,color:o__default.default.gray700,padding:`0 ${o__default.default.spacing2Xs}`,minHeight:"24px",fontSize:o__default.default.fontSizeS,fontWeight:o__default.default.fontWeightMedium,outline:"none",borderRadius:o__default.default.borderRadiusMedium,"&:hover":{backgroundColor:f36Utils.hexToRGBA(o__default.default.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__default.default.createElement(t,d(m({},s),{ref:r,className:emotion.cx(c.navbarTopItem,i),"data-test-id":n}),a)}var Gr=u__default.default.forwardRef(Vo);var y=rr;y.Item=Ie;y.ItemSkeleton=Se;y.MenuItem=we;y.MenuItemSkeleton=Pe;y.MenuDivider=f36Menu.MenuDivider;y.MenuSectionTitle=f36Menu.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;
|
|
22
|
+
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__default.default.glowPrimary)=>emotion.css({"&:focus":{boxShadow:e},"&:focus:not(:focus-visible)":{boxShadow:"unset"},"&:focus-visible":{boxShadow:e}}),B=(e="44px")=>emotion.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:emotion.css({justifyContent:"center",backgroundColor:a__default.default.gray100,width:"100%"}),logo:emotion.css({display:"none",[i.small]:{display:"block",height:"28px",width:"28px"}}),navigation:emotion.css({width:"100%",maxWidth:o==="wide"?"1920px":e,padding:`${a__default.default.spacingS} ${a__default.default.spacingM}`,height:`${60}px`,[i.small]:{padding:`${a__default.default.spacingM} ${a__default.default.spacingL}`}}),mainNavigation:t=>emotion.css({display:"none"},t==="small"?{[i.small]:{display:"flex"}}:{[i.medium]:{display:"flex"}}),mobileNavigationButton:t=>emotion.css({display:"flex",minHeight:"initial",height:"36px",padding:"0 12px",borderRadius:"10px"},t==="small"?{[i.small]:{display:"none"}}:{[i.medium]:{display:"none"}}),mobileNavigationIcon:emotion.css({heigt:"20px",width:"20px"}),secondaryNavigationWrapper:emotion.css({"> *:not(:first-child)":{display:"none",[i.xsmall]:{display:"flex"}}}),promoNavigationWrapper:emotion.css({display:"none",[i.large]:{display:"flex"}}),account:emotion.css({display:"none",[i.xsmall]:{display:"flex"}})});var Pe=f36Icon.generateComponentWithVariants({variants:{[f36Icon.IconVariant.Active]:f36Icon.generateIconComponent({path:v__default.default.createElement(v__default.default.Fragment,null,v__default.default.createElement("path",{d:"M10.0153 4.76531L6.2653 8.51531C6.23048 8.55018 6.18912 8.57784 6.14359 8.59671C6.09807 8.61558 6.04927 8.62529 5.99999 8.62529C5.95071 8.62529 5.90191 8.61558 5.85639 8.59671C5.81086 8.57784 5.76951 8.55018 5.73468 8.51531L1.98468 4.76531C1.93217 4.71287 1.89641 4.64602 1.88192 4.57324C1.86742 4.50046 1.87485 4.42501 1.90326 4.35645C1.93166 4.28789 1.97977 4.22931 2.0415 4.1881C2.10322 4.1469 2.17578 4.12494 2.24999 4.125H9.74999C9.8242 4.12494 9.89676 4.1469 9.95848 4.1881C10.0202 4.22931 10.0683 4.28789 10.0967 4.35645C10.1251 4.42501 10.1326 4.50046 10.1181 4.57324C10.1036 4.64602 10.0678 4.71287 10.0153 4.76531Z",fill:a__default.default.blue300})),viewBox:"0 0 12 12"}),[f36Icon.IconVariant.Default]:f36Icon.generateIconComponent({path:v__default.default.createElement(v__default.default.Fragment,null,v__default.default.createElement("path",{d:"M10.0153 4.76531L6.2653 8.51531C6.23048 8.55018 6.18912 8.57784 6.14359 8.59671C6.09807 8.61558 6.04927 8.62529 5.99999 8.62529C5.95071 8.62529 5.90191 8.61558 5.85639 8.59671C5.81086 8.57784 5.76951 8.55018 5.73468 8.51531L1.98468 4.76531C1.93217 4.71287 1.89641 4.64602 1.88192 4.57324C1.86742 4.50046 1.87485 4.42501 1.90326 4.35645C1.93166 4.28789 1.97977 4.22931 2.0415 4.1881C2.10322 4.1469 2.17578 4.12494 2.24999 4.125H9.74999C9.8242 4.12494 9.89676 4.1469 9.95848 4.1881C10.0202 4.22931 10.0683 4.28789 10.0967 4.35645C10.1251 4.42501 10.1326 4.50046 10.1181 4.57324C10.1036 4.64602 10.0678 4.71287 10.0153 4.76531Z",fill:a__default.default.gray400})),viewBox:"0 0 12 12"})}});var Se=f36Icon.generateIconComponent({name:"ContentfulLogoIcon",viewBox:"0 0 28 28",path:v__default.default.createElement(v__default.default.Fragment,null,v__default.default.createElement("path",{fill:"#1773EB",d:"M10.713 5.001c.845.843 1.167 2.079.845 3.228A6.663 6.663 0 0 1 15 7.276h.026a6.7 6.7 0 0 1 4.743 1.988 2.64 2.64 0 1 0 3.746-3.715A11.96 11.96 0 0 0 15.042 2h-.046a11.933 11.933 0 0 0-6.691 2.036h.074a3.287 3.287 0 0 1 2.334.967V5Z"}),v__default.default.createElement("path",{fill:"#E44F20",d:"M21.594 17.999a2.64 2.64 0 0 0-1.858.766 6.703 6.703 0 0 1-4.732 1.951h-.025a6.65 6.65 0 0 1-3.447-.968A3.3 3.3 0 0 1 8.35 23.93h-.086A11.926 11.926 0 0 0 14.96 26h.046a11.94 11.94 0 0 0 8.449-3.484 2.64 2.64 0 0 0-1.859-4.514V18h-.002Z"}),v__default.default.createElement("path",{fill:"#FFDA00",d:"M6.013 18.295a3.27 3.27 0 0 1 2.334-.967c.302 0 .603.04.894.122a6.7 6.7 0 0 1 .013-6.928A3.3 3.3 0 0 1 5.08 7.335v-.09a11.999 11.999 0 0 0-.032 13.453v-.07a3.27 3.27 0 0 1 .966-2.333Z"}),v__default.default.createElement("path",{fill:"#1773EB",d:"M8.379 4.62c-.75 0-1.276.312-1.913.949-.607.605-.798 1.135-.8 1.766A2.712 2.712 0 1 0 8.38 4.62Z"}),v__default.default.createElement("path",{fill:"#E44F20",d:"M5.628 20.631c0 .75.31 1.276.946 1.912.607.606 1.136.799 1.766.8a2.703 2.703 0 1 0-.017-5.407 2.703 2.703 0 0 0-2.695 2.704v-.009Z"}))});var Me=()=>({menuList:emotion.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__default.default.createElement(f36Menu.Menu,{onOpen:n,onClose:s},v__default.default.createElement(f36Menu.Menu.Trigger,null,o),v__default.default.createElement(f36Menu.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__default.default.createElement(f36Core.Flex,d(p({},q),{ref:o,testId:b,className:emotion.cx(y.container,x),as:"header"}),v__default.default.createElement(f36Core.Flex,{as:"nav",className:y.navigation,justifyContent:"space-between",gap:"spacingXs"},v__default.default.createElement(f36Core.Flex,{alignItems:"center",gap:"spacingL"},t||v__default.default.createElement(Se,{className:y.logo}),g&&v__default.default.createElement($,{trigger:v__default.default.createElement(f36Button.Button,{className:y.mobileNavigationButton(u.breakpoint),startIcon:v__default.default.createElement(f36Icons.ListIcon,{size:"medium"})},u.label)},g),s&&v__default.default.createElement(f36Core.Flex,{className:y.mainNavigation(u.breakpoint),"aria-label":S.labelMainNavigation,gap:"spacingXs"},s)),v__default.default.createElement(f36Core.Flex,{alignItems:"center",gap:"spacingXs"},v__default.default.createElement(f36Core.Flex,{alignItems:"center",className:y.promoNavigationWrapper,"aria-label":S.labelPromotions,gap:"spacingXs"},r),v__default.default.createElement(f36Core.Flex,{alignItems:"center"},n),v__default.default.createElement(f36Core.Flex,{alignItems:"center",gap:"spacingXs"},l&&v__default.default.createElement(f36Core.Flex,{className:y.secondaryNavigationWrapper,"aria-label":S.labelSecondaryNavigation,gap:"spacingXs"},l),c&&v__default.default.createElement(f36Core.Flex,{className:y.account,"aria-label":S.labelAccount,gap:"spacingXs"},c)))))}var we=v__default.default.forwardRef(io);var so={warning:a__default.default.colorWarning,negative:a__default.default.colorNegative,info:a__default.default.blue500},Ce=()=>({navbarAccount:emotion.css({cursor:"pointer",background:"none",position:"relative",outline:"none",overflow:"visible",borderRadius:"50%",border:"none",padding:0,"&:hover img":{filter:"brightness(0.9)"}},W(),B()),notificationIcon:e=>emotion.css({position:"absolute",top:0,right:0,height:a__default.default.spacingS,width:a__default.default.spacingS,borderRadius:"50%",border:`2px solid ${a__default.default.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__default.default.createElement($,{trigger:v__default.default.createElement("div",null,v__default.default.createElement(f36Tooltip.Tooltip,{placement:"bottom",content:l,showDelay:600,usePortal:!0},v__default.default.createElement(f36Core.Flex,d(p({as:"button"},A),{ref:o,className:emotion.cx(b.navbarAccount,r),testId:n,alignItems:"center","aria-label":l}),v__default.default.createElement(f36Avatar.Avatar,{src:s,initials:c,size:"small",variant:"user"}),u?v__default.default.createElement("span",{className:b.notificationIcon(x)}):null)))},t)}var oe=v__default.default.forwardRef(go);function te({ariaLabel:e}){return v__default.default.createElement(f36Skeleton.SkeletonContainer,{svgWidth:24,svgHeight:24,ariaLabel:e,backgroundColor:a__default.default.gray300,foregroundColor:a__default.default.gray200},v__default.default.createElement(f36Skeleton.SkeletonImage,{width:24,height:24,radiusX:12,radiusY:12}))}var G="1px",re=()=>emotion.css({backgroundColor:a__default.default.blue100,border:`${G} solid ${a__default.default.blue400}`,color:a__default.default.blue600,"&:focus,&:hover":{backgroundColor:a__default.default.blue100}}),vo=()=>emotion.css({border:"none",opacity:.5,pointerEvents:"none"}),Te={display:"flex",justifyContent:"center",padding:`calc(${a__default.default.spacing2Xs} - ${G}) calc(${a__default.default.spacingXs} - ${G})`,alignItems:"center",background:"none",gap:a__default.default.spacing2Xs},Le=({hasTitle:e})=>({navbarItem:emotion.css(Te,{appearance:"none",background:"none",outline:"none",border:`${G} solid transparent`,margin:0,fontSize:a__default.default.fontSizeM,lineHeight:a__default.default.lineHeightM,fontWeight:a__default.default.fontWeightMedium,position:"relative",textAlign:"left",whiteSpace:"nowrap",cursor:"pointer",hyphens:"auto",textDecoration:"none",color:a__default.default.gray800,boxSizing:"border-box",transition:`color ${a__default.default.transitionDurationShort} ${a__default.default.transitionEasingCubicBezier}`,borderRadius:a__default.default.borderRadiusMedium,height:"30px",padding:e?`${a__default.default.spacing2Xs} ${a__default.default.spacingXs}`:`calc(${a__default.default.spacing2Xs} - ${G})`,"&:focus, &:hover":{backgroundColor:a__default.default.gray200},"&:active":re(),"&:disabled":{cursor:"auto"},"& svg":{transition:`fill ${a__default.default.transitionDurationShort} ${a__default.default.transitionEasingCubicBezier}`},"& > svg, & > span":{zIndex:a__default.default.zIndexDefault}},W(),B()),isActive:re(),isDisabled:vo(),icon:emotion.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:emotion.css(Te)});var Be=()=>({navbarItemIcon:emotion.css({"&:last-child&:not(:only-child)":{marginLeft:a__default.default.spacing2Xs},"img&":{borderRadius:a__default.default.borderRadiusSmall,maxWidth:a__default.default.spacingM,maxHeight:a__default.default.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__default.default.cloneElement(e,p({className:emotion.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__default.default.createElement(t,p(p(d(p({},P),{ref:o,"data-test-id":x,className:emotion.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__default.default.createElement(T,{className:S.icon,icon:r,isActive:g}),s&&v__default.default.createElement("span",null,s),y&&v__default.default.createElement(Pe,{size:"tiny",isActive:g}));return s||(C=v__default.default.createElement("div",null,v__default.default.createElement(f36Tooltip.Tooltip,{content:n,placement:"bottom",showDelay:600,usePortal:!0},C))),q?v__default.default.createElement($,{trigger:C,testId:x,onOpen:A,onClose:b},l):C}var Po=e=>!!e.children,ae=v__default.default.forwardRef(Io);var ne=({estimatedWidth:e})=>{let o=We();return v__default.default.createElement(f36Skeleton.SkeletonContainer,{className:o.itemSkeleton,svgWidth:e,svgHeight:28,backgroundColor:a__default.default.gray300,foregroundColor:a__default.default.gray200},v__default.default.createElement(f36Skeleton.SkeletonText,{lineHeight:18,numberOfLines:1,offsetTop:2,radiusX:a__default.default.borderRadiusSmall,radiusY:a__default.default.borderRadiusSmall}))};var Fe=()=>({navbarMenuItem:emotion.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__default.default.createElement(f36Menu.Menu.Item,d(p({},l),{ref:o,as:t,className:emotion.cx(c.navbarMenuItem,s)}),r?v__default.default.createElement(T,{icon:r}):g&&He,v__default.default.createElement("span",null,n),r&&g?He:null)}var He=v__default.default.createElement(T,{icon:v__default.default.createElement(f36Icons.ArrowSquareOutIcon,null)}),Lo=e=>e.as==="a"&&e.target==="_blank",ie=v__default.default.forwardRef(To);var se=({ariaLabel:e})=>v__default.default.createElement(f36Menu.Menu.Item,null,v__default.default.createElement(f36Core.Flex,{alignItems:"center",gap:a__default.default.spacingXs},v__default.default.createElement(f36Skeleton.SkeletonContainer,{svgHeight:16,svgWidth:18},v__default.default.createElement(f36Skeleton.SkeletonImage,{width:16,height:16})),v__default.default.createElement(f36Skeleton.SkeletonContainer,{svgHeight:16,svgWidth:190,ariaLabel:e},v__default.default.createElement(f36Skeleton.SkeletonBodyText,{numberOfLines:1}))));var V=1,Ve=e=>({navbarSwitcher:({showSpaceEnv:o})=>emotion.css({color:a__default.default.gray600,flexShrink:1,fontWeight:a__default.default.fontWeightMedium,maxWidth:"50vw",minHeight:"unset",padding:`${a__default.default.spacing2Xs} ${a__default.default.spacingXs}`,"&:hover":{backgroundColor:f36Utils.hexToRGBA(a__default.default.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})=>emotion.css({gap:a__default.default.spacingXs,alignItems:"center",minWidth:0,"&:has(> span:last-child:nth-child(3))":{minWidth:"12ch"},"&:before":emotion.css(d(p({content:'""',position:"absolute",display:"block",width:`calc(8px - ${V}px)`,height:o?"26px":"unset",borderTopLeftRadius:`calc(${a__default.default.borderRadiusMedium} - ${V}px)`,borderBottomLeftRadius:`calc(${a__default.default.borderRadiusMedium} - ${V}px)`},Vo(e)),{backgroundPosition:"bottom"}))}),switcherLabelWrapper:emotion.css({height:"26px",paddingLeft:`calc(${a__default.default.spacingXs} * 2)`,alignItems:"center",gap:a__default.default.spacing2Xs,maxWidth:"100%"}),switcherLabel:emotion.css({color:"currentcolor",fontWeight:"inherit",lineHeight:"unset",display:"inline-block",flexShrink:1,minWidth:"0",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}),switcherCaret:emotion.css({flexShrink:0,minWidth:0}),switcherEnvIcon:emotion.css({minWidth:"0",[i.small]:{width:"16px",height:"16px"}})}),De=e=>{switch(e){case"trial":return a__default.default.purple700;case"non-master":return a__default.default.orange700;default:return a__default.default.green700}},Oo=e=>{let o={padding:"0",paddingRight:a__default.default.spacingXs};switch(e){case"trial":return d(p({},o),{color:a__default.default.purple700,backgroundColor:a__default.default.purple100,border:`${V}px solid ${a__default.default.purple400}`,"&:hover, &:active":{backgroundColor:a__default.default.purple200}});case"non-master":return d(p({},o),{color:a__default.default.orange700,backgroundColor:a__default.default.orange100,border:`${V}px solid ${a__default.default.orange400}`,"&:hover, &:active":{backgroundColor:a__default.default.orange200}});default:return d(p({},o),{color:a__default.default.green700,backgroundColor:a__default.default.green100,border:`${V}px solid ${a__default.default.green400}`,"&:hover, &:active":{backgroundColor:a__default.default.green200}})}},Vo=e=>{switch(e){case"trial":return {background:a__default.default.purple300};case"non-master":return {background:`linear-gradient(
|
|
23
|
+
-45deg,
|
|
24
|
+
${a__default.default.orange300} 28.57%,
|
|
25
|
+
transparent 28.57%,
|
|
26
|
+
transparent 50%,
|
|
27
|
+
${a__default.default.orange300} 50%,
|
|
28
|
+
${a__default.default.orange300} 78.57%,
|
|
29
|
+
transparent 78.57%,
|
|
30
|
+
transparent 100%
|
|
31
|
+
)`,backgroundSize:"9px 9px"};default:return {background:a__default.default.green300}}};function Re({isAlias:e,envVariant:o,className:t}){if(o==="trial")return v__default.default.createElement(f36Icons.FlaskIcon,{color:a__default.default.purple700,className:t,size:"medium"});let r=o==="master",n=r?a__default.default.green700:a__default.default.orange700;return r?v__default.default.createElement(f36Icons.RocketLaunchIcon,{color:n,className:t,size:"medium"}):e?v__default.default.createElement(f36Icons.EnvironmentAliasIcon,{color:n,className:t,size:"medium"}):v__default.default.createElement(f36Icons.EnvironmentIcon,{color:n,className:t,size:"medium"})}var U=({estimatedWidth:e})=>v__default.default.createElement(f36Skeleton.SkeletonContainer,{svgWidth:e,svgHeight:18,backgroundColor:a__default.default.gray300,foregroundColor:a__default.default.gray200},v__default.default.createElement(f36Skeleton.SkeletonText,{lineHeight:18,numberOfLines:1,radiusX:a__default.default.borderRadiusSmall,radiusY:a__default.default.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__default.default.createElement(f36Button.Button,d(p({},A),{"aria-label":c,className:emotion.cx(b.navbarSwitcher({showSpaceEnv:!x&&!t}),r),endIcon:n&&v__default.default.createElement(Re,{envVariant:n,isAlias:s,className:b.switcherEnvIcon}),ref:o,testId:l,variant:"transparent"}),v__default.default.createElement(f36Core.Flex,{className:b.switcherWrapper({showSpaceEnv:!x&&!t})},x?v__default.default.createElement(U,{estimatedWidth:148}):v__default.default.createElement(v__default.default.Fragment,null,t?v__default.default.createElement(f36Typography.Text,{className:b.switcherLabel},t):v__default.default.createElement(f36Core.Flex,{className:b.switcherLabelWrapper},v__default.default.createElement(f36Typography.Text,{className:b.switcherLabel},g),u&&v__default.default.createElement(v__default.default.Fragment,null,v__default.default.createElement(f36Core.Flex,{className:b.switcherCaret},v__default.default.createElement(f36Icons.CaretRightIcon,{size:"tiny",color:De(n)})),v__default.default.createElement(f36Typography.Text,{className:b.switcherLabel},u))))))}var ce=v__default.default.forwardRef(Yo);var ze=()=>({navbarBadge:emotion.css({display:"flex",justifyContent:"center",alignItems:"center",background:"none",border:`1px solid ${a__default.default.purple600}`,margin:0,outline:"none",fontSize:a__default.default.fontSizeS,lineHeight:a__default.default.lineHeightS,fontWeight:a__default.default.fontWeightMedium,textAlign:"center",padding:`0 ${a__default.default.spacingXs}`,textDecoration:"none",color:`${a__default.default.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__default.default.createElement(t,d(p({},l),{ref:o,className:emotion.cx(c.navbarBadge,n),"data-test-id":s}),r)}var Ue=v__default.default.forwardRef(et);var Ze=()=>({navbarMenuItem:emotion.css({display:"flex",justifyContent:"flex-start",alignItems:"center",gap:a__default.default.spacingXs}),menuList:emotion.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__default.default.createElement(f36Menu.Menu.Submenu,{onOpen:s,onClose:l},v__default.default.createElement(f36Menu.Menu.SubmenuTrigger,null,v__default.default.createElement(f36Core.Flex,{className:c.navbarMenuItem},t&&v__default.default.createElement(T,{icon:t}),v__default.default.createElement("span",null,o))),v__default.default.createElement(f36Menu.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=f36Menu.MenuDivider;h.MenuSectionTitle=f36Menu.MenuSectionTitle;h.Submenu=je;h.Switcher=ce;h.SwitcherSkeleton=U;h.Account=oe;h.AccountSkeleton=te;h.Badge=Ue;
|
|
220
32
|
|
|
221
|
-
exports.
|
|
222
|
-
exports.
|
|
33
|
+
exports.NAVBAR_HEIGHT = fe;
|
|
34
|
+
exports.Navbar = h;
|
|
35
|
+
exports.getNavbarItemActiveStyles = re;
|
|
36
|
+
exports.navbarMediaQueries = i;
|
|
223
37
|
//# sourceMappingURL=out.js.map
|
|
224
38
|
//# sourceMappingURL=index.js.map
|