@pega/cosmos-react-build 4.0.0-dev.8.1 → 4.0.0-dev.8.2

package/lib/components/AppShell/NavigationList.js

@@ -45,7 +45,7 @@ const NavParentItem = ({ id, label, visual, items, currentItemId }) => {
             setManagedItems(nodes => treeHelpers.expandTo(nodes, currentItemId));
             setCollapsed(false);
         }
-    }, []);
+    }, [currentItemId]);
     useAfterInitialEffect(() => {
         setManagedItems(cur => {
             const expandedIds = new Set();

package/lib/components/AppShell/NavigationList.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationList.js","sourceRoot":"","sources":["../../../src/components/AppShell/NavigationList.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  ElementType,\n  FunctionComponent,\n  KeyboardEvent,\n  MouseEvent,\n  useContext,\n  useEffect,\n  useRef,\n  useState\n} from 'react';\n\nimport {\n  useTheme,\n  useEscape,\n  useDirection,\n  Icon,\n  Tooltip,\n  ExpandCollapse,\n  useElement,\n  StandardTree,\n  StandardTreeNode,\n  StandardTreeProps,\n  treeHelpers,\n  useAfterInitialEffect\n} from '@pega/cosmos-react-core';\nimport BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';\n\nimport { NavProps, NavItemRenderProps } from './AppShell.types';\nimport { StyledNavList, StyledAppShellCaretIcon, StyledNavListItem } from './AppShell.styles';\nimport AppShellContext from './AppShellContext';\n\nconst transformItems = (\n  items: NavItemRenderProps['items'],\n  expandedIds: Set<StandardTreeNode['id']>\n): StandardTreeProps['nodes'] => {\n  if (!items) return [];\n\n  return items.map(item => ({\n    id: item.id,\n    label: item.label,\n    onClick: (id: string, e: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>) => {\n      e.stopPropagation();\n      item.onClick?.(id, e);\n    },\n    expanded: item.items ? expandedIds.has(item.id) : undefined,\n    href: item.href,\n    nodes: item.items ? transformItems(item.items, expandedIds) : undefined\n  }));\n};\n\nconst NavParentItem: FunctionComponent<NavItemRenderProps> = ({\n  id,\n  label,\n  visual,\n  items,\n  currentItemId\n}) => {\n  const { navOpen, navState, openNav } = useContext(AppShellContext);\n  const { end } = useDirection();\n  const {\n    base: { animation }\n  } = useTheme();\n  const [collapsed, setCollapsed] = useState(true);\n  const [managedItems, setManagedItems] = useState<StandardTreeProps['nodes']>(() =>\n    transformItems(items, new Set())\n  );\n\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const treeRef = useRef<HTMLUListElement>(null);\n\n  const toggleCollapsed = (e: MouseEvent<HTMLButtonElement>) => {\n    e.stopPropagation();\n    if (!navOpen) {\n      setCollapsed(false);\n      openNav();\n    } else setCollapsed(state => !state);\n  };\n\n  useEscape(() => {\n    setCollapsed(true);\n    buttonRef.current?.focus();\n  }, treeRef);\n\n  useEffect(() => {\n    if (currentItemId && treeHelpers.getNode(managedItems, currentItemId)) {\n      setManagedItems(nodes => treeHelpers.expandTo(nodes, currentItemId));\n      setCollapsed(false);\n    }\n  }, []);\n\n  useAfterInitialEffect(() => {\n    setManagedItems(cur => {\n      const expandedIds = new Set<StandardTreeNode['id']>();\n\n      treeHelpers.forEachNode(cur, node => {\n        if (node.expanded) expandedIds.add(node.id);\n      });\n\n      return transformItems(items, expandedIds);\n    });\n  }, [items]);\n\n  return (\n    <>\n      <BareButton\n        id={id}\n        ref={buttonRef}\n        aria-expanded={!collapsed}\n        aria-controls={`${id}-tree`}\n        aria-label={label}\n        onClick={toggleCollapsed}\n      >\n        {visual}\n        <span>{label}</span>\n        {navState === 'open' && (\n          <Icon\n            name={`caret-${end}`}\n            as={StyledAppShellCaretIcon}\n            nestedListCollapsed={collapsed}\n          />\n        )}\n      </BareButton>\n      <ExpandCollapse\n        id={`${id}-tree`}\n        collapsed={collapsed || !navOpen}\n        transitionSpeed={\n          managedItems.length >= 10 ? `calc(2 * ${animation.speed})` : animation.speed\n        }\n      >\n        <StandardTree\n          ref={treeRef}\n          nodes={managedItems as StandardTreeNode[]}\n          currentNodeId={currentItemId}\n          selectableParents={false}\n          onNodeToggle={nodeId => {\n            setManagedItems(nodes =>\n              treeHelpers.mapNode(nodes, nodeId, node => {\n                return {\n                  ...node,\n                  expanded: !node.expanded\n                };\n              })\n            );\n          }}\n        />\n      </ExpandCollapse>\n    </>\n  );\n};\n\nexport const NavLinkItem: FunctionComponent<NavItemRenderProps> = ({\n  id,\n  label,\n  visual,\n  href,\n  onClick\n}) => {\n  const { navOpen } = useContext(AppShellContext);\n  const { end } = useDirection();\n  const [listItemEl, setListItemEl] = useElement<HTMLAnchorElement | HTMLButtonElement>();\n\n  return (\n    <>\n      <BareButton\n        ref={setListItemEl}\n        href={href}\n        onClick={(e: MouseEvent<HTMLAnchorElement | HTMLButtonElement>) => {\n          e.stopPropagation();\n          onClick?.(id, e);\n        }}\n        aria-label={label}\n      >\n        {visual}\n        <span>{label}</span>\n      </BareButton>\n      {!navOpen && (\n        <Tooltip target={listItemEl} placement={end} showDelay='none' hideDelay='none'>\n          {label}\n        </Tooltip>\n      )}\n    </>\n  );\n};\n\nconst NavigationList: FunctionComponent<NavProps> = ({ items, currentItemId }) => {\n  let ItemComponent: ElementType;\n\n  return (\n    <StyledNavList>\n      {items.map(item => {\n        if (item.items) {\n          ItemComponent = NavParentItem;\n        } else {\n          ItemComponent = NavLinkItem;\n        }\n\n        const ariaCurrent = item.href ? 'page' : 'true';\n        return (\n          <StyledNavListItem\n            aria-current={currentItemId === item.id ? ariaCurrent : undefined}\n            key={item.id}\n            id={item.id}\n          >\n            <ItemComponent\n              {...item}\n              visual={<Icon name={item.icon} />}\n              currentItemId={currentItemId}\n            />\n          </StyledNavListItem>\n        );\n      })}\n    </StyledNavList>\n  );\n};\n\nexport default NavigationList;\n"]}
+{"version":3,"file":"NavigationList.js","sourceRoot":"","sources":["../../../src/components/AppShell/NavigationList.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  ElementType,\n  FunctionComponent,\n  KeyboardEvent,\n  MouseEvent,\n  useContext,\n  useEffect,\n  useRef,\n  useState\n} from 'react';\n\nimport {\n  useTheme,\n  useEscape,\n  useDirection,\n  Icon,\n  Tooltip,\n  ExpandCollapse,\n  useElement,\n  StandardTree,\n  StandardTreeNode,\n  StandardTreeProps,\n  treeHelpers,\n  useAfterInitialEffect\n} from '@pega/cosmos-react-core';\nimport BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';\n\nimport { NavProps, NavItemRenderProps } from './AppShell.types';\nimport { StyledNavList, StyledAppShellCaretIcon, StyledNavListItem } from './AppShell.styles';\nimport AppShellContext from './AppShellContext';\n\nconst transformItems = (\n  items: NavItemRenderProps['items'],\n  expandedIds: Set<StandardTreeNode['id']>\n): StandardTreeProps['nodes'] => {\n  if (!items) return [];\n\n  return items.map(item => ({\n    id: item.id,\n    label: item.label,\n    onClick: (id: string, e: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>) => {\n      e.stopPropagation();\n      item.onClick?.(id, e);\n    },\n    expanded: item.items ? expandedIds.has(item.id) : undefined,\n    href: item.href,\n    nodes: item.items ? transformItems(item.items, expandedIds) : undefined\n  }));\n};\n\nconst NavParentItem: FunctionComponent<NavItemRenderProps> = ({\n  id,\n  label,\n  visual,\n  items,\n  currentItemId\n}) => {\n  const { navOpen, navState, openNav } = useContext(AppShellContext);\n  const { end } = useDirection();\n  const {\n    base: { animation }\n  } = useTheme();\n  const [collapsed, setCollapsed] = useState(true);\n  const [managedItems, setManagedItems] = useState<StandardTreeProps['nodes']>(() =>\n    transformItems(items, new Set())\n  );\n\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const treeRef = useRef<HTMLUListElement>(null);\n\n  const toggleCollapsed = (e: MouseEvent<HTMLButtonElement>) => {\n    e.stopPropagation();\n    if (!navOpen) {\n      setCollapsed(false);\n      openNav();\n    } else setCollapsed(state => !state);\n  };\n\n  useEscape(() => {\n    setCollapsed(true);\n    buttonRef.current?.focus();\n  }, treeRef);\n\n  useEffect(() => {\n    if (currentItemId && treeHelpers.getNode(managedItems, currentItemId)) {\n      setManagedItems(nodes => treeHelpers.expandTo(nodes, currentItemId));\n      setCollapsed(false);\n    }\n  }, [currentItemId]);\n\n  useAfterInitialEffect(() => {\n    setManagedItems(cur => {\n      const expandedIds = new Set<StandardTreeNode['id']>();\n\n      treeHelpers.forEachNode(cur, node => {\n        if (node.expanded) expandedIds.add(node.id);\n      });\n\n      return transformItems(items, expandedIds);\n    });\n  }, [items]);\n\n  return (\n    <>\n      <BareButton\n        id={id}\n        ref={buttonRef}\n        aria-expanded={!collapsed}\n        aria-controls={`${id}-tree`}\n        aria-label={label}\n        onClick={toggleCollapsed}\n      >\n        {visual}\n        <span>{label}</span>\n        {navState === 'open' && (\n          <Icon\n            name={`caret-${end}`}\n            as={StyledAppShellCaretIcon}\n            nestedListCollapsed={collapsed}\n          />\n        )}\n      </BareButton>\n      <ExpandCollapse\n        id={`${id}-tree`}\n        collapsed={collapsed || !navOpen}\n        transitionSpeed={\n          managedItems.length >= 10 ? `calc(2 * ${animation.speed})` : animation.speed\n        }\n      >\n        <StandardTree\n          ref={treeRef}\n          nodes={managedItems as StandardTreeNode[]}\n          currentNodeId={currentItemId}\n          selectableParents={false}\n          onNodeToggle={nodeId => {\n            setManagedItems(nodes =>\n              treeHelpers.mapNode(nodes, nodeId, node => {\n                return {\n                  ...node,\n                  expanded: !node.expanded\n                };\n              })\n            );\n          }}\n        />\n      </ExpandCollapse>\n    </>\n  );\n};\n\nexport const NavLinkItem: FunctionComponent<NavItemRenderProps> = ({\n  id,\n  label,\n  visual,\n  href,\n  onClick\n}) => {\n  const { navOpen } = useContext(AppShellContext);\n  const { end } = useDirection();\n  const [listItemEl, setListItemEl] = useElement<HTMLAnchorElement | HTMLButtonElement>();\n\n  return (\n    <>\n      <BareButton\n        ref={setListItemEl}\n        href={href}\n        onClick={(e: MouseEvent<HTMLAnchorElement | HTMLButtonElement>) => {\n          e.stopPropagation();\n          onClick?.(id, e);\n        }}\n        aria-label={label}\n      >\n        {visual}\n        <span>{label}</span>\n      </BareButton>\n      {!navOpen && (\n        <Tooltip target={listItemEl} placement={end} showDelay='none' hideDelay='none'>\n          {label}\n        </Tooltip>\n      )}\n    </>\n  );\n};\n\nconst NavigationList: FunctionComponent<NavProps> = ({ items, currentItemId }) => {\n  let ItemComponent: ElementType;\n\n  return (\n    <StyledNavList>\n      {items.map(item => {\n        if (item.items) {\n          ItemComponent = NavParentItem;\n        } else {\n          ItemComponent = NavLinkItem;\n        }\n\n        const ariaCurrent = item.href ? 'page' : 'true';\n        return (\n          <StyledNavListItem\n            aria-current={currentItemId === item.id ? ariaCurrent : undefined}\n            key={item.id}\n            id={item.id}\n          >\n            <ItemComponent\n              {...item}\n              visual={<Icon name={item.icon} />}\n              currentItemId={currentItemId}\n            />\n          </StyledNavListItem>\n        );\n      })}\n    </StyledNavList>\n  );\n};\n\nexport default NavigationList;\n"]}

package/lib/components/AppShell/index.d.ts

@@ -1,5 +1,5 @@
 export { default } from './AppShell';
 export { AppShellProps, NavProps, NavItemProps, NestedNavItemProps } from './AppShell.types';
-export { AppHeaderProps } from './Header/AppHeader.types';
+export { AppHeaderProps, UtilsProps } from './Header/AppHeader.types';
 export { BranchButtonProps } from './Header/BranchButton';
 //# sourceMappingURL=index.d.ts.map

package/lib/components/AppShell/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,YAAY,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAC7F,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAC1D,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,YAAY,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAC7F,OAAO,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACtE,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC"}

package/lib/components/AppShell/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/AppShell/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC","sourcesContent":["export { default } from './AppShell';\nexport { AppShellProps, NavProps, NavItemProps, NestedNavItemProps } from './AppShell.types';\nexport { AppHeaderProps } from './Header/AppHeader.types';\nexport { BranchButtonProps } from './Header/BranchButton';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/AppShell/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC","sourcesContent":["export { default } from './AppShell';\nexport { AppShellProps, NavProps, NavItemProps, NestedNavItemProps } from './AppShell.types';\nexport { AppHeaderProps, UtilsProps } from './Header/AppHeader.types';\nexport { BranchButtonProps } from './Header/BranchButton';\n"]}

package/lib/components/SiteHeader/SiteHeader.d.ts

@@ -0,0 +1,16 @@
+import { FunctionComponent } from 'react';
+import { BaseProps, NoChildrenProp } from '@pega/cosmos-react-core';
+import { AppHeaderProps, AppShellProps, UtilsProps } from '../AppShell';
+export interface SiteHeaderProps extends BaseProps, NoChildrenProp {
+    /** The content of the application. */
+    main: AppShellProps['main'];
+    /** Props related to the brand logo and its interactions. */
+    brand: AppHeaderProps['brand'];
+    /** Props to render the user avatar. */
+    avatar: UtilsProps['avatar'];
+    /** Props to render the search input. */
+    search?: UtilsProps['search'];
+}
+declare const SiteHeader: FunctionComponent<SiteHeaderProps>;
+export default SiteHeader;
+//# sourceMappingURL=SiteHeader.d.ts.map

package/lib/components/SiteHeader/SiteHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SiteHeader.d.ts","sourceRoot":"","sources":["../../../src/components/SiteHeader/SiteHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EASlB,MAAM,OAAO,CAAC;AAEf,OAAO,EAEL,SAAS,EACT,cAAc,EAQf,MAAM,yBAAyB,CAAC;AAKjC,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAaxE,MAAM,WAAW,eAAgB,SAAQ,SAAS,EAAE,cAAc;IAChE,sCAAsC;IACtC,IAAI,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IAC5B,4DAA4D;IAC5D,KAAK,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC;IAC/B,uCAAuC;IACvC,MAAM,EAAE,UAAU,CAAC,QAAQ,CAAC,CAAC;IAC7B,wCAAwC;IACxC,MAAM,CAAC,EAAE,UAAU,CAAC,QAAQ,CAAC,CAAC;CAC/B;AAkED,QAAA,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,CAoElD,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/lib/components/SiteHeader/SiteHeader.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState, useCallback, useRef, useMemo } from 'react';
+import { Flex, useBreakpoint, useI18n, Button, Icon, SearchInput, registerIcon } from '@pega/cosmos-react-core';
+import { StyledAppHeaderSearchForm } from '@pega/cosmos-react-core/lib/components/AppShell/AppHeader.styles';
+import * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';
+import * as searchIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/search.icon';
+import { StyledSiteHeader, StyledBrandButton, StyledBrandImage, StyledAvatar, StyledSiteHeaderSearch, StyledMain } from './SiteHeader.styles';
+registerIcon(timesIcon, searchIcon);
+const AppHeaderSearch = ({ showSearchButton, setShowSearchButton, ...restProps }) => {
+    const isMediumOrAbove = useBreakpoint('md');
+    const t = useI18n();
+    const searchInputRef = useCallback(node => {
+        if (!showSearchButton && node) {
+            node.focus();
+        }
+    }, [showSearchButton]);
+    const focusSearchBtn = useRef(false);
+    const searchButtonRef = useCallback(node => {
+        if (node && focusSearchBtn.current) {
+            node.focus();
+        }
+    }, []);
+    return isMediumOrAbove || !showSearchButton ? (_jsxs(Flex, { as: StyledSiteHeaderSearch, item: { shrink: 0, grow: 1 }, md: { item: { grow: 0, shrink: 1 } }, container: { justify: 'between', alignItems: 'center', gap: 1 }, children: [_jsx(StyledAppHeaderSearchForm, { role: 'search', "aria-label": t('sitewide'), onSubmit: e => e.preventDefault(), isMediumOrAbove: isMediumOrAbove, children: _jsx(SearchInput, { ...restProps, ref: searchInputRef }) }), _jsx(Button, { variant: 'simple', icon: true, onClick: () => {
+                    setShowSearchButton(true);
+                    focusSearchBtn.current = true;
+                }, label: t('collapse_search'), children: _jsx(Icon, { name: 'times' }) })] })) : (_jsx(Button, { variant: 'simple', icon: true, onClick: () => setShowSearchButton(false), ref: searchButtonRef, label: t('expand_search'), children: _jsx(Icon, { name: 'search' }) }));
+};
+const SiteHeader = ({ main, brand, avatar, search }) => {
+    const isMediumOrAbove = useBreakpoint('md');
+    const [showSearchButton, setShowSearchButton] = useState(true);
+    useEffect(() => {
+        if (isMediumOrAbove && !showSearchButton) {
+            setShowSearchButton(true);
+        }
+    }, [isMediumOrAbove]);
+    const brandContent = useMemo(() => brand.onClick || brand.href ? (_jsx(StyledBrandButton, { variant: 'simple', "aria-label": brand.label, onClick: brand.onClick, href: brand.href, children: _jsx(StyledBrandImage, { src: brand.logo, alt: brand.label }) })) : (_jsx("div", { children: _jsx(StyledBrandImage, { src: brand.logo, alt: brand.label }) })), [brand]);
+    return (_jsxs(_Fragment, { children: [_jsxs(Flex, { as: StyledSiteHeader, container: {
+                    justify: 'between',
+                    alignItems: 'center',
+                    gap: 2,
+                    pad: [0, 1]
+                }, children: [isMediumOrAbove && brandContent, showSearchButton && !isMediumOrAbove && brandContent, _jsxs(Flex, { container: {
+                            gap: 1,
+                            justify: 'center',
+                            alignItems: 'center'
+                        }, item: { grow: showSearchButton ? 0 : 1 }, md: { item: { grow: showSearchButton ? 1 : 0 } }, children: [search && (_jsx(AppHeaderSearch, { ...search, showSearchButton: showSearchButton, setShowSearchButton: setShowSearchButton })), showSearchButton && !isMediumOrAbove && _jsx(StyledAvatar, { ...avatar })] }), isMediumOrAbove && _jsx(StyledAvatar, { ...avatar })] }), _jsx(StyledMain, { children: main })] }));
+};
+export default SiteHeader;
+//# sourceMappingURL=SiteHeader.js.map

package/lib/components/SiteHeader/SiteHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SiteHeader.js","sourceRoot":"","sources":["../../../src/components/SiteHeader/SiteHeader.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  FunctionComponent,\n  useEffect,\n  useState,\n  Dispatch,\n  FC,\n  SetStateAction,\n  useCallback,\n  useRef,\n  useMemo\n} from 'react';\n\nimport {\n  SearchInputProps,\n  BaseProps,\n  NoChildrenProp,\n  Flex,\n  useBreakpoint,\n  useI18n,\n  Button,\n  Icon,\n  SearchInput,\n  registerIcon\n} from '@pega/cosmos-react-core';\nimport { StyledAppHeaderSearchForm } from '@pega/cosmos-react-core/lib/components/AppShell/AppHeader.styles';\nimport * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';\nimport * as searchIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/search.icon';\n\nimport { AppHeaderProps, AppShellProps, UtilsProps } from '../AppShell';\n\nimport {\n  StyledSiteHeader,\n  StyledBrandButton,\n  StyledBrandImage,\n  StyledAvatar,\n  StyledSiteHeaderSearch,\n  StyledMain\n} from './SiteHeader.styles';\n\nregisterIcon(timesIcon, searchIcon);\n\nexport interface SiteHeaderProps extends BaseProps, NoChildrenProp {\n  /** The content of the application. */\n  main: AppShellProps['main'];\n  /** Props related to the brand logo and its interactions. */\n  brand: AppHeaderProps['brand'];\n  /** Props to render the user avatar. */\n  avatar: UtilsProps['avatar'];\n  /** Props to render the search input. */\n  search?: UtilsProps['search'];\n}\n\nconst AppHeaderSearch: FC<\n  SearchInputProps & {\n    showSearchButton: boolean;\n    setShowSearchButton: Dispatch<SetStateAction<boolean>>;\n  }\n> = ({ showSearchButton, setShowSearchButton, ...restProps }) => {\n  const isMediumOrAbove = useBreakpoint('md');\n  const t = useI18n();\n\n  const searchInputRef = useCallback(\n    node => {\n      if (!showSearchButton && node) {\n        node.focus();\n      }\n    },\n    [showSearchButton]\n  );\n  const focusSearchBtn = useRef(false);\n  const searchButtonRef = useCallback(node => {\n    if (node && focusSearchBtn.current) {\n      node.focus();\n    }\n  }, []);\n\n  return isMediumOrAbove || !showSearchButton ? (\n    <Flex\n      as={StyledSiteHeaderSearch}\n      item={{ shrink: 0, grow: 1 }}\n      md={{ item: { grow: 0, shrink: 1 } }}\n      container={{ justify: 'between', alignItems: 'center', gap: 1 }}\n    >\n      <StyledAppHeaderSearchForm\n        role='search'\n        aria-label={t('sitewide')}\n        onSubmit={e => e.preventDefault()}\n        isMediumOrAbove={isMediumOrAbove}\n      >\n        <SearchInput {...restProps} ref={searchInputRef} />\n      </StyledAppHeaderSearchForm>\n      <Button\n        variant='simple'\n        icon\n        onClick={() => {\n          setShowSearchButton(true);\n          focusSearchBtn.current = true;\n        }}\n        label={t('collapse_search')}\n      >\n        <Icon name='times' />\n      </Button>\n    </Flex>\n  ) : (\n    <Button\n      variant='simple'\n      icon\n      onClick={() => setShowSearchButton(false)}\n      ref={searchButtonRef}\n      label={t('expand_search')}\n    >\n      <Icon name='search' />\n    </Button>\n  );\n};\n\nconst SiteHeader: FunctionComponent<SiteHeaderProps> = ({ main, brand, avatar, search }) => {\n  const isMediumOrAbove = useBreakpoint('md');\n  const [showSearchButton, setShowSearchButton] = useState(true);\n\n  useEffect(() => {\n    if (isMediumOrAbove && !showSearchButton) {\n      setShowSearchButton(true);\n    }\n  }, [isMediumOrAbove]);\n\n  const brandContent = useMemo(\n    () =>\n      brand.onClick || brand.href ? (\n        <StyledBrandButton\n          variant='simple'\n          aria-label={brand.label}\n          onClick={brand.onClick}\n          href={brand.href}\n        >\n          <StyledBrandImage src={brand.logo} alt={brand.label} />\n        </StyledBrandButton>\n      ) : (\n        <div>\n          <StyledBrandImage src={brand.logo} alt={brand.label} />\n        </div>\n      ),\n    [brand]\n  );\n\n  return (\n    <>\n      <Flex\n        as={StyledSiteHeader}\n        container={{\n          justify: 'between',\n          alignItems: 'center',\n          gap: 2,\n          pad: [0, 1]\n        }}\n      >\n        {isMediumOrAbove && brandContent}\n        {showSearchButton && !isMediumOrAbove && brandContent}\n\n        <Flex\n          container={{\n            gap: 1,\n            justify: 'center',\n            alignItems: 'center'\n          }}\n          item={{ grow: showSearchButton ? 0 : 1 }}\n          md={{ item: { grow: showSearchButton ? 1 : 0 } }}\n        >\n          {search && (\n            <AppHeaderSearch\n              {...search}\n              showSearchButton={showSearchButton}\n              setShowSearchButton={setShowSearchButton}\n            />\n          )}\n          {showSearchButton && !isMediumOrAbove && <StyledAvatar {...avatar} />}\n        </Flex>\n\n        {isMediumOrAbove && <StyledAvatar {...avatar} />}\n      </Flex>\n\n      <StyledMain>{main}</StyledMain>\n    </>\n  );\n};\n\nexport default SiteHeader;\n"]}

package/lib/components/SiteHeader/SiteHeader.styles.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { Avatar } from '@pega/cosmos-react-core';
+export declare const StyledSiteHeader: import("styled-components").StyledComponent<"header", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledBrandButton: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core/lib/components/Button/BareButton").BareButtonProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledBrandImage: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").ImageProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledSiteHeaderSearch: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledAvatar: typeof Avatar;
+export declare const StyledMain: import("styled-components").StyledComponent<"main", import("styled-components").DefaultTheme, {}, never>;
+//# sourceMappingURL=SiteHeader.styles.d.ts.map

