@pega/cosmos-react-work 4.0.0-dev.13.0 → 4.0.0-dev.14.1

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

@@ -1 +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    /** Indicates when the ConfigurableLayout has wrapped to the full width of it's container */\n    hasWrapped: boolean;\n  };\n}\n"]}
+{"version":3,"file":"ConfigurableLayout.types.js","sourceRoot":"","sources":["../../../src/components/ConfigurableLayout/ConfigurableLayout.types.ts"],"names":[],"mappings":"","sourcesContent":["import type widthConfigOptions from './options';\n\n/** Type for config of a single ConfigurableLayout item. */\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    /** Indicates when the ConfigurableLayout has wrapped to the full width of it's container */\n    hasWrapped: boolean;\n  };\n}\n"]}

package/lib/components/Confirmation/Confirmation.d.ts

@@ -5,7 +5,7 @@ export interface ConfirmationProps extends NoChildrenProp {
     title?: string;
     /** Region for a Field Value List component */
     details?: ReactNode;
-    /** Array of React nodes to be put into a list  */
+    /** Array of React nodes to be put into a list */
     whatsNext?: UnorderedListProps['items'];
     /** Region for a Tasks component */
     tasks?: ReactNode;

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

@@ -1 +1 @@
-{"version":3,"file":"Confirmation.d.ts","sourceRoot":"","sources":["../../../src/components/Confirmation/Confirmation.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAmB,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAGvF,OAAO,EAGL,YAAY,EAOZ,kBAAkB,EAClB,cAAc,EACf,MAAM,yBAAyB,CAAC;AAQjC,MAAM,WAAW,iBAAkB,SAAQ,cAAc;IACvD,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8CAA8C;IAC9C,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,kDAAkD;IAClD,SAAS,CAAC,EAAE,kBAAkB,CAAC,OAAO,CAAC,CAAC;IACxC,mCAAmC;IACnC,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,mDAAmD;IACnD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB;AAED,QAAA,MAAM,YAAY,EAAE,iBAAiB,CAAC,iBAAiB,GAAG,YAAY,CAqCrE,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"Confirmation.d.ts","sourceRoot":"","sources":["../../../src/components/Confirmation/Confirmation.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAmB,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAGvF,OAAO,EAGL,YAAY,EAOZ,kBAAkB,EAClB,cAAc,EACf,MAAM,yBAAyB,CAAC;AAQjC,MAAM,WAAW,iBAAkB,SAAQ,cAAc;IACvD,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8CAA8C;IAC9C,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,iDAAiD;IACjD,SAAS,CAAC,EAAE,kBAAkB,CAAC,OAAO,CAAC,CAAC;IACxC,mCAAmC;IACnC,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,mDAAmD;IACnD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB;AAED,QAAA,MAAM,YAAY,EAAE,iBAAiB,CAAC,iBAAiB,GAAG,YAAY,CAqCrE,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/lib/components/Confirmation/Confirmation.js.map

@@ -1 +1 @@
-{"version":3,"file":"Confirmation.js","sourceRoot":"","sources":["../../../src/components/Confirmation/Confirmation.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAsD,MAAM,OAAO,CAAC;AACvF,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EACL,IAAI,EACJ,WAAW,EAEX,IAAI,EACJ,IAAI,EACJ,OAAO,EACP,aAAa,EACb,MAAM,EACN,gBAAgB,EAGjB,MAAM,yBAAyB,CAAC;AAEjC,MAAM,mBAAmB,GAAG,MAAM,CAAC,aAAa,CAAC,CAAA;;CAEhD,CAAC;AAEF,mBAAmB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAiBpD,MAAM,YAAY,GAAwD,UAAU,CAClF,CACE,EAAE,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,SAAS,EAAsC,EAC/F,GAAG,EACH,EAAE;IACF,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,OAAO,CACL,KAAC,IAAI,OAAK,SAAS,EAAE,GAAG,EAAE,GAAG,YAC3B,KAAC,WAAW,cACV,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,aAC7C,KAAK,IAAI,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,KAAK,GAAQ,EAC1C,OAAO,IAAI,CACV,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,aAC9C,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,CAAC,CAAC,sBAAsB,CAAC,GAAQ,EACpD,OAAO,IACH,CACR,EACA,SAAS,IAAI,CACZ,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,aAC9C,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,CAAC,CAAC,yBAAyB,CAAC,GAAQ,EACxD,KAAC,mBAAmB,IAAC,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE,mBAAmB,GAAI,IAC7D,CACR,EACA,KAAK,EACL,OAAO,IAAI,CACV,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,YACjC,KAAC,MAAM,IAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAC,SAAS,YACxC,CAAC,CAAC,MAAM,CAAC,GACH,GACJ,CACR,IACI,GACK,GACT,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, ReactNode, Ref } from 'react';\nimport styled from 'styled-components';\n\nimport {\n  Card,\n  CardContent,\n  ForwardProps,\n  Flex,\n  Text,\n  useI18n,\n  UnorderedList,\n  Button,\n  defaultThemeProp,\n  UnorderedListProps,\n  NoChildrenProp\n} from '@pega/cosmos-react-core';\n\nconst StyledWhatsNextList = styled(UnorderedList)`\n  padding-inline-start: 0;\n`;\n\nStyledWhatsNextList.defaultProps = defaultThemeProp;\n\nexport interface ConfirmationProps extends NoChildrenProp {\n  /** The title of the confirmation */\n  title?: string;\n  /** Region for a Field Value List component */\n  details?: ReactNode;\n  /** Array of React nodes to be put into a list  */\n  whatsNext?: UnorderedListProps['items'];\n  /** Region for a Tasks component */\n  tasks?: ReactNode;\n  /** Called when the done/close button is clicked */\n  onClose?: () => void;\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLElement>;\n}\n\nconst Confirmation: FunctionComponent<ConfirmationProps & ForwardProps> = forwardRef(\n  (\n    { title, details, whatsNext, tasks, onClose, ...restProps }: PropsWithoutRef<ConfirmationProps>,\n    ref\n  ) => {\n    const t = useI18n();\n\n    return (\n      <Card {...restProps} ref={ref}>\n        <CardContent>\n          <Flex container={{ gap: 3, direction: 'column' }}>\n            {title && <Text variant='h2'>{title}</Text>}\n            {details && (\n              <Flex container={{ gap: 1, direction: 'column' }}>\n                <Text variant='h3'>{t('confirmation_details')}</Text>\n                {details}\n              </Flex>\n            )}\n            {whatsNext && (\n              <Flex container={{ gap: 1, direction: 'column' }}>\n                <Text variant='h3'>{t('confirmation_whats_next')}</Text>\n                <StyledWhatsNextList items={whatsNext} as={StyledWhatsNextList} />\n              </Flex>\n            )}\n            {tasks}\n            {onClose && (\n              <Flex container={{ justify: 'end' }}>\n                <Button onClick={onClose} variant='primary'>\n                  {t('done')}\n                </Button>\n              </Flex>\n            )}\n          </Flex>\n        </CardContent>\n      </Card>\n    );\n  }\n);\n\nexport default Confirmation;\n"]}
+{"version":3,"file":"Confirmation.js","sourceRoot":"","sources":["../../../src/components/Confirmation/Confirmation.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAsD,MAAM,OAAO,CAAC;AACvF,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EACL,IAAI,EACJ,WAAW,EAEX,IAAI,EACJ,IAAI,EACJ,OAAO,EACP,aAAa,EACb,MAAM,EACN,gBAAgB,EAGjB,MAAM,yBAAyB,CAAC;AAEjC,MAAM,mBAAmB,GAAG,MAAM,CAAC,aAAa,CAAC,CAAA;;CAEhD,CAAC;AAEF,mBAAmB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAiBpD,MAAM,YAAY,GAAwD,UAAU,CAClF,CACE,EAAE,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,SAAS,EAAsC,EAC/F,GAAG,EACH,EAAE;IACF,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,OAAO,CACL,KAAC,IAAI,OAAK,SAAS,EAAE,GAAG,EAAE,GAAG,YAC3B,KAAC,WAAW,cACV,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,aAC7C,KAAK,IAAI,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,KAAK,GAAQ,EAC1C,OAAO,IAAI,CACV,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,aAC9C,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,CAAC,CAAC,sBAAsB,CAAC,GAAQ,EACpD,OAAO,IACH,CACR,EACA,SAAS,IAAI,CACZ,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,aAC9C,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,CAAC,CAAC,yBAAyB,CAAC,GAAQ,EACxD,KAAC,mBAAmB,IAAC,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE,mBAAmB,GAAI,IAC7D,CACR,EACA,KAAK,EACL,OAAO,IAAI,CACV,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,YACjC,KAAC,MAAM,IAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAC,SAAS,YACxC,CAAC,CAAC,MAAM,CAAC,GACH,GACJ,CACR,IACI,GACK,GACT,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, ReactNode, Ref } from 'react';\nimport styled from 'styled-components';\n\nimport {\n  Card,\n  CardContent,\n  ForwardProps,\n  Flex,\n  Text,\n  useI18n,\n  UnorderedList,\n  Button,\n  defaultThemeProp,\n  UnorderedListProps,\n  NoChildrenProp\n} from '@pega/cosmos-react-core';\n\nconst StyledWhatsNextList = styled(UnorderedList)`\n  padding-inline-start: 0;\n`;\n\nStyledWhatsNextList.defaultProps = defaultThemeProp;\n\nexport interface ConfirmationProps extends NoChildrenProp {\n  /** The title of the confirmation */\n  title?: string;\n  /** Region for a Field Value List component */\n  details?: ReactNode;\n  /** Array of React nodes to be put into a list */\n  whatsNext?: UnorderedListProps['items'];\n  /** Region for a Tasks component */\n  tasks?: ReactNode;\n  /** Called when the done/close button is clicked */\n  onClose?: () => void;\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLElement>;\n}\n\nconst Confirmation: FunctionComponent<ConfirmationProps & ForwardProps> = forwardRef(\n  (\n    { title, details, whatsNext, tasks, onClose, ...restProps }: PropsWithoutRef<ConfirmationProps>,\n    ref\n  ) => {\n    const t = useI18n();\n\n    return (\n      <Card {...restProps} ref={ref}>\n        <CardContent>\n          <Flex container={{ gap: 3, direction: 'column' }}>\n            {title && <Text variant='h2'>{title}</Text>}\n            {details && (\n              <Flex container={{ gap: 1, direction: 'column' }}>\n                <Text variant='h3'>{t('confirmation_details')}</Text>\n                {details}\n              </Flex>\n            )}\n            {whatsNext && (\n              <Flex container={{ gap: 1, direction: 'column' }}>\n                <Text variant='h3'>{t('confirmation_whats_next')}</Text>\n                <StyledWhatsNextList items={whatsNext} as={StyledWhatsNextList} />\n              </Flex>\n            )}\n            {tasks}\n            {onClose && (\n              <Flex container={{ justify: 'end' }}>\n                <Button onClick={onClose} variant='primary'>\n                  {t('done')}\n                </Button>\n              </Flex>\n            )}\n          </Flex>\n        </CardContent>\n      </Card>\n    );\n  }\n);\n\nexport default Confirmation;\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"Details.d.ts","sourceRoot":"","sources":["../../../src/components/Details/Details.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,EAAE,EAEF,SAAS,EACT,GAAG,EAKJ,MAAM,OAAO,CAAC;AAGf,OAAO,EAKL,YAAY,EAMb,MAAM,yBAAyB,CAAC;AAWjC,MAAM,WAAW,YAAY;IAC3B,eAAe,CAAC,EAAE,SAAS,EAAE,CAAC;IAC9B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,mCAAmC;IACnC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,WAAW,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACxB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC7B;AAED,QAAA,MAAM,OAAO,EAAE,EAAE,CAAC,YAAY,GAAG,YAAY,CA0L5C,CAAC;AAEF,eAAe,OAAO,CAAC"}
+{"version":3,"file":"Details.d.ts","sourceRoot":"","sources":["../../../src/components/Details/Details.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,EAAE,EAEF,SAAS,EACT,GAAG,EAKJ,MAAM,OAAO,CAAC;AAGf,OAAO,EAKL,YAAY,EAOb,MAAM,yBAAyB,CAAC;AAWjC,MAAM,WAAW,YAAY;IAC3B,eAAe,CAAC,EAAE,SAAS,EAAE,CAAC;IAC9B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,mCAAmC;IACnC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,WAAW,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACxB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC7B;AAED,QAAA,MAAM,OAAO,EAAE,EAAE,CAAC,YAAY,GAAG,YAAY,CAoL5C,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/lib/components/Details/Details.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, Fragment, useState, useContext, useEffect, useMemo } from 'react';
 import { remToPx } from 'polished';
-import { Text, useBreakpoint, useConsolidatedRef, useTheme, ExpandCollapse, Button, Flex, Icon, useI18n } from '@pega/cosmos-react-core';
+import { Text, useBreakpoint, useConsolidatedRef, useTheme, ExpandCollapse, Button, Flex, Icon, useChToPxConversionFactor, useI18n } from '@pega/cosmos-react-core';
 import DetailsContext from './DetailsContext';
 import { StyledFieldValueGroupLabel, StyledDetails, StyledDetailList, StyledHighlightedDetailList, flexGapProp } from './Details.styles';
 const Details = forwardRef(({ highlightedData, children, name, columnCount = 1, nested = false, asFlex = false, valueComparison = false, collapsible = false }, ref) => {
-    const { longestLabelLength, mobileView, depth, ...context } = useContext(DetailsContext);
-    const { base: { 'content-width': { sm } } } = useTheme();
+    const { longestLabelLength, mobileView: inMobileView, depth, ...context } = useContext(DetailsContext);
+    const { base: { 'content-width': { sm: smContentWidth } } } = useTheme();
     const isSmallOrAbove = useBreakpoint('sm');
     const listRef = useConsolidatedRef(ref);
     const isXsContentWidthOrAbove = useBreakpoint('xs', {
@@ -26,26 +26,15 @@ const Details = forwardRef(({ highlightedData, children, name, columnCount = 1,
     const [open, setOpen] = useState(true);
     const labelLength = Math.max(14, Math.min(longestLabelLength ?? 16, 40));
     const headingDepth = depth ?? 1;
-    const applyMobileView = asFlex
-        ? mobileView ||
-            (flexRow && flexContextMobileView) ||
-            !isSmallOrAbove ||
-            !isXsContentWidthOrAbove
-        : mobileView || !isSmallOrAbove || !isXsContentWidthOrAbove;
-    const chToPxConversionFactor = useMemo(() => {
-        const chToPxDiv = document.createElement('div');
-        chToPxDiv.style.width = '1ch';
-        document.body.append(chToPxDiv);
-        const conversionFactor = chToPxDiv.offsetWidth;
-        chToPxDiv.remove();
-        return conversionFactor;
-    }, []);
-    /**
-     * Mount resize observer to update flex context mobile view & run initial check.
-     */
+    const applyMobileView = inMobileView ||
+        !isSmallOrAbove ||
+        !isXsContentWidthOrAbove ||
+        (asFlex && flexRow && flexContextMobileView);
+    const chToPxConversionFactor = useChToPxConversionFactor();
+    // Mount resize observer to update flex context mobile view & run initial check.
     useEffect(() => {
         const checkBreakpoint = (elementWidth) => {
-            const minWidthPx = parseInt(sm, 10) * chToPxConversionFactor;
+            const minWidthPx = parseInt(smContentWidth, 10) * chToPxConversionFactor;
             const oneRemInPx = parseInt(remToPx(1), 10);
             const colGapPxAllowance = oneRemInPx * (0.5 * flexGapProp) * (columnCount - 1);
             const mobileViewBreakpoint = minWidthPx * columnCount + colGapPxAllowance;

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

@@ -1 +1 @@
-{"version":3,"file":"Details.js","sourceRoot":"","sources":["../../../src/components/Details/Details.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  FC,\n  Fragment,\n  ReactNode,\n  Ref,\n  useState,\n  useContext,\n  useEffect,\n  useMemo\n} from 'react';\nimport { remToPx } from 'polished';\n\nimport {\n  Text,\n  useBreakpoint,\n  useConsolidatedRef,\n  useTheme,\n  ForwardProps,\n  ExpandCollapse,\n  Button,\n  Flex,\n  Icon,\n  useI18n\n} from '@pega/cosmos-react-core';\n\nimport DetailsContext from './DetailsContext';\nimport {\n  StyledFieldValueGroupLabel,\n  StyledDetails,\n  StyledDetailList,\n  StyledHighlightedDetailList,\n  flexGapProp\n} from './Details.styles';\n\nexport interface DetailsProps {\n  highlightedData?: ReactNode[];\n  children?: ReactNode;\n  /** Text used as heading of list */\n  name?: string;\n  /**\n   * Whether the items children can be collapsed (only applies if name is provided)\n   * @default false\n   */\n  collapsible?: boolean;\n  /**\n   * Number of columns in detail layout\n   * @default 1\n   */\n  columnCount?: 1 | 2 | 3;\n  /** Whether detail list is rendering within another detail list\n   * @default false\n   */\n  nested?: boolean;\n  /** Whether detail list is rendering multiple sub-lists in columns (passed as children)\n   * @default false\n   */\n  asFlex?: boolean;\n  /** Whether to apply `value-comparison` styles to list items\n   * @default false\n   */\n  valueComparison?: boolean;\n  ref?: Ref<HTMLDListElement>;\n}\n\nconst Details: FC<DetailsProps & ForwardProps> = forwardRef(\n  (\n    {\n      highlightedData,\n      children,\n      name,\n      columnCount = 1,\n      nested = false,\n      asFlex = false,\n      valueComparison = false,\n      collapsible = false\n    },\n    ref\n  ) => {\n    const { longestLabelLength, mobileView, depth, ...context } = useContext(DetailsContext);\n    const {\n      base: {\n        'content-width': { sm }\n      }\n    } = useTheme();\n    const isSmallOrAbove = useBreakpoint('sm');\n    const listRef = useConsolidatedRef<HTMLDListElement>(ref);\n    const isXsContentWidthOrAbove = useBreakpoint('xs', {\n      breakpointRef: listRef,\n      themeProp: 'content-width'\n    });\n    const isMdContentWidthOrAbove = useBreakpoint('md', {\n      breakpointRef: listRef,\n      themeProp: 'content-width'\n    });\n    const flexRow = useBreakpoint(columnCount > 2 ? 'lg' : 'md', {\n      breakpointRef: listRef,\n      themeProp: 'content-width'\n    });\n    const t = useI18n();\n\n    const [flexContextMobileView, setFlexContextMobileView] = useState(false);\n    const [open, setOpen] = useState(true);\n\n    const labelLength = Math.max(14, Math.min(longestLabelLength ?? 16, 40));\n    const headingDepth = depth ?? 1;\n    const applyMobileView = asFlex\n      ? mobileView ||\n        (flexRow && flexContextMobileView) ||\n        !isSmallOrAbove ||\n        !isXsContentWidthOrAbove\n      : mobileView || !isSmallOrAbove || !isXsContentWidthOrAbove;\n\n    const chToPxConversionFactor = useMemo(() => {\n      const chToPxDiv = document.createElement('div');\n      chToPxDiv.style.width = '1ch';\n      document.body.append(chToPxDiv);\n      const conversionFactor = chToPxDiv.offsetWidth;\n      chToPxDiv.remove();\n\n      return conversionFactor;\n    }, []);\n\n    /**\n     * Mount resize observer to update flex context mobile view & run initial check.\n     */\n    useEffect(() => {\n      const checkBreakpoint = (elementWidth: number) => {\n        const minWidthPx = parseInt(sm, 10) * chToPxConversionFactor;\n        const oneRemInPx = parseInt(remToPx(1), 10);\n        const colGapPxAllowance = oneRemInPx * (0.5 * flexGapProp) * (columnCount - 1);\n        const mobileViewBreakpoint = minWidthPx * columnCount + colGapPxAllowance;\n\n        setFlexContextMobileView(elementWidth < mobileViewBreakpoint);\n      };\n      const resizeObserver = new ResizeObserver(entries => {\n        const containerPxWidth = entries[0].contentRect.width;\n        checkBreakpoint(containerPxWidth);\n      });\n\n      if (listRef.current) {\n        checkBreakpoint(listRef.current.offsetWidth);\n        resizeObserver.observe(listRef.current);\n      }\n\n      return () => {\n        resizeObserver.disconnect();\n      };\n    }, [listRef, columnCount]);\n\n    const contextValue = useMemo(() => {\n      return {\n        mobileView: applyMobileView,\n        depth: name ? headingDepth + 1 : headingDepth,\n        longestLabelLength,\n        ...context\n      };\n    }, [applyMobileView, name, headingDepth, longestLabelLength, context]);\n\n    const nameText = useMemo(() => {\n      return (\n        <Text variant={`h${Math.min(headingDepth, 6)}` as 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'}>\n          {name}\n        </Text>\n      );\n    }, [name, headingDepth]);\n\n    const details = useMemo(() => {\n      return (\n        <>\n          {highlightedData && (\n            <>\n              <Flex\n                as={StyledHighlightedDetailList}\n                forwardedAs={nested ? 'div' : 'dl'}\n                container={{ wrap: 'wrap', colGap: 10, rowGap: 1, alignItems: 'start' }}\n              >\n                {highlightedData.map((child, i) => (\n                  // eslint-disable-next-line react/no-array-index-key\n                  <Fragment key={i}>{child}</Fragment>\n                ))}\n              </Flex>\n\n              <hr />\n            </>\n          )}\n\n          {children ? (\n            <StyledDetailList\n              ref={listRef}\n              as={nested ? 'div' : 'dl'}\n              columnCount={columnCount}\n              labelLength={labelLength}\n              stacked={applyMobileView}\n              nested={nested}\n              flex={asFlex}\n              wrapped={asFlex ? !flexRow : false}\n              variant={valueComparison ? 'value-comparison' : undefined}\n              narrow={!isMdContentWidthOrAbove}\n            >\n              {children}\n            </StyledDetailList>\n          ) : null}\n        </>\n      );\n    }, [\n      highlightedData,\n      nested,\n      columnCount,\n      labelLength,\n      applyMobileView,\n      name,\n      asFlex,\n      flexRow,\n      valueComparison,\n      children\n    ]);\n\n    if (!name && !children && !highlightedData) return null;\n\n    return (\n      <DetailsContext.Provider value={contextValue}>\n        <StyledDetails>\n          {name && (\n            <StyledFieldValueGroupLabel>\n              {collapsible ? (\n                <Button\n                  type='button'\n                  variant='text'\n                  onClick={() => {\n                    setOpen(cur => !cur);\n                  }}\n                  aria-expanded={open ? 'true' : 'false'}\n                  aria-label={t(open ? 'collapse_noun' : 'expand_noun', [name])}\n                >\n                  <Flex container={{ alignItems: 'center', gap: 0.5 }} as='span'>\n                    <Icon name='caret-right' />\n                    {nameText}\n                  </Flex>\n                </Button>\n              ) : (\n                nameText\n              )}\n            </StyledFieldValueGroupLabel>\n          )}\n\n          {collapsible ? <ExpandCollapse collapsed={!open}>{details}</ExpandCollapse> : details}\n        </StyledDetails>\n      </DetailsContext.Provider>\n    );\n  }\n);\n\nexport default Details;\n"]}
+{"version":3,"file":"Details.js","sourceRoot":"","sources":["../../../src/components/Details/Details.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  FC,\n  Fragment,\n  ReactNode,\n  Ref,\n  useState,\n  useContext,\n  useEffect,\n  useMemo\n} from 'react';\nimport { remToPx } from 'polished';\n\nimport {\n  Text,\n  useBreakpoint,\n  useConsolidatedRef,\n  useTheme,\n  ForwardProps,\n  ExpandCollapse,\n  Button,\n  Flex,\n  Icon,\n  useChToPxConversionFactor,\n  useI18n\n} from '@pega/cosmos-react-core';\n\nimport DetailsContext from './DetailsContext';\nimport {\n  StyledFieldValueGroupLabel,\n  StyledDetails,\n  StyledDetailList,\n  StyledHighlightedDetailList,\n  flexGapProp\n} from './Details.styles';\n\nexport interface DetailsProps {\n  highlightedData?: ReactNode[];\n  children?: ReactNode;\n  /** Text used as heading of list */\n  name?: string;\n  /**\n   * Whether the items children can be collapsed (only applies if name is provided)\n   * @default false\n   */\n  collapsible?: boolean;\n  /**\n   * Number of columns in detail layout\n   * @default 1\n   */\n  columnCount?: 1 | 2 | 3;\n  /** Whether detail list is rendering within another detail list\n   * @default false\n   */\n  nested?: boolean;\n  /** Whether detail list is rendering multiple sub-lists in columns (passed as children)\n   * @default false\n   */\n  asFlex?: boolean;\n  /** Whether to apply `value-comparison` styles to list items\n   * @default false\n   */\n  valueComparison?: boolean;\n  ref?: Ref<HTMLDListElement>;\n}\n\nconst Details: FC<DetailsProps & ForwardProps> = forwardRef(\n  (\n    {\n      highlightedData,\n      children,\n      name,\n      columnCount = 1,\n      nested = false,\n      asFlex = false,\n      valueComparison = false,\n      collapsible = false\n    },\n    ref\n  ) => {\n    const {\n      longestLabelLength,\n      mobileView: inMobileView,\n      depth,\n      ...context\n    } = useContext(DetailsContext);\n    const {\n      base: {\n        'content-width': { sm: smContentWidth }\n      }\n    } = useTheme();\n    const isSmallOrAbove = useBreakpoint('sm');\n    const listRef = useConsolidatedRef<HTMLDListElement>(ref);\n    const isXsContentWidthOrAbove = useBreakpoint('xs', {\n      breakpointRef: listRef,\n      themeProp: 'content-width'\n    });\n    const isMdContentWidthOrAbove = useBreakpoint('md', {\n      breakpointRef: listRef,\n      themeProp: 'content-width'\n    });\n    const flexRow = useBreakpoint(columnCount > 2 ? 'lg' : 'md', {\n      breakpointRef: listRef,\n      themeProp: 'content-width'\n    });\n    const t = useI18n();\n\n    const [flexContextMobileView, setFlexContextMobileView] = useState(false);\n    const [open, setOpen] = useState(true);\n\n    const labelLength = Math.max(14, Math.min(longestLabelLength ?? 16, 40));\n    const headingDepth = depth ?? 1;\n    const applyMobileView =\n      inMobileView ||\n      !isSmallOrAbove ||\n      !isXsContentWidthOrAbove ||\n      (asFlex && flexRow && flexContextMobileView);\n\n    const chToPxConversionFactor = useChToPxConversionFactor();\n\n    // Mount resize observer to update flex context mobile view & run initial check.\n    useEffect(() => {\n      const checkBreakpoint = (elementWidth: number) => {\n        const minWidthPx = parseInt(smContentWidth, 10) * chToPxConversionFactor;\n        const oneRemInPx = parseInt(remToPx(1), 10);\n        const colGapPxAllowance = oneRemInPx * (0.5 * flexGapProp) * (columnCount - 1);\n        const mobileViewBreakpoint = minWidthPx * columnCount + colGapPxAllowance;\n\n        setFlexContextMobileView(elementWidth < mobileViewBreakpoint);\n      };\n      const resizeObserver = new ResizeObserver(entries => {\n        const containerPxWidth = entries[0].contentRect.width;\n        checkBreakpoint(containerPxWidth);\n      });\n\n      if (listRef.current) {\n        checkBreakpoint(listRef.current.offsetWidth);\n        resizeObserver.observe(listRef.current);\n      }\n\n      return () => {\n        resizeObserver.disconnect();\n      };\n    }, [listRef, columnCount]);\n\n    const contextValue = useMemo(() => {\n      return {\n        mobileView: applyMobileView,\n        depth: name ? headingDepth + 1 : headingDepth,\n        longestLabelLength,\n        ...context\n      };\n    }, [applyMobileView, name, headingDepth, longestLabelLength, context]);\n\n    const nameText = useMemo(() => {\n      return (\n        <Text variant={`h${Math.min(headingDepth, 6)}` as 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'}>\n          {name}\n        </Text>\n      );\n    }, [name, headingDepth]);\n\n    const details = useMemo(() => {\n      return (\n        <>\n          {highlightedData && (\n            <>\n              <Flex\n                as={StyledHighlightedDetailList}\n                forwardedAs={nested ? 'div' : 'dl'}\n                container={{ wrap: 'wrap', colGap: 10, rowGap: 1, alignItems: 'start' }}\n              >\n                {highlightedData.map((child, i) => (\n                  // eslint-disable-next-line react/no-array-index-key\n                  <Fragment key={i}>{child}</Fragment>\n                ))}\n              </Flex>\n\n              <hr />\n            </>\n          )}\n\n          {children ? (\n            <StyledDetailList\n              ref={listRef}\n              as={nested ? 'div' : 'dl'}\n              columnCount={columnCount}\n              labelLength={labelLength}\n              stacked={applyMobileView}\n              nested={nested}\n              flex={asFlex}\n              wrapped={asFlex ? !flexRow : false}\n              variant={valueComparison ? 'value-comparison' : undefined}\n              narrow={!isMdContentWidthOrAbove}\n            >\n              {children}\n            </StyledDetailList>\n          ) : null}\n        </>\n      );\n    }, [\n      highlightedData,\n      nested,\n      columnCount,\n      labelLength,\n      applyMobileView,\n      name,\n      asFlex,\n      flexRow,\n      valueComparison,\n      children\n    ]);\n\n    if (!name && !children && !highlightedData) return null;\n\n    return (\n      <DetailsContext.Provider value={contextValue}>\n        <StyledDetails>\n          {name && (\n            <StyledFieldValueGroupLabel>\n              {collapsible ? (\n                <Button\n                  type='button'\n                  variant='text'\n                  onClick={() => {\n                    setOpen(cur => !cur);\n                  }}\n                  aria-expanded={open ? 'true' : 'false'}\n                  aria-label={t(open ? 'collapse_noun' : 'expand_noun', [name])}\n                >\n                  <Flex container={{ alignItems: 'center', gap: 0.5 }} as='span'>\n                    <Icon name='caret-right' />\n                    {nameText}\n                  </Flex>\n                </Button>\n              ) : (\n                nameText\n              )}\n            </StyledFieldValueGroupLabel>\n          )}\n\n          {collapsible ? <ExpandCollapse collapsed={!open}>{details}</ExpandCollapse> : details}\n        </StyledDetails>\n      </DetailsContext.Provider>\n    );\n  }\n);\n\nexport default Details;\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"Details.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Details/Details.styles.ts"],"names":[],"mappings":"AAAA,OAAe,EAAO,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAE9D,OAAO,EAML,yBAAyB,EAM1B,MAAM,yBAAyB,CAAC;AAEjC,UAAU,qBAAsB,SAAQ,yBAAyB;IAC/D,kEAAkE;IAClE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,oDAAoD;IACpD,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,iCAAiC;IACjC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,sDAAsD;IACtD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,WAAW,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACxB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,YAAY,CAAC;CACrB;AAUD,eAAO,MAAM,eAAe;;;;;;;;;;;;;CAa3B,CAAC;AAEF,eAAO,MAAM,WAAW,MAAM,CAAC;AAE/B,eAAO,MAAM,0BAA0B,6EAyBrC,CAAC;AAIH,eAAO,MAAM,2BAA2B,4EAuBtC,CAAC;AAIH,eAAO,MAAM,aAAa,6EAKxB,CAAC;AAIH,eAAO,MAAM,gBAAgB,uQA6G5B,CAAC"}
+{"version":3,"file":"Details.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Details/Details.styles.ts"],"names":[],"mappings":"AAAA,OAAe,EAAO,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAE9D,OAAO,EAML,yBAAyB,EAM1B,MAAM,yBAAyB,CAAC;AAEjC,UAAU,qBAAsB,SAAQ,yBAAyB;IAC/D,kEAAkE;IAClE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,oDAAoD;IACpD,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,iCAAiC;IACjC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,sDAAsD;IACtD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,WAAW,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACxB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,YAAY,CAAC;CACrB;AAUD,eAAO,MAAM,eAAe;;;;;;;;;;;;;CAa3B,CAAC;AAEF,eAAO,MAAM,WAAW,MAAM,CAAC;AAE/B,eAAO,MAAM,0BAA0B,6EAyBrC,CAAC;AAIH,eAAO,MAAM,2BAA2B,4EAuBtC,CAAC;AAIH,eAAO,MAAM,aAAa,6EAAe,CAAC;AAE1C,eAAO,MAAM,gBAAgB,uQA+H5B,CAAC"}

package/lib/components/Details/Details.styles.js

@@ -25,7 +25,7 @@ export const StyledFieldValueGroupLabel = styled.div(({ theme }) => {
     grid-column-start: 1;
     grid-column-end: -1;
     margin-block-end: calc(0.5 * ${spacing});
-    margin-block-start: calc(3 * ${spacing});
+    margin-block-start: calc(1.5 * ${spacing});
 
     ${StyledButton} ${StyledIcon} {
       transition: transform ${animation.speed} ${animation.timing.ease};
@@ -63,17 +63,12 @@ export const StyledHighlightedDetailList = styled.dl(({ theme }) => {
   `;
 });
 StyledHighlightedDetailList.defaultProps = defaultThemeProp;
-export const StyledDetails = styled.div(({ theme }) => {
-    return css `
-    grid-column: 1 / -1;
-    margin-block-end: ${theme.base.spacing};
-  `;
-});
-StyledDetails.defaultProps = defaultThemeProp;
+export const StyledDetails = styled.div ``;
 export const StyledDetailList = styled(StyledFieldValueList)(({ stacked, flex, nested, labelLength, variant, theme, wrapped = false, columnCount = 1, narrow = false }) => {
     const { base: { spacing } } = theme;
     const isValueComparison = variant === 'value-comparison';
     const containerWidthCh = colCountChWidth[columnCount].containerWidth;
+    const columnWidthCh = colCountChWidth[columnCount].colWidth;
     const containerWidthMinusLabel = `${containerWidthCh - (labelLength ?? 0)}ch`;
     return css `
       /* Top Level Styles */
@@ -128,7 +123,17 @@ export const StyledDetailList = styled(StyledFieldValueList)(({ stacked, flex, n
           column-gap: 0;
           row-gap: calc(0.5 * ${spacing});
           max-width: ${containerWidthCh}ch;
+
+          > dd {
+            display: flex;
+            flex-direction: column;
+            justify-content: flex-end;
+          }
         `}
+
+        > ${StyledDetails} {
+          grid-column: 1 / -1;
+        }
       `}
 
       /* As Flex Container */
@@ -143,15 +148,21 @@ export const StyledDetailList = styled(StyledFieldValueList)(({ stacked, flex, n
         ${!wrapped &&
             css `
           > * {
-            max-width: ${`${100 / columnCount}%`};
+            width: 100%;
+            max-width: ${columnWidthCh}%;
           }
         `}
+
+        > ${StyledDetails} {
+          width: 100%;
+        }
       `}
 
       /* Key / Group Label Spacing */
       ${stacked &&
+        !isValueComparison &&
         css `
-        dt {
+        > dt {
           margin-block-start: calc(${verticalGapSpacingMultiplier} * ${spacing});
         }
       `}
@@ -159,6 +170,7 @@ export const StyledDetailList = styled(StyledFieldValueList)(({ stacked, flex, n
       /* Responsive behavior */
       ${narrow &&
         !stacked &&
+        !isValueComparison &&
         css `
         grid-template-columns: minmax(14ch, ${labelLength}ch) minmax(50%, 1fr);
       `}

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

@@ -1 +1 @@
-{"version":3,"file":"Details.styles.js","sourceRoot":"","sources":["../../../src/components/Details/Details.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css, DefaultTheme } from 'styled-components';\n\nimport {\n  calculateFontSize,\n  defaultThemeProp,\n  StyledFieldValue,\n  StyledStackedFieldValue,\n  StyledFieldValueList,\n  StyledFieldValueListProps,\n  StyledIcon,\n  FontSize,\n  PropsWithDefaults,\n  useDirection,\n  StyledButton\n} from '@pega/cosmos-react-core';\n\ninterface StyledDetailListProps extends StyledFieldValueListProps {\n  /** Whether individual list items all have labels stacks on top */\n  stacked?: boolean;\n  /** Whether the list is a flex row of other lists */\n  flex?: boolean;\n  /** Whether the list is nested */\n  nested?: boolean;\n  /** The character length applied to all list labels */\n  labelLength?: number;\n  /**\n   * Whether the list is wrapped to 1 column\n   * @default false\n   */\n  wrapped?: boolean;\n  /**\n   * Number of columns in the list\n   * @default 1\n   */\n  columnCount?: 1 | 2 | 3;\n  /**\n   * Whether to apply narrow list styles\n   * @default false\n   */\n  narrow?: boolean;\n  theme: DefaultTheme;\n}\n\ntype StyledDetailListPropsWithDefaults = PropsWithDefaults<\n  StyledDetailListProps,\n  'wrapped' | 'columnCount'\n>;\n\nconst verticalGapSpacingMultiplier = 1;\n\n// colWidth reduces by 20% as column count increases\nexport const colCountChWidth = {\n  '1': {\n    containerWidth: 100,\n    colWidth: 100\n  },\n  '2': {\n    containerWidth: 80 * 2,\n    colWidth: 80\n  },\n  '3': {\n    containerWidth: 64 * 3,\n    colWidth: 64\n  }\n};\n\nexport const flexGapProp = 5.5;\n\nexport const StyledFieldValueGroupLabel = styled.div(({ theme }) => {\n  const {\n    base: { spacing, animation }\n  } = theme;\n  const { rtl } = useDirection();\n\n  return css`\n    width: 100%;\n    grid-column-start: 1;\n    grid-column-end: -1;\n    margin-block-end: calc(0.5 * ${spacing});\n    margin-block-start: calc(3 * ${spacing});\n\n    ${StyledButton} ${StyledIcon} {\n      transition: transform ${animation.speed} ${animation.timing.ease};\n    }\n\n    ${StyledButton}[aria-expanded='true'] ${StyledIcon} {\n      transform: rotate(90deg);\n    }\n\n    ${StyledButton}[aria-expanded='false'] ${StyledIcon} {\n      transform: rotate(${rtl ? 180 : 0}deg);\n    }\n  `;\n});\n\nStyledFieldValueGroupLabel.defaultProps = defaultThemeProp;\n\nexport const StyledHighlightedDetailList = styled.dl(({ theme }) => {\n  const {\n    base: { spacing, palette }\n  } = theme;\n  const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n  return css`\n    max-width: ${colCountChWidth[3].containerWidth}ch;\n    padding-block-end: calc(1.5 * ${spacing});\n\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    + hr {\n      border-top: unset;\n      border-radius: unset;\n      border-style: unset;\n      border-bottom: 0.0625rem solid ${palette['border-line']};\n      margin-block-end: calc(1.5 * ${spacing});\n    }\n  `;\n});\n\nStyledHighlightedDetailList.defaultProps = defaultThemeProp;\n\nexport const StyledDetails = styled.div(({ theme }) => {\n  return css`\n    grid-column: 1 / -1;\n    margin-block-end: ${theme.base.spacing};\n  `;\n});\n\nStyledDetails.defaultProps = defaultThemeProp;\n\nexport const StyledDetailList = styled(StyledFieldValueList)<StyledDetailListPropsWithDefaults>(\n  ({\n    stacked,\n    flex,\n    nested,\n    labelLength,\n    variant,\n    theme,\n    wrapped = false,\n    columnCount = 1,\n    narrow = false\n  }): any => {\n    const {\n      base: { spacing }\n    } = theme;\n\n    const isValueComparison = variant === 'value-comparison';\n    const containerWidthCh = colCountChWidth[columnCount].containerWidth;\n    const containerWidthMinusLabel = `${containerWidthCh - (labelLength ?? 0)}ch`;\n\n    return css`\n      /* Top Level Styles */\n      ${!nested &&\n      css`\n        ${StyledFieldValue} {\n          word-break: break-word;\n          overflow: auto;\n        }\n\n        ${StyledStackedFieldValue} {\n          grid-column: 1 / -1;\n        }\n      `}\n\n      /* Nested List */\n      ${nested &&\n      css`\n        grid-column: 1 / -1;\n      `}\n\n      /* As Field Grid */\n      ${!flex &&\n      css`\n        display: grid;\n        grid-template-columns: minmax(14ch, ${labelLength}ch) minmax(14ch, 1fr);\n        column-gap: calc(2 * ${spacing});\n        row-gap: calc(${verticalGapSpacingMultiplier} * ${spacing});\n\n        ${stacked &&\n        css`\n          grid-template-columns: minmax(0, 1fr);\n          row-gap: 0;\n        `}\n\n        > ${StyledStackedFieldValue} {\n          max-width: ${containerWidthCh}ch;\n        }\n\n        > ${StyledFieldValue} {\n          max-width: calc(${containerWidthMinusLabel} - calc(2 * ${spacing}));\n\n          ${!isValueComparison &&\n          css`\n            width: 100%;\n          `}\n        }\n\n        ${isValueComparison &&\n        css`\n          grid-template-columns: auto auto;\n          column-gap: 0;\n          row-gap: calc(0.5 * ${spacing});\n          max-width: ${containerWidthCh}ch;\n        `}\n      `}\n\n      /* As Flex Container */\n      ${flex &&\n      css`\n        display: flex;\n        flex-direction: ${wrapped ? 'column' : 'row'};\n        column-gap: calc(${flexGapProp} * ${spacing});\n        align-items: flex-start;\n        max-width: ${containerWidthCh}ch;\n\n        ${!wrapped &&\n        css`\n          > * {\n            max-width: ${`${100 / columnCount}%`};\n          }\n        `}\n      `}\n\n      /* Key / Group Label Spacing */\n      ${stacked &&\n      css`\n        dt {\n          margin-block-start: calc(${verticalGapSpacingMultiplier} * ${spacing});\n        }\n      `}\n\n      /* Responsive behavior */\n      ${narrow &&\n      !stacked &&\n      css`\n        grid-template-columns: minmax(14ch, ${labelLength}ch) minmax(50%, 1fr);\n      `}\n    `;\n  }\n);\n\nStyledDetailList.defaultProps = defaultThemeProp;\n"]}
+{"version":3,"file":"Details.styles.js","sourceRoot":"","sources":["../../../src/components/Details/Details.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css, DefaultTheme } from 'styled-components';\n\nimport {\n  calculateFontSize,\n  defaultThemeProp,\n  StyledFieldValue,\n  StyledStackedFieldValue,\n  StyledFieldValueList,\n  StyledFieldValueListProps,\n  StyledIcon,\n  FontSize,\n  PropsWithDefaults,\n  useDirection,\n  StyledButton\n} from '@pega/cosmos-react-core';\n\ninterface StyledDetailListProps extends StyledFieldValueListProps {\n  /** Whether individual list items all have labels stacks on top */\n  stacked?: boolean;\n  /** Whether the list is a flex row of other lists */\n  flex?: boolean;\n  /** Whether the list is nested */\n  nested?: boolean;\n  /** The character length applied to all list labels */\n  labelLength?: number;\n  /**\n   * Whether the list is wrapped to 1 column\n   * @default false\n   */\n  wrapped?: boolean;\n  /**\n   * Number of columns in the list\n   * @default 1\n   */\n  columnCount?: 1 | 2 | 3;\n  /**\n   * Whether to apply narrow list styles\n   * @default false\n   */\n  narrow?: boolean;\n  theme: DefaultTheme;\n}\n\ntype StyledDetailListPropsWithDefaults = PropsWithDefaults<\n  StyledDetailListProps,\n  'wrapped' | 'columnCount'\n>;\n\nconst verticalGapSpacingMultiplier = 1;\n\n// colWidth reduces by 20% as column count increases\nexport const colCountChWidth = {\n  '1': {\n    containerWidth: 100,\n    colWidth: 100\n  },\n  '2': {\n    containerWidth: 80 * 2,\n    colWidth: 80\n  },\n  '3': {\n    containerWidth: 64 * 3,\n    colWidth: 64\n  }\n};\n\nexport const flexGapProp = 5.5;\n\nexport const StyledFieldValueGroupLabel = styled.div(({ theme }) => {\n  const {\n    base: { spacing, animation }\n  } = theme;\n  const { rtl } = useDirection();\n\n  return css`\n    width: 100%;\n    grid-column-start: 1;\n    grid-column-end: -1;\n    margin-block-end: calc(0.5 * ${spacing});\n    margin-block-start: calc(1.5 * ${spacing});\n\n    ${StyledButton} ${StyledIcon} {\n      transition: transform ${animation.speed} ${animation.timing.ease};\n    }\n\n    ${StyledButton}[aria-expanded='true'] ${StyledIcon} {\n      transform: rotate(90deg);\n    }\n\n    ${StyledButton}[aria-expanded='false'] ${StyledIcon} {\n      transform: rotate(${rtl ? 180 : 0}deg);\n    }\n  `;\n});\n\nStyledFieldValueGroupLabel.defaultProps = defaultThemeProp;\n\nexport const StyledHighlightedDetailList = styled.dl(({ theme }) => {\n  const {\n    base: { spacing, palette }\n  } = theme;\n  const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n  return css`\n    max-width: ${colCountChWidth[3].containerWidth}ch;\n    padding-block-end: calc(1.5 * ${spacing});\n\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    + hr {\n      border-top: unset;\n      border-radius: unset;\n      border-style: unset;\n      border-bottom: 0.0625rem solid ${palette['border-line']};\n      margin-block-end: calc(1.5 * ${spacing});\n    }\n  `;\n});\n\nStyledHighlightedDetailList.defaultProps = defaultThemeProp;\n\nexport const StyledDetails = styled.div``;\n\nexport const StyledDetailList = styled(StyledFieldValueList)<StyledDetailListPropsWithDefaults>(\n  ({\n    stacked,\n    flex,\n    nested,\n    labelLength,\n    variant,\n    theme,\n    wrapped = false,\n    columnCount = 1,\n    narrow = false\n  }): any => {\n    const {\n      base: { spacing }\n    } = theme;\n\n    const isValueComparison = variant === 'value-comparison';\n    const containerWidthCh = colCountChWidth[columnCount].containerWidth;\n    const columnWidthCh = colCountChWidth[columnCount].colWidth;\n    const containerWidthMinusLabel = `${containerWidthCh - (labelLength ?? 0)}ch`;\n\n    return css`\n      /* Top Level Styles */\n      ${!nested &&\n      css`\n        ${StyledFieldValue} {\n          word-break: break-word;\n          overflow: auto;\n        }\n\n        ${StyledStackedFieldValue} {\n          grid-column: 1 / -1;\n        }\n      `}\n\n      /* Nested List */\n      ${nested &&\n      css`\n        grid-column: 1 / -1;\n      `}\n\n      /* As Field Grid */\n      ${!flex &&\n      css`\n        display: grid;\n        grid-template-columns: minmax(14ch, ${labelLength}ch) minmax(14ch, 1fr);\n        column-gap: calc(2 * ${spacing});\n        row-gap: calc(${verticalGapSpacingMultiplier} * ${spacing});\n\n        ${stacked &&\n        css`\n          grid-template-columns: minmax(0, 1fr);\n          row-gap: 0;\n        `}\n\n        > ${StyledStackedFieldValue} {\n          max-width: ${containerWidthCh}ch;\n        }\n\n        > ${StyledFieldValue} {\n          max-width: calc(${containerWidthMinusLabel} - calc(2 * ${spacing}));\n\n          ${!isValueComparison &&\n          css`\n            width: 100%;\n          `}\n        }\n\n        ${isValueComparison &&\n        css`\n          grid-template-columns: auto auto;\n          column-gap: 0;\n          row-gap: calc(0.5 * ${spacing});\n          max-width: ${containerWidthCh}ch;\n\n          > dd {\n            display: flex;\n            flex-direction: column;\n            justify-content: flex-end;\n          }\n        `}\n\n        > ${StyledDetails} {\n          grid-column: 1 / -1;\n        }\n      `}\n\n      /* As Flex Container */\n      ${flex &&\n      css`\n        display: flex;\n        flex-direction: ${wrapped ? 'column' : 'row'};\n        column-gap: calc(${flexGapProp} * ${spacing});\n        align-items: flex-start;\n        max-width: ${containerWidthCh}ch;\n\n        ${!wrapped &&\n        css`\n          > * {\n            width: 100%;\n            max-width: ${columnWidthCh}%;\n          }\n        `}\n\n        > ${StyledDetails} {\n          width: 100%;\n        }\n      `}\n\n      /* Key / Group Label Spacing */\n      ${stacked &&\n      !isValueComparison &&\n      css`\n        > dt {\n          margin-block-start: calc(${verticalGapSpacingMultiplier} * ${spacing});\n        }\n      `}\n\n      /* Responsive behavior */\n      ${narrow &&\n      !stacked &&\n      !isValueComparison &&\n      css`\n        grid-template-columns: minmax(14ch, ${labelLength}ch) minmax(50%, 1fr);\n      `}\n    `;\n  }\n);\n\nStyledDetailList.defaultProps = defaultThemeProp;\n"]}

package/lib/components/Glimpse/Glimpse.d.ts

@@ -1,20 +1,20 @@
-import { FunctionComponent, Ref } from 'react';
-import { BaseProps, FieldValueListProps, ForwardProps, MenuItemProps, NoChildrenProp } from '@pega/cosmos-react-core';
-export interface GlimpseProps extends BaseProps, NoChildrenProp {
+import { FunctionComponent, MouseEventHandler, Ref } from 'react';
+import { BaseProps, ButtonProps, FieldValueListProps, ForwardProps, InfoDialogProps, NoChildrenProp, OmitStrict } from '@pega/cosmos-react-core';
+type InfoDialogSummaryHeading = Extract<InfoDialogProps['heading'], object>;
+export interface GlimpseProps extends BaseProps, OmitStrict<InfoDialogProps, 'children'>, NoChildrenProp {
     /** The unique id for the operator. */
     id: string;
-    /** The primary piece of item information as a string. */
-    primary: MenuItemProps['primary'];
-    /** Secondary info about an item. Useful for additional metadata or context. */
-    secondary?: MenuItemProps['secondary'];
-    /** A visual to assist identifying an item. e.g. Avatar or Icon. */
-    visual?: MenuItemProps['visual'];
+    /** Primary, secondary and avatar for the glimpse. */
+    heading?: InfoDialogSummaryHeading;
     /** The set of field values to render in the list. */
     fields?: FieldValueListProps['fields'];
     /** Ref for the wrapping element. */
     ref?: Ref<HTMLDivElement>;
+    /** Callback for click event on View profile button. Passing this will render View profile button */
+    onViewProfile?: MouseEventHandler<HTMLButtonElement>;
+    /** A URL location to navigate to. Passing an href will render View profile button as a link. */
+    href?: ButtonProps['href'];
 }
-export declare const StyledGlimpse: import("styled-components").StyledComponent<FunctionComponent<import("@pega/cosmos-react-core").CardProps & ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
 declare const Glimpse: FunctionComponent<GlimpseProps & ForwardProps>;
 export default Glimpse;
 //# sourceMappingURL=Glimpse.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Glimpse.d.ts","sourceRoot":"","sources":["../../../src/components/Glimpse/Glimpse.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAG5E,OAAO,EACL,SAAS,EAMT,mBAAmB,EACnB,YAAY,EACZ,aAAa,EAEb,cAAc,EAGf,MAAM,yBAAyB,CAAC;AAGjC,MAAM,WAAW,YAAa,SAAQ,SAAS,EAAE,cAAc;IAC7D,sCAAsC;IACtC,EAAE,EAAE,MAAM,CAAC;IACX,yDAAyD;IACzD,OAAO,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IAClC,+EAA+E;IAC/E,SAAS,CAAC,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;IACvC,mEAAmE;IACnE,MAAM,CAAC,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAC;IACjC,qDAAqD;IACrD,MAAM,CAAC,EAAE,mBAAmB,CAAC,QAAQ,CAAC,CAAC;IACvC,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,eAAO,MAAM,aAAa,iLAUxB,CAAC;AAIH,QAAA,MAAM,OAAO,EAAE,iBAAiB,CAAC,YAAY,GAAG,YAAY,CAsB3D,CAAC;AAEF,eAAe,OAAO,CAAC"}
+{"version":3,"file":"Glimpse.d.ts","sourceRoot":"","sources":["../../../src/components/Glimpse/Glimpse.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAEjB,iBAAiB,EAEjB,GAAG,EACJ,MAAM,OAAO,CAAC;AAEf,OAAO,EACL,SAAS,EAET,WAAW,EAEX,mBAAmB,EAEnB,YAAY,EAEZ,eAAe,EACf,cAAc,EACd,UAAU,EAEX,MAAM,yBAAyB,CAAC;AAEjC,KAAK,wBAAwB,GAAG,OAAO,CAAC,eAAe,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC,CAAC;AAE5E,MAAM,WAAW,YACf,SAAQ,SAAS,EACf,UAAU,CAAC,eAAe,EAAE,UAAU,CAAC,EACvC,cAAc;IAChB,sCAAsC;IACtC,EAAE,EAAE,MAAM,CAAC;IACX,qDAAqD;IACrD,OAAO,CAAC,EAAE,wBAAwB,CAAC;IACnC,qDAAqD;IACrD,MAAM,CAAC,EAAE,mBAAmB,CAAC,QAAQ,CAAC,CAAC;IACvC,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B,oGAAoG;IACpG,aAAa,CAAC,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACrD,gGAAgG;IAChG,IAAI,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;CAC5B;AAED,QAAA,MAAM,OAAO,EAAE,iBAAiB,CAAC,YAAY,GAAG,YAAY,CA2C3D,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/lib/components/Glimpse/Glimpse.js

@@ -1,22 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from 'react';
-import styled, { css } from 'styled-components';
-import { Card, CardContent, CardHeader, defaultThemeProp, FieldValueList, MetaList, StyledFieldValueList, SummaryItem } from '@pega/cosmos-react-core';
-import { StyledCardContent } from '@pega/cosmos-react-core/lib/components/Card/CardContent';
-export const StyledGlimpse = styled(Card)(({ theme }) => {
-    return css `
-    ${StyledCardContent} {
-      border-top: solid 0.0625rem ${theme.base.palette['border-line']};
-    }
-
-    ${StyledFieldValueList} {
-      padding-top: calc(1.5 * ${theme.base.spacing});
-    }
-  `;
-});
-StyledGlimpse.defaultProps = defaultThemeProp;
-const Glimpse = forwardRef(({ primary, visual, secondary = [], fields = [] }, ref) => {
-    return (_jsxs(StyledGlimpse, { ref: ref, children: [_jsx(CardHeader, { children: _jsx(SummaryItem, { primary: primary, secondary: _jsx(MetaList, { items: secondary }), visual: visual }) }), !!fields.length && (_jsx(CardContent, { children: _jsx(FieldValueList, { fields: fields }) }))] }));
+import { Button, FieldValueList, Flex, InfoDialog, useI18n } from '@pega/cosmos-react-core';
+const Glimpse = forwardRef(({ heading, fields = [], target, onDismiss, href, progress, onViewProfile, ...restProps }, ref) => {
+    const t = useI18n();
+    return (_jsx(InfoDialog, { ...restProps, target: target, heading: heading, progress: progress, onDismiss: onDismiss, ref: ref, children: _jsxs(Flex, { container: { direction: 'column', alignItems: 'start', gap: 2 }, children: [fields.length > 0 && _jsx(FieldValueList, { fields: fields }), (onViewProfile || href) && (_jsx(Button, { href: href, onClick: (e) => {
+                        onViewProfile?.(e);
+                        onDismiss();
+                    }, children: t('view_profile') }))] }) }));
 });
 export default Glimpse;
 //# sourceMappingURL=Glimpse.js.map

package/lib/components/Glimpse/Glimpse.js.map

@@ -1 +1 @@
-{"version":3,"file":"Glimpse.js","sourceRoot":"","sources":["../../../src/components/Glimpse/Glimpse.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAA2C,MAAM,OAAO,CAAC;AAC5E,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAEL,IAAI,EACJ,WAAW,EACX,UAAU,EACV,gBAAgB,EAChB,cAAc,EAId,QAAQ,EAER,oBAAoB,EACpB,WAAW,EACZ,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,iBAAiB,EAAE,MAAM,yDAAyD,CAAC;AAiB5F,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACtD,OAAO,GAAG,CAAA;MACN,iBAAiB;oCACa,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;;;MAG/D,oBAAoB;gCACM,KAAK,CAAC,IAAI,CAAC,OAAO;;GAE/C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,aAAa,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE9C,MAAM,OAAO,GAAmD,UAAU,CACxE,CACE,EAAE,OAAO,EAAE,MAAM,EAAE,SAAS,GAAG,EAAE,EAAE,MAAM,GAAG,EAAE,EAAiC,EAC/E,GAAwB,EACxB,EAAE;IACF,OAAO,CACL,MAAC,aAAa,IAAC,GAAG,EAAE,GAAG,aACrB,KAAC,UAAU,cACT,KAAC,WAAW,IACV,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,KAAC,QAAQ,IAAC,KAAK,EAAE,SAAS,GAAI,EACzC,MAAM,EAAE,MAAM,GACd,GACS,EACZ,CAAC,CAAC,MAAM,CAAC,MAAM,IAAI,CAClB,KAAC,WAAW,cACV,KAAC,cAAc,IAAC,MAAM,EAAE,MAAM,GAAI,GACtB,CACf,IACa,CACjB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,OAAO,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  BaseProps,\n  Card,\n  CardContent,\n  CardHeader,\n  defaultThemeProp,\n  FieldValueList,\n  FieldValueListProps,\n  ForwardProps,\n  MenuItemProps,\n  MetaList,\n  NoChildrenProp,\n  StyledFieldValueList,\n  SummaryItem\n} from '@pega/cosmos-react-core';\nimport { StyledCardContent } from '@pega/cosmos-react-core/lib/components/Card/CardContent';\n\nexport interface GlimpseProps extends BaseProps, NoChildrenProp {\n  /** The unique id for the operator. */\n  id: string;\n  /** The primary piece of item information as a string. */\n  primary: MenuItemProps['primary'];\n  /** Secondary info about an item. Useful for additional metadata or context. */\n  secondary?: MenuItemProps['secondary'];\n  /** A visual to assist identifying an item. e.g. Avatar or Icon. */\n  visual?: MenuItemProps['visual'];\n  /** The set of field values to render in the list. */\n  fields?: FieldValueListProps['fields'];\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport const StyledGlimpse = styled(Card)(({ theme }) => {\n  return css`\n    ${StyledCardContent} {\n      border-top: solid 0.0625rem ${theme.base.palette['border-line']};\n    }\n\n    ${StyledFieldValueList} {\n      padding-top: calc(1.5 * ${theme.base.spacing});\n    }\n  `;\n});\n\nStyledGlimpse.defaultProps = defaultThemeProp;\n\nconst Glimpse: FunctionComponent<GlimpseProps & ForwardProps> = forwardRef(\n  (\n    { primary, visual, secondary = [], fields = [] }: PropsWithoutRef<GlimpseProps>,\n    ref: GlimpseProps['ref']\n  ) => {\n    return (\n      <StyledGlimpse ref={ref}>\n        <CardHeader>\n          <SummaryItem\n            primary={primary}\n            secondary={<MetaList items={secondary} />}\n            visual={visual}\n          />\n        </CardHeader>\n        {!!fields.length && (\n          <CardContent>\n            <FieldValueList fields={fields} />\n          </CardContent>\n        )}\n      </StyledGlimpse>\n    );\n  }\n);\n\nexport default Glimpse;\n"]}
+{"version":3,"file":"Glimpse.js","sourceRoot":"","sources":["../../../src/components/Glimpse/Glimpse.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,UAAU,EAMX,MAAM,OAAO,CAAC;AAEf,OAAO,EAEL,MAAM,EAEN,cAAc,EAEd,IAAI,EAEJ,UAAU,EAIV,OAAO,EACR,MAAM,yBAAyB,CAAC;AAsBjC,MAAM,OAAO,GAAmD,UAAU,CACxE,CACE,EACE,OAAO,EACP,MAAM,GAAG,EAAE,EACX,MAAM,EACN,SAAS,EACT,IAAI,EACJ,QAAQ,EACR,aAAa,EACb,GAAG,SAAS,EACkB,EAChC,GAAwB,EACxB,EAAE;IACF,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,OAAO,CACL,KAAC,UAAU,OACL,SAAS,EACb,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,SAAS,EACpB,GAAG,EAAE,GAAG,YAER,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,UAAU,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,EAAE,aAClE,MAAM,CAAC,MAAM,GAAG,CAAC,IAAI,KAAC,cAAc,IAAC,MAAM,EAAE,MAAM,GAAI,EAEvD,CAAC,aAAa,IAAI,IAAI,CAAC,IAAI,CAC1B,KAAC,MAAM,IACL,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,CAAC,CAAgC,EAAE,EAAE;wBAC5C,aAAa,EAAE,CAAC,CAAC,CAAC,CAAC;wBACnB,SAAS,EAAE,CAAC;oBACd,CAAC,YAEA,CAAC,CAAC,cAAc,CAAC,GACX,CACV,IACI,GACI,CACd,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,OAAO,CAAC","sourcesContent":["import {\n  forwardRef,\n  FunctionComponent,\n  MouseEvent,\n  MouseEventHandler,\n  PropsWithoutRef,\n  Ref\n} from 'react';\n\nimport {\n  BaseProps,\n  Button,\n  ButtonProps,\n  FieldValueList,\n  FieldValueListProps,\n  Flex,\n  ForwardProps,\n  InfoDialog,\n  InfoDialogProps,\n  NoChildrenProp,\n  OmitStrict,\n  useI18n\n} from '@pega/cosmos-react-core';\n\ntype InfoDialogSummaryHeading = Extract<InfoDialogProps['heading'], object>;\n\nexport interface GlimpseProps\n  extends BaseProps,\n    OmitStrict<InfoDialogProps, 'children'>,\n    NoChildrenProp {\n  /** The unique id for the operator. */\n  id: string;\n  /** Primary, secondary and avatar for the glimpse. */\n  heading?: InfoDialogSummaryHeading;\n  /** The set of field values to render in the list. */\n  fields?: FieldValueListProps['fields'];\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLDivElement>;\n  /** Callback for click event on View profile button. Passing this will render View profile button */\n  onViewProfile?: MouseEventHandler<HTMLButtonElement>;\n  /** A URL location to navigate to. Passing an href will render View profile button as a link. */\n  href?: ButtonProps['href'];\n}\n\nconst Glimpse: FunctionComponent<GlimpseProps & ForwardProps> = forwardRef(\n  (\n    {\n      heading,\n      fields = [],\n      target,\n      onDismiss,\n      href,\n      progress,\n      onViewProfile,\n      ...restProps\n    }: PropsWithoutRef<GlimpseProps>,\n    ref: GlimpseProps['ref']\n  ) => {\n    const t = useI18n();\n\n    return (\n      <InfoDialog\n        {...restProps}\n        target={target}\n        heading={heading}\n        progress={progress}\n        onDismiss={onDismiss}\n        ref={ref}\n      >\n        <Flex container={{ direction: 'column', alignItems: 'start', gap: 2 }}>\n          {fields.length > 0 && <FieldValueList fields={fields} />}\n\n          {(onViewProfile || href) && (\n            <Button\n              href={href}\n              onClick={(e: MouseEvent<HTMLButtonElement>) => {\n                onViewProfile?.(e);\n                onDismiss();\n              }}\n            >\n              {t('view_profile')}\n            </Button>\n          )}\n        </Flex>\n      </InfoDialog>\n    );\n  }\n);\n\nexport default Glimpse;\n"]}

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

@@ -1,3 +1,3 @@
 export { default } from './Glimpse';
-export { GlimpseProps, StyledGlimpse } from './Glimpse';
+export { GlimpseProps } from './Glimpse';
 //# sourceMappingURL=index.d.ts.map

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

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

package/lib/components/Glimpse/index.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Glimpse/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAgB,aAAa,EAAE,MAAM,WAAW,CAAC","sourcesContent":["export { default } from './Glimpse';\nexport { GlimpseProps, StyledGlimpse } from './Glimpse';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Glimpse/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC","sourcesContent":["export { default } from './Glimpse';\nexport { GlimpseProps } from './Glimpse';\n"]}

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

@@ -5,19 +5,13 @@ export interface IntelligentGuidanceItemProps {
     id: string;
     /** The label text of the item. */
     label: string;
-    /**
-     * Name of the icon (to be selected from default Pega icon set)
-     */
+    /** Name of the icon (to be selected from default Pega icon set) */
     icon: IconProps['name'];
     /** Represents the type of task */
     type: string;
-    /**
-     * Click handler for the action button.
-     */
+    /** Click handler for the action button. */
     onClick: (e: MouseEvent | KeyboardEvent) => void;
-    /**
-     * Dismiss handler for the action button.
-     */
+    /** Dismiss handler for the action button. */
     onDismiss?: (id: IntelligentGuidanceItemProps['id'], e: MouseEvent<HTMLButtonElement | HTMLAnchorElement | HTMLInputElement>) => void;
     /** Flag that indicates if item is new
      * @default false

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

@@ -1 +1 @@
-{"version":3,"file":"IntelligentGuidance.types.d.ts","sourceRoot":"","sources":["../../../src/components/IntelligentGuidance/IntelligentGuidance.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAEvD,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAE/E,MAAM,WAAW,4BAA4B;IAC3C,yBAAyB;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,kCAAkC;IAClC,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IACxB,kCAAkC;IAClC,IAAI,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,OAAO,EAAE,CAAC,CAAC,EAAE,UAAU,GAAG,aAAa,KAAK,IAAI,CAAC;IACjD;;OAEG;IACH,SAAS,CAAC,EAAE,CACV,EAAE,EAAE,4BAA4B,CAAC,IAAI,CAAC,EACtC,CAAC,EAAE,UAAU,CAAC,iBAAiB,GAAG,iBAAiB,GAAG,gBAAgB,CAAC,KACpE,IAAI,CAAC;IACV;;OAEG;IACH,GAAG,CAAC,EAAE,OAAO,CAAC;CACf;AAED,MAAM,CAAC,OAAO,WAAW,wBAAyB,SAAQ,SAAS,EAAE,cAAc;IACjF,8BAA8B;IAC9B,KAAK,EAAE,4BAA4B,EAAE,CAAC;IACtC,mBAAmB;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,+DAA+D;IAC/D,WAAW,EAAE,OAAO,CAAC;IACrB,sDAAsD;IACtD,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B"}
+{"version":3,"file":"IntelligentGuidance.types.d.ts","sourceRoot":"","sources":["../../../src/components/IntelligentGuidance/IntelligentGuidance.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAEvD,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAE/E,MAAM,WAAW,4BAA4B;IAC3C,yBAAyB;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,kCAAkC;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,mEAAmE;IACnE,IAAI,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IACxB,kCAAkC;IAClC,IAAI,EAAE,MAAM,CAAC;IACb,2CAA2C;IAC3C,OAAO,EAAE,CAAC,CAAC,EAAE,UAAU,GAAG,aAAa,KAAK,IAAI,CAAC;IACjD,6CAA6C;IAC7C,SAAS,CAAC,EAAE,CACV,EAAE,EAAE,4BAA4B,CAAC,IAAI,CAAC,EACtC,CAAC,EAAE,UAAU,CAAC,iBAAiB,GAAG,iBAAiB,GAAG,gBAAgB,CAAC,KACpE,IAAI,CAAC;IACV;;OAEG;IACH,GAAG,CAAC,EAAE,OAAO,CAAC;CACf;AAED,MAAM,CAAC,OAAO,WAAW,wBAAyB,SAAQ,SAAS,EAAE,cAAc;IACjF,8BAA8B;IAC9B,KAAK,EAAE,4BAA4B,EAAE,CAAC;IACtC,mBAAmB;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,+DAA+D;IAC/D,WAAW,EAAE,OAAO,CAAC;IACrB,sDAAsD;IACtD,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B"}

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

@@ -1 +1 @@
-{"version":3,"file":"IntelligentGuidance.types.js","sourceRoot":"","sources":["../../../src/components/IntelligentGuidance/IntelligentGuidance.types.ts"],"names":[],"mappings":"","sourcesContent":["import { MouseEvent, KeyboardEvent, Ref } from 'react';\n\nimport { BaseProps, IconProps, NoChildrenProp } from '@pega/cosmos-react-core';\n\nexport interface IntelligentGuidanceItemProps {\n  /** Unique id for item */\n  id: string;\n  /** The label text of the item. */\n  label: string;\n  /**\n   * Name of the icon (to be selected from default Pega icon set)\n   */\n  icon: IconProps['name'];\n  /** Represents the type of task */\n  type: string;\n  /**\n   * Click handler for the action button.\n   */\n  onClick: (e: MouseEvent | KeyboardEvent) => void;\n  /**\n   * Dismiss handler for the action button.\n   */\n  onDismiss?: (\n    id: IntelligentGuidanceItemProps['id'],\n    e: MouseEvent<HTMLButtonElement | HTMLAnchorElement | HTMLInputElement>\n  ) => void;\n  /** Flag that indicates if item is new\n   * @default false\n   */\n  new?: boolean;\n}\n\nexport default interface IntelligentGuidanceProps extends BaseProps, NoChildrenProp {\n  /** List of guidance items. */\n  items: IntelligentGuidanceItemProps[];\n  /** Header text. */\n  heading: string;\n  /** Flag that indicates if intelligent guidance is collapsed */\n  isCollapsed: boolean;\n  /** Callback when expand/collapse button is clicked */\n  onExpandCollapse: () => void;\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLDivElement>;\n}\n"]}
+{"version":3,"file":"IntelligentGuidance.types.js","sourceRoot":"","sources":["../../../src/components/IntelligentGuidance/IntelligentGuidance.types.ts"],"names":[],"mappings":"","sourcesContent":["import { MouseEvent, KeyboardEvent, Ref } from 'react';\n\nimport { BaseProps, IconProps, NoChildrenProp } from '@pega/cosmos-react-core';\n\nexport interface IntelligentGuidanceItemProps {\n  /** Unique id for item */\n  id: string;\n  /** The label text of the item. */\n  label: string;\n  /** Name of the icon (to be selected from default Pega icon set) */\n  icon: IconProps['name'];\n  /** Represents the type of task */\n  type: string;\n  /** Click handler for the action button. */\n  onClick: (e: MouseEvent | KeyboardEvent) => void;\n  /** Dismiss handler for the action button. */\n  onDismiss?: (\n    id: IntelligentGuidanceItemProps['id'],\n    e: MouseEvent<HTMLButtonElement | HTMLAnchorElement | HTMLInputElement>\n  ) => void;\n  /** Flag that indicates if item is new\n   * @default false\n   */\n  new?: boolean;\n}\n\nexport default interface IntelligentGuidanceProps extends BaseProps, NoChildrenProp {\n  /** List of guidance items. */\n  items: IntelligentGuidanceItemProps[];\n  /** Header text. */\n  heading: string;\n  /** Flag that indicates if intelligent guidance is collapsed */\n  isCollapsed: boolean;\n  /** Callback when expand/collapse button is clicked */\n  onExpandCollapse: () => void;\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLDivElement>;\n}\n"]}

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

@@ -26,7 +26,7 @@ export interface SelectFilterProps extends BaseFilterProps {
     items: SelectFilterItemProps[];
     /**
      * Determines if the filter will render as a RadioButtonGroup or CheckboxGroup.
-     * @default "multi-select"
+     * @default 'multi-select'
      */
     selectType?: 'single-select' | 'multi-select';
 }
@@ -46,7 +46,7 @@ export interface TextFilterProps extends BaseFilterProps {
     value?: string;
     /**
      * Placeholder text. The default value is a locale translation of 'Search…'
-     * @default "Search…"
+     * @default 'Search…'
      */
     placeholder?: string;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"SearchResults.types.js","sourceRoot":"","sources":["../../../src/components/SearchResults/SearchResults.types.ts"],"names":[],"mappings":"","sourcesContent":["import { Ref } from 'react';\n\nimport {\n  LinkProps,\n  MetaListProps,\n  NoChildrenProp,\n  OmitStrict,\n  RadioCheckProps,\n  SearchInputProps\n} from '@pega/cosmos-react-core';\n\ninterface BaseFilterProps {\n  /** The name of the filter. */\n  name: string;\n  /**\n   * Determines if the filter will start in an expanded state.\n   * @default true\n   */\n  expanded?: boolean;\n}\n\nexport interface SelectFilterItemProps {\n  /** The id for the filter option. */\n  id: NonNullable<RadioCheckProps['id']>;\n  /** The label for the filter option. */\n  label: RadioCheckProps['label'];\n  /** Determines if the filter option is active or not. */\n  checked: RadioCheckProps['checked'];\n  /** The name for the filter item that will show in the selected filters section */\n  name: NonNullable<RadioCheckProps['name']>;\n}\n\nexport interface SelectFilterProps extends BaseFilterProps {\n  /** Internal prop designating this object as a select filter. */\n  type: 'select';\n  /** The set of options for the filter. */\n  items: SelectFilterItemProps[];\n  /**\n   * Determines if the filter will render as a RadioButtonGroup or CheckboxGroup.\n   * @default \"multi-select\"\n   */\n  selectType?: 'single-select' | 'multi-select';\n}\n\nexport interface ActiveSelectFilter {\n  id: SelectFilterItemProps['id'];\n  name: SelectFilterItemProps['name'];\n  resetValue: SelectFilterItemProps & { checked: false };\n  groupName: SelectFilterProps['name'];\n  type: SelectFilterProps['type'];\n}\n\nexport interface TextFilterProps extends BaseFilterProps {\n  /** Internal prop designating this object as a text filter. */\n  type: 'text';\n  /** The value of the filter. */\n  value?: string;\n  /**\n   * Placeholder text. The default value is a locale translation of 'Search…'\n   * @default \"Search…\"\n   */\n  placeholder?: string;\n}\n\n// For use later: export type FilterProps = TextFilterProps | SelectFilterProps;\nexport type FilterProps = SelectFilterProps;\n\nexport type ActiveFilters = ActiveSelectFilter;\n\nexport interface SearchResultProps {\n  /** The id of the search result to be displayed. */\n  id: string;\n  /** The title of the search result. */\n  title: string;\n  /** LinkProps to be passed to . */\n  link: OmitStrict<LinkProps, 'children' | 'variant' | 'icon'>;\n  /** A description for the search result. */\n  description?: string;\n  /** A list of elements to be rendered within a MetaList categorizing the result. */\n  meta?: MetaListProps['items'];\n  /** Accents the search results with text that matches the regex */\n  accent?: RegExp;\n}\n\ninterface BaseFilterEvent {\n  name: string;\n}\ninterface SelectFilterEvent extends BaseFilterEvent {\n  type: 'select';\n  value: SelectFilterItemProps;\n}\n\n// For use later: export type FilterEvent = SelectFilterEvent | TextFilterEvent;\nexport type FilterEvent = SelectFilterEvent;\n\nexport interface SearchResultsProps extends NoChildrenProp {\n  /** A set of results to render for a given search. */\n  results: SearchResultProps[];\n  /** Props related to the SearchInput. */\n  searchInputProps: SearchInputProps;\n  /** The number of total results related to a given search. */\n  count: number;\n  /** A set of filters and their current states for a given search. */\n  filters: FilterProps[];\n  /** Callback that is fired when the value of a filter changes. */\n  onFilterChange?: (filter: FilterEvent) => void;\n  /** Callback that is fired when the Clear all button is clicked. */\n  onClearAllFilters?: () => void;\n  /** Callback that is fired when the Clear button is clicked within a filter. */\n  onClearFilter?: (name: BaseFilterProps['name']) => void;\n  /** Callback that will render a Show more button at the bottom of the results and is fired when that button is clicked. */\n  onShowMore?: () => void;\n  /** Sets a loading indicator if true */\n  loading?: boolean;\n  /** A ref for the wrapping element. */\n  ref?: Ref<HTMLDivElement>;\n}\n"]}
+{"version":3,"file":"SearchResults.types.js","sourceRoot":"","sources":["../../../src/components/SearchResults/SearchResults.types.ts"],"names":[],"mappings":"","sourcesContent":["import { Ref } from 'react';\n\nimport {\n  LinkProps,\n  MetaListProps,\n  NoChildrenProp,\n  OmitStrict,\n  RadioCheckProps,\n  SearchInputProps\n} from '@pega/cosmos-react-core';\n\ninterface BaseFilterProps {\n  /** The name of the filter. */\n  name: string;\n  /**\n   * Determines if the filter will start in an expanded state.\n   * @default true\n   */\n  expanded?: boolean;\n}\n\nexport interface SelectFilterItemProps {\n  /** The id for the filter option. */\n  id: NonNullable<RadioCheckProps['id']>;\n  /** The label for the filter option. */\n  label: RadioCheckProps['label'];\n  /** Determines if the filter option is active or not. */\n  checked: RadioCheckProps['checked'];\n  /** The name for the filter item that will show in the selected filters section */\n  name: NonNullable<RadioCheckProps['name']>;\n}\n\nexport interface SelectFilterProps extends BaseFilterProps {\n  /** Internal prop designating this object as a select filter. */\n  type: 'select';\n  /** The set of options for the filter. */\n  items: SelectFilterItemProps[];\n  /**\n   * Determines if the filter will render as a RadioButtonGroup or CheckboxGroup.\n   * @default 'multi-select'\n   */\n  selectType?: 'single-select' | 'multi-select';\n}\n\nexport interface ActiveSelectFilter {\n  id: SelectFilterItemProps['id'];\n  name: SelectFilterItemProps['name'];\n  resetValue: SelectFilterItemProps & { checked: false };\n  groupName: SelectFilterProps['name'];\n  type: SelectFilterProps['type'];\n}\n\nexport interface TextFilterProps extends BaseFilterProps {\n  /** Internal prop designating this object as a text filter. */\n  type: 'text';\n  /** The value of the filter. */\n  value?: string;\n  /**\n   * Placeholder text. The default value is a locale translation of 'Search…'\n   * @default 'Search…'\n   */\n  placeholder?: string;\n}\n\n// For use later: export type FilterProps = TextFilterProps | SelectFilterProps;\nexport type FilterProps = SelectFilterProps;\n\nexport type ActiveFilters = ActiveSelectFilter;\n\nexport interface SearchResultProps {\n  /** The id of the search result to be displayed. */\n  id: string;\n  /** The title of the search result. */\n  title: string;\n  /** LinkProps to be passed to . */\n  link: OmitStrict<LinkProps, 'children' | 'variant' | 'icon'>;\n  /** A description for the search result. */\n  description?: string;\n  /** A list of elements to be rendered within a MetaList categorizing the result. */\n  meta?: MetaListProps['items'];\n  /** Accents the search results with text that matches the regex */\n  accent?: RegExp;\n}\n\ninterface BaseFilterEvent {\n  name: string;\n}\ninterface SelectFilterEvent extends BaseFilterEvent {\n  type: 'select';\n  value: SelectFilterItemProps;\n}\n\n// For use later: export type FilterEvent = SelectFilterEvent | TextFilterEvent;\nexport type FilterEvent = SelectFilterEvent;\n\nexport interface SearchResultsProps extends NoChildrenProp {\n  /** A set of results to render for a given search. */\n  results: SearchResultProps[];\n  /** Props related to the SearchInput. */\n  searchInputProps: SearchInputProps;\n  /** The number of total results related to a given search. */\n  count: number;\n  /** A set of filters and their current states for a given search. */\n  filters: FilterProps[];\n  /** Callback that is fired when the value of a filter changes. */\n  onFilterChange?: (filter: FilterEvent) => void;\n  /** Callback that is fired when the Clear all button is clicked. */\n  onClearAllFilters?: () => void;\n  /** Callback that is fired when the Clear button is clicked within a filter. */\n  onClearFilter?: (name: BaseFilterProps['name']) => void;\n  /** Callback that will render a Show more button at the bottom of the results and is fired when that button is clicked. */\n  onShowMore?: () => void;\n  /** Sets a loading indicator if true */\n  loading?: boolean;\n  /** A ref for the wrapping element. */\n  ref?: Ref<HTMLDivElement>;\n}\n"]}

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

@@ -26,9 +26,7 @@ export interface StakeholdersProps extends NoChildrenProp, Pick<SummaryListProps
         loading?: boolean;
         /** An array of available roles a stakeholder may be assigned. */
         roles?: Role[];
-        /**
-         * Use this when onAdd or onEdit is invoked to indicate to the component which role option to select.
-         */
+        /** Use this when onAdd or onEdit is invoked to indicate to the component which role option to select. */
         currentRole?: Role;
         /**
          * A component to render the main portion of the add/edit stakeholder form.
@@ -37,9 +35,7 @@ export interface StakeholdersProps extends NoChildrenProp, Pick<SummaryListProps
         renderer: ComponentType<{
             selectedRoleName?: Role['name'];
         }>;
-        /**
-         * A props object that will be passed to the form renderer.
-         */
+        /** A props object that will be passed to the form renderer. */
         rendererProps?: {
             [key: string]: unknown;
         };
@@ -60,9 +56,7 @@ export interface StakeholdersProps extends NoChildrenProp, Pick<SummaryListProps
         onDismiss: ({ closeForm }: {
             closeForm: () => void;
         }) => void;
-        /**
-         * Called after the modal or popover transitions and un-mounts as a result of a closeForm call or user dismissal.
-         */
+        /** Called after the modal or popover transitions and un-mounts as a result of a closeForm call or user dismissal. */
         onAfterClose?: () => void;
     };
     /** Called when a user opens the view all modal. */
@@ -74,9 +68,7 @@ export interface StakeholdersProps extends NoChildrenProp, Pick<SummaryListProps
         items: StakeholdersProps['items'];
         /** Called when a user enters a view all search. Return a filtered array to viewAll['items'] with matching stakeholders. */
         onSearch?: (value: string) => void;
-        /**
-         * Called after the modal or popover transitions and un-mounts as a result of a closeForm call or user dismissal.
-         */
+        /** Called after the modal or popover transitions and un-mounts as a result of a closeForm call or user dismissal. */
         onAfterClose?: () => void;
     };
 }

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

@@ -1 +1 @@
-{"version":3,"file":"Stakeholders.types.d.ts","sourceRoot":"","sources":["../../../src/components/Stakeholders/Stakeholders.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C,OAAO,KAAK,EACV,gBAAgB,EAChB,YAAY,EACZ,cAAc,EACd,eAAe,EAChB,MAAM,yBAAyB,CAAC;AAEjC,MAAM,MAAM,IAAI,GAAG;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,sHAAsH;AACtH,MAAM,WAAW,WAAY,SAAQ,eAAe,EAAE,YAAY;IAChE,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,MAAM,WAAW,iBACf,SAAQ,cAAc,EACpB,IAAI,CAAC,gBAAgB,EAAE,OAAO,GAAG,SAAS,GAAG,OAAO,GAAG,KAAK,CAAC;IAC/D;;;OAGG;IACH,KAAK,EAAE,WAAW,EAAE,CAAC;IACrB,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB;;;OAGG;IACH,IAAI,EAAE;QACJ,gGAAgG;QAChG,OAAO,CAAC,EAAE,OAAO,CAAC;QAClB,iEAAiE;QACjE,KAAK,CAAC,EAAE,IAAI,EAAE,CAAC;QACf;;WAEG;QACH,WAAW,CAAC,EAAE,IAAI,CAAC;QACnB;;;WAGG;QACH,QAAQ,EAAE,aAAa,CAAC;YAAE,gBAAgB,CAAC,EAAE,IAAI,CAAC,MAAM,CAAC,CAAA;SAAE,CAAC,CAAC;QAC7D;;WAEG;QACH,aAAa,CAAC,EAAE;YACd,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;SACxB,CAAC;QACF;;;;;WAKG;QACH,QAAQ,EAAE,CAAC,EACT,gBAAgB,EAChB,SAAS,EACV,EAAE;YACD,gBAAgB,EAAE,IAAI,CAAC,MAAM,CAAC,GAAG,SAAS,CAAC;YAC3C,SAAS,EAAE,MAAM,IAAI,CAAC;SACvB,KAAK,IAAI,CAAC;QACX;;;WAGG;QACH,SAAS,EAAE,CAAC,EAAE,SAAS,EAAE,EAAE;YAAE,SAAS,EAAE,MAAM,IAAI,CAAA;SAAE,KAAK,IAAI,CAAC;QAC9D;;WAEG;QACH,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;KAC3B,CAAC;IACF,mDAAmD;IACnD,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,OAAO,EAAE;QACP,+EAA+E;QAC/E,OAAO,CAAC,EAAE,OAAO,CAAC;QAClB,uFAAuF;QACvF,KAAK,EAAE,iBAAiB,CAAC,OAAO,CAAC,CAAC;QAClC,2HAA2H;QAC3H,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;QACnC;;WAEG;QACH,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;KAC3B,CAAC;CACH"}
+{"version":3,"file":"Stakeholders.types.d.ts","sourceRoot":"","sources":["../../../src/components/Stakeholders/Stakeholders.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C,OAAO,KAAK,EACV,gBAAgB,EAChB,YAAY,EACZ,cAAc,EACd,eAAe,EAChB,MAAM,yBAAyB,CAAC;AAEjC,MAAM,MAAM,IAAI,GAAG;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,sHAAsH;AACtH,MAAM,WAAW,WAAY,SAAQ,eAAe,EAAE,YAAY;IAChE,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,MAAM,WAAW,iBACf,SAAQ,cAAc,EACpB,IAAI,CAAC,gBAAgB,EAAE,OAAO,GAAG,SAAS,GAAG,OAAO,GAAG,KAAK,CAAC;IAC/D;;;OAGG;IACH,KAAK,EAAE,WAAW,EAAE,CAAC;IACrB,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB;;;OAGG;IACH,IAAI,EAAE;QACJ,gGAAgG;QAChG,OAAO,CAAC,EAAE,OAAO,CAAC;QAClB,iEAAiE;QACjE,KAAK,CAAC,EAAE,IAAI,EAAE,CAAC;QACf,yGAAyG;QACzG,WAAW,CAAC,EAAE,IAAI,CAAC;QACnB;;;WAGG;QACH,QAAQ,EAAE,aAAa,CAAC;YAAE,gBAAgB,CAAC,EAAE,IAAI,CAAC,MAAM,CAAC,CAAA;SAAE,CAAC,CAAC;QAC7D,+DAA+D;QAC/D,aAAa,CAAC,EAAE;YACd,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;SACxB,CAAC;QACF;;;;;WAKG;QACH,QAAQ,EAAE,CAAC,EACT,gBAAgB,EAChB,SAAS,EACV,EAAE;YACD,gBAAgB,EAAE,IAAI,CAAC,MAAM,CAAC,GAAG,SAAS,CAAC;YAC3C,SAAS,EAAE,MAAM,IAAI,CAAC;SACvB,KAAK,IAAI,CAAC;QACX;;;WAGG;QACH,SAAS,EAAE,CAAC,EAAE,SAAS,EAAE,EAAE;YAAE,SAAS,EAAE,MAAM,IAAI,CAAA;SAAE,KAAK,IAAI,CAAC;QAC9D,qHAAqH;QACrH,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;KAC3B,CAAC;IACF,mDAAmD;IACnD,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,OAAO,EAAE;QACP,+EAA+E;QAC/E,OAAO,CAAC,EAAE,OAAO,CAAC;QAClB,uFAAuF;QACvF,KAAK,EAAE,iBAAiB,CAAC,OAAO,CAAC,CAAC;QAClC,2HAA2H;QAC3H,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;QACnC,qHAAqH;QACrH,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;KAC3B,CAAC;CACH"}