@contentful/f36-navbar 4.0.2-alpha → 4.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.
- package/README.mdx +59 -12
- package/dist/esm/index.js +4 -3
- package/dist/esm/index.js.map +1 -1
- package/dist/index.d.mts +173 -0
- package/dist/index.js +7 -8
- package/dist/index.js.map +1 -1
- package/package.json +6 -5
package/dist/index.d.mts
ADDED
|
@@ -0,0 +1,173 @@
|
|
|
1
|
+
import { MenuListProps, MenuProps, MenuItemProps, MenuDivider, MenuSectionTitle } from '@contentful/f36-menu';
|
|
2
|
+
import { CommonProps, PolymorphicComponent, ExpandProps } from '@contentful/f36-core';
|
|
3
|
+
import React from 'react';
|
|
4
|
+
import { IconProps } from '@contentful/f36-icons';
|
|
5
|
+
|
|
6
|
+
declare type NavbarOwnProps = CommonProps & {
|
|
7
|
+
children?: React.ReactNode;
|
|
8
|
+
account?: React.ReactNode;
|
|
9
|
+
search?: React.ReactNode;
|
|
10
|
+
switcher?: React.ReactNode;
|
|
11
|
+
help?: React.ReactNode;
|
|
12
|
+
badge?: React.ReactNode;
|
|
13
|
+
/**
|
|
14
|
+
* Items that will be rendered on the bottom-right of the navbar.
|
|
15
|
+
* Useful for separating other navigation items from main ones, (e.g. separating "Settings" from all other navigation items).
|
|
16
|
+
*/
|
|
17
|
+
bottomRightItems?: React.ReactNode;
|
|
18
|
+
/**
|
|
19
|
+
* Items that will be rendered on the top-right of the navbar.
|
|
20
|
+
* Useful for providing additional context or actions to the user (e.g. a Feedback form link).
|
|
21
|
+
*/
|
|
22
|
+
topRightItems?: React.ReactNode;
|
|
23
|
+
/**
|
|
24
|
+
* Defines the max-width of the content inside the navbar.
|
|
25
|
+
* @default '100%'
|
|
26
|
+
*/
|
|
27
|
+
contentMaxWidth?: string;
|
|
28
|
+
};
|
|
29
|
+
declare type NavbarHTMLElementProps = Pick<React.ComponentPropsWithoutRef<'div'>, 'id'>;
|
|
30
|
+
declare type NavbarProps = NavbarHTMLElementProps & NavbarOwnProps;
|
|
31
|
+
declare const Navbar$1: React.ForwardRefExoticComponent<NavbarHTMLElementProps & CommonProps & {
|
|
32
|
+
children?: React.ReactNode;
|
|
33
|
+
account?: React.ReactNode;
|
|
34
|
+
search?: React.ReactNode;
|
|
35
|
+
switcher?: React.ReactNode;
|
|
36
|
+
help?: React.ReactNode;
|
|
37
|
+
badge?: React.ReactNode;
|
|
38
|
+
/**
|
|
39
|
+
* Items that will be rendered on the bottom-right of the navbar.
|
|
40
|
+
* Useful for separating other navigation items from main ones, (e.g. separating "Settings" from all other navigation items).
|
|
41
|
+
*/
|
|
42
|
+
bottomRightItems?: React.ReactNode;
|
|
43
|
+
/**
|
|
44
|
+
* Items that will be rendered on the top-right of the navbar.
|
|
45
|
+
* Useful for providing additional context or actions to the user (e.g. a Feedback form link).
|
|
46
|
+
*/
|
|
47
|
+
topRightItems?: React.ReactNode;
|
|
48
|
+
/**
|
|
49
|
+
* Defines the max-width of the content inside the navbar.
|
|
50
|
+
* @default '100%'
|
|
51
|
+
*/
|
|
52
|
+
contentMaxWidth?: string;
|
|
53
|
+
} & React.RefAttributes<HTMLElement>>;
|
|
54
|
+
|
|
55
|
+
declare const NavbarAccount: React.ForwardRefExoticComponent<Omit<Omit<Pick<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof React.ButtonHTMLAttributes<HTMLButtonElement>>, never>, "children" | keyof CommonProps | "username" | "avatar" | "hasNotification" | "notificationVariant"> & CommonProps & {
|
|
56
|
+
children: React.ReactNode;
|
|
57
|
+
username: string;
|
|
58
|
+
avatar: string;
|
|
59
|
+
hasNotification?: boolean;
|
|
60
|
+
/**
|
|
61
|
+
* @default 'warning'
|
|
62
|
+
*/
|
|
63
|
+
notificationVariant?: 'warning' | 'negative';
|
|
64
|
+
} & React.RefAttributes<HTMLButtonElement>>;
|
|
65
|
+
|
|
66
|
+
declare function NavbarAccountSkeleton({ ariaLabel }: {
|
|
67
|
+
ariaLabel?: string;
|
|
68
|
+
}): JSX.Element;
|
|
69
|
+
|
|
70
|
+
declare type NavbarMenuProps = {
|
|
71
|
+
trigger: React.ReactNode;
|
|
72
|
+
children?: React.ReactNode;
|
|
73
|
+
} & Pick<MenuListProps, 'testId'> & Pick<MenuProps, 'onOpen' | 'onClose'>;
|
|
74
|
+
|
|
75
|
+
declare type NavbarItemIconProps = {
|
|
76
|
+
icon: React.ReactElement<IconProps>;
|
|
77
|
+
} & Pick<IconProps, 'variant'>;
|
|
78
|
+
|
|
79
|
+
declare const NAVBAR_ITEM_DEFAULT_TAG = "button";
|
|
80
|
+
declare type NavbarItemTriggerProps = CommonProps & {
|
|
81
|
+
title: string;
|
|
82
|
+
icon?: NavbarItemIconProps['icon'];
|
|
83
|
+
isActive?: boolean;
|
|
84
|
+
as?: React.ElementType;
|
|
85
|
+
};
|
|
86
|
+
declare type NavbarItemAsMenuProps = NavbarItemTriggerProps & Pick<NavbarMenuProps, 'onOpen' | 'onClose'> & {
|
|
87
|
+
children: React.ReactNode;
|
|
88
|
+
};
|
|
89
|
+
declare type NavbarItemAsItemProps = NavbarItemTriggerProps & {
|
|
90
|
+
children?: never;
|
|
91
|
+
onOpen?: never;
|
|
92
|
+
onClose?: never;
|
|
93
|
+
};
|
|
94
|
+
declare type NavbarItemOwnProps = NavbarItemAsItemProps | NavbarItemAsMenuProps;
|
|
95
|
+
declare const NavbarItem: PolymorphicComponent<ExpandProps<NavbarItemOwnProps>, typeof NAVBAR_ITEM_DEFAULT_TAG>;
|
|
96
|
+
|
|
97
|
+
declare const NavbarItemSkeleton: ({ estimatedWidth, }: {
|
|
98
|
+
estimatedWidth: number;
|
|
99
|
+
}) => JSX.Element;
|
|
100
|
+
|
|
101
|
+
declare const NAVBAR_MENU_ITEM_DEFAULT_TAG = "button";
|
|
102
|
+
declare type NavbarMenuItemOwnProps = {
|
|
103
|
+
children?: null;
|
|
104
|
+
title: string;
|
|
105
|
+
icon?: NavbarItemIconProps['icon'];
|
|
106
|
+
as?: React.ElementType;
|
|
107
|
+
} & Omit<MenuItemProps, 'children' | 'as'>;
|
|
108
|
+
declare const NavbarMenuItem: PolymorphicComponent<ExpandProps<NavbarMenuItemOwnProps>, typeof NAVBAR_MENU_ITEM_DEFAULT_TAG>;
|
|
109
|
+
|
|
110
|
+
declare const NavbarMenuItemSkeleton: ({ ariaLabel, }: {
|
|
111
|
+
ariaLabel?: string;
|
|
112
|
+
}) => JSX.Element;
|
|
113
|
+
|
|
114
|
+
declare const NavbarSwitcher: React.ForwardRefExoticComponent<Omit<Omit<Pick<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof React.ButtonHTMLAttributes<HTMLButtonElement>>, never>, "children" | keyof CommonProps | "logo"> & CommonProps & {
|
|
115
|
+
children?: React.ReactNode;
|
|
116
|
+
/**
|
|
117
|
+
* Will be displayed instead of the default Contentful logo
|
|
118
|
+
*/
|
|
119
|
+
logo?: React.ReactNode;
|
|
120
|
+
} & React.RefAttributes<HTMLButtonElement>>;
|
|
121
|
+
|
|
122
|
+
declare const NavbarSwitcherSkeleton: ({ estimatedWidth, }: {
|
|
123
|
+
estimatedWidth: number;
|
|
124
|
+
}) => JSX.Element;
|
|
125
|
+
|
|
126
|
+
declare const NavbarSearch: React.ForwardRefExoticComponent<Omit<Omit<Pick<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof React.ButtonHTMLAttributes<HTMLButtonElement>>, never>, keyof CommonProps> & CommonProps & React.RefAttributes<HTMLButtonElement>>;
|
|
127
|
+
|
|
128
|
+
declare const NavbarSwitcherItem: React.ForwardRefExoticComponent<Omit<Omit<Pick<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "key" | keyof React.LiHTMLAttributes<HTMLLIElement>>, never>, "children" | keyof CommonProps | "isCircle" | "envVariant" | "isAlias"> & CommonProps & {
|
|
129
|
+
children?: React.ReactNode;
|
|
130
|
+
isCircle?: boolean;
|
|
131
|
+
envVariant?: 'master' | 'non-master';
|
|
132
|
+
isAlias?: boolean;
|
|
133
|
+
} & React.RefAttributes<HTMLLIElement>>;
|
|
134
|
+
|
|
135
|
+
declare const NavbarHelp: React.ForwardRefExoticComponent<Omit<Omit<Pick<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof React.ButtonHTMLAttributes<HTMLButtonElement>>, never>, "children" | keyof CommonProps> & CommonProps & {
|
|
136
|
+
children: React.ReactNode;
|
|
137
|
+
} & React.RefAttributes<HTMLButtonElement>>;
|
|
138
|
+
|
|
139
|
+
declare const NAVBAR_BADGE_DEFAULT_TAG$1 = "div";
|
|
140
|
+
declare type NavbarBadgeOwnProps = CommonProps & {
|
|
141
|
+
children?: React.ReactNode;
|
|
142
|
+
as?: React.ElementType;
|
|
143
|
+
};
|
|
144
|
+
declare const NavbarBadge: PolymorphicComponent<ExpandProps<NavbarBadgeOwnProps>, typeof NAVBAR_BADGE_DEFAULT_TAG$1>;
|
|
145
|
+
|
|
146
|
+
declare const NAVBAR_BADGE_DEFAULT_TAG = "button";
|
|
147
|
+
declare type NavbarTopbarItemOwnProps = CommonProps & {
|
|
148
|
+
children?: React.ReactNode;
|
|
149
|
+
};
|
|
150
|
+
declare const NavbarTopbarItem: PolymorphicComponent<ExpandProps<NavbarTopbarItemOwnProps>, typeof NAVBAR_BADGE_DEFAULT_TAG>;
|
|
151
|
+
|
|
152
|
+
declare type CompoundNavbar = typeof Navbar$1 & {
|
|
153
|
+
Item: typeof NavbarItem;
|
|
154
|
+
ItemSkeleton: typeof NavbarItemSkeleton;
|
|
155
|
+
MenuItem: typeof NavbarMenuItem;
|
|
156
|
+
MenuItemSkeleton: typeof NavbarMenuItemSkeleton;
|
|
157
|
+
MenuDivider: typeof MenuDivider;
|
|
158
|
+
MenuSectionTitle: typeof MenuSectionTitle;
|
|
159
|
+
Switcher: typeof NavbarSwitcher;
|
|
160
|
+
SwitcherSkeleton: typeof NavbarSwitcherSkeleton;
|
|
161
|
+
SwitcherItem: typeof NavbarSwitcherItem;
|
|
162
|
+
Search: typeof NavbarSearch;
|
|
163
|
+
Help: typeof NavbarHelp;
|
|
164
|
+
Account: typeof NavbarAccount;
|
|
165
|
+
AccountSkeleton: typeof NavbarAccountSkeleton;
|
|
166
|
+
Badge: typeof NavbarBadge;
|
|
167
|
+
TopbarItem: typeof NavbarTopbarItem;
|
|
168
|
+
};
|
|
169
|
+
declare const Navbar: CompoundNavbar;
|
|
170
|
+
|
|
171
|
+
declare const getNavbarItemActiveStyles: () => string;
|
|
172
|
+
|
|
173
|
+
export { Navbar, NavbarProps, getNavbarItemActiveStyles };
|
package/dist/index.js
CHANGED
|
@@ -1,10 +1,8 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
3
|
var f36Menu = require('@contentful/f36-menu');
|
|
6
4
|
var f36Core = require('@contentful/f36-core');
|
|
7
|
-
var
|
|
5
|
+
var N = require('react');
|
|
8
6
|
var emotion = require('emotion');
|
|
9
7
|
var a = require('@contentful/f36-tokens');
|
|
10
8
|
var f36Skeleton = require('@contentful/f36-skeleton');
|
|
@@ -12,13 +10,14 @@ var f36Utils = require('@contentful/f36-utils');
|
|
|
12
10
|
var f36Icon = require('@contentful/f36-icon');
|
|
13
11
|
var f36Icons = require('@contentful/f36-icons');
|
|
14
12
|
|
|
15
|
-
function
|
|
13
|
+
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
16
14
|
|
|
17
|
-
var
|
|
18
|
-
var a__default = /*#__PURE__*/
|
|
15
|
+
var N__default = /*#__PURE__*/_interopDefault(N);
|
|
16
|
+
var a__default = /*#__PURE__*/_interopDefault(a);
|
|
19
17
|
|
|
20
|
-
var Je=Object.defineProperty,Ke=Object.defineProperties;var eo=Object.getOwnPropertyDescriptors;var G=Object.getOwnPropertySymbols;var le=Object.prototype.hasOwnProperty,de=Object.prototype.propertyIsEnumerable;var ce=(e,o,t)=>o in e?Je(e,o,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[o]=t,s=(e,o)=>{for(var t in o||(o={}))le.call(o,t)&&ce(e,t,o[t]);if(G)for(var t of G(o))de.call(o,t)&&ce(e,t,o[t]);return e},p=(e,o)=>Ke(e,eo(o));var f=(e,o)=>{var t={};for(var r in e)le.call(e,r)&&o.indexOf(r)<0&&(t[r]=e[r]);if(e!=null&&G)for(var r of G(e))o.indexOf(r)<0&&de.call(e,r)&&(t[r]=e[r]);return t};var u={medium:"@media (min-width: 480px)",large:"@media (min-width: 768px)",xlarge:"@media (min-width: 1920px)"};var fe=e=>({containerTop:emotion.css({justifyContent:"center",backgroundColor:"#0C141C"}),containerBottom:emotion.css({justifyContent:"center",borderTop:"1px solid #21262D",backgroundColor:"#161B22"}),containerTopContent:emotion.css({width:"100%",maxWidth:e,padding:`${a__default["default"].spacingXs}`,minHeight:"2.5rem",[u.medium]:{padding:`${a__default["default"].spacingXs} ${a__default["default"].spacingM}`}}),containerBottomContent:emotion.css({width:"100%",maxWidth:e,padding:0,minHeight:"2.5rem",overflow:"auto",[u.medium]:{padding:`0 ${a__default["default"].spacing2Xs}`}})});function to(e,o){let H=e,{children:t,account:r,search:i,switcher:n,help:m,badge:d,bottomRightItems:c,topRightItems:v,contentMaxWidth:y="100%",testId:I="cf-ui-navbar"}=H,L=f(H,["children","account","search","switcher","help","badge","bottomRightItems","topRightItems","contentMaxWidth","testId"]),S=fe(y);return h__default["default"].createElement(f36Core.Box,p(s({},L),{ref:o,testId:I}),h__default["default"].createElement(f36Core.Flex,{className:S.containerTop},h__default["default"].createElement(f36Core.Flex,{className:S.containerTopContent,justifyContent:"space-between"},h__default["default"].createElement(f36Core.Flex,null,n),h__default["default"].createElement(f36Core.Flex,{alignItems:"center",gap:"spacingXs"},v,d,i,m,r))),h__default["default"].createElement(f36Core.Flex,{className:S.containerBottom},h__default["default"].createElement(f36Core.Flex,{className:S.containerBottomContent,justifyContent:"space-between"},h__default["default"].createElement(f36Core.Flex,{as:"nav","aria-label":"Main Navigation",alignItems:"stretch"},t),c&&h__default["default"].createElement(f36Core.Flex,null,c))))}var be=h__default["default"].forwardRef(to);var ge=()=>({root:emotion.css({margin:0,padding:0,background:"none",border:"none",cursor:"pointer",position:"relative",alignItems:"center",justifyContent:"center",gap:a__default["default"].spacing2Xs,"&:focus-visible":{boxShadow:a__default["default"].glowPrimary,outline:"none",borderRadius:"50%"}}),avatar:emotion.css({borderRadius:"50%",display:"block",height:"24px",width:"24px"}),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"].gray900}`,backgroundColor:e==="negative"?a__default["default"].colorNegative:a__default["default"].colorWarning,transform:"translate(30%, -30%)"})});var ue=()=>({menuList:emotion.css({minWidth:"250px"})});var C=e=>{let{trigger:o,children:t,testId:r="cf-ui-navbar-menu-list",onOpen:i,onClose:n}=e,m=ue();return h__default["default"].createElement(f36Menu.Menu,{onOpen:i,onClose:n},h__default["default"].createElement(f36Menu.Menu.Trigger,null,o),h__default["default"].createElement(f36Menu.Menu.List,{className:m.menuList,testId:r},t))};function io(e,o){let I=e,{children:t,className:r,testId:i="cf-ui-navbar-account-trigger",avatar:n,username:m,hasNotification:d,notificationVariant:c="warning"}=I,v=f(I,["children","className","testId","avatar","username","hasNotification","notificationVariant"]),y=ge();return h__default["default"].createElement(C,{trigger:h__default["default"].createElement(f36Core.Flex,p(s({},v),{as:"button",ref:o,className:emotion.cx(y.root,r),testId:i}),h__default["default"].createElement("img",{src:n,alt:`Avatar for user ${m}`,className:y.avatar}),d?h__default["default"].createElement("span",{className:y.notificationIcon(c)}):null)},t)}var K=h__default["default"].forwardRef(io);function ee({ariaLabel:e}){return h__default["default"].createElement(f36Skeleton.SkeletonContainer,{svgWidth:24,svgHeight:24,ariaLabel:e,backgroundColor:a__default["default"].gray800,foregroundColor:a__default["default"].gray700},h__default["default"].createElement(f36Skeleton.SkeletonImage,{width:24,height:24,radiusX:12,radiusY:12}))}var Ne=()=>emotion.css({"&":{color:a__default["default"].colorWhite,"& svg":{fill:a__default["default"].colorWhite}},"&::after":{content:'""',position:"absolute",width:`calc(100% - ${a__default["default"].spacingM})`,height:"2px",bottom:"0.5px",left:0,right:0,margin:"auto",backgroundColor:a__default["default"].colorWhite,zIndex:0}}),ye={display:"flex",justifyContent:"center",padding:`10px ${a__default["default"].spacingS}`,alignItems:"center",background:"none"},Ie=()=>({root:emotion.css(ye,{alignItems:"center",background:"none",border:0,margin:0,outline:"none",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:f36Utils.hexToRGBA(a__default["default"].gray300,.8),boxSizing:"border-box",transition:`color ${a__default["default"].transitionDurationShort} ${a__default["default"].transitionEasingCubicBezier}`,"&::before":{content:'""',position:"absolute",width:`calc(100% - ${a__default["default"].spacingXs})`,height:`calc(100% - ${a__default["default"].spacingS})`,top:`calc(${a__default["default"].spacingS} / 2)`,left:0,right:0,margin:"auto",borderRadius:a__default["default"].borderRadiusSmall,backgroundColor:f36Utils.hexToRGBA(a__default["default"].colorWhite,.08),opacity:0,zIndex:0,scale:0,transition:`all ${a__default["default"].transitionDurationShort} ${a__default["default"].transitionEasingCubicBezier}`},"&:hover::before":{opacity:1,scale:"1"},"&:focus-visible":{boxShadow:`inset ${a__default["default"].glowPrimary}`,borderRadius:a__default["default"].borderRadiusMedium},"&:active::before":{backgroundColor:"rgba(255, 255, 255, 0.1)"},"&:disabled":{cursor:"auto"},"& svg":{fill:f36Utils.hexToRGBA(a__default["default"].gray300,.8),transition:`fill ${a__default["default"].transitionDurationShort} ${a__default["default"].transitionEasingCubicBezier}`,"&:first-child":{display:"none",[u.large]:{display:"block"}}},"& > svg, & > span":{zIndex:a__default["default"].zIndexDefault}}),isActive:Ne(),dropdownIcon:emotion.css({paddingLeft:a__default["default"].spacing2Xs})}),xe=()=>({root:emotion.css(ye)});var Pe=()=>({root:emotion.css({"&:first-child":{marginRight:a__default["default"].spacing2Xs},"&:last-child":{marginLeft:a__default["default"].spacing2Xs},"img&":{borderRadius:a__default["default"].borderRadiusSmall,maxWidth:a__default["default"].spacingM,maxHeight:a__default["default"].spacingM}})});var F=e=>{var i,n;let{icon:o,variant:t}=e,r=Pe();return h__default["default"].cloneElement(o,{className:emotion.cx(o.props.className,r.root),size:(i=o.props.size)!=null?i:"tiny",variant:(n=o.props.variant)!=null?n:t})};var Se=f36Icon.generateIcon({name:"CircleIcon",viewBox:"0 0 24 24",path:h__default["default"].createElement("path",{d:"M11.994 6.526A5.47 5.47 0 0 0 6.526 12a5.47 5.47 0 0 0 5.468 5.473A5.476 5.476 0 0 0 17.473 12a5.477 5.477 0 0 0-5.479-5.474ZM12 15.447a3.448 3.448 0 1 1 0-6.896 3.448 3.448 0 0 1 0 6.896Z",fill:"currentFill"})});var Me=f36Icon.generateIcon({name:"ArrowDownIcon",viewBox:"0 0 12 20",path:h__default["default"].createElement("path",{d:"M3.03076 8C2.20109 8 1.73228 8.95209 2.23814 9.60971L5.20727 13.4696C5.60757 13.99 6.39223 13.99 6.79252 13.4696L9.76166 9.60971C10.2675 8.95209 9.79871 8 8.96904 8L3.03076 8Z",fill:"#9FA8B2"})});var we=f36Icon.generateIcon({name:"HelpIcon",viewBox:"0 0 24 24",path:h__default["default"].createElement(h__default["default"].Fragment,null,h__default["default"].createElement("g",{clipPath:"url(#HelpIcon_svg__a)"},h__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"})),h__default["default"].createElement("defs",null,h__default["default"].createElement("clipPath",{id:"HelpIcon_svg__a"},h__default["default"].createElement("path",{fill:"currentFill",d:"M0 0h24v24H0z"}))))});var Ee=f36Icon.generateIcon({name:"SearchIcon",viewBox:"0 0 24 24",path:h__default["default"].createElement(h__default["default"].Fragment,null,h__default["default"].createElement("g",{clipPath:"url(#SearchIcon_svg__a)"},h__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"})),h__default["default"].createElement("defs",null,h__default["default"].createElement("clipPath",{id:"SearchIcon_svg__a"},h__default["default"].createElement("path",{fill:"#fff",d:"M0 0h24v24H0z"}))))});var Ae=f36Icon.generateIcon({name:"ContentfulLogoIcon",viewBox:"0 0 21 24",path:h__default["default"].createElement("g",{transform:"translate(4 3)"},h__default["default"].createElement("path",{fill:"#fae501",d:"M3.3 13.7c-1.2-1.2-2-2.9-2-4.7S2 5.5 3.2 4.3c1-1 1-2.7 0-3.8-1-1-2.6-1-3.6 0-2 2.2-3.3 5.2-3.3 8.5s1.3 6.3 3.4 8.5c1 1 2.6 1 3.6 0 .9-1.1.9-2.7 0-3.8z"}),h__default["default"].createElement("path",{fill:"#4fb5e1",d:"M3.3 4.3c1.2-1.3 2.8-2 4.6-2s3.4.8 4.6 1.9c1 1.1 2.6 1.1 3.6 0 1-1 1-2.7 0-3.8C13.9-1.6 11-3 7.8-3S1.7-1.6-.4.5c-1 1-1 2.7 0 3.8 1 .9 2.6.9 3.7 0z"}),h__default["default"].createElement("path",{fill:"#f05751",d:"M12.4 13.7c-1.2 1.3-2.8 2-4.6 2-1.8 0-3.4-.8-4.6-2-1-1.1-2.6-1.1-3.6 0-1 1-1 2.7 0 3.8 2.1 2.1 5 3.5 8.2 3.5s6.1-1.4 8.2-3.5c1-1 1-2.7 0-3.8-1-1-2.6-1-3.6 0z"}),h__default["default"].createElement("ellipse",{cx:1.4,cy:2.4,fill:"#0681b6",rx:2.5,ry:2.6}),h__default["default"].createElement("ellipse",{cx:1.4,cy:15.6,fill:"#cd4739",rx:2.5,ry:2.6}))});var Io="button";function xo(e,o){let H=e,{as:t=Io,icon:r,title:i,children:n,className:m,isActive:d,testId:c="cf-ui-navbar-item",onOpen:v,onClose:y}=H,I=f(H,["as","icon","title","children","className","isActive","testId","onOpen","onClose"]),L=Ie(),S=h__default["default"].createElement(t,p(s({},I),{ref:o,"data-test-id":c,className:emotion.cx(L.root,d&&L.isActive,m)}),r?h__default["default"].createElement(F,{icon:r,variant:"white"}):null,h__default["default"].createElement("span",null,i),Ce(e)&&h__default["default"].createElement(Me,{className:L.dropdownIcon}));return Ce(e)?h__default["default"].createElement(C,{trigger:S,testId:c,onOpen:v,onClose:y},n):S}var Ce=e=>Boolean(e.children),te=h__default["default"].forwardRef(xo);var re=({estimatedWidth:e})=>{let o=xe();return h__default["default"].createElement(f36Skeleton.SkeletonContainer,{className:o.root,svgWidth:e,svgHeight:40,backgroundColor:a__default["default"].gray800,foregroundColor:a__default["default"].gray700},h__default["default"].createElement(f36Skeleton.SkeletonText,{lineHeight:6,numberOfLines:1,offsetTop:7,radiusX:a__default["default"].borderRadiusSmall,radiusY:a__default["default"].borderRadiusSmall}))};var Te=()=>({root:emotion.css({display:"flex",justifyContent:"flex-start",alignItems:"center"})});var Co="button";function ko(e,o){let v=e,{as:t=Co,icon:r,title:i,className:n}=v,m=f(v,["as","icon","title","className"]),d=Te(),c=To(e);return h__default["default"].createElement(f36Menu.Menu.Item,p(s({},m),{ref:o,as:t,className:emotion.cx(d.root,n)}),r?h__default["default"].createElement(F,{icon:r,variant:"secondary"}):c&&Re,h__default["default"].createElement("span",null,i),r&&c?Re:null)}var Re=h__default["default"].createElement(F,{icon:h__default["default"].createElement(f36Icons.ExternalLinkIcon,null),variant:"muted"}),To=e=>e.as==="a"&&e.target==="_blank",ne=h__default["default"].forwardRef(ko);var ae=({ariaLabel:e})=>h__default["default"].createElement(f36Menu.Menu.Item,null,h__default["default"].createElement(f36Core.Flex,{alignItems:"center",gap:a__default["default"].spacingXs},h__default["default"].createElement(f36Skeleton.SkeletonContainer,{svgHeight:16,svgWidth:18},h__default["default"].createElement(f36Skeleton.SkeletonImage,{width:16,height:16})),h__default["default"].createElement(f36Skeleton.SkeletonContainer,{svgHeight:16,svgWidth:190,ariaLabel:e},h__default["default"].createElement(f36Skeleton.SkeletonBodyText,{numberOfLines:1}))));var _e=()=>({root:emotion.css({margin:0,padding:0,background:"none",border:"none",color:a__default["default"].gray300,cursor:"pointer",fontSize:a__default["default"].fontSizeS,fontWeight:a__default["default"].fontWeightMedium,position:"relative","&:after":{content:'""',border:"1px solid #353A41",boxSizing:"border-box",height:"16px",right:"-1px",position:"absolute",width:0},"&:last-child:after":{display:"none"},"&:focus-visible":{boxShadow:`0px 0px 0px 2px ${a__default["default"].colorBlack}, 0px 0px 0px 5px ${a__default["default"].blue300}`,outline:"none",borderRadius:a__default["default"].borderRadiusMedium},"&:hover li":{backgroundColor:f36Utils.hexToRGBA(a__default["default"].colorWhite,.15)}}),breadcrumbs:emotion.css({listStyleType:"none",margin:0,padding:0,position:"relative"}),menuIcon:emotion.css({display:"none",[u.medium]:{display:"block"}})});function Do(e,o){let c=e,{children:t,className:r,logo:i,testId:n="cf-ui-navbar-switcher"}=c,m=f(c,["children","className","logo","testId"]),d=_e();return h__default["default"].createElement(f36Core.Flex,p(s({},m),{as:"button",ref:o,className:emotion.cx(d.root,r),testId:n,alignItems:"center",fullHeight:!0,gap:"spacingXs"}),i||h__default["default"].createElement(Ae,null),h__default["default"].createElement(f36Icons.MenuIcon,{className:d.menuIcon,size:"small",variant:"white"}),h__default["default"].createElement(f36Core.Flex,{as:"ul",alignItems:"center",className:d.breadcrumbs},t))}var se=h__default["default"].forwardRef(Do);var pe=({estimatedWidth:e})=>h__default["default"].createElement(f36Skeleton.SkeletonContainer,{svgWidth:e,svgHeight:24,backgroundColor:a__default["default"].gray800,foregroundColor:a__default["default"].gray700},h__default["default"].createElement(f36Skeleton.SkeletonDisplayText,{lineHeight:24,numberOfLines:1,radiusX:12,radiusY:12}));var ze=()=>({root:emotion.css({margin:0,padding:0,background:"none",border:"none",cursor:"pointer",alignItems:"center",justifyContent:"center",minWidth:a__default["default"].spacingL,transition:`color ${a__default["default"].transitionDurationShort} ${a__default["default"].transitionEasingCubicBezier}`,"& svg":{fill:a__default["default"].gray300,transition:`fill ${a__default["default"].transitionDurationShort} ${a__default["default"].transitionEasingCubicBezier}`},"&:hover, & svg:hover":{color:a__default["default"].gray100,fill:a__default["default"].gray100},"&:focus-visible":{boxShadow:a__default["default"].glowPrimary,outline:"none",borderRadius:a__default["default"].borderRadiusMedium}})});function Uo(e,o){let m=e,{className:t,testId:r="cf-ui-navbar-search"}=m,i=f(m,["className","testId"]),n=ze();return h__default["default"].createElement(f36Core.Flex,p(s({"aria-label":"Quick Search"},i),{as:"button",ref:o,className:emotion.cx(n.root,t),testId:r}),h__default["default"].createElement(Ee,{size:"medium",variant:"white"}))}var Fe=h__default["default"].forwardRef(Uo);var De={display:"none","&:first-child":{display:"block"},[u.medium]:{display:"block","&:first-child":{display:"none"}}},Oe=()=>({breadcrumbsItem:emotion.css({position:"relative",alignItems:"center",justifyContent:"center",backgroundColor:f36Utils.hexToRGBA(a__default["default"].gray100,.1),boxShadow:`0px 0px 0px 2px ${a__default["default"].colorBlack}`,display:"inline-flex",margin:0,minWidth:0,padding:`0 ${a__default["default"].spacingXs}`,height:a__default["default"].spacingL,borderRadius:"3rem",zIndex:2,transition:`background-color ${a__default["default"].transitionDurationShort} ${a__default["default"].transitionEasingCubicBezier}`,whiteSpace:"nowrap","&:not(:first-child)":{clipPath:"path('M0 24C6 24 10 18 10 10C10 5 6 0 0 0H400C400 0 400 5 400 24H0Z')"},"&:first-child":{minWidth:"24px"},"&:nth-child(2)":{zIndex:1,left:`-${a__default["default"].spacingXs}`,paddingLeft:a__default["default"].spacingM,borderRadius:"0 3rem 3rem 0",span:{maxWidth:"80px",textOverflow:"ellipsis",overflow:"hidden",[u.large]:{maxWidth:"100%"}}},"&:nth-child(3)":{left:`-${a__default["default"].spacingM}`,paddingLeft:a__default["default"].spacingM,borderRadius:"0 3rem 3rem 0",fontFamily:a__default["default"].fontStackMonospace,fontSize:a__default["default"].fontSizeS,fontWeight:a__default["default"].fontWeightMedium,zIndex:0,span:{maxWidth:"40px",textOverflow:"ellipsis",overflow:"hidden",[u.large]:{maxWidth:"100%"}},"> div":{[u.medium]:{gap:a__default["default"].spacing2Xs}}}}),breadcrumbsItemCircle:emotion.css({borderRadius:"50%",color:a__default["default"].gray400,padding:0,display:"flex",justifyContent:"center",fontSize:"11px",width:a__default["default"].spacingL,height:a__default["default"].spacingL}),breadcrumbsItemEnvMaster:emotion.css({color:a__default["default"].green400," svg":p(s({},De),{fill:a__default["default"].green400})}),breadcrumbsItemEnvNonMaster:emotion.css({color:a__default["default"].orange400," svg":p(s({},De),{fill:a__default["default"].orange400})})});function $e({isAlias:e}){return h__default["default"].createElement(h__default["default"].Fragment,null,h__default["default"].createElement(Se,{key:"mobile-icon",size:"tiny"}),e?h__default["default"].createElement(f36Icons.EnvironmentAliasIcon,{key:"full-icon",size:"tiny"}):h__default["default"].createElement(f36Icons.EnvironmentIcon,{key:"full-icon",size:"tiny"}))}function Jo(e,o){let I=e,{children:t,isCircle:r,className:i,envVariant:n,isAlias:m,testId:d="cf-ui-navbar-switcher-item"}=I,c=f(I,["children","isCircle","className","envVariant","isAlias","testId"]),v=Oe(),y=emotion.cx(v.breadcrumbsItem,i,{[v.breadcrumbsItemCircle]:r,[v.breadcrumbsItemEnvMaster]:n==="master",[v.breadcrumbsItemEnvNonMaster]:n==="non-master"});return h__default["default"].createElement("li",p(s({},c),{ref:o,className:y,"data-test-id":d}),h__default["default"].createElement(f36Core.Flex,{fullHeight:!0,justifyContent:"center",alignItems:"center"},n&&h__default["default"].createElement($e,{isAlias:m}),h__default["default"].createElement("span",null,t)))}var Ge=h__default["default"].forwardRef(Jo);var Ve=()=>({root:emotion.css({margin:0,padding:0,background:"none",border:"none",cursor:"pointer",alignItems:"center",justifyContent:"center",color:a__default["default"].gray300,fontSize:0,gap:0,minWidth:a__default["default"].spacingL,transition:`color ${a__default["default"].transitionDurationShort} ${a__default["default"].transitionEasingCubicBezier}`,[u.medium]:{fontSize:a__default["default"].fontSizeS,gap:a__default["default"].spacing2Xs,fontWeight:a__default["default"].fontWeightMedium,marginRight:a__default["default"].spacingXs},"&:focus-visible":{boxShadow:a__default["default"].glowPrimary,outline:"none",borderRadius:a__default["default"].borderRadiusMedium},"&:hover, &:hover svg":{color:a__default["default"].gray100,fill:a__default["default"].gray100},"& svg":{fill:a__default["default"].gray300,transition:`fill ${a__default["default"].transitionDurationShort} ${a__default["default"].transitionEasingCubicBezier}`}})});function tt(e,o){let d=e,{children:t,className:r,testId:i="cf-ui-navbar-help-trigger"}=d,n=f(d,["children","className","testId"]),m=Ve();return h__default["default"].createElement(C,{testId:"cf-ui-navbar-help-menu",trigger:h__default["default"].createElement(f36Core.Flex,p(s({"aria-label":"Help Menu"},n),{as:"button",ref:o,className:emotion.cx(m.root,r),testId:i}),h__default["default"].createElement(we,{size:"medium",variant:"white"}),"Help")},t)}var Xe=h__default["default"].forwardRef(tt);var Ue=()=>({root:emotion.css({display:"flex",justifyContent:"center",alignItems:"center",background:"none",border:`1px solid ${a__default["default"].purple400}`,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"].purple400}!important`,borderRadius:"1.75rem"})});var at="div";function it(e,o){let c=e,{as:t=at,children:r,className:i,testId:n="cf-ui-navbar-badge"}=c,m=f(c,["as","children","className","testId"]),d=Ue();return h__default["default"].createElement(t,p(s({},m),{ref:o,className:emotion.cx(d.root,i),"data-test-id":n}),r)}var Ze=h__default["default"].forwardRef(it);var qe=()=>({root:emotion.css({margin:0,background:"none",border:"none",cursor:"pointer",display:"flex",gap:a__default["default"].spacing2Xs,alignItems:"center",color:a__default["default"].gray300,padding:`0 ${a__default["default"].spacing2Xs}`,minHeight:a__default["default"].spacingL,fontSize:a__default["default"].fontSizeS,fontWeight:a__default["default"].fontWeightMedium,"&:hover":{color:a__default["default"].gray100},"&:focus-visible":{boxShadow:a__default["default"].glowPrimary,outline:"none",borderRadius:a__default["default"].borderRadiusMedium},svg:{fill:"currentColor"}})});var mt="button";function ct(e,o){let c=e,{as:t=mt,children:r,className:i,testId:n="cf-ui-navbar-topbar-item"}=c,m=f(c,["as","children","className","testId"]),d=qe();return h__default["default"].createElement(t,p(s({},m),{ref:o,className:emotion.cx(d.root,i),"data-test-id":n}),r)}var Qe=h__default["default"].forwardRef(ct);var b=be;b.Item=te;b.ItemSkeleton=re;b.MenuItem=ne;b.MenuItemSkeleton=ae;b.MenuDivider=f36Menu.MenuDivider;b.MenuSectionTitle=f36Menu.MenuSectionTitle;b.Switcher=se;b.SwitcherSkeleton=pe;b.SwitcherItem=Ge;b.Search=Fe;b.Help=Xe;b.Account=K;b.AccountSkeleton=ee;b.Badge=Ze;b.TopbarItem=Qe;
|
|
18
|
+
var Ke=Object.defineProperty,eo=Object.defineProperties;var oo=Object.getOwnPropertyDescriptors;var V=Object.getOwnPropertySymbols;var de=Object.prototype.hasOwnProperty,fe=Object.prototype.propertyIsEnumerable;var le=(e,o,t)=>o in e?Ke(e,o,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[o]=t,s=(e,o)=>{for(var t in o||(o={}))de.call(o,t)&&le(e,t,o[t]);if(V)for(var t of V(o))fe.call(o,t)&&le(e,t,o[t]);return e},p=(e,o)=>eo(e,oo(o));var f=(e,o)=>{var t={};for(var r in e)de.call(e,r)&&o.indexOf(r)<0&&(t[r]=e[r]);if(e!=null&&V)for(var r of V(e))o.indexOf(r)<0&&fe.call(e,r)&&(t[r]=e[r]);return t};var g={medium:"@media (min-width: 480px)",large:"@media (min-width: 768px)",xlarge:"@media (min-width: 1920px)"},v=(e=a__default.default.glowPrimary)=>({"&:focus":{boxShadow:e},"&:focus:not(:focus-visible)":{boxShadow:"unset"},"&:focus-visible":{boxShadow:e}});var be=e=>({containerTop:emotion.css({justifyContent:"center",backgroundColor:"#0C141C"}),containerBottom:emotion.css({justifyContent:"center",borderTop:"1px solid #21262D",backgroundColor:"#161B22"}),containerTopContent:emotion.css({width:"100%",maxWidth:e,padding:`${a__default.default.spacingXs}`,minHeight:"2.5rem",[g.medium]:{padding:`${a__default.default.spacingXs} ${a__default.default.spacingM}`}}),containerBottomContent:emotion.css({width:"100%",maxWidth:e,padding:0,minHeight:"2.5rem",overflow:"auto",[g.medium]:{padding:`0 ${a__default.default.spacing2Xs}`}})});function no(e,o){let F=e,{children:t,account:r,search:i,switcher:n,help:m,badge:d,bottomRightItems:c,topRightItems:h,contentMaxWidth:I="100%",testId:x="cf-ui-navbar"}=F,H=f(F,["children","account","search","switcher","help","badge","bottomRightItems","topRightItems","contentMaxWidth","testId"]),w=be(I);return N__default.default.createElement(f36Core.Box,p(s({},H),{ref:o,testId:x}),N__default.default.createElement(f36Core.Flex,{className:w.containerTop},N__default.default.createElement(f36Core.Flex,{className:w.containerTopContent,justifyContent:"space-between"},N__default.default.createElement(f36Core.Flex,null,n),N__default.default.createElement(f36Core.Flex,{alignItems:"center",gap:"spacingXs"},h,d,i,m,r))),N__default.default.createElement(f36Core.Flex,{className:w.containerBottom},N__default.default.createElement(f36Core.Flex,{className:w.containerBottomContent,justifyContent:"space-between"},N__default.default.createElement(f36Core.Flex,{as:"nav","aria-label":"Main Navigation",alignItems:"stretch"},t),c&&N__default.default.createElement(f36Core.Flex,null,c))))}var ge=N__default.default.forwardRef(no);var ue=()=>({root:emotion.css({margin:0,padding:0,background:"none",border:"none",cursor:"pointer",position:"relative",alignItems:"center",justifyContent:"center",gap:a__default.default.spacing2Xs,outline:"none",borderRadius:"50%"},v()),avatar:emotion.css({borderRadius:"50%",display:"block",height:"24px",width:"24px"}),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.gray900}`,backgroundColor:e==="negative"?a__default.default.colorNegative:a__default.default.colorWarning,transform:"translate(30%, -30%)"})});var he=()=>({menuList:emotion.css({minWidth:"250px"})});var T=e=>{let{trigger:o,children:t,testId:r="cf-ui-navbar-menu-list",onOpen:i,onClose:n}=e,m=he();return N__default.default.createElement(f36Menu.Menu,{onOpen:i,onClose:n},N__default.default.createElement(f36Menu.Menu.Trigger,null,o),N__default.default.createElement(f36Menu.Menu.List,{className:m.menuList,testId:r},t))};function po(e,o){let x=e,{children:t,className:r,testId:i="cf-ui-navbar-account-trigger",avatar:n,username:m,hasNotification:d,notificationVariant:c="warning"}=x,h=f(x,["children","className","testId","avatar","username","hasNotification","notificationVariant"]),I=ue();return N__default.default.createElement(T,{trigger:N__default.default.createElement(f36Core.Flex,p(s({},h),{as:"button",ref:o,className:emotion.cx(I.root,r),testId:i}),N__default.default.createElement("img",{src:n,alt:`Avatar for user ${m}`,className:I.avatar}),d?N__default.default.createElement("span",{className:I.notificationIcon(c)}):null)},t)}var ee=N__default.default.forwardRef(po);function oe({ariaLabel:e}){return N__default.default.createElement(f36Skeleton.SkeletonContainer,{svgWidth:24,svgHeight:24,ariaLabel:e,backgroundColor:a__default.default.gray800,foregroundColor:a__default.default.gray700},N__default.default.createElement(f36Skeleton.SkeletonImage,{width:24,height:24,radiusX:12,radiusY:12}))}var ye=()=>emotion.css({"&":{color:a__default.default.colorWhite,"& svg":{fill:a__default.default.colorWhite}},"&::after":{content:'""',position:"absolute",width:`calc(100% - ${a__default.default.spacingM})`,height:"2px",bottom:"0.5px",left:0,right:0,margin:"auto",backgroundColor:a__default.default.colorWhite,zIndex:0}}),Ie={display:"flex",justifyContent:"center",padding:`10px ${a__default.default.spacingS}`,alignItems:"center",background:"none"},xe=()=>({root:emotion.css(Ie,{alignItems:"center",background:"none",border:0,margin:0,outline:"none",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:f36Utils.hexToRGBA(a__default.default.gray300,.8),boxSizing:"border-box",transition:`color ${a__default.default.transitionDurationShort} ${a__default.default.transitionEasingCubicBezier}`,borderRadius:a__default.default.borderRadiusMedium,"&::before":{content:'""',position:"absolute",width:`calc(100% - ${a__default.default.spacingXs})`,height:`calc(100% - ${a__default.default.spacingS})`,top:`calc(${a__default.default.spacingS} / 2)`,left:0,right:0,margin:"auto",borderRadius:a__default.default.borderRadiusSmall,backgroundColor:f36Utils.hexToRGBA(a__default.default.colorWhite,.08),opacity:0,zIndex:0,scale:0,transition:`all ${a__default.default.transitionDurationShort} ${a__default.default.transitionEasingCubicBezier}`},"&:hover::before":{opacity:1,scale:"1"},"&:active::before":{backgroundColor:"rgba(255, 255, 255, 0.1)"},"&:disabled":{cursor:"auto"},"& svg":{fill:f36Utils.hexToRGBA(a__default.default.gray300,.8),transition:`fill ${a__default.default.transitionDurationShort} ${a__default.default.transitionEasingCubicBezier}`,"&:first-child":{display:"none",[g.large]:{display:"block"}}},"& > svg, & > span":{zIndex:a__default.default.zIndexDefault}},v(`inset ${a__default.default.glowPrimary}`)),isActive:ye(),dropdownIcon:emotion.css({paddingLeft:a__default.default.spacing2Xs})}),Pe=()=>({root:emotion.css(Ie)});var Se=()=>({root:emotion.css({"&:first-child":{marginRight:a__default.default.spacing2Xs},"&:last-child":{marginLeft:a__default.default.spacing2Xs},"img&":{borderRadius:a__default.default.borderRadiusSmall,maxWidth:a__default.default.spacingM,maxHeight:a__default.default.spacingM}})});var z=e=>{var i,n;let{icon:o,variant:t}=e,r=Se();return N__default.default.cloneElement(o,{className:emotion.cx(o.props.className,r.root),size:(i=o.props.size)!=null?i:"tiny",variant:(n=o.props.variant)!=null?n:t})};var Me=f36Icon.generateIcon({name:"CircleIcon",viewBox:"0 0 24 24",path:N__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 we=f36Icon.generateIcon({name:"ArrowDownIcon",viewBox:"0 0 12 20",path:N__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 Ee=f36Icon.generateIcon({name:"HelpIcon",viewBox:"0 0 24 24",path:N__default.default.createElement(N__default.default.Fragment,null,N__default.default.createElement("g",{clipPath:"url(#HelpIcon_svg__a)"},N__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"})),N__default.default.createElement("defs",null,N__default.default.createElement("clipPath",{id:"HelpIcon_svg__a"},N__default.default.createElement("path",{fill:"currentFill",d:"M0 0h24v24H0z"}))))});var Ae=f36Icon.generateIcon({name:"SearchIcon",viewBox:"0 0 24 24",path:N__default.default.createElement(N__default.default.Fragment,null,N__default.default.createElement("g",{clipPath:"url(#SearchIcon_svg__a)"},N__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"})),N__default.default.createElement("defs",null,N__default.default.createElement("clipPath",{id:"SearchIcon_svg__a"},N__default.default.createElement("path",{fill:"#fff",d:"M0 0h24v24H0z"}))))});var Ce=f36Icon.generateIcon({name:"ContentfulLogoIcon",viewBox:"0 0 24 24",path:N__default.default.createElement(N__default.default.Fragment,null,N__default.default.createElement("g",{clipPath:"url(#a)"},N__default.default.createElement("path",{d:"M8.71 3.007c.844.843 1.17 2.078.844 3.228a6.683 6.683 0 0 1 3.444-.953h.025a6.701 6.701 0 0 1 4.743 1.988 2.637 2.637 0 0 0 3.73.093 2.637 2.637 0 0 0 .094-3.731c-.025-.027-.052-.052-.08-.08A11.95 11.95 0 0 0 13.036.006h-.046a11.92 11.92 0 0 0-6.691 2.038h.074c.876 0 1.715.346 2.335.966l.002-.002Z",fill:"#1773EB"}),N__default.default.createElement("path",{d:"M19.593 16.006c-.696 0-1.365.276-1.86.765a6.706 6.706 0 0 1-4.732 1.953h-.025a6.617 6.617 0 0 1-3.446-.97c.079.287.117.584.117.882a3.3 3.3 0 0 1-3.299 3.3h-.087a11.929 11.929 0 0 0 6.696 2.07h.046a11.934 11.934 0 0 0 8.45-3.486 2.64 2.64 0 0 0-1.857-4.514h-.003Z",fill:"#E44F20"}),N__default.default.createElement("path",{d:"M4.013 16.301a3.283 3.283 0 0 1 2.335-.967c.303 0 .604.041.893.123a6.696 6.696 0 0 1 .014-6.928 3.302 3.302 0 0 1-4.176-3.187v-.09a12 12 0 0 0-.033 13.452v-.068c0-.877.344-1.715.967-2.335Z",fill:"#FFDA00"}),N__default.default.createElement("path",{d:"M6.378 2.627c-.751 0-1.275.311-1.912.948-.606.606-.797 1.136-.8 1.767a2.712 2.712 0 1 0 5.427-.003A2.713 2.713 0 0 0 6.38 2.627h-.003Z",fill:"#1773EB"}),N__default.default.createElement("path",{d:"M3.628 18.639c0 .748.311 1.275.948 1.912.606.606 1.136.8 1.767.8a2.703 2.703 0 1 0-.017-5.408 2.703 2.703 0 0 0-2.695 2.704v-.008h-.003Z",fill:"#E44F20"})),N__default.default.createElement("defs",null,N__default.default.createElement("clipPath",{id:"a"},N__default.default.createElement("path",{fill:"#fff",d:"M0 0h24v24H0z"}))))});var Po="button";function So(e,o){let F=e,{as:t=Po,icon:r,title:i,children:n,className:m,isActive:d,testId:c="cf-ui-navbar-item",onOpen:h,onClose:I}=F,x=f(F,["as","icon","title","children","className","isActive","testId","onOpen","onClose"]),H=xe(),w=N__default.default.createElement(t,p(s({},x),{ref:o,"data-test-id":c,className:emotion.cx(H.root,d&&H.isActive,m)}),r?N__default.default.createElement(z,{icon:r,variant:"white"}):null,N__default.default.createElement("span",null,i),ke(e)&&N__default.default.createElement(we,{className:H.dropdownIcon}));return ke(e)?N__default.default.createElement(T,{trigger:w,testId:c,onOpen:h,onClose:I},n):w}var ke=e=>!!e.children,re=N__default.default.forwardRef(So);var ne=({estimatedWidth:e})=>{let o=Pe();return N__default.default.createElement(f36Skeleton.SkeletonContainer,{className:o.root,svgWidth:e,svgHeight:40,backgroundColor:a__default.default.gray800,foregroundColor:a__default.default.gray700},N__default.default.createElement(f36Skeleton.SkeletonText,{lineHeight:6,numberOfLines:1,offsetTop:7,radiusX:a__default.default.borderRadiusSmall,radiusY:a__default.default.borderRadiusSmall}))};var Re=()=>({root:emotion.css({display:"flex",justifyContent:"flex-start",alignItems:"center"})});var To="button";function Ro(e,o){let h=e,{as:t=To,icon:r,title:i,className:n}=h,m=f(h,["as","icon","title","className"]),d=Re(),c=Bo(e);return N__default.default.createElement(f36Menu.Menu.Item,p(s({},m),{ref:o,as:t,className:emotion.cx(d.root,n)}),r?N__default.default.createElement(z,{icon:r,variant:"secondary"}):c&&Be,N__default.default.createElement("span",null,i),r&&c?Be:null)}var Be=N__default.default.createElement(z,{icon:N__default.default.createElement(f36Icons.ExternalLinkIcon,null),variant:"muted"}),Bo=e=>e.as==="a"&&e.target==="_blank",ae=N__default.default.forwardRef(Ro);var ie=({ariaLabel:e})=>N__default.default.createElement(f36Menu.Menu.Item,null,N__default.default.createElement(f36Core.Flex,{alignItems:"center",gap:a__default.default.spacingXs},N__default.default.createElement(f36Skeleton.SkeletonContainer,{svgHeight:16,svgWidth:18},N__default.default.createElement(f36Skeleton.SkeletonImage,{width:16,height:16})),N__default.default.createElement(f36Skeleton.SkeletonContainer,{svgHeight:16,svgWidth:190,ariaLabel:e},N__default.default.createElement(f36Skeleton.SkeletonBodyText,{numberOfLines:1}))));var Le=()=>({root:emotion.css({margin:0,padding:0,background:"none",border:"none",color:a__default.default.gray300,cursor:"pointer",fontSize:a__default.default.fontSizeS,fontWeight:a__default.default.fontWeightMedium,position:"relative",outline:"none",borderRadius:a__default.default.borderRadiusMedium,"&: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:f36Utils.hexToRGBA(a__default.default.colorWhite,.15)}},v(`0px 0px 0px 2px ${a__default.default.colorBlack}, 0px 0px 0px 5px ${a__default.default.blue300}`)),breadcrumbs:emotion.css({listStyleType:"none",margin:0,padding:0,position:"relative"}),menuIcon:emotion.css({display:"none",[g.medium]:{display:"block"}})});function $o(e,o){let c=e,{children:t,className:r,logo:i,testId:n="cf-ui-navbar-switcher"}=c,m=f(c,["children","className","logo","testId"]),d=Le();return N__default.default.createElement(f36Core.Flex,p(s({},m),{as:"button",ref:o,className:emotion.cx(d.root,r),testId:n,alignItems:"center",fullHeight:!0,gap:"spacingXs"}),i||N__default.default.createElement(Ce,null),N__default.default.createElement(f36Icons.MenuIcon,{className:d.menuIcon,size:"small",variant:"white"}),N__default.default.createElement(f36Core.Flex,{as:"ul",alignItems:"center",className:d.breadcrumbs},t))}var pe=N__default.default.forwardRef($o);var me=({estimatedWidth:e})=>N__default.default.createElement(f36Skeleton.SkeletonContainer,{svgWidth:e,svgHeight:24,backgroundColor:a__default.default.gray800,foregroundColor:a__default.default.gray700},N__default.default.createElement(f36Skeleton.SkeletonDisplayText,{lineHeight:24,numberOfLines:1,radiusX:12,radiusY:12}));var Oe=()=>({root:emotion.css({margin:0,padding:0,background:"none",border:"none",cursor:"pointer",alignItems:"center",justifyContent:"center",minWidth:a__default.default.spacingL,transition:`color ${a__default.default.transitionDurationShort} ${a__default.default.transitionEasingCubicBezier}`,outline:"none",borderRadius:a__default.default.borderRadiusMedium,"& svg":{fill:a__default.default.gray300,transition:`fill ${a__default.default.transitionDurationShort} ${a__default.default.transitionEasingCubicBezier}`},"&:hover, & svg:hover":{color:a__default.default.gray100,fill:a__default.default.gray100}},v())});function jo(e,o){let m=e,{className:t,testId:r="cf-ui-navbar-search"}=m,i=f(m,["className","testId"]),n=Oe();return N__default.default.createElement(f36Core.Flex,p(s({"aria-label":"Quick Search"},i),{as:"button",ref:o,className:emotion.cx(n.root,t),testId:r}),N__default.default.createElement(Ae,{size:"medium",variant:"white"}))}var ze=N__default.default.forwardRef(jo);var De={display:"none","&:first-child":{display:"block"},[g.medium]:{display:"block","&:first-child":{display:"none"}}},$e=()=>({breadcrumbsItem:emotion.css({position:"relative",alignItems:"center",justifyContent:"center",backgroundColor:f36Utils.hexToRGBA(a__default.default.gray100,.1),boxShadow:`0px 0px 0px 2px ${a__default.default.colorBlack}`,display:"inline-flex",margin:0,minWidth:0,padding:`0 ${a__default.default.spacingXs}`,height:a__default.default.spacingL,borderRadius:"3rem",zIndex:2,transition:`background-color ${a__default.default.transitionDurationShort} ${a__default.default.transitionEasingCubicBezier}`,whiteSpace:"nowrap","&:not(:first-child)":{clipPath:"path('M0 24C6 24 10 18 10 10C10 5 6 0 0 0H400C400 0 400 5 400 24H0Z')"},"&:first-child":{minWidth:"24px"},"&:nth-child(2)":{zIndex:1,left:`-${a__default.default.spacingXs}`,paddingLeft:a__default.default.spacingM,borderRadius:"0 3rem 3rem 0",span:{maxWidth:"80px",textOverflow:"ellipsis",overflow:"hidden",[g.large]:{maxWidth:"100%"}}},"&:nth-child(3)":{left:`-${a__default.default.spacingM}`,paddingLeft:a__default.default.spacingM,borderRadius:"0 3rem 3rem 0",fontFamily:a__default.default.fontStackMonospace,fontSize:a__default.default.fontSizeS,fontWeight:a__default.default.fontWeightMedium,zIndex:0,span:{maxWidth:"40px",textOverflow:"ellipsis",overflow:"hidden",[g.large]:{maxWidth:"100%"}},"> div":{[g.medium]:{gap:a__default.default.spacing2Xs}}}}),breadcrumbsItemCircle:emotion.css({borderRadius:"50%",color:a__default.default.gray400,padding:0,display:"flex",justifyContent:"center",fontSize:"11px",width:a__default.default.spacingL,height:a__default.default.spacingL}),breadcrumbsItemEnvMaster:emotion.css({color:a__default.default.green400," svg":p(s({},De),{fill:a__default.default.green400})}),breadcrumbsItemEnvNonMaster:emotion.css({color:a__default.default.orange400,svg:p(s({},De),{fill:a__default.default.orange400})})});function Ge({isAlias:e}){return N__default.default.createElement(N__default.default.Fragment,null,N__default.default.createElement(Me,{key:"mobile-icon",size:"tiny"}),e?N__default.default.createElement(f36Icons.EnvironmentAliasIcon,{key:"full-icon",size:"tiny"}):N__default.default.createElement(f36Icons.EnvironmentIcon,{key:"full-icon",size:"tiny"}))}function et(e,o){let x=e,{children:t,isCircle:r,className:i,envVariant:n,isAlias:m,testId:d="cf-ui-navbar-switcher-item"}=x,c=f(x,["children","isCircle","className","envVariant","isAlias","testId"]),h=$e(),I=emotion.cx(h.breadcrumbsItem,i,{[h.breadcrumbsItemCircle]:r,[h.breadcrumbsItemEnvMaster]:n==="master",[h.breadcrumbsItemEnvNonMaster]:n==="non-master"});return N__default.default.createElement("li",p(s({},c),{ref:o,className:I,"data-test-id":d}),N__default.default.createElement(f36Core.Flex,{fullHeight:!0,justifyContent:"center",alignItems:"center"},n&&N__default.default.createElement(Ge,{isAlias:m}),N__default.default.createElement("span",null,t)))}var Ve=N__default.default.forwardRef(et);var Xe=()=>({root:emotion.css({margin:0,padding:0,background:"none",border:"none",cursor:"pointer",alignItems:"center",justifyContent:"center",color:a__default.default.gray300,fontSize:0,gap:0,minWidth:a__default.default.spacingL,transition:`color ${a__default.default.transitionDurationShort} ${a__default.default.transitionEasingCubicBezier}`,outline:"none",borderRadius:a__default.default.borderRadiusMedium,[g.medium]:{fontSize:a__default.default.fontSizeS,gap:a__default.default.spacing2Xs,fontWeight:a__default.default.fontWeightMedium,marginRight:a__default.default.spacingXs},"&:hover, &:hover svg":{color:a__default.default.gray100,fill:a__default.default.gray100},"& svg":{fill:a__default.default.gray300,transition:`fill ${a__default.default.transitionDurationShort} ${a__default.default.transitionEasingCubicBezier}`}},v())});function nt(e,o){let d=e,{children:t,className:r,testId:i="cf-ui-navbar-help-trigger"}=d,n=f(d,["children","className","testId"]),m=Xe();return N__default.default.createElement(T,{testId:"cf-ui-navbar-help-menu",trigger:N__default.default.createElement(f36Core.Flex,p(s({"aria-label":"Help Menu"},n),{as:"button",ref:o,className:emotion.cx(m.root,r),testId:i}),N__default.default.createElement(Ee,{size:"medium",variant:"white"}),"Help")},t)}var Ue=N__default.default.forwardRef(nt);var Ze=()=>({root:emotion.css({display:"flex",justifyContent:"center",alignItems:"center",background:"none",border:`1px solid ${a__default.default.purple400}`,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.purple400}!important`,borderRadius:"1.75rem"})});var st="div";function pt(e,o){let c=e,{as:t=st,children:r,className:i,testId:n="cf-ui-navbar-badge"}=c,m=f(c,["as","children","className","testId"]),d=Ze();return N__default.default.createElement(t,p(s({},m),{ref:o,className:emotion.cx(d.root,i),"data-test-id":n}),r)}var qe=N__default.default.forwardRef(pt);var Ye=()=>({root:emotion.css({margin:0,background:"none",border:"none",cursor:"pointer",display:"flex",gap:a__default.default.spacing2Xs,alignItems:"center",color:a__default.default.gray300,padding:`0 ${a__default.default.spacing2Xs}`,minHeight:a__default.default.spacingL,fontSize:a__default.default.fontSizeS,fontWeight:a__default.default.fontWeightMedium,outline:"none",borderRadius:a__default.default.borderRadiusMedium,"&:hover":{color:a__default.default.gray100},svg:{fill:"currentColor"}},v())});var lt="button";function dt(e,o){let c=e,{as:t=lt,children:r,className:i,testId:n="cf-ui-navbar-topbar-item"}=c,m=f(c,["as","children","className","testId"]),d=Ye();return N__default.default.createElement(t,p(s({},m),{ref:o,className:emotion.cx(d.root,i),"data-test-id":n}),r)}var Je=N__default.default.forwardRef(dt);var b=ge;b.Item=re;b.ItemSkeleton=ne;b.MenuItem=ae;b.MenuItemSkeleton=ie;b.MenuDivider=f36Menu.MenuDivider;b.MenuSectionTitle=f36Menu.MenuSectionTitle;b.Switcher=pe;b.SwitcherSkeleton=me;b.SwitcherItem=Ve;b.Search=ze;b.Help=Ue;b.Account=ee;b.AccountSkeleton=oe;b.Badge=qe;b.TopbarItem=Je;
|
|
21
19
|
|
|
22
20
|
exports.Navbar = b;
|
|
23
|
-
exports.getNavbarItemActiveStyles =
|
|
21
|
+
exports.getNavbarItemActiveStyles = ye;
|
|
22
|
+
//# sourceMappingURL=out.js.map
|
|
24
23
|
//# sourceMappingURL=index.js.map
|