package/lib/components/SiteHeader/SiteHeader.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SiteHeader.styles.d.ts","sourceRoot":"","sources":["../../../src/components/SiteHeader/SiteHeader.styles.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,MAAM,EAAyC,MAAM,yBAAyB,CAAC;AAIxF,eAAO,MAAM,gBAAgB,4GAe5B,CAAC;AAIF,eAAO,MAAM,iBAAiB,0QAS5B,CAAC;AAIH,eAAO,MAAM,gBAAgB,oOAG5B,CAAC;AAEF,eAAO,MAAM,sBAAsB,yGA2BlC,CAAC;AAIF,eAAO,MAAM,YAAY,EAAE,OAAO,MAGjC,CAAC;AAEF,eAAO,MAAM,UAAU,0GAYtB,CAAC"}

package/lib/components/SiteHeader/SiteHeader.styles.js

@@ -0,0 +1,66 @@
+import styled, { css } from 'styled-components';
+import { Avatar, defaultThemeProp, Image, StyledButton } from '@pega/cosmos-react-core';
+import BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';
+import { StyledAppHeaderSearchForm } from '@pega/cosmos-react-core/lib/components/AppShell/AppHeader.styles';
+export const StyledSiteHeader = styled.header(({ theme: { base: { palette, 'z-index': zIndex } } }) => {
+    return css `
+      height: 3rem;
+      border-bottom: 0.0625rem solid ${palette['border-line']};
+      background-color: ${palette['primary-background']};
+      position: sticky;
+      top: 0;
+      z-index: calc(${zIndex.drawer + 1});
+    `;
+});
+StyledSiteHeader.defaultProps = defaultThemeProp;
+export const StyledBrandButton = styled(BareButton)(({ theme }) => {
+    return css `
+    text-decoration: none;
+    min-width: 0;
+
+    &:not([disabled]):focus {
+      box-shadow: ${theme.base.shadow.focus};
+    }
+  `;
+});
+StyledBrandButton.defaultProps = defaultThemeProp;
+export const StyledBrandImage = styled(Image) `
+  height: 1.5rem;
+  max-width: 17ch;
+`;
+export const StyledSiteHeaderSearch = styled.div(({ theme: { base: { spacing, breakpoints, 'content-width': contentWidth } } }) => {
+    return css `
+      padding-block: ${spacing};
+      width: 100%;
+
+      ${StyledAppHeaderSearchForm} {
+        margin-inline-start: 0;
+        max-width: 100%;
+      }
+
+      @media (min-width: ${breakpoints.md}) {
+        ${StyledAppHeaderSearchForm} {
+          margin-inline-start: auto;
+          max-width: ${contentWidth.lg};
+        }
+
+        ${StyledButton} {
+          display: none;
+        }
+      }
+    `;
+});
+StyledSiteHeaderSearch.defaultProps = defaultThemeProp;
+export const StyledAvatar = styled(Avatar) `
+  width: 1.5rem;
+  height: 1.5rem;
+`;
+export const StyledMain = styled.main(({ theme: { base: { palette } } }) => {
+    return css `
+      position: relative;
+      min-height: calc(100vh - 3rem);
+      background-color: ${palette['app-background']};
+    `;
+});
+StyledMain.defaultProps = defaultThemeProp;
+//# sourceMappingURL=SiteHeader.styles.js.map

