@pega/cosmos-react-build 2.0.0-dev.12.1 → 2.0.0-dev.14.2

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

@@ -1 +1 @@
-{"version":3,"file":"AppHeader.d.ts","sourceRoot":"","sources":["../../../src/components/AppHeader/AppHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EACjB,GAAG,EACH,iBAAiB,EACjB,UAAU,EAMX,MAAM,OAAO,CAAC;AAEf,OAAO,EACL,WAAW,EACX,SAAS,EAET,YAAY,EAKZ,gBAAgB,EAChB,aAAa,EAEb,GAAG,EAEH,cAAc,EACf,MAAM,yBAAyB,CAAC;AAejC,MAAM,WAAW,cAAe,SAAQ,SAAS,EAAE,cAAc;IAC/D,KAAK,EAAE,UAAU,CAAC;IAClB,KAAK,CAAC,EAAE,SAAS,EAAE,CAAC;IACpB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AACD,UAAU,UAAU;IAClB,gDAAgD;IAChD,IAAI,EAAE,MAAM,CAAC;IACb,oCAAoC;IACpC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,oCAAoC;IACpC,OAAO,CAAC,EAAE,iBAAiB,CAAC,UAAU,CAAC,CAAC;CACzC;AAED,UAAU,SAAU,SAAQ,GAAG;IAC7B,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,UAAU,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,KAAK,IAAI,CAAC;CAC3F;AAED,UAAU,UAAU;IAClB,MAAM,EAAE,WAAW,CAAC;IACpB,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;CAClC;AAyED,QAAA,MAAM,SAAS,EAAE,iBAAiB,CAAC,cAAc,GAAG,YAAY,CAU/D,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"AppHeader.d.ts","sourceRoot":"","sources":["../../../src/components/AppHeader/AppHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EACjB,GAAG,EACH,iBAAiB,EACjB,UAAU,EAMX,MAAM,OAAO,CAAC;AAEf,OAAO,EACL,WAAW,EACX,SAAS,EAET,YAAY,EAKZ,gBAAgB,EAChB,aAAa,EAEb,GAAG,EAEH,cAAc,EACf,MAAM,yBAAyB,CAAC;AAejC,MAAM,WAAW,cAAe,SAAQ,SAAS,EAAE,cAAc;IAC/D,KAAK,EAAE,UAAU,CAAC;IAClB,KAAK,CAAC,EAAE,SAAS,EAAE,CAAC;IACpB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AACD,UAAU,UAAU;IAClB,gDAAgD;IAChD,IAAI,EAAE,MAAM,CAAC;IACb,oCAAoC;IACpC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,oCAAoC;IACpC,OAAO,CAAC,EAAE,iBAAiB,CAAC,UAAU,CAAC,CAAC;CACzC;AAED,UAAU,SAAU,SAAQ,GAAG;IAC7B,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,UAAU,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,KAAK,IAAI,CAAC;CAC3F;AAED,UAAU,UAAU;IAClB,MAAM,EAAE,WAAW,CAAC;IACpB,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;CAClC;AAwED,QAAA,MAAM,SAAS,EAAE,iBAAiB,CAAC,cAAc,GAAG,YAAY,CAU/D,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/lib/components/AppHeader/AppHeader.js

@@ -2,9 +2,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useCallback, useEffect, useState } from 'react';
 import { Flex, Icon, Text, useI18n, useBreakpoint, MenuButton, SearchInput } from '@pega/cosmos-react-core';
 import { StyledAppHeaderSearchForm } from '@pega/cosmos-react-core/lib/components/AppShell/AppShell.styles';
-import { StyledAppHeader, StyledTabs, StyledAppAvator, StyledUtilsContainer, StyledBrandContainer, StyledBranchContainer, StyledIcon, StyledTitle, StyledIconContainer } from './AppHeader.styles';
-const BrandContainer = ({ name }) => {
-    return (_jsxs(StyledBrandContainer, Object.assign({ container: { alignItems: 'center', justify: 'between' } }, { children: [_jsx(StyledIconContainer, { children: _jsx(StyledIcon, { name: 'pegasus', "aria-label": 'pegasus' }, void 0) }, void 0), _jsx(StyledTitle, Object.assign({ title: name, "aria-label": name }, { children: name }), void 0)] }), void 0));
+import { StyledAppHeader, StyledTabs, StyledAppAvator, StyledUtilsContainer, StyledBrandContainer, StyledBranchContainer, StyledTitle, StyledBrandButton, StyledIconContainer } from './AppHeader.styles';
+const BrandContainer = ({ name, onClick, href }) => {
+    return (_jsxs(StyledBrandContainer, Object.assign({ container: { alignItems: 'center', justify: 'between' }, onClick: onClick, href: href, forwardedAs: onClick || href ? StyledBrandButton : 'div' }, { children: [_jsx(StyledIconContainer, Object.assign({ container: { alignItems: 'center', justify: 'center' } }, { children: _jsx(Icon, { name: 'pegasus' }, void 0) }), void 0), _jsx(StyledTitle, { children: name }, void 0)] }), void 0));
 };
 const Links = ({ links = [] }) => {
     const [currentTabId, setCurrentTabId] = useState(links[0].id || '');
@@ -18,7 +18,7 @@ const Links = ({ links = [] }) => {
             setCurrentTabId(newActiveTab.id);
         }
     }, [links]);
-    return (_jsx(Flex, Object.assign({ item: { grow: 1 } }, { children: _jsx(StyledTabs, { tabs: links, currentTabId: currentTabId, onTabClick: handleTabClick }, void 0) }), void 0));
+    return _jsx(StyledTabs, { tabs: links, currentTabId: currentTabId, onTabClick: handleTabClick }, void 0);
 };
 const Utils = ({ avatar, search, branchName, actions }) => {
     const t = useI18n();

package/lib/components/AppHeader/AppHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppHeader.js","sourceRoot":"","sources":["../../../src/components/AppHeader/AppHeader.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  FunctionComponent,\n  Ref,\n  MouseEventHandler,\n  MouseEvent,\n  FC,\n  PropsWithoutRef,\n  useCallback,\n  useEffect,\n  useState\n} from 'react';\n\nimport {\n  AvatarProps,\n  BaseProps,\n  Flex,\n  ForwardProps,\n  Icon,\n  Text,\n  useI18n,\n  useBreakpoint,\n  SearchInputProps,\n  MenuItemProps,\n  MenuButton,\n  Tab,\n  SearchInput,\n  NoChildrenProp\n} from '@pega/cosmos-react-core';\nimport { StyledAppHeaderSearchForm } from '@pega/cosmos-react-core/lib/components/AppShell/AppShell.styles';\n\nimport {\n  StyledAppHeader,\n  StyledTabs,\n  StyledAppAvator,\n  StyledUtilsContainer,\n  StyledBrandContainer,\n  StyledBranchContainer,\n  StyledIcon,\n  StyledTitle,\n  StyledIconContainer\n} from './AppHeader.styles';\n\nexport interface AppHeaderProps extends BaseProps, NoChildrenProp {\n  brand: BrandProps;\n  links?: LinkProps[];\n  utils?: UtilsProps;\n  ref?: Ref<HTMLDivElement>;\n}\ninterface BrandProps {\n  /** The primary text to render in the header. */\n  name: string;\n  /** URL or DOM id to navigate to. */\n  href?: string;\n  /** Click handler for the header. */\n  onClick?: MouseEventHandler<MouseEvent>;\n}\n\ninterface LinkProps extends Tab {\n  onClick?: (id: string, event?: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;\n}\n\ninterface UtilsProps {\n  avatar: AvatarProps;\n  search?: SearchInputProps;\n  branchName?: string;\n  actions?: MenuItemProps['items'];\n}\n\nconst BrandContainer: FC<BrandProps> = ({ name }) => {\n  return (\n    <StyledBrandContainer container={{ alignItems: 'center', justify: 'between' }}>\n      <StyledIconContainer>\n        <StyledIcon name='pegasus' aria-label='pegasus' />\n      </StyledIconContainer>\n      <StyledTitle title={name} aria-label={name}>\n        {name}\n      </StyledTitle>\n    </StyledBrandContainer>\n  );\n};\n\nconst Links: FC<{ links: AppHeaderProps['links'] }> = ({ links = [] }) => {\n  const [currentTabId, setCurrentTabId] = useState(links[0].id || '');\n\n  useEffect(() => {\n    setCurrentTabId(links[0].id || '');\n  }, [links]);\n\n  const handleTabClick = useCallback(\n    (id: string, event?: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n      const newActiveTab = links.find(item => item.id === id);\n      if (newActiveTab) {\n        newActiveTab.onClick?.(id, event);\n        setCurrentTabId(newActiveTab.id);\n      }\n    },\n    [links]\n  );\n\n  return (\n    <Flex item={{ grow: 1 }}>\n      <StyledTabs tabs={links} currentTabId={currentTabId} onTabClick={handleTabClick} />\n    </Flex>\n  );\n};\n\nconst Utils: FC<UtilsProps> = ({ avatar, search, branchName, actions }: UtilsProps) => {\n  const t = useI18n();\n  const isMediumOrAbove = useBreakpoint('md');\n\n  return (\n    <StyledUtilsContainer\n      isMediumOrAbove={isMediumOrAbove}\n      container={{ alignItems: 'center', justify: 'end' }}\n    >\n      {search && (\n        <StyledAppHeaderSearchForm\n          role='search'\n          aria-label={search.searchInputAriaLabel}\n          onSubmit={e => e.preventDefault()}\n          isMediumOrAbove={isMediumOrAbove}\n        >\n          <SearchInput {...search} />\n        </StyledAppHeaderSearchForm>\n      )}\n      {branchName && (\n        <StyledBranchContainer container={{ alignItems: 'center', justify: 'between' }}>\n          <Icon name='nodes-right' />\n          <Text aria-label={branchName}>{branchName}</Text>\n        </StyledBranchContainer>\n      )}\n      {actions && actions.length > 0 && (\n        <MenuButton variant='link' menu={{ items: actions }} text={t('actions')} />\n      )}\n      <StyledAppAvator {...avatar} />\n    </StyledUtilsContainer>\n  );\n};\n\nconst AppHeader: FunctionComponent<AppHeaderProps & ForwardProps> = forwardRef(\n  ({ brand, utils, links }: PropsWithoutRef<AppHeaderProps>, ref: AppHeaderProps['ref']) => {\n    return (\n      <Flex as={StyledAppHeader} container={{ justify: 'between' }} ref={ref}>\n        <BrandContainer {...brand} />\n        {links && links.length > 0 && <Links links={links} />}\n        {utils && <Utils {...utils} />}\n      </Flex>\n    );\n  }\n);\n\nexport default AppHeader;\n"]}
+{"version":3,"file":"AppHeader.js","sourceRoot":"","sources":["../../../src/components/AppHeader/AppHeader.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  FunctionComponent,\n  Ref,\n  MouseEventHandler,\n  MouseEvent,\n  FC,\n  PropsWithoutRef,\n  useCallback,\n  useEffect,\n  useState\n} from 'react';\n\nimport {\n  AvatarProps,\n  BaseProps,\n  Flex,\n  ForwardProps,\n  Icon,\n  Text,\n  useI18n,\n  useBreakpoint,\n  SearchInputProps,\n  MenuItemProps,\n  MenuButton,\n  Tab,\n  SearchInput,\n  NoChildrenProp\n} from '@pega/cosmos-react-core';\nimport { StyledAppHeaderSearchForm } from '@pega/cosmos-react-core/lib/components/AppShell/AppShell.styles';\n\nimport {\n  StyledAppHeader,\n  StyledTabs,\n  StyledAppAvator,\n  StyledUtilsContainer,\n  StyledBrandContainer,\n  StyledBranchContainer,\n  StyledTitle,\n  StyledBrandButton,\n  StyledIconContainer\n} from './AppHeader.styles';\n\nexport interface AppHeaderProps extends BaseProps, NoChildrenProp {\n  brand: BrandProps;\n  links?: LinkProps[];\n  utils?: UtilsProps;\n  ref?: Ref<HTMLDivElement>;\n}\ninterface BrandProps {\n  /** The primary text to render in the header. */\n  name: string;\n  /** URL or DOM id to navigate to. */\n  href?: string;\n  /** Click handler for the header. */\n  onClick?: MouseEventHandler<MouseEvent>;\n}\n\ninterface LinkProps extends Tab {\n  onClick?: (id: string, event?: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;\n}\n\ninterface UtilsProps {\n  avatar: AvatarProps;\n  search?: SearchInputProps;\n  branchName?: string;\n  actions?: MenuItemProps['items'];\n}\n\nconst BrandContainer: FC<BrandProps> = ({ name, onClick, href }) => {\n  return (\n    <StyledBrandContainer\n      container={{ alignItems: 'center', justify: 'between' }}\n      onClick={onClick}\n      href={href}\n      forwardedAs={onClick || href ? StyledBrandButton : 'div'}\n    >\n      <StyledIconContainer container={{ alignItems: 'center', justify: 'center' }}>\n        <Icon name='pegasus' />\n      </StyledIconContainer>\n      <StyledTitle>{name}</StyledTitle>\n    </StyledBrandContainer>\n  );\n};\n\nconst Links: FC<{ links: AppHeaderProps['links'] }> = ({ links = [] }) => {\n  const [currentTabId, setCurrentTabId] = useState(links[0].id || '');\n\n  useEffect(() => {\n    setCurrentTabId(links[0].id || '');\n  }, [links]);\n\n  const handleTabClick = useCallback(\n    (id: string, event?: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n      const newActiveTab = links.find(item => item.id === id);\n      if (newActiveTab) {\n        newActiveTab.onClick?.(id, event);\n        setCurrentTabId(newActiveTab.id);\n      }\n    },\n    [links]\n  );\n\n  return <StyledTabs tabs={links} currentTabId={currentTabId} onTabClick={handleTabClick} />;\n};\n\nconst Utils: FC<UtilsProps> = ({ avatar, search, branchName, actions }: UtilsProps) => {\n  const t = useI18n();\n  const isMediumOrAbove = useBreakpoint('md');\n\n  return (\n    <StyledUtilsContainer\n      isMediumOrAbove={isMediumOrAbove}\n      container={{ alignItems: 'center', justify: 'end' }}\n    >\n      {search && (\n        <StyledAppHeaderSearchForm\n          role='search'\n          aria-label={search.searchInputAriaLabel}\n          onSubmit={e => e.preventDefault()}\n          isMediumOrAbove={isMediumOrAbove}\n        >\n          <SearchInput {...search} />\n        </StyledAppHeaderSearchForm>\n      )}\n      {branchName && (\n        <StyledBranchContainer container={{ alignItems: 'center', justify: 'between' }}>\n          <Icon name='nodes-right' />\n          <Text aria-label={branchName}>{branchName}</Text>\n        </StyledBranchContainer>\n      )}\n      {actions && actions.length > 0 && (\n        <MenuButton variant='link' menu={{ items: actions }} text={t('actions')} />\n      )}\n      <StyledAppAvator {...avatar} />\n    </StyledUtilsContainer>\n  );\n};\n\nconst AppHeader: FunctionComponent<AppHeaderProps & ForwardProps> = forwardRef(\n  ({ brand, utils, links }: PropsWithoutRef<AppHeaderProps>, ref: AppHeaderProps['ref']) => {\n    return (\n      <Flex as={StyledAppHeader} container={{ justify: 'between' }} ref={ref}>\n        <BrandContainer {...brand} />\n        {links && links.length > 0 && <Links links={links} />}\n        {utils && <Utils {...utils} />}\n      </Flex>\n    );\n  }\n);\n\nexport default AppHeader;\n"]}

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

@@ -1,9 +1,9 @@
-import { Avatar, Flex, Icon, Text, Tabs } from '@pega/cosmos-react-core';
+import { Avatar, Flex, Text, Tabs } from '@pega/cosmos-react-core';
 export declare const StyledAppHeader: import("styled-components").StyledComponent<"header", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledTitle: typeof Text;
 export declare const StyledBrandContainer: typeof Flex;
 export declare const StyledIconContainer: typeof Flex;
-export declare const StyledIcon: typeof Icon;
+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 StyledTabs: typeof Tabs;
 export declare const StyledUtilsContainer: typeof Flex;
 export declare const StyledBranchContainer: typeof Flex;

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

@@ -1 +1 @@
-{"version":3,"file":"AppHeader.styles.d.ts","sourceRoot":"","sources":["../../../src/components/AppHeader/AppHeader.styles.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,EAAoB,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAE3F,eAAO,MAAM,eAAe,4GAQ1B,CAAC;AAIH,eAAO,MAAM,WAAW,EAAE,OAAO,IAU/B,CAAC;AAIH,eAAO,MAAM,oBAAoB,EAAE,OAAO,IAIxC,CAAC;AAIH,eAAO,MAAM,mBAAmB,EAAE,OAAO,IAQvC,CAAC;AAIH,eAAO,MAAM,UAAU,EAAE,OAAO,IAU9B,CAAC;AAIH,eAAO,MAAM,UAAU,EAAE,OAAO,IAqB9B,CAAC;AAIH,eAAO,MAAM,oBAAoB,EAAE,OAAO,IAazC,CAAC;AAIF,eAAO,MAAM,qBAAqB,EAAE,OAAO,IAYzC,CAAC;AAIH,eAAO,MAAM,eAAe,EAAE,OAAO,MAGpC,CAAC"}
+{"version":3,"file":"AppHeader.styles.d.ts","sourceRoot":"","sources":["../../../src/components/AppHeader/AppHeader.styles.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,EAAoB,IAAI,EAAc,IAAI,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAGjG,eAAO,MAAM,eAAe,4GAQ1B,CAAC;AAIH,eAAO,MAAM,WAAW,EAAE,OAAO,IAU/B,CAAC;AAIH,eAAO,MAAM,oBAAoB,EAAE,OAAO,IAKxC,CAAC;AAIH,eAAO,MAAM,mBAAmB,EAAE,OAAO,IAcvC,CAAC;AAIH,eAAO,MAAM,iBAAiB,0QAM5B,CAAC;AAIH,eAAO,MAAM,UAAU,EAAE,OAAO,IAqB9B,CAAC;AAIH,eAAO,MAAM,oBAAoB,EAAE,OAAO,IAiBzC,CAAC;AAIF,eAAO,MAAM,qBAAqB,EAAE,OAAO,IAYzC,CAAC;AAIH,eAAO,MAAM,eAAe,EAAE,OAAO,MAGpC,CAAC"}

package/lib/components/AppHeader/AppHeader.styles.js

@@ -1,10 +1,11 @@
 import styled, { css } from 'styled-components';
-import { Avatar, defaultThemeProp, Flex, Icon, Text, Tabs } from '@pega/cosmos-react-core';
+import { Avatar, defaultThemeProp, Flex, StyledIcon, Text, Tabs } from '@pega/cosmos-react-core';
+import BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';
 export const StyledAppHeader = styled.header(({ theme }) => {
     return css `
     height: 3rem;
     padding: 0 calc(2 * ${theme.base.spacing});
-    border-bottom: 0.0625rem solid ${theme.base.colors.gray.medium};
+    border-bottom: 0.0625rem solid ${theme.base.colors.gray.light};
     box-shadow: ${theme.base.shadow.low};
     background-color: ${theme.base.palette['primary-background']};
   `;
@@ -25,6 +26,7 @@ StyledTitle.defaultProps = defaultThemeProp;
 export const StyledBrandContainer = styled(Flex)(({ theme }) => {
     return css `
     padding-block: ${theme.base.spacing};
+    text-decoration: none;
   `;
 });
 StyledBrandContainer.defaultProps = defaultThemeProp;
@@ -35,29 +37,31 @@ export const StyledIconContainer = styled(Flex)(({ theme }) => {
     height: 2rem;
     position: relative;
     border-radius: calc(0.5 * ${theme.base['border-radius']});
+
+    ${StyledIcon} {
+      width: 1.25rem;
+      height: 1.25rem;
+      color: ${theme.base.palette.light};
+    }
   `;
 });
 StyledIconContainer.defaultProps = defaultThemeProp;
-export const StyledIcon = styled(Icon)(({ theme }) => {
+export const StyledBrandButton = styled(BareButton)(({ theme }) => {
     return css `
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: 1.25rem;
-    height: 1.25rem;
-    color: ${theme.base.palette.light};
+    &:not([disabled]):focus {
+      box-shadow: ${theme.base.shadow.focus};
+    }
   `;
 });
-StyledIcon.defaultProps = defaultThemeProp;
+StyledBrandButton.defaultProps = defaultThemeProp;
 export const StyledTabs = styled(Tabs)(({ theme }) => {
     return css `
     margin-inline-start: calc(2 * ${theme.base.spacing});
     margin-inline-end: calc(2 * ${theme.base.spacing});
-    height: 100%;
     border: none;
+    min-height: 3rem;
     button {
-      height: 100%;
+      height: auto;
       span:first-of-type {
         text-transform: none;
       }
@@ -75,6 +79,7 @@ export const StyledTabs = styled(Tabs)(({ theme }) => {
 StyledTabs.defaultProps = defaultThemeProp;
 export const StyledUtilsContainer = styled(Flex)(({ theme, isMediumOrAbove }) => {
     return css `
+      margin-inline-start: auto;
       padding-block: ${theme.base.spacing};
       width: auto;
       min-width: ${isMediumOrAbove ? '32%' : 'auto'};
@@ -83,6 +88,9 @@ export const StyledUtilsContainer = styled(Flex)(({ theme, isMediumOrAbove }) =>
         margin-inline-start: ${theme.base.spacing};
         margin-inline-end: ${theme.base.spacing};
       }
+      & > div:last-child {
+        margin-inline-end: 0;
+      }
     `;
 });
 StyledUtilsContainer.defaultProps = defaultThemeProp;

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

@@ -1 +1 @@
-{"version":3,"file":"AppHeader.styles.js","sourceRoot":"","sources":["../../../src/components/AppHeader/AppHeader.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,MAAM,EAAE,gBAAgB,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAE3F,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACzD,OAAO,GAAG,CAAA;;0BAEc,KAAK,CAAC,IAAI,CAAC,OAAO;qCACP,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM;kBAChD,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG;wBACf,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC;GAC7D,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEhD,MAAM,CAAC,MAAM,WAAW,GAAgB,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACjE,OAAO,GAAG,CAAA;;;;;aAKC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,kBAAkB,CAAC;mBAChC,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,IAAI;uCACV,KAAK,CAAC,IAAI,CAAC,OAAO;GACtD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,WAAW,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE5C,MAAM,CAAC,MAAM,oBAAoB,GAAgB,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC1E,OAAO,GAAG,CAAA;qBACS,KAAK,CAAC,IAAI,CAAC,OAAO;GACpC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,oBAAoB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAErD,MAAM,CAAC,MAAM,mBAAmB,GAAgB,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACzE,OAAO,GAAG,CAAA;wBACY,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC;;;;gCAI3B,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;GACxD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,mBAAmB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEpD,MAAM,CAAC,MAAM,UAAU,GAAgB,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAChE,OAAO,GAAG,CAAA;;;;;;;aAOC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK;GAClC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,UAAU,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE3C,MAAM,CAAC,MAAM,UAAU,GAAgB,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAChE,OAAO,GAAG,CAAA;oCACwB,KAAK,CAAC,IAAI,CAAC,OAAO;kCACpB,KAAK,CAAC,IAAI,CAAC,OAAO;;;;;;;;;;qBAU/B,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,WAAW,CAAC;;;;;;;GAOxD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,UAAU,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE3C,MAAM,CAAC,MAAM,oBAAoB,GAAgB,MAAM,CAAC,IAAI,CAAC,CAC3D,CAAC,EAAE,KAAK,EAAE,eAAe,EAAE,EAAE,EAAE;IAC7B,OAAO,GAAG,CAAA;uBACS,KAAK,CAAC,IAAI,CAAC,OAAO;;mBAEtB,eAAe,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM;;;+BAGpB,KAAK,CAAC,IAAI,CAAC,OAAO;6BACpB,KAAK,CAAC,IAAI,CAAC,OAAO;;KAE1C,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,oBAAoB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAErD,MAAM,CAAC,MAAM,qBAAqB,GAAgB,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC3E,OAAO,GAAG,CAAA;;;;;;qBAMS,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,WAAW,CAAC;yCAClB,KAAK,CAAC,IAAI,CAAC,OAAO;uCACpB,KAAK,CAAC,IAAI,CAAC,OAAO;;GAEtD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,qBAAqB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEtD,MAAM,CAAC,MAAM,eAAe,GAAkB,MAAM,CAAC,MAAM,CAAC,CAAA;;;CAG3D,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { Avatar, defaultThemeProp, Flex, Icon, Text, Tabs } from '@pega/cosmos-react-core';\n\nexport const StyledAppHeader = styled.header(({ theme }) => {\n  return css`\n    height: 3rem;\n    padding: 0 calc(2 * ${theme.base.spacing});\n    border-bottom: 0.0625rem solid ${theme.base.colors.gray.medium};\n    box-shadow: ${theme.base.shadow.low};\n    background-color: ${theme.base.palette['primary-background']};\n  `;\n});\n\nStyledAppHeader.defaultProps = defaultThemeProp;\n\nexport const StyledTitle: typeof Text = styled(Text)(({ theme }) => {\n  return css`\n    max-width: 25ch;\n    text-overflow: ellipsis;\n    overflow: hidden;\n    white-space: nowrap;\n    color: ${theme.base.palette['foreground-color']};\n    font-weight: ${theme.base['font-weight'].bold};\n    margin-inline-start: calc(0.75 * ${theme.base.spacing});\n  `;\n});\n\nStyledTitle.defaultProps = defaultThemeProp;\n\nexport const StyledBrandContainer: typeof Flex = styled(Flex)(({ theme }) => {\n  return css`\n    padding-block: ${theme.base.spacing};\n  `;\n});\n\nStyledBrandContainer.defaultProps = defaultThemeProp;\n\nexport const StyledIconContainer: typeof Flex = styled(Flex)(({ theme }) => {\n  return css`\n    background-color: ${theme.base.palette['brand-primary']};\n    width: 2rem;\n    height: 2rem;\n    position: relative;\n    border-radius: calc(0.5 * ${theme.base['border-radius']});\n  `;\n});\n\nStyledIconContainer.defaultProps = defaultThemeProp;\n\nexport const StyledIcon: typeof Icon = styled(Icon)(({ theme }) => {\n  return css`\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    width: 1.25rem;\n    height: 1.25rem;\n    color: ${theme.base.palette.light};\n  `;\n});\n\nStyledIcon.defaultProps = defaultThemeProp;\n\nexport const StyledTabs: typeof Tabs = styled(Tabs)(({ theme }) => {\n  return css`\n    margin-inline-start: calc(2 * ${theme.base.spacing});\n    margin-inline-end: calc(2 * ${theme.base.spacing});\n    height: 100%;\n    border: none;\n    button {\n      height: 100%;\n      span:first-of-type {\n        text-transform: none;\n      }\n    }\n    button[aria-selected='false'] > span {\n      font-weight: ${theme.base['font-weight']['semi-bold']};\n    }\n    button:hover,\n    button:focus,\n    button:active {\n      box-shadow: none;\n    }\n  `;\n});\n\nStyledTabs.defaultProps = defaultThemeProp;\n\nexport const StyledUtilsContainer: typeof Flex = styled(Flex)<{ isMediumOrAbove: boolean }>(\n  ({ theme, isMediumOrAbove }) => {\n    return css`\n      padding-block: ${theme.base.spacing};\n      width: auto;\n      min-width: ${isMediumOrAbove ? '32%' : 'auto'};\n      & > div,\n      & > span {\n        margin-inline-start: ${theme.base.spacing};\n        margin-inline-end: ${theme.base.spacing};\n      }\n    `;\n  }\n);\n\nStyledUtilsContainer.defaultProps = defaultThemeProp;\n\nexport const StyledBranchContainer: typeof Flex = styled(Flex)(({ theme }) => {\n  return css`\n    span {\n      white-space: nowrap;\n      max-width: 25ch;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      font-weight: ${theme.base['font-weight']['semi-bold']};\n      margin-inline-start: calc(0.75 * ${theme.base.spacing});\n      margin-inline-end: calc(0.75 * ${theme.base.spacing});\n    }\n  `;\n});\n\nStyledBranchContainer.defaultProps = defaultThemeProp;\n\nexport const StyledAppAvator: typeof Avatar = styled(Avatar)`\n  width: 1.5rem;\n  height: 1.5rem;\n`;\n"]}
+{"version":3,"file":"AppHeader.styles.js","sourceRoot":"","sources":["../../../src/components/AppHeader/AppHeader.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { Avatar, defaultThemeProp, Flex, StyledIcon, Text, Tabs } from '@pega/cosmos-react-core';\nimport BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';\n\nexport const StyledAppHeader = styled.header(({ theme }) => {\n  return css`\n    height: 3rem;\n    padding: 0 calc(2 * ${theme.base.spacing});\n    border-bottom: 0.0625rem solid ${theme.base.colors.gray.light};\n    box-shadow: ${theme.base.shadow.low};\n    background-color: ${theme.base.palette['primary-background']};\n  `;\n});\n\nStyledAppHeader.defaultProps = defaultThemeProp;\n\nexport const StyledTitle: typeof Text = styled(Text)(({ theme }) => {\n  return css`\n    max-width: 25ch;\n    text-overflow: ellipsis;\n    overflow: hidden;\n    white-space: nowrap;\n    color: ${theme.base.palette['foreground-color']};\n    font-weight: ${theme.base['font-weight'].bold};\n    margin-inline-start: calc(0.75 * ${theme.base.spacing});\n  `;\n});\n\nStyledTitle.defaultProps = defaultThemeProp;\n\nexport const StyledBrandContainer: typeof Flex = styled(Flex)(({ theme }) => {\n  return css`\n    padding-block: ${theme.base.spacing};\n    text-decoration: none;\n  `;\n});\n\nStyledBrandContainer.defaultProps = defaultThemeProp;\n\nexport const StyledIconContainer: typeof Flex = styled(Flex)(({ theme }) => {\n  return css`\n    background-color: ${theme.base.palette['brand-primary']};\n    width: 2rem;\n    height: 2rem;\n    position: relative;\n    border-radius: calc(0.5 * ${theme.base['border-radius']});\n\n    ${StyledIcon} {\n      width: 1.25rem;\n      height: 1.25rem;\n      color: ${theme.base.palette.light};\n    }\n  `;\n});\n\nStyledIconContainer.defaultProps = defaultThemeProp;\n\nexport const StyledBrandButton = styled(BareButton)(({ theme }) => {\n  return css`\n    &:not([disabled]):focus {\n      box-shadow: ${theme.base.shadow.focus};\n    }\n  `;\n});\n\nStyledBrandButton.defaultProps = defaultThemeProp;\n\nexport const StyledTabs: typeof Tabs = styled(Tabs)(({ theme }) => {\n  return css`\n    margin-inline-start: calc(2 * ${theme.base.spacing});\n    margin-inline-end: calc(2 * ${theme.base.spacing});\n    border: none;\n    min-height: 3rem;\n    button {\n      height: auto;\n      span:first-of-type {\n        text-transform: none;\n      }\n    }\n    button[aria-selected='false'] > span {\n      font-weight: ${theme.base['font-weight']['semi-bold']};\n    }\n    button:hover,\n    button:focus,\n    button:active {\n      box-shadow: none;\n    }\n  `;\n});\n\nStyledTabs.defaultProps = defaultThemeProp;\n\nexport const StyledUtilsContainer: typeof Flex = styled(Flex)<{ isMediumOrAbove: boolean }>(\n  ({ theme, isMediumOrAbove }) => {\n    return css`\n      margin-inline-start: auto;\n      padding-block: ${theme.base.spacing};\n      width: auto;\n      min-width: ${isMediumOrAbove ? '32%' : 'auto'};\n      & > div,\n      & > span {\n        margin-inline-start: ${theme.base.spacing};\n        margin-inline-end: ${theme.base.spacing};\n      }\n      & > div:last-child {\n        margin-inline-end: 0;\n      }\n    `;\n  }\n);\n\nStyledUtilsContainer.defaultProps = defaultThemeProp;\n\nexport const StyledBranchContainer: typeof Flex = styled(Flex)(({ theme }) => {\n  return css`\n    span {\n      white-space: nowrap;\n      max-width: 25ch;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      font-weight: ${theme.base['font-weight']['semi-bold']};\n      margin-inline-start: calc(0.75 * ${theme.base.spacing});\n      margin-inline-end: calc(0.75 * ${theme.base.spacing});\n    }\n  `;\n});\n\nStyledBranchContainer.defaultProps = defaultThemeProp;\n\nexport const StyledAppAvator: typeof Avatar = styled(Avatar)`\n  width: 1.5rem;\n  height: 1.5rem;\n`;\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"AppShell.styles.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.styles.ts"],"names":[],"mappings":"AA2BA,eAAO,MAAM,eAAe,qOA+B1B,CAAC;AAIH,eAAO,MAAM,YAAY,yGAUvB,CAAC;AAIH,eAAO,MAAM,kBAAkB,yGAI7B,CAAC;AAIH,eAAO,MAAM,mBAAmB,mOAI9B,CAAC;AAIH,eAAO,MAAM,cAAc,mOAQzB,CAAC;AAIH,eAAO,MAAM,WAAW;iBAA6B,OAAO;SA8B1D,CAAC;AAIH,eAAO,MAAM,cAAc,wGAsBzB,CAAC;AAIH,eAAO,MAAM,gBAAgB,yGAO3B,CAAC;AAIH,eAAO,MAAM,gBAAgB,yGAmB3B,CAAC;AAIH,eAAO,MAAM,UAAU,0GAQrB,CAAC;AAIH,eAAO,MAAM,mBAAmB,yGAO9B,CAAC;AAIH,eAAO,MAAM,qBAAqB;aAAyB,MAAM;SAW/D,CAAC;AAIH,eAAO,MAAM,uBAAuB,qOAWlC,CAAC;AAIH,eAAO,MAAM,cAAc,yGAUzB,CAAC;AAIH,eAAO,MAAM,SAAS,yGAkHpB,CAAC"}
+{"version":3,"file":"AppShell.styles.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.styles.ts"],"names":[],"mappings":"AA2BA,eAAO,MAAM,eAAe,qOA+B1B,CAAC;AAIH,eAAO,MAAM,YAAY,yGAUvB,CAAC;AAIH,eAAO,MAAM,kBAAkB,yGAI7B,CAAC;AAIH,eAAO,MAAM,mBAAmB,mOAI9B,CAAC;AAIH,eAAO,MAAM,cAAc,mOAOzB,CAAC;AAIH,eAAO,MAAM,WAAW;iBAA6B,OAAO;SA8B1D,CAAC;AAIH,eAAO,MAAM,cAAc,wGAsBzB,CAAC;AAIH,eAAO,MAAM,gBAAgB,yGAO3B,CAAC;AAIH,eAAO,MAAM,gBAAgB,yGAmB3B,CAAC;AAIH,eAAO,MAAM,UAAU,0GAQrB,CAAC;AAIH,eAAO,MAAM,mBAAmB,yGAO9B,CAAC;AAIH,eAAO,MAAM,qBAAqB;aAAyB,MAAM;SAY/D,CAAC;AAIH,eAAO,MAAM,uBAAuB,qOAYlC,CAAC;AAIH,eAAO,MAAM,cAAc,yGAUzB,CAAC;AAIH,eAAO,MAAM,SAAS,yGAkHpB,CAAC"}

package/lib/components/AppShell/AppShell.styles.js

@@ -62,7 +62,6 @@ export const StyledNavHeaderIcon = styled(Icon)(({ theme }) => {
 StyledNavHeaderIcon.defaultProps = defaultThemeProp;
 export const StyledNavTitle = styled(Text)(({ theme }) => {
     return css `
-    margin-inline-start: ${theme.base.spacing};
     color: ${theme.base.colors.white};
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -84,7 +83,7 @@ export const StyledUtils = styled.div(({ theme, showDevMode }) => {
         height: calc(2rem + 4 * ${theme.base.spacing});
         padding: calc(2 * ${theme.base.spacing});
         text-transform: capitalize;
-        color: ${theme.base.colors.gray.medium};
+        color: ${theme.base.colors.gray.light};
         font-weight: ${theme.base['font-weight'].bold};
 
         &::before,
@@ -175,6 +174,7 @@ export const StyledNavHeaderVisual = styled.div(({ theme, bgColor }) => {
     min-height: 2rem;
     border-radius: 0.4rem;
     background-color: ${bgColor};
+    margin-inline-end: ${theme.base.spacing};
     color: ${theme.base.colors.white};
     & svg {
       color: ${theme.base.colors.white};
@@ -184,6 +184,7 @@ export const StyledNavHeaderVisual = styled.div(({ theme, bgColor }) => {
 StyledNavHeaderVisual.defaultProps = defaultThemeProp;
 export const StyledDrawerCloseButton = styled(Button)(({ theme }) => {
     return css `
+    margin-inline-end: ${theme.base.spacing};
     min-width: 1.5rem;
     min-height: 1.5rem;
     color: ${theme.base.colors.white};

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

@@ -1 +1 @@
-{"version":3,"file":"AppShell.styles.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { lighten, hideVisually } from 'polished';\nimport { useContext } from 'react';\n\nimport {\n  Icon,\n  Text,\n  tryCatch,\n  defaultThemeProp,\n  Button,\n  useDirection,\n  StyledIcon,\n  StyledTooltip\n} from '@pega/cosmos-react-core';\nimport { StyledSwitch, SwitchLabel } from '@pega/cosmos-react-core/lib/components/Switch/Switch';\nimport { StyledBareButton } from '@pega/cosmos-react-core/lib/components/Button/BareButton';\nimport {\n  StyledNodeIcon,\n  StyledNodeText,\n  StyledNodeInteraction,\n  StyledStandardTree\n} from '@pega/cosmos-react-core/lib/components/Tree/StandardTree.styles';\n\nimport AppShellContext from './AppShellContext';\n\nconst hoverBg = 'rgba(0, 0, 0, 0.4)';\n\nexport const StyledNavToggle = styled(Button)(({ theme }) => {\n  const { ltr } = useDirection();\n\n  return css`\n    position: absolute;\n    z-index: 1;\n    inset-block-start: calc(2 * ${theme.base.spacing});\n    inset-inline-end: 0;\n    min-width: 1.5rem;\n    min-height: 1.5rem;\n    border: none;\n    color: ${theme.base.palette['foreground-color']};\n    box-shadow: ${theme.base.shadow.low};\n    transition-property: background-color;\n    transform: translateX(${ltr ? '50%' : '-50%'});\n\n    ${StyledIcon} {\n      width: 1.5rem;\n      height: 1.5rem;\n    }\n\n    &[aria-expanded='${ltr ? 'true' : 'false'}'] {\n      ${StyledIcon} {\n        transform: rotateY(180deg);\n      }\n    }\n\n    & + ${StyledTooltip} {\n      z-index: calc(${theme.base['z-index'].drawer} + 1);\n    }\n  `;\n});\n\nStyledNavToggle.defaultProps = defaultThemeProp;\n\nexport const StyledHeader = styled.div(({ theme }) => {\n  const borderColor = tryCatch(() =>\n    lighten(0.1, theme.components['app-shell'].nav['background-color'])\n  );\n\n  return css`\n    width: 100%;\n    min-height: 4rem;\n    border-bottom: 0.0625rem solid ${borderColor};\n  `;\n});\n\nStyledHeader.defaultProps = defaultThemeProp;\n\nexport const StyledDrawerHeader = styled(StyledHeader)(({ theme }) => {\n  return css`\n    padding-inline-start: ${theme.base.spacing};\n  `;\n});\n\nStyledDrawerHeader.defaultProps = defaultThemeProp;\n\nexport const StyledNavHeaderIcon = styled(Icon)(({ theme }) => {\n  return css`\n    color: ${theme.base.colors.white};\n  `;\n});\n\nStyledNavHeaderIcon.defaultProps = defaultThemeProp;\n\nexport const StyledNavTitle = styled(Text)(({ theme }) => {\n  return css`\n    margin-inline-start: ${theme.base.spacing};\n    color: ${theme.base.colors.white};\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    overflow-x: hidden;\n  `;\n});\n\nStyledNavTitle.defaultProps = defaultThemeProp;\n\nexport const StyledUtils = styled.div<{ showDevMode: boolean }>(({ theme, showDevMode }) => {\n  const borderColor = tryCatch(() =>\n    lighten(0.1, theme.components['app-shell'].nav['background-color'])\n  );\n\n  return css`\n    padding-bottom: calc(${showDevMode ? 2 : 0} * ${theme.base.spacing});\n    border-top: 0.0625rem solid ${borderColor};\n    ${StyledSwitch} {\n      &:hover {\n        background-color: ${hoverBg};\n      }\n\n      ${SwitchLabel} {\n        height: calc(2rem + 4 * ${theme.base.spacing});\n        padding: calc(2 * ${theme.base.spacing});\n        text-transform: capitalize;\n        color: ${theme.base.colors.gray.medium};\n        font-weight: ${theme.base['font-weight'].bold};\n\n        &::before,\n        &::after {\n          margin-inline-end: calc(2 * ${theme.base.spacing});\n        }\n      }\n    }\n    & > ul {\n      list-style: none;\n    }\n  `;\n});\n\nStyledUtils.defaultProps = defaultThemeProp;\n\nexport const StyledUtilItem = styled.li(({ theme }) => {\n  return css`\n    color: ${theme.base.colors.white};\n\n    &:hover {\n      background-color: rgba(0, 0, 0, 0.4);\n    }\n\n    &:focus,\n    &:focus-within {\n      color: ${theme.base.colors.blue.light};\n    }\n\n    ${StyledBareButton} {\n      font-weight: ${theme.base['font-weight']['semi-bold']};\n      color: ${theme.base.colors.white};\n      width: 100%;\n      height: 100%;\n      text-align: start;\n      padding: ${theme.base.spacing} calc(2 * ${theme.base.spacing});\n    }\n  `;\n});\n\nStyledUtilItem.defaultProps = defaultThemeProp;\n\nexport const StyledScrollWrap = styled.div(() => {\n  const { drawerOpen } = useContext(AppShellContext);\n\n  return css`\n    height: ${drawerOpen ? 'calc(100% - 4rem)' : '100%'};\n    overflow-y: auto;\n  `;\n});\n\nStyledScrollWrap.defaultProps = defaultThemeProp;\n\nexport const StyledNavContent = styled.div(({ theme }) => {\n  const { navExpanded, navState } = useContext(AppShellContext);\n\n  return css`\n    width: 14rem;\n    height: 100%;\n    opacity: 0;\n    transition: opacity ${theme.base.animation.speed} ${theme.base.animation.timing.ease};\n\n    ${navState === 'collapsed' &&\n    css`\n      display: none;\n    `}\n\n    ${navExpanded &&\n    css`\n      opacity: 1;\n    `}\n  `;\n});\n\nStyledNavContent.defaultProps = defaultThemeProp;\n\nexport const StyledMain = styled.main(({ theme }) => {\n  return css`\n    position: relative;\n    height: calc(100vh - 3rem);\n    background-color: ${theme.base.palette['app-background']};\n    overflow-y: auto;\n    transition: margin ${theme.base.animation.speed} ${theme.base.animation.timing.ease};\n  `;\n});\n\nStyledMain.defaultProps = defaultThemeProp;\n\nexport const StyledDrawerWrapper = styled.div(() => {\n  const { drawerOpen } = useContext(AppShellContext);\n\n  return css`\n    position: relative;\n    height: ${drawerOpen ? '100%' : 'auto'};\n  `;\n});\n\nStyledDrawerWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledNavHeaderVisual = styled.div<{ bgColor: string }>(({ theme, bgColor }) => {\n  return css`\n    min-width: 2rem;\n    min-height: 2rem;\n    border-radius: 0.4rem;\n    background-color: ${bgColor};\n    color: ${theme.base.colors.white};\n    & svg {\n      color: ${theme.base.colors.white};\n    }\n  `;\n});\n\nStyledNavHeaderVisual.defaultProps = defaultThemeProp;\n\nexport const StyledDrawerCloseButton = styled(Button)(({ theme }) => {\n  return css`\n    min-width: 1.5rem;\n    min-height: 1.5rem;\n    color: ${theme.base.colors.white};\n\n    ${StyledIcon} {\n      width: 1em;\n      height: 1em;\n    }\n  `;\n});\n\nStyledDrawerCloseButton.defaultProps = defaultThemeProp;\n\nexport const StyledInnerNav = styled.div(() => {\n  const { navState } = useContext(AppShellContext);\n\n  return css`\n    height: 100%;\n    ${(navState === 'collapsing' || navState === 'expanding') &&\n    css`\n      overflow: hidden;\n    `}\n  `;\n});\n\nStyledInnerNav.defaultProps = defaultThemeProp;\n\nexport const StyledNav = styled.nav(({ theme }) => {\n  const { navExpanded } = useContext(AppShellContext);\n\n  return css`\n    position: fixed;\n    z-index: ${theme.base['z-index'].drawer};\n    height: calc(100vh - 3rem);\n    background: ${theme.components['app-shell'].nav['background-color']};\n\n    &,\n    ${StyledInnerNav} {\n      width: ${navExpanded ? '14' : '1.5'}rem;\n      transition: width ${theme.base.animation.speed} ${theme.base.animation.timing.ease};\n    }\n\n    ${theme.base['custom-scrollbar'] &&\n    css`\n      * {\n        scrollbar-color: rgba(255, 255, 255, 0.6) rgba(0, 0, 0, 0.2);\n        scrollbar-width: thin;\n      }\n\n      @supports not ((scrollbar-width: thin) or (scrollbar-color: black white)) {\n        /* stylelint-disable unit-allowed-list */\n\n        *::-webkit-scrollbar {\n          width: 12px;\n          height: 12px;\n        }\n\n        *::-webkit-scrollbar-track {\n          background-color: rgba(0, 0, 0, 0.2);\n        }\n\n        *::-webkit-scrollbar-corner {\n          background-color: rgba(0, 0, 0, 0.2);\n          border-bottom-right-radius: inherit;\n        }\n\n        *::-webkit-scrollbar-thumb {\n          background-color: transparent;\n          border: 3px solid transparent;\n          border-radius: calc(1.125 * ${theme.base['border-radius']});\n          box-shadow: inset 0 0 2px 4px rgba(255, 255, 255, 0.6);\n        }\n\n        *::-webkit-scrollbar-thumb:hover {\n          box-shadow: inset 0 0 2px 4px rgba(255, 255, 255, 0.7);\n        }\n\n        *::-webkit-scrollbar-track:horizontal {\n          border-bottom-left-radius: inherit;\n        }\n\n        *::-webkit-scrollbar-track:vertical {\n          border-top-right-radius: inherit;\n        }\n\n        /* stylelint-disable-next-line selector-pseudo-class-no-unknown */\n        *::-webkit-scrollbar-track:not(:corner-present) {\n          border-bottom-right-radius: inherit;\n        }\n\n        /* stylelint-enable unit-allowed-list */\n      }\n    `}\n\n    &:not(:hover) {\n      ${StyledNavToggle}[aria-expanded='true']:not(:focus) {\n        ${hideVisually}\n      }\n    }\n\n    /*\n     * A hoverable area just outside the nav for easier mouse interaction with the collapse button.\n     * As the collpase button straddles the nav boundary, so maybe too should the hoverable area.\n     */\n    &::after {\n      content: '';\n      display: block;\n      position: absolute;\n      inset-block-start: 0;\n      inset-inline-start: 100%;\n      width: calc(2 * ${theme.base.spacing});\n      height: 100%;\n    }\n\n    ${StyledStandardTree} {\n      color: ${theme.base.colors.white};\n\n      ${StyledNodeText} {\n        font-weight: ${theme.base['font-weight']['semi-bold']};\n      }\n\n      ${StyledNodeInteraction} {\n        &:hover,\n        &[aria-current='true'] {\n          background-color: ${hoverBg};\n        }\n\n        &[aria-current='true'] {\n          ${StyledNodeIcon},\n          ${StyledNodeText} {\n            color: ${theme.base.colors.blue.light};\n          }\n        }\n      }\n    }\n\n    /* Style for main is here since nav(the \"&\") may be conditionally rendered. */\n    & + ${StyledMain} {\n      margin-inline-start: ${navExpanded ? '14rem' : '1.5rem'};\n    }\n  `;\n});\n\nStyledNav.defaultProps = defaultThemeProp;\n"]}
+{"version":3,"file":"AppShell.styles.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { lighten, hideVisually } from 'polished';\nimport { useContext } from 'react';\n\nimport {\n  Icon,\n  Text,\n  tryCatch,\n  defaultThemeProp,\n  Button,\n  useDirection,\n  StyledIcon,\n  StyledTooltip\n} from '@pega/cosmos-react-core';\nimport { StyledSwitch, SwitchLabel } from '@pega/cosmos-react-core/lib/components/Switch/Switch';\nimport { StyledBareButton } from '@pega/cosmos-react-core/lib/components/Button/BareButton';\nimport {\n  StyledNodeIcon,\n  StyledNodeText,\n  StyledNodeInteraction,\n  StyledStandardTree\n} from '@pega/cosmos-react-core/lib/components/Tree/StandardTree.styles';\n\nimport AppShellContext from './AppShellContext';\n\nconst hoverBg = 'rgba(0, 0, 0, 0.4)';\n\nexport const StyledNavToggle = styled(Button)(({ theme }) => {\n  const { ltr } = useDirection();\n\n  return css`\n    position: absolute;\n    z-index: 1;\n    inset-block-start: calc(2 * ${theme.base.spacing});\n    inset-inline-end: 0;\n    min-width: 1.5rem;\n    min-height: 1.5rem;\n    border: none;\n    color: ${theme.base.palette['foreground-color']};\n    box-shadow: ${theme.base.shadow.low};\n    transition-property: background-color;\n    transform: translateX(${ltr ? '50%' : '-50%'});\n\n    ${StyledIcon} {\n      width: 1.5rem;\n      height: 1.5rem;\n    }\n\n    &[aria-expanded='${ltr ? 'true' : 'false'}'] {\n      ${StyledIcon} {\n        transform: rotateY(180deg);\n      }\n    }\n\n    & + ${StyledTooltip} {\n      z-index: calc(${theme.base['z-index'].drawer} + 1);\n    }\n  `;\n});\n\nStyledNavToggle.defaultProps = defaultThemeProp;\n\nexport const StyledHeader = styled.div(({ theme }) => {\n  const borderColor = tryCatch(() =>\n    lighten(0.1, theme.components['app-shell'].nav['background-color'])\n  );\n\n  return css`\n    width: 100%;\n    min-height: 4rem;\n    border-bottom: 0.0625rem solid ${borderColor};\n  `;\n});\n\nStyledHeader.defaultProps = defaultThemeProp;\n\nexport const StyledDrawerHeader = styled(StyledHeader)(({ theme }) => {\n  return css`\n    padding-inline-start: ${theme.base.spacing};\n  `;\n});\n\nStyledDrawerHeader.defaultProps = defaultThemeProp;\n\nexport const StyledNavHeaderIcon = styled(Icon)(({ theme }) => {\n  return css`\n    color: ${theme.base.colors.white};\n  `;\n});\n\nStyledNavHeaderIcon.defaultProps = defaultThemeProp;\n\nexport const StyledNavTitle = styled(Text)(({ theme }) => {\n  return css`\n    color: ${theme.base.colors.white};\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    overflow-x: hidden;\n  `;\n});\n\nStyledNavTitle.defaultProps = defaultThemeProp;\n\nexport const StyledUtils = styled.div<{ showDevMode: boolean }>(({ theme, showDevMode }) => {\n  const borderColor = tryCatch(() =>\n    lighten(0.1, theme.components['app-shell'].nav['background-color'])\n  );\n\n  return css`\n    padding-bottom: calc(${showDevMode ? 2 : 0} * ${theme.base.spacing});\n    border-top: 0.0625rem solid ${borderColor};\n    ${StyledSwitch} {\n      &:hover {\n        background-color: ${hoverBg};\n      }\n\n      ${SwitchLabel} {\n        height: calc(2rem + 4 * ${theme.base.spacing});\n        padding: calc(2 * ${theme.base.spacing});\n        text-transform: capitalize;\n        color: ${theme.base.colors.gray.light};\n        font-weight: ${theme.base['font-weight'].bold};\n\n        &::before,\n        &::after {\n          margin-inline-end: calc(2 * ${theme.base.spacing});\n        }\n      }\n    }\n    & > ul {\n      list-style: none;\n    }\n  `;\n});\n\nStyledUtils.defaultProps = defaultThemeProp;\n\nexport const StyledUtilItem = styled.li(({ theme }) => {\n  return css`\n    color: ${theme.base.colors.white};\n\n    &:hover {\n      background-color: rgba(0, 0, 0, 0.4);\n    }\n\n    &:focus,\n    &:focus-within {\n      color: ${theme.base.colors.blue.light};\n    }\n\n    ${StyledBareButton} {\n      font-weight: ${theme.base['font-weight']['semi-bold']};\n      color: ${theme.base.colors.white};\n      width: 100%;\n      height: 100%;\n      text-align: start;\n      padding: ${theme.base.spacing} calc(2 * ${theme.base.spacing});\n    }\n  `;\n});\n\nStyledUtilItem.defaultProps = defaultThemeProp;\n\nexport const StyledScrollWrap = styled.div(() => {\n  const { drawerOpen } = useContext(AppShellContext);\n\n  return css`\n    height: ${drawerOpen ? 'calc(100% - 4rem)' : '100%'};\n    overflow-y: auto;\n  `;\n});\n\nStyledScrollWrap.defaultProps = defaultThemeProp;\n\nexport const StyledNavContent = styled.div(({ theme }) => {\n  const { navExpanded, navState } = useContext(AppShellContext);\n\n  return css`\n    width: 14rem;\n    height: 100%;\n    opacity: 0;\n    transition: opacity ${theme.base.animation.speed} ${theme.base.animation.timing.ease};\n\n    ${navState === 'collapsed' &&\n    css`\n      display: none;\n    `}\n\n    ${navExpanded &&\n    css`\n      opacity: 1;\n    `}\n  `;\n});\n\nStyledNavContent.defaultProps = defaultThemeProp;\n\nexport const StyledMain = styled.main(({ theme }) => {\n  return css`\n    position: relative;\n    height: calc(100vh - 3rem);\n    background-color: ${theme.base.palette['app-background']};\n    overflow-y: auto;\n    transition: margin ${theme.base.animation.speed} ${theme.base.animation.timing.ease};\n  `;\n});\n\nStyledMain.defaultProps = defaultThemeProp;\n\nexport const StyledDrawerWrapper = styled.div(() => {\n  const { drawerOpen } = useContext(AppShellContext);\n\n  return css`\n    position: relative;\n    height: ${drawerOpen ? '100%' : 'auto'};\n  `;\n});\n\nStyledDrawerWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledNavHeaderVisual = styled.div<{ bgColor: string }>(({ theme, bgColor }) => {\n  return css`\n    min-width: 2rem;\n    min-height: 2rem;\n    border-radius: 0.4rem;\n    background-color: ${bgColor};\n    margin-inline-end: ${theme.base.spacing};\n    color: ${theme.base.colors.white};\n    & svg {\n      color: ${theme.base.colors.white};\n    }\n  `;\n});\n\nStyledNavHeaderVisual.defaultProps = defaultThemeProp;\n\nexport const StyledDrawerCloseButton = styled(Button)(({ theme }) => {\n  return css`\n    margin-inline-end: ${theme.base.spacing};\n    min-width: 1.5rem;\n    min-height: 1.5rem;\n    color: ${theme.base.colors.white};\n\n    ${StyledIcon} {\n      width: 1em;\n      height: 1em;\n    }\n  `;\n});\n\nStyledDrawerCloseButton.defaultProps = defaultThemeProp;\n\nexport const StyledInnerNav = styled.div(() => {\n  const { navState } = useContext(AppShellContext);\n\n  return css`\n    height: 100%;\n    ${(navState === 'collapsing' || navState === 'expanding') &&\n    css`\n      overflow: hidden;\n    `}\n  `;\n});\n\nStyledInnerNav.defaultProps = defaultThemeProp;\n\nexport const StyledNav = styled.nav(({ theme }) => {\n  const { navExpanded } = useContext(AppShellContext);\n\n  return css`\n    position: fixed;\n    z-index: ${theme.base['z-index'].drawer};\n    height: calc(100vh - 3rem);\n    background: ${theme.components['app-shell'].nav['background-color']};\n\n    &,\n    ${StyledInnerNav} {\n      width: ${navExpanded ? '14' : '1.5'}rem;\n      transition: width ${theme.base.animation.speed} ${theme.base.animation.timing.ease};\n    }\n\n    ${theme.base['custom-scrollbar'] &&\n    css`\n      * {\n        scrollbar-color: rgba(255, 255, 255, 0.6) rgba(0, 0, 0, 0.2);\n        scrollbar-width: thin;\n      }\n\n      @supports not ((scrollbar-width: thin) or (scrollbar-color: black white)) {\n        /* stylelint-disable unit-allowed-list */\n\n        *::-webkit-scrollbar {\n          width: 12px;\n          height: 12px;\n        }\n\n        *::-webkit-scrollbar-track {\n          background-color: rgba(0, 0, 0, 0.2);\n        }\n\n        *::-webkit-scrollbar-corner {\n          background-color: rgba(0, 0, 0, 0.2);\n          border-bottom-right-radius: inherit;\n        }\n\n        *::-webkit-scrollbar-thumb {\n          background-color: transparent;\n          border: 3px solid transparent;\n          border-radius: calc(1.125 * ${theme.base['border-radius']});\n          box-shadow: inset 0 0 2px 4px rgba(255, 255, 255, 0.6);\n        }\n\n        *::-webkit-scrollbar-thumb:hover {\n          box-shadow: inset 0 0 2px 4px rgba(255, 255, 255, 0.7);\n        }\n\n        *::-webkit-scrollbar-track:horizontal {\n          border-bottom-left-radius: inherit;\n        }\n\n        *::-webkit-scrollbar-track:vertical {\n          border-top-right-radius: inherit;\n        }\n\n        /* stylelint-disable-next-line selector-pseudo-class-no-unknown */\n        *::-webkit-scrollbar-track:not(:corner-present) {\n          border-bottom-right-radius: inherit;\n        }\n\n        /* stylelint-enable unit-allowed-list */\n      }\n    `}\n\n    &:not(:hover) {\n      ${StyledNavToggle}[aria-expanded='true']:not(:focus) {\n        ${hideVisually}\n      }\n    }\n\n    /*\n     * A hoverable area just outside the nav for easier mouse interaction with the collapse button.\n     * As the collpase button straddles the nav boundary, so maybe too should the hoverable area.\n     */\n    &::after {\n      content: '';\n      display: block;\n      position: absolute;\n      inset-block-start: 0;\n      inset-inline-start: 100%;\n      width: calc(2 * ${theme.base.spacing});\n      height: 100%;\n    }\n\n    ${StyledStandardTree} {\n      color: ${theme.base.colors.white};\n\n      ${StyledNodeText} {\n        font-weight: ${theme.base['font-weight']['semi-bold']};\n      }\n\n      ${StyledNodeInteraction} {\n        &:hover,\n        &[aria-current='true'] {\n          background-color: ${hoverBg};\n        }\n\n        &[aria-current='true'] {\n          ${StyledNodeIcon},\n          ${StyledNodeText} {\n            color: ${theme.base.colors.blue.light};\n          }\n        }\n      }\n    }\n\n    /* Style for main is here since nav(the \"&\") may be conditionally rendered. */\n    & + ${StyledMain} {\n      margin-inline-start: ${navExpanded ? '14rem' : '1.5rem'};\n    }\n  `;\n});\n\nStyledNav.defaultProps = defaultThemeProp;\n"]}

package/lib/components/LifeCycle/Category.d.ts

@@ -0,0 +1,32 @@
+import { FunctionComponent, Ref } from 'react';
+import { ForwardProps, BaseProps } from '@pega/cosmos-react-core';
+import { StageItemProps, CategoryItemProps, CategoriesItemProps } from './LifeCycle.types';
+import { TaskProps } from './Task';
+export interface CategoriesProps extends CategoriesItemProps {
+    height?: number;
+    elementId?: string;
+}
+export interface CategoryProps extends BaseProps {
+    ref?: Ref<HTMLOListElement>;
+    item: CategoryItemProps;
+    showTitle?: boolean;
+    category?: CategoriesProps;
+    /** Task component prop */
+    task: TaskProps;
+    /** Stage data - to be passed in callbacks */
+    stageItem: StageItemProps;
+    /** Id for the component */
+    id?: string;
+}
+export declare const StyledCategory: import("styled-components").StyledComponent<"h3", import("styled-components").DefaultTheme, {
+    showTitle: boolean;
+}, never>;
+export declare const StyledList: import("styled-components").StyledComponent<"ol", import("styled-components").DefaultTheme, {
+    category?: CategoriesProps | undefined;
+    id: string;
+}, never>;
+export declare const StyledParallelTitle: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledAddTask: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+declare const Category: FunctionComponent<CategoryProps & ForwardProps>;
+export default Category;
+//# sourceMappingURL=Category.d.ts.map

package/lib/components/LifeCycle/Category.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Category.d.ts","sourceRoot":"","sources":["../../../src/components/LifeCycle/Category.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAc,GAAG,EAAyC,MAAM,OAAO,CAAC;AAGlG,OAAO,EACL,YAAY,EACZ,SAAS,EASV,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAEL,cAAc,EACd,iBAAiB,EACjB,mBAAmB,EAEpB,MAAM,mBAAmB,CAAC;AAC3B,OAAa,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAEzC,MAAM,WAAW,eAAgB,SAAQ,mBAAmB;IAE1D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,aAAc,SAAQ,SAAS;IAC9C,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAE5B,IAAI,EAAE,iBAAiB,CAAC;IAExB,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,QAAQ,CAAC,EAAE,eAAe,CAAC;IAC3B,0BAA0B;IAC1B,IAAI,EAAE,SAAS,CAAC;IAChB,6CAA6C;IAC7C,SAAS,EAAE,cAAc,CAAC;IAC1B,2BAA2B;IAC3B,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED,eAAO,MAAM,cAAc;eAA0B,OAAO;SAQ1D,CAAC;AAEH,eAAO,MAAM,UAAU;eAA0B,eAAe,GAAG,SAAS;QAAM,MAAM;SAUvF,CAAC;AAEF,eAAO,MAAM,mBAAmB,yGA0B9B,CAAC;AAEH,eAAO,MAAM,aAAa,yGAaxB,CAAC;AAIH,QAAA,MAAM,QAAQ,EAAE,iBAAiB,CAAC,aAAa,GAAG,YAAY,CA+G7D,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/lib/components/LifeCycle/Category.js

@@ -0,0 +1,98 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { forwardRef, Fragment } from 'react';
+import styled, { css } from 'styled-components';
+import { Flex, Button, Icon, Tooltip, useElement, useI18n, createUID, defaultThemeProp } from '@pega/cosmos-react-core';
+import Task from './Task';
+export const StyledCategory = styled.h3(({ showTitle, theme }) => {
+    return css `
+    ${!showTitle &&
+        css `
+      visibility: hidden;
+    `}
+    margin: ${theme.base.spacing} 0 0 0;
+  `;
+});
+export const StyledList = styled.ol(({ category, theme, id }) => {
+    return css `
+      margin-block-start: ${theme.base.spacing};
+      margin-block-end: calc(2 * ${theme.base.spacing});
+      ${category?.elementId !== id &&
+        ` min-height: ${category?.height ? `${category.height}px` : 'auto'};
+  `}
+    `;
+});
+export const StyledParallelTitle = styled.div(({ theme }) => {
+    return css `
+    position: relative;
+    z-index: 1;
+    margin-block-end: 0.5rem;
+    text-align: center;
+    &::before {
+      border-block-start: calc(0.2 * ${theme.base.spacing}) solid ${theme.base.colors.slate.medium};
+      content: '';
+      margin: 0 auto;
+      position: absolute;
+      top: 50%;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      width: 100%;
+      z-index: -1;
+    }
+    span {
+      background: ${theme.base.colors.slate.medium};
+      padding: 0 ${theme.base.spacing};
+      border-radius: calc(0.25 * ${theme.base['border-radius']});
+      color: ${theme.base.colors.white};
+      text-transform: uppercase;
+    }
+  `;
+});
+export const StyledAddTask = styled.div(({ theme }) => {
+    return css `
+    > button {
+      background: ${theme.base.palette['secondary-background']};
+      border-radius: calc(0.5 * ${theme.base['border-radius']});
+      width: 100%;
+      justify-content: flex-start;
+      padding: calc(1 * ${theme.base.spacing}) calc(1.75 * ${theme.base.spacing});
+      > div {
+        margin: 0 calc(2 * ${theme.base.spacing});
+      }
+    }
+  `;
+});
+StyledAddTask.defaultProps = defaultThemeProp;
+const Category = forwardRef(({ item, showTitle = false, stageItem, category, id, task, ...restProps }, ref) => {
+    const [addTaskEl, setAddTaskEl] = useElement();
+    let showAddTaskButton = true;
+    const t = useI18n();
+    if (task?.addTask?.showOnce && item?.tasks?.length !== 0) {
+        showAddTaskButton = false;
+    }
+    /* Call back for click of add task button */
+    const onAddTaskClick = (e) => {
+        const param = {
+            category: item,
+            stage: stageItem
+        };
+        task?.addTask.onAddTask?.(param, e);
+    };
+    return (_jsxs(_Fragment, { children: [category?.label && (_jsx(StyledCategory, Object.assign({ showTitle: showTitle, tabIndex: -1, id: item?.categoryId }, { children: category?.label }), void 0)), _jsxs(StyledList, Object.assign({ ref: ref, role: 'gridcell', category: category, id: item?.id, "data-id": item?.categoryId }, { children: [item &&
+                        item.tasks.length !== 0 &&
+                        item.tasks.map((TaskItem, index) => {
+                            if (Array.isArray(TaskItem)) {
+                                if (task && task.addTask && task.addTask.showOnce && TaskItem.length !== 0) {
+                                    showAddTaskButton = false;
+                                }
+                                /* Using creatUID instead of useUID, since it is a list item and multiple ref is trying to get created which causes issue */
+                                const parallelListItemId = createUID();
+                                return (_jsxs(Fragment, { children: [index !== 0 && (_jsx(Flex, Object.assign({ as: StyledParallelTitle, container: { justify: 'center' } }, { children: _jsx("span", { children: t('parallel') }, void 0) }), void 0)), TaskItem.map((parallelTask) => {
+                                            return (_jsx(Task, Object.assign({ id: parallelTask.id, value: parallelTask.label, item: parallelTask, visual: parallelTask.visual, stageItem: stageItem, categoryItem: item, error: parallelTask.error }, task, restProps), parallelTask.id));
+                                        })] }, parallelListItemId));
+                            }
+                            return (_jsx(Task, Object.assign({ id: TaskItem.id, value: TaskItem.label, item: TaskItem, visual: TaskItem.visual, stageItem: stageItem, categoryItem: item, onAddStep: task?.onAddStep, error: TaskItem.error }, task, restProps), TaskItem.id));
+                        }), (showAddTaskButton || !item) && (_jsxs(_Fragment, { children: [_jsx(Flex, Object.assign({ as: StyledAddTask }, { children: _jsxs(Button, Object.assign({ variant: 'simple', icon: true, ref: setAddTaskEl, onClick: onAddTaskClick }, { children: [_jsx(Icon, { name: 'plus' }, void 0), _jsx(Flex, { children: task?.addTask.title }, void 0)] }), void 0) }), void 0), _jsx(Tooltip, Object.assign({ target: addTaskEl, "aria-hidden": 'true' }, { children: `${t('add')} ${task?.addTask.title}` }), void 0)] }, void 0))] }), void 0)] }, void 0));
+});
+export default Category;
+//# sourceMappingURL=Category.js.map

package/lib/components/LifeCycle/Category.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Category.js","sourceRoot":"","sources":["../../../src/components/LifeCycle/Category.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAqB,UAAU,EAAO,QAAQ,EAA+B,MAAM,OAAO,CAAC;AAClG,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAGL,IAAI,EACJ,MAAM,EACN,IAAI,EACJ,OAAO,EACP,UAAU,EACV,OAAO,EACP,SAAS,EACT,gBAAgB,EACjB,MAAM,yBAAyB,CAAC;AASjC,OAAO,IAAmB,MAAM,QAAQ,CAAC;AAwBzC,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,EAAE,CAAyB,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,EAAE;IACvF,OAAO,GAAG,CAAA;MACN,CAAC,SAAS;QACZ,GAAG,CAAA;;KAEF;cACS,KAAK,CAAC,IAAI,CAAC,OAAO;GAC7B,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,EAAE,CACjC,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,EAAE,EAAE,EAAE;IAC1B,OAAO,GAAG,CAAA;4BACc,KAAK,CAAC,IAAI,CAAC,OAAO;mCACX,KAAK,CAAC,IAAI,CAAC,OAAO;QAC7C,QAAQ,EAAE,SAAS,KAAK,EAAE;QAC5B,gBAAgB,QAAQ,EAAE,MAAM,CAAC,CAAC,CAAC,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,CAAC,CAAC,MAAM;GACrE;KACE,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC1D,OAAO,GAAG,CAAA;;;;;;uCAM2B,KAAK,CAAC,IAAI,CAAC,OAAO,WAAW,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM;;;;;;;;;;;;oBAY9E,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM;mBAC/B,KAAK,CAAC,IAAI,CAAC,OAAO;mCACF,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;eAC/C,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;;;GAGnC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACpD,OAAO,GAAG,CAAA;;oBAEQ,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,sBAAsB,CAAC;kCAC5B,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;;;0BAGnC,KAAK,CAAC,IAAI,CAAC,OAAO,iBAAiB,KAAK,CAAC,IAAI,CAAC,OAAO;;6BAElD,KAAK,CAAC,IAAI,CAAC,OAAO;;;GAG5C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,aAAa,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE9C,MAAM,QAAQ,GAAoD,UAAU,CAC1E,CACE,EACE,IAAI,EACJ,SAAS,GAAG,KAAK,EACjB,SAAS,EACT,QAAQ,EACR,EAAE,EACF,IAAI,EACJ,GAAG,SAAS,EACmB,EACjC,GAAyB,EACzB,EAAE;IACF,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,UAAU,EAAE,CAAC;IAC/C,IAAI,iBAAiB,GAAG,IAAI,CAAC;IAC7B,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,IAAI,IAAI,EAAE,OAAO,EAAE,QAAQ,IAAI,IAAI,EAAE,KAAK,EAAE,MAAM,KAAK,CAAC,EAAE;QACxD,iBAAiB,GAAG,KAAK,CAAC;KAC3B;IACD,4CAA4C;IAC5C,MAAM,cAAc,GAAG,CAAC,CAAgC,EAAE,EAAE;QAC1D,MAAM,KAAK,GAAyB;YAClC,QAAQ,EAAE,IAAI;YACd,KAAK,EAAE,SAAS;SACjB,CAAC;QACF,IAAI,EAAE,OAAO,CAAC,SAAS,EAAE,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;IACtC,CAAC,CAAC;IAEF,OAAO,CACL,8BACG,QAAQ,EAAE,KAAK,IAAI,CAClB,KAAC,cAAc,kBAAC,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,UAAU,gBACrE,QAAQ,EAAE,KAAK,YACD,CAClB,EACD,MAAC,UAAU,kBACT,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,UAAU,EACf,QAAQ,EAAE,QAAQ,EAClB,EAAE,EAAE,IAAI,EAAE,EAAE,aACH,IAAI,EAAE,UAAU,iBAExB,IAAI;wBACH,IAAI,CAAC,KAAK,CAAC,MAAM,KAAK,CAAC;wBACvB,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,QAAyC,EAAE,KAAa,EAAE,EAAE;4BAC1E,IAAI,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE;gCAC3B,IAAI,IAAI,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,CAAC,QAAQ,IAAI,QAAQ,CAAC,MAAM,KAAK,CAAC,EAAE;oCAC1E,iBAAiB,GAAG,KAAK,CAAC;iCAC3B;gCACD,4HAA4H;gCAC5H,MAAM,kBAAkB,GAAG,SAAS,EAAE,CAAC;gCACvC,OAAO,CACL,MAAC,QAAQ,eACN,KAAK,KAAK,CAAC,IAAI,CACd,KAAC,IAAI,kBAAC,EAAE,EAAE,mBAAmB,EAAE,SAAS,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,gBAC7D,yBAAO,CAAC,CAAC,UAAU,CAAC,WAAQ,YACvB,CACR,EACA,QAAQ,CAAC,GAAG,CAAC,CAAC,YAA2B,EAAE,EAAE;4CAC5C,OAAO,CACL,KAAC,IAAI,kBAEH,EAAE,EAAE,YAAY,CAAC,EAAE,EACnB,KAAK,EAAE,YAAY,CAAC,KAAK,EACzB,IAAI,EAAE,YAAY,EAClB,MAAM,EAAE,YAAY,CAAC,MAAM,EAC3B,SAAS,EAAE,SAAS,EACpB,YAAY,EAAE,IAAI,EAClB,KAAK,EAAE,YAAY,CAAC,KAAK,IACrB,IAAI,EACJ,SAAS,GATR,YAAY,CAAC,EAAE,CAUpB,CACH,CAAC;wCACJ,CAAC,CAAC,KArBW,kBAAkB,CAsBtB,CACZ,CAAC;6BACH;4BACD,OAAO,CACL,KAAC,IAAI,kBAEH,EAAE,EAAE,QAAQ,CAAC,EAAE,EACf,KAAK,EAAE,QAAQ,CAAC,KAAK,EACrB,IAAI,EAAE,QAAQ,EACd,MAAM,EAAE,QAAQ,CAAC,MAAM,EACvB,SAAS,EAAE,SAAS,EACpB,YAAY,EAAE,IAAI,EAClB,SAAS,EAAE,IAAI,EAAE,SAAS,EAC1B,KAAK,EAAE,QAAQ,CAAC,KAAK,IACjB,IAAI,EACJ,SAAS,GAVR,QAAQ,CAAC,EAAE,CAWhB,CACH,CAAC;wBACJ,CAAC,CAAC,EACH,CAAC,iBAAiB,IAAI,CAAC,IAAI,CAAC,IAAI,CAC/B,8BACE,KAAC,IAAI,kBAAC,EAAE,EAAE,aAAa,gBACrB,MAAC,MAAM,kBAAC,OAAO,EAAC,QAAQ,EAAC,IAAI,QAAC,GAAG,EAAE,YAAY,EAAE,OAAO,EAAE,cAAc,iBACtE,KAAC,IAAI,IAAC,IAAI,EAAC,MAAM,WAAG,EACpB,KAAC,IAAI,cAAE,IAAI,EAAE,OAAO,CAAC,KAAK,WAAQ,aAC3B,YACJ,EACP,KAAC,OAAO,kBAAC,MAAM,EAAE,SAAS,iBAAc,MAAM,gBAC3C,GAAG,CAAC,CAAC,KAAK,CAAC,IAAI,IAAI,EAAE,OAAO,CAAC,KAAK,EAAE,YAC7B,YACT,CACJ,aACU,YACZ,CACJ,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,QAAQ,CAAC","sourcesContent":["import { FunctionComponent, forwardRef, Ref, Fragment, PropsWithoutRef, MouseEvent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  ForwardProps,\n  BaseProps,\n  Flex,\n  Button,\n  Icon,\n  Tooltip,\n  useElement,\n  useI18n,\n  createUID,\n  defaultThemeProp\n} from '@pega/cosmos-react-core';\n\nimport {\n  TaskItemProps,\n  StageItemProps,\n  CategoryItemProps,\n  CategoriesItemProps,\n  LifeCycleActionParam\n} from './LifeCycle.types';\nimport Task, { TaskProps } from './Task';\n\nexport interface CategoriesProps extends CategoriesItemProps {\n  /* height property used to manipulate height of catergory dom */\n  height?: number;\n  elementId?: string;\n}\n\nexport interface CategoryProps extends BaseProps {\n  ref?: Ref<HTMLOListElement>;\n  /* Pass the category items */\n  item: CategoryItemProps;\n  /* Enable the title for categories */\n  showTitle?: boolean;\n  /* Props of the categoryColumn */\n  category?: CategoriesProps;\n  /** Task component prop */\n  task: TaskProps;\n  /** Stage data - to be passed in callbacks */\n  stageItem: StageItemProps;\n  /** Id for the component */\n  id?: string;\n}\n\nexport const StyledCategory = styled.h3<{ showTitle: boolean }>(({ showTitle, theme }) => {\n  return css`\n    ${!showTitle &&\n    css`\n      visibility: hidden;\n    `}\n    margin: ${theme.base.spacing} 0 0 0;\n  `;\n});\n\nexport const StyledList = styled.ol<{ category?: CategoriesProps | undefined; id: string }>(\n  ({ category, theme, id }) => {\n    return css`\n      margin-block-start: ${theme.base.spacing};\n      margin-block-end: calc(2 * ${theme.base.spacing});\n      ${category?.elementId !== id &&\n      ` min-height: ${category?.height ? `${category.height}px` : 'auto'};\n  `}\n    `;\n  }\n);\n\nexport const StyledParallelTitle = styled.div(({ theme }) => {\n  return css`\n    position: relative;\n    z-index: 1;\n    margin-block-end: 0.5rem;\n    text-align: center;\n    &::before {\n      border-block-start: calc(0.2 * ${theme.base.spacing}) solid ${theme.base.colors.slate.medium};\n      content: '';\n      margin: 0 auto;\n      position: absolute;\n      top: 50%;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      width: 100%;\n      z-index: -1;\n    }\n    span {\n      background: ${theme.base.colors.slate.medium};\n      padding: 0 ${theme.base.spacing};\n      border-radius: calc(0.25 * ${theme.base['border-radius']});\n      color: ${theme.base.colors.white};\n      text-transform: uppercase;\n    }\n  `;\n});\n\nexport const StyledAddTask = styled.div(({ theme }) => {\n  return css`\n    > button {\n      background: ${theme.base.palette['secondary-background']};\n      border-radius: calc(0.5 * ${theme.base['border-radius']});\n      width: 100%;\n      justify-content: flex-start;\n      padding: calc(1 * ${theme.base.spacing}) calc(1.75 * ${theme.base.spacing});\n      > div {\n        margin: 0 calc(2 * ${theme.base.spacing});\n      }\n    }\n  `;\n});\n\nStyledAddTask.defaultProps = defaultThemeProp;\n\nconst Category: FunctionComponent<CategoryProps & ForwardProps> = forwardRef(\n  (\n    {\n      item,\n      showTitle = false,\n      stageItem,\n      category,\n      id,\n      task,\n      ...restProps\n    }: PropsWithoutRef<CategoryProps>,\n    ref: CategoryProps['ref']\n  ) => {\n    const [addTaskEl, setAddTaskEl] = useElement();\n    let showAddTaskButton = true;\n    const t = useI18n();\n\n    if (task?.addTask?.showOnce && item?.tasks?.length !== 0) {\n      showAddTaskButton = false;\n    }\n    /* Call back for click of add task button */\n    const onAddTaskClick = (e: MouseEvent<HTMLButtonElement>) => {\n      const param: LifeCycleActionParam = {\n        category: item,\n        stage: stageItem\n      };\n      task?.addTask.onAddTask?.(param, e);\n    };\n\n    return (\n      <>\n        {category?.label && (\n          <StyledCategory showTitle={showTitle} tabIndex={-1} id={item?.categoryId}>\n            {category?.label}\n          </StyledCategory>\n        )}\n        <StyledList\n          ref={ref}\n          role='gridcell'\n          category={category}\n          id={item?.id}\n          data-id={item?.categoryId}\n        >\n          {item &&\n            item.tasks.length !== 0 &&\n            item.tasks.map((TaskItem: TaskItemProps | TaskItemProps[], index: number) => {\n              if (Array.isArray(TaskItem)) {\n                if (task && task.addTask && task.addTask.showOnce && TaskItem.length !== 0) {\n                  showAddTaskButton = false;\n                }\n                /* Using creatUID instead of useUID, since it is a list item and multiple ref is trying to get created which causes issue */\n                const parallelListItemId = createUID();\n                return (\n                  <Fragment key={parallelListItemId}>\n                    {index !== 0 && (\n                      <Flex as={StyledParallelTitle} container={{ justify: 'center' }}>\n                        <span>{t('parallel')}</span>\n                      </Flex>\n                    )}\n                    {TaskItem.map((parallelTask: TaskItemProps) => {\n                      return (\n                        <Task\n                          key={parallelTask.id}\n                          id={parallelTask.id}\n                          value={parallelTask.label}\n                          item={parallelTask}\n                          visual={parallelTask.visual}\n                          stageItem={stageItem}\n                          categoryItem={item}\n                          error={parallelTask.error}\n                          {...task}\n                          {...restProps}\n                        />\n                      );\n                    })}\n                  </Fragment>\n                );\n              }\n              return (\n                <Task\n                  key={TaskItem.id}\n                  id={TaskItem.id}\n                  value={TaskItem.label}\n                  item={TaskItem}\n                  visual={TaskItem.visual}\n                  stageItem={stageItem}\n                  categoryItem={item}\n                  onAddStep={task?.onAddStep}\n                  error={TaskItem.error}\n                  {...task}\n                  {...restProps}\n                />\n              );\n            })}\n          {(showAddTaskButton || !item) && (\n            <>\n              <Flex as={StyledAddTask}>\n                <Button variant='simple' icon ref={setAddTaskEl} onClick={onAddTaskClick}>\n                  <Icon name='plus' />\n                  <Flex>{task?.addTask.title}</Flex>\n                </Button>\n              </Flex>\n              <Tooltip target={addTaskEl} aria-hidden='true'>\n                {`${t('add')} ${task?.addTask.title}`}\n              </Tooltip>\n            </>\n          )}\n        </StyledList>\n      </>\n    );\n  }\n);\n\nexport default Category;\n"]}

package/lib/components/LifeCycle/LifeCycle.d.ts

@@ -0,0 +1,22 @@
+import { FunctionComponent, Ref } from 'react';
+import { BaseProps, ForwardProps } from '@pega/cosmos-react-core';
+import { StageItemProps } from './LifeCycle.types';
+import { StageProps } from './Stage';
+import { CategoriesProps } from './Category';
+import { TaskProps } from './Task';
+import { StepProps } from './Step';
+export interface LifeCycleProps extends BaseProps {
+    ref?: Ref<HTMLDivElement>;
+    items: StageItemProps[];
+    alternateItems?: StageItemProps[];
+    task: TaskProps[];
+    stage: StageProps;
+    alternateStage: StageProps;
+    categories: CategoriesProps[];
+    step: StepProps[];
+    onAddStage: () => void;
+    onAddAlternateStage: () => void;
+}
+declare const LifeCycle: FunctionComponent<LifeCycleProps & ForwardProps>;
+export default LifeCycle;
+//# sourceMappingURL=LifeCycle.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LifeCycle.d.ts","sourceRoot":"","sources":["../../../src/components/LifeCycle/LifeCycle.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAEjB,GAAG,EAIJ,MAAM,OAAO,CAAC;AAGf,OAAO,EAEL,SAAS,EACT,YAAY,EAKb,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AACrC,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACnC,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAEnC,MAAM,WAAW,cAAe,SAAQ,SAAS;IAE/C,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAE1B,KAAK,EAAE,cAAc,EAAE,CAAC;IAExB,cAAc,CAAC,EAAE,cAAc,EAAE,CAAC;IAElC,IAAI,EAAE,SAAS,EAAE,CAAC;IAElB,KAAK,EAAE,UAAU,CAAC;IAElB,cAAc,EAAE,UAAU,CAAC;IAE3B,UAAU,EAAE,eAAe,EAAE,CAAC;IAE9B,IAAI,EAAE,SAAS,EAAE,CAAC;IAElB,UAAU,EAAE,MAAM,IAAI,CAAC;IAEvB,mBAAmB,EAAE,MAAM,IAAI,CAAC;CACjC;AAeD,QAAA,MAAM,SAAS,EAAE,iBAAiB,CAAC,cAAc,GAAG,YAAY,CAmI/D,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/lib/components/LifeCycle/LifeCycle.js

@@ -0,0 +1,75 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useLayoutEffect, useRef, useState } from 'react';
+import styled, { css } from 'styled-components';
+import { defaultThemeProp, Flex, Button, Icon, useI18n } from '@pega/cosmos-react-core';
+import LifeCycleList from './LifeCycleList';
+const StyledLifeCycle = styled.ol ``;
+StyledLifeCycle.defaultProps = defaultThemeProp;
+const StyledAddButton = styled(Button)(({ theme }) => {
+    return css `
+    align-self: flex-start;
+    margin-block-start: calc(${theme.base.spacing} / 2);
+  `;
+});
+StyledAddButton.defaultProps = defaultThemeProp;
+const LifeCycle = forwardRef(({ items, categories, alternateItems = [], onAddStage, onAddAlternateStage, stage, alternateStage, ...restProps }, ref) => {
+    const lifeCycleEl = useRef(null);
+    const t = useI18n();
+    const locStage = t('stage');
+    const locAltStage = t('alternateStage');
+    const [categoriesState, setcategoriesState] = useState(categories);
+    const categoryElements = [];
+    const setRef = (element) => {
+        if (element) {
+            categoryElements.push(element);
+        }
+    };
+    useLayoutEffect(() => {
+        let isHeightChanged = false;
+        const categoriesColumn = [...categories];
+        if (categoriesColumn && categoriesColumn.length > 0) {
+            categoriesColumn.forEach((categoryItem, index) => {
+                const categoryElm = [...categoryElements];
+                let isActiveElement = false;
+                const categoryComponent = categoryElm.filter((element) => {
+                    if (element.getAttribute('data-id') === categoryItem.id) {
+                        if (categoryItem.elementId === element.getAttribute('id')) {
+                            isActiveElement = true;
+                        }
+                        return true;
+                    }
+                    return false;
+                });
+                if (!isActiveElement) {
+                    categoryItem.elementId = '';
+                    categoryItem.height = 0;
+                }
+                categoryComponent.forEach(categoryElement => {
+                    const columnHeight = categoryItem?.height ?? 0;
+                    const height = categoryElement.scrollHeight;
+                    const elementId = categoryElement.getAttribute('id');
+                    if (height > columnHeight ||
+                        (categoryItem.elementId === elementId && height !== columnHeight)) {
+                        isHeightChanged = true;
+                        categoriesColumn[index].height = height;
+                        if (elementId)
+                            categoriesColumn[index].elementId = elementId;
+                    }
+                });
+            });
+            if (isHeightChanged) {
+                isHeightChanged = false;
+                setcategoriesState(categoriesColumn);
+            }
+        }
+    });
+    return (_jsxs(Flex, Object.assign({ container: { itemGap: 2 }, ref: ref }, { children: [_jsxs(Flex, Object.assign({ as: StyledLifeCycle, ref: lifeCycleEl, container: true, role: 'grid', "aria-label": locStage }, { children: [items.map((stageItem, index, stageArray) => {
+                        const listId = stageItem.id;
+                        return (_jsx(LifeCycleList, Object.assign({ id: listId, item: stageItem, isFirstItem: index === 0, isLastItem: index === stageArray.length - 1, ref: setRef, stage: stage, categories: categoriesState }, restProps), listId));
+                    }), _jsx(StyledAddButton, Object.assign({ variant: 'simple', label: `${t('add')} ${locStage}`, icon: true, onClick: onAddStage }, { children: _jsx(Icon, { name: 'plus' }, void 0) }), void 0)] }), void 0), alternateItems.length !== 0 && (_jsxs(Flex, Object.assign({ as: StyledLifeCycle, container: true, ref: lifeCycleEl, role: 'grid', "aria-label": locAltStage }, { children: [alternateItems.map((stageItem) => {
+                        const listId = stageItem.id;
+                        return (_jsx(LifeCycleList, Object.assign({ id: listId, item: stageItem, ref: setRef, categories: categoriesState, stageVariant: 'alternate', stage: alternateStage }, restProps), listId));
+                    }), _jsx(StyledAddButton, Object.assign({ variant: 'simple', label: `${t('add')} ${locAltStage}`, icon: true, onClick: onAddAlternateStage }, { children: _jsx(Icon, { name: 'plus' }, void 0) }), void 0)] }), void 0))] }), void 0));
+});
+export default LifeCycle;
+//# sourceMappingURL=LifeCycle.js.map