@pega/cosmos-react-core 9.0.0-build.2.5 → 9.0.0-build.2.6
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.
|
@@ -37,6 +37,7 @@ export interface DrawerProps extends AsProp, BaseProps {
|
|
|
37
37
|
/**
|
|
38
38
|
* If true, the Drawer will be resizable. Will not be applied if `placement` is set to `top` or `bottom`.
|
|
39
39
|
* @default false
|
|
40
|
+
* @internal Can only be used with one drawer at a time.
|
|
40
41
|
*/
|
|
41
42
|
resizeable?: boolean;
|
|
42
43
|
/** Callback fired after Drawer opens. */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../src/components/Drawer/Drawer.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAEV,iBAAiB,EACjB,SAAS,EAIV,MAAM,OAAO,CAAC;AAKf,OAAO,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAanE,MAAM,WAAW,WAAY,SAAQ,MAAM,EAAE,SAAS;IACpD;;;OAGG;IACH,IAAI,EAAE,OAAO,CAAC;IACd,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,SAAS,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAChD;;;OAGG;IACH,QAAQ,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;IAChC;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd
|
|
1
|
+
{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../src/components/Drawer/Drawer.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAEV,iBAAiB,EACjB,SAAS,EAIV,MAAM,OAAO,CAAC;AAKf,OAAO,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAanE,MAAM,WAAW,WAAY,SAAQ,MAAM,EAAE,SAAS;IACpD;;;OAGG;IACH,IAAI,EAAE,OAAO,CAAC;IACd,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,SAAS,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAChD;;;OAGG;IACH,QAAQ,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;IAChC;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,yCAAyC;IACzC,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,0CAA0C;IAC1C,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,0CAA0C;IAC1C,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,2CAA2C;IAC3C,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,uEAAuE;IACvE,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,KAAK,KAAK,GAAG,MAAM,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,CAAC;AAEvD,eAAO,MAAM,YAAY;WAA6C,KAAK;UAuCzE,CAAC;AAIH,eAAO,MAAM,MAAM,EAAE,iBAAiB,CAAC,WAAW,GAAG,YAAY,CA+J/D,CAAC;AAEH,eAAe,MAAM,CAAC"}
|
|
@@ -82,6 +82,8 @@ export const Drawer = forwardRef(function Drawer(props, ref) {
|
|
|
82
82
|
}, [open]);
|
|
83
83
|
const dragStartXRef = useRef();
|
|
84
84
|
useEffect(() => {
|
|
85
|
+
if (!resizeable || !drawerRef.current)
|
|
86
|
+
return;
|
|
85
87
|
const targetNode = getChildOfRootNode(drawerRef);
|
|
86
88
|
if (!targetNode)
|
|
87
89
|
return;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Drawer.js","sourceRoot":"","sources":["../../../src/components/Drawer/Drawer.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useCallback, forwardRef, useState, useRef } from 'react';\nimport type {\n Ref,\n FunctionComponent,\n ReactNode,\n TransitionEvent,\n MouseEvent as ReactMouseEvent,\n KeyboardEvent as ReactKeyboardEvent\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport { remToPx } from 'polished';\n\nimport { useOuterEvent, useConsolidatedRef, usePrevious, useDirection } from '../../hooks';\nimport type { AsProp, BaseProps, ForwardProps } from '../../types';\nimport { getChildOfRootNode, reflow } from '../../utils';\nimport { defaultThemeProp } from '../../theme';\nimport {\n resizeDrawerKeyboardStep,\n resizeDrawerMaxWidth,\n resizeDrawerMinWidth\n} from '../../styles/constants';\n\nimport ResizeHandle from './ResizeHandle';\n\nconst drawerMinWidth = remToPx(resizeDrawerMinWidth);\n\nexport interface DrawerProps extends AsProp, BaseProps {\n /**\n * If true, the Drawer will be visible.\n * @default false\n */\n open: boolean;\n /** Content of the Drawer. */\n children?: ReactNode;\n /**\n * Determines whether a drop shadow should be visible along the edge of the Drawer for contrast purposes.\n * @default false\n */\n shadow?: boolean;\n /**\n * Used to determine which side of the viewport the Drawer should open from.\n * @default 'right'\n */\n placement?: 'top' | 'right' | 'bottom' | 'left';\n /**\n * The position of the Drawer.\n * @default 'absolute'\n */\n position?: 'absolute' | 'fixed';\n /**\n * Determines the speed of the transition. This value comes from `theme.base.animation.speed`.\n * @default '0.25s'\n */\n transitionSpeed?: string;\n /**\n * The width or height that the Drawer will open to, depending on its placement.\n * If `resizeable`, is true this value will be overridden by the width set by the user.\n * @default '100%'\n */\n size?: string;\n /**\n * If true, the Drawer will be resizable. Will not be applied if `placement` is set to `top` or `bottom`.\n * @default false\n */\n resizeable?: boolean;\n /** Callback fired after Drawer opens. */\n onAfterOpen?: () => void;\n /** Callback fired after Drawer closes. */\n onAfterClose?: () => void;\n /** Callback fired before Drawer opens. */\n onBeforeOpen?: () => void;\n /** Callback fired before Drawer closes. */\n onBeforeClose?: () => void;\n /** Callback fired when a click action occurs outside of the Drawer. */\n onOuterClick?: () => void;\n /**\n * If true, removes the component from the real DOM when closed. For full virtual DOM unmount(if necessary), perform at a parent level.\n * @default false\n */\n nullWhenClosed?: boolean;\n}\n\ntype State = 'open' | 'closed' | 'opening' | 'closing';\n\nexport const StyledDrawer = styled.div<Partial<DrawerProps & { state: State }>>(props => {\n const { state, shadow, position, placement, transitionSpeed, size, resizeable, theme } = props;\n let dimension = 'horizontal';\n let axis = 'X';\n let anchor = 'top';\n\n if (placement === 'top' || placement === 'bottom') {\n dimension = 'vertical';\n axis = 'Y';\n anchor = 'left';\n }\n\n const translate = state === 'open' || state === 'opening' ? 0 : '100%';\n const speed = transitionSpeed || theme.base.animation.speed;\n\n return css`\n z-index: ${theme.base['z-index'].drawer};\n position: ${position};\n ${placement}: 0;\n ${anchor}: 0;\n height: ${dimension === 'vertical' ? size : '100%'};\n width: ${dimension === 'horizontal' ? size : '100%'};\n transition-property: transform, box-shadow, opacity;\n transition-duration: max(${speed}, 0.0001s);\n transition-timing-function: ${theme.base.animation.timing.ease};\n transform: ${state === 'open'\n ? 'none'\n : `translate${axis}(${placement === 'top' || placement === 'left' ? '-' : ''}${translate})`};\n\n ${shadow &&\n css`\n box-shadow: ${theme.base.shadow.high};\n `}\n\n ${resizeable &&\n css`\n width: ${dimension === 'horizontal' ? 'var(--resize-drawer-width)' : '100%'};\n `}\n `;\n});\n\nStyledDrawer.defaultProps = defaultThemeProp;\n\nexport const Drawer: FunctionComponent<DrawerProps & ForwardProps> = forwardRef(function Drawer(\n props: DrawerProps,\n ref: Ref<HTMLElement>\n) {\n const {\n open = false,\n shadow = false,\n position = 'absolute',\n children,\n placement = 'right',\n transitionSpeed,\n size = '100%',\n resizeable = false,\n onAfterOpen,\n onAfterClose,\n onBeforeOpen,\n onBeforeClose,\n onOuterClick,\n nullWhenClosed = false,\n ...restProps\n } = props;\n\n const drawerRef = useConsolidatedRef(ref);\n const { ltr, rtl } = useDirection();\n\n const [state, setState] = useState<State>(open ? 'open' : 'closed');\n\n let prevState = usePrevious(state);\n if (!prevState) prevState = state;\n\n useOuterEvent(\n 'mousedown',\n [drawerRef],\n useCallback(() => {\n if (open) onOuterClick?.();\n }, [open, onOuterClick])\n );\n\n useEffect(() => {\n if (open && (state === 'closed' || state === 'closing')) {\n onBeforeOpen?.();\n reflow(drawerRef.current);\n setState('opening');\n } else if (!open && (state === 'open' || state === 'opening')) {\n onBeforeClose?.();\n setState('closing');\n } else if (open && state === 'open' && prevState !== 'open') {\n onAfterOpen?.();\n } else if (!open && state === 'closed' && prevState !== 'closed') {\n onAfterClose?.();\n }\n }, [open, state, prevState, onBeforeOpen, onBeforeClose, onAfterOpen, onAfterClose]);\n\n const onTransitionEnd = useCallback(\n (e: TransitionEvent): void => {\n if (e.target !== drawerRef.current || e.propertyName !== 'transform') return;\n setState(open ? 'open' : 'closed');\n },\n [open]\n );\n\n const dragStartXRef = useRef<number>();\n\n useEffect(() => {\n const targetNode = getChildOfRootNode(drawerRef);\n if (!targetNode) return;\n if (!targetNode.style.getPropertyValue('--resize-drawer-width')) {\n targetNode.style.setProperty('--resize-drawer-width', size);\n }\n }, [drawerRef.current]);\n\n const handleResize = useCallback(\n (e: ReactMouseEvent) => {\n const targetNode = getChildOfRootNode(drawerRef);\n const rect = drawerRef.current?.getBoundingClientRect();\n if (!rect || !targetNode) return;\n\n dragStartXRef.current = e.clientX;\n\n const ac = new AbortController();\n targetNode.addEventListener(\n 'mousemove',\n moveEvent => {\n if (!dragStartXRef.current || !rect.width) return;\n\n const initialX = dragStartXRef.current;\n const widthDiff =\n placement === 'right' ? initialX - moveEvent.clientX : moveEvent.clientX - initialX;\n\n const newWidth = Math.max(widthDiff + rect.width, parseInt(drawerMinWidth, 10));\n\n // Set root-level CSS variable to communicate width to AppShell\n targetNode.style.setProperty(\n '--resize-drawer-width',\n `clamp(${drawerMinWidth}, ${newWidth}px, ${resizeDrawerMaxWidth})`\n );\n },\n { passive: true, signal: ac.signal }\n );\n\n targetNode.addEventListener(\n 'mouseup',\n () => {\n ac.abort();\n },\n { once: true }\n );\n },\n [placement]\n );\n\n const keyboardResize = useCallback(\n (e: ReactKeyboardEvent, grabbed: boolean) => {\n if (!grabbed) return;\n const targetNode = getChildOfRootNode(drawerRef);\n const resizeStep = document.documentElement.clientWidth * resizeDrawerKeyboardStep;\n const rect = drawerRef.current?.getBoundingClientRect();\n if (!rect || !targetNode) return;\n if (e.code !== 'ArrowLeft' && e.code !== 'ArrowRight') return;\n e.preventDefault();\n\n const resizeDirection = (e.code === 'ArrowLeft' ? 1 : -1) * (placement === 'right' ? 1 : -1);\n\n const newWidth = Math.max(\n rect.width + resizeDirection * resizeStep,\n parseInt(drawerMinWidth, 10)\n );\n targetNode.style.setProperty(\n '--resize-drawer-width',\n `clamp(${drawerMinWidth}, ${newWidth}px, ${resizeDrawerMaxWidth})`\n );\n },\n [placement]\n );\n\n const renderResizeHandle =\n resizeable &&\n state === 'open' &&\n ((placement === 'left' && rtl) || (placement === 'right' && ltr));\n\n return state === 'closed' && !open && nullWhenClosed ? null : (\n <StyledDrawer\n ref={drawerRef}\n position={position}\n shadow={shadow && open}\n transitionSpeed={transitionSpeed}\n placement={placement}\n size={size}\n resizeable={resizeable}\n open={open}\n state={state}\n onTransitionEnd={onTransitionEnd}\n {...restProps}\n >\n {children}\n {renderResizeHandle && <ResizeHandle onMouseDown={handleResize} onKeyDown={keyboardResize} />}\n </StyledDrawer>\n );\n});\n\nexport default Drawer;\n"]}
|
|
1
|
+
{"version":3,"file":"Drawer.js","sourceRoot":"","sources":["../../../src/components/Drawer/Drawer.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useCallback, forwardRef, useState, useRef } from 'react';\nimport type {\n Ref,\n FunctionComponent,\n ReactNode,\n TransitionEvent,\n MouseEvent as ReactMouseEvent,\n KeyboardEvent as ReactKeyboardEvent\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport { remToPx } from 'polished';\n\nimport { useOuterEvent, useConsolidatedRef, usePrevious, useDirection } from '../../hooks';\nimport type { AsProp, BaseProps, ForwardProps } from '../../types';\nimport { getChildOfRootNode, reflow } from '../../utils';\nimport { defaultThemeProp } from '../../theme';\nimport {\n resizeDrawerKeyboardStep,\n resizeDrawerMaxWidth,\n resizeDrawerMinWidth\n} from '../../styles/constants';\n\nimport ResizeHandle from './ResizeHandle';\n\nconst drawerMinWidth = remToPx(resizeDrawerMinWidth);\n\nexport interface DrawerProps extends AsProp, BaseProps {\n /**\n * If true, the Drawer will be visible.\n * @default false\n */\n open: boolean;\n /** Content of the Drawer. */\n children?: ReactNode;\n /**\n * Determines whether a drop shadow should be visible along the edge of the Drawer for contrast purposes.\n * @default false\n */\n shadow?: boolean;\n /**\n * Used to determine which side of the viewport the Drawer should open from.\n * @default 'right'\n */\n placement?: 'top' | 'right' | 'bottom' | 'left';\n /**\n * The position of the Drawer.\n * @default 'absolute'\n */\n position?: 'absolute' | 'fixed';\n /**\n * Determines the speed of the transition. This value comes from `theme.base.animation.speed`.\n * @default '0.25s'\n */\n transitionSpeed?: string;\n /**\n * The width or height that the Drawer will open to, depending on its placement.\n * If `resizeable`, is true this value will be overridden by the width set by the user.\n * @default '100%'\n */\n size?: string;\n /**\n * If true, the Drawer will be resizable. Will not be applied if `placement` is set to `top` or `bottom`.\n * @default false\n * @internal Can only be used with one drawer at a time.\n */\n resizeable?: boolean;\n /** Callback fired after Drawer opens. */\n onAfterOpen?: () => void;\n /** Callback fired after Drawer closes. */\n onAfterClose?: () => void;\n /** Callback fired before Drawer opens. */\n onBeforeOpen?: () => void;\n /** Callback fired before Drawer closes. */\n onBeforeClose?: () => void;\n /** Callback fired when a click action occurs outside of the Drawer. */\n onOuterClick?: () => void;\n /**\n * If true, removes the component from the real DOM when closed. For full virtual DOM unmount(if necessary), perform at a parent level.\n * @default false\n */\n nullWhenClosed?: boolean;\n}\n\ntype State = 'open' | 'closed' | 'opening' | 'closing';\n\nexport const StyledDrawer = styled.div<Partial<DrawerProps & { state: State }>>(props => {\n const { state, shadow, position, placement, transitionSpeed, size, resizeable, theme } = props;\n let dimension = 'horizontal';\n let axis = 'X';\n let anchor = 'top';\n\n if (placement === 'top' || placement === 'bottom') {\n dimension = 'vertical';\n axis = 'Y';\n anchor = 'left';\n }\n\n const translate = state === 'open' || state === 'opening' ? 0 : '100%';\n const speed = transitionSpeed || theme.base.animation.speed;\n\n return css`\n z-index: ${theme.base['z-index'].drawer};\n position: ${position};\n ${placement}: 0;\n ${anchor}: 0;\n height: ${dimension === 'vertical' ? size : '100%'};\n width: ${dimension === 'horizontal' ? size : '100%'};\n transition-property: transform, box-shadow, opacity;\n transition-duration: max(${speed}, 0.0001s);\n transition-timing-function: ${theme.base.animation.timing.ease};\n transform: ${state === 'open'\n ? 'none'\n : `translate${axis}(${placement === 'top' || placement === 'left' ? '-' : ''}${translate})`};\n\n ${shadow &&\n css`\n box-shadow: ${theme.base.shadow.high};\n `}\n\n ${resizeable &&\n css`\n width: ${dimension === 'horizontal' ? 'var(--resize-drawer-width)' : '100%'};\n `}\n `;\n});\n\nStyledDrawer.defaultProps = defaultThemeProp;\n\nexport const Drawer: FunctionComponent<DrawerProps & ForwardProps> = forwardRef(function Drawer(\n props: DrawerProps,\n ref: Ref<HTMLElement>\n) {\n const {\n open = false,\n shadow = false,\n position = 'absolute',\n children,\n placement = 'right',\n transitionSpeed,\n size = '100%',\n resizeable = false,\n onAfterOpen,\n onAfterClose,\n onBeforeOpen,\n onBeforeClose,\n onOuterClick,\n nullWhenClosed = false,\n ...restProps\n } = props;\n\n const drawerRef = useConsolidatedRef(ref);\n const { ltr, rtl } = useDirection();\n\n const [state, setState] = useState<State>(open ? 'open' : 'closed');\n\n let prevState = usePrevious(state);\n if (!prevState) prevState = state;\n\n useOuterEvent(\n 'mousedown',\n [drawerRef],\n useCallback(() => {\n if (open) onOuterClick?.();\n }, [open, onOuterClick])\n );\n\n useEffect(() => {\n if (open && (state === 'closed' || state === 'closing')) {\n onBeforeOpen?.();\n reflow(drawerRef.current);\n setState('opening');\n } else if (!open && (state === 'open' || state === 'opening')) {\n onBeforeClose?.();\n setState('closing');\n } else if (open && state === 'open' && prevState !== 'open') {\n onAfterOpen?.();\n } else if (!open && state === 'closed' && prevState !== 'closed') {\n onAfterClose?.();\n }\n }, [open, state, prevState, onBeforeOpen, onBeforeClose, onAfterOpen, onAfterClose]);\n\n const onTransitionEnd = useCallback(\n (e: TransitionEvent): void => {\n if (e.target !== drawerRef.current || e.propertyName !== 'transform') return;\n setState(open ? 'open' : 'closed');\n },\n [open]\n );\n\n const dragStartXRef = useRef<number>();\n\n useEffect(() => {\n if (!resizeable || !drawerRef.current) return;\n const targetNode = getChildOfRootNode(drawerRef);\n if (!targetNode) return;\n if (!targetNode.style.getPropertyValue('--resize-drawer-width')) {\n targetNode.style.setProperty('--resize-drawer-width', size);\n }\n }, [drawerRef.current]);\n\n const handleResize = useCallback(\n (e: ReactMouseEvent) => {\n const targetNode = getChildOfRootNode(drawerRef);\n const rect = drawerRef.current?.getBoundingClientRect();\n if (!rect || !targetNode) return;\n\n dragStartXRef.current = e.clientX;\n\n const ac = new AbortController();\n targetNode.addEventListener(\n 'mousemove',\n moveEvent => {\n if (!dragStartXRef.current || !rect.width) return;\n\n const initialX = dragStartXRef.current;\n const widthDiff =\n placement === 'right' ? initialX - moveEvent.clientX : moveEvent.clientX - initialX;\n\n const newWidth = Math.max(widthDiff + rect.width, parseInt(drawerMinWidth, 10));\n\n // Set root-level CSS variable to communicate width to AppShell\n targetNode.style.setProperty(\n '--resize-drawer-width',\n `clamp(${drawerMinWidth}, ${newWidth}px, ${resizeDrawerMaxWidth})`\n );\n },\n { passive: true, signal: ac.signal }\n );\n\n targetNode.addEventListener(\n 'mouseup',\n () => {\n ac.abort();\n },\n { once: true }\n );\n },\n [placement]\n );\n\n const keyboardResize = useCallback(\n (e: ReactKeyboardEvent, grabbed: boolean) => {\n if (!grabbed) return;\n const targetNode = getChildOfRootNode(drawerRef);\n const resizeStep = document.documentElement.clientWidth * resizeDrawerKeyboardStep;\n const rect = drawerRef.current?.getBoundingClientRect();\n if (!rect || !targetNode) return;\n if (e.code !== 'ArrowLeft' && e.code !== 'ArrowRight') return;\n e.preventDefault();\n\n const resizeDirection = (e.code === 'ArrowLeft' ? 1 : -1) * (placement === 'right' ? 1 : -1);\n\n const newWidth = Math.max(\n rect.width + resizeDirection * resizeStep,\n parseInt(drawerMinWidth, 10)\n );\n targetNode.style.setProperty(\n '--resize-drawer-width',\n `clamp(${drawerMinWidth}, ${newWidth}px, ${resizeDrawerMaxWidth})`\n );\n },\n [placement]\n );\n\n const renderResizeHandle =\n resizeable &&\n state === 'open' &&\n ((placement === 'left' && rtl) || (placement === 'right' && ltr));\n\n return state === 'closed' && !open && nullWhenClosed ? null : (\n <StyledDrawer\n ref={drawerRef}\n position={position}\n shadow={shadow && open}\n transitionSpeed={transitionSpeed}\n placement={placement}\n size={size}\n resizeable={resizeable}\n open={open}\n state={state}\n onTransitionEnd={onTransitionEnd}\n {...restProps}\n >\n {children}\n {renderResizeHandle && <ResizeHandle onMouseDown={handleResize} onKeyDown={keyboardResize} />}\n </StyledDrawer>\n );\n});\n\nexport default Drawer;\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pega/cosmos-react-core",
|
|
3
|
-
"version": "9.0.0-build.2.
|
|
3
|
+
"version": "9.0.0-build.2.6",
|
|
4
4
|
"description": "Cosmos is a visual design system and UI component collection. Its goal is to empower application developers in their pursuit to create engaging and rewarding user experiences.",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE",
|
|
6
6
|
"author": "Pegasystems",
|