package/lib/components/SiteHeader/SiteHeader.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SiteHeader.styles.js","sourceRoot":"","sources":["../../../src/components/SiteHeader/SiteHeader.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,MAAM,EAAE,gBAAgB,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AACxF,OAAO,UAAU,MAAM,0DAA0D,CAAC;AAClF,OAAO,EAAE,yBAAyB,EAAE,MAAM,kEAAkE,CAAC;AAE7G,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,MAAM,CAC3C,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,EACrC,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;;uCAEyB,OAAO,CAAC,aAAa,CAAC;0BACnC,OAAO,CAAC,oBAAoB,CAAC;;;sBAGjC,MAAM,CAAC,MAAM,GAAG,CAAC;KAClC,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjD,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAChE,OAAO,GAAG,CAAA;;;;;oBAKQ,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;;GAExC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,iBAAiB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAElD,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA;;;CAG5C,CAAC;AAEF,MAAM,CAAC,MAAM,sBAAsB,GAAG,MAAM,CAAC,GAAG,CAC9C,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,YAAY,EAAE,EAC9D,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;uBACS,OAAO;;;QAGtB,yBAAyB;;;;;2BAKN,WAAW,CAAC,EAAE;UAC/B,yBAAyB;;uBAEZ,YAAY,CAAC,EAAE;;;UAG5B,YAAY;;;;KAIjB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,sBAAsB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEvD,MAAM,CAAC,MAAM,YAAY,GAAkB,MAAM,CAAC,MAAM,CAAC,CAAA;;;CAGxD,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CACnC,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,OAAO,EAAE,EAClB,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;;;0BAGY,OAAO,CAAC,gBAAgB,CAAC;KAC9C,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,UAAU,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { Avatar, defaultThemeProp, Image, StyledButton } from '@pega/cosmos-react-core';\nimport BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';\nimport { StyledAppHeaderSearchForm } from '@pega/cosmos-react-core/lib/components/AppShell/AppHeader.styles';\n\nexport const StyledSiteHeader = styled.header(\n  ({\n    theme: {\n      base: { palette, 'z-index': zIndex }\n    }\n  }) => {\n    return css`\n      height: 3rem;\n      border-bottom: 0.0625rem solid ${palette['border-line']};\n      background-color: ${palette['primary-background']};\n      position: sticky;\n      top: 0;\n      z-index: calc(${zIndex.drawer + 1});\n    `;\n  }\n);\n\nStyledSiteHeader.defaultProps = defaultThemeProp;\n\nexport const StyledBrandButton = styled(BareButton)(({ theme }) => {\n  return css`\n    text-decoration: none;\n    min-width: 0;\n\n    &:not([disabled]):focus {\n      box-shadow: ${theme.base.shadow.focus};\n    }\n  `;\n});\n\nStyledBrandButton.defaultProps = defaultThemeProp;\n\nexport const StyledBrandImage = styled(Image)`\n  height: 1.5rem;\n  max-width: 17ch;\n`;\n\nexport const StyledSiteHeaderSearch = styled.div(\n  ({\n    theme: {\n      base: { spacing, breakpoints, 'content-width': contentWidth }\n    }\n  }) => {\n    return css`\n      padding-block: ${spacing};\n      width: 100%;\n\n      ${StyledAppHeaderSearchForm} {\n        margin-inline-start: 0;\n        max-width: 100%;\n      }\n\n      @media (min-width: ${breakpoints.md}) {\n        ${StyledAppHeaderSearchForm} {\n          margin-inline-start: auto;\n          max-width: ${contentWidth.lg};\n        }\n\n        ${StyledButton} {\n          display: none;\n        }\n      }\n    `;\n  }\n);\n\nStyledSiteHeaderSearch.defaultProps = defaultThemeProp;\n\nexport const StyledAvatar: typeof Avatar = styled(Avatar)`\n  width: 1.5rem;\n  height: 1.5rem;\n`;\n\nexport const StyledMain = styled.main(\n  ({\n    theme: {\n      base: { palette }\n    }\n  }) => {\n    return css`\n      position: relative;\n      min-height: calc(100vh - 3rem);\n      background-color: ${palette['app-background']};\n    `;\n  }\n);\n\nStyledMain.defaultProps = defaultThemeProp;\n"]}

