@pega/cosmos-react-work 5.0.0-dev.4.6 → 5.0.0-dev.4.8

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

@@ -1,7 +0,0 @@
-import { Ref } from 'react';
-declare const useTrackWrappedRegions: (regionElArray: (HTMLElement | null)[], disabled?: boolean) => {
-    containerRef: Ref<HTMLElement | null>;
-    regionWrappedStates: boolean[];
-};
-export default useTrackWrappedRegions;
-//# sourceMappingURL=useTrackWrappedRegions.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"useTrackWrappedRegions.d.ts","sourceRoot":"","sources":["../../../src/components/ConfigurableLayout/useTrackWrappedRegions.ts"],"names":[],"mappings":"AAAA,OAAO,EAA+B,GAAG,EAAE,MAAM,OAAO,CAAC;AAIzD,QAAA,MAAM,sBAAsB,kBACX,CAAC,WAAW,GAAG,IAAI,CAAC,EAAE,aAC1B,OAAO;kBACD,IAAI,WAAW,GAAG,IAAI,CAAC;yBAAuB,OAAO,EAAE;CA2CzE,CAAC;AAEF,eAAe,sBAAsB,CAAC"}

package/lib/components/ConfigurableLayout/useTrackWrappedRegions.js

@@ -1,37 +0,0 @@
-import { useRef, useEffect, useState } from 'react';
-import { debounce } from '@pega/cosmos-react-core';
-const useTrackWrappedRegions = (regionElArray, disabled) => {
-    const containerRef = useRef(null);
-    const [regionWrappedStates, setRegionWrappedStates] = useState(new Array(regionElArray.length).fill(false));
-    useEffect(() => {
-        if (disabled)
-            return;
-        let isMounted = true;
-        const observer = new ResizeObserver(debounce(entries => {
-            if (isMounted) {
-                const containerWidth = entries[0].contentRect.width;
-                const newWrappedStates = [...regionWrappedStates];
-                regionElArray.forEach((regionEl, index) => {
-                    const regionWidth = regionEl?.getBoundingClientRect().width;
-                    if (regionWidth !== undefined && regionWidth >= containerWidth) {
-                        newWrappedStates[index] = true;
-                    }
-                    else {
-                        newWrappedStates[index] = false;
-                    }
-                });
-                setRegionWrappedStates(newWrappedStates);
-            }
-        }, 100));
-        if (containerRef.current && regionElArray.length) {
-            observer.observe(containerRef.current);
-        }
-        return () => {
-            isMounted = false;
-            observer.disconnect();
-        };
-    }, [containerRef, regionElArray]);
-    return { containerRef, regionWrappedStates };
-};
-export default useTrackWrappedRegions;
-//# sourceMappingURL=useTrackWrappedRegions.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"useTrackWrappedRegions.js","sourceRoot":"","sources":["../../../src/components/ConfigurableLayout/useTrackWrappedRegions.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAO,MAAM,OAAO,CAAC;AAEzD,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAEnD,MAAM,sBAAsB,GAAG,CAC7B,aAAqC,EACrC,QAAkB,EACyD,EAAE;IAC7E,MAAM,YAAY,GAAG,MAAM,CAAqB,IAAI,CAAC,CAAC;IACtD,MAAM,CAAC,mBAAmB,EAAE,sBAAsB,CAAC,GAAG,QAAQ,CAC5D,IAAI,KAAK,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAC5C,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,QAAQ;YAAE,OAAO;QAErB,IAAI,SAAS,GAAG,IAAI,CAAC;QAErB,MAAM,QAAQ,GAAG,IAAI,cAAc,CACjC,QAAQ,CAAC,OAAO,CAAC,EAAE;YACjB,IAAI,SAAS,EAAE;gBACb,MAAM,cAAc,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,KAAK,CAAC;gBACpD,MAAM,gBAAgB,GAAG,CAAC,GAAG,mBAAmB,CAAC,CAAC;gBAElD,aAAa,CAAC,OAAO,CAAC,CAAC,QAAQ,EAAE,KAAK,EAAE,EAAE;oBACxC,MAAM,WAAW,GAAG,QAAQ,EAAE,qBAAqB,EAAE,CAAC,KAAK,CAAC;oBAE5D,IAAI,WAAW,KAAK,SAAS,IAAI,WAAW,IAAI,cAAc,EAAE;wBAC9D,gBAAgB,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC;qBAChC;yBAAM;wBACL,gBAAgB,CAAC,KAAK,CAAC,GAAG,KAAK,CAAC;qBACjC;gBACH,CAAC,CAAC,CAAC;gBAEH,sBAAsB,CAAC,gBAAgB,CAAC,CAAC;aAC1C;QACH,CAAC,EAAE,GAAG,CAAC,CACR,CAAC;QAEF,IAAI,YAAY,CAAC,OAAO,IAAI,aAAa,CAAC,MAAM,EAAE;YAChD,QAAQ,CAAC,OAAO,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;SACxC;QAED,OAAO,GAAG,EAAE;YACV,SAAS,GAAG,KAAK,CAAC;YAClB,QAAQ,CAAC,UAAU,EAAE,CAAC;QACxB,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,YAAY,EAAE,aAAa,CAAC,CAAC,CAAC;IAElC,OAAO,EAAE,YAAY,EAAE,mBAAmB,EAAE,CAAC;AAC/C,CAAC,CAAC;AAEF,eAAe,sBAAsB,CAAC","sourcesContent":["import { useRef, useEffect, useState, Ref } from 'react';\n\nimport { debounce } from '@pega/cosmos-react-core';\n\nconst useTrackWrappedRegions = (\n  regionElArray: (HTMLElement | null)[],\n  disabled?: boolean\n): { containerRef: Ref<HTMLElement | null>; regionWrappedStates: boolean[] } => {\n  const containerRef = useRef<HTMLElement | null>(null);\n  const [regionWrappedStates, setRegionWrappedStates] = useState(\n    new Array(regionElArray.length).fill(false)\n  );\n\n  useEffect(() => {\n    if (disabled) return;\n\n    let isMounted = true;\n\n    const observer = new ResizeObserver(\n      debounce(entries => {\n        if (isMounted) {\n          const containerWidth = entries[0].contentRect.width;\n          const newWrappedStates = [...regionWrappedStates];\n\n          regionElArray.forEach((regionEl, index) => {\n            const regionWidth = regionEl?.getBoundingClientRect().width;\n\n            if (regionWidth !== undefined && regionWidth >= containerWidth) {\n              newWrappedStates[index] = true;\n            } else {\n              newWrappedStates[index] = false;\n            }\n          });\n\n          setRegionWrappedStates(newWrappedStates);\n        }\n      }, 100)\n    );\n\n    if (containerRef.current && regionElArray.length) {\n      observer.observe(containerRef.current);\n    }\n\n    return () => {\n      isMounted = false;\n      observer.disconnect();\n    };\n  }, [containerRef, regionElArray]);\n\n  return { containerRef, regionWrappedStates };\n};\n\nexport default useTrackWrappedRegions;\n"]}

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

