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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/README.mdx +83 -45
  2. package/dist/esm/index.js +22 -210
  3. package/dist/esm/index.js.map +1 -1
  4. package/dist/index.d.mts +110 -65
  5. package/dist/index.d.ts +110 -65
  6. package/dist/index.js +24 -210
  7. package/dist/index.js.map +1 -1
  8. package/package.json +12 -9
package/dist/esm/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/CompoundNavbar.ts","../../src/Navbar.tsx","../../src/Navbar.styles.ts","../../src/utils.styles.ts","../../src/icons/CircleIcon.tsx","../../src/icons/ArrowDownIcon.tsx","../../src/icons/HelpIcon.tsx","../../src/icons/SearchIcon.tsx","../../src/icons/ContentfulLogoIcon.tsx","../../src/NavbarAccount/NavbarAccount.tsx","../../src/NavbarAccount/NavbarAccount.styles.ts","../../src/NavbarMenu/NavbarMenu.tsx","../../src/NavbarMenu/NavbarMenu.styles.ts","../../src/NavbarAccount/NavbarAccountSkeleton.tsx","../../src/NavbarItem/NavbarItem.tsx","../../src/NavbarItem/NavbarItem.styles.ts","../../src/NavbarItemIcon/NavbarItemIcon.tsx","../../src/NavbarItemIcon/NavbarItemIcon.styles.ts","../../src/NavbarItem/NavbarItemSkeleton.tsx","../../src/NavbarMenuItem/NavbarMenuItem.tsx","../../src/NavbarMenuItem/NavbarMenuItem.styles.ts","../../src/NavbarMenuItem/NavbarMenuItemSkeleton.tsx","../../src/NavbarSwitcher/NavbarSwitcher.tsx","../../src/NavbarSwitcher/NavbarSwitcher.styles.ts","../../src/NavbarSwitcher/NavbarSwitcherSkeleton.tsx","../../src/NavbarSearch/NavbarSearch.tsx","../../../button/src/Button/Button.styles.ts","../../../spinner/src/Spinner.styles.ts","../../src/NavbarSearch/NavbarSearch.styles.ts","../../src/NavbarSwitcherItem/NavbarSwitcherItem.tsx","../../src/NavbarSwitcherItem/NavbarSwitcherItem.styles.ts","../../src/NavbarSwitcherItem/NavbarEnvVariant.tsx","../../src/NavbarHelp/NavbarHelp.tsx","../../src/NavbarHelp/NavbarHelp.styles.ts","../../src/NavbarBadge/NavbarBadge.tsx","../../src/NavbarBadge/NavbarBadge.styles.ts","../../src/NavbarTopbarItem/NavbarTopbarItem.tsx","../../src/NavbarTopbarItem/NavbarTopbarItem.styles.ts"],"names":["MenuDivider","MenuSectionTitle","Box","Flex","React","css","tokens","mqs","getGlowOnFocusStyles","shadow","getNavbarStyles","maxWidth","variant","CircleIcon","N","ArrowDownIcon","HelpIcon","SearchIcon","generateIcon","ContentfulLogoIcon","_Navbar","props","ref","_a","account","badge","bottomRightItems","children","className","contentMaxWidth","help","logo","search","switcher","testId","topRightItems","otherProps","__objRest","styles","__spreadProps","__spreadValues","Navbar","cx","hexToRGBA","notificationVarianColorMap","getNavbarAccountStyles","Menu","getNavbarMenuStyles","NavbarMenu","trigger","onOpen","onClose","Avatar","_NavbarAccount","avatar","initials","username","hasNotification","notificationVariant","NavbarAccount","SkeletonContainer","SkeletonImage","NavbarAccountSkeleton","ariaLabel","getNavbarItemActiveStyles","commonItemStyles","getNavbarItemStyles","getNavbarItemSkeletonStyles","getNavbarItemIconStyles","NavbarItemIcon","_b","icon","NAVBAR_ITEM_DEFAULT_TAG","_NavbarItem","Comp","title","isActive","isMenuTrigger","isNavbarItemHasMenu","item","NavbarItem","SkeletonText","NavbarItemSkeleton","estimatedWidth","getNavbarMenuItemStyles","ExternalLinkIcon","NAVBAR_MENU_ITEM_DEFAULT_TAG","_NavbarMenuItem","itemIsExternalLink","isExternalLink","externalIcon","NavbarMenuItem","SkeletonBodyText","NavbarMenuItemSkeleton","getNavbarSwitcherStyles","_NavbarSwitcher","NavbarSwitcher","SkeletonDisplayText","NavbarSwitcherSkeleton","m","Stack","s","forwardRef","i","T","v","c","x","f","r","a","S","d","g","n","h","y","keyframes","getNavbarSearchStyles","_NavbarSearch","Z","NavbarSearch","mobileIcon","getNavbarSwitcherItemStyles","EnvironmentAliasIcon","EnvironmentIcon","NavbarEnvVariant","isAlias","_NavbarSwitcherItem","isCircle","envVariant","classes","NavbarSwitcherItem","getNavbarHelpStyles","_NavbarHelp","B","NavbarHelp","getNavbarBadgeStyles","NAVBAR_BADGE_DEFAULT_TAG","_NavbarBadge","NavbarBadge","getNavbarTopbarItemStyles","_NavbarTopbarItem","NavbarTopbarItem"],"mappings":"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","sourcesContent":["import { MenuDivider } from '@contentful/f36-menu';\nimport { MenuSectionTitle } from '@contentful/f36-menu';\nimport { Navbar as OriginalNavbar } from './Navbar';\n\nimport { NavbarAccount, NavbarAccountSkeleton } from './NavbarAccount';\nimport { NavbarItem, NavbarItemSkeleton } from './NavbarItem';\nimport { NavbarMenuItem, NavbarMenuItemSkeleton } from './NavbarMenuItem';\nimport { NavbarSwitcher, NavbarSwitcherSkeleton } from './NavbarSwitcher';\n\nimport { NavbarSearch } from './NavbarSearch/NavbarSearch';\nimport { NavbarSwitcherItem } from './NavbarSwitcherItem/NavbarSwitcherItem';\nimport { NavbarHelp } from './NavbarHelp/NavbarHelp';\nimport { NavbarBadge } from './NavbarBadge/NavbarBadge';\nimport { NavbarTopbarItem } from './NavbarTopbarItem/NavbarTopbarItem';\n\ntype CompoundNavbar = typeof OriginalNavbar & {\n Item: typeof NavbarItem;\n ItemSkeleton: typeof NavbarItemSkeleton;\n MenuItem: typeof NavbarMenuItem;\n MenuItemSkeleton: typeof NavbarMenuItemSkeleton;\n MenuDivider: typeof MenuDivider;\n MenuSectionTitle: typeof MenuSectionTitle;\n Switcher: typeof NavbarSwitcher;\n SwitcherSkeleton: typeof NavbarSwitcherSkeleton;\n SwitcherItem: typeof NavbarSwitcherItem;\n Search: typeof NavbarSearch;\n Help: typeof NavbarHelp;\n Account: typeof NavbarAccount;\n AccountSkeleton: typeof NavbarAccountSkeleton;\n Badge: typeof NavbarBadge;\n TopbarItem: typeof NavbarTopbarItem;\n};\n\nexport const Navbar = OriginalNavbar as CompoundNavbar;\nNavbar.Item = NavbarItem;\nNavbar.ItemSkeleton = NavbarItemSkeleton;\nNavbar.MenuItem = NavbarMenuItem;\nNavbar.MenuItemSkeleton = NavbarMenuItemSkeleton;\nNavbar.MenuDivider = MenuDivider;\nNavbar.MenuSectionTitle = MenuSectionTitle;\nNavbar.Switcher = NavbarSwitcher;\nNavbar.SwitcherSkeleton = NavbarSwitcherSkeleton;\nNavbar.SwitcherItem = NavbarSwitcherItem;\nNavbar.Search = NavbarSearch;\nNavbar.Help = NavbarHelp;\nNavbar.Account = NavbarAccount;\nNavbar.AccountSkeleton = NavbarAccountSkeleton;\nNavbar.Badge = NavbarBadge;\nNavbar.TopbarItem = NavbarTopbarItem;\n","import {\n Box,\n type CommonProps,\n type ExpandProps,\n Flex,\n} from '@contentful/f36-core';\nimport React from 'react';\nimport { getNavbarStyles } from './Navbar.styles';\nimport { ContentfulLogoIcon } from './icons';\n\ntype NavbarOwnProps = CommonProps & {\n account?: React.ReactNode;\n badge?: React.ReactNode;\n /**\n * Items that will be rendered on the bottom-right of the navbar.\n * Useful for separating other navigation items from main ones, (e.g. separating \"Settings\" from all other navigation items).\n */\n bottomRightItems?: React.ReactNode;\n children?: React.ReactNode;\n /**\n * Defines the max-width of the content inside the navbar.\n * @default '100%'\n */\n contentMaxWidth?: string;\n help?: React.ReactNode;\n /**\n * Will be displayed instead of the default Contentful logo\n */\n logo?: React.ReactNode;\n search?: React.ReactNode;\n switcher?: React.ReactNode;\n /**\n * Items that will be rendered on the top-right of the navbar.\n * Useful for providing additional context or actions to the user (e.g. a Feedback form link).\n */\n topRightItems?: React.ReactNode;\n /**\n * Describes the size variation of the navbar\n */\n variant?: 'wide' | 'fullscreen';\n};\n\n// expose only the HTML props that are needed to not pollute the API\ntype NavbarHTMLElementProps = Pick<React.ComponentPropsWithoutRef<'div'>, 'id'>;\n\nexport type NavbarProps = NavbarHTMLElementProps & NavbarOwnProps;\n\nfunction _Navbar(props: ExpandProps<NavbarProps>, ref: React.Ref<HTMLElement>) {\n const {\n account,\n badge,\n bottomRightItems,\n children,\n className,\n contentMaxWidth = '100%',\n help,\n logo,\n search,\n switcher,\n testId = 'cf-ui-navbar',\n topRightItems,\n variant = 'wide',\n ...otherProps\n } = props;\n const styles = getNavbarStyles(contentMaxWidth, variant);\n\n return (\n <Box {...otherProps} ref={ref} testId={testId} className={className}>\n <Flex className={styles.containerTop}>\n <Flex\n className={styles.containerTopContent}\n justifyContent=\"space-between\"\n >\n <Flex alignItems=\"center\" gap=\"spacingL\">\n {logo || <ContentfulLogoIcon className={styles.logo} />}\n {switcher}\n </Flex>\n <Flex alignItems=\"center\" gap=\"spacingXs\">\n {topRightItems}\n {badge}\n {search}\n {help}\n {account}\n </Flex>\n </Flex>\n </Flex>\n\n <Flex className={styles.containerBottom}>\n <Flex\n className={styles.containerBottomContent}\n justifyContent=\"space-between\"\n >\n <Flex as=\"nav\" aria-label=\"Main Navigation\">\n {children}\n </Flex>\n {bottomRightItems && <Flex>{bottomRightItems}</Flex>}\n </Flex>\n </Flex>\n </Box>\n );\n}\n\nexport const Navbar = React.forwardRef(_Navbar);\n","import { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\nimport { mqs } from './utils.styles';\n\nexport const getNavbarStyles = (maxWidth: string, variant: string) => ({\n containerTop: css({\n justifyContent: 'center',\n backgroundColor: tokens.gray100,\n }),\n containerBottom: css({\n justifyContent: 'center',\n backgroundColor: tokens.gray100,\n }),\n containerTopContent: css({\n width: '100%',\n maxWidth: variant === 'wide' ? '1524px' : maxWidth,\n padding: tokens.spacingXs,\n minHeight: tokens.spacingL,\n [mqs.medium]: {\n padding: `${tokens.spacingXs} 20px`,\n },\n }),\n containerBottomContent: css({\n width: '100%',\n maxWidth: variant === 'wide' ? '1524px' : maxWidth,\n padding: 0,\n paddingTop: tokens.spacing2Xs,\n minHeight: '2.5rem',\n overflow: 'auto',\n [mqs.medium]: {\n padding: `${tokens.spacing2Xs} ${tokens.spacingXs}`,\n },\n }),\n logo: css({\n height: '28px',\n width: '28px',\n }),\n});\n","import tokens from '@contentful/f36-tokens';\n\ntype screens = 'medium' | 'large' | 'xlarge';\ntype mediaqueries = Record<screens, string>;\nexport const mqs: mediaqueries = {\n medium: '@media (min-width: 480px)',\n large: '@media (min-width: 768px)',\n xlarge: '@media (min-width: 1920px)',\n};\n\nexport const getGlowOnFocusStyles = (shadow: string = tokens.glowPrimary) => ({\n '&:focus': {\n boxShadow: shadow,\n },\n '&:focus:not(:focus-visible)': {\n boxShadow: 'unset',\n },\n '&:focus-visible': {\n boxShadow: shadow,\n },\n});\n","import React from 'react';\nimport { generateIcon } from '@contentful/f36-icon';\n\nexport const CircleIcon = /*#__PURE__*/ generateIcon({\n name: 'CircleIcon',\n viewBox: '0 0 24 24',\n path: (\n <path\n d=\"M11.994 6.526A5.47 5.47 0 0 0 6.526 12a5.47 5.47 0 0 0 5.468 5.473A5.476 5.476 0 0 0 17.473 12a5.477 5.477 0 0 0-5.479-5.474ZM12 15.447a3.448 3.448 0 1 1 0-6.896 3.448 3.448 0 0 1 0 6.896Z\"\n fill=\"currentFill\"\n />\n ),\n});\n","import React from 'react';\nimport { generateIcon } from '@contentful/f36-icon';\n\nexport const ArrowDownIcon = /*#__PURE__*/ generateIcon({\n name: 'ArrowDownIcon',\n viewBox: '0 0 12 20',\n path: (\n <path\n d=\"M3.03076 8C2.20109 8 1.73228 8.95209 2.23814 9.60971L5.20727 13.4696C5.60757 13.99 6.39223 13.99 6.79252 13.4696L9.76166 9.60971C10.2675 8.95209 9.79871 8 8.96904 8L3.03076 8Z\"\n fill=\"#9FA8B2\"\n />\n ),\n});\n","import React from 'react';\nimport { generateIcon } from '@contentful/f36-icon';\n\nexport const HelpIcon = /*#__PURE__*/ generateIcon({\n name: 'HelpIcon',\n viewBox: '0 0 24 24',\n path: (\n <>\n <g clipPath=\"url(#HelpIcon_svg__a)\">\n <path\n d=\"M12 2.25A9.75 9.75 0 1 0 21.75 12 9.769 9.769 0 0 0 12 2.25ZM12 18a1.125 1.125 0 1 1 0-2.25A1.125 1.125 0 0 1 12 18Zm.75-4.584v.084a.75.75 0 1 1-1.5 0v-.75A.75.75 0 0 1 12 12a1.875 1.875 0 1 0-1.875-1.875.75.75 0 1 1-1.5 0 3.375 3.375 0 1 1 4.125 3.29Z\"\n fill=\"currentFill\"\n />\n </g>\n <defs>\n <clipPath id=\"HelpIcon_svg__a\">\n <path fill=\"currentFill\" d=\"M0 0h24v24H0z\" />\n </clipPath>\n </defs>\n </>\n ),\n});\n","import React from 'react';\nimport { generateIcon } from '@contentful/f36-icon';\n\nexport const SearchIcon = /*#__PURE__*/ generateIcon({\n name: 'SearchIcon',\n viewBox: '0 0 24 24',\n path: (\n <>\n <g clipPath=\"url(#SearchIcon_svg__a)\">\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M6 11.125a5.125 5.125 0 1 1 10.25 0 5.125 5.125 0 0 1-10.25 0ZM11.125 4a7.125 7.125 0 1 0 4.282 12.82l2.886 2.887a1 1 0 0 0 1.414-1.414l-2.886-2.887A7.125 7.125 0 0 0 11.125 4Z\"\n fill=\"currentFill\"\n />\n </g>\n <defs>\n <clipPath id=\"SearchIcon_svg__a\">\n <path fill=\"#fff\" d=\"M0 0h24v24H0z\" />\n </clipPath>\n </defs>\n </>\n ),\n});\n","import React from 'react';\nimport { generateIcon } from '@contentful/f36-icon-alpha';\n\nexport const ContentfulLogoIcon = /*#__PURE__*/ generateIcon({\n name: 'ContentfulLogoIcon',\n viewBox: '0 0 28 28',\n path: (\n <>\n <path\n fill=\"#1773EB\"\n d=\"M10.713 5.001c.845.843 1.167 2.079.845 3.228A6.663 6.663 0 0 1 15 7.276h.026a6.7 6.7 0 0 1 4.743 1.988 2.64 2.64 0 1 0 3.746-3.715A11.96 11.96 0 0 0 15.042 2h-.046a11.933 11.933 0 0 0-6.691 2.036h.074a3.287 3.287 0 0 1 2.334.967V5Z\"\n />\n <path\n fill=\"#E44F20\"\n d=\"M21.594 17.999a2.64 2.64 0 0 0-1.858.766 6.703 6.703 0 0 1-4.732 1.951h-.025a6.65 6.65 0 0 1-3.447-.968A3.3 3.3 0 0 1 8.35 23.93h-.086A11.926 11.926 0 0 0 14.96 26h.046a11.94 11.94 0 0 0 8.449-3.484 2.64 2.64 0 0 0-1.859-4.514V18h-.002Z\"\n />\n <path\n fill=\"#FFDA00\"\n d=\"M6.013 18.295a3.27 3.27 0 0 1 2.334-.967c.302 0 .603.04.894.122a6.7 6.7 0 0 1 .013-6.928A3.3 3.3 0 0 1 5.08 7.335v-.09a11.999 11.999 0 0 0-.032 13.453v-.07a3.27 3.27 0 0 1 .966-2.333Z\"\n />\n <path\n fill=\"#1773EB\"\n d=\"M8.379 4.62c-.75 0-1.276.312-1.913.949-.607.605-.798 1.135-.8 1.766A2.712 2.712 0 1 0 8.38 4.62Z\"\n />\n <path\n fill=\"#E44F20\"\n d=\"M5.628 20.631c0 .75.31 1.276.946 1.912.607.606 1.136.799 1.766.8a2.703 2.703 0 1 0-.017-5.407 2.703 2.703 0 0 0-2.695 2.704v-.009Z\"\n />\n </>\n ),\n});\n","import React from 'react';\nimport { cx } from 'emotion';\nimport { getNavbarAccountStyles } from './NavbarAccount.styles';\nimport {\n type PropsWithHTMLElement,\n type CommonProps,\n type ExpandProps,\n} from '@contentful/f36-core';\nimport { NavbarMenu } from '../NavbarMenu/NavbarMenu';\nimport { Avatar } from '@contentful/f36-avatar';\nimport { Flex } from '@contentful/f36-core';\n\ntype NavbarAccountOwnProps = CommonProps & {\n children: React.ReactNode;\n username: string;\n avatar?: string;\n initials?: string;\n hasNotification?: boolean;\n /**\n * @default 'warning'\n */\n notificationVariant?: 'warning' | 'negative' | 'info';\n};\n\nexport type NavbarAccountProps = PropsWithHTMLElement<\n NavbarAccountOwnProps,\n 'button'\n>;\n\nfunction _NavbarAccount(\n props: ExpandProps<NavbarAccountProps>,\n ref: React.Ref<HTMLButtonElement>,\n) {\n const {\n children,\n className,\n testId = 'cf-ui-navbar-account-trigger',\n avatar,\n initials,\n username,\n hasNotification,\n notificationVariant = 'warning',\n ...otherProps\n } = props;\n const styles = getNavbarAccountStyles();\n\n return (\n <NavbarMenu\n trigger={\n <Flex\n as=\"button\"\n {...otherProps}\n ref={ref}\n className={cx(styles.navbarAccount, className)}\n testId={testId}\n alignItems=\"center\"\n >\n <Avatar\n src={avatar}\n initials={initials}\n size=\"small\"\n variant=\"user\"\n />\n {hasNotification ? (\n <span className={styles.notificationIcon(notificationVariant)} />\n ) : null}\n </Flex>\n }\n >\n {children}\n </NavbarMenu>\n );\n}\n\nexport const NavbarAccount = React.forwardRef(_NavbarAccount);\n","import { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\nimport { NavbarAccountProps } from './NavbarAccount';\nimport { getGlowOnFocusStyles } from '../utils.styles';\nimport { hexToRGBA } from '@contentful/f36-utils';\n\nconst notificationVarianColorMap: Record<\n NavbarAccountProps['notificationVariant'],\n string\n> = {\n warning: tokens.colorWarning,\n negative: tokens.colorNegative,\n info: tokens.blue500,\n};\n\nexport const getNavbarAccountStyles = () => ({\n navbarAccount: css(\n {\n // default button reset styles\n margin: 0,\n padding: 0,\n border: 0,\n cursor: 'pointer',\n background: 'none',\n position: 'relative',\n outline: 'none',\n overflow: 'visible',\n borderRadius: '50%',\n '&:before': css({\n content: '\"\"',\n display: 'block',\n position: 'absolute',\n height: '24px',\n width: '24px',\n backgroundColor: 'transparent',\n borderRadius: '50%',\n }),\n '&:hover:before': css({\n backgroundColor: hexToRGBA(tokens.gray300, 0.15),\n }),\n },\n getGlowOnFocusStyles(),\n ),\n avatar: css({\n borderRadius: '50%',\n display: 'block',\n height: '24px',\n width: '24px',\n }),\n notificationIcon: (variant: NavbarAccountProps['notificationVariant']) =>\n css({\n position: 'absolute',\n top: 0,\n right: 0,\n height: tokens.spacingS,\n width: tokens.spacingS,\n borderRadius: '50%',\n border: `2px solid ${tokens.gray100}`,\n backgroundColor: notificationVarianColorMap[variant],\n transform: 'translate(30%, -30%)',\n }),\n});\n","import React from 'react';\nimport { Menu, type MenuListProps, type MenuProps } from '@contentful/f36-menu';\nimport { getNavbarMenuStyles } from './NavbarMenu.styles';\n\nexport type NavbarMenuProps = {\n trigger: React.ReactNode;\n children?: React.ReactNode;\n} & Pick<MenuListProps, 'testId'> &\n Pick<MenuProps, 'onOpen' | 'onClose'>;\n\nexport const NavbarMenu = (props: NavbarMenuProps) => {\n const {\n trigger,\n children,\n testId = 'cf-ui-navbar-menu-list',\n onOpen,\n onClose,\n } = props;\n const styles = getNavbarMenuStyles();\n\n return (\n <Menu onOpen={onOpen} onClose={onClose}>\n <Menu.Trigger>{trigger}</Menu.Trigger>\n <Menu.List className={styles.menuList} testId={testId}>\n {children}\n </Menu.List>\n </Menu>\n );\n};\n","import { css } from 'emotion';\n\nexport const getNavbarMenuStyles = () => ({\n menuList: css({\n minWidth: '250px',\n }),\n});\n","import React from 'react';\nimport { SkeletonContainer, SkeletonImage } from '@contentful/f36-skeleton';\nimport tokens from '@contentful/f36-tokens';\n\nexport function NavbarAccountSkeleton({ ariaLabel }: { ariaLabel?: string }) {\n return (\n <SkeletonContainer\n svgWidth={24}\n svgHeight={24}\n ariaLabel={ariaLabel}\n backgroundColor={tokens.gray300}\n foregroundColor={tokens.gray200}\n >\n <SkeletonImage width={24} height={24} radiusX={12} radiusY={12} />\n </SkeletonContainer>\n );\n}\n","import React from 'react';\nimport { cx } from 'emotion';\nimport { getNavbarItemStyles } from './NavbarItem.styles';\nimport { NavbarMenu, type NavbarMenuProps } from '../NavbarMenu/NavbarMenu';\nimport {\n NavbarItemIcon,\n type NavbarItemIconProps,\n} from '../NavbarItemIcon/NavbarItemIcon';\nimport { ArrowDownIcon } from '../icons';\nimport type {\n CommonProps,\n ExpandProps,\n PolymorphicComponent,\n PolymorphicProps,\n} from '@contentful/f36-core';\n\nconst NAVBAR_ITEM_DEFAULT_TAG = 'button';\n\ntype NavbarItemTriggerProps = CommonProps & {\n title: string;\n icon?: NavbarItemIconProps['icon'];\n isActive?: boolean;\n as?: React.ElementType;\n};\n\ntype NavbarItemAsMenuProps = NavbarItemTriggerProps &\n Pick<NavbarMenuProps, 'onOpen' | 'onClose'> & {\n children: React.ReactNode;\n };\ntype NavbarItemAsItemProps = NavbarItemTriggerProps & {\n children?: never;\n onOpen?: never;\n onClose?: never;\n};\ntype NavbarItemOwnProps = NavbarItemAsItemProps | NavbarItemAsMenuProps;\n\nexport type NavbarItemProps<\n E extends React.ElementType = typeof NAVBAR_ITEM_DEFAULT_TAG,\n> = PolymorphicProps<NavbarItemOwnProps, E>;\n\nfunction _NavbarItem(\n props: NavbarItemProps<React.ElementType>,\n ref: React.Ref<any>,\n) {\n const {\n as: Comp = NAVBAR_ITEM_DEFAULT_TAG,\n icon,\n title,\n children,\n className,\n isActive,\n testId = 'cf-ui-navbar-item',\n onOpen,\n onClose,\n ...otherProps\n } = props;\n const styles = getNavbarItemStyles();\n const isMenuTrigger = isNavbarItemHasMenu(props);\n const item = (\n <Comp\n {...otherProps}\n ref={ref}\n data-test-id={testId}\n className={cx(\n styles.navbarItem,\n isMenuTrigger && styles.navbarItemMenuTrigger,\n isActive && styles.isActive,\n className,\n )}\n >\n {icon && <NavbarItemIcon icon={icon} variant=\"secondary\" />}\n <span>{title}</span>\n {isMenuTrigger && <ArrowDownIcon />}\n </Comp>\n );\n\n if (isMenuTrigger) {\n return (\n <NavbarMenu\n trigger={item}\n testId={testId}\n onOpen={onOpen}\n onClose={onClose}\n >\n {children}\n </NavbarMenu>\n );\n }\n\n return item;\n}\n\nconst isNavbarItemHasMenu = <E extends React.ElementType>(\n props: NavbarItemProps<E>,\n): props is PolymorphicProps<NavbarItemAsMenuProps, E> =>\n Boolean(props.children);\n\nexport const NavbarItem: PolymorphicComponent<\n ExpandProps<NavbarItemOwnProps>,\n typeof NAVBAR_ITEM_DEFAULT_TAG\n> = React.forwardRef(_NavbarItem);\n","import { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\nimport { hexToRGBA } from '@contentful/f36-utils';\nimport { getGlowOnFocusStyles } from '../utils.styles';\n\nexport const getNavbarItemActiveStyles = () =>\n css({\n '&::after': {\n content: '\"\"',\n position: 'absolute',\n width: `calc(100% - ${tokens.spacingM})`,\n height: '2px',\n bottom: `-${tokens.spacing2Xs}`,\n left: 0,\n right: 0,\n margin: 'auto',\n backgroundColor: tokens.blue600,\n zIndex: 0,\n },\n });\n\nconst commonItemStyles = {\n display: 'flex',\n justifyContent: 'center',\n padding: `${tokens.spacing2Xs} ${tokens.spacingS}`,\n alignItems: 'center',\n background: 'none',\n};\n\nexport const getNavbarItemStyles = () => ({\n navbarItem: css(\n commonItemStyles,\n {\n alignItems: 'center',\n background: 'none',\n border: 0,\n margin: 0,\n outline: 'none',\n fontSize: tokens.fontSizeM,\n lineHeight: tokens.lineHeightS,\n fontWeight: tokens.fontWeightMedium,\n position: 'relative',\n textAlign: 'left',\n whiteSpace: 'nowrap',\n cursor: 'pointer',\n hyphens: 'auto',\n textDecoration: 'none',\n color: tokens.gray700,\n boxSizing: 'border-box',\n transition: `color ${tokens.transitionDurationShort} ${tokens.transitionEasingCubicBezier}`,\n borderRadius: tokens.borderRadiusMedium,\n\n '&:hover': {\n backgroundColor: hexToRGBA(tokens.gray900, 0.05),\n },\n\n '&:hover::before': {\n opacity: 1,\n scale: '1',\n },\n\n '&:active::before': {\n backgroundColor: `rgba(255, 255, 255, 0.1)`,\n },\n '&:disabled': {\n cursor: 'auto',\n },\n\n '& svg': {\n transition: `fill ${tokens.transitionDurationShort} ${tokens.transitionEasingCubicBezier}`,\n },\n '& > svg, & > span': {\n zIndex: tokens.zIndexDefault,\n },\n },\n getGlowOnFocusStyles(`inset ${tokens.glowPrimary}`),\n ),\n navbarItemMenuTrigger: css({\n paddingRight: tokens.spacingXs,\n }),\n isActive: getNavbarItemActiveStyles(),\n});\n\nexport const getNavbarItemSkeletonStyles = () => ({\n itemSkeleton: css(commonItemStyles),\n});\n","import React from 'react';\nimport type { IconProps } from '@contentful/f36-icons';\nimport { getNavbarItemIconStyles } from './NavbarItemIcon.styles';\nimport { cx } from 'emotion';\n\nexport type NavbarItemIconProps = {\n icon: React.ReactElement<IconProps>;\n} & Pick<IconProps, 'variant'>;\n\nexport const NavbarItemIcon = (props: NavbarItemIconProps) => {\n const { icon, variant } = props;\n const styles = getNavbarItemIconStyles();\n\n return React.cloneElement(icon, {\n className: cx(icon.props.className, styles.navbarItemIcon),\n size: icon.props.size ?? 'tiny',\n variant: icon.props.variant ?? variant,\n });\n};\n","import { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\nexport const getNavbarItemIconStyles = () => ({\n navbarItemIcon: css({\n fill: tokens.gray700,\n '&:first-child': {\n marginRight: tokens.spacing2Xs,\n },\n '&:last-child': {\n marginLeft: tokens.spacing2Xs,\n },\n 'img&': {\n borderRadius: tokens.borderRadiusSmall,\n maxWidth: tokens.spacingM,\n maxHeight: tokens.spacingM,\n },\n }),\n});\n","import React from 'react';\nimport { SkeletonContainer, SkeletonText } from '@contentful/f36-skeleton';\nimport tokens from '@contentful/f36-tokens';\nimport { getNavbarItemSkeletonStyles } from './NavbarItem.styles';\n\nexport const NavbarItemSkeleton = ({\n estimatedWidth,\n}: {\n estimatedWidth: number;\n}) => {\n const styles = getNavbarItemSkeletonStyles();\n\n return (\n <SkeletonContainer\n className={styles.itemSkeleton}\n svgWidth={estimatedWidth}\n svgHeight={32}\n backgroundColor={tokens.gray300}\n foregroundColor={tokens.gray200}\n >\n <SkeletonText\n lineHeight={6}\n numberOfLines={1}\n offsetTop={10}\n radiusX={tokens.borderRadiusSmall}\n radiusY={tokens.borderRadiusSmall}\n />\n </SkeletonContainer>\n );\n};\n","import React from 'react';\nimport { cx } from 'emotion';\nimport { getNavbarMenuItemStyles } from './NavbarMenuItem.styles';\nimport { Menu, type MenuItemProps } from '@contentful/f36-menu';\nimport {\n NavbarItemIcon,\n type NavbarItemIconProps,\n} from '../NavbarItemIcon/NavbarItemIcon';\nimport { ExternalLinkIcon } from '@contentful/f36-icons';\nimport type {\n ExpandProps,\n PolymorphicComponent,\n PolymorphicProps,\n} from '@contentful/f36-core';\n\nconst NAVBAR_MENU_ITEM_DEFAULT_TAG = 'button';\n\ntype NavbarMenuItemOwnProps = {\n children?: null;\n title: string;\n icon?: NavbarItemIconProps['icon'];\n as?: React.ElementType;\n} & Omit<MenuItemProps, 'children' | 'as'>;\n\nexport type NavbarMenuItemProps<\n E extends React.ElementType = typeof NAVBAR_MENU_ITEM_DEFAULT_TAG,\n> = PolymorphicProps<NavbarMenuItemOwnProps, E>;\n\nfunction _NavbarMenuItem(\n props: NavbarMenuItemProps<React.ElementType>,\n ref: React.Ref<any>,\n) {\n const {\n as: Comp = NAVBAR_MENU_ITEM_DEFAULT_TAG,\n icon,\n title,\n className,\n ...otherProps\n } = props;\n const styles = getNavbarMenuItemStyles();\n\n const itemIsExternalLink = isExternalLink(\n props as unknown as NavbarMenuItemProps<'a'>,\n );\n\n return (\n <Menu.Item\n {...otherProps}\n ref={ref}\n as={Comp as MenuItemProps['as']}\n className={cx(styles.navbarMenuItem, className)}\n >\n {icon ? (\n <NavbarItemIcon icon={icon} variant=\"secondary\" />\n ) : (\n itemIsExternalLink && externalIcon\n )}\n <span>{title}</span>\n {icon && itemIsExternalLink ? externalIcon : null}\n </Menu.Item>\n );\n}\n\nconst externalIcon = (\n <NavbarItemIcon icon={<ExternalLinkIcon />} variant=\"muted\" />\n);\n\nconst isExternalLink = (props: NavbarMenuItemProps<'a'>) =>\n props.as === 'a' && props.target === '_blank';\n\nexport const NavbarMenuItem: PolymorphicComponent<\n ExpandProps<NavbarMenuItemOwnProps>,\n typeof NAVBAR_MENU_ITEM_DEFAULT_TAG\n> = React.forwardRef(_NavbarMenuItem);\n","import { css } from 'emotion';\nexport const getNavbarMenuItemStyles = () => ({\n navbarMenuItem: css({\n display: 'flex',\n justifyContent: 'flex-start',\n alignItems: 'center',\n }),\n});\n","import React from 'react';\nimport { Menu } from '@contentful/f36-menu';\nimport {\n SkeletonBodyText,\n SkeletonContainer,\n SkeletonImage,\n} from '@contentful/f36-skeleton';\nimport { Flex } from '@contentful/f36-core';\n\nimport tokens from '@contentful/f36-tokens';\n\nexport const NavbarMenuItemSkeleton = ({\n ariaLabel,\n}: {\n ariaLabel?: string;\n}) => (\n <Menu.Item>\n <Flex alignItems=\"center\" gap={tokens.spacingXs}>\n <SkeletonContainer svgHeight={16} svgWidth={18}>\n <SkeletonImage width={16} height={16} />\n </SkeletonContainer>\n <SkeletonContainer svgHeight={16} svgWidth={190} ariaLabel={ariaLabel}>\n <SkeletonBodyText numberOfLines={1} />\n </SkeletonContainer>\n </Flex>\n </Menu.Item>\n);\n","import React from 'react';\nimport { getNavbarSwitcherStyles } from './NavbarSwitcher.styles';\nimport {\n Flex,\n type CommonProps,\n type PropsWithHTMLElement,\n type ExpandProps,\n} from '@contentful/f36-core';\nimport { cx } from 'emotion';\n\ntype NavbarSwitcherOwnProps = CommonProps & {\n children?: React.ReactNode;\n};\n\nexport type NavbarSwitcherProps = PropsWithHTMLElement<\n NavbarSwitcherOwnProps,\n 'button'\n>;\n\nfunction _NavbarSwitcher(\n props: ExpandProps<NavbarSwitcherProps>,\n ref: React.Ref<HTMLButtonElement>,\n) {\n const {\n children,\n className,\n testId = 'cf-ui-navbar-switcher',\n ...otherProps\n } = props;\n const styles = getNavbarSwitcherStyles();\n\n return (\n <Flex\n {...otherProps}\n as=\"button\"\n ref={ref}\n className={cx(styles.navbarSwitcher, className)}\n testId={testId}\n alignItems=\"center\"\n fullHeight\n gap=\"spacingXs\"\n >\n <Flex as=\"ul\" alignItems=\"center\" className={styles.switcherBreadcrumbs}>\n {children}\n </Flex>\n </Flex>\n );\n}\n\nexport const NavbarSwitcher = React.forwardRef(_NavbarSwitcher);\n","import { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\nimport { getGlowOnFocusStyles } from '../utils.styles';\n\nexport const getNavbarSwitcherStyles = () => ({\n navbarSwitcher: css(\n {\n // default button reset styles\n margin: 0,\n padding: 0,\n background: 'none',\n border: 'none',\n height: 'max-content',\n\n color: tokens.gray700,\n cursor: 'pointer',\n fontSize: tokens.fontSizeS,\n fontWeight: tokens.fontWeightMedium,\n position: 'relative',\n outline: 'none',\n borderRadius: '3rem',\n\n '&:after': {\n content: '\"\"',\n border: '1px solid #353A41',\n boxSizing: 'border-box',\n height: '16px',\n right: '-1px',\n position: 'absolute',\n width: 0,\n },\n '&:last-child:after': {\n display: 'none',\n },\n '&:hover li': {\n backgroundColor: '#f2f4f6', // Using a calculated hover alpha color because when using a RGBA value layers overlapping occur and show darker areas\n },\n },\n getGlowOnFocusStyles(),\n ),\n switcherMenuIcon: css({\n height: tokens.spacingM,\n width: tokens.spacingM,\n fill: tokens.gray700,\n }),\n switcherBreadcrumbs: css({\n listStyleType: 'none',\n margin: 0,\n padding: 0,\n position: 'relative',\n }),\n});\n","import React from 'react';\nimport {\n SkeletonContainer,\n SkeletonDisplayText,\n} from '@contentful/f36-skeleton';\nimport tokens from '@contentful/f36-tokens';\n\nexport const NavbarSwitcherSkeleton = ({\n estimatedWidth,\n}: {\n estimatedWidth: number;\n}) => (\n <SkeletonContainer\n svgWidth={estimatedWidth}\n svgHeight={24}\n backgroundColor={tokens.gray300}\n foregroundColor={tokens.gray200}\n >\n <SkeletonDisplayText\n lineHeight={24}\n numberOfLines={1}\n radiusX={12}\n radiusY={12}\n />\n </SkeletonContainer>\n);\n","import { cx } from 'emotion';\nimport React from 'react';\nimport { SearchIcon } from '../icons';\nimport {\n type CommonProps,\n type ExpandProps,\n type PropsWithHTMLElement,\n} from '@contentful/f36-core';\nimport { IconButton } from '@contentful/f36-button';\nimport { getNavbarSearchStyles } from './NavbarSearch.styles';\ntype NavbarSearchOwnProps = CommonProps;\n\nexport type NavbarSearchProps = PropsWithHTMLElement<\n NavbarSearchOwnProps,\n 'button'\n>;\n\nfunction _NavbarSearch(\n props: ExpandProps<NavbarSearchProps>,\n ref: React.Ref<HTMLButtonElement>,\n) {\n const { className, testId = 'cf-ui-navbar-search', ...otherProps } = props;\n const styles = getNavbarSearchStyles();\n return (\n <IconButton\n aria-label=\"Quick Search\"\n {...otherProps}\n variant=\"transparent\"\n ref={ref}\n size=\"small\"\n className={cx(styles.navbarSearch, className)}\n testId={testId}\n icon={<SearchIcon size=\"medium\" />}\n />\n );\n}\n\nexport const NavbarSearch = React.forwardRef(_NavbarSearch);\n","import { css } from 'emotion';\nimport type { CSSObject } from '@emotion/serialize';\nimport tokens from '@contentful/f36-tokens';\nimport { ButtonSize, ButtonVariant, ButtonStylesProps } from '../types';\nimport { hexToRGBA, type Density } from '@contentful/f36-utils';\n\nconst variantActiveStyles = (variant: ButtonVariant): CSSObject => {\n switch (variant) {\n case 'primary':\n return { backgroundColor: tokens.blue700 };\n case 'secondary':\n return { backgroundColor: tokens.gray200 };\n case 'positive':\n return { backgroundColor: tokens.green700 };\n case 'negative':\n return { backgroundColor: tokens.gray200 };\n case 'transparent':\n return { backgroundColor: hexToRGBA(tokens.gray900, 0.1) };\n default:\n return {};\n }\n};\n\nconst variantToStyles = (variant: ButtonVariant): CSSObject => {\n switch (variant) {\n case 'primary':\n return {\n color: tokens.colorWhite,\n backgroundColor: tokens.blue500,\n borderColor: 'transparent',\n '&:hover': {\n backgroundColor: tokens.blue600,\n color: tokens.colorWhite,\n },\n '&:active': variantActiveStyles(variant),\n '&:focus-visible': {\n boxShadow: tokens.glowPrimary,\n },\n };\n case 'secondary':\n return {\n color: tokens.gray900,\n backgroundColor: tokens.colorWhite,\n borderColor: tokens.gray300,\n '&:hover': {\n backgroundColor: tokens.gray100,\n color: tokens.gray900,\n },\n '&:active': variantActiveStyles(variant),\n '&:focus': {\n boxShadow: tokens.glowPrimary,\n },\n '&:focus:not(:focus-visible)': {\n boxShadow: 'unset',\n },\n '&:focus-visible': {\n boxShadow: tokens.glowPrimary,\n },\n };\n case 'positive':\n return {\n color: tokens.colorWhite,\n backgroundColor: tokens.green500,\n borderColor: 'transparent',\n '&:hover': {\n backgroundColor: tokens.green600,\n color: tokens.colorWhite,\n },\n '&:active': variantActiveStyles(variant),\n '&:focus-visible': {\n boxShadow: tokens.glowPositive,\n },\n };\n case 'negative':\n return {\n color: tokens.red600,\n backgroundColor: tokens.colorWhite,\n borderColor: tokens.gray300,\n '&:hover': {\n backgroundColor: tokens.gray100,\n color: tokens.red600,\n },\n '&:active': variantActiveStyles(variant),\n '&:focus-visible': {\n boxShadow: tokens.glowNegative,\n },\n };\n case 'transparent':\n return {\n color: tokens.gray900,\n background: 'none',\n borderColor: 'transparent',\n boxShadow: 'none',\n '&:hover': {\n backgroundColor: hexToRGBA(tokens.gray900, 0.05),\n },\n '&:active': variantActiveStyles(variant),\n '&:focus': {\n boxShadow: tokens.glowPrimary,\n },\n '&:focus:not(:focus-visible)': {\n boxShadow: 'unset',\n },\n '&:focus-visible': {\n boxShadow: tokens.glowPrimary,\n },\n };\n default:\n return {};\n }\n};\n\nconst sizeToStyles = (size: ButtonSize, density: Density): CSSObject => {\n const isHighDensity = density === 'high';\n\n switch (size) {\n case 'small':\n return {\n fontSize: isHighDensity ? tokens.fontSizeS : tokens.fontSizeM,\n lineHeight: tokens.lineHeightCondensed,\n padding: isHighDensity\n ? `${tokens.spacing2Xs} ${tokens.spacingXs}`\n : `${tokens.spacing2Xs} ${tokens.spacingS}`,\n minHeight: isHighDensity ? tokens.spacingL : tokens.spacingXl,\n };\n case 'medium':\n return {\n fontSize: isHighDensity ? tokens.fontSizeS : tokens.fontSizeM,\n lineHeight: tokens.lineHeightCondensed,\n padding: isHighDensity\n ? `${tokens.spacingXs} ${tokens.spacingS}`\n : `${tokens.spacingXs} ${tokens.spacingM}`,\n minHeight: isHighDensity ? tokens.spacingXl : '40px',\n };\n case 'large':\n return {\n fontSize: tokens.fontSizeXl,\n lineHeight: tokens.lineHeightXl,\n padding: `${tokens.spacingXs} ${tokens.spacingM}`,\n minHeight: '48px',\n };\n default:\n return {};\n }\n};\n\nconst getButtonIconStyle = ({ hasChildren, variant }) => {\n const align = {\n '&:first-child': { marginRight: tokens.spacing2Xs },\n '&:last-child': { marginLeft: tokens.spacing2Xs },\n };\n\n const margin = hasChildren ? align : {};\n\n return css([\n margin,\n // we want to allow variants for icons, but only in the transparent IconButton\n variant !== 'transparent' &&\n hasChildren && {\n '& svg': {\n fill: 'currentColor',\n },\n },\n ]);\n};\n\nexport const getStyles = () => ({\n button: ({\n variant,\n size,\n density,\n isActive,\n isDisabled,\n isFullWidth,\n }: ButtonStylesProps & { density: Density }) =>\n css({\n boxSizing: 'border-box',\n border: `1px solid`,\n boxShadow: '0px 1px 0px rgb(25, 37, 50, 0.08)',\n borderRadius:\n density === 'high'\n ? tokens.borderRadiusSmall\n : tokens.borderRadiusMedium,\n cursor: isDisabled ? 'not-allowed' : 'pointer',\n fontFamily: tokens.fontStackPrimary,\n opacity: isDisabled ? 0.5 : 1,\n display: isFullWidth ? 'flex' : 'inline-flex',\n minWidth: isFullWidth ? '100%' : 'auto',\n maxWidth: isFullWidth ? '100%' : '240px',\n overflow: 'hidden',\n flexShrink: 0,\n justifyContent: 'center',\n alignItems: 'center',\n fontWeight: tokens.fontWeightMedium,\n outline: 'none',\n textDecoration: 'none',\n margin: 0, // remove the default margin in Safari.\n transition: `background ${tokens.transitionDurationShort} ${tokens.transitionEasingDefault},\n opacity ${tokens.transitionDurationDefault} ${tokens.transitionEasingDefault},\n border-color ${tokens.transitionDurationDefault} ${tokens.transitionEasingDefault}`,\n ...variantToStyles(variant),\n ...sizeToStyles(size, density),\n ...(isActive\n ? {\n transition: 'none',\n '&, &:focus': variantActiveStyles(variant),\n }\n : {}),\n }),\n buttonIcon: getButtonIconStyle,\n buttonContent: css({\n whiteSpace: 'nowrap',\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n }),\n});\n","import { css, keyframes } from 'emotion';\nimport type { SpinnerSize } from './types';\n\nconst sizes: { [key in SpinnerSize]: string } = {\n large: '36px',\n medium: '20px',\n small: '14px',\n};\n\nexport const getStyles = () => {\n const animations = {\n scale1: keyframes`\n 0% {\n transform: scale(1, 1);\n }\n 6.666667% {\n transform: scale(1.5, 0.5);\n }\n 13.333333% {\n transform: scale(1, 1);\n }\n 26.666667% {\n transform: scale(1, 1);\n }\n 33.333333% {\n transform: scale(1, 1);\n }\n 40% {\n transform: scale(1, 1);\n }\n 53.333333% {\n transform: scale(1, 1);\n }\n 60% {\n transform: scale(1.5, 0.5);\n }\n 66.666667% {\n transform: scale(1, 1);\n }\n 100% {\n transform: scale(1, 1);\n }\n `,\n scale2: keyframes`\n 0% {\n transform: scale(1, 1);\n }\n 13.333333% {\n transform: scale(1, 1);\n }\n 20% {\n transform: scale(1.5, 0.5);\n }\n 26.666667% {\n transform: scale(1, 1);\n }\n 40% {\n transform: scale(1, 1);\n }\n 46.666667% {\n transform: scale(1, 1);\n }\n 53.333333% {\n transform: scale(1, 1);\n }\n 66.666667% {\n transform: scale(1, 1);\n }\n 73.333333% {\n transform: scale(1.5, 0.5);\n }\n 80% {\n transform: scale(1, 1);\n }\n 100% {\n transform: scale(1, 1);\n }\n `,\n scale3: keyframes`\n 0% {\n transform: scale(1, 1);\n }\n 26.666667% {\n transform: scale(1, 1);\n }\n 33.333333% {\n transform: scale(1.5, 0.5);\n }\n 40% {\n transform: scale(1, 1);\n }\n 53.333333% {\n transform: scale(1, 1);\n }\n 60% {\n transform: scale(1, 1);\n }\n 66.666667% {\n transform: scale(1, 1);\n }\n 80% {\n transform: scale(1, 1);\n }\n 86.666667% {\n transform: scale(1.5, 0.5);\n }\n 93.333333% {\n transform: scale(1, 1);\n }\n 100% {\n transform: scale(1, 1);\n }\n `,\n translate1: keyframes`\n 0% {\n transform: translate(10px, 33.528168px);\n }\n 6.666667% {\n transform: translate(10px, 41.764084px);\n }\n 13.333333% {\n transform: translate(10px, 33.528168px);\n }\n 26.666667% {\n transform: translate(10px, -2.651608px);\n }\n 33.333333% {\n transform: translate(10px, -4.471832px);\n }\n 40% {\n transform: translate(10px, -2.651608px);\n }\n 53.333333% {\n transform: translate(10px, 33.528168px);\n }\n 60% {\n transform: translate(10px, 41.764084px);\n }\n 66.666667% {\n transform: translate(10px, 33.528168px);\n }\n 100% {\n transform: translate(10px, 33.528168px);\n }\n `,\n translate2: keyframes`\n 0% {\n transform: translate(30px, 33.528168px);\n }\n 13.333333% {\n transform: translate(30px, 33.528168px);\n }\n 20% {\n transform: translate(30px, 41.764084px);\n }\n 26.666667% {\n transform: translate(30px, 33.528168px);\n }\n 40% {\n transform: translate(30px, -2.651608px);\n }\n 46.666667% {\n transform: translate(30px, -4.471832px);\n }\n 53.333333% {\n transform: translate(30px, -2.651608px);\n }\n 66.666667% {\n transform: translate(30px, 33.528168px);\n }\n 73.333333% {\n transform: translate(30px, 41.764084px);\n }\n 80% {\n transform: translate(30px, 33.528168px);\n }\n 100% {\n transform: translate(30px, 33.528168px);\n }\n `,\n translate3: keyframes`\n 0% {\n transform: translate(50px, 33.528168px);\n }\n 26.666667% {\n transform: translate(50px, 33.528168px);\n }\n 33.333333% {\n transform: translate(50px, 41.764084px);\n }\n 40% {\n transform: translate(50px, 33.528168px);\n }\n 53.333333% {\n transform: translate(50px, -2.651608px);\n }\n 60% {\n transform: translate(50px, -4.471832px);\n }\n 66.666667% {\n transform: translate(50px, -2.651608px);\n }\n 80% {\n transform: translate(50px, 33.528168px);\n }\n 86.666667% {\n transform: translate(50px, 41.764084px);\n }\n 93.333333% {\n transform: translate(50px, 33.528168px);\n }\n 100% {\n transform: translate(50px, 33.528168px);\n }\n `,\n };\n\n return {\n root: (props: { size: SpinnerSize; customSize?: number }) =>\n css({\n height: props.customSize ? `${props.customSize}px` : undefined,\n verticalAlign: 'middle',\n width: props.customSize ? `${props.customSize}px` : sizes[props.size],\n }),\n circle1Scale: css({\n animation: `${animations.scale1} 1s linear infinite normal forwards;`,\n }),\n circle2Scale: css({\n animation: `${animations.scale2} 1s linear infinite normal forwards;`,\n }),\n circle3Scale: css({\n animation: `${animations.scale3} 1s linear infinite normal forwards;`,\n }),\n circle1Translate: css({\n animation: `${animations.translate1} 1s linear infinite normal forwards;`,\n }),\n circle2Translate: css({\n animation: `${animations.translate2} 1s linear infinite normal forwards;`,\n }),\n circle3Translate: css({\n animation: `${animations.translate3} 1s linear infinite normal forwards;`,\n }),\n };\n};\n","import { css } from 'emotion';\nimport { getGlowOnFocusStyles } from '../utils.styles';\nimport tokens from '@contentful/f36-tokens';\n\nexport const getNavbarSearchStyles = () => ({\n navbarSearch: css(\n {\n // default button reset styles\n minWidth: '24px',\n width: '24px',\n minHeight: '24px',\n height: '24px',\n svg: {\n fill: tokens.gray700,\n },\n },\n getGlowOnFocusStyles(),\n ),\n});\n","import React from 'react';\nimport { cx } from 'emotion';\nimport { getNavbarSwitcherItemStyles } from './NavbarSwitcherItem.styles';\nimport { NavbarEnvVariant } from './NavbarEnvVariant';\nimport {\n Flex,\n type CommonProps,\n type ExpandProps,\n type PropsWithHTMLElement,\n} from '@contentful/f36-core';\n\ntype NavbarSwitcherItemOwnProps = CommonProps & {\n children?: React.ReactNode;\n isCircle?: boolean;\n envVariant?: 'master' | 'non-master';\n isAlias?: boolean;\n};\n\nexport type NavbarSwitcherItemProps = PropsWithHTMLElement<\n NavbarSwitcherItemOwnProps,\n 'li'\n>;\n\nfunction _NavbarSwitcherItem(\n props: ExpandProps<NavbarSwitcherItemProps>,\n ref: React.Ref<HTMLLIElement>,\n) {\n const {\n children,\n isCircle,\n className,\n envVariant,\n isAlias,\n testId = 'cf-ui-navbar-switcher-item',\n ...otherProps\n } = props;\n const styles = getNavbarSwitcherItemStyles();\n const classes = cx(styles.breadcrumbsItem, className, {\n [styles.breadcrumbsItemCircle]: isCircle,\n [styles.breadcrumbsItemEnvMaster]: envVariant === 'master',\n [styles.breadcrumbsItemEnvNonMaster]: envVariant === 'non-master',\n });\n\n return (\n <li {...otherProps} ref={ref} className={classes} data-test-id={testId}>\n <Flex fullHeight justifyContent=\"center\" alignItems=\"center\">\n {envVariant && <NavbarEnvVariant isAlias={isAlias} />}\n <span>{children}</span>\n </Flex>\n </li>\n );\n}\n\nexport const NavbarSwitcherItem = React.forwardRef(_NavbarSwitcherItem);\n","import { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\nimport { mqs } from '../utils.styles';\n\nconst mobileIcon = {\n display: 'none',\n '&:first-child': {\n display: 'block',\n },\n\n [mqs.medium]: {\n display: 'block',\n '&:first-child': {\n display: 'none',\n },\n },\n};\n\nexport const getNavbarSwitcherItemStyles = () => ({\n breadcrumbsItem: css({\n position: 'relative',\n alignItems: 'center',\n justifyContent: 'center',\n border: `solid 1px ${tokens.gray300}`,\n borderLeft: 'none',\n display: 'inline-flex',\n margin: 0,\n minWidth: 0,\n padding: `0 ${tokens.spacingXs}`,\n height: tokens.spacingL,\n borderRadius: '3rem',\n zIndex: 2,\n\n whiteSpace: 'nowrap',\n '&:first-child': {\n minWidth: '24px',\n },\n '&:nth-child(2)': {\n zIndex: 1,\n marginLeft: '-10px',\n paddingLeft: tokens.spacingM,\n borderRadius: `0 3rem 3rem 0`,\n span: {\n maxWidth: '80px',\n textOverflow: 'ellipsis',\n overflow: 'hidden',\n [mqs.large]: {\n maxWidth: '100%',\n },\n },\n },\n '&:nth-child(3)': {\n marginLeft: '-10px',\n paddingLeft: tokens.spacingM,\n borderRadius: `0 3rem 3rem 0`,\n fontFamily: tokens.fontStackMonospace,\n fontSize: tokens.fontSizeS,\n fontWeight: tokens.fontWeightMedium,\n zIndex: 0,\n span: {\n maxWidth: '40px',\n textOverflow: 'ellipsis',\n overflow: 'hidden',\n [mqs.large]: {\n maxWidth: '100%',\n },\n },\n '> div': {\n [mqs.medium]: {\n gap: tokens.spacing2Xs,\n },\n },\n },\n }),\n breadcrumbsItemCircle: css({\n border: `solid 1px ${tokens.gray300}`,\n borderRadius: '50%',\n color: tokens.gray400,\n padding: 0,\n display: 'flex',\n justifyContent: 'center',\n fontSize: '11px',\n width: tokens.spacingL,\n height: tokens.spacingL,\n }),\n breadcrumbsItemEnvMaster: css({\n color: tokens.green600,\n ' svg': {\n ...mobileIcon,\n fill: tokens.green600,\n },\n }),\n breadcrumbsItemEnvNonMaster: css({\n color: tokens.orange500,\n svg: {\n ...mobileIcon,\n fill: tokens.orange500,\n },\n }),\n});\n","import React from 'react';\nimport { NavbarSwitcherItemProps } from './NavbarSwitcherItem';\nimport { CircleIcon } from '../icons';\nimport { EnvironmentAliasIcon, EnvironmentIcon } from '@contentful/f36-icons';\n\nexport type NavbarEnvVariantProps = Pick<NavbarSwitcherItemProps, 'isAlias'>;\n\nexport function NavbarEnvVariant({ isAlias }: NavbarEnvVariantProps) {\n return (\n <>\n <CircleIcon key=\"mobile-icon\" size=\"tiny\" />\n {isAlias ? (\n <EnvironmentAliasIcon key=\"full-icon\" size=\"tiny\" />\n ) : (\n <EnvironmentIcon key=\"full-icon\" size=\"tiny\" />\n )}\n </>\n );\n}\n","import React from 'react';\nimport { cx } from 'emotion';\nimport { HelpIcon } from '../icons';\nimport {\n type CommonProps,\n type PropsWithHTMLElement,\n type ExpandProps,\n} from '@contentful/f36-core';\nimport { Button } from '@contentful/f36-button';\nimport { NavbarMenu } from '../NavbarMenu/NavbarMenu';\nimport { getNavbarHelpStyles } from './NavbarHelp.styles';\n\ntype NavbarHelpOwnProps = CommonProps & {\n children: React.ReactNode;\n};\n\nexport type NavbarHelpProps = PropsWithHTMLElement<\n NavbarHelpOwnProps,\n 'button'\n>;\n\nfunction _NavbarHelp(\n props: ExpandProps<NavbarHelpProps>,\n ref: React.Ref<HTMLButtonElement>,\n) {\n const {\n children,\n className,\n testId = 'cf-ui-navbar-help-trigger',\n ...otherProps\n } = props;\n\n const styles = getNavbarHelpStyles();\n\n return (\n <NavbarMenu\n testId=\"cf-ui-navbar-help-menu\"\n trigger={\n <Button\n aria-label=\"Help Menu\"\n {...otherProps}\n as=\"button\"\n ref={ref}\n className={cx(styles.navbarHelp, className)}\n testId={testId}\n variant=\"transparent\"\n size=\"small\"\n startIcon={<HelpIcon size=\"medium\" />}\n >\n Help\n </Button>\n }\n >\n {children}\n </NavbarMenu>\n );\n}\n\nexport const NavbarHelp = React.forwardRef(_NavbarHelp);\n","import { css } from 'emotion';\nimport { getGlowOnFocusStyles } from '../utils.styles';\nimport tokens from '@contentful/f36-tokens';\n\nexport const getNavbarHelpStyles = () => ({\n navbarHelp: css(\n {\n // default button reset styles\n fontSize: tokens.fontSizeS,\n padding: `0 ${tokens.spacing2Xs}`,\n width: 'max-content',\n minHeight: '24px',\n height: '24px',\n color: tokens.gray700,\n svg: {\n fill: tokens.gray700,\n },\n },\n getGlowOnFocusStyles(),\n ),\n});\n","import React from 'react';\nimport { cx } from 'emotion';\nimport { getNavbarBadgeStyles } from './NavbarBadge.styles';\nimport type {\n CommonProps,\n ExpandProps,\n PolymorphicComponent,\n PolymorphicProps,\n} from '@contentful/f36-core';\n\nconst NAVBAR_BADGE_DEFAULT_TAG = 'div';\n\ntype NavbarBadgeOwnProps = CommonProps & {\n children?: React.ReactNode;\n as?: React.ElementType;\n};\n\nexport type NavbarBadgeProps<\n E extends React.ElementType = typeof NAVBAR_BADGE_DEFAULT_TAG,\n> = PolymorphicProps<NavbarBadgeOwnProps, E>;\n\nfunction _NavbarBadge(\n props: NavbarBadgeProps<React.ElementType>,\n ref: React.Ref<any>,\n) {\n const {\n as: Comp = NAVBAR_BADGE_DEFAULT_TAG,\n children,\n className,\n testId = 'cf-ui-navbar-badge',\n ...otherProps\n } = props;\n const styles = getNavbarBadgeStyles();\n\n return (\n <Comp\n {...otherProps}\n ref={ref}\n className={cx(styles.navbarBadge, className)}\n data-test-id={testId}\n >\n {children}\n </Comp>\n );\n}\n\nexport const NavbarBadge: PolymorphicComponent<\n ExpandProps<NavbarBadgeOwnProps>,\n typeof NAVBAR_BADGE_DEFAULT_TAG\n> = React.forwardRef(_NavbarBadge);\n","import { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\nexport const getNavbarBadgeStyles = () => ({\n navbarBadge: css({\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n background: 'none',\n border: `1px solid ${tokens.purple600}`,\n margin: 0,\n outline: 'none',\n fontSize: tokens.fontSizeS,\n lineHeight: tokens.lineHeightS,\n fontWeight: tokens.fontWeightMedium,\n textAlign: 'center',\n padding: `0 ${tokens.spacingXs}`,\n textDecoration: 'none',\n color: `${tokens.purple600}!important`,\n borderRadius: '1.75rem',\n }),\n});\n","import React from 'react';\nimport { cx } from 'emotion';\nimport { getNavbarTopbarItemStyles } from './NavbarTopbarItem.styles';\nimport type {\n CommonProps,\n ExpandProps,\n PolymorphicComponent,\n PolymorphicProps,\n} from '@contentful/f36-core';\n\nconst NAVBAR_BADGE_DEFAULT_TAG = 'button';\n\ntype NavbarTopbarItemOwnProps = CommonProps & {\n children?: React.ReactNode;\n};\n\nexport type NavbarTopbarItemProps<\n E extends React.ElementType = typeof NAVBAR_BADGE_DEFAULT_TAG,\n> = PolymorphicProps<NavbarTopbarItemOwnProps, E>;\n\nfunction _NavbarTopbarItem<\n E extends React.ElementType = typeof NAVBAR_BADGE_DEFAULT_TAG,\n>(props: NavbarTopbarItemProps<E>, ref: React.Ref<any>) {\n const {\n as: Comp = NAVBAR_BADGE_DEFAULT_TAG,\n children,\n className,\n testId = 'cf-ui-navbar-topbar-item',\n ...otherProps\n } = props;\n const styles = getNavbarTopbarItemStyles();\n\n return (\n <Comp\n {...otherProps}\n ref={ref}\n className={cx(styles.navbarTopItem, className)}\n data-test-id={testId}\n >\n {children}\n </Comp>\n );\n}\n\nexport const NavbarTopbarItem: PolymorphicComponent<\n ExpandProps<NavbarTopbarItemOwnProps>,\n typeof NAVBAR_BADGE_DEFAULT_TAG\n> = React.forwardRef(_NavbarTopbarItem);\n","import { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\nimport { getGlowOnFocusStyles } from '../utils.styles';\nimport { hexToRGBA } from '@contentful/f36-utils';\nexport const getNavbarTopbarItemStyles = () => ({\n navbarTopItem: css(\n {\n // default button reset styles\n margin: 0,\n background: 'none',\n border: '1px solid',\n borderColor: 'transparent',\n cursor: 'pointer',\n display: 'flex',\n gap: tokens.spacing2Xs,\n alignItems: 'center',\n lineHeight: tokens.lineHeightDefault,\n color: tokens.gray700,\n padding: `0 ${tokens.spacing2Xs}`,\n minHeight: '24px',\n fontSize: tokens.fontSizeS,\n fontWeight: tokens.fontWeightMedium,\n outline: 'none',\n borderRadius: tokens.borderRadiusMedium,\n\n '&:hover': {\n backgroundColor: hexToRGBA(tokens.gray900, 0.05),\n },\n svg: {\n fill: 'currentColor',\n },\n },\n getGlowOnFocusStyles(),\n ),\n});\n"]}
1
+ {"version":3,"sources":["../../src/constants.ts","../../src/CompoundNavbar.ts","../../src/Navbar.tsx","../../src/Navbar.styles.ts","../../src/utils.styles.ts","../../src/icons/CaretIcon.tsx","../../src/icons/ContentfulLogoIcon.tsx","../../src/NavbarMenu/NavbarMenu.tsx","../../src/NavbarMenu/NavbarMenu.styles.ts","../../src/NavbarAccount/NavbarAccount.tsx","../../src/NavbarAccount/NavbarAccount.styles.ts","../../src/NavbarAccount/NavbarAccountSkeleton.tsx","../../src/NavbarItem/NavbarItem.tsx","../../src/NavbarItem/NavbarItem.styles.ts","../../src/NavbarItemIcon/NavbarItemIcon.tsx","../../src/NavbarItemIcon/NavbarItemIcon.styles.ts","../../src/NavbarItem/NavbarItemSkeleton.tsx","../../src/NavbarMenuItem/NavbarMenuItem.tsx","../../src/NavbarMenuItem/NavbarMenuItem.styles.ts","../../src/NavbarMenuItem/NavbarMenuItemSkeleton.tsx","../../src/NavbarSwitcher/NavbarSwitcher.tsx","../../src/NavbarSwitcher/NavbarSwitcher.styles.ts","../../src/NavbarSwitcher/NavbarEnvVariant.tsx","../../src/NavbarSwitcher/NavbarSwitcherSkeleton.tsx","../../src/NavbarBadge/NavbarBadge.tsx","../../src/NavbarBadge/NavbarBadge.styles.ts","../../src/NavbarSubmenu/NavbarSubmenu.tsx","../../src/NavbarSubmenu/NavbarMenu.styles.ts"],"names":["NAVBAR_HEIGHT","MenuDivider","MenuSectionTitle","Flex","React","css","tokens","mqs","getGlowOnFocusStyles","shadow","increaseHitArea","minSize","getNavbarStyles","contentMaxWidth","variant","mobileNavigationBp","generateComponentWithVariants","generateIconComponent","IconVariant","CaretIcon","ContentfulLogoIcon","cx","Button","ListIcon","Menu","getNavbarMenuStyles","NavbarMenu","props","trigger","children","testId","onOpen","onClose","styles","_Navbar","ref","_a","logo","promotions","switcher","mainNavigation","secondaryNavigation","account","mobileNavigation","mobileNavigationProps","className","aria","otherProps","__objRest","__spreadProps","__spreadValues","Navbar","notificationVarianColorMap","getNavbarAccountStyles","Avatar","Tooltip","_NavbarAccount","avatar","label","initials","username","hasNotification","notificationVariant","NavbarAccount","SkeletonContainer","SkeletonImage","NavbarAccountSkeleton","ariaLabel","borderWidth","getNavbarItemActiveStyles","getNavbarItemDisabledStyles","commonItemStyles","getNavbarItemStyles","hasTitle","getNavbarItemSkeletonStyles","getNavbarItemIconStyles","NavbarItemIcon","icon","isActive","iconClassName","size","rest","NAVBAR_ITEM_DEFAULT_TAG","_NavbarItem","Comp","title","isDisabled","isMenuTrigger","isNavbarItemHasMenu","showCaret","item","NavbarItem","SkeletonText","NavbarItemSkeleton","estimatedWidth","getNavbarMenuItemStyles","ArrowSquareOutIcon","NAVBAR_MENU_ITEM_DEFAULT_TAG","_NavbarMenuItem","itemIsExternalLink","isExternalLink","externalIcon","NavbarMenuItem","SkeletonBodyText","NavbarMenuItemSkeleton","hexToRGBA","BORDER_WIDTH","getNavbarSwitcherStyles","showSpaceEnv","getEnvVariantColor","getWrapperBackground","getNavbarIconColor","sharedStyles","EnvironmentAliasIcon","EnvironmentIcon","FlaskIcon","RocketLaunchIcon","NavbarEnvVariant","isAlias","envVariant","isMaster","color","NavbarSwitcherSkeleton","CaretRightIcon","Text","_NavbarSwitcher","space","environment","isLoading","NavbarSwitcher","getNavbarBadgeStyles","NAVBAR_BADGE_DEFAULT_TAG","_NavbarBadge","NavbarBadge","getNavbarSubmenuStyles","NavbarSubmenu"],"mappings":"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","sourcesContent":["export const NAVBAR_HEIGHT = 60;\n","import { MenuDivider } from '@contentful/f36-menu';\nimport { MenuSectionTitle } from '@contentful/f36-menu';\nimport { Navbar as OriginalNavbar } from './Navbar';\n\nimport { NavbarAccount, NavbarAccountSkeleton } from './NavbarAccount';\nimport { NavbarItem, NavbarItemSkeleton } from './NavbarItem';\nimport { NavbarMenuItem, NavbarMenuItemSkeleton } from './NavbarMenuItem';\nimport { NavbarSwitcher, NavbarSwitcherSkeleton } from './NavbarSwitcher';\nimport { NavbarBadge } from './NavbarBadge/NavbarBadge';\nimport { NavbarSubmenu } from './NavbarSubmenu/NavbarSubmenu';\n\ntype CompoundNavbar = typeof OriginalNavbar & {\n Item: typeof NavbarItem;\n ItemSkeleton: typeof NavbarItemSkeleton;\n MenuItem: typeof NavbarMenuItem;\n MenuItemSkeleton: typeof NavbarMenuItemSkeleton;\n MenuDivider: typeof MenuDivider;\n MenuSectionTitle: typeof MenuSectionTitle;\n Submenu: typeof NavbarSubmenu;\n Switcher: typeof NavbarSwitcher;\n SwitcherSkeleton: typeof NavbarSwitcherSkeleton;\n Account: typeof NavbarAccount;\n AccountSkeleton: typeof NavbarAccountSkeleton;\n Badge: typeof NavbarBadge;\n};\n\nexport const Navbar = OriginalNavbar as CompoundNavbar;\nNavbar.Item = NavbarItem;\nNavbar.ItemSkeleton = NavbarItemSkeleton;\nNavbar.MenuItem = NavbarMenuItem;\nNavbar.MenuItemSkeleton = NavbarMenuItemSkeleton;\nNavbar.MenuDivider = MenuDivider;\nNavbar.MenuSectionTitle = MenuSectionTitle;\nNavbar.Submenu = NavbarSubmenu;\nNavbar.Switcher = NavbarSwitcher;\nNavbar.SwitcherSkeleton = NavbarSwitcherSkeleton;\nNavbar.Account = NavbarAccount;\nNavbar.AccountSkeleton = NavbarAccountSkeleton;\nNavbar.Badge = NavbarBadge;\n","import { type CommonProps, type ExpandProps, Flex } from '@contentful/f36-core';\nimport React from 'react';\nimport { getNavbarStyles } from './Navbar.styles';\nimport { ContentfulLogoIcon } from './icons';\nimport { cx } from 'emotion';\nimport { Button } from '@contentful/f36-button';\nimport { ListIcon } from '@contentful/f36-icons';\nimport { NavbarMenu } from './NavbarMenu/NavbarMenu';\n\ntype NavbarOwnProps = CommonProps & {\n /**\n * Accepts a React Component that will be displayed\n * instead of the Contentful Logo\n */\n logo?: React.ReactNode;\n\n /** Promotions component, displayed on most left side */\n promotions?: React.ReactNode;\n\n /** Environment Switcher component */\n switcher?: React.ReactNode;\n\n /** Main Navigation Elements */\n mainNavigation?: React.ReactNode;\n\n /** Secondary Navigation Elements, displayed in the right side */\n secondaryNavigation?: React.ReactNode;\n\n /** User Account Component */\n account?: React.ReactNode;\n\n /** Navigation displayed on mobile versions */\n mobileNavigation?: React.ReactNode;\n\n mobileNavigationProps?: {\n /** breakpoint to determine when to show the mobile navigation */\n breakpoint?: 'small' | 'medium';\n\n /**\n * label of the mobile navigation trigger button\n * @default 'Menu'\n */\n label?: string;\n };\n\n /**\n * Defines the max-width of the content inside the navbar.\n * @default '100%'\n */\n contentMaxWidth?: string;\n\n /**\n * Describes the size variation of the Navbar\n * Variant wide will set the contentMaxWidth to 1524px\n */\n variant?: 'wide' | 'fullscreen';\n\n /**\n * aria labels for different areas of the navigation bar\n */\n aria?: {\n labelMainNavigation?: string;\n labelSecondaryNavigation?: string;\n labelPromotions?: string;\n labelAccount?: string;\n };\n};\n\n// expose only the HTML props that are needed to not pollute the API\ntype NavbarHTMLElementProps = Pick<React.ComponentPropsWithoutRef<'div'>, 'id'>;\n\nexport type NavbarProps = NavbarHTMLElementProps & NavbarOwnProps;\n\nfunction _Navbar(props: ExpandProps<NavbarProps>, ref: React.Ref<HTMLElement>) {\n const {\n logo,\n promotions,\n switcher,\n mainNavigation,\n secondaryNavigation,\n account,\n mobileNavigation,\n mobileNavigationProps = { breakpoint: 'small', label: 'Menu' },\n className,\n contentMaxWidth = '100%',\n testId = 'cf-ui-navbar',\n variant = 'wide',\n aria = {\n labelMainNavigation: 'Main Navigation',\n labelSecondaryNavigation: 'Secondary Navigation',\n labelPromotions: 'Promotions',\n labelAccount: 'Account Navigation',\n },\n ...otherProps\n } = props;\n const styles = getNavbarStyles({ contentMaxWidth, variant });\n\n return (\n <Flex\n {...otherProps}\n ref={ref}\n testId={testId}\n className={cx(styles.container, className)}\n as=\"header\"\n >\n <Flex\n as=\"nav\"\n className={styles.navigation}\n justifyContent=\"space-between\"\n gap=\"spacingXs\"\n >\n <Flex alignItems=\"center\" gap=\"spacingL\">\n {logo || <ContentfulLogoIcon className={styles.logo} />}\n {mobileNavigation && (\n <NavbarMenu\n trigger={\n <Button\n className={styles.mobileNavigationButton(\n mobileNavigationProps.breakpoint,\n )}\n startIcon={<ListIcon size=\"medium\" />}\n >\n {mobileNavigationProps.label}\n </Button>\n }\n >\n {mobileNavigation}\n </NavbarMenu>\n )}\n {mainNavigation && (\n <Flex\n className={styles.mainNavigation(\n mobileNavigationProps.breakpoint,\n )}\n aria-label={aria.labelMainNavigation}\n gap=\"spacingXs\"\n >\n {mainNavigation}\n </Flex>\n )}\n </Flex>\n <Flex alignItems=\"center\" gap=\"spacingXs\">\n <Flex\n alignItems=\"center\"\n className={styles.promoNavigationWrapper}\n aria-label={aria.labelPromotions}\n gap=\"spacingXs\"\n >\n {promotions}\n </Flex>\n <Flex alignItems=\"center\">{switcher}</Flex>\n <Flex alignItems=\"center\" gap=\"spacingXs\">\n {secondaryNavigation && (\n <Flex\n className={styles.secondaryNavigationWrapper}\n aria-label={aria.labelSecondaryNavigation}\n gap=\"spacingXs\"\n >\n {secondaryNavigation}\n </Flex>\n )}\n {account && (\n <Flex\n className={styles.account}\n aria-label={aria.labelAccount}\n gap=\"spacingXs\"\n >\n {account}\n </Flex>\n )}\n </Flex>\n </Flex>\n </Flex>\n </Flex>\n );\n}\n\nexport const Navbar = React.forwardRef(_Navbar);\n","import { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\nimport { mqs } from './utils.styles';\nimport { NavbarProps } from './Navbar';\nimport { NAVBAR_HEIGHT } from './constants';\n\nexport const getNavbarStyles = ({\n contentMaxWidth,\n variant,\n}: Pick<NavbarProps, 'contentMaxWidth' | 'variant'>) => ({\n container: css({\n justifyContent: 'center',\n backgroundColor: tokens.gray100,\n width: '100%',\n }),\n logo: css({\n display: 'none',\n [mqs.small]: {\n display: 'block',\n height: '28px',\n width: '28px',\n },\n }),\n\n navigation: css({\n width: '100%',\n maxWidth: variant === 'wide' ? '1920px' : contentMaxWidth,\n padding: `${tokens.spacingS} ${tokens.spacingM}`,\n height: `${NAVBAR_HEIGHT}px`,\n [mqs.small]: {\n padding: `${tokens.spacingM} ${tokens.spacingL}`,\n },\n }),\n\n mainNavigation: (mobileNavigationBp: 'small' | 'medium') =>\n css(\n {\n display: 'none',\n },\n mobileNavigationBp === 'small'\n ? {\n [mqs.small]: {\n display: 'flex',\n },\n }\n : {\n [mqs.medium]: {\n display: 'flex',\n },\n },\n ),\n\n mobileNavigationButton: (mobileNavigationBp: 'small' | 'medium') =>\n css(\n {\n display: 'flex',\n minHeight: 'initial', // unset default 40px height\n height: '36px',\n padding: '0 12px',\n borderRadius: '10px',\n },\n mobileNavigationBp === 'small'\n ? {\n [mqs.small]: {\n display: 'none',\n },\n }\n : {\n [mqs.medium]: {\n display: 'none',\n },\n },\n ),\n mobileNavigationIcon: css({\n heigt: '20px',\n width: '20px',\n }),\n\n secondaryNavigationWrapper: css({\n '> *:not(:first-child)': {\n display: 'none',\n [mqs.xsmall]: {\n display: 'flex',\n },\n },\n }),\n promoNavigationWrapper: css({\n display: 'none',\n [mqs.large]: {\n display: 'flex',\n },\n }),\n account: css({\n display: 'none',\n [mqs.xsmall]: {\n display: 'flex',\n },\n }),\n});\n","import tokens from '@contentful/f36-tokens';\nimport { css } from 'emotion';\n\ntype screens = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';\ntype mediaqueries = Record<screens, string>;\n\nexport const mqs: mediaqueries = {\n xsmall: '@media (min-width: 576px)',\n small: '@media (min-width: 867px)',\n medium: '@media (min-width: 1024px)',\n large: '@media (min-width: 1200px)',\n xlarge: '@media (min-width: 1920px)',\n};\n\nexport const getGlowOnFocusStyles = (shadow: string = tokens.glowPrimary) =>\n css({\n '&:focus': {\n boxShadow: shadow,\n },\n '&:focus:not(:focus-visible)': {\n boxShadow: 'unset',\n },\n '&:focus-visible': {\n boxShadow: shadow,\n },\n });\n\nexport const increaseHitArea = (minSize = '44px') =>\n css({\n overflow: 'visible',\n position: 'relative',\n '&:after': {\n minHeight: minSize,\n minWidth: minSize,\n position: 'absolute',\n width: '100%',\n content: '\"\"',\n left: '50%',\n top: '50%',\n transform: 'translate(-50%, -50%)',\n },\n });\n","import React from 'react';\nimport tokens from '@contentful/f36-tokens';\nimport {\n generateComponentWithVariants,\n generateIconComponent,\n IconVariant,\n} from '@contentful/f36-icon';\n\nexport const CaretIcon = generateComponentWithVariants({\n variants: {\n [IconVariant.Active]: generateIconComponent({\n path: (\n <>\n <path\n d=\"M10.0153 4.76531L6.2653 8.51531C6.23048 8.55018 6.18912 8.57784 6.14359 8.59671C6.09807 8.61558 6.04927 8.62529 5.99999 8.62529C5.95071 8.62529 5.90191 8.61558 5.85639 8.59671C5.81086 8.57784 5.76951 8.55018 5.73468 8.51531L1.98468 4.76531C1.93217 4.71287 1.89641 4.64602 1.88192 4.57324C1.86742 4.50046 1.87485 4.42501 1.90326 4.35645C1.93166 4.28789 1.97977 4.22931 2.0415 4.1881C2.10322 4.1469 2.17578 4.12494 2.24999 4.125H9.74999C9.8242 4.12494 9.89676 4.1469 9.95848 4.1881C10.0202 4.22931 10.0683 4.28789 10.0967 4.35645C10.1251 4.42501 10.1326 4.50046 10.1181 4.57324C10.1036 4.64602 10.0678 4.71287 10.0153 4.76531Z\"\n fill={tokens.blue300}\n />\n </>\n ),\n viewBox: '0 0 12 12',\n }),\n [IconVariant.Default]: generateIconComponent({\n path: (\n <>\n <path\n d=\"M10.0153 4.76531L6.2653 8.51531C6.23048 8.55018 6.18912 8.57784 6.14359 8.59671C6.09807 8.61558 6.04927 8.62529 5.99999 8.62529C5.95071 8.62529 5.90191 8.61558 5.85639 8.59671C5.81086 8.57784 5.76951 8.55018 5.73468 8.51531L1.98468 4.76531C1.93217 4.71287 1.89641 4.64602 1.88192 4.57324C1.86742 4.50046 1.87485 4.42501 1.90326 4.35645C1.93166 4.28789 1.97977 4.22931 2.0415 4.1881C2.10322 4.1469 2.17578 4.12494 2.24999 4.125H9.74999C9.8242 4.12494 9.89676 4.1469 9.95848 4.1881C10.0202 4.22931 10.0683 4.28789 10.0967 4.35645C10.1251 4.42501 10.1326 4.50046 10.1181 4.57324C10.1036 4.64602 10.0678 4.71287 10.0153 4.76531Z\"\n fill={tokens.gray400}\n />\n </>\n ),\n viewBox: '0 0 12 12',\n }),\n },\n});\n","import React from 'react';\nimport { generateIconComponent } from '@contentful/f36-icon';\n\nexport const ContentfulLogoIcon = /*#__PURE__*/ generateIconComponent({\n name: 'ContentfulLogoIcon',\n viewBox: '0 0 28 28',\n path: (\n <>\n <path\n fill=\"#1773EB\"\n d=\"M10.713 5.001c.845.843 1.167 2.079.845 3.228A6.663 6.663 0 0 1 15 7.276h.026a6.7 6.7 0 0 1 4.743 1.988 2.64 2.64 0 1 0 3.746-3.715A11.96 11.96 0 0 0 15.042 2h-.046a11.933 11.933 0 0 0-6.691 2.036h.074a3.287 3.287 0 0 1 2.334.967V5Z\"\n />\n <path\n fill=\"#E44F20\"\n d=\"M21.594 17.999a2.64 2.64 0 0 0-1.858.766 6.703 6.703 0 0 1-4.732 1.951h-.025a6.65 6.65 0 0 1-3.447-.968A3.3 3.3 0 0 1 8.35 23.93h-.086A11.926 11.926 0 0 0 14.96 26h.046a11.94 11.94 0 0 0 8.449-3.484 2.64 2.64 0 0 0-1.859-4.514V18h-.002Z\"\n />\n <path\n fill=\"#FFDA00\"\n d=\"M6.013 18.295a3.27 3.27 0 0 1 2.334-.967c.302 0 .603.04.894.122a6.7 6.7 0 0 1 .013-6.928A3.3 3.3 0 0 1 5.08 7.335v-.09a11.999 11.999 0 0 0-.032 13.453v-.07a3.27 3.27 0 0 1 .966-2.333Z\"\n />\n <path\n fill=\"#1773EB\"\n d=\"M8.379 4.62c-.75 0-1.276.312-1.913.949-.607.605-.798 1.135-.8 1.766A2.712 2.712 0 1 0 8.38 4.62Z\"\n />\n <path\n fill=\"#E44F20\"\n d=\"M5.628 20.631c0 .75.31 1.276.946 1.912.607.606 1.136.799 1.766.8a2.703 2.703 0 1 0-.017-5.407 2.703 2.703 0 0 0-2.695 2.704v-.009Z\"\n />\n </>\n ),\n});\n","import React from 'react';\nimport { Menu, type MenuListProps, type MenuProps } from '@contentful/f36-menu';\nimport { getNavbarMenuStyles } from './NavbarMenu.styles';\n\nexport type NavbarMenuProps = {\n trigger: React.ReactNode;\n children?: React.ReactNode;\n} & Pick<MenuListProps, 'testId'> &\n Pick<MenuProps, 'onOpen' | 'onClose'>;\n\nexport const NavbarMenu = (props: NavbarMenuProps) => {\n const {\n trigger,\n children,\n testId = 'cf-ui-navbar-menu-list',\n onOpen,\n onClose,\n } = props;\n const styles = getNavbarMenuStyles();\n\n return (\n <Menu onOpen={onOpen} onClose={onClose}>\n <Menu.Trigger>{trigger}</Menu.Trigger>\n <Menu.List className={styles.menuList} testId={testId}>\n {children}\n </Menu.List>\n </Menu>\n );\n};\n","import { css } from 'emotion';\nimport { mqs } from '../utils.styles';\n\nexport const getNavbarMenuStyles = () => ({\n menuList: css({\n minWidth: 0,\n [mqs.xsmall]: {\n minWidth: '250px',\n },\n }),\n});\n","import React from 'react';\nimport { cx } from 'emotion';\nimport { getNavbarAccountStyles } from './NavbarAccount.styles';\nimport {\n type PropsWithHTMLElement,\n type CommonProps,\n type ExpandProps,\n} from '@contentful/f36-core';\nimport { NavbarMenu } from '../NavbarMenu/NavbarMenu';\nimport { Flex } from '@contentful/f36-core';\nimport { Avatar } from '@contentful/f36-avatar';\nimport { Tooltip } from '@contentful/f36-tooltip';\n\ntype NavbarAccountOwnProps = CommonProps & {\n children: React.ReactNode;\n username: string;\n avatar?: string;\n initials?: string;\n hasNotification?: boolean;\n label?: string;\n /**\n * @default 'warning'\n */\n notificationVariant?: 'warning' | 'negative' | 'info';\n};\n\nexport type NavbarAccountProps = PropsWithHTMLElement<\n NavbarAccountOwnProps,\n 'button'\n>;\n\nfunction _NavbarAccount(\n props: ExpandProps<NavbarAccountProps>,\n ref: React.Ref<HTMLButtonElement>,\n) {\n const {\n children,\n className,\n testId = 'cf-ui-navbar-account-trigger',\n avatar,\n label = 'Account menu',\n initials,\n username,\n hasNotification,\n notificationVariant = 'warning',\n ...otherProps\n } = props;\n const styles = getNavbarAccountStyles();\n\n return (\n <NavbarMenu\n trigger={\n <div>\n <Tooltip placement=\"bottom\" content={label} showDelay={600} usePortal>\n <Flex\n as=\"button\"\n {...otherProps}\n ref={ref}\n className={cx(styles.navbarAccount, className)}\n testId={testId}\n alignItems=\"center\"\n aria-label={label}\n >\n <Avatar\n src={avatar}\n initials={initials}\n size=\"small\"\n variant=\"user\"\n />\n\n {hasNotification ? (\n <span\n className={styles.notificationIcon(notificationVariant)}\n />\n ) : null}\n </Flex>\n </Tooltip>\n </div>\n }\n >\n {children}\n </NavbarMenu>\n );\n}\n\nexport const NavbarAccount = React.forwardRef(_NavbarAccount);\n","import { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\nimport { NavbarAccountProps } from './NavbarAccount';\nimport { getGlowOnFocusStyles, increaseHitArea } from '../utils.styles';\n\nconst notificationVarianColorMap: Record<\n NavbarAccountProps['notificationVariant'],\n string\n> = {\n warning: tokens.colorWarning,\n negative: tokens.colorNegative,\n info: tokens.blue500,\n};\n\nexport const getNavbarAccountStyles = () => ({\n navbarAccount: css(\n {\n cursor: 'pointer',\n background: 'none',\n position: 'relative',\n outline: 'none',\n overflow: 'visible',\n borderRadius: '50%',\n border: 'none',\n padding: 0,\n '&:hover img': {\n filter: 'brightness(0.9)',\n },\n },\n getGlowOnFocusStyles(),\n increaseHitArea(),\n ),\n notificationIcon: (variant: NavbarAccountProps['notificationVariant']) =>\n css({\n position: 'absolute',\n top: 0,\n right: 0,\n height: tokens.spacingS,\n width: tokens.spacingS,\n borderRadius: '50%',\n border: `2px solid ${tokens.gray100}`,\n backgroundColor: notificationVarianColorMap[variant],\n transform: 'translate(30%, -30%)',\n zIndex: 1, // move above the avatar\n }),\n});\n","import React from 'react';\nimport { SkeletonContainer, SkeletonImage } from '@contentful/f36-skeleton';\nimport tokens from '@contentful/f36-tokens';\n\nexport function NavbarAccountSkeleton({ ariaLabel }: { ariaLabel?: string }) {\n return (\n <SkeletonContainer\n svgWidth={24}\n svgHeight={24}\n ariaLabel={ariaLabel}\n backgroundColor={tokens.gray300}\n foregroundColor={tokens.gray200}\n >\n <SkeletonImage width={24} height={24} radiusX={12} radiusY={12} />\n </SkeletonContainer>\n );\n}\n","import React from 'react';\nimport { cx } from 'emotion';\nimport { getNavbarItemStyles } from './NavbarItem.styles';\nimport { NavbarMenu, type NavbarMenuProps } from '../NavbarMenu/NavbarMenu';\nimport {\n NavbarItemIcon,\n type NavbarItemIconProps,\n} from '../NavbarItemIcon/NavbarItemIcon';\nimport { CaretIcon } from '../icons';\nimport type {\n CommonProps,\n ExpandProps,\n PolymorphicComponent,\n PolymorphicProps,\n} from '@contentful/f36-core';\nimport { Tooltip } from '@contentful/f36-tooltip';\n\nconst NAVBAR_ITEM_DEFAULT_TAG = 'button';\n\ntype NavbarItemTriggerProps = CommonProps & {\n label?: string;\n title?: string;\n icon?: NavbarItemIconProps['icon'];\n isActive?: boolean;\n as?: React.ElementType;\n isDisabled?: boolean;\n};\n\ntype NavbarItemAsMenuProps = NavbarItemTriggerProps &\n Pick<NavbarMenuProps, 'onOpen' | 'onClose'> & {\n children: React.ReactNode;\n };\ntype NavbarItemAsItemProps = NavbarItemTriggerProps & {\n children?: never;\n onOpen?: never;\n onClose?: never;\n};\ntype NavbarItemOwnProps = NavbarItemAsItemProps | NavbarItemAsMenuProps;\n\nexport type NavbarItemProps<\n E extends React.ElementType = typeof NAVBAR_ITEM_DEFAULT_TAG,\n> = PolymorphicProps<NavbarItemOwnProps, E>;\n\nfunction _NavbarItem(\n props: NavbarItemProps<React.ElementType>,\n ref: React.Ref<any>,\n) {\n const {\n as: Comp = NAVBAR_ITEM_DEFAULT_TAG,\n icon,\n label,\n title,\n children,\n className,\n isActive,\n isDisabled,\n testId = 'cf-ui-navbar-item',\n onOpen,\n onClose,\n ...otherProps\n } = props;\n const styles = getNavbarItemStyles({ hasTitle: !!title });\n const isMenuTrigger = isNavbarItemHasMenu(props);\n const showCaret = title && isMenuTrigger;\n let item = (\n <Comp\n {...otherProps}\n ref={ref}\n data-test-id={testId}\n className={cx(styles.navbarItem, className, {\n [styles.isActive]: isActive && !isDisabled,\n [styles.isDisabled]: isDisabled,\n })}\n {...(!title && { 'aria-label': label })}\n {...(isDisabled &&\n (Comp === NAVBAR_ITEM_DEFAULT_TAG\n ? { disabled: true }\n : { tabIndex: -1, 'aria-disabled': true }))}\n >\n {icon && (\n <NavbarItemIcon\n className={styles.icon}\n icon={icon}\n isActive={isActive}\n />\n )}\n {title && <span>{title}</span>}\n {showCaret && <CaretIcon size=\"tiny\" isActive={isActive} />}\n </Comp>\n );\n\n if (!title) {\n item = (\n <div>\n <Tooltip content={label} placement=\"bottom\" showDelay={600} usePortal>\n {item}\n </Tooltip>\n </div>\n );\n }\n\n if (isMenuTrigger) {\n return (\n <NavbarMenu\n trigger={item}\n testId={testId}\n onOpen={onOpen}\n onClose={onClose}\n >\n {children}\n </NavbarMenu>\n );\n }\n\n return item;\n}\n\nconst isNavbarItemHasMenu = <E extends React.ElementType>(\n props: NavbarItemProps<E>,\n): props is PolymorphicProps<NavbarItemAsMenuProps, E> =>\n Boolean(props.children);\n\nexport const NavbarItem: PolymorphicComponent<\n ExpandProps<NavbarItemOwnProps>,\n typeof NAVBAR_ITEM_DEFAULT_TAG\n> = React.forwardRef(_NavbarItem);\n","import { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\nimport { getGlowOnFocusStyles, increaseHitArea, mqs } from '../utils.styles';\n\nconst borderWidth = '1px';\n\nexport const getNavbarItemActiveStyles = () =>\n css({\n backgroundColor: tokens.blue100,\n border: `${borderWidth} solid ${tokens.blue400}`,\n color: tokens.blue600,\n '&:focus,&:hover': {\n backgroundColor: tokens.blue100,\n },\n });\n\nexport const getNavbarItemDisabledStyles = () =>\n css({\n border: 'none',\n opacity: 0.5,\n pointerEvents: 'none',\n });\n\nconst commonItemStyles = {\n display: 'flex',\n justifyContent: 'center',\n padding: `calc(${tokens.spacing2Xs} - ${borderWidth}) calc(${tokens.spacingXs} - ${borderWidth})`,\n alignItems: 'center',\n background: 'none',\n gap: tokens.spacing2Xs,\n};\n\nexport const getNavbarItemStyles = ({ hasTitle }: { hasTitle: boolean }) => ({\n navbarItem: css(\n commonItemStyles,\n {\n appearance: 'none',\n background: 'none',\n outline: 'none',\n border: `${borderWidth} solid transparent`,\n margin: 0,\n fontSize: tokens.fontSizeM,\n lineHeight: tokens.lineHeightM,\n fontWeight: tokens.fontWeightMedium,\n position: 'relative',\n textAlign: 'left',\n whiteSpace: 'nowrap',\n cursor: 'pointer',\n hyphens: 'auto',\n textDecoration: 'none',\n color: tokens.gray800,\n boxSizing: 'border-box',\n transition: `color ${tokens.transitionDurationShort} ${tokens.transitionEasingCubicBezier}`,\n borderRadius: tokens.borderRadiusMedium,\n height: '30px',\n\n padding: hasTitle\n ? `${tokens.spacing2Xs} ${tokens.spacingXs}`\n : `calc(${tokens.spacing2Xs} - ${borderWidth})`, // square button for icon-only items\n\n '&:focus, &:hover': {\n backgroundColor: tokens.gray200,\n },\n\n '&:active': getNavbarItemActiveStyles(),\n\n '&:disabled': {\n cursor: 'auto',\n },\n\n '& svg': {\n transition: `fill ${tokens.transitionDurationShort} ${tokens.transitionEasingCubicBezier}`,\n },\n '& > svg, & > span': {\n zIndex: tokens.zIndexDefault,\n },\n },\n getGlowOnFocusStyles(),\n increaseHitArea(),\n ),\n isActive: getNavbarItemActiveStyles(),\n isDisabled: getNavbarItemDisabledStyles(),\n icon: css({\n height: '20px',\n width: '20px',\n boxSizing: 'content-box',\n display: hasTitle ? 'none' : 'block',\n [mqs.small]: {\n height: '16px',\n width: '16px',\n padding: hasTitle ? '2px 0' : '2px', // square for icon-only items\n },\n [mqs.large]: {\n display: 'block',\n },\n }),\n});\n\nexport const getNavbarItemSkeletonStyles = () => ({\n itemSkeleton: css(commonItemStyles),\n});\n","import React from 'react';\nimport type { IconProps } from '@contentful/f36-icons';\nimport { getNavbarItemIconStyles } from './NavbarItemIcon.styles';\nimport { cx } from 'emotion';\n\nexport type NavbarItemIconProps = {\n icon: React.ReactElement<IconProps>;\n className?: string;\n} & Partial<Pick<IconProps, 'isActive'>>;\n\nexport const NavbarItemIcon = ({\n icon,\n isActive,\n className,\n}: NavbarItemIconProps) => {\n const { className: iconClassName, size, ...rest } = icon.props;\n const styles = getNavbarItemIconStyles();\n\n return React.cloneElement(icon, {\n className: cx(iconClassName, styles.navbarItemIcon, className),\n size: size || 'small',\n isActive,\n ...rest,\n });\n};\n","import { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\nexport const getNavbarItemIconStyles = () => ({\n navbarItemIcon: css({\n '&:last-child&:not(:only-child)': {\n marginLeft: tokens.spacing2Xs,\n },\n 'img&': {\n borderRadius: tokens.borderRadiusSmall,\n maxWidth: tokens.spacingM,\n maxHeight: tokens.spacingM,\n },\n }),\n});\n","import React from 'react';\nimport { SkeletonContainer, SkeletonText } from '@contentful/f36-skeleton';\nimport tokens from '@contentful/f36-tokens';\nimport { getNavbarItemSkeletonStyles } from './NavbarItem.styles';\n\nexport const NavbarItemSkeleton = ({\n estimatedWidth,\n}: {\n estimatedWidth: number;\n}) => {\n const styles = getNavbarItemSkeletonStyles();\n\n return (\n <SkeletonContainer\n className={styles.itemSkeleton}\n svgWidth={estimatedWidth}\n svgHeight={28}\n backgroundColor={tokens.gray300}\n foregroundColor={tokens.gray200}\n >\n <SkeletonText\n lineHeight={18}\n numberOfLines={1}\n offsetTop={2}\n radiusX={tokens.borderRadiusSmall}\n radiusY={tokens.borderRadiusSmall}\n />\n </SkeletonContainer>\n );\n};\n","import React from 'react';\nimport { cx } from 'emotion';\nimport { getNavbarMenuItemStyles } from './NavbarMenuItem.styles';\nimport { Menu, type MenuItemProps } from '@contentful/f36-menu';\nimport {\n NavbarItemIcon,\n type NavbarItemIconProps,\n} from '../NavbarItemIcon/NavbarItemIcon';\nimport { ArrowSquareOutIcon } from '@contentful/f36-icons';\nimport type {\n ExpandProps,\n PolymorphicComponent,\n PolymorphicProps,\n} from '@contentful/f36-core';\n\nconst NAVBAR_MENU_ITEM_DEFAULT_TAG = 'button';\n\ntype NavbarMenuItemOwnProps = {\n children?: null;\n title: string;\n icon?: NavbarItemIconProps['icon'];\n as?: React.ElementType;\n} & Omit<MenuItemProps, 'children' | 'as'>;\n\nexport type NavbarMenuItemProps<\n E extends React.ElementType = typeof NAVBAR_MENU_ITEM_DEFAULT_TAG,\n> = PolymorphicProps<NavbarMenuItemOwnProps, E>;\n\nfunction _NavbarMenuItem(\n props: NavbarMenuItemProps<React.ElementType>,\n ref: React.Ref<any>,\n) {\n const {\n as: Comp = NAVBAR_MENU_ITEM_DEFAULT_TAG,\n icon,\n title,\n className,\n ...otherProps\n } = props;\n const styles = getNavbarMenuItemStyles();\n\n const itemIsExternalLink = isExternalLink(\n props as unknown as NavbarMenuItemProps<'a'>,\n );\n\n return (\n <Menu.Item\n {...otherProps}\n ref={ref}\n as={Comp as MenuItemProps['as']}\n className={cx(styles.navbarMenuItem, className)}\n >\n {icon ? (\n <NavbarItemIcon icon={icon} />\n ) : (\n itemIsExternalLink && externalIcon\n )}\n <span>{title}</span>\n {icon && itemIsExternalLink ? externalIcon : null}\n </Menu.Item>\n );\n}\n\nconst externalIcon = <NavbarItemIcon icon={<ArrowSquareOutIcon />} />;\n\nconst isExternalLink = (props: NavbarMenuItemProps<'a'>) =>\n props.as === 'a' && props.target === '_blank';\n\nexport const NavbarMenuItem: PolymorphicComponent<\n ExpandProps<NavbarMenuItemOwnProps>,\n typeof NAVBAR_MENU_ITEM_DEFAULT_TAG\n> = React.forwardRef(_NavbarMenuItem);\n","import { css } from 'emotion';\nexport const getNavbarMenuItemStyles = () => ({\n navbarMenuItem: css({\n display: 'flex',\n justifyContent: 'flex-start',\n alignItems: 'center',\n }),\n});\n","import React from 'react';\nimport { Menu } from '@contentful/f36-menu';\nimport {\n SkeletonBodyText,\n SkeletonContainer,\n SkeletonImage,\n} from '@contentful/f36-skeleton';\nimport { Flex } from '@contentful/f36-core';\n\nimport tokens from '@contentful/f36-tokens';\n\nexport const NavbarMenuItemSkeleton = ({\n ariaLabel,\n}: {\n ariaLabel?: string;\n}) => (\n <Menu.Item>\n <Flex alignItems=\"center\" gap={tokens.spacingXs}>\n <SkeletonContainer svgHeight={16} svgWidth={18}>\n <SkeletonImage width={16} height={16} />\n </SkeletonContainer>\n <SkeletonContainer svgHeight={16} svgWidth={190} ariaLabel={ariaLabel}>\n <SkeletonBodyText numberOfLines={1} />\n </SkeletonContainer>\n </Flex>\n </Menu.Item>\n);\n","import React from 'react';\nimport {\n getNavbarIconColor,\n getNavbarSwitcherStyles,\n} from './NavbarSwitcher.styles';\nimport { Button } from '@contentful/f36-button';\nimport {\n Flex,\n type CommonProps,\n type PropsWithHTMLElement,\n type ExpandProps,\n} from '@contentful/f36-core';\nimport { cx } from 'emotion';\nimport { NavbarEnvVariant } from './NavbarEnvVariant';\nimport { NavbarSwitcherSkeleton } from './NavbarSwitcherSkeleton';\nimport { CaretRightIcon } from '@contentful/f36-icons';\nimport { Text } from '@contentful/f36-typography';\n\nexport type EnvVariant = 'master' | 'non-master' | 'trial';\n\ntype NavbarLoadingProps =\n | {\n isLoading?: true;\n children?: React.ReactNode;\n environment?: never;\n space?: never;\n }\n | {\n isLoading?: false;\n children?: never;\n environment?: string;\n space?: string;\n };\n\ntype NavbarSwitcherOwnProps = CommonProps &\n NavbarLoadingProps & {\n envVariant?: EnvVariant;\n isAlias?: boolean;\n ariaLabel?: string;\n };\n\nexport type NavbarSwitcherProps = PropsWithHTMLElement<\n NavbarSwitcherOwnProps,\n 'button'\n>;\n\nfunction _NavbarSwitcher(\n props: ExpandProps<NavbarSwitcherProps>,\n ref: React.Ref<HTMLButtonElement>,\n) {\n const {\n children,\n className,\n envVariant,\n isAlias,\n testId = 'cf-ui-navbar-switcher',\n ariaLabel = 'Space and Environment Navigation',\n space,\n environment,\n isLoading,\n ...otherProps\n } = props;\n const styles = getNavbarSwitcherStyles(envVariant);\n\n return (\n <Button\n {...otherProps}\n aria-label={ariaLabel}\n className={cx(\n styles.navbarSwitcher({ showSpaceEnv: !isLoading && !children }),\n className,\n )}\n endIcon={\n envVariant && (\n <NavbarEnvVariant\n envVariant={envVariant}\n isAlias={isAlias}\n className={styles.switcherEnvIcon}\n />\n )\n }\n ref={ref}\n testId={testId}\n variant=\"transparent\"\n >\n <Flex\n className={styles.switcherWrapper({\n showSpaceEnv: !isLoading && !children,\n })}\n >\n {isLoading ? (\n <NavbarSwitcherSkeleton estimatedWidth={148} />\n ) : (\n <>\n {children ? (\n <Text className={styles.switcherLabel}>{children}</Text>\n ) : (\n <Flex className={styles.switcherLabelWrapper}>\n <Text className={styles.switcherLabel}>{space}</Text>\n {environment && (\n <>\n <Flex className={styles.switcherCaret}>\n <CaretRightIcon\n size=\"tiny\"\n color={getNavbarIconColor(envVariant)}\n />\n </Flex>\n <Text className={styles.switcherLabel}>{environment}</Text>\n </>\n )}\n </Flex>\n )}\n </>\n )}\n </Flex>\n </Button>\n );\n}\n\nexport const NavbarSwitcher = React.forwardRef(_NavbarSwitcher);\n","import { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\nimport { hexToRGBA } from '@contentful/f36-utils';\n\nimport { getGlowOnFocusStyles, increaseHitArea, mqs } from '../utils.styles';\nimport { EnvVariant } from './NavbarSwitcher';\n\nconst BORDER_WIDTH = 1;\n\nexport const getNavbarSwitcherStyles = (variant: EnvVariant) => ({\n navbarSwitcher: ({ showSpaceEnv }: { showSpaceEnv: boolean }) =>\n css(\n {\n color: tokens.gray600,\n flexShrink: 1,\n fontWeight: tokens.fontWeightMedium,\n\n maxWidth: '50vw',\n minHeight: 'unset',\n padding: `${tokens.spacing2Xs} ${tokens.spacingXs}`,\n '&:hover': {\n backgroundColor: hexToRGBA(tokens.gray900, 0.05),\n },\n [mqs.xsmall]: {\n maxWidth: '45vw',\n },\n [mqs.medium]: {\n maxWidth: '35vw',\n },\n [mqs.large]: {\n maxWidth: '25vw',\n },\n [mqs.xlarge]: {\n maxWidth: '600px',\n },\n },\n showSpaceEnv && getEnvVariantColor(variant),\n getGlowOnFocusStyles(),\n increaseHitArea(),\n ),\n switcherWrapper: ({ showSpaceEnv }: { showSpaceEnv: boolean }) =>\n css({\n // Set min-width only when there are three span children\n gap: tokens.spacingXs,\n alignItems: 'center',\n minWidth: 0,\n '&:has(> span:last-child:nth-child(3))': {\n minWidth: '12ch',\n },\n '&:before': css({\n content: '\"\"',\n position: 'absolute',\n display: 'block',\n width: `calc(8px - ${BORDER_WIDTH}px)`,\n height: showSpaceEnv ? '26px' : 'unset',\n borderTopLeftRadius: `calc(${tokens.borderRadiusMedium} - ${BORDER_WIDTH}px)`,\n borderBottomLeftRadius: `calc(${tokens.borderRadiusMedium} - ${BORDER_WIDTH}px)`,\n ...getWrapperBackground(variant),\n backgroundPosition: 'bottom',\n }),\n }),\n\n switcherLabelWrapper: css({\n height: '26px',\n paddingLeft: `calc(${tokens.spacingXs} * 2)`,\n alignItems: 'center',\n gap: tokens.spacing2Xs,\n maxWidth: '100%',\n }),\n\n switcherLabel: css({\n color: 'currentcolor',\n fontWeight: 'inherit',\n lineHeight: 'unset',\n display: 'inline-block',\n flexShrink: 1,\n minWidth: '0',\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n }),\n\n switcherCaret: css({\n flexShrink: 0,\n minWidth: 0,\n }),\n\n switcherEnvIcon: css({\n minWidth: '0',\n [mqs.small]: {\n width: '16px',\n height: '16px',\n },\n }),\n});\n\nexport const getNavbarIconColor = (variant: EnvVariant) => {\n switch (variant) {\n case 'trial':\n return tokens.purple700;\n case 'non-master':\n return tokens.orange700;\n default:\n // Default to master variant\n return tokens.green700;\n }\n};\n\nconst getEnvVariantColor = (variant: EnvVariant) => {\n const sharedStyles = {\n padding: '0',\n paddingRight: tokens.spacingXs,\n };\n\n switch (variant) {\n case 'trial':\n return {\n ...sharedStyles,\n color: tokens.purple700,\n backgroundColor: tokens.purple100,\n border: `${BORDER_WIDTH}px solid ${tokens.purple400}`,\n '&:hover, &:active': {\n backgroundColor: tokens.purple200,\n },\n };\n case 'non-master':\n return {\n ...sharedStyles,\n color: tokens.orange700,\n backgroundColor: tokens.orange100,\n border: `${BORDER_WIDTH}px solid ${tokens.orange400}`,\n '&:hover, &:active': {\n backgroundColor: tokens.orange200,\n },\n };\n default:\n // Default to master variant\n return {\n ...sharedStyles,\n color: tokens.green700,\n backgroundColor: tokens.green100,\n border: `${BORDER_WIDTH}px solid ${tokens.green400}`,\n '&:hover, &:active': {\n backgroundColor: tokens.green200,\n },\n };\n }\n};\n\nconst getWrapperBackground = (variant: EnvVariant) => {\n switch (variant) {\n case 'trial':\n return {\n background: tokens.purple300,\n };\n case 'non-master':\n return {\n background: `linear-gradient(\n -45deg,\n ${tokens.orange300} 28.57%,\n transparent 28.57%,\n transparent 50%,\n ${tokens.orange300} 50%,\n ${tokens.orange300} 78.57%,\n transparent 78.57%,\n transparent 100%\n )`,\n backgroundSize: '9px 9px',\n };\n default:\n // Default to master variant\n return {\n background: tokens.green300,\n };\n }\n};\n","import React from 'react';\nimport { NavbarSwitcherProps } from '../NavbarSwitcher/NavbarSwitcher';\nimport {\n EnvironmentAliasIcon,\n EnvironmentIcon,\n FlaskIcon,\n RocketLaunchIcon,\n} from '@contentful/f36-icons';\nimport tokens from '@contentful/f36-tokens';\n\nexport type NavbarEnvVariantProps = Pick<\n NavbarSwitcherProps,\n 'isAlias' | 'envVariant'\n> & {\n className?: string;\n};\n\nexport function NavbarEnvVariant({\n isAlias,\n envVariant,\n className,\n}: NavbarEnvVariantProps) {\n if (envVariant === 'trial') {\n return (\n <FlaskIcon color={tokens.purple700} className={className} size=\"medium\" />\n );\n }\n\n const isMaster = envVariant === 'master';\n const color = isMaster ? tokens.green700 : tokens.orange700;\n\n if (isMaster) {\n return (\n <RocketLaunchIcon color={color} className={className} size=\"medium\" />\n );\n } else if (isAlias) {\n return (\n <EnvironmentAliasIcon color={color} className={className} size=\"medium\" />\n );\n }\n\n return <EnvironmentIcon color={color} className={className} size=\"medium\" />;\n}\n","import React from 'react';\nimport { SkeletonContainer, SkeletonText } from '@contentful/f36-skeleton';\nimport tokens from '@contentful/f36-tokens';\n\nexport const NavbarSwitcherSkeleton = ({\n estimatedWidth,\n}: {\n estimatedWidth: number;\n}) => (\n <SkeletonContainer\n svgWidth={estimatedWidth}\n svgHeight={18}\n backgroundColor={tokens.gray300}\n foregroundColor={tokens.gray200}\n >\n <SkeletonText\n lineHeight={18}\n numberOfLines={1}\n radiusX={tokens.borderRadiusSmall}\n radiusY={tokens.borderRadiusSmall}\n />\n </SkeletonContainer>\n);\n","import React from 'react';\nimport { cx } from 'emotion';\nimport { getNavbarBadgeStyles } from './NavbarBadge.styles';\nimport type {\n CommonProps,\n ExpandProps,\n PolymorphicComponent,\n PolymorphicProps,\n} from '@contentful/f36-core';\n\nconst NAVBAR_BADGE_DEFAULT_TAG = 'div';\n\ntype NavbarBadgeOwnProps = CommonProps & {\n children?: React.ReactNode;\n as?: React.ElementType;\n};\n\nexport type NavbarBadgeProps<\n E extends React.ElementType = typeof NAVBAR_BADGE_DEFAULT_TAG,\n> = PolymorphicProps<NavbarBadgeOwnProps, E>;\n\nfunction _NavbarBadge(\n props: NavbarBadgeProps<React.ElementType>,\n ref: React.Ref<any>,\n) {\n const {\n as: Comp = NAVBAR_BADGE_DEFAULT_TAG,\n children,\n className,\n testId = 'cf-ui-navbar-badge',\n ...otherProps\n } = props;\n const styles = getNavbarBadgeStyles();\n\n return (\n <Comp\n {...otherProps}\n ref={ref}\n className={cx(styles.navbarBadge, className)}\n data-test-id={testId}\n >\n {children}\n </Comp>\n );\n}\n\nexport const NavbarBadge: PolymorphicComponent<\n ExpandProps<NavbarBadgeOwnProps>,\n typeof NAVBAR_BADGE_DEFAULT_TAG\n> = React.forwardRef(_NavbarBadge);\n","import { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\nexport const getNavbarBadgeStyles = () => ({\n navbarBadge: css({\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n background: 'none',\n border: `1px solid ${tokens.purple600}`,\n margin: 0,\n outline: 'none',\n fontSize: tokens.fontSizeS,\n lineHeight: tokens.lineHeightS,\n fontWeight: tokens.fontWeightMedium,\n textAlign: 'center',\n padding: `0 ${tokens.spacingXs}`,\n textDecoration: 'none',\n color: `${tokens.purple600}!important`,\n borderRadius: '1.75rem',\n userSelect: 'none',\n }),\n});\n","import React from 'react';\nimport { Menu, type MenuListProps, type MenuProps } from '@contentful/f36-menu';\nimport { getNavbarSubmenuStyles } from './NavbarMenu.styles';\nimport {\n NavbarItemIcon,\n type NavbarItemIconProps,\n} from '../NavbarItemIcon/NavbarItemIcon';\nimport { Flex } from '@contentful/f36-core';\n\nexport type NavbarSubmenuProps = {\n title: string;\n icon?: NavbarItemIconProps['icon'];\n children?: React.ReactNode;\n} & Pick<MenuListProps, 'testId'> &\n Pick<MenuProps, 'onOpen' | 'onClose'>;\n\nexport const NavbarSubmenu = (props: NavbarSubmenuProps) => {\n const {\n title,\n icon,\n children,\n testId = 'cf-ui-navbar-submenu-list',\n onOpen,\n onClose,\n } = props;\n const styles = getNavbarSubmenuStyles();\n\n return (\n <Menu.Submenu onOpen={onOpen} onClose={onClose}>\n <Menu.SubmenuTrigger>\n <Flex className={styles.navbarMenuItem}>\n {icon && <NavbarItemIcon icon={icon} />}\n <span>{title}</span>\n </Flex>\n </Menu.SubmenuTrigger>\n <Menu.List className={styles.menuList} testId={testId}>\n {children}\n </Menu.List>\n </Menu.Submenu>\n );\n};\n","import tokens from '@contentful/f36-tokens';\nimport { css } from 'emotion';\nimport { mqs } from '../utils.styles';\n\nexport const getNavbarSubmenuStyles = () => ({\n navbarMenuItem: css({\n display: 'flex',\n justifyContent: 'flex-start',\n alignItems: 'center',\n gap: tokens.spacingXs,\n }),\n menuList: css({\n minWidth: 0,\n marginLeft: '-24px',\n marginTop: '10px',\n [mqs.xsmall]: {\n minWidth: '250px',\n margin: 0,\n },\n }),\n});\n"]}
package/dist/index.d.mts 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
- * Items that will be rendered on the bottom-right of the navbar.
11
- * Useful for separating other navigation items from main ones, (e.g. separating "Settings" from all other navigation items).
10
+ * Accepts a React Component that will be displayed
11
+ * instead of the Contentful Logo
12
12
  */