package/lib/components/SiteHeader/index.d.ts

@@ -0,0 +1,4 @@
+export { default } from './SiteHeader';
+export type { SiteHeaderProps } from './SiteHeader';
+export { StyledSiteHeader } from './SiteHeader.styles';
+//# sourceMappingURL=index.d.ts.map

package/lib/components/SiteHeader/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SiteHeader/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACpD,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC"}

package/lib/components/SiteHeader/index.js

@@ -0,0 +1,3 @@
+export { default } from './SiteHeader';
+export { StyledSiteHeader } from './SiteHeader.styles';
+//# sourceMappingURL=index.js.map

package/lib/components/SiteHeader/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/SiteHeader/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAEvC,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC","sourcesContent":["export { default } from './SiteHeader';\nexport type { SiteHeaderProps } from './SiteHeader';\nexport { StyledSiteHeader } from './SiteHeader.styles';\n"]}

package/lib/index.d.ts

@@ -14,6 +14,8 @@ export * from './components/ObjectPreview';
 export { default as ObjectSelect } from './components/ObjectSelect';
 export * from './components/ObjectSelect';
 export * from './components/PageTemplates';
+export { default as SiteHeader } from './components/SiteHeader';
+export * from './components/SiteHeader';
 export { default as SummaryCard } from './components/SummaryCard';
 export * from './components/SummaryCard';
 export { default as Workbench } from './components/Workbench';