@@ -1,19 +0,0 @@
-import { FunctionComponent, ReactNode, Ref } from 'react';
-import { ForwardProps, UnorderedListProps, NoChildrenProp } from '@pega/cosmos-react-core';
-export interface ConfirmationProps extends NoChildrenProp {
-    /** The title of the confirmation */
-    title?: string;
-    /** Region for a Field Value List component */
-    details?: ReactNode;
-    /** Array of React nodes to be put into a list */
-    whatsNext?: UnorderedListProps['items'];
-    /** Region for a Tasks component */
-    tasks?: ReactNode;
-    /** Called when the done/close button is clicked */
-    onClose?: () => void;
-    /** Ref for the wrapping element. */
-    ref?: Ref<HTMLElement>;
-}
-declare const Confirmation: FunctionComponent<ConfirmationProps & ForwardProps>;
-export default Confirmation;
-//# sourceMappingURL=Confirmation.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"Confirmation.d.ts","sourceRoot":"","sources":["../../../src/components/Confirmation/Confirmation.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAEjB,SAAS,EACT,GAAG,EAGJ,MAAM,OAAO,CAAC;AAGf,OAAO,EAGL,YAAY,EAOZ,kBAAkB,EAClB,cAAc,EAEf,MAAM,yBAAyB,CAAC;AAUjC,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;AAUD,QAAA,MAAM,YAAY,EAAE,iBAAiB,CAAC,iBAAiB,GAAG,YAAY,CAiDrE,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/lib/components/Confirmation/Confirmation.js