13
- bottomRightItems?: React.ReactNode;
14
- children?: React.ReactNode;
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
- * Will be displayed instead of the default Contentful logo
41
+ * Describes the size variation of the Navbar
42
+ * Variant wide will set the contentMaxWidth to 1524px
23
43
  */
24
- logo?: React.ReactNode;
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
- * Describes the size variation of the navbar
46
+ * aria labels for different areas of the navigation bar
34
47
  */
35
- variant?: 'wide' | 'fullscreen';
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
- * Items that will be rendered on the bottom-right of the navbar.
44
- * Useful for separating other navigation items from main ones, (e.g. separating "Settings" from all other navigation items).
59
+ * Accepts a React Component that will be displayed
60
+ * instead of the Contentful Logo
45
61
  */
46
- bottomRightItems?: React.ReactNode;
47
- children?: React.ReactNode;
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
- * Items that will be rendered on the top-right of the navbar.
62
- * Useful for providing additional context or actions to the user (e.g. a Feedback form link).
90
+ * Describes the size variation of the Navbar
91
+ * Variant wide will set the contentMaxWidth to 1524px
63
92
  */
64
- topRightItems?: React.ReactNode;
93
+ variant?: 'wide' | 'fullscreen';
65
94
  /**
66
- * Describes the size variation of the navbar
95
+ * aria labels for different areas of the navigation bar
67
96
  */