package/lib/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,cAAc,uBAAuB,CAAC;AACtC,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,mCAAmC,CAAC;AACpF,cAAc,mCAAmC,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AAC9E,cAAc,gCAAgC,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACpE,cAAc,2BAA2B,CAAC;AAC1C,cAAc,0BAA0B,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAC9D,cAAc,wBAAwB,CAAC;AACvC,cAAc,iCAAiC,CAAC;AAChD,cAAc,4BAA4B,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACpE,cAAc,2BAA2B,CAAC;AAC1C,cAAc,4BAA4B,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAClE,cAAc,0BAA0B,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAC9D,cAAc,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,cAAc,uBAAuB,CAAC;AACtC,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,mCAAmC,CAAC;AACpF,cAAc,mCAAmC,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AAC9E,cAAc,gCAAgC,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACpE,cAAc,2BAA2B,CAAC;AAC1C,cAAc,0BAA0B,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAC9D,cAAc,wBAAwB,CAAC;AACvC,cAAc,iCAAiC,CAAC;AAChD,cAAc,4BAA4B,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACpE,cAAc,2BAA2B,CAAC;AAC1C,cAAc,4BAA4B,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAChE,cAAc,yBAAyB,CAAC;AACxC,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAClE,cAAc,0BAA0B,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAC9D,cAAc,SAAS,CAAC"}