@@ -1,29 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useContext, useMemo } from 'react';
-import styled, { css } from 'styled-components';
-import { Card, CardContent, Flex, Text, useI18n, UnorderedList, Button, defaultThemeProp, VisuallyHiddenText } from '@pega/cosmos-react-core';
-import { StyledDetails, StyledFieldValueGroupLabel, DetailsContext } from '../Details';
-const StyledWhatsNextList = styled(UnorderedList) `
-  padding-inline-start: 0;
-`;
-StyledWhatsNextList.defaultProps = defaultThemeProp;
-const StyledConfirmationDetails = styled.div(() => {
-    return css `
-    > ${StyledDetails} > ${StyledFieldValueGroupLabel}:first-child {
-      margin-block-start: 0;
-    }
-  `;
-});
-const Confirmation = forwardRef(function Confirmation({ title, details, whatsNext, tasks, onClose, ...restProps }, ref) {
-    const t = useI18n();
-    const detailsContext = useContext(DetailsContext);
-    const detailsCtxValue = useMemo(() => {
-        return {
-            ...detailsContext,
-            depth: 4
-        };
-    }, [detailsContext]);
-    return (_jsx(Card, { ...restProps, ref: ref, children: _jsx(CardContent, { children: _jsxs(Flex, { container: { gap: 3, direction: 'column' }, children: [title && _jsx(Text, { variant: 'h3', children: title }), details && (_jsx(DetailsContext.Provider, { value: detailsCtxValue, children: _jsx(StyledConfirmationDetails, { children: details }) })), whatsNext && (_jsxs(Flex, { container: { gap: 1, direction: 'column' }, children: [_jsx(Text, { variant: 'h4', children: t('confirmation_whats_next') }), _jsx(StyledWhatsNextList, { items: whatsNext, as: StyledWhatsNextList })] })), tasks, onClose && (_jsx(Flex, { container: { justify: 'end' }, children: _jsxs(Button, { onClick: onClose, variant: 'primary', children: [t('done'), title ? _jsx(VisuallyHiddenText, { children: `- ${title}` }) : null] }) }))] }) }) }));
-});
-export default Confirmation;
-//# sourceMappingURL=Confirmation.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"Confirmation.js","sourceRoot":"","sources":["../../../src/components/Confirmation/Confirmation.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,UAAU,EAKV,UAAU,EACV,OAAO,EACR,MAAM,OAAO,CAAC;AACf,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,IAAI,EACJ,WAAW,EAEX,IAAI,EACJ,IAAI,EACJ,OAAO,EACP,aAAa,EACb,MAAM,EACN,gBAAgB,EAGhB,kBAAkB,EACnB,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAE,aAAa,EAAE,0BAA0B,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAEvF,MAAM,mBAAmB,GAAG,MAAM,CAAC,aAAa,CAAC,CAAA;;CAEhD,CAAC;AAEF,mBAAmB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAiBpD,MAAM,yBAAyB,GAAG,MAAM,CAAC,GAAG,CAAC,GAAG,EAAE;IAChD,OAAO,GAAG,CAAA;QACJ,aAAa,MAAM,0BAA0B;;;GAGlD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,YAAY,GAAwD,UAAU,CAClF,SAAS,YAAY,CACnB,EAAE,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,SAAS,EAAsC,EAC/F,GAAG;IAEH,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,cAAc,GAAG,UAAU,CAAC,cAAc,CAAC,CAAC;IAElD,MAAM,eAAe,GAAG,OAAO,CAAC,GAAG,EAAE;QACnC,OAAO;YACL,GAAG,cAAc;YACjB,KAAK,EAAE,CAAC;SACT,CAAC;IACJ,CAAC,EAAE,CAAC,cAAc,CAAC,CAAC,CAAC;IAErB,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,EAE1C,OAAO,IAAI,CACV,KAAC,cAAc,CAAC,QAAQ,IAAC,KAAK,EAAE,eAAe,YAC7C,KAAC,yBAAyB,cAAE,OAAO,GAA6B,GACxC,CAC3B,EAEA,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,EAEA,KAAK,EAEL,OAAO,IAAI,CACV,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,YACjC,MAAC,MAAM,IAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAC,SAAS,aACxC,CAAC,CAAC,MAAM,CAAC,EACT,KAAK,CAAC,CAAC,CAAC,KAAC,kBAAkB,cAAE,KAAK,KAAK,EAAE,GAAsB,CAAC,CAAC,CAAC,IAAI,IAChE,GACJ,CACR,IACI,GACK,GACT,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import {\n  forwardRef,\n  FunctionComponent,\n  PropsWithoutRef,\n  ReactNode,\n  Ref,\n  useContext,\n  useMemo\n} from 'react';\nimport styled, { css } 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  VisuallyHiddenText\n} from '@pega/cosmos-react-core';\n\nimport { StyledDetails, StyledFieldValueGroupLabel, DetailsContext } from '../Details';\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 StyledConfirmationDetails = styled.div(() => {\n  return css`\n    > ${StyledDetails} > ${StyledFieldValueGroupLabel}:first-child {\n      margin-block-start: 0;\n    }\n  `;\n});\n\nconst Confirmation: FunctionComponent<ConfirmationProps & ForwardProps> = forwardRef(\n  function Confirmation(\n    { title, details, whatsNext, tasks, onClose, ...restProps }: PropsWithoutRef<ConfirmationProps>,\n    ref\n  ) {\n    const t = useI18n();\n    const detailsContext = useContext(DetailsContext);\n\n    const detailsCtxValue = useMemo(() => {\n      return {\n        ...detailsContext,\n        depth: 4\n      };\n    }, [detailsContext]);\n\n    return (\n      <Card {...restProps} ref={ref}>\n        <CardContent>\n          <Flex container={{ gap: 3, direction: 'column' }}>\n            {title && <Text variant='h3'>{title}</Text>}\n\n            {details && (\n              <DetailsContext.Provider value={detailsCtxValue}>\n                <StyledConfirmationDetails>{details}</StyledConfirmationDetails>\n              </DetailsContext.Provider>\n            )}\n\n            {whatsNext && (\n              <Flex container={{ gap: 1, direction: 'column' }}>\n                <Text variant='h4'>{t('confirmation_whats_next')}</Text>\n                <StyledWhatsNextList items={whatsNext} as={StyledWhatsNextList} />\n              </Flex>\n            )}\n\n            {tasks}\n\n            {onClose && (\n              <Flex container={{ justify: 'end' }}>\n                <Button onClick={onClose} variant='primary'>\n                  {t('done')}\n                  {title ? <VisuallyHiddenText>{`- ${title}`}</VisuallyHiddenText> : null}\n                </Button>\n              </Flex>\n            )}\n          </Flex>\n        </CardContent>\n      </Card>\n    );\n  }\n);\n\nexport default Confirmation;\n"]}

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

