@codecademy/brand 4.0.0-alpha.fb4adf2b4d.0 → 4.0.0

package/dist/AppHeader/shared/types.d.ts

@@ -0,0 +1,107 @@
+import { Anchor, BadgeProps, FillButtonProps, IconButtonProps, StrokeButtonProps, TextButtonProps } from '@codecademy/gamut';
+import { GamutIconProps } from '@codecademy/gamut-icons';
+import React, { ComponentProps, ReactNode, RefObject } from 'react';
+export type AppHeaderItem = AppHeaderItemWithHref | AppHeaderSimpleDropdownItem | AppHeaderProfileDropdownItem | AppHeaderRenderElementItem | AppHeaderCatalogDropdownItem | AppHeaderDescriptiveLinkItem | AppHeaderResourcesDropdownItem | AppHeaderResourcesSimpleDropdownItem;
+export type AppHeaderItemWithHref = AppHeaderLogoItem | AppHeaderLinkItem | AppHeaderTextButtonItem | AppHeaderFillButtonItem | AppHeaderStrokeButtonItem | AppHeaderIconButtonItem;
+type AppHeaderBaseItem<Type extends string> = {
+    dataTestId?: string;
+    id: string;
+    redirect?: boolean;
+    type: Type;
+};
+type AppHeaderBaseHrefItem<Type extends string> = AppHeaderBaseItem<Type> & {
+    href: string;
+    trackingTarget?: string;
+};
+export type AppHeaderLogoItem = AppHeaderBaseHrefItem<'logo'> & {
+    enterprise: boolean;
+    pro: boolean;
+    checkMini?: boolean;
+    removeAnchorLink?: boolean;
+};
+export type AppHeaderLinkItem = AppHeaderBaseHrefItem<'link'> & Pick<ComponentProps<typeof Anchor>, 'icon' | 'iconPosition'> & {
+    ariaLabel?: string;
+    newTab?: boolean;
+    text: string;
+    badge?: React.ReactElement<BadgeProps>;
+};
+export type AppHeaderStrokeButtonItem = AppHeaderBaseHrefItem<'stroke-button'> & Pick<StrokeButtonProps, 'variant' | 'icon' | 'iconPosition'> & {
+    text: string;
+};
+export type AppHeaderTextButtonItem = AppHeaderBaseHrefItem<'text-button'> & Pick<TextButtonProps, 'variant' | 'icon' | 'iconPosition'> & {
+    text: string;
+};
+export type AppHeaderFillButtonItem = AppHeaderBaseHrefItem<'fill-button'> & Pick<FillButtonProps, 'variant' | 'icon' | 'iconPosition'> & {
+    text: string;
+};
+export type AppHeaderIconButtonItem = AppHeaderBaseHrefItem<'icon-button'> & Pick<IconButtonProps, 'variant' | 'icon'> & {
+    text: string;
+};
+export type AppHeaderDropdownItem = AppHeaderSimpleDropdownItem | AppHeaderProfileDropdownItem | AppHeaderResourcesSimpleDropdownItem;
+export type AppHeaderSimpleDropdownItem = AppHeaderBaseItem<'dropdown'> & {
+    popover: AppHeaderLinkItem[];
+    text: string;
+    trackingTarget: string;
+    icon?: React.ComponentType<GamutIconProps>;
+    isIconOnly?: boolean;
+};
+export type AppHeaderProfileDropdownItem = AppHeaderBaseItem<'profile-dropdown'> & {
+    avatar: string;
+    userDisplayName: string;
+    popover: AppHeaderLinkItem[][];
+    text: string;
+    trackingTarget?: string;
+};
+export type AppHeaderRenderElementItem = AppHeaderBaseItem<'render-element'> & {
+    renderElement: () => ReactNode;
+};
+export type AppHeaderCatalogDropdownItem = AppHeaderBaseItem<'catalog-dropdown'> & {
+    icon?: React.ComponentType<GamutIconProps>;
+    text: string;
+    trackingTarget?: string;
+    hideCareerPaths?: boolean;
+};
+export type AppHeaderResourcesDropdownItem = AppHeaderBaseItem<'resources-dropdown'> & {
+    text: string;
+    trackingTarget?: string;
+    hideCareerPaths?: boolean;
+    icon?: React.ComponentType<GamutIconProps>;
+};
+export type AppHeaderResourcesSimpleDropdownItem = AppHeaderBaseItem<'resources-simple-dropdown'> & {
+    icon?: React.ComponentType<GamutIconProps>;
+    text: string;
+    trackingTarget?: string;
+    hideCareerPaths?: boolean;
+    popover: AppHeaderLinkItem[];
+};
+export type AppHeaderClickHandler<ItemType = AppHeaderItem> = (event: React.MouseEvent, item: ItemType) => void;
+export type AppHeaderAction = {
+    /** A method to be called on click/activating a header item */
+    action: AppHeaderClickHandler;
+};
+export declare const isAppHeaderItemWithHref: (item: AppHeaderItem) => item is AppHeaderItemWithHref;
+export type AppHeaderDescriptiveLinkItem = AppHeaderLinkItem & {
+    description: string;
+};
+export type AppHeaderResourcesDataItem = {
+    title: string;
+    description?: string;
+    links?: AppHeaderLinkItem[];
+    data: (AppHeaderLinkItem | AppHeaderDescriptiveLinkItem)[];
+};
+export type AppFooterResourcesDataItem = {
+    id: string;
+    href: string;
+    trackingTarget: string;
+    text: string;
+    newTab?: boolean;
+};
+export type FormattedAppHeaderItems = {
+    left: AppHeaderItem[];
+    right: AppHeaderItem[];
+};
+export type FormattedMobileAppHeaderItems = FormattedAppHeaderItems & {
+    mainMenu: AppHeaderItem[];
+};
+export type AnchorRefItemType = RefObject<HTMLAnchorElement>['current'] | RefObject<HTMLButtonElement>['current'] | null;
+export {};

package/dist/AppHeader/shared/types.js

@@ -0,0 +1 @@
+export const isAppHeaderItemWithHref = item => !!item.href;

package/dist/AppHeader/shared/utils.d.ts

@@ -0,0 +1,14 @@
+import { Menu } from '@codecademy/gamut';
+import { ComponentProps, ReactNode } from 'react';
+import { AppHeaderClickHandler, AppHeaderItem } from './types';
+type AppHeaderItemToElementType = {
+    action: AppHeaderClickHandler;
+    item: AppHeaderItem;
+    isStandalone?: boolean;
+    isTeams?: boolean;
+    redirectParam?: string;
+    mobile?: boolean;
+    spacing?: ComponentProps<typeof Menu>['spacing'];
+};
+export declare const mapAppHeaderItemToElement: ({ action, item, isStandalone, isTeams, redirectParam, mobile, spacing, }: AppHeaderItemToElementType) => ReactNode;
+export {};

package/dist/AppHeader/shared/utils.js

@@ -0,0 +1,100 @@
+import { FillButton, IconButton, StrokeButton, TextButton } from '@codecademy/gamut';
+import { formatUrlWithRedirect } from '../../GlobalHeader/urlHelpers';
+import { AppHeaderCatalogDropdown } from '../AppHeaderElements/AppHeaderCatalogDropdown';
+import { AppHeaderDropdown } from '../AppHeaderElements/AppHeaderDropdown';
+import { AppHeaderLink } from '../AppHeaderElements/AppHeaderLink';
+import { AppHeaderLogo } from '../AppHeaderElements/AppHeaderLogo';
+import { AppHeaderResourcesDropdown } from '../AppHeaderElements/AppHeaderResourcesDropdown';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const mapAppHeaderItemToElement = ({
+  action,
+  item,
+  isStandalone,
+  isTeams,
+  redirectParam,
+  mobile = false,
+  spacing = 'normal'
+}) => {
+  // preventative measure to handle a possibly undefined item from being rendered
+  if (!item) return null;
+  switch (item.type) {
+    case 'logo':
+      return /*#__PURE__*/_jsx(AppHeaderLogo, {
+        action: action,
+        item: item
+      });
+    case 'link':
+      return /*#__PURE__*/_jsx(AppHeaderLink, {
+        mx: 0,
+        action: action,
+        item: item
+      });
+    case 'dropdown':
+    case 'resources-simple-dropdown':
+    case 'profile-dropdown':
+      return /*#__PURE__*/_jsx(AppHeaderDropdown, {
+        action: action,
+        item: item,
+        standalone: isStandalone,
+        spacing: spacing
+      });
+    case 'catalog-dropdown':
+      return /*#__PURE__*/_jsx(AppHeaderCatalogDropdown, {
+        action: action,
+        item: item
+      });
+    case 'resources-dropdown':
+      return /*#__PURE__*/_jsx(AppHeaderResourcesDropdown, {
+        action: action,
+        item: item
+      });
+    case 'render-element':
+      return item.renderElement();
+    case 'text-button':
+      return /*#__PURE__*/_jsx(TextButton, {
+        size: mobile ? 'small' : 'normal',
+        onClick: event => action(event, item),
+        "data-testid": item.dataTestId,
+        href: item.redirect ? formatUrlWithRedirect(item.href, redirectParam) : item.href,
+        variant: isTeams ? 'primary' : 'interface',
+        icon: item.icon,
+        iconPosition: item.iconPosition,
+        children: item.text
+      });
+    case 'fill-button':
+      return /*#__PURE__*/_jsx(FillButton, {
+        size: mobile ? 'small' : 'normal',
+        "data-testid": item.dataTestId,
+        href: item.redirect ? formatUrlWithRedirect(item.href, redirectParam) : item.href,
+        onClick: event => action(event, item),
+        variant: item.variant || 'interface',
+        icon: item.icon,
+        iconPosition: item.iconPosition,
+        children: item.text
+      });
+    case 'stroke-button':
+      return /*#__PURE__*/_jsx(StrokeButton, {
+        size: mobile ? 'small' : 'normal',
+        "data-testid": item.dataTestId,
+        href: item.redirect ? formatUrlWithRedirect(item.href, redirectParam) : item.href,
+        onClick: event => action(event, item),
+        variant: item.variant || 'interface',
+        icon: item.icon,
+        iconPosition: item.iconPosition,
+        children: item.text
+      });
+    case 'icon-button':
+      return /*#__PURE__*/_jsx(IconButton, {
+        size: mobile ? 'small' : 'normal',
+        "data-testid": item.dataTestId,
+        href: item.redirect ? formatUrlWithRedirect(item.href, redirectParam) : item.href,
+        onClick: event => action(event, item),
+        variant: item.variant || 'interface',
+        icon: item.icon,
+        tip: item.text,
+        tipProps: {
+          alignment: 'bottom-center'
+        }
+      });
+  }
+};

