@pega/cosmos-react-work 2.0.0-dev.12.0 → 2.0.0-dev.14.1

package/lib/components/CaseView/CaseView.styles.js

@@ -0,0 +1,115 @@
+import styled, { css } from 'styled-components';
+import { defaultThemeProp, Tabs } from '@pega/cosmos-react-core';
+export const StyledCaseViewContent = styled.div(({ theme, forceMobile, isMediumOrAbove, persistentUtility }) => {
+    return css `
+    padding: calc(2 * ${theme.base.spacing});
+
+    ${persistentUtility &&
+        isMediumOrAbove &&
+        css `
+      margin-inline-start: calc(2 * ${theme.base.spacing});
+    `}
+
+    ${!forceMobile &&
+        isMediumOrAbove &&
+        css `
+      padding: calc(2 * ${theme.base.spacing}) 0;
+    `}
+  `;
+});
+export const StyledMobileTabs = styled(Tabs)(({ theme, fullWidth }) => {
+    return css `
+    border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};
+    ${fullWidth &&
+        css `
+      margin: 0 calc(-2 * ${theme.base.spacing});
+    `}
+  `;
+});
+StyledMobileTabs.defaultProps = defaultThemeProp;
+export const StyledUtilToggle = styled.button(({ theme }) => {
+    return css `
+    align-self: flex-end;
+    color: ${theme.base.palette['foreground-color']};
+    margin-inline-end: 0.375rem;
+  `;
+});
+StyledUtilToggle.defaultProps = defaultThemeProp;
+export const StyledCaseViewUtilities = styled.div(({ utilitiesShown, theme }) => {
+    return css `
+      width: ${utilitiesShown ? '25rem' : 'auto'};
+      height: max-content;
+      padding: calc(2 * ${theme.base.spacing}) 0 calc(2 * ${theme.base.spacing});
+    `;
+});
+StyledCaseViewUtilities.defaultProps = defaultThemeProp;
+export const StyledCaseView = styled.div(({ theme, forceMobile, isMediumOrAbove, summaryOffset }) => {
+    return css `
+    --case-view-header-offset: calc(var(--appshell-offset, 0rem) + ${summaryOffset}px);
+    --case-view-content-height: calc(100vh - var(--case-view-header-offset, 0rem));
+    min-height: calc(100vh - var(--appshell-offset, 0rem));
+    position: relative;
+    background-color: ${theme.base.palette['app-background']};
+
+    > :last-child {
+      ${!forceMobile &&
+        isMediumOrAbove &&
+        css `
+        margin-inline-end: calc(2 * ${theme.base.spacing});
+      `}
+    }
+  `;
+});
+StyledCaseView.defaultProps = defaultThemeProp;
+export const StyledSummaryRegion = styled.div(({ theme, forceMobile, desktop }) => {
+    return css `
+    position: sticky;
+    top: var(--appshell-offset, 0);
+    width: 100%;
+    background-color: ${theme.base.palette['primary-background']};
+    z-index: ${theme.base['z-index'].popover};
+
+    ${!forceMobile &&
+        desktop &&
+        css `
+      height: var(--case-view-content-height);
+    `}
+  `;
+});
+StyledSummaryRegion.defaultProps = defaultThemeProp;
+export const StyledCaseDrawer = styled.div(({ theme }) => {
+    return css `
+    min-width: 21.875rem;
+    max-width: 31.25rem;
+    width: calc((100vw - 31.25rem) / 10 + 21.875rem);
+    background-color: ${theme.base.palette['primary-background']};
+    height: calc(100vh - var(--case-view-header-offset, 0));
+    top: var(--case-view-header-offset);
+    z-index: ${theme.base['z-index'].drawer - 1};
+  `;
+});
+StyledCaseDrawer.defaultProps = defaultThemeProp;
+export const StyledCaseDrawerContent = styled.div(({ theme }) => {
+    return css `
+    background-color: ${theme.base.palette['app-background']};
+    padding: calc(2 * ${theme.base.spacing});
+    height: 100%;
+    overflow: auto;
+  `;
+});
+StyledCaseDrawerContent.defaultProps = defaultThemeProp;
+export const StyledPersistentUtility = styled.div(() => {
+    return css `
+    max-width: 60ch;
+    overflow: auto;
+    position: sticky;
+    height: var(--case-view-content-height);
+    top: var(--case-view-header-offset);
+  `;
+});
+StyledPersistentUtility.defaultProps = defaultThemeProp;
+export const ScrollStick = styled.div `
+  position: sticky;
+  top: 0;
+`;
+//# sourceMappingURL=CaseView.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CaseView.styles.js","sourceRoot":"","sources":["../../../src/components/CaseView/CaseView.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { defaultThemeProp, Tabs } from '@pega/cosmos-react-core';\n\nexport const StyledCaseViewContent = styled.div<{\n  forceMobile?: boolean;\n  isMediumOrAbove?: boolean;\n  persistentUtility?: boolean;\n}>(({ theme, forceMobile, isMediumOrAbove, persistentUtility }) => {\n  return css`\n    padding: calc(2 * ${theme.base.spacing});\n\n    ${persistentUtility &&\n    isMediumOrAbove &&\n    css`\n      margin-inline-start: calc(2 * ${theme.base.spacing});\n    `}\n\n    ${!forceMobile &&\n    isMediumOrAbove &&\n    css`\n      padding: calc(2 * ${theme.base.spacing}) 0;\n    `}\n  `;\n});\n\nexport const StyledMobileTabs = styled(Tabs)<{ fullWidth: boolean }>(({ theme, fullWidth }) => {\n  return css`\n    border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};\n    ${fullWidth &&\n    css`\n      margin: 0 calc(-2 * ${theme.base.spacing});\n    `}\n  `;\n});\n\nStyledMobileTabs.defaultProps = defaultThemeProp;\n\nexport const StyledUtilToggle = styled.button(({ theme }) => {\n  return css`\n    align-self: flex-end;\n    color: ${theme.base.palette['foreground-color']};\n    margin-inline-end: 0.375rem;\n  `;\n});\n\nStyledUtilToggle.defaultProps = defaultThemeProp;\n\nexport const StyledCaseViewUtilities = styled.div<{ utilitiesShown: boolean }>(\n  ({ utilitiesShown, theme }) => {\n    return css`\n      width: ${utilitiesShown ? '25rem' : 'auto'};\n      height: max-content;\n      padding: calc(2 * ${theme.base.spacing}) 0 calc(2 * ${theme.base.spacing});\n    `;\n  }\n);\n\nStyledCaseViewUtilities.defaultProps = defaultThemeProp;\n\nexport const StyledCaseView = styled.div<{\n  forceMobile?: boolean;\n  isMediumOrAbove?: boolean;\n  summaryOffset: number;\n}>(({ theme, forceMobile, isMediumOrAbove, summaryOffset }) => {\n  return css`\n    --case-view-header-offset: calc(var(--appshell-offset, 0rem) + ${summaryOffset}px);\n    --case-view-content-height: calc(100vh - var(--case-view-header-offset, 0rem));\n    min-height: calc(100vh - var(--appshell-offset, 0rem));\n    position: relative;\n    background-color: ${theme.base.palette['app-background']};\n\n    > :last-child {\n      ${!forceMobile &&\n      isMediumOrAbove &&\n      css`\n        margin-inline-end: calc(2 * ${theme.base.spacing});\n      `}\n    }\n  `;\n});\n\nStyledCaseView.defaultProps = defaultThemeProp;\n\nexport const StyledSummaryRegion = styled.div<{\n  forceMobile?: boolean;\n  desktop?: boolean;\n}>(({ theme, forceMobile, desktop }) => {\n  return css`\n    position: sticky;\n    top: var(--appshell-offset, 0);\n    width: 100%;\n    background-color: ${theme.base.palette['primary-background']};\n    z-index: ${theme.base['z-index'].popover};\n\n    ${!forceMobile &&\n    desktop &&\n    css`\n      height: var(--case-view-content-height);\n    `}\n  `;\n});\n\nStyledSummaryRegion.defaultProps = defaultThemeProp;\n\nexport const StyledCaseDrawer = styled.div(({ theme }) => {\n  return css`\n    min-width: 21.875rem;\n    max-width: 31.25rem;\n    width: calc((100vw - 31.25rem) / 10 + 21.875rem);\n    background-color: ${theme.base.palette['primary-background']};\n    height: calc(100vh - var(--case-view-header-offset, 0));\n    top: var(--case-view-header-offset);\n    z-index: ${theme.base['z-index'].drawer - 1};\n  `;\n});\n\nStyledCaseDrawer.defaultProps = defaultThemeProp;\n\nexport const StyledCaseDrawerContent = styled.div(({ theme }) => {\n  return css`\n    background-color: ${theme.base.palette['app-background']};\n    padding: calc(2 * ${theme.base.spacing});\n    height: 100%;\n    overflow: auto;\n  `;\n});\n\nStyledCaseDrawerContent.defaultProps = defaultThemeProp;\n\nexport const StyledPersistentUtility = styled.div(() => {\n  return css`\n    max-width: 60ch;\n    overflow: auto;\n    position: sticky;\n    height: var(--case-view-content-height);\n    top: var(--case-view-header-offset);\n  `;\n});\n\nStyledPersistentUtility.defaultProps = defaultThemeProp;\n\nexport const ScrollStick = styled.div`\n  position: sticky;\n  top: 0;\n`;\n"]}

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