@@ -1,3 +0,0 @@
-export { default } from './Confirmation';
-export type { ConfirmationProps } from './Confirmation';
-//# sourceMappingURL=index.d.ts.map

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

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

package/lib/components/Confirmation/index.js

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

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

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

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

@@ -1,38 +0,0 @@
-import { FC, ReactNode, Ref } from 'react';
-import { ForwardProps, TestIdProp } from '@pega/cosmos-react-core';
-export interface DetailsProps extends TestIdProp {
-    highlightedData?: ReactNode[];
-    children?: ReactNode;
-    /** Text used as heading of list */
-    name?: string;
-    /** Copy placed in paragraph below the name */
-    description?: string;
-    /**
-     * Whether the items children can be collapsed (only applies if name is provided)
-     * @default false
-     */
-    collapsible?: boolean;
-    /**
-     * Number of columns in detail layout
-     * @default 1
-     */
-    columnCount?: 1 | 2 | 3;
-    /** Whether detail list is rendering within another detail list
-     * @default false
-     */
-    nested?: boolean;
-    /** Whether detail list is rendering multiple sub-lists in columns (passed as children)
-     * @default false
-     */
-    asFlex?: boolean;
-    /** Whether to apply `value-comparison` styles to list items
-     * @default false
-     */
-    valueComparison?: boolean;
-    ref?: Ref<HTMLDListElement>;
-}
-declare const _default: FC<DetailsProps & ForwardProps> & {
-    getTestIds: (testIdProp?: string | undefined) => import("@pega/cosmos-react-core").TestIdsRecord<readonly ["heading", "description", "highlighted-data", "data", "expand-collapse"]>;
-};
-export default _default;
-//# sourceMappingURL=Details.d.ts.map

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

@@ -1 +0,0 @@
-{"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,EASZ,UAAU,EAGX,MAAM,yBAAyB,CAAC;AAajC,MAAM,WAAW,YAAa,SAAQ,UAAU;IAC9C,eAAe,CAAC,EAAE,SAAS,EAAE,CAAC;IAC9B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,mCAAmC;IACnC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,8CAA8C;IAC9C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;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;;;;AAoMD,wBAAuD"}

package/lib/components/Details/Details.js