68
- variant?: 'wide' | 'fullscreen';
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
- } & Pick<IconProps, 'variant'>;
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
- title: string;
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 const NavbarSwitcher: React.ForwardRefExoticComponent<Omit<Omit<Pick<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof React.ButtonHTMLAttributes<HTMLButtonElement>>, never>, "children" | keyof CommonProps> & CommonProps & React.RefAttributes<HTMLButtonElement>>;
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 NavbarSearch: React.ForwardRefExoticComponent<Omit<Omit<Pick<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof React.ButtonHTMLAttributes<HTMLButtonElement>>, never>, keyof CommonProps> & CommonProps & React.RefAttributes<HTMLButtonElement>>;
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$1>;
198
+ declare const NavbarBadge: PolymorphicComponent<ExpandProps<NavbarBadgeOwnProps>, typeof NAVBAR_BADGE_DEFAULT_TAG>;
156
199
 
157
- declare const NAVBAR_BADGE_DEFAULT_TAG = "button";
158
- declare type NavbarTopbarItemOwnProps = CommonProps & {
200
+ declare type NavbarSubmenuProps = {
201
+ title: string;
202
+ icon?: NavbarItemIconProps['icon'];
159
203
  children?: React.ReactNode;
160
- };
161
- declare const NavbarTopbarItem: PolymorphicComponent<ExpandProps<NavbarTopbarItemOwnProps>, typeof NAVBAR_BADGE_DEFAULT_TAG>;
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
- export { Navbar, NavbarProps, getNavbarItemActiveStyles };
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 };