@@ -1,5 +1,6 @@
 export { default } from './CaseView';
-export { CaseViewProps, StyledCaseView, StyledCaseViewContent, StyledCaseDrawer, StyledCaseDrawerContent, StyledSummaryRegion } from './CaseView';
+export { CaseViewProps } from './CaseView';
+export { StyledCaseView, StyledCaseViewContent, StyledCaseDrawer, StyledCaseDrawerContent, StyledSummaryRegion } from './CaseView.styles';
 export { default as MobileCaseView } from './MobileCaseView';
 export { MobileCaseViewProps } from './MobileCaseView';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/CaseView/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EACL,aAAa,EACb,cAAc,EACd,qBAAqB,EACrB,gBAAgB,EAChB,uBAAuB,EACvB,mBAAmB,EACpB,MAAM,YAAY,CAAC;AACpB,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/CaseView/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAC3C,OAAO,EACL,cAAc,EACd,qBAAqB,EACrB,gBAAgB,EAChB,uBAAuB,EACvB,mBAAmB,EACpB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC"}

package/lib/components/CaseView/index.js

@@ -1,4 +1,4 @@
 export { default } from './CaseView';
-export { StyledCaseView, StyledCaseViewContent, StyledCaseDrawer, StyledCaseDrawerContent, StyledSummaryRegion } from './CaseView';
+export { StyledCaseView, StyledCaseViewContent, StyledCaseDrawer, StyledCaseDrawerContent, StyledSummaryRegion } from './CaseView.styles';
 export { default as MobileCaseView } from './MobileCaseView';
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/CaseView/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAEL,cAAc,EACd,qBAAqB,EACrB,gBAAgB,EAChB,uBAAuB,EACvB,mBAAmB,EACpB,MAAM,YAAY,CAAC;AACpB,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC","sourcesContent":["export { default } from './CaseView';\nexport {\n  CaseViewProps,\n  StyledCaseView,\n  StyledCaseViewContent,\n  StyledCaseDrawer,\n  StyledCaseDrawerContent,\n  StyledSummaryRegion\n} from './CaseView';\nexport { default as MobileCaseView } from './MobileCaseView';\nexport { MobileCaseViewProps } from './MobileCaseView';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/CaseView/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AAErC,OAAO,EACL,cAAc,EACd,qBAAqB,EACrB,gBAAgB,EAChB,uBAAuB,EACvB,mBAAmB,EACpB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC","sourcesContent":["export { default } from './CaseView';\nexport { CaseViewProps } from './CaseView';\nexport {\n  StyledCaseView,\n  StyledCaseViewContent,\n  StyledCaseDrawer,\n  StyledCaseDrawerContent,\n  StyledSummaryRegion\n} from './CaseView.styles';\nexport { default as MobileCaseView } from './MobileCaseView';\nexport { MobileCaseViewProps } from './MobileCaseView';\n"]}

package/lib/components/ConfigurableLayout/ConfigurableLayout.d.ts

@@ -0,0 +1,4 @@
+import type { ConfigurableLayoutProps } from './ConfigurableLayout.types';
+declare const ConfigurableLayout: ({ items, arrangement }: ConfigurableLayoutProps) => JSX.Element;
+export default ConfigurableLayout;
+//# sourceMappingURL=ConfigurableLayout.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ConfigurableLayout.d.ts","sourceRoot":"","sources":["../../../src/components/ConfigurableLayout/ConfigurableLayout.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,4BAA4B,CAAC;AAwB1E,QAAA,MAAM,kBAAkB,2BAA4B,uBAAuB,gBA+F1E,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/lib/components/ConfigurableLayout/ConfigurableLayout.js