@@ -1,92 +0,0 @@
-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, useChToPxConversionFactor, useI18n, HTML, useTestIds, withTestIds } from '@pega/cosmos-react-core';
-import { getDetailsTestIds } from './Details.test-ids';
-import DetailsContext from './DetailsContext';
-import { StyledFieldValueGroupLabel, StyledDetails, StyledDetailList, StyledHighlightedDetailList, flexGapProp, StyledDetailDescription } from './Details.styles';
-const Details = forwardRef(function Details({ testId, highlightedData, children, name, description, columnCount = 1, nested = false, asFlex = false, valueComparison = false, collapsible = false }, ref) {
-    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', {
-        breakpointRef: listRef,
-        themeProp: 'content-width'
-    });
-    const isMdContentWidthOrAbove = useBreakpoint('md', {
-        breakpointRef: listRef,
-        themeProp: 'content-width'
-    });
-    const flexRow = useBreakpoint(columnCount > 2 ? 'lg' : 'md', {
-        breakpointRef: listRef,
-        themeProp: 'content-width'
-    });
-    const t = useI18n();
-    const testIds = useTestIds(testId, getDetailsTestIds);
-    const [flexContextMobileView, setFlexContextMobileView] = useState(false);
-    const [open, setOpen] = useState(true);
-    const labelLength = Math.max(14, Math.min(longestLabelLength ?? 16, 40));
-    const headingDepth = depth ?? 1;
-    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(smContentWidth, 10) * chToPxConversionFactor;
-            const oneRemInPx = parseInt(remToPx(1), 10);
-            const colGapPxAllowance = oneRemInPx * (0.5 * flexGapProp) * (columnCount - 1);
-            const mobileViewBreakpoint = minWidthPx * columnCount + colGapPxAllowance;
-            setFlexContextMobileView(elementWidth < mobileViewBreakpoint);
-        };
-        const resizeObserver = new ResizeObserver(entries => {
-            const containerPxWidth = entries[0].contentRect.width;
-            checkBreakpoint(containerPxWidth);
-        });
-        if (listRef.current) {
-            checkBreakpoint(listRef.current.offsetWidth);
-            resizeObserver.observe(listRef.current);
-        }
-        return () => {
-            resizeObserver.disconnect();
-        };
-    }, [listRef, columnCount]);
-    const contextValue = useMemo(() => {
-        return {
-            mobileView: applyMobileView,
-            depth: name ? headingDepth + 1 : headingDepth,
-            longestLabelLength,
-            ...context
-        };
-    }, [applyMobileView, name, headingDepth, longestLabelLength, context]);
-    const nameText = useMemo(() => {
-        return _jsx(Text, { variant: `h${Math.min(headingDepth, 6)}`, children: name });
-    }, [name, headingDepth]);
-    const details = useMemo(() => {
-        return (_jsxs(_Fragment, { children: [highlightedData && (_jsxs(_Fragment, { children: [_jsx(Flex, { "data-testid": testIds.highlightedData, as: StyledHighlightedDetailList, forwardedAs: nested ? 'div' : 'dl', container: { wrap: 'wrap', colGap: 10, rowGap: 1, alignItems: 'start' }, children: highlightedData.map((child, i) => (
-                            // eslint-disable-next-line react/no-array-index-key
-                            _jsx(Fragment, { children: child }, i))) }), _jsx("hr", {})] })), children ? (_jsx(StyledDetailList, { "data-testid": testIds.data, ref: listRef, as: nested ? 'div' : 'dl', columnCount: columnCount, labelLength: labelLength, stacked: applyMobileView, nested: nested, flex: asFlex, wrapped: asFlex ? !flexRow : false, variant: valueComparison ? 'value-comparison' : undefined, narrow: !isMdContentWidthOrAbove, children: children })) : null] }));
-    }, [
-        highlightedData,
-        nested,
-        columnCount,
-        labelLength,
-        applyMobileView,
-        name,
-        asFlex,
-        flexRow,
-        valueComparison,
-        children,
-        testIds
-    ]);
-    if (!name && !children && !highlightedData && !description)
-        return null;
-    return (_jsx(DetailsContext.Provider, { value: contextValue, children: _jsxs(StyledDetails, { "data-testid": testIds.root, children: [name && (_jsx(StyledFieldValueGroupLabel, { "data-testid": testIds.heading, children: collapsible ? (_jsx(Button, { type: 'button', variant: 'text', onClick: () => {
-                            setOpen(cur => !cur);
-                        }, "aria-expanded": open ? 'true' : 'false', "aria-label": t(open ? 'collapse_noun' : 'expand_noun', [name]), children: _jsxs(Flex, { container: { alignItems: 'center', gap: 0.5 }, as: 'span', children: [_jsx(Icon, { name: 'caret-right' }), nameText] }) })) : (nameText) })), description && (_jsx(StyledDetailDescription, { "data-testid": testIds.description, children: _jsx(HTML, { as: 'p', content: description }) })), collapsible ? (_jsx(ExpandCollapse, { "data-testid": testIds.expandCollapse, collapsed: !open, children: details })) : (details)] }) }));
-});
-export default withTestIds(Details, getDetailsTestIds);
-//# sourceMappingURL=Details.js.map

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