package/lib/index.js

@@ -15,6 +15,8 @@ export * from './components/ObjectPreview';
 export { default as ObjectSelect } from './components/ObjectSelect';
 export * from './components/ObjectSelect';
 export * from './components/PageTemplates';
+export { default as SiteHeader } from './components/SiteHeader';
+export * from './components/SiteHeader';
 export { default as SummaryCard } from './components/SummaryCard';
 export * from './components/SummaryCard';
 export { default as Workbench } from './components/Workbench';

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,+DAA+D;AAC/D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,cAAc,uBAAuB,CAAC;AACtC,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,mCAAmC,CAAC;AACpF,cAAc,mCAAmC,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AAC9E,cAAc,gCAAgC,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACpE,cAAc,2BAA2B,CAAC;AAC1C,cAAc,0BAA0B,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAC9D,cAAc,wBAAwB,CAAC;AACvC,cAAc,iCAAiC,CAAC;AAChD,cAAc,4BAA4B,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACpE,cAAc,2BAA2B,CAAC;AAC1C,cAAc,4BAA4B,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAClE,cAAc,0BAA0B,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAC9D,cAAc,SAAS,CAAC","sourcesContent":["// This file is autogenerated. Any changes will be overwritten.\nexport { default as AppShell } from './components/AppShell';\nexport * from './components/AppShell';\nexport { default as DynamicContentEditor } from './components/DynamicContentEditor';\nexport * from './components/DynamicContentEditor';\nexport { default as ExpressionBuilder } from './components/ExpressionBuilder';\nexport * from './components/ExpressionBuilder';\nexport { default as FlowModeller } from './components/FlowModeller';\nexport * from './components/FlowModeller';\nexport * from './components/ItemLibrary';\nexport { default as LifeCycle } from './components/LifeCycle';\nexport * from './components/LifeCycle';\nexport * from './components/MobileBuildSummary';\nexport * from './components/ObjectPreview';\nexport { default as ObjectSelect } from './components/ObjectSelect';\nexport * from './components/ObjectSelect';\nexport * from './components/PageTemplates';\nexport { default as SummaryCard } from './components/SummaryCard';\nexport * from './components/SummaryCard';\nexport { default as Workbench } from './components/Workbench';\nexport * from './utils';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,+DAA+D;AAC/D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,cAAc,uBAAuB,CAAC;AACtC,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,mCAAmC,CAAC;AACpF,cAAc,mCAAmC,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AAC9E,cAAc,gCAAgC,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACpE,cAAc,2BAA2B,CAAC;AAC1C,cAAc,0BAA0B,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAC9D,cAAc,wBAAwB,CAAC;AACvC,cAAc,iCAAiC,CAAC;AAChD,cAAc,4BAA4B,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACpE,cAAc,2BAA2B,CAAC;AAC1C,cAAc,4BAA4B,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAChE,cAAc,yBAAyB,CAAC;AACxC,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAClE,cAAc,0BAA0B,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAC9D,cAAc,SAAS,CAAC","sourcesContent":["// This file is autogenerated. Any changes will be overwritten.\nexport { default as AppShell } from './components/AppShell';\nexport * from './components/AppShell';\nexport { default as DynamicContentEditor } from './components/DynamicContentEditor';\nexport * from './components/DynamicContentEditor';\nexport { default as ExpressionBuilder } from './components/ExpressionBuilder';\nexport * from './components/ExpressionBuilder';\nexport { default as FlowModeller } from './components/FlowModeller';\nexport * from './components/FlowModeller';\nexport * from './components/ItemLibrary';\nexport { default as LifeCycle } from './components/LifeCycle';\nexport * from './components/LifeCycle';\nexport * from './components/MobileBuildSummary';\nexport * from './components/ObjectPreview';\nexport { default as ObjectSelect } from './components/ObjectSelect';\nexport * from './components/ObjectSelect';\nexport * from './components/PageTemplates';\nexport { default as SiteHeader } from './components/SiteHeader';\nexport * from './components/SiteHeader';\nexport { default as SummaryCard } from './components/SummaryCard';\nexport * from './components/SummaryCard';\nexport { default as Workbench } from './components/Workbench';\nexport * from './utils';\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/cosmos-react-build",
-  "version": "4.0.0-dev.8.1",
+  "version": "4.0.0-dev.8.2",
   "author": "Pegasystems",
   "license": "SEE LICENSE IN LICENSE",
   "repository": {
@@ -20,8 +20,8 @@
     "build": "tsc -b"
   },
   "dependencies": {
-    "@pega/cosmos-react-core": "4.0.0-dev.8.1",
-    "@pega/cosmos-react-dnd": "4.0.0-dev.8.1",
+    "@pega/cosmos-react-core": "4.0.0-dev.8.2",
+    "@pega/cosmos-react-dnd": "4.0.0-dev.8.2",
     "@types/codemirror": "^5.60.5",
     "@types/dagre": "^0.7.46",
     "@types/react": "^16.14.24 || ^17.0.38",