@@ -0,0 +1,94 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useEffect, useRef, useMemo, useCallback } from 'react';
+import styled, { css } from 'styled-components';
+import { Flex, defaultThemeProp } from '@pega/cosmos-react-core';
+import { containerMinWidth, cellGap } from './defaults';
+import LayoutCell from './LayoutCell';
+const StyledCellGrid = styled.div(({ theme }) => {
+    return css `
+    /* Note: inset position used to negate "column" inline margin on items */
+    position: relative;
+    inset-inline: calc(-${cellGap} * ${theme.base.spacing});
+    width: calc(100% + ${cellGap * 2} * ${theme.base.spacing});
+    max-width: calc(100% + ${cellGap * 2} * ${theme.base.spacing});
+  `;
+});
+StyledCellGrid.defaultProps = defaultThemeProp;
+const StyledContainerRuler = styled.div(({ theme }) => {
+    return css `
+    margin-inline: calc(${cellGap} * ${theme.base.spacing});
+    width: calc(100% - ${cellGap * 2} * ${theme.base.spacing});
+  `;
+});
+StyledContainerRuler.defaultProps = defaultThemeProp;
+const ConfigurableLayout = ({ items, arrangement }) => {
+    const [renderMode, setRenderMode] = useState('direct');
+    const containerRulerRef = useRef(null);
+    const setModeByWidth = useCallback((width) => {
+        const activeArrangement = arrangement?.containerWidth !== undefined &&
+            width !== undefined &&
+            width < arrangement?.containerWidth;
+        // Set mode by arrangement
+        if (activeArrangement) {
+            switch (arrangement.size) {
+                case 'main':
+                    setRenderMode('direct');
+                    break;
+                case 'half':
+                    setRenderMode('double');
+                    break;
+                case 'narrow':
+                    setRenderMode('full');
+                    break;
+                default:
+                    setRenderMode('direct');
+                    break;
+            }
+            return;
+        }
+        // Use direct by default
+        setRenderMode('direct');
+    }, [arrangement?.containerWidth]);
+    useEffect(() => {
+        if (containerRulerRef.current) {
+            setModeByWidth(containerRulerRef.current.getBoundingClientRect().width);
+        }
+    }, [containerRulerRef, arrangement?.containerWidth]);
+    const content = useMemo(() => {
+        if (items && !!items.length) {
+            return items.map(itemConfig => {
+                const config = {
+                    ...itemConfig,
+                    layoutConfig: { ...itemConfig.layoutConfig }
+                };
+                if (renderMode !== 'direct') {
+                    switch (renderMode) {
+                        case 'double': {
+                            const doubleWidth = {
+                                '1/4': '1/2',
+                                '1/3': '2/3',
+                                '1/2': 'full',
+                                '2/3': 'full',
+                                '3/4': 'full',
+                                full: 'full'
+                            };
+                            config.layoutConfig.width = doubleWidth[config.layoutConfig.width];
+                            break;
+                        }
+                        case 'full':
+                            config.layoutConfig.width = 'full';
+                            break;
+                        default:
+                            config.layoutConfig.width = 'full';
+                            break;
+                    }
+                }
+                return _jsx(LayoutCell, { config: config }, `${itemConfig.id}--${renderMode}`);
+            });
+        }
+        return null;
+    }, [items, renderMode]);
+    return (_jsx(_Fragment, { children: _jsxs(Flex, Object.assign({ as: StyledCellGrid, container: { wrap: 'wrap', justify: 'stretch', alignItems: 'stretch' }, item: { basis: containerMinWidth, grow: 1 } }, { children: [_jsx(StyledContainerRuler, { ref: containerRulerRef }, void 0), content] }), void 0) }, void 0));
+};
+export default ConfigurableLayout;
+//# sourceMappingURL=ConfigurableLayout.js.map