@@ -1 +0,0 @@
-{"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  HeadingTag,\n  HTML,\n  TestIdProp,\n  useTestIds,\n  withTestIds\n} from '@pega/cosmos-react-core';\n\nimport { getDetailsTestIds } from './Details.test-ids';\nimport DetailsContext from './DetailsContext';\nimport {\n  StyledFieldValueGroupLabel,\n  StyledDetails,\n  StyledDetailList,\n  StyledHighlightedDetailList,\n  flexGapProp,\n  StyledDetailDescription\n} from './Details.styles';\n\nexport interface DetailsProps extends TestIdProp {\n  highlightedData?: ReactNode[];\n  children?: ReactNode;\n  /** Text used as heading of list */\n  name?: string;\n  /** Copy placed in paragraph below the name */\n  description?: 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(function Details(\n  {\n    testId,\n    highlightedData,\n    children,\n    name,\n    description,\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  const testIds = useTestIds(testId, getDetailsTestIds);\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 <Text variant={`h${Math.min(headingDepth, 6)}` as HeadingTag}>{name}</Text>;\n  }, [name, headingDepth]);\n\n  const details = useMemo(() => {\n    return (\n      <>\n        {highlightedData && (\n          <>\n            <Flex\n              data-testid={testIds.highlightedData}\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            data-testid={testIds.data}\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    testIds\n  ]);\n\n  if (!name && !children && !highlightedData && !description) return null;\n\n  return (\n    <DetailsContext.Provider value={contextValue}>\n      <StyledDetails data-testid={testIds.root}>\n        {name && (\n          <StyledFieldValueGroupLabel data-testid={testIds.heading}>\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        {description && (\n          <StyledDetailDescription data-testid={testIds.description}>\n            <HTML as='p' content={description} />\n          </StyledDetailDescription>\n        )}\n\n        {collapsible ? (\n          <ExpandCollapse data-testid={testIds.expandCollapse} collapsed={!open}>\n            {details}\n          </ExpandCollapse>\n        ) : (\n          details\n        )}\n      </StyledDetails>\n    </DetailsContext.Provider>\n  );\n});\n\nexport default withTestIds(Details, getDetailsTestIds);\n"]}

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

@@ -1,50 +0,0 @@
-import { DefaultTheme } from 'styled-components';
-import { StyledFieldValueListProps } from '@pega/cosmos-react-core';
-interface StyledDetailListProps extends StyledFieldValueListProps {
-    /** Whether individual list items all have labels stacks on top */
-    stacked?: boolean;
-    /** Whether the list is a flex row of other lists */
-    flex?: boolean;
-    /** Whether the list is nested */
-    nested?: boolean;
-    /** The character length applied to all list labels */
-    labelLength?: number;
-    /**
-     * Whether the list is wrapped to 1 column
-     * @default false
-     */
-    wrapped?: boolean;
-    /**
-     * Number of columns in the list
-     * @default 1
-     */
-    columnCount?: 1 | 2 | 3;
-    /**
-     * Whether to apply narrow list styles
-     * @default false
-     */
-    narrow?: boolean;
-    theme: DefaultTheme;
-}
-export declare const colCountChWidth: {
-    '1': {
-        containerWidth: number;
-        colWidth: number;
-    };
-    '2': {
-        containerWidth: number;
-        colWidth: number;
-    };
-    '3': {
-        containerWidth: number;
-        colWidth: number;
-    };
-};
-export declare const flexGapProp = 5.5;
-export declare const StyledFieldValueGroupLabel: import("styled-components").StyledComponent<"div", DefaultTheme, {}, never>;
-export declare const StyledDetailDescription: import("styled-components").StyledComponent<"div", DefaultTheme, {}, never>;
-export declare const StyledHighlightedDetailList: import("styled-components").StyledComponent<"dl", DefaultTheme, {}, never>;
-export declare const StyledDetails: import("styled-components").StyledComponent<"div", DefaultTheme, {}, never>;
-export declare const StyledDetailList: import("styled-components").StyledComponent<"dl", DefaultTheme, StyledFieldValueListProps & Pick<StyledDetailListProps, "flex" | "theme" | "variant" | "narrow" | "stacked" | "nested" | "labelLength"> & Required<Pick<StyledDetailListProps, "columnCount" | "wrapped">>, never>;
-export {};
-//# sourceMappingURL=Details.styles.d.ts.map

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