package/dist/AppHeader/utils/types.d.ts

@@ -0,0 +1,8 @@
+import { AppHeaderItem } from '../shared/types';
+export type FormattedAppHeaderItems = {
+    left: AppHeaderItem[];
+    right: AppHeaderItem[];
+};
+export type FormattedMobileAppHeaderItems = FormattedAppHeaderItems & {
+    mainMenu: AppHeaderItem[];
+};

package/dist/AppHeader/utils/types.js

@@ -0,0 +1 @@
+export {};

package/dist/AppHeaderMobile/AppHeaderMainMenuMobile/index.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { AppHeaderAction, AppHeaderItem } from '../../AppHeader/shared';
+export type AppHeaderMainMenuMobileProps = AppHeaderAction & {
+    items: AppHeaderItem[];
+    getItemType: (type: string | undefined) => void;
+    isAnon: boolean;
+};
+export declare const AppHeaderMainMenuMobile: React.FC<AppHeaderMainMenuMobileProps>;

package/dist/AppHeaderMobile/AppHeaderMainMenuMobile/index.js

@@ -0,0 +1,142 @@
+import _styled from "@emotion/styled/base";
+import { Box, ContentContainer, FillButton, Text, TextButton } from '@codecademy/gamut';
+import { css, theme } from '@codecademy/gamut-styles';
+import { useState } from 'react';
+import * as React from 'react';
+import { AppHeaderLink } from '../../AppHeader/AppHeaderElements/AppHeaderLink';
+import { AppHeaderLinkSections } from '../../AppHeader/AppHeaderElements/AppHeaderLinkSections';
+import { login, requestTeamsDemo, signUp, signUpTextButton } from '../../GlobalHeader/GlobalHeaderItems';
+import { AppHeaderSubNavMobile } from '../AppHeaderSubMenuMobile';
+import { MobileUlWrapper } from '../AppHeaderSubMenuMobile/elements';
+import { AppHeaderSubMenuRow } from '../AppHeaderSubMenuTarget';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const isBusinessPage = () => {
+  if (typeof window === 'undefined') return false;
+  return window.location.pathname === '/business' || window.location.pathname === '/business/pricing';
+};
+const BackgroundWrapper = /*#__PURE__*/_styled(Box, {
+  target: "emi0o3k0",
+  label: "BackgroundWrapper"
+})(css({
+  background: theme.colors.white,
+  border: 1,
+  borderColor: 'border-tertiary',
+  borderRadius: 'lg',
+  padding: '16px'
+}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9BcHBIZWFkZXJNb2JpbGUvQXBwSGVhZGVyTWFpbk1lbnVNb2JpbGUvaW5kZXgudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXNDMEIiLCJmaWxlIjoiLi4vLi4vLi4vc3JjL0FwcEhlYWRlck1vYmlsZS9BcHBIZWFkZXJNYWluTWVudU1vYmlsZS9pbmRleC50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBCb3gsXG4gIENvbnRlbnRDb250YWluZXIsXG4gIEZpbGxCdXR0b24sXG4gIFRleHQsXG4gIFRleHRCdXR0b24sXG59IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0JztcbmltcG9ydCB7IGNzcywgdGhlbWUgfSBmcm9tICdAY29kZWNhZGVteS9nYW11dC1zdHlsZXMnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgdXNlU3RhdGUgfSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgKiBhcyBSZWFjdCBmcm9tICdyZWFjdCc7XG5cbmltcG9ydCB7IEFwcEhlYWRlckxpbmsgfSBmcm9tICcuLi8uLi9BcHBIZWFkZXIvQXBwSGVhZGVyRWxlbWVudHMvQXBwSGVhZGVyTGluayc7XG5pbXBvcnQgeyBBcHBIZWFkZXJMaW5rU2VjdGlvbnMgfSBmcm9tICcuLi8uLi9BcHBIZWFkZXIvQXBwSGVhZGVyRWxlbWVudHMvQXBwSGVhZGVyTGlua1NlY3Rpb25zJztcbmltcG9ydCB7XG4gIEFwcEhlYWRlckFjdGlvbixcbiAgQXBwSGVhZGVyQ2xpY2tIYW5kbGVyLFxuICBBcHBIZWFkZXJEcm9wZG93bkl0ZW0sXG4gIEFwcEhlYWRlckl0ZW0sXG59IGZyb20gJy4uLy4uL0FwcEhlYWRlci9zaGFyZWQnO1xuaW1wb3J0IHtcbiAgbG9naW4sXG4gIHJlcXVlc3RUZWFtc0RlbW8sXG4gIHNpZ25VcCxcbiAgc2lnblVwVGV4dEJ1dHRvbixcbn0gZnJvbSAnLi4vLi4vR2xvYmFsSGVhZGVyL0dsb2JhbEhlYWRlckl0ZW1zJztcbmltcG9ydCB7IEFwcEhlYWRlclN1Yk5hdk1vYmlsZSB9IGZyb20gJy4uL0FwcEhlYWRlclN1Yk1lbnVNb2JpbGUnO1xuaW1wb3J0IHsgTW9iaWxlVWxXcmFwcGVyIH0gZnJvbSAnLi4vQXBwSGVhZGVyU3ViTWVudU1vYmlsZS9lbGVtZW50cyc7XG5pbXBvcnQgeyBBcHBIZWFkZXJTdWJNZW51Um93IH0gZnJvbSAnLi4vQXBwSGVhZGVyU3ViTWVudVRhcmdldCc7XG5cbmNvbnN0IGlzQnVzaW5lc3NQYWdlID0gKCkgPT4ge1xuICBpZiAodHlwZW9mIHdpbmRvdyA9PT0gJ3VuZGVmaW5lZCcpIHJldHVybiBmYWxzZTtcbiAgcmV0dXJuIChcbiAgICB3aW5kb3cubG9jYXRpb24ucGF0aG5hbWUgPT09ICcvYnVzaW5lc3MnIHx8XG4gICAgd2luZG93LmxvY2F0aW9uLnBhdGhuYW1lID09PSAnL2J1c2luZXNzL3ByaWNpbmcnXG4gICk7XG59O1xuXG5jb25zdCBCYWNrZ3JvdW5kV3JhcHBlciA9IHN0eWxlZChCb3gpKFxuICBjc3Moe1xuICAgIGJhY2tncm91bmQ6IHRoZW1lLmNvbG9ycy53aGl0ZSxcbiAgICBib3JkZXI6IDEsXG4gICAgYm9yZGVyQ29sb3I6ICdib3JkZXItdGVydGlhcnknLFxuICAgIGJvcmRlclJhZGl1czogJ2xnJyxcbiAgICBwYWRkaW5nOiAnMTZweCcsXG4gIH0pXG4pO1xuXG5leHBvcnQgdHlwZSBBcHBIZWFkZXJNYWluTWVudU1vYmlsZVByb3BzID0gQXBwSGVhZGVyQWN0aW9uICYge1xuICBpdGVtczogQXBwSGVhZGVySXRlbVtdO1xuICBnZXRJdGVtVHlwZTogKHR5cGU6IHN0cmluZyB8IHVuZGVmaW5lZCkgPT4gdm9pZDtcbiAgaXNBbm9uOiBib29sZWFuO1xufTtcblxuZXhwb3J0IGNvbnN0IEFwcEhlYWRlck1haW5NZW51TW9iaWxlOiBSZWFjdC5GQzxcbiAgQXBwSGVhZGVyTWFpbk1lbnVNb2JpbGVQcm9wc1xuPiA9ICh7IGFjdGlvbiwgaXRlbXMsIGdldEl0ZW1UeXBlLCBpc0Fub24gfSkgPT4ge1xuICBjb25zdCBbc3ViTWVudUl0ZW0sIHNldFN1Yk1lbnVJdGVtXSA9IHVzZVN0YXRlPEFwcEhlYWRlckRyb3Bkb3duSXRlbT4oKTtcblxuICBjb25zdCBvcGVuU3ViTWVudSA9IChcbiAgICBldmVudDogUmVhY3QuTW91c2VFdmVudCxcbiAgICBpdGVtOiBBcHBIZWFkZXJEcm9wZG93bkl0ZW1cbiAgKSA9PiB7XG4gICAgYWN0aW9uKGV2ZW50LCBpdGVtKTtcbiAgICBzZXRTdWJNZW51SXRlbShpdGVtKTtcbiAgICBnZXRJdGVtVHlwZShpdGVtLnR5cGUpO1xuICB9O1xuXG4gIGNvbnN0IGNsb3NlU3ViTWVudSA9ICgpID0+IHtcbiAgICBzZXRTdWJNZW51SXRlbSh1bmRlZmluZWQpO1xuICAgIGdldEl0ZW1UeXBlKHVuZGVmaW5lZCk7XG4gIH07XG5cbiAgY29uc3QgbWFwSXRlbVRvRWxlbWVudCA9IChcbiAgICBpdGVtOiBBcHBIZWFkZXJJdGVtLFxuICAgIGFjdGlvbjogQXBwSGVhZGVyQ2xpY2tIYW5kbGVyXG4gICkgPT4ge1xuICAgIHN3aXRjaCAoaXRlbS50eXBlKSB7XG4gICAgICBjYXNlICdsaW5rJzpcbiAgICAgICAgcmV0dXJuIChcbiAgICAgICAgICA8QXBwSGVhZGVyTGluayBhY3Rpb249e2FjdGlvbn0gaXRlbT17aXRlbX0ga2V5PXtpdGVtLmlkfSBtb2JpbGUgLz5cbiAgICAgICAgKTtcbiAgICAgIGNhc2UgJ2Ryb3Bkb3duJzpcbiAgICAgIGNhc2UgJ3Byb2ZpbGUtZHJvcGRvd24nOlxuICAgICAgY2FzZSAnY2F0YWxvZy1kcm9wZG93bic6XG4gICAgICBjYXNlICdyZXNvdXJjZXMtZHJvcGRvd24nOlxuICAgICAgICByZXR1cm4gKFxuICAgICAgICAgIDxBcHBIZWFkZXJTdWJNZW51Um93XG4gICAgICAgICAgICBrZXk9e2l0ZW0uaWR9XG4gICAgICAgICAgICBpdGVtPXtpdGVtfVxuICAgICAgICAgICAgb3BlblN1Yk1lbnU9e29wZW5TdWJNZW51fVxuICAgICAgICAgIC8+XG4gICAgICAgICk7XG4gICAgICBjYXNlICdyZXNvdXJjZXMtc2ltcGxlLWRyb3Bkb3duJzpcbiAgICAgICAgcmV0dXJuIChcbiAgICAgICAgICA8PlxuICAgICAgICAgICAgPFRleHQgYXM9XCJoMlwiIGZvbnRTaXplPXsyMn0gbXQ9ezE2fSBtYj17MTZ9PlxuICAgICAgICAgICAgICB7aXRlbS50ZXh0fVxuICAgICAgICAgICAgPC9UZXh0PlxuICAgICAgICAgICAgPEFwcEhlYWRlckxpbmtTZWN0aW9ucyBhY3Rpb249e2FjdGlvbn0gaXRlbT17aXRlbX0gbW9iaWxlIC8+XG4gICAgICAgICAgPC8+XG4gICAgICAgICk7XG4gICAgICBjYXNlICdmaWxsLWJ1dHRvbic6XG4gICAgICAgIHJldHVybiAoXG4gICAgICAgICAgPEZpbGxCdXR0b25cbiAgICAgICAgICAgIGRhdGEtdGVzdGlkPXtpdGVtLmRhdGFUZXN0SWR9XG4gICAgICAgICAgICBocmVmPXtpdGVtLmhyZWZ9XG4gICAgICAgICAgICBvbkNsaWNrPXsoZXZlbnQ6IFJlYWN0Lk1vdXNlRXZlbnQpID0+IGFjdGlvbihldmVudCwgaXRlbSl9XG4gICAgICAgICAgICBtdD17MjR9XG4gICAgICAgICAgICBrZXk9e2l0ZW0uaWR9XG4gICAgICAgICAgPlxuICAgICAgICAgICAge2l0ZW0udGV4dH1cbiAgICAgICAgICA8L0ZpbGxCdXR0b24+XG4gICAgICAgICk7XG4gICAgICBjYXNlICd0ZXh0LWJ1dHRvbic6XG4gICAgICAgIHJldHVybiAoXG4gICAgICAgICAgPFRleHRCdXR0b25cbiAgICAgICAgICAgIG10PXsxNn1cbiAgICAgICAgICAgIGtleT17aXRlbS5pZH1cbiAgICAgICAgICAgIGRhdGEtdGVzdGlkPXtpdGVtLmRhdGFUZXN0SWR9XG4gICAgICAgICAgICBocmVmPXtpdGVtLmhyZWZ9XG4gICAgICAgICAgICBvbkNsaWNrPXsoZXZlbnQ6IFJlYWN0Lk1vdXNlRXZlbnQpID0+IGFjdGlvbihldmVudCwgaXRlbSl9XG4gICAgICAgICAgPlxuICAgICAgICAgICAge2l0ZW0udGV4dH1cbiAgICAgICAgICA8L1RleHRCdXR0b24+XG4gICAgICAgICk7XG4gICAgICBkZWZhdWx0OlxuICAgICAgICByZXR1cm4gPD48Lz47XG4gICAgfVxuICB9O1xuXG4gIHJldHVybiBzdWJNZW51SXRlbSA/IChcbiAgICA8QXBwSGVhZGVyU3ViTmF2TW9iaWxlXG4gICAgICBoYW5kbGVDbG9zZVN1Yk1lbnU9e2Nsb3NlU3ViTWVudX1cbiAgICAgIGFjdGlvbj17YWN0aW9ufVxuICAgICAgaXRlbT17c3ViTWVudUl0ZW19XG4gICAgLz5cbiAgKSA6IChcbiAgICA8Q29udGVudENvbnRhaW5lclxuICAgICAgcm9sZT1cIm5hdmlnYXRpb25cIlxuICAgICAgYXJpYS1sYWJlbD1cInNpdGUgbmF2aWdhdGlvblwiXG4gICAgICB0YWJJbmRleD17LTF9XG4gICAgPlxuICAgICAgPEJhY2tncm91bmRXcmFwcGVyPlxuICAgICAgICA8TW9iaWxlVWxXcmFwcGVyIGFzPVwidWxcIj5cbiAgICAgICAgICB7aXRlbXMubWFwKChpdGVtKSA9PiBtYXBJdGVtVG9FbGVtZW50KGl0ZW0sIGFjdGlvbikpfVxuICAgICAgICAgIHtpc0Fub24gJiYgKFxuICAgICAgICAgICAgPGRpdlxuICAgICAgICAgICAgICAvLyBlc2xpbnQtZGlzYWJsZS1uZXh0LWxpbmUgZ2FtdXQvbm8taW5saW5lLXN0eWxlXG4gICAgICAgICAgICAgIHN0eWxlPXt7XG4gICAgICAgICAgICAgICAgZGlzcGxheTogJ2ZsZXgnLFxuICAgICAgICAgICAgICAgIGFsaWduSXRlbXM6ICdiYXNlbGluZScsXG4gICAgICAgICAgICAgICAganVzdGlmeUNvbnRlbnQ6ICdjZW50ZXInLFxuICAgICAgICAgICAgICAgIHBhZGRpbmdUb3A6ICcxNnB4JyxcbiAgICAgICAgICAgICAgICBib3JkZXJUb3A6ICcxcHggc29saWQgdmFyKC0tYm9yZGVyLXRlcnRpYXJ5KScsXG4gICAgICAgICAgICAgIH19XG4gICAgICAgICAgICA+XG4gICAgICAgICAgICAgIHtpc0J1c2luZXNzUGFnZSgpID8gKFxuICAgICAgICAgICAgICAgIDw+XG4gICAgICAgICAgICAgICAgICA8VGV4dEJ1dHRvblxuICAgICAgICAgICAgICAgICAgICBkYXRhLXRlc3RpZD17c2lnblVwVGV4dEJ1dHRvbi5kYXRhVGVzdElkfVxuICAgICAgICAgICAgICAgICAgICBocmVmPXtzaWduVXBUZXh0QnV0dG9uLmhyZWZ9XG4gICAgICAgICAgICAgICAgICAgIG9uQ2xpY2s9eyhldmVudDogUmVhY3QuTW91c2VFdmVudCkgPT5cbiAgICAgICAgICAgICAgICAgICAgICBhY3Rpb24oZXZlbnQsIHNpZ25VcFRleHRCdXR0b24pXG4gICAgICAgICAgICAgICAgICAgIH1cbiAgICAgICAgICAgICAgICAgICAga2V5PXtzaWduVXBUZXh0QnV0dG9uLmlkfVxuICAgICAgICAgICAgICAgICAgPlxuICAgICAgICAgICAgICAgICAgICB7c2lnblVwVGV4dEJ1dHRvbi50ZXh0fVxuICAgICAgICAgICAgICAgICAgPC9UZXh0QnV0dG9uPlxuXG4gICAgICAgICAgICAgICAgICA8RmlsbEJ1dHRvblxuICAgICAgICAgICAgICAgICAgICBkYXRhLXRlc3RpZD17cmVxdWVzdFRlYW1zRGVtby5kYXRhVGVzdElkfVxuICAgICAgICAgICAgICAgICAgICBocmVmPXtyZXF1ZXN0VGVhbXNEZW1vLmhyZWZ9XG4gICAgICAgICAgICAgICAgICAgIG9uQ2xpY2s9eyhldmVudDogUmVhY3QuTW91c2VFdmVudCkgPT5cbiAgICAgICAgICAgICAgICAgICAgICBhY3Rpb24oZXZlbnQsIHJlcXVlc3RUZWFtc0RlbW8pXG4gICAgICAgICAgICAgICAgICAgIH1cbiAgICAgICAgICAgICAgICAgICAga2V5PXtyZXF1ZXN0VGVhbXNEZW1vLmlkfVxuICAgICAgICAgICAgICAgICAgPlxuICAgICAgICAgICAgICAgICAgICB7cmVxdWVzdFRlYW1zRGVtby50ZXh0fVxuICAgICAgICAgICAgICAgICAgPC9GaWxsQnV0dG9uPlxuICAgICAgICAgICAgICAgIDwvPlxuICAgICAgICAgICAgICApIDogKFxuICAgICAgICAgICAgICAgIDw+XG4gICAgICAgICAgICAgICAgICA8RmlsbEJ1dHRvblxuICAgICAgICAgICAgICAgICAgICBkYXRhLXRlc3RpZD17c2lnblVwLmRhdGFUZXN0SWR9XG4gICAgICAgICAgICAgICAgICAgIGhyZWY9e3NpZ25VcC5ocmVmfVxuICAgICAgICAgICAgICAgICAgICBvbkNsaWNrPXsoZXZlbnQ6IFJlYWN0Lk1vdXNlRXZlbnQpID0+IGFjdGlvbihldmVudCwgc2lnblVwKX1cbiAgICAgICAgICAgICAgICAgICAga2V5PXtzaWduVXAuaWR9XG4gICAgICAgICAgICAgICAgICA+XG4gICAgICAgICAgICAgICAgICAgIHtzaWduVXAudGV4dH1cbiAgICAgICAgICAgICAgICAgIDwvRmlsbEJ1dHRvbj5cblxuICAgICAgICAgICAgICAgICAgPFRleHRCdXR0b25cbiAgICAgICAgICAgICAgICAgICAga2V5PXtsb2dpbi5pZH1cbiAgICAgICAgICAgICAgICAgICAgZGF0YS10ZXN0aWQ9e2xvZ2luLmRhdGFUZXN0SWR9XG4gICAgICAgICAgICAgICAgICAgIGhyZWY9e2xvZ2luLmhyZWZ9XG4gICAgICAgICAgICAgICAgICAgIG9uQ2xpY2s9eyhldmVudDogUmVhY3QuTW91c2VFdmVudCkgPT4gYWN0aW9uKGV2ZW50LCBsb2dpbil9XG4gICAgICAgICAgICAgICAgICA+XG4gICAgICAgICAgICAgICAgICAgIHtsb2dpbi50ZXh0fVxuICAgICAgICAgICAgICAgICAgPC9UZXh0QnV0dG9uPlxuICAgICAgICAgICAgICAgIDwvPlxuICAgICAgICAgICAgICApfVxuICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgKX1cbiAgICAgICAgPC9Nb2JpbGVVbFdyYXBwZXI+XG4gICAgICA8L0JhY2tncm91bmRXcmFwcGVyPlxuICAgIDwvQ29udGVudENvbnRhaW5lcj5cbiAgKTtcbn07XG4iXX0= */");
+export const AppHeaderMainMenuMobile = ({
+  action,
+  items,
+  getItemType,
+  isAnon
+}) => {
+  const [subMenuItem, setSubMenuItem] = useState();
+  const openSubMenu = (event, item) => {
+    action(event, item);
+    setSubMenuItem(item);
+    getItemType(item.type);
+  };
+  const closeSubMenu = () => {
+    setSubMenuItem(undefined);
+    getItemType(undefined);
+  };
+  const mapItemToElement = (item, action) => {
+    switch (item.type) {
+      case 'link':
+        return /*#__PURE__*/_jsx(AppHeaderLink, {
+          action: action,
+          item: item,
+          mobile: true
+        }, item.id);
+      case 'dropdown':
+      case 'profile-dropdown':
+      case 'catalog-dropdown':
+      case 'resources-dropdown':
+        return /*#__PURE__*/_jsx(AppHeaderSubMenuRow, {
+          item: item,
+          openSubMenu: openSubMenu
+        }, item.id);
+      case 'resources-simple-dropdown':
+        return /*#__PURE__*/_jsxs(_Fragment, {
+          children: [/*#__PURE__*/_jsx(Text, {
+            as: "h2",
+            fontSize: 22,
+            mt: 16,
+            mb: 16,
+            children: item.text
+          }), /*#__PURE__*/_jsx(AppHeaderLinkSections, {
+            action: action,
+            item: item,
+            mobile: true
+          })]
+        });
+      case 'fill-button':
+        return /*#__PURE__*/_jsx(FillButton, {
+          "data-testid": item.dataTestId,
+          href: item.href,
+          onClick: event => action(event, item),
+          mt: 24,
+          children: item.text
+        }, item.id);
+      case 'text-button':
+        return /*#__PURE__*/_jsx(TextButton, {
+          mt: 16,
+          "data-testid": item.dataTestId,
+          href: item.href,
+          onClick: event => action(event, item),
+          children: item.text
+        }, item.id);
+      default:
+        return /*#__PURE__*/_jsx(_Fragment, {});
+    }
+  };
+  return subMenuItem ? /*#__PURE__*/_jsx(AppHeaderSubNavMobile, {
+    handleCloseSubMenu: closeSubMenu,
+    action: action,
+    item: subMenuItem
+  }) : /*#__PURE__*/_jsx(ContentContainer, {
+    role: "navigation",
+    "aria-label": "site navigation",
+    tabIndex: -1,
+    children: /*#__PURE__*/_jsx(BackgroundWrapper, {
+      children: /*#__PURE__*/_jsxs(MobileUlWrapper, {
+        as: "ul",
+        children: [items.map(item => mapItemToElement(item, action)), isAnon && /*#__PURE__*/_jsx("div", {
+          // eslint-disable-next-line gamut/no-inline-style
+          style: {
+            display: 'flex',
+            alignItems: 'baseline',
+            justifyContent: 'center',
+            paddingTop: '16px',
+            borderTop: '1px solid var(--border-tertiary)'
+          },
+          children: isBusinessPage() ? /*#__PURE__*/_jsxs(_Fragment, {
+            children: [/*#__PURE__*/_jsx(TextButton, {
+              "data-testid": signUpTextButton.dataTestId,
+              href: signUpTextButton.href,
+              onClick: event => action(event, signUpTextButton),
+              children: signUpTextButton.text
+            }, signUpTextButton.id), /*#__PURE__*/_jsx(FillButton, {
+              "data-testid": requestTeamsDemo.dataTestId,
+              href: requestTeamsDemo.href,
+              onClick: event => action(event, requestTeamsDemo),
+              children: requestTeamsDemo.text
+            }, requestTeamsDemo.id)]
+          }) : /*#__PURE__*/_jsxs(_Fragment, {
+            children: [/*#__PURE__*/_jsx(FillButton, {
+              "data-testid": signUp.dataTestId,
+              href: signUp.href,
+              onClick: event => action(event, signUp),
+              children: signUp.text
+            }, signUp.id), /*#__PURE__*/_jsx(TextButton, {
+              "data-testid": login.dataTestId,
+              href: login.href,
+              onClick: event => action(event, login),
+              children: login.text
+            }, login.id)]
+          })
+        })]
+      })
+    })
+  });
+};

package/dist/AppHeaderMobile/AppHeaderSubMenuMobile/elements.d.ts

@@ -0,0 +1,13 @@
+import { PropsWithChildren } from 'react';
+import { AppHeaderMenuProviderProps } from '../../AppHeader/AppHeaderElements/AppHeaderMenuProvider';
+export declare const MobileUlWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    theme?: import("@emotion/react").Theme;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, {}>;
+type MobileSubMenuWrapperProps = Pick<AppHeaderMenuProviderProps, 'handleClose'> & {
+    isMenuRole: boolean;
+};
+export declare const MobileSubMenuWrapper: ({ children, handleClose, isMenuRole, }: PropsWithChildren<MobileSubMenuWrapperProps>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/AppHeaderMobile/AppHeaderSubMenuMobile/elements.js

@@ -0,0 +1,30 @@
+import _styled from "@emotion/styled/base";
+import { focusVisibleStyle } from '@codecademy/gamut';
+import { css } from '@codecademy/gamut-styles';
+import { AppHeaderListItem } from '../../AppHeader/AppHeaderElements/AppHeaderListItem';
+import { AppHeaderMenuProvider } from '../../AppHeader/AppHeaderElements/AppHeaderMenuProvider';
+import { jsx as _jsx } from "react/jsx-runtime";
+const uiWrapperFocus = focusVisibleStyle('-4px');
+export const MobileUlWrapper = /*#__PURE__*/_styled("ul", {
+  target: "e1l1r2as0",
+  label: "MobileUlWrapper"
+})(css({
+  listStyle: 'none',
+  p: 0,
+  m: 0,
+  pb: 4,
+  ...uiWrapperFocus
+}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9BcHBIZWFkZXJNb2JpbGUvQXBwSGVhZGVyU3ViTWVudU1vYmlsZS9lbGVtZW50cy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBYStCIiwiZmlsZSI6Ii4uLy4uLy4uL3NyYy9BcHBIZWFkZXJNb2JpbGUvQXBwSGVhZGVyU3ViTWVudU1vYmlsZS9lbGVtZW50cy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBmb2N1c1Zpc2libGVTdHlsZSB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0JztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0LXN0eWxlcyc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBQcm9wc1dpdGhDaGlsZHJlbiB9IGZyb20gJ3JlYWN0JztcblxuaW1wb3J0IHsgQXBwSGVhZGVyTGlzdEl0ZW0gfSBmcm9tICcuLi8uLi9BcHBIZWFkZXIvQXBwSGVhZGVyRWxlbWVudHMvQXBwSGVhZGVyTGlzdEl0ZW0nO1xuaW1wb3J0IHtcbiAgQXBwSGVhZGVyTWVudVByb3ZpZGVyLFxuICBBcHBIZWFkZXJNZW51UHJvdmlkZXJQcm9wcyxcbn0gZnJvbSAnLi4vLi4vQXBwSGVhZGVyL0FwcEhlYWRlckVsZW1lbnRzL0FwcEhlYWRlck1lbnVQcm92aWRlcic7XG5cbmNvbnN0IHVpV3JhcHBlckZvY3VzID0gZm9jdXNWaXNpYmxlU3R5bGUoJy00cHgnKTtcblxuZXhwb3J0IGNvbnN0IE1vYmlsZVVsV3JhcHBlciA9IHN0eWxlZC51bChcbiAgY3NzKHtcbiAgICBsaXN0U3R5bGU6ICdub25lJyxcbiAgICBwOiAwLFxuICAgIG06IDAsXG4gICAgcGI6IDQsXG4gICAgLi4udWlXcmFwcGVyRm9jdXMsXG4gIH0pXG4pO1xuXG50eXBlIE1vYmlsZVN1Yk1lbnVXcmFwcGVyUHJvcHMgPVxuICB8IFBpY2s8QXBwSGVhZGVyTWVudVByb3ZpZGVyUHJvcHMsICdoYW5kbGVDbG9zZSc+ICYgeyBpc01lbnVSb2xlOiBib29sZWFuIH07XG5cbmV4cG9ydCBjb25zdCBNb2JpbGVTdWJNZW51V3JhcHBlciA9ICh7XG4gIGNoaWxkcmVuLFxuICBoYW5kbGVDbG9zZSxcbiAgaXNNZW51Um9sZSxcbn06IFByb3BzV2l0aENoaWxkcmVuPE1vYmlsZVN1Yk1lbnVXcmFwcGVyUHJvcHM+KSA9PiB7XG4gIHJldHVybiBpc01lbnVSb2xlID8gKFxuICAgIDxBcHBIZWFkZXJNZW51UHJvdmlkZXIgYXM9e0FwcEhlYWRlckxpc3RJdGVtfSBoYW5kbGVDbG9zZT17aGFuZGxlQ2xvc2V9PlxuICAgICAge2NoaWxkcmVufVxuICAgIDwvQXBwSGVhZGVyTWVudVByb3ZpZGVyPlxuICApIDogKFxuICAgIDxBcHBIZWFkZXJMaXN0SXRlbT57Y2hpbGRyZW59PC9BcHBIZWFkZXJMaXN0SXRlbT5cbiAgKTtcbn07XG4iXX0= */");
+export const MobileSubMenuWrapper = ({
+  children,
+  handleClose,
+  isMenuRole
+}) => {
+  return isMenuRole ? /*#__PURE__*/_jsx(AppHeaderMenuProvider, {
+    as: AppHeaderListItem,
+    handleClose: handleClose,
+    children: children
+  }) : /*#__PURE__*/_jsx(AppHeaderListItem, {
+    children: children
+  });
+};

package/dist/AppHeaderMobile/AppHeaderSubMenuMobile/index.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { AppHeaderCatalogDropdownProps } from '../../AppHeader/AppHeaderElements/AppHeaderCatalogDropdown';
+import { AppHeaderDropdownProps } from '../../AppHeader/AppHeaderElements/AppHeaderDropdown';
+import { AppHeaderResourceDropdownProps } from '../../AppHeader/AppHeaderElements/AppHeaderResourcesDropdown';
+export type AppHeaderSubMenuMobileProps = (AppHeaderDropdownProps | AppHeaderCatalogDropdownProps | AppHeaderResourceDropdownProps) & {
+    handleCloseSubMenu: () => void;
+};
+export declare const AppHeaderSubNavMobile: React.FC<AppHeaderSubMenuMobileProps>;

package/dist/AppHeaderMobile/AppHeaderSubMenuMobile/index.js

@@ -0,0 +1,124 @@
+import _styled from "@emotion/styled/base";
+import { Anchor, Box, Menu, Text } from '@codecademy/gamut';
+import { ArrowLeftIcon } from '@codecademy/gamut-icons';
+import { css, states, theme } from '@codecademy/gamut-styles';
+import { useEffect, useRef } from 'react';
+import * as React from 'react';
+import { CATALOG_NAV_SECTIONS } from '../../AppHeader/AppHeaderElements/AppHeaderCatalogDropdown/consts';
+import { MarketingBanner } from '../../AppHeader/AppHeaderElements/AppHeaderCatalogDropdown/MarketingBanner';
+import { AppHeaderLinkSections } from '../../AppHeader/AppHeaderElements/AppHeaderLinkSections';
+import { AppHeaderListItem } from '../../AppHeader/AppHeaderElements/AppHeaderListItem';
+import { RESOURCES_NAV_SECTIONS } from '../../AppHeader/AppHeaderElements/AppHeaderResourcesDropdown/consts';
+import { AppHeaderSection } from '../../AppHeader/AppHeaderElements/AppHeaderSection';
+import { MobileSubMenuWrapper, MobileUlWrapper } from './elements';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const StyledAnchor = /*#__PURE__*/_styled(Anchor, {
+  target: "e1ch795o1",
+  label: "StyledAnchor"
+})(css({
+  alignItems: `center`,
+  display: `flex`,
+  width: 'calc(100% - 64px)',
+  py: 8,
+  mt: 0,
+  mb: 16
+}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9BcHBIZWFkZXJNb2JpbGUvQXBwSGVhZGVyU3ViTWVudU1vYmlsZS9pbmRleC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBcUNxQiIsImZpbGUiOiIuLi8uLi8uLi9zcmMvQXBwSGVhZGVyTW9iaWxlL0FwcEhlYWRlclN1Yk1lbnVNb2JpbGUvaW5kZXgudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQW5jaG9yLCBCb3gsIE1lbnUsIFRleHQgfSBmcm9tICdAY29kZWNhZGVteS9nYW11dCc7XG5pbXBvcnQgeyBBcnJvd0xlZnRJY29uIH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQtaWNvbnMnO1xuaW1wb3J0IHsgY3NzLCBzdGF0ZXMsIHRoZW1lIH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQtc3R5bGVzJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IHVzZUVmZmVjdCwgdXNlUmVmIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0ICogYXMgUmVhY3QgZnJvbSAncmVhY3QnO1xuXG5pbXBvcnQgeyBBcHBIZWFkZXJDYXRhbG9nRHJvcGRvd25Qcm9wcyB9IGZyb20gJy4uLy4uL0FwcEhlYWRlci9BcHBIZWFkZXJFbGVtZW50cy9BcHBIZWFkZXJDYXRhbG9nRHJvcGRvd24nO1xuaW1wb3J0IHsgQ0FUQUxPR19OQVZfU0VDVElPTlMgfSBmcm9tICcuLi8uLi9BcHBIZWFkZXIvQXBwSGVhZGVyRWxlbWVudHMvQXBwSGVhZGVyQ2F0YWxvZ0Ryb3Bkb3duL2NvbnN0cyc7XG5pbXBvcnQgeyBNYXJrZXRpbmdCYW5uZXIgfSBmcm9tICcuLi8uLi9BcHBIZWFkZXIvQXBwSGVhZGVyRWxlbWVudHMvQXBwSGVhZGVyQ2F0YWxvZ0Ryb3Bkb3duL01hcmtldGluZ0Jhbm5lcic7XG5pbXBvcnQgeyBBcHBIZWFkZXJEcm9wZG93blByb3BzIH0gZnJvbSAnLi4vLi4vQXBwSGVhZGVyL0FwcEhlYWRlckVsZW1lbnRzL0FwcEhlYWRlckRyb3Bkb3duJztcbmltcG9ydCB7IEFwcEhlYWRlckxpbmtTZWN0aW9ucyB9IGZyb20gJy4uLy4uL0FwcEhlYWRlci9BcHBIZWFkZXJFbGVtZW50cy9BcHBIZWFkZXJMaW5rU2VjdGlvbnMnO1xuaW1wb3J0IHsgQXBwSGVhZGVyTGlzdEl0ZW0gfSBmcm9tICcuLi8uLi9BcHBIZWFkZXIvQXBwSGVhZGVyRWxlbWVudHMvQXBwSGVhZGVyTGlzdEl0ZW0nO1xuaW1wb3J0IHsgQXBwSGVhZGVyUmVzb3VyY2VEcm9wZG93blByb3BzIH0gZnJvbSAnLi4vLi4vQXBwSGVhZGVyL0FwcEhlYWRlckVsZW1lbnRzL0FwcEhlYWRlclJlc291cmNlc0Ryb3Bkb3duJztcbmltcG9ydCB7IFJFU09VUkNFU19OQVZfU0VDVElPTlMgfSBmcm9tICcuLi8uLi9BcHBIZWFkZXIvQXBwSGVhZGVyRWxlbWVudHMvQXBwSGVhZGVyUmVzb3VyY2VzRHJvcGRvd24vY29uc3RzJztcbmltcG9ydCB7IEFwcEhlYWRlclNlY3Rpb24gfSBmcm9tICcuLi8uLi9BcHBIZWFkZXIvQXBwSGVhZGVyRWxlbWVudHMvQXBwSGVhZGVyU2VjdGlvbic7XG5pbXBvcnQge1xuICBBcHBIZWFkZXJDYXRhbG9nRHJvcGRvd25JdGVtLFxuICBBcHBIZWFkZXJDbGlja0hhbmRsZXIsXG4gIEFwcEhlYWRlckRyb3Bkb3duSXRlbSxcbiAgQXBwSGVhZGVyUmVzb3VyY2VzRHJvcGRvd25JdGVtLFxufSBmcm9tICcuLi8uLi9BcHBIZWFkZXIvc2hhcmVkJztcbmltcG9ydCB7IE1vYmlsZVN1Yk1lbnVXcmFwcGVyLCBNb2JpbGVVbFdyYXBwZXIgfSBmcm9tICcuL2VsZW1lbnRzJztcblxuZXhwb3J0IHR5cGUgQXBwSGVhZGVyU3ViTWVudU1vYmlsZVByb3BzID0gKFxuICB8IEFwcEhlYWRlckRyb3Bkb3duUHJvcHNcbiAgfCBBcHBIZWFkZXJDYXRhbG9nRHJvcGRvd25Qcm9wc1xuICB8IEFwcEhlYWRlclJlc291cmNlRHJvcGRvd25Qcm9wc1xuKSAmIHtcbiAgaGFuZGxlQ2xvc2VTdWJNZW51OiAoKSA9PiB2b2lkO1xufTtcblxudHlwZSBBcHBIZWFkZXJTZWN0aW9uSXRlbSA9XG4gIHwgQXBwSGVhZGVyRHJvcGRvd25JdGVtXG4gIHwgQXBwSGVhZGVyQ2F0YWxvZ0Ryb3Bkb3duSXRlbVxuICB8IEFwcEhlYWRlclJlc291cmNlc0Ryb3Bkb3duSXRlbTtcblxuY29uc3QgU3R5bGVkQW5jaG9yID0gc3R5bGVkKEFuY2hvcikoXG4gIGNzcyh7XG4gICAgYWxpZ25JdGVtczogYGNlbnRlcmAsXG4gICAgZGlzcGxheTogYGZsZXhgLFxuICAgIHdpZHRoOiAnY2FsYygxMDAlIC0gNjRweCknLFxuICAgIHB5OiA4LFxuICAgIG10OiAwLFxuICAgIG1iOiAxNixcbiAgfSlcbik7XG5cbmNvbnN0IEJhY2tncm91bmRXcmFwcGVyID0gc3R5bGVkKEJveCk8e1xuICBpc05vdENhdGFsb2dPclJlc291cmNlczogYm9vbGVhbjtcbn0+KFxuICBzdGF0ZXMoe1xuICAgIGlzTm90Q2F0YWxvZ09yUmVzb3VyY2VzOiB7XG4gICAgICBiYWNrZ3JvdW5kOiB0aGVtZS5jb2xvcnMud2hpdGUsXG4gICAgICBib3JkZXI6IDEsXG4gICAgICBib3JkZXJDb2xvcjogJ2JvcmRlci10ZXJ0aWFyeScsXG4gICAgICBib3JkZXJSYWRpdXM6ICdsZycsXG4gICAgICBwYWRkaW5nOiAnMTZweCcsXG4gICAgICBteDogMTYsXG4gICAgfSxcbiAgfSlcbik7XG5cbmNvbnN0IHJlbmRlckhlYWRlclNlY3Rpb24gPSAoXG4gIGl0ZW06IEFwcEhlYWRlclNlY3Rpb25JdGVtLFxuICBhY3Rpb246IEFwcEhlYWRlckNsaWNrSGFuZGxlcixcbiAgaGFuZGxlQ2xvc2VTdWJNZW51OiAoKSA9PiB2b2lkXG4pID0+IHtcbiAgc3dpdGNoIChpdGVtLnR5cGUpIHtcbiAgICBjYXNlICdjYXRhbG9nLWRyb3Bkb3duJzpcbiAgICAgIHJldHVybiAoXG4gICAgICAgIDxBcHBIZWFkZXJTZWN0aW9uXG4gICAgICAgICAgbmF2U2VjdGlvbnM9e0NBVEFMT0dfTkFWX1NFQ1RJT05TfVxuICAgICAgICAgIE1hcmtldGluZ0Jhbm5lcj17TWFya2V0aW5nQmFubmVyfVxuICAgICAgICAgIGlzTW9iaWxlXG4gICAgICAgICAgaGFuZGxlQ2xvc2U9e2hhbmRsZUNsb3NlU3ViTWVudX1cbiAgICAgICAgICB0eXBlPVwiY2F0YWxvZy1kcm9wZG93blwiXG4gICAgICAgIC8+XG4gICAgICApO1xuICAgIGNhc2UgJ3Jlc291cmNlcy1kcm9wZG93bic6XG4gICAgICByZXR1cm4gKFxuICAgICAgICA8QXBwSGVhZGVyU2VjdGlvblxuICAgICAgICAgIG5hdlNlY3Rpb25zPXtSRVNPVVJDRVNfTkFWX1NFQ1RJT05TfVxuICAgICAgICAgIE1hcmtldGluZ0Jhbm5lcj17TWFya2V0aW5nQmFubmVyfVxuICAgICAgICAgIGlzTW9iaWxlXG4gICAgICAgICAgaGFuZGxlQ2xvc2U9e2hhbmRsZUNsb3NlU3ViTWVudX1cbiAgICAgICAgICB0eXBlPVwicmVzb3VyY2VzLWRyb3Bkb3duXCJcbiAgICAgICAgLz5cbiAgICAgICk7XG4gICAgZGVmYXVsdDpcbiAgICAgIHJldHVybiA8QXBwSGVhZGVyTGlua1NlY3Rpb25zIGFjdGlvbj17YWN0aW9ufSBpdGVtPXtpdGVtfSBtb2JpbGUgLz47XG4gIH1cbn07XG5cbmV4cG9ydCBjb25zdCBBcHBIZWFkZXJTdWJOYXZNb2JpbGU6IFJlYWN0LkZDPEFwcEhlYWRlclN1Yk1lbnVNb2JpbGVQcm9wcz4gPSAoe1xuICBhY3Rpb24sXG4gIGhhbmRsZUNsb3NlU3ViTWVudSxcbiAgaXRlbSxcbn0pID0+IHtcbiAgY29uc3QgbWFpblVsV3JhcHBlciA9IHVzZVJlZjxIVE1MVUxpc3RFbGVtZW50PihudWxsKTtcblxuICB1c2VFZmZlY3QoKCkgPT4ge1xuICAgIGlmIChtYWluVWxXcmFwcGVyPy5jdXJyZW50KSB7XG4gICAgICBtYWluVWxXcmFwcGVyLmN1cnJlbnQuZm9jdXMoKTtcbiAgICB9XG4gIH0sIFtdKTtcblxuICBjb25zdCBpc1Byb2ZpbGVNZW51ID0gaXRlbS50eXBlID09PSAncHJvZmlsZS1kcm9wZG93bic7XG5cbiAgY29uc3QgaXNDYXRhbG9nT3JSZXNvdXJjZXNNZW51ID1cbiAgICBpdGVtLnR5cGUgPT09ICdjYXRhbG9nLWRyb3Bkb3duJyB8fCBpdGVtLnR5cGUgPT09ICdyZXNvdXJjZXMtZHJvcGRvd24nO1xuXG4gIGNvbnN0IHJlbmRlckJhY2tCdXR0b24gPSAoKSA9PiB7XG4gICAgaWYgKCFpc0NhdGFsb2dPclJlc291cmNlc01lbnUpIHtcbiAgICAgIHJldHVybiAoXG4gICAgICAgIDxBcHBIZWFkZXJMaXN0SXRlbT5cbiAgICAgICAgICA8U3R5bGVkQW5jaG9yXG4gICAgICAgICAgICBvbkNsaWNrPXtoYW5kbGVDbG9zZVN1Yk1lbnV9XG4gICAgICAgICAgICB2YXJpYW50PVwiaW50ZXJmYWNlXCJcbiAgICAgICAgICAgIGFzPVwiYnV0dG9uXCJcbiAgICAgICAgICA+XG4gICAgICAgICAgICA8QXJyb3dMZWZ0SWNvbiBzaXplPXsyNH0gYXJpYS1oaWRkZW4gLz5cbiAgICAgICAgICAgIDxUZXh0IHBsPXs4fT5CYWNrPC9UZXh0PlxuICAgICAgICAgIDwvU3R5bGVkQW5jaG9yPlxuICAgICAgICA8L0FwcEhlYWRlckxpc3RJdGVtPlxuICAgICAgKTtcbiAgICB9XG4gICAgcmV0dXJuIG51bGw7XG4gIH07XG5cbiAgcmV0dXJuIChcbiAgICA8QmFja2dyb3VuZFdyYXBwZXIgaXNOb3RDYXRhbG9nT3JSZXNvdXJjZXM9eyFpc0NhdGFsb2dPclJlc291cmNlc01lbnV9PlxuICAgICAgPE1vYmlsZVVsV3JhcHBlciByZWY9e21haW5VbFdyYXBwZXJ9IHRhYkluZGV4PXstMX0+XG4gICAgICAgIHtyZW5kZXJCYWNrQnV0dG9uKCl9XG4gICAgICAgIDxNb2JpbGVTdWJNZW51V3JhcHBlclxuICAgICAgICAgIGhhbmRsZUNsb3NlPXtoYW5kbGVDbG9zZVN1Yk1lbnV9XG4gICAgICAgICAgaXNNZW51Um9sZT17aXNQcm9maWxlTWVudX1cbiAgICAgICAgPlxuICAgICAgICAgIHshaXNDYXRhbG9nT3JSZXNvdXJjZXNNZW51ICYmIChcbiAgICAgICAgICAgIDxUZXh0IGFzPVwiaDFcIiBmb250U2l6ZT17MjB9IG1iPXsxNn0gbWw9ezB9PlxuICAgICAgICAgICAgICB7aXNQcm9maWxlTWVudSA/IGl0ZW0udXNlckRpc3BsYXlOYW1lIDogaXRlbS50ZXh0fVxuICAgICAgICAgICAgPC9UZXh0PlxuICAgICAgICAgICl9XG4gICAgICAgICAgPE1lbnVcbiAgICAgICAgICAgIHZhcmlhbnQ9XCJmaXhlZFwiXG4gICAgICAgICAgICBteD17aXNDYXRhbG9nT3JSZXNvdXJjZXNNZW51ID8geyBfOiAxNiwgc206IDMyIH0gOiAwfVxuICAgICAgICAgICAgd2lkdGg9XCJhdXRvXCJcbiAgICAgICAgICAgIGJnPVwidHJhbnNwYXJlbnRcIlxuICAgICAgICAgID5cbiAgICAgICAgICAgIHtyZW5kZXJIZWFkZXJTZWN0aW9uKGl0ZW0sIGFjdGlvbiwgaGFuZGxlQ2xvc2VTdWJNZW51KX1cbiAgICAgICAgICA8L01lbnU+XG4gICAgICAgIDwvTW9iaWxlU3ViTWVudVdyYXBwZXI+XG4gICAgICA8L01vYmlsZVVsV3JhcHBlcj5cbiAgICA8L0JhY2tncm91bmRXcmFwcGVyPlxuICApO1xufTtcbiJdfQ== */");
+const BackgroundWrapper = /*#__PURE__*/_styled(Box, {
+  target: "e1ch795o0",
+  label: "BackgroundWrapper"
+})(states({
+  isNotCatalogOrResources: {
+    background: theme.colors.white,
+    border: 1,
+    borderColor: 'border-tertiary',
+    borderRadius: 'lg',
+    padding: '16px',
+    mx: 16
+  }
+}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9BcHBIZWFkZXJNb2JpbGUvQXBwSGVhZGVyU3ViTWVudU1vYmlsZS9pbmRleC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBZ0QwQiIsImZpbGUiOiIuLi8uLi8uLi9zcmMvQXBwSGVhZGVyTW9iaWxlL0FwcEhlYWRlclN1Yk1lbnVNb2JpbGUvaW5kZXgudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQW5jaG9yLCBCb3gsIE1lbnUsIFRleHQgfSBmcm9tICdAY29kZWNhZGVteS9nYW11dCc7XG5pbXBvcnQgeyBBcnJvd0xlZnRJY29uIH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQtaWNvbnMnO1xuaW1wb3J0IHsgY3NzLCBzdGF0ZXMsIHRoZW1lIH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQtc3R5bGVzJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IHVzZUVmZmVjdCwgdXNlUmVmIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0ICogYXMgUmVhY3QgZnJvbSAncmVhY3QnO1xuXG5pbXBvcnQgeyBBcHBIZWFkZXJDYXRhbG9nRHJvcGRvd25Qcm9wcyB9IGZyb20gJy4uLy4uL0FwcEhlYWRlci9BcHBIZWFkZXJFbGVtZW50cy9BcHBIZWFkZXJDYXRhbG9nRHJvcGRvd24nO1xuaW1wb3J0IHsgQ0FUQUxPR19OQVZfU0VDVElPTlMgfSBmcm9tICcuLi8uLi9BcHBIZWFkZXIvQXBwSGVhZGVyRWxlbWVudHMvQXBwSGVhZGVyQ2F0YWxvZ0Ryb3Bkb3duL2NvbnN0cyc7XG5pbXBvcnQgeyBNYXJrZXRpbmdCYW5uZXIgfSBmcm9tICcuLi8uLi9BcHBIZWFkZXIvQXBwSGVhZGVyRWxlbWVudHMvQXBwSGVhZGVyQ2F0YWxvZ0Ryb3Bkb3duL01hcmtldGluZ0Jhbm5lcic7XG5pbXBvcnQgeyBBcHBIZWFkZXJEcm9wZG93blByb3BzIH0gZnJvbSAnLi4vLi4vQXBwSGVhZGVyL0FwcEhlYWRlckVsZW1lbnRzL0FwcEhlYWRlckRyb3Bkb3duJztcbmltcG9ydCB7IEFwcEhlYWRlckxpbmtTZWN0aW9ucyB9IGZyb20gJy4uLy4uL0FwcEhlYWRlci9BcHBIZWFkZXJFbGVtZW50cy9BcHBIZWFkZXJMaW5rU2VjdGlvbnMnO1xuaW1wb3J0IHsgQXBwSGVhZGVyTGlzdEl0ZW0gfSBmcm9tICcuLi8uLi9BcHBIZWFkZXIvQXBwSGVhZGVyRWxlbWVudHMvQXBwSGVhZGVyTGlzdEl0ZW0nO1xuaW1wb3J0IHsgQXBwSGVhZGVyUmVzb3VyY2VEcm9wZG93blByb3BzIH0gZnJvbSAnLi4vLi4vQXBwSGVhZGVyL0FwcEhlYWRlckVsZW1lbnRzL0FwcEhlYWRlclJlc291cmNlc0Ryb3Bkb3duJztcbmltcG9ydCB7IFJFU09VUkNFU19OQVZfU0VDVElPTlMgfSBmcm9tICcuLi8uLi9BcHBIZWFkZXIvQXBwSGVhZGVyRWxlbWVudHMvQXBwSGVhZGVyUmVzb3VyY2VzRHJvcGRvd24vY29uc3RzJztcbmltcG9ydCB7IEFwcEhlYWRlclNlY3Rpb24gfSBmcm9tICcuLi8uLi9BcHBIZWFkZXIvQXBwSGVhZGVyRWxlbWVudHMvQXBwSGVhZGVyU2VjdGlvbic7XG5pbXBvcnQge1xuICBBcHBIZWFkZXJDYXRhbG9nRHJvcGRvd25JdGVtLFxuICBBcHBIZWFkZXJDbGlja0hhbmRsZXIsXG4gIEFwcEhlYWRlckRyb3Bkb3duSXRlbSxcbiAgQXBwSGVhZGVyUmVzb3VyY2VzRHJvcGRvd25JdGVtLFxufSBmcm9tICcuLi8uLi9BcHBIZWFkZXIvc2hhcmVkJztcbmltcG9ydCB7IE1vYmlsZVN1Yk1lbnVXcmFwcGVyLCBNb2JpbGVVbFdyYXBwZXIgfSBmcm9tICcuL2VsZW1lbnRzJztcblxuZXhwb3J0IHR5cGUgQXBwSGVhZGVyU3ViTWVudU1vYmlsZVByb3BzID0gKFxuICB8IEFwcEhlYWRlckRyb3Bkb3duUHJvcHNcbiAgfCBBcHBIZWFkZXJDYXRhbG9nRHJvcGRvd25Qcm9wc1xuICB8IEFwcEhlYWRlclJlc291cmNlRHJvcGRvd25Qcm9wc1xuKSAmIHtcbiAgaGFuZGxlQ2xvc2VTdWJNZW51OiAoKSA9PiB2b2lkO1xufTtcblxudHlwZSBBcHBIZWFkZXJTZWN0aW9uSXRlbSA9XG4gIHwgQXBwSGVhZGVyRHJvcGRvd25JdGVtXG4gIHwgQXBwSGVhZGVyQ2F0YWxvZ0Ryb3Bkb3duSXRlbVxuICB8IEFwcEhlYWRlclJlc291cmNlc0Ryb3Bkb3duSXRlbTtcblxuY29uc3QgU3R5bGVkQW5jaG9yID0gc3R5bGVkKEFuY2hvcikoXG4gIGNzcyh7XG4gICAgYWxpZ25JdGVtczogYGNlbnRlcmAsXG4gICAgZGlzcGxheTogYGZsZXhgLFxuICAgIHdpZHRoOiAnY2FsYygxMDAlIC0gNjRweCknLFxuICAgIHB5OiA4LFxuICAgIG10OiAwLFxuICAgIG1iOiAxNixcbiAgfSlcbik7XG5cbmNvbnN0IEJhY2tncm91bmRXcmFwcGVyID0gc3R5bGVkKEJveCk8e1xuICBpc05vdENhdGFsb2dPclJlc291cmNlczogYm9vbGVhbjtcbn0+KFxuICBzdGF0ZXMoe1xuICAgIGlzTm90Q2F0YWxvZ09yUmVzb3VyY2VzOiB7XG4gICAgICBiYWNrZ3JvdW5kOiB0aGVtZS5jb2xvcnMud2hpdGUsXG4gICAgICBib3JkZXI6IDEsXG4gICAgICBib3JkZXJDb2xvcjogJ2JvcmRlci10ZXJ0aWFyeScsXG4gICAgICBib3JkZXJSYWRpdXM6ICdsZycsXG4gICAgICBwYWRkaW5nOiAnMTZweCcsXG4gICAgICBteDogMTYsXG4gICAgfSxcbiAgfSlcbik7XG5cbmNvbnN0IHJlbmRlckhlYWRlclNlY3Rpb24gPSAoXG4gIGl0ZW06IEFwcEhlYWRlclNlY3Rpb25JdGVtLFxuICBhY3Rpb246IEFwcEhlYWRlckNsaWNrSGFuZGxlcixcbiAgaGFuZGxlQ2xvc2VTdWJNZW51OiAoKSA9PiB2b2lkXG4pID0+IHtcbiAgc3dpdGNoIChpdGVtLnR5cGUpIHtcbiAgICBjYXNlICdjYXRhbG9nLWRyb3Bkb3duJzpcbiAgICAgIHJldHVybiAoXG4gICAgICAgIDxBcHBIZWFkZXJTZWN0aW9uXG4gICAgICAgICAgbmF2U2VjdGlvbnM9e0NBVEFMT0dfTkFWX1NFQ1RJT05TfVxuICAgICAgICAgIE1hcmtldGluZ0Jhbm5lcj17TWFya2V0aW5nQmFubmVyfVxuICAgICAgICAgIGlzTW9iaWxlXG4gICAgICAgICAgaGFuZGxlQ2xvc2U9e2hhbmRsZUNsb3NlU3ViTWVudX1cbiAgICAgICAgICB0eXBlPVwiY2F0YWxvZy1kcm9wZG93blwiXG4gICAgICAgIC8+XG4gICAgICApO1xuICAgIGNhc2UgJ3Jlc291cmNlcy1kcm9wZG93bic6XG4gICAgICByZXR1cm4gKFxuICAgICAgICA8QXBwSGVhZGVyU2VjdGlvblxuICAgICAgICAgIG5hdlNlY3Rpb25zPXtSRVNPVVJDRVNfTkFWX1NFQ1RJT05TfVxuICAgICAgICAgIE1hcmtldGluZ0Jhbm5lcj17TWFya2V0aW5nQmFubmVyfVxuICAgICAgICAgIGlzTW9iaWxlXG4gICAgICAgICAgaGFuZGxlQ2xvc2U9e2hhbmRsZUNsb3NlU3ViTWVudX1cbiAgICAgICAgICB0eXBlPVwicmVzb3VyY2VzLWRyb3Bkb3duXCJcbiAgICAgICAgLz5cbiAgICAgICk7XG4gICAgZGVmYXVsdDpcbiAgICAgIHJldHVybiA8QXBwSGVhZGVyTGlua1NlY3Rpb25zIGFjdGlvbj17YWN0aW9ufSBpdGVtPXtpdGVtfSBtb2JpbGUgLz47XG4gIH1cbn07XG5cbmV4cG9ydCBjb25zdCBBcHBIZWFkZXJTdWJOYXZNb2JpbGU6IFJlYWN0LkZDPEFwcEhlYWRlclN1Yk1lbnVNb2JpbGVQcm9wcz4gPSAoe1xuICBhY3Rpb24sXG4gIGhhbmRsZUNsb3NlU3ViTWVudSxcbiAgaXRlbSxcbn0pID0+IHtcbiAgY29uc3QgbWFpblVsV3JhcHBlciA9IHVzZVJlZjxIVE1MVUxpc3RFbGVtZW50PihudWxsKTtcblxuICB1c2VFZmZlY3QoKCkgPT4ge1xuICAgIGlmIChtYWluVWxXcmFwcGVyPy5jdXJyZW50KSB7XG4gICAgICBtYWluVWxXcmFwcGVyLmN1cnJlbnQuZm9jdXMoKTtcbiAgICB9XG4gIH0sIFtdKTtcblxuICBjb25zdCBpc1Byb2ZpbGVNZW51ID0gaXRlbS50eXBlID09PSAncHJvZmlsZS1kcm9wZG93bic7XG5cbiAgY29uc3QgaXNDYXRhbG9nT3JSZXNvdXJjZXNNZW51ID1cbiAgICBpdGVtLnR5cGUgPT09ICdjYXRhbG9nLWRyb3Bkb3duJyB8fCBpdGVtLnR5cGUgPT09ICdyZXNvdXJjZXMtZHJvcGRvd24nO1xuXG4gIGNvbnN0IHJlbmRlckJhY2tCdXR0b24gPSAoKSA9PiB7XG4gICAgaWYgKCFpc0NhdGFsb2dPclJlc291cmNlc01lbnUpIHtcbiAgICAgIHJldHVybiAoXG4gICAgICAgIDxBcHBIZWFkZXJMaXN0SXRlbT5cbiAgICAgICAgICA8U3R5bGVkQW5jaG9yXG4gICAgICAgICAgICBvbkNsaWNrPXtoYW5kbGVDbG9zZVN1Yk1lbnV9XG4gICAgICAgICAgICB2YXJpYW50PVwiaW50ZXJmYWNlXCJcbiAgICAgICAgICAgIGFzPVwiYnV0dG9uXCJcbiAgICAgICAgICA+XG4gICAgICAgICAgICA8QXJyb3dMZWZ0SWNvbiBzaXplPXsyNH0gYXJpYS1oaWRkZW4gLz5cbiAgICAgICAgICAgIDxUZXh0IHBsPXs4fT5CYWNrPC9UZXh0PlxuICAgICAgICAgIDwvU3R5bGVkQW5jaG9yPlxuICAgICAgICA8L0FwcEhlYWRlckxpc3RJdGVtPlxuICAgICAgKTtcbiAgICB9XG4gICAgcmV0dXJuIG51bGw7XG4gIH07XG5cbiAgcmV0dXJuIChcbiAgICA8QmFja2dyb3VuZFdyYXBwZXIgaXNOb3RDYXRhbG9nT3JSZXNvdXJjZXM9eyFpc0NhdGFsb2dPclJlc291cmNlc01lbnV9PlxuICAgICAgPE1vYmlsZVVsV3JhcHBlciByZWY9e21haW5VbFdyYXBwZXJ9IHRhYkluZGV4PXstMX0+XG4gICAgICAgIHtyZW5kZXJCYWNrQnV0dG9uKCl9XG4gICAgICAgIDxNb2JpbGVTdWJNZW51V3JhcHBlclxuICAgICAgICAgIGhhbmRsZUNsb3NlPXtoYW5kbGVDbG9zZVN1Yk1lbnV9XG4gICAgICAgICAgaXNNZW51Um9sZT17aXNQcm9maWxlTWVudX1cbiAgICAgICAgPlxuICAgICAgICAgIHshaXNDYXRhbG9nT3JSZXNvdXJjZXNNZW51ICYmIChcbiAgICAgICAgICAgIDxUZXh0IGFzPVwiaDFcIiBmb250U2l6ZT17MjB9IG1iPXsxNn0gbWw9ezB9PlxuICAgICAgICAgICAgICB7aXNQcm9maWxlTWVudSA/IGl0ZW0udXNlckRpc3BsYXlOYW1lIDogaXRlbS50ZXh0fVxuICAgICAgICAgICAgPC9UZXh0PlxuICAgICAgICAgICl9XG4gICAgICAgICAgPE1lbnVcbiAgICAgICAgICAgIHZhcmlhbnQ9XCJmaXhlZFwiXG4gICAgICAgICAgICBteD17aXNDYXRhbG9nT3JSZXNvdXJjZXNNZW51ID8geyBfOiAxNiwgc206IDMyIH0gOiAwfVxuICAgICAgICAgICAgd2lkdGg9XCJhdXRvXCJcbiAgICAgICAgICAgIGJnPVwidHJhbnNwYXJlbnRcIlxuICAgICAgICAgID5cbiAgICAgICAgICAgIHtyZW5kZXJIZWFkZXJTZWN0aW9uKGl0ZW0sIGFjdGlvbiwgaGFuZGxlQ2xvc2VTdWJNZW51KX1cbiAgICAgICAgICA8L01lbnU+XG4gICAgICAgIDwvTW9iaWxlU3ViTWVudVdyYXBwZXI+XG4gICAgICA8L01vYmlsZVVsV3JhcHBlcj5cbiAgICA8L0JhY2tncm91bmRXcmFwcGVyPlxuICApO1xufTtcbiJdfQ== */");
+const renderHeaderSection = (item, action, handleCloseSubMenu) => {
+  switch (item.type) {
+    case 'catalog-dropdown':
+      return /*#__PURE__*/_jsx(AppHeaderSection, {
+        navSections: CATALOG_NAV_SECTIONS,
+        MarketingBanner: MarketingBanner,
+        isMobile: true,
+        handleClose: handleCloseSubMenu,
+        type: "catalog-dropdown"
+      });
+    case 'resources-dropdown':
+      return /*#__PURE__*/_jsx(AppHeaderSection, {
+        navSections: RESOURCES_NAV_SECTIONS,
+        MarketingBanner: MarketingBanner,
+        isMobile: true,
+        handleClose: handleCloseSubMenu,
+        type: "resources-dropdown"
+      });
+    default:
+      return /*#__PURE__*/_jsx(AppHeaderLinkSections, {
+        action: action,
+        item: item,
+        mobile: true
+      });
+  }
+};
+export const AppHeaderSubNavMobile = ({
+  action,
+  handleCloseSubMenu,
+  item
+}) => {
+  const mainUlWrapper = useRef(null);
+  useEffect(() => {
+    if (mainUlWrapper?.current) {
+      mainUlWrapper.current.focus();
+    }
+  }, []);
+  const isProfileMenu = item.type === 'profile-dropdown';
+  const isCatalogOrResourcesMenu = item.type === 'catalog-dropdown' || item.type === 'resources-dropdown';
+  const renderBackButton = () => {
+    if (!isCatalogOrResourcesMenu) {
+      return /*#__PURE__*/_jsx(AppHeaderListItem, {
+        children: /*#__PURE__*/_jsxs(StyledAnchor, {
+          onClick: handleCloseSubMenu,
+          variant: "interface",
+          as: "button",
+          children: [/*#__PURE__*/_jsx(ArrowLeftIcon, {
+            size: 24,
+            "aria-hidden": true
+          }), /*#__PURE__*/_jsx(Text, {
+            pl: 8,
+            children: "Back"
+          })]
+        })
+      });
+    }
+    return null;
+  };
+  return /*#__PURE__*/_jsx(BackgroundWrapper, {
+    isNotCatalogOrResources: !isCatalogOrResourcesMenu,
+    children: /*#__PURE__*/_jsxs(MobileUlWrapper, {
+      ref: mainUlWrapper,
+      tabIndex: -1,
+      children: [renderBackButton(), /*#__PURE__*/_jsxs(MobileSubMenuWrapper, {
+        handleClose: handleCloseSubMenu,
+        isMenuRole: isProfileMenu,
+        children: [!isCatalogOrResourcesMenu && /*#__PURE__*/_jsx(Text, {
+          as: "h1",
+          fontSize: 20,
+          mb: 16,
+          ml: 0,
+          children: isProfileMenu ? item.userDisplayName : item.text
+        }), /*#__PURE__*/_jsx(Menu, {
+          variant: "fixed",
+          mx: isCatalogOrResourcesMenu ? {
+            _: 16,
+            sm: 32
+          } : 0,
+          width: "auto",
+          bg: "transparent",
+          children: renderHeaderSection(item, action, handleCloseSubMenu)
+        })]
+      })]
+    })
+  });
+};

package/dist/AppHeaderMobile/AppHeaderSubMenuTarget/index.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { AppHeaderCatalogDropdownItem, AppHeaderDropdownItem, AppHeaderResourcesDropdownItem } from '../../AppHeader/shared/types';
+export type AppHeaderSubMenuTargetProps = {
+    item: AppHeaderDropdownItem | AppHeaderCatalogDropdownItem | AppHeaderResourcesDropdownItem;
+    openSubMenu: (event: React.MouseEvent, item: AppHeaderDropdownItem | AppHeaderCatalogDropdownItem | AppHeaderResourcesDropdownItem) => void;
+};
+export declare const AppHeaderSubMenuRow: React.FC<AppHeaderSubMenuTargetProps>;