package/lib/components/ConfigurableLayout/ConfigurableLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConfigurableLayout.js","sourceRoot":"","sources":["../../../src/components/ConfigurableLayout/ConfigurableLayout.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState, useEffect, useRef, useMemo, useCallback } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Flex, defaultThemeProp } from '@pega/cosmos-react-core';\n\nimport type { ConfigurableLayoutProps } from './ConfigurableLayout.types';\nimport { containerMinWidth, cellGap } from './defaults';\nimport widthConfigOptions from './options';\nimport LayoutCell from './LayoutCell';\n\nconst StyledCellGrid = styled.div(({ theme }) => {\n  return css`\n    /* Note: inset position used to negate \"column\" inline margin on items */\n    position: relative;\n    inset-inline: calc(-${cellGap} * ${theme.base.spacing});\n    width: calc(100% + ${cellGap * 2} * ${theme.base.spacing});\n    max-width: calc(100% + ${cellGap * 2} * ${theme.base.spacing});\n  `;\n});\nStyledCellGrid.defaultProps = defaultThemeProp;\n\nconst StyledContainerRuler = styled.div(({ theme }) => {\n  return css`\n    margin-inline: calc(${cellGap} * ${theme.base.spacing});\n    width: calc(100% - ${cellGap * 2} * ${theme.base.spacing});\n  `;\n});\nStyledContainerRuler.defaultProps = defaultThemeProp;\n\nconst ConfigurableLayout = ({ items, arrangement }: ConfigurableLayoutProps) => {\n  const [renderMode, setRenderMode] = useState<'direct' | 'double' | 'full'>('direct');\n  const containerRulerRef = useRef<HTMLDivElement>(null);\n\n  const setModeByWidth = useCallback(\n    (width: number) => {\n      const activeArrangement =\n        arrangement?.containerWidth !== undefined &&\n        width !== undefined &&\n        width! < arrangement?.containerWidth;\n\n      // Set mode by arrangement\n      if (activeArrangement) {\n        switch (arrangement.size) {\n          case 'main':\n            setRenderMode('direct');\n            break;\n          case 'half':\n            setRenderMode('double');\n            break;\n          case 'narrow':\n            setRenderMode('full');\n            break;\n          default:\n            setRenderMode('direct');\n            break;\n        }\n\n        return;\n      }\n\n      // Use direct by default\n      setRenderMode('direct');\n    },\n    [arrangement?.containerWidth]\n  );\n\n  useEffect(() => {\n    if (containerRulerRef.current) {\n      setModeByWidth(containerRulerRef.current.getBoundingClientRect().width);\n    }\n  }, [containerRulerRef, arrangement?.containerWidth]);\n\n  const content = useMemo(() => {\n    if (items && !!items.length) {\n      return items.map(itemConfig => {\n        const config = {\n          ...itemConfig,\n          layoutConfig: { ...itemConfig.layoutConfig }\n        };\n\n        if (renderMode !== 'direct') {\n          switch (renderMode) {\n            case 'double': {\n              const doubleWidth: { [key: string]: keyof typeof widthConfigOptions } = {\n                '1/4': '1/2',\n                '1/3': '2/3',\n                '1/2': 'full',\n                '2/3': 'full',\n                '3/4': 'full',\n                full: 'full'\n              };\n\n              config.layoutConfig.width = doubleWidth[config.layoutConfig.width];\n\n              break;\n            }\n            case 'full':\n              config.layoutConfig.width = 'full';\n              break;\n            default:\n              config.layoutConfig.width = 'full';\n              break;\n          }\n        }\n\n        return <LayoutCell key={`${itemConfig.id}--${renderMode}`} config={config} />;\n      });\n    }\n\n    return null;\n  }, [items, renderMode]);\n\n  return (\n    <>\n      <Flex\n        as={StyledCellGrid}\n        container={{ wrap: 'wrap', justify: 'stretch', alignItems: 'stretch' }}\n        item={{ basis: containerMinWidth, grow: 1 }}\n      >\n        <StyledContainerRuler ref={containerRulerRef} />\n        {content}\n      </Flex>\n    </>\n  );\n};\n\nexport default ConfigurableLayout;\n"]}

package/lib/components/ConfigurableLayout/ConfigurableLayout.types.d.ts

@@ -0,0 +1,46 @@
+import type widthConfigOptions from './options';
+/**
+ * Type for config of a single ConfigurableLayout item.
+ */
+export interface Config {
+    /** Unique identifier in render region */
+    id: string;
+    /** Element to render */
+    content: JSX.Element;
+    /** Config for element */
+    layoutConfig: {
+        /** Responsive width option */
+        width: keyof typeof widthConfigOptions;
+        /**
+         * Fills remaining space if true, else does not grow beyond `width` value.
+         * @default true
+         */
+        fillAvailable?: boolean;
+        /** Flex basis (minimum fixed width) of element as:
+         *  - a numeric value to be applied in __pixels__
+         *  - a tuple of a numeric value and string unit
+         */
+        minWidth?: number | [number, 'px' | 'ch' | 'rem' | 'em'];
+    };
+}
+export interface ConfigurableLayoutProps {
+    /** Array of configs for individual layout cells */
+    items: Config[];
+    /** Arrangement properties */
+    arrangement?: {
+        /** Defines the arrangement size of the given ConfigurableLayout.
+         * Used to determine what width to apply to the given item when the arrangement is applied,
+         * with the following mapping:
+         * - 'narrow' --> applies 'full' width
+         * - 'main' --> applies configured width
+         * - 'half' --> applies double the configured width, or 'full' width (whichever is smaller)
+         */
+        size: 'narrow' | 'main' | 'half';
+        /** Defines the __live__ width of the arrangement's container element. Used to actively
+         * determine whether the arrangement is applied.
+         * - Requires a resize observer  OR `useArrangementContainer` hook to update the value as it changes.
+         */
+        containerWidth: number | undefined;
+    };
+}
+//# sourceMappingURL=ConfigurableLayout.types.d.ts.map

package/lib/components/ConfigurableLayout/ConfigurableLayout.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConfigurableLayout.types.d.ts","sourceRoot":"","sources":["../../../src/components/ConfigurableLayout/ConfigurableLayout.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,kBAAkB,MAAM,WAAW,CAAC;AAEhD;;GAEG;AACH,MAAM,WAAW,MAAM;IACrB,yCAAyC;IACzC,EAAE,EAAE,MAAM,CAAC;IACX,wBAAwB;IACxB,OAAO,EAAE,GAAG,CAAC,OAAO,CAAC;IACrB,yBAAyB;IACzB,YAAY,EAAE;QACZ,8BAA8B;QAC9B,KAAK,EAAE,MAAM,OAAO,kBAAkB,CAAC;QACvC;;;WAGG;QACH,aAAa,CAAC,EAAE,OAAO,CAAC;QACxB;;;WAGG;QACH,QAAQ,CAAC,EAAE,MAAM,GAAG,CAAC,MAAM,EAAE,IAAI,GAAG,IAAI,GAAG,KAAK,GAAG,IAAI,CAAC,CAAC;KAC1D,CAAC;CACH;AAED,MAAM,WAAW,uBAAuB;IACtC,mDAAmD;IACnD,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,6BAA6B;IAC7B,WAAW,CAAC,EAAE;QACZ;;;;;;WAMG;QACH,IAAI,EAAE,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;QACjC;;;WAGG;QACH,cAAc,EAAE,MAAM,GAAG,SAAS,CAAC;KACpC,CAAC;CACH"}

package/lib/components/ConfigurableLayout/ConfigurableLayout.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=ConfigurableLayout.types.js.map

package/lib/components/ConfigurableLayout/ConfigurableLayout.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConfigurableLayout.types.js","sourceRoot":"","sources":["../../../src/components/ConfigurableLayout/ConfigurableLayout.types.ts"],"names":[],"mappings":"","sourcesContent":["import type widthConfigOptions from './options';\n\n/**\n * Type for config of a single ConfigurableLayout item.\n */\nexport interface Config {\n  /** Unique identifier in render region */\n  id: string;\n  /** Element to render */\n  content: JSX.Element;\n  /** Config for element */\n  layoutConfig: {\n    /** Responsive width option */\n    width: keyof typeof widthConfigOptions;\n    /**\n     * Fills remaining space if true, else does not grow beyond `width` value.\n     * @default true\n     */\n    fillAvailable?: boolean;\n    /** Flex basis (minimum fixed width) of element as:\n     *  - a numeric value to be applied in __pixels__\n     *  - a tuple of a numeric value and string unit\n     */\n    minWidth?: number | [number, 'px' | 'ch' | 'rem' | 'em'];\n  };\n}\n\nexport interface ConfigurableLayoutProps {\n  /** Array of configs for individual layout cells */\n  items: Config[];\n  /** Arrangement properties */\n  arrangement?: {\n    /** Defines the arrangement size of the given ConfigurableLayout.\n     * Used to determine what width to apply to the given item when the arrangement is applied,\n     * with the following mapping:\n     * - 'narrow' --> applies 'full' width\n     * - 'main' --> applies configured width\n     * - 'half' --> applies double the configured width, or 'full' width (whichever is smaller)\n     */\n    size: 'narrow' | 'main' | 'half';\n    /** Defines the __live__ width of the arrangement's container element. Used to actively\n     * determine whether the arrangement is applied.\n     * - Requires a resize observer  OR `useArrangementContainer` hook to update the value as it changes.\n     */\n    containerWidth: number | undefined;\n  };\n}\n"]}

package/lib/components/ConfigurableLayout/LayoutCell.d.ts

@@ -0,0 +1,6 @@
+import type { Config } from './ConfigurableLayout.types';
+declare const LayoutCell: ({ config }: {
+    config: Config;
+}) => JSX.Element | null;
+export default LayoutCell;
+//# sourceMappingURL=LayoutCell.d.ts.map

package/lib/components/ConfigurableLayout/LayoutCell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LayoutCell.d.ts","sourceRoot":"","sources":["../../../src/components/ConfigurableLayout/LayoutCell.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAmDzD,QAAA,MAAM,UAAU;YAA0B,MAAM;wBAoC/C,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/lib/components/ConfigurableLayout/LayoutCell.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import styled, { css } from 'styled-components';
+import { Flex, defaultThemeProp } from '@pega/cosmos-react-core';
+import { StyledAppAnnouncement } from '../AppAnnouncement/AppAnnouncement';
+import widthConfigOptions from './options';
+import { itemMinWidth, cellGap } from './defaults';
+const StyledCell = styled.div(({ fillAvailable = true, percentageWidth, minWidth, theme }) => {
+    return css `
+      /* variables */
+      --marginGap: calc(${cellGap} * ${theme.base.spacing});
+      --totalMargin: calc(2 * var(--marginGap));
+      --percentageBasis: calc(${percentageWidth} - var(--totalMargin));
+      --maxWidth: calc(100% - var(--totalMargin));
+
+      /* styles */
+      flex-basis: var(--percentageBasis);
+      min-width: min(var(--maxWidth), ${minWidth || itemMinWidth});
+      max-width: var(--maxWidth);
+      margin-block-end: calc(var(--totalMargin));
+      margin-inline: var(--marginGap);
+
+      ${!fillAvailable &&
+        css `
+        flex-grow: 0;
+      `}
+
+      ${StyledAppAnnouncement} {
+        align-self: stretch;
+      }
+
+      > * {
+        width: 100%;
+        height: auto;
+        overflow-x: auto;
+      }
+    `;
+});
+StyledCell.defaultProps = defaultThemeProp;
+const validWidthUnits = ['px', 'ch', 'rem', 'em'];
+const LayoutCell = ({ config }) => {
+    const layoutConfig = useMemo(() => config.layoutConfig, [config]);
+    const percentageWidth = useMemo(() => {
+        return widthConfigOptions[layoutConfig.width] || '100%';
+    }, [layoutConfig.width]);
+    const minWidth = useMemo(() => {
+        const value = layoutConfig.minWidth;
+        if (typeof value === 'number') {
+            return `${value}px`;
+        }
+        if (Array.isArray(value) &&
+            value.length >= 2 &&
+            typeof value[0] === 'number' &&
+            validWidthUnits.includes(value[1])) {
+            return `${value[0]}${value[1]}`;
+        }
+    }, [layoutConfig.minWidth]);
+    return config?.content ? (_jsx(Flex, Object.assign({ as: StyledCell, item: {
+            grow: 1
+        }, container: { justify: 'stretch', alignItems: 'start' }, fillAvailable: layoutConfig.fillAvailable, percentageWidth: percentageWidth, minWidth: minWidth }, { children: config.content }), void 0)) : null;
+};
+export default LayoutCell;
+//# sourceMappingURL=LayoutCell.js.map

package/lib/components/ConfigurableLayout/LayoutCell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LayoutCell.js","sourceRoot":"","sources":["../../../src/components/ConfigurableLayout/LayoutCell.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAChC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAgB,MAAM,mBAAmB,CAAC;AAE9D,OAAO,EAAE,IAAI,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAEjE,OAAO,EAAE,qBAAqB,EAAE,MAAM,oCAAoC,CAAC;AAG3E,OAAO,kBAAkB,MAAM,WAAW,CAAC;AAC3C,OAAO,EAAE,YAAY,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AAEnD,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAC3B,CAAC,EACC,aAAa,GAAG,IAAI,EACpB,eAAe,EACf,QAAQ,EACR,KAAK,EAMN,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;;0BAEY,OAAO,MAAM,KAAK,CAAC,IAAI,CAAC,OAAO;;gCAEzB,eAAe;;;;;wCAKP,QAAQ,IAAI,YAAY;;;;;QAKxD,CAAC,aAAa;QAChB,GAAG,CAAA;;OAEF;;QAEC,qBAAqB;;;;;;;;;KASxB,CAAC;AACJ,CAAC,CACF,CAAC;AACF,UAAU,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE3C,MAAM,eAAe,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,CAAC;AAElD,MAAM,UAAU,GAAG,CAAC,EAAE,MAAM,EAAsB,EAAE,EAAE;IACpD,MAAM,YAAY,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,YAAY,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAClE,MAAM,eAAe,GAAG,OAAO,CAAC,GAAG,EAAE;QACnC,OAAO,kBAAkB,CAAC,YAAY,CAAC,KAAwC,CAAC,IAAI,MAAM,CAAC;IAC7F,CAAC,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC;IACzB,MAAM,QAAQ,GAAG,OAAO,CAAC,GAAG,EAAE;QAC5B,MAAM,KAAK,GAAG,YAAY,CAAC,QAAQ,CAAC;QAEpC,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;YAC7B,OAAO,GAAG,KAAK,IAAI,CAAC;SACrB;QAED,IACE,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC;YACpB,KAAK,CAAC,MAAM,IAAI,CAAC;YACjB,OAAO,KAAK,CAAC,CAAC,CAAC,KAAK,QAAQ;YAC5B,eAAe,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAClC;YACA,OAAO,GAAG,KAAK,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC;SACjC;IACH,CAAC,EAAE,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,CAAC;IAE5B,OAAO,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,CACvB,KAAC,IAAI,kBACH,EAAE,EAAE,UAAU,EACd,IAAI,EAAE;YACJ,IAAI,EAAE,CAAC;SACR,EACD,SAAS,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,OAAO,EAAE,EACtD,aAAa,EAAE,YAAY,CAAC,aAAa,EACzC,eAAe,EAAE,eAAe,EAChC,QAAQ,EAAE,QAAQ,gBAEjB,MAAM,CAAC,OAAO,YACV,CACR,CAAC,CAAC,CAAC,IAAI,CAAC;AACX,CAAC,CAAC;AAEF,eAAe,UAAU,CAAC","sourcesContent":["import { useMemo } from 'react';\nimport styled, { css, DefaultTheme } from 'styled-components';\n\nimport { Flex, defaultThemeProp } from '@pega/cosmos-react-core';\n\nimport { StyledAppAnnouncement } from '../AppAnnouncement/AppAnnouncement';\n\nimport type { Config } from './ConfigurableLayout.types';\nimport widthConfigOptions from './options';\nimport { itemMinWidth, cellGap } from './defaults';\n\nconst StyledCell = styled.div(\n  ({\n    fillAvailable = true,\n    percentageWidth,\n    minWidth,\n    theme\n  }: {\n    fillAvailable: boolean;\n    percentageWidth?: string;\n    minWidth?: string | undefined;\n    theme: DefaultTheme;\n  }) => {\n    return css`\n      /* variables */\n      --marginGap: calc(${cellGap} * ${theme.base.spacing});\n      --totalMargin: calc(2 * var(--marginGap));\n      --percentageBasis: calc(${percentageWidth} - var(--totalMargin));\n      --maxWidth: calc(100% - var(--totalMargin));\n\n      /* styles */\n      flex-basis: var(--percentageBasis);\n      min-width: min(var(--maxWidth), ${minWidth || itemMinWidth});\n      max-width: var(--maxWidth);\n      margin-block-end: calc(var(--totalMargin));\n      margin-inline: var(--marginGap);\n\n      ${!fillAvailable &&\n      css`\n        flex-grow: 0;\n      `}\n\n      ${StyledAppAnnouncement} {\n        align-self: stretch;\n      }\n\n      > * {\n        width: 100%;\n        height: auto;\n        overflow-x: auto;\n      }\n    `;\n  }\n);\nStyledCell.defaultProps = defaultThemeProp;\n\nconst validWidthUnits = ['px', 'ch', 'rem', 'em'];\n\nconst LayoutCell = ({ config }: { config: Config }) => {\n  const layoutConfig = useMemo(() => config.layoutConfig, [config]);\n  const percentageWidth = useMemo(() => {\n    return widthConfigOptions[layoutConfig.width as keyof typeof widthConfigOptions] || '100%';\n  }, [layoutConfig.width]);\n  const minWidth = useMemo(() => {\n    const value = layoutConfig.minWidth;\n\n    if (typeof value === 'number') {\n      return `${value}px`;\n    }\n\n    if (\n      Array.isArray(value) &&\n      value.length >= 2 &&\n      typeof value[0] === 'number' &&\n      validWidthUnits.includes(value[1])\n    ) {\n      return `${value[0]}${value[1]}`;\n    }\n  }, [layoutConfig.minWidth]);\n\n  return config?.content ? (\n    <Flex\n      as={StyledCell}\n      item={{\n        grow: 1\n      }}\n      container={{ justify: 'stretch', alignItems: 'start' }}\n      fillAvailable={layoutConfig.fillAvailable}\n      percentageWidth={percentageWidth}\n      minWidth={minWidth}\n    >\n      {config.content}\n    </Flex>\n  ) : null;\n};\n\nexport default LayoutCell;\n"]}

package/lib/components/ConfigurableLayout/defaults.d.ts

@@ -0,0 +1,4 @@
+export declare const cellGap = 1;
+export declare const containerMinWidth = "450px";
+export declare const itemMinWidth = "225px";
+//# sourceMappingURL=defaults.d.ts.map

package/lib/components/ConfigurableLayout/defaults.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"defaults.d.ts","sourceRoot":"","sources":["../../../src/components/ConfigurableLayout/defaults.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO,IAAI,CAAC;AACzB,eAAO,MAAM,iBAAiB,UAAU,CAAC;AACzC,eAAO,MAAM,YAAY,UAAU,CAAC"}

package/lib/components/ConfigurableLayout/defaults.js

@@ -0,0 +1,4 @@
+export const cellGap = 1;
+export const containerMinWidth = '450px';
+export const itemMinWidth = '225px';
+//# sourceMappingURL=defaults.js.map

package/lib/components/ConfigurableLayout/defaults.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"defaults.js","sourceRoot":"","sources":["../../../src/components/ConfigurableLayout/defaults.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,CAAC;AACzB,MAAM,CAAC,MAAM,iBAAiB,GAAG,OAAO,CAAC;AACzC,MAAM,CAAC,MAAM,YAAY,GAAG,OAAO,CAAC","sourcesContent":["export const cellGap = 1;\nexport const containerMinWidth = '450px';\nexport const itemMinWidth = '225px';\n"]}

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

@@ -0,0 +1,2 @@
+export { default } from './ConfigurableLayout';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ConfigurableLayout/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC"}

package/lib/components/ConfigurableLayout/index.js

@@ -0,0 +1,2 @@
+export { default } from './ConfigurableLayout';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ConfigurableLayout/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC","sourcesContent":["export { default } from './ConfigurableLayout';\n"]}

package/lib/components/ConfigurableLayout/options.d.ts

@@ -0,0 +1,10 @@
+declare const widthConfigOptions: {
+    readonly '1/4': "25%";
+    readonly '1/3': "33.3%";
+    readonly '1/2': "50%";
+    readonly '2/3': "66.6%";
+    readonly '3/4': "75%";
+    readonly full: "100%";
+};
+export default widthConfigOptions;
+//# sourceMappingURL=options.d.ts.map

package/lib/components/ConfigurableLayout/options.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"options.d.ts","sourceRoot":"","sources":["../../../src/components/ConfigurableLayout/options.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,kBAAkB;;;;;;;CAOd,CAAC;AAEX,eAAe,kBAAkB,CAAC"}

package/lib/components/ConfigurableLayout/options.js

@@ -0,0 +1,10 @@
+const widthConfigOptions = {
+    '1/4': '25%',
+    '1/3': '33.3%',
+    '1/2': '50%',
+    '2/3': '66.6%',
+    '3/4': '75%',
+    full: '100%'
+};
+export default widthConfigOptions;
+//# sourceMappingURL=options.js.map

package/lib/components/ConfigurableLayout/options.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"options.js","sourceRoot":"","sources":["../../../src/components/ConfigurableLayout/options.ts"],"names":[],"mappings":"AAAA,MAAM,kBAAkB,GAAG;IACzB,KAAK,EAAE,KAAK;IACZ,KAAK,EAAE,OAAO;IACd,KAAK,EAAE,KAAK;IACZ,KAAK,EAAE,OAAO;IACd,KAAK,EAAE,KAAK;IACZ,IAAI,EAAE,MAAM;CACJ,CAAC;AAEX,eAAe,kBAAkB,CAAC","sourcesContent":["const widthConfigOptions = {\n  '1/4': '25%',\n  '1/3': '33.3%',\n  '1/2': '50%',\n  '2/3': '66.6%',\n  '3/4': '75%',\n  full: '100%'\n} as const;\n\nexport default widthConfigOptions;\n"]}

package/lib/components/Details/Details.d.ts

@@ -0,0 +1,13 @@
+import { FunctionComponent, ReactNode } from 'react';
+import { FieldValueListProps, ForwardProps, BaseProps } from '@pega/cosmos-react-core';
+export interface DetailsProps extends BaseProps {
+    /** The set of field values to render in the Highlighted Data list. */
+    highlightedFields?: FieldValueListProps['fields'];
+    /** List of React components below the highlighted data and line seperation. */
+    regions?: [ReactNode] | [ReactNode, ReactNode] | [ReactNode, ReactNode, ReactNode];
+}
+export declare const StyledDetails: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledHighlightedFields: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+declare const Details: FunctionComponent<DetailsProps & ForwardProps>;
+export default Details;
+//# sourceMappingURL=Details.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Details.d.ts","sourceRoot":"","sources":["../../../src/components/Details/Details.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGrD,OAAO,EAKL,mBAAmB,EACnB,YAAY,EACZ,SAAS,EAGV,MAAM,yBAAyB,CAAC;AAEjC,MAAM,WAAW,YAAa,SAAQ,SAAS;IAC7C,sEAAsE;IACtE,iBAAiB,CAAC,EAAE,mBAAmB,CAAC,QAAQ,CAAC,CAAC;IAClD,+EAA+E;IAC/E,OAAO,CAAC,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,SAAS,EAAE,SAAS,CAAC,GAAG,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,CAAC,CAAC;CACpF;AAED,eAAO,MAAM,aAAa,yGAAe,CAAC;AAE1C,eAAO,MAAM,uBAAuB,yGAmBlC,CAAC;AAIH,QAAA,MAAM,OAAO,EAAE,iBAAiB,CAAC,YAAY,GAAG,YAAY,CA4B3D,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/lib/components/Details/Details.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled, { css } from 'styled-components';
+import { Grid, defaultThemeProp, FieldValueList, StyledFieldValueList, calculateFontSize } from '@pega/cosmos-react-core';
+export const StyledDetails = styled.div ``;
+export const StyledHighlightedFields = styled.div(({ theme }) => {
+    const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);
+    return css `
+    ${StyledFieldValueList} {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(20ch, 1fr));
+      padding-block-end: calc(1.5 * ${theme.base.spacing});
+      border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};
+      column-gap: calc(5 * ${theme.base.spacing});
+      dd {
+        font-size: ${fontSize[theme.components.text.h1['font-size']]};
+        font-weight: ${theme.components.text.h1['font-weight']};
+      }
+    }
+
+    & + div {
+      padding-block-start: calc(1.5 * ${theme.base.spacing});
+    }
+  `;
+});
+StyledHighlightedFields.defaultProps = defaultThemeProp;
+const Details = ({ highlightedFields, regions }) => {
+    return (_jsxs(StyledDetails, { children: [highlightedFields && (_jsx(StyledHighlightedFields, { children: _jsx(FieldValueList, { variant: 'stacked', fields: highlightedFields }, void 0) }, void 0)), regions && regions.length > 0 && (_jsx(Grid, Object.assign({ container: {
+                    cols: 'repeat(auto-fit, minmax(30ch, 1fr))',
+                    alignItems: 'start',
+                    alignContent: 'start',
+                    gap: 2
+                } }, { children: regions?.map((colItem, i) => {
+                    // eslint-disable-next-line react/no-array-index-key
+                    return _jsx("div", { children: colItem }, i);
+                }) }), void 0))] }, void 0));
+};
+export default Details;
+//# sourceMappingURL=Details.js.map

package/lib/components/Details/Details.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Details.js","sourceRoot":"","sources":["../../../src/components/Details/Details.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,IAAI,EACJ,gBAAgB,EAChB,cAAc,EACd,oBAAoB,EAIpB,iBAAiB,EAElB,MAAM,yBAAyB,CAAC;AASjC,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AAE1C,MAAM,CAAC,MAAM,uBAAuB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC9D,MAAM,QAAQ,GAAG,iBAAiB,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;IACtF,OAAO,GAAG,CAAA;MACN,oBAAoB;;;sCAGY,KAAK,CAAC,IAAI,CAAC,OAAO;uCACjB,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;6BAC3C,KAAK,CAAC,IAAI,CAAC,OAAO;;qBAE1B,QAAQ,CAAC,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC,WAAW,CAAa,CAAC;uBACzD,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC;;;;;wCAKtB,KAAK,CAAC,IAAI,CAAC,OAAO;;GAEvD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,uBAAuB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAExD,MAAM,OAAO,GAAmD,CAAC,EAC/D,iBAAiB,EACjB,OAAO,EACM,EAAE,EAAE;IACjB,OAAO,CACL,MAAC,aAAa,eACX,iBAAiB,IAAI,CACpB,KAAC,uBAAuB,cACtB,KAAC,cAAc,IAAC,OAAO,EAAC,SAAS,EAAC,MAAM,EAAE,iBAAiB,WAAI,WACvC,CAC3B,EACA,OAAO,IAAI,OAAO,CAAC,MAAM,GAAG,CAAC,IAAI,CAChC,KAAC,IAAI,kBACH,SAAS,EAAE;oBACT,IAAI,EAAE,qCAAqC;oBAC3C,UAAU,EAAE,OAAO;oBACnB,YAAY,EAAE,OAAO;oBACrB,GAAG,EAAE,CAAC;iBACP,gBAEA,OAAO,EAAE,GAAG,CAAC,CAAC,OAAO,EAAE,CAAC,EAAE,EAAE;oBAC3B,oDAAoD;oBACpD,OAAO,wBAAc,OAAO,IAAX,CAAC,CAAiB,CAAC;gBACtC,CAAC,CAAC,YACG,CACR,YACa,CACjB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,OAAO,CAAC","sourcesContent":["import { FunctionComponent, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Grid,\n  defaultThemeProp,\n  FieldValueList,\n  StyledFieldValueList,\n  FieldValueListProps,\n  ForwardProps,\n  BaseProps,\n  calculateFontSize,\n  FontSize\n} from '@pega/cosmos-react-core';\n\nexport interface DetailsProps extends BaseProps {\n  /** The set of field values to render in the Highlighted Data list. */\n  highlightedFields?: FieldValueListProps['fields'];\n  /** List of React components below the highlighted data and line seperation. */\n  regions?: [ReactNode] | [ReactNode, ReactNode] | [ReactNode, ReactNode, ReactNode];\n}\n\nexport const StyledDetails = styled.div``;\n\nexport const StyledHighlightedFields = styled.div(({ theme }) => {\n  const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n  return css`\n    ${StyledFieldValueList} {\n      display: grid;\n      grid-template-columns: repeat(auto-fill, minmax(20ch, 1fr));\n      padding-block-end: calc(1.5 * ${theme.base.spacing});\n      border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};\n      column-gap: calc(5 * ${theme.base.spacing});\n      dd {\n        font-size: ${fontSize[theme.components.text.h1['font-size'] as FontSize]};\n        font-weight: ${theme.components.text.h1['font-weight']};\n      }\n    }\n\n    & + div {\n      padding-block-start: calc(1.5 * ${theme.base.spacing});\n    }\n  `;\n});\n\nStyledHighlightedFields.defaultProps = defaultThemeProp;\n\nconst Details: FunctionComponent<DetailsProps & ForwardProps> = ({\n  highlightedFields,\n  regions\n}: DetailsProps) => {\n  return (\n    <StyledDetails>\n      {highlightedFields && (\n        <StyledHighlightedFields>\n          <FieldValueList variant='stacked' fields={highlightedFields} />\n        </StyledHighlightedFields>\n      )}\n      {regions && regions.length > 0 && (\n        <Grid\n          container={{\n            cols: 'repeat(auto-fit, minmax(30ch, 1fr))',\n            alignItems: 'start',\n            alignContent: 'start',\n            gap: 2\n          }}\n        >\n          {regions?.map((colItem, i) => {\n            // eslint-disable-next-line react/no-array-index-key\n            return <div key={i}>{colItem}</div>;\n          })}\n        </Grid>\n      )}\n    </StyledDetails>\n  );\n};\n\nexport default Details;\n"]}

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

@@ -0,0 +1,4 @@
+export { default } from './Details';
+export { DetailsProps } from './Details';
+export { StyledDetails, StyledHighlightedFields } from './Details';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Details/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AACzC,OAAO,EAAE,aAAa,EAAE,uBAAuB,EAAE,MAAM,WAAW,CAAC"}

package/lib/components/Details/index.js

@@ -0,0 +1,3 @@
+export { default } from './Details';
+export { StyledDetails, StyledHighlightedFields } from './Details';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Details/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAEpC,OAAO,EAAE,aAAa,EAAE,uBAAuB,EAAE,MAAM,WAAW,CAAC","sourcesContent":["export { default } from './Details';\nexport { DetailsProps } from './Details';\nexport { StyledDetails, StyledHighlightedFields } from './Details';\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"SearchResults.d.ts","sourceRoot":"","sources":["../../../src/components/SearchResults/SearchResults.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAkC,iBAAiB,EAAmB,MAAM,OAAO,CAAC;AAG3F,OAAO,EAOL,YAAY,EAab,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EACL,kBAAkB,EAInB,MAAM,uBAAuB,CAAC;AAoH/B,QAAA,MAAM,aAAa,EAAE,iBAAiB,CAAC,kBAAkB,GAAG,YAAY,CAgNvE,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"SearchResults.d.ts","sourceRoot":"","sources":["../../../src/components/SearchResults/SearchResults.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,iBAAiB,EAGlB,MAAM,OAAO,CAAC;AAGf,OAAO,EAOL,YAAY,EAab,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EACL,kBAAkB,EAInB,MAAM,uBAAuB,CAAC;AAoH/B,QAAA,MAAM,aAAa,EAAE,iBAAiB,CAAC,kBAAkB,GAAG,YAAY,CAgMvE,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/lib/components/SearchResults/SearchResults.js

@@ -1,7 +1,7 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef, useContext, useRef } from 'react';
 import styled, { css } from 'styled-components';
-import { Button, Card, CardContent, Count, defaultThemeProp, Flex, Grid, Icon, Modal, ModalManagerContext, NoItems, SearchInput, Selectable, Text, useI18n, useBreakpoint, useAfterInitialEffect } from '@pega/cosmos-react-core';
+import { Button, Card, CardContent, Count, defaultThemeProp, Flex, Grid, Icon, Modal, ModalManagerContext, EmptyState, SearchInput, Selectable, Text, useI18n, useBreakpoint, useAfterInitialEffect } from '@pega/cosmos-react-core';
 import SearchResult from './SearchResult';
 import Filter from './Filter';
 const StyledSearchResults = styled.div ``;
@@ -121,7 +121,7 @@ const SearchResults = forwardRef(({ results, searchInputProps, count, filters, o
                                                 }) }, { children: `${filter.groupName}: ${filter.name}` }), filter.id));
                                         }) }), void 0))] }), void 0), _jsx(Grid, Object.assign({ item: { area: 'items', alignSelf: results.length ? 'start' : 'center' }, container: { rowGap: 4 } }, { children: results.length ? (results.map((result) => {
                                     return _jsx(SearchResult, Object.assign({}, result), result.id);
-                                })) : (_jsx(Grid, Object.assign({ item: { alignSelf: 'stretch' } }, { children: _jsx(NoItems, { message: searchInputProps.value === '' ? t('empty_search') : undefined }, void 0) }), void 0)) }), void 0), onShowMore && (_jsx(Flex, Object.assign({ container: { justify: 'center' } }, { children: _jsx(Button, Object.assign({ variant: 'link', onClick: onShowMore }, { children: t('show_more') }), void 0) }), void 0))] }), void 0)] }), void 0) }, void 0) }, void 0));
+                                })) : (_jsx(Grid, Object.assign({ item: { alignSelf: 'stretch' } }, { children: _jsx(EmptyState, { message: searchInputProps.value === '' ? t('empty_search') : undefined }, void 0) }), void 0)) }), void 0), onShowMore && (_jsx(Flex, Object.assign({ container: { justify: 'center' } }, { children: _jsx(Button, Object.assign({ variant: 'link', onClick: onShowMore }, { children: t('show_more') }), void 0) }), void 0))] }), void 0)] }), void 0) }, void 0) }, void 0));
 });
 export default SearchResults;
 //# sourceMappingURL=SearchResults.js.map