@@ -1 +0,0 @@
-{"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,uBAAuB,6EAYlC,CAAC;AAIH,eAAO,MAAM,2BAA2B,4EAuBtC,CAAC;AAIH,eAAO,MAAM,aAAa,6EAAe,CAAC;AAE1C,eAAO,MAAM,gBAAgB,oRA+I5B,CAAC"}

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

@@ -1,204 +0,0 @@
-import styled, { css } from 'styled-components';
-import { calculateFontSize, defaultThemeProp, StyledFieldValue, StyledStackedFieldValue, StyledFieldValueList, StyledIcon, useDirection, StyledButton } from '@pega/cosmos-react-core';
-const verticalGapSpacingMultiplier = 1;
-// colWidth reduces by 20% as column count increases
-export const colCountChWidth = {
-    '1': {
-        containerWidth: 100,
-        colWidth: 100
-    },
-    '2': {
-        containerWidth: 80 * 2,
-        colWidth: 80
-    },
-    '3': {
-        containerWidth: 64 * 3,
-        colWidth: 64
-    }
-};
-export const flexGapProp = 5.5;
-export const StyledFieldValueGroupLabel = styled.div(({ theme }) => {
-    const { base: { spacing, animation } } = theme;
-    const { rtl } = useDirection();
-    return css `
-    width: 100%;
-    grid-column-start: 1;
-    grid-column-end: -1;
-    margin-block-end: calc(0.5 * ${spacing});
-    margin-block-start: calc(1.5 * ${spacing});
-
-    ${StyledButton} ${StyledIcon} {
-      transition: transform ${animation.speed} ${animation.timing.ease};
-    }
-
-    ${StyledButton}[aria-expanded='true'] ${StyledIcon} {
-      transform: rotate(90deg);
-    }
-
-    ${StyledButton}[aria-expanded='false'] ${StyledIcon} {
-      transform: rotate(${rtl ? 180 : 0}deg);
-    }
-  `;
-});
-StyledFieldValueGroupLabel.defaultProps = defaultThemeProp;
-export const StyledDetailDescription = styled.div(({ theme }) => {
-    const { base: { spacing, 'content-width': { xl } } } = theme;
-    return css `
-    max-width: ${xl};
-    margin-block: calc(1.5 * ${spacing});
-  `;
-});
-StyledDetailDescription.defaultProps = defaultThemeProp;
-export const StyledHighlightedDetailList = styled.dl(({ theme }) => {
-    const { base: { spacing, palette } } = theme;
-    const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);
-    return css `
-    max-width: ${colCountChWidth[3].containerWidth}ch;
-    padding-block-end: calc(1.5 * ${spacing});
-
-    dd {
-      font-size: ${fontSize[theme.components.text.h1['font-size']]};
-      font-weight: ${theme.components.text.h1['font-weight']};
-    }
-
-    + hr {
-      border-top: unset;
-      border-radius: unset;
-      border-style: unset;
-      border-bottom: 0.0625rem solid ${palette['border-line']};
-      margin-block-end: calc(1.5 * ${spacing});
-    }
-  `;
-});
-StyledHighlightedDetailList.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 */
-      ${!nested &&
-        css `
-        ${StyledFieldValue} {
-          word-break: break-word;
-          overflow: auto;
-        }
-
-        ${StyledStackedFieldValue} {
-          grid-column: 1 / -1;
-        }
-      `}
-
-      /* Nested List */
-      ${nested &&
-        css `
-        grid-column: 1 / -1;
-      `}
-
-      /* As Field Grid */
-      ${!flex &&
-        css `
-        display: grid;
-        grid-template-columns: minmax(14ch, ${labelLength}ch) minmax(14ch, 1fr);
-        column-gap: calc(2 * ${spacing});
-        row-gap: calc(${verticalGapSpacingMultiplier} * ${spacing});
-
-        ${stacked &&
-            css `
-          grid-template-columns: minmax(0, 1fr);
-          row-gap: 0;
-
-          ${!isValueComparison &&
-                css `
-            > dt,
-            ${StyledStackedFieldValue} {
-              margin-block-start: calc(${verticalGapSpacingMultiplier} * ${spacing});
-            }
-          `}
-        `}
-
-        > ${StyledStackedFieldValue} {
-          max-width: ${containerWidthCh}ch;
-        }
-
-        > ${StyledFieldValue} {
-          max-width: calc(${containerWidthMinusLabel} - calc(2 * ${spacing}));
-
-          ${!isValueComparison &&
-            css `
-            width: 100%;
-          `}
-        }
-
-        ${isValueComparison &&
-            css `
-          grid-template-columns: auto auto;
-          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 */
-      ${flex &&
-        css `
-        display: flex;
-        flex-direction: ${wrapped ? 'column' : 'row'};
-        column-gap: calc(${flexGapProp} * ${spacing});
-        align-items: flex-start;
-        max-width: ${containerWidthCh}ch;
-
-        ${!wrapped &&
-            css `
-          > * {
-            width: 100%;
-            max-width: ${columnWidthCh}%;
-          }
-        `}
-
-        > ${StyledDetails} {
-          width: 100%;
-
-          ${wrapped &&
-            !stacked &&
-            css `
-            + ${StyledDetails} > ${StyledDetailList}:first-child {
-              margin-block-start: ${theme.base.spacing};
-            }
-          `}
-        }
-      `}
-
-      /* Key / Group Label Spacing */
-      ${stacked &&
-        !isValueComparison &&
-        css `
-        > dt {
-          margin-block-start: calc(${verticalGapSpacingMultiplier} * ${spacing});
-        }
-      `}
-
-      /* Responsive behavior */
-      ${narrow &&
-        !stacked &&
-        !isValueComparison &&
-        css `
-        grid-template-columns: minmax(14ch, ${labelLength}ch) minmax(50%, 1fr);
-      `}
-    `;
-});
-StyledDetailList.defaultProps = defaultThemeProp;
-//# sourceMappingURL=Details.styles.js.map

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

@@ -1 +0,0 @@
-{"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 StyledDetailDescription = styled.div(({ theme }) => {\n  const {\n    base: {\n      spacing,\n      'content-width': { xl }\n    }\n  } = theme;\n\n  return css`\n    max-width: ${xl};\n    margin-block: calc(1.5 * ${spacing});\n  `;\n});\n\nStyledDetailDescription.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          ${!isValueComparison &&\n          css`\n            > dt,\n            ${StyledStackedFieldValue} {\n              margin-block-start: calc(${verticalGapSpacingMultiplier} * ${spacing});\n            }\n          `}\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          ${wrapped &&\n          !stacked &&\n          css`\n            + ${StyledDetails} > ${StyledDetailList}:first-child {\n              margin-block-start: ${theme.base.spacing};\n            }\n          `}\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/Details/Details.test-ids.d.ts

@@ -1,2 +0,0 @@
-export declare const getDetailsTestIds: (testIdProp?: string | undefined) => import("@pega/cosmos-react-core").TestIdsRecord<readonly ["heading", "description", "highlighted-data", "data", "expand-collapse"]>;
-//# sourceMappingURL=Details.test-ids.d.ts.map

package/lib/components/Details/Details.test-ids.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Details.test-ids.d.ts","sourceRoot":"","sources":["../../../src/components/Details/Details.test-ids.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,iBAAiB,0KAMnB,CAAC"}

package/lib/components/Details/Details.test-ids.js

@@ -1,9 +0,0 @@
-import { createTestIds } from '@pega/cosmos-react-core';
-export const getDetailsTestIds = createTestIds('details', [
-    'heading',
-    'description',
-    'highlighted-data',
-    'data',
-    'expand-collapse'
-]);
-//# sourceMappingURL=Details.test-ids.js.map

package/lib/components/Details/Details.test-ids.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Details.test-ids.js","sourceRoot":"","sources":["../../../src/components/Details/Details.test-ids.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAExD,MAAM,CAAC,MAAM,iBAAiB,GAAG,aAAa,CAAC,SAAS,EAAE;IACxD,SAAS;IACT,aAAa;IACb,kBAAkB;IAClB,MAAM;IACN,iBAAiB;CACT,CAAC,CAAC","sourcesContent":["import { createTestIds } from '@pega/cosmos-react-core';\n\nexport const getDetailsTestIds = createTestIds('details', [\n  'heading',\n  'description',\n  'highlighted-data',\n  'data',\n  'expand-collapse'\n] as const);\n"]}

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

@@ -1,9 +0,0 @@
-export interface DetailsContextValue {
-    longestLabelLength?: number;
-    setLongestLabelLength?: (val: number) => void;
-    mobileView?: boolean;
-    depth?: number;
-}
-declare const DetailsContext: import("react").Context<DetailsContextValue>;
-export default DetailsContext;
-//# sourceMappingURL=DetailsContext.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"DetailsContext.d.ts","sourceRoot":"","sources":["../../../src/components/Details/DetailsContext.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,mBAAmB;IAClC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,qBAAqB,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,QAAA,MAAM,cAAc,8CAKlB,CAAC;AAEH,eAAe,cAAc,CAAC"}