@pega/cosmos-react-wss 4.0.0-dev.14.0 → 4.0.0-dev.14.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -82,12 +82,12 @@ export interface AppShellProps extends BaseProps, NoChildrenProp {
82
82
  /**
83
83
  * The alignment of navigation links within the header.
84
84
  * @default 'end'
85
- * */
85
+ */
86
86
  navAlignment?: 'start' | 'center' | 'end';
87
87
  /**
88
88
  * The positioning of the navigation links relative to the other app header elements.
89
89
  * @default 'inline'
90
- * */
90
+ */
91
91
  navPosition?: 'inline' | 'below';
92
92
  /** Ref for the wrapping div element. */
93
93
  ref?: Ref<HTMLDivElement>;
@@ -1 +1 @@
1
- {"version":3,"file":"AppShell.types.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.types.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"AppShell.types.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.types.ts"],"names":[],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"AppShell.types.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.types.ts"],"names":[],"mappings":"","sourcesContent":["import { MouseEventHandler, ReactNode, Ref } from 'react';\n\nimport { AvatarProps, BaseProps, ImageProps, NoChildrenProp } from '@pega/cosmos-react-core';\nimport {\n ContextSwitcherProps,\n NavListItemProps\n} from '@pega/cosmos-react-core/lib/components/AppShell/AppShell.types';\n\nexport type InteractionEvent = MouseEvent | KeyboardEvent;\n\ninterface AppInfoProps {\n /** Name of the application. */\n appName: string;\n /** URL source of the logo image. */\n imageSrc: ImageProps['src'];\n /** URL or DOM id to navigate to from the logo and appName. */\n href?: string;\n /** Click handler for the logo and appName. */\n onClick?: MouseEventHandler<HTMLAnchorElement>;\n /** Specifies where to open the link href. */\n target?: string;\n}\n\ninterface NavLinkProps {\n /** Unique id for the link */\n id: string;\n /** Text that is displayed for the link. */\n text: string;\n /** URL or DOM id to navigate to. */\n href: string;\n /** Click handler for the link. */\n onClick?: (e: InteractionEvent) => void;\n /** Indicates if the link represents the current view within the app. */\n current?: boolean;\n}\n\ninterface OperatorProps {\n /** Props for constructing the operator avatar. */\n avatar: AvatarProps;\n /** The title of the operator menu. */\n title: string;\n /** A list of actions that will populate a menu attached to the operator. */\n actions: Pick<NavListItemProps, 'id' | 'primary' | 'href' | 'onClick' | 'visual'>[];\n}\n\nexport interface NotificationItem {\n /** An id representing the item. */\n id: string;\n /** The primary text for the item. */\n primary: string;\n /** Secondary text that will be rendered as a Meta List. */\n secondary?: string[];\n /** A visual associated with the item. */\n visual?: ReactNode;\n /** A flag indicating if the item has been read. */\n unread?: boolean;\n /** URL or DOM id to navigate to. */\n href?: string;\n /** The onClick handler for the item. */\n onClick?: (event: InteractionEvent) => void;\n}\n\nexport interface NotificationProps {\n /** The title of the notifications view. */\n title: string;\n /** The number of new notifications. */\n count: number;\n /** A list of notification items. */\n items: NotificationItem[];\n /** If true, a loading indicator will render in place of the list. */\n loading?: boolean;\n /** Click event for items within the list. */\n onItemClick?: (id: string, event: InteractionEvent) => void;\n /** Callback that fires when the notification view opens. */\n onNotificationsOpen?: () => void;\n /** Callback that fires when the notification view closes. */\n onNotificationsClose?: () => void;\n}\n\nexport interface AppShellProps extends BaseProps, NoChildrenProp {\n /** The content of the application. */\n main: ReactNode;\n /** Props related to the app name and logo. */\n appInfo: AppInfoProps;\n /** Context manager configuration. */\n contextSwitcher?: ContextSwitcherProps;\n /** A set of navigation links for the application. */\n navLinks: NavLinkProps[];\n /** Props for the operator menu. */\n operator: OperatorProps;\n /** Props related to notifications for the application. */\n notifications?: NotificationProps;\n /**\n * The alignment of navigation links within the header.\n * @default 'end'\n * */\n navAlignment?: 'start' | 'center' | 'end';\n /**\n * The positioning of the navigation links relative to the other app header elements.\n * @default 'inline'\n * */\n navPosition?: 'inline' | 'below';\n /** Ref for the wrapping div element. */\n ref?: Ref<HTMLDivElement>;\n}\n"]}
1
+ {"version":3,"file":"AppShell.types.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.types.ts"],"names":[],"mappings":"","sourcesContent":["import { MouseEventHandler, ReactNode, Ref } from 'react';\n\nimport { AvatarProps, BaseProps, ImageProps, NoChildrenProp } from '@pega/cosmos-react-core';\nimport {\n ContextSwitcherProps,\n NavListItemProps\n} from '@pega/cosmos-react-core/lib/components/AppShell/AppShell.types';\n\nexport type InteractionEvent = MouseEvent | KeyboardEvent;\n\ninterface AppInfoProps {\n /** Name of the application. */\n appName: string;\n /** URL source of the logo image. */\n imageSrc: ImageProps['src'];\n /** URL or DOM id to navigate to from the logo and appName. */\n href?: string;\n /** Click handler for the logo and appName. */\n onClick?: MouseEventHandler<HTMLAnchorElement>;\n /** Specifies where to open the link href. */\n target?: string;\n}\n\ninterface NavLinkProps {\n /** Unique id for the link */\n id: string;\n /** Text that is displayed for the link. */\n text: string;\n /** URL or DOM id to navigate to. */\n href: string;\n /** Click handler for the link. */\n onClick?: (e: InteractionEvent) => void;\n /** Indicates if the link represents the current view within the app. */\n current?: boolean;\n}\n\ninterface OperatorProps {\n /** Props for constructing the operator avatar. */\n avatar: AvatarProps;\n /** The title of the operator menu. */\n title: string;\n /** A list of actions that will populate a menu attached to the operator. */\n actions: Pick<NavListItemProps, 'id' | 'primary' | 'href' | 'onClick' | 'visual'>[];\n}\n\nexport interface NotificationItem {\n /** An id representing the item. */\n id: string;\n /** The primary text for the item. */\n primary: string;\n /** Secondary text that will be rendered as a Meta List. */\n secondary?: string[];\n /** A visual associated with the item. */\n visual?: ReactNode;\n /** A flag indicating if the item has been read. */\n unread?: boolean;\n /** URL or DOM id to navigate to. */\n href?: string;\n /** The onClick handler for the item. */\n onClick?: (event: InteractionEvent) => void;\n}\n\nexport interface NotificationProps {\n /** The title of the notifications view. */\n title: string;\n /** The number of new notifications. */\n count: number;\n /** A list of notification items. */\n items: NotificationItem[];\n /** If true, a loading indicator will render in place of the list. */\n loading?: boolean;\n /** Click event for items within the list. */\n onItemClick?: (id: string, event: InteractionEvent) => void;\n /** Callback that fires when the notification view opens. */\n onNotificationsOpen?: () => void;\n /** Callback that fires when the notification view closes. */\n onNotificationsClose?: () => void;\n}\n\nexport interface AppShellProps extends BaseProps, NoChildrenProp {\n /** The content of the application. */\n main: ReactNode;\n /** Props related to the app name and logo. */\n appInfo: AppInfoProps;\n /** Context manager configuration. */\n contextSwitcher?: ContextSwitcherProps;\n /** A set of navigation links for the application. */\n navLinks: NavLinkProps[];\n /** Props for the operator menu. */\n operator: OperatorProps;\n /** Props related to notifications for the application. */\n notifications?: NotificationProps;\n /**\n * The alignment of navigation links within the header.\n * @default 'end'\n */\n navAlignment?: 'start' | 'center' | 'end';\n /**\n * The positioning of the navigation links relative to the other app header elements.\n * @default 'inline'\n */\n navPosition?: 'inline' | 'below';\n /** Ref for the wrapping div element. */\n ref?: Ref<HTMLDivElement>;\n}\n"]}
@@ -1 +1 @@
1
- {"version":3,"file":"BannerPage.d.ts","sourceRoot":"","sources":["../../../src/components/PageTemplates/BannerPage.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,EAAE,EAA+B,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAGxE,OAAO,EAGL,YAAY,EAIb,MAAM,yBAAyB,CAAC;AAEjC,MAAM,WAAW,aAAa;IAC5B,kCAAkC;IAClC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,6BAA6B;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,0EAA0E;IAC1E,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,4CAA4C;IAC5C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC3B;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE,aAAa,CAAC;IACtB,mCAAmC;IACnC,CAAC,EAAE,SAAS,CAAC;IACb,oFAAoF;IACpF,CAAC,CAAC,EAAE,SAAS,CAAC;IACd,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B,sGAAsG;IACtG,OAAO,CAAC,EAAE,YAAY,GAAG,aAAa,GAAG,aAAa,CAAC;CACxD;AAED,eAAO,MAAM,qBAAqB,iKAmBhC,CAAC;AAIH,eAAO,MAAM,YAAY,2LA+BxB,CAAC;AAIF,eAAO,MAAM,sBAAsB,yGAmBlC,CAAC;AAUF,eAAO,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,GAAG,YAAY,CA4CzD,CAAC"}
1
+ {"version":3,"file":"BannerPage.d.ts","sourceRoot":"","sources":["../../../src/components/PageTemplates/BannerPage.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,EAAE,EAA+B,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAGxE,OAAO,EAGL,YAAY,EAIb,MAAM,yBAAyB,CAAC;AAEjC,MAAM,WAAW,aAAa;IAC5B,kCAAkC;IAClC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,6BAA6B;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,0EAA0E;IAC1E,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,4CAA4C;IAC5C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC3B;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE,aAAa,CAAC;IACtB,mCAAmC;IACnC,CAAC,EAAE,SAAS,CAAC;IACb,oFAAoF;IACpF,CAAC,CAAC,EAAE,SAAS,CAAC;IACd,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B,sGAAsG;IACtG,OAAO,CAAC,EAAE,YAAY,GAAG,aAAa,GAAG,aAAa,CAAC;CACxD;AAED,eAAO,MAAM,qBAAqB,iKAoBhC,CAAC;AAIH,eAAO,MAAM,YAAY,2LA+BxB,CAAC;AAIF,eAAO,MAAM,sBAAsB,yGAmBlC,CAAC;AAUF,eAAO,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,GAAG,YAAY,CA4CzD,CAAC"}
@@ -13,6 +13,7 @@ export const StyledBannerContainer = styled.div(({ backgroundImage, backgroundCo
13
13
  background-image: url('${backgroundImage}');
14
14
  background-size: cover;
15
15
  background-position: center;
16
+ background-repeat: no-repeat;
16
17
  `}
17
18
 
18
19
  ${backgroundColor &&
@@ -1 +1 @@
1
- {"version":3,"file":"BannerPage.js","sourceRoot":"","sources":["../../../src/components/PageTemplates/BannerPage.tsx"],"names":[],"mappings":"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","sourcesContent":["import { readableColor, transparentize } from 'polished';\nimport { FC, forwardRef, PropsWithoutRef, ReactNode, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n defaultThemeProp,\n Flex,\n ForwardProps,\n Grid,\n Text,\n tryCatch\n} from '@pega/cosmos-react-core';\n\nexport interface BannerOptions {\n /** An image url for the banner */\n backgroundImage?: string;\n /** A title for the banner */\n title: string;\n /** A fallback background color if the background image is not provided */\n backgroundColor?: string;\n /** Text that will appear below the title */\n message?: string;\n /** The light variant will provide a white translucent filter over the background image\n * with dark text. The dark variant will provide the opposite.\n * @default 'light'\n */\n variant?: 'light' | 'dark';\n /** Toggles the translucent filter provided by the variant\n * @default true\n */\n tintImage?: boolean;\n}\n\nexport interface BannerPageProps {\n banner: BannerOptions;\n /** Content for the first column */\n a: ReactNode;\n /** Content for the second column. If not provided the first column will stretch. */\n b?: ReactNode;\n ref?: Ref<HTMLDivElement>;\n /** Variants for the sizing of the content columns. Two column will make the columns equal in size. */\n variant?: 'two-column' | 'narrow-wide' | 'wide-narrow';\n}\n\nexport const StyledBannerContainer = styled.div<\n Pick<BannerOptions, 'backgroundImage' | 'backgroundColor'>\n>(({ backgroundImage, backgroundColor, theme }) => {\n return css`\n width: 100%;\n height: calc(${theme.base.spacing} * 38);\n\n ${backgroundImage &&\n css`\n background-image: url('${backgroundImage}');\n background-size: cover;\n background-position: center;\n `}\n\n ${backgroundColor &&\n css`\n background-color: ${backgroundColor};\n `}\n `;\n});\n\nStyledBannerContainer.defaultProps = defaultThemeProp;\n\nexport const StyledBanner = styled.div<\n Pick<BannerOptions, 'variant' | 'backgroundColor' | 'backgroundImage' | 'tintImage'>\n>(\n ({\n variant = 'light',\n backgroundColor,\n backgroundImage,\n tintImage = true,\n theme: {\n base: {\n palette: { light, dark }\n }\n }\n }) => {\n let textColor = variant === 'light' ? dark : light;\n let overlayColor = variant === 'light' ? transparentize(0.3, light) : transparentize(0.3, dark);\n if (backgroundColor && !backgroundImage) {\n textColor = tryCatch(() => readableColor(backgroundColor, light, dark)) ?? dark;\n overlayColor = 'transparent';\n } else if (!backgroundColor && !backgroundImage) {\n overlayColor = 'transparent';\n textColor = dark;\n }\n return css`\n background-color: ${tintImage ? overlayColor : 'transparent'};\n color: ${textColor};\n width: 100%;\n height: 100%;\n text-align: center;\n `;\n }\n);\n\nStyledBanner.defaultProps = defaultThemeProp;\n\nexport const StyledContentContainer = styled.div(\n ({\n theme: {\n base: { breakpoints, spacing }\n }\n }) => {\n return css`\n padding: calc(${spacing} * 2);\n width: 100%;\n margin: 0 auto;\n @media screen and (min-width: ${breakpoints.md}) {\n width: 100%;\n padding: calc(${spacing} * 2.5);\n }\n @media screen and (min-width: ${breakpoints.lg}) {\n max-width: 93.75rem;\n }\n `;\n }\n);\n\nStyledContentContainer.defaultProps = defaultThemeProp;\n\nconst variantMap = {\n 'two-column': '1fr 1fr',\n 'narrow-wide': '3fr 7fr',\n 'wide-narrow': '7fr 3fr'\n};\n\nexport const BannerPage: FC<BannerPageProps & ForwardProps> = forwardRef(\n (\n { banner, a, b, variant = 'two-column', ...restProps }: PropsWithoutRef<BannerPageProps>,\n ref: BannerPageProps['ref']\n ) => {\n const gridCols = variantMap[variant];\n return (\n <div ref={ref} {...restProps}>\n {banner && (\n <StyledBannerContainer\n backgroundImage={banner.backgroundImage}\n backgroundColor={banner.backgroundColor}\n >\n <Flex\n variant={banner.variant}\n backgroundImage={banner.backgroundImage}\n backgroundColor={banner.backgroundColor}\n as={StyledBanner}\n container={{ justify: 'center', alignItems: 'center', direction: 'column', gap: 1 }}\n tintImage={banner.tintImage}\n >\n <StyledContentContainer>\n <Text variant='h1'>{banner.title}</Text>\n {banner.message && (\n <Text variant='primary' as='p'>\n {banner.message}\n </Text>\n )}\n </StyledContentContainer>\n </Flex>\n </StyledBannerContainer>\n )}\n <Grid\n container={{ gap: 2 }}\n md={{ container: { cols: '1fr' } }}\n lg={{ container: { cols: b ? `${gridCols}` : '1fr' } }}\n as={StyledContentContainer}\n >\n <div>{a}</div>\n {b && <div>{b}</div>}\n </Grid>\n </div>\n );\n }\n);\n"]}
1
+ {"version":3,"file":"BannerPage.js","sourceRoot":"","sources":["../../../src/components/PageTemplates/BannerPage.tsx"],"names":[],"mappings":"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","sourcesContent":["import { readableColor, transparentize } from 'polished';\nimport { FC, forwardRef, PropsWithoutRef, ReactNode, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n defaultThemeProp,\n Flex,\n ForwardProps,\n Grid,\n Text,\n tryCatch\n} from '@pega/cosmos-react-core';\n\nexport interface BannerOptions {\n /** An image url for the banner */\n backgroundImage?: string;\n /** A title for the banner */\n title: string;\n /** A fallback background color if the background image is not provided */\n backgroundColor?: string;\n /** Text that will appear below the title */\n message?: string;\n /** The light variant will provide a white translucent filter over the background image\n * with dark text. The dark variant will provide the opposite.\n * @default 'light'\n */\n variant?: 'light' | 'dark';\n /** Toggles the translucent filter provided by the variant\n * @default true\n */\n tintImage?: boolean;\n}\n\nexport interface BannerPageProps {\n banner: BannerOptions;\n /** Content for the first column */\n a: ReactNode;\n /** Content for the second column. If not provided the first column will stretch. */\n b?: ReactNode;\n ref?: Ref<HTMLDivElement>;\n /** Variants for the sizing of the content columns. Two column will make the columns equal in size. */\n variant?: 'two-column' | 'narrow-wide' | 'wide-narrow';\n}\n\nexport const StyledBannerContainer = styled.div<\n Pick<BannerOptions, 'backgroundImage' | 'backgroundColor'>\n>(({ backgroundImage, backgroundColor, theme }) => {\n return css`\n width: 100%;\n height: calc(${theme.base.spacing} * 38);\n\n ${backgroundImage &&\n css`\n background-image: url('${backgroundImage}');\n background-size: cover;\n background-position: center;\n background-repeat: no-repeat;\n `}\n\n ${backgroundColor &&\n css`\n background-color: ${backgroundColor};\n `}\n `;\n});\n\nStyledBannerContainer.defaultProps = defaultThemeProp;\n\nexport const StyledBanner = styled.div<\n Pick<BannerOptions, 'variant' | 'backgroundColor' | 'backgroundImage' | 'tintImage'>\n>(\n ({\n variant = 'light',\n backgroundColor,\n backgroundImage,\n tintImage = true,\n theme: {\n base: {\n palette: { light, dark }\n }\n }\n }) => {\n let textColor = variant === 'light' ? dark : light;\n let overlayColor = variant === 'light' ? transparentize(0.3, light) : transparentize(0.3, dark);\n if (backgroundColor && !backgroundImage) {\n textColor = tryCatch(() => readableColor(backgroundColor, light, dark)) ?? dark;\n overlayColor = 'transparent';\n } else if (!backgroundColor && !backgroundImage) {\n overlayColor = 'transparent';\n textColor = dark;\n }\n return css`\n background-color: ${tintImage ? overlayColor : 'transparent'};\n color: ${textColor};\n width: 100%;\n height: 100%;\n text-align: center;\n `;\n }\n);\n\nStyledBanner.defaultProps = defaultThemeProp;\n\nexport const StyledContentContainer = styled.div(\n ({\n theme: {\n base: { breakpoints, spacing }\n }\n }) => {\n return css`\n padding: calc(${spacing} * 2);\n width: 100%;\n margin: 0 auto;\n @media screen and (min-width: ${breakpoints.md}) {\n width: 100%;\n padding: calc(${spacing} * 2.5);\n }\n @media screen and (min-width: ${breakpoints.lg}) {\n max-width: 93.75rem;\n }\n `;\n }\n);\n\nStyledContentContainer.defaultProps = defaultThemeProp;\n\nconst variantMap = {\n 'two-column': '1fr 1fr',\n 'narrow-wide': '3fr 7fr',\n 'wide-narrow': '7fr 3fr'\n};\n\nexport const BannerPage: FC<BannerPageProps & ForwardProps> = forwardRef(\n (\n { banner, a, b, variant = 'two-column', ...restProps }: PropsWithoutRef<BannerPageProps>,\n ref: BannerPageProps['ref']\n ) => {\n const gridCols = variantMap[variant];\n return (\n <div ref={ref} {...restProps}>\n {banner && (\n <StyledBannerContainer\n backgroundImage={banner.backgroundImage}\n backgroundColor={banner.backgroundColor}\n >\n <Flex\n variant={banner.variant}\n backgroundImage={banner.backgroundImage}\n backgroundColor={banner.backgroundColor}\n as={StyledBanner}\n container={{ justify: 'center', alignItems: 'center', direction: 'column', gap: 1 }}\n tintImage={banner.tintImage}\n >\n <StyledContentContainer>\n <Text variant='h1'>{banner.title}</Text>\n {banner.message && (\n <Text variant='primary' as='p'>\n {banner.message}\n </Text>\n )}\n </StyledContentContainer>\n </Flex>\n </StyledBannerContainer>\n )}\n <Grid\n container={{ gap: 2 }}\n md={{ container: { cols: '1fr' } }}\n lg={{ container: { cols: b ? `${gridCols}` : '1fr' } }}\n as={StyledContentContainer}\n >\n <div>{a}</div>\n {b && <div>{b}</div>}\n </Grid>\n </div>\n );\n }\n);\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pega/cosmos-react-wss",
3
- "version": "4.0.0-dev.14.0",
3
+ "version": "4.0.0-dev.14.2",
4
4
  "author": "Pegasystems",
5
5
  "license": "SEE LICENSE IN LICENSE",
6
6
  "repository": {
@@ -20,9 +20,9 @@
20
20
  "build": "tsc -b"
21
21
  },
22
22
  "dependencies": {
23
- "@pega/cosmos-react-core": "4.0.0-dev.14.0",
24
- "@pega/cosmos-react-social": "4.0.0-dev.14.0",
25
- "@pega/cosmos-react-work": "4.0.0-dev.14.0",
23
+ "@pega/cosmos-react-core": "4.0.0-dev.14.2",
24
+ "@pega/cosmos-react-social": "4.0.0-dev.14.2",
25
+ "@pega/cosmos-react-work": "4.0.0-dev.14.2",
26
26
  "@types/react": "^16.14.24 || ^17.0.38",
27
27
  "@types/react-dom": "^16.9.14 || ^17.0.11",
28
28
  "@types/styled-components": "^5.1.26",