@pega/cosmos-react-demos 6.5.3 → 6.6.1

package/jsx/work/Confirmation/Confirmation.stories.d.ts

@@ -1,13 +0,0 @@
-import type { StoryFn } from '@storybook/react';
-import type { ConfirmationProps } from '@pega/cosmos-react-work';
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
-export default _default;
-interface ConfirmationStoryProps {
-    title: ConfirmationProps['title'];
-    showDetails?: boolean;
-    detailsName?: string;
-    showWhatsNext?: boolean;
-    showTasks?: boolean;
-}
-export declare const ConfirmationDemo: StoryFn<ConfirmationStoryProps>;
-//# sourceMappingURL=Confirmation.stories.d.ts.map

package/jsx/work/Confirmation/Confirmation.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Confirmation.stories.d.ts","sourceRoot":"","sources":["../../../src/work/Confirmation/Confirmation.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAItD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;;AAOjE,wBAGU;AAEV,UAAU,sBAAsB;IAC9B,KAAK,EAAE,iBAAiB,CAAC,OAAO,CAAC,CAAC;IAClC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,gBAAgB,EAAE,OAAO,CAAC,sBAAsB,CAwC5D,CAAC"}

package/jsx/work/Confirmation/Confirmation.stories.jsx

@@ -1,39 +0,0 @@
-import { useState } from 'react';
-import { Button, FieldValueItem, Flex } from '@pega/cosmos-react-core';
-import { Confirmation, Details } from '@pega/cosmos-react-work';
-import { mockData } from '../../core/FieldValueList/FieldValueList.mocks';
-import { TasksDemo } from '../Tasks/Tasks.stories';
-import { StyledFlex } from './Confirmation.styles';
-export default {
-    title: 'Work/Confirmation',
-    component: Confirmation
-};
-export const ConfirmationDemo = (args) => {
-    const [showConfirmation, setShowConfirmation] = useState(true);
-    const details = (<Details name={args.detailsName}>
-      {mockData.map(({ name, value }) => {
-            return <FieldValueItem name={name} value={value}/>;
-        })}
-    </Details>);
-    return (<Flex as={StyledFlex} container={{ justify: 'center', alignItems: 'center' }}>
-      {showConfirmation && (<Confirmation title={args.title} details={args.showDetails ? details : undefined} whatsNext={args.showWhatsNext
-                ? ['Send references', 'Collect information on the case', 'Prepare a demonstration']
-                : undefined} tasks={args.showTasks ? (<TasksDemo showVisual={false} showViewSelector={false} count={3} openableTasks={false}/>) : undefined} onClose={() => setShowConfirmation(false)}/>)}
-      {!showConfirmation && (<Button onClick={() => setShowConfirmation(true)}>Show confirmation</Button>)}
-    </Flex>);
-};
-ConfirmationDemo.args = {
-    title: 'US-1337 confirmation',
-    showDetails: true,
-    detailsName: 'Case summary',
-    showWhatsNext: true,
-    showTasks: true
-};
-ConfirmationDemo.argTypes = {
-    title: { control: { type: 'text' } },
-    showDetails: { control: { type: 'boolean' } },
-    detailsName: { control: { type: 'text' } },
-    showWhatsNext: { control: { type: 'boolean' } },
-    showTasks: { control: { type: 'boolean' } }
-};
-//# sourceMappingURL=Confirmation.stories.jsx.map

package/jsx/work/Confirmation/Confirmation.stories.jsx.map

@@ -1 +0,0 @@
-{"version":3,"file":"Confirmation.stories.jsx","sourceRoot":"","sources":["../../../src/work/Confirmation/Confirmation.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState } from 'react';\nimport type { Meta, StoryFn } from '@storybook/react';\n\nimport { Button, FieldValueItem, Flex } from '@pega/cosmos-react-core';\nimport { Confirmation, Details } from '@pega/cosmos-react-work';\nimport type { ConfirmationProps } from '@pega/cosmos-react-work';\n\nimport { mockData } from '../../core/FieldValueList/FieldValueList.mocks';\nimport { TasksDemo } from '../Tasks/Tasks.stories';\n\nimport { StyledFlex } from './Confirmation.styles';\n\nexport default {\n  title: 'Work/Confirmation',\n  component: Confirmation\n} as Meta;\n\ninterface ConfirmationStoryProps {\n  title: ConfirmationProps['title'];\n  showDetails?: boolean;\n  detailsName?: string;\n  showWhatsNext?: boolean;\n  showTasks?: boolean;\n}\n\nexport const ConfirmationDemo: StoryFn<ConfirmationStoryProps> = (args: ConfirmationStoryProps) => {\n  const [showConfirmation, setShowConfirmation] = useState(true);\n\n  const details = (\n    <Details name={args.detailsName}>\n      {mockData.map(({ name, value }) => {\n        return <FieldValueItem name={name} value={value} />;\n      })}\n    </Details>\n  );\n\n  return (\n    <Flex as={StyledFlex} container={{ justify: 'center', alignItems: 'center' }}>\n      {showConfirmation && (\n        <Confirmation\n          title={args.title}\n          details={args.showDetails ? details : undefined}\n          whatsNext={\n            args.showWhatsNext\n              ? ['Send references', 'Collect information on the case', 'Prepare a demonstration']\n              : undefined\n          }\n          tasks={\n            args.showTasks ? (\n              <TasksDemo\n                showVisual={false}\n                showViewSelector={false}\n                count={3}\n                openableTasks={false}\n              />\n            ) : undefined\n          }\n          onClose={() => setShowConfirmation(false)}\n        />\n      )}\n      {!showConfirmation && (\n        <Button onClick={() => setShowConfirmation(true)}>Show confirmation</Button>\n      )}\n    </Flex>\n  );\n};\n\nConfirmationDemo.args = {\n  title: 'US-1337 confirmation',\n  showDetails: true,\n  detailsName: 'Case summary',\n  showWhatsNext: true,\n  showTasks: true\n};\n\nConfirmationDemo.argTypes = {\n  title: { control: { type: 'text' } },\n  showDetails: { control: { type: 'boolean' } },\n  detailsName: { control: { type: 'text' } },\n  showWhatsNext: { control: { type: 'boolean' } },\n  showTasks: { control: { type: 'boolean' } }\n};\n"]}

package/jsx/work/Confirmation/Confirmation.styles.d.ts

@@ -1,2 +0,0 @@
-export declare const StyledFlex: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-//# sourceMappingURL=Confirmation.styles.d.ts.map

package/jsx/work/Confirmation/Confirmation.styles.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Confirmation.styles.d.ts","sourceRoot":"","sources":["../../../src/work/Confirmation/Confirmation.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,UAAU,yGAItB,CAAC"}

package/jsx/work/Confirmation/Confirmation.styles.js

@@ -1,7 +0,0 @@
-import styled from 'styled-components';
-export const StyledFlex = styled.div `
-  article {
-    width: 100%;
-  }
-`;
-//# sourceMappingURL=Confirmation.styles.js.map

package/jsx/work/Confirmation/Confirmation.styles.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Confirmation.styles.js","sourceRoot":"","sources":["../../../src/work/Confirmation/Confirmation.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAA;;;;CAInC,CAAC","sourcesContent":["import styled from 'styled-components';\n\nexport const StyledFlex = styled.div`\n  article {\n    width: 100%;\n  }\n`;\n"]}

package/jsx/work/Details/Details.stories.d.ts

@@ -1,10 +0,0 @@
-import type { StoryFn } from '@storybook/react';
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
-export default _default;
-interface DetailsDemoProps {
-    description?: string;
-    collapsible?: boolean;
-    showAdditionalInfo?: boolean;
-}
-export declare const DetailsDemo: StoryFn<DetailsDemoProps>;
-//# sourceMappingURL=Details.stories.d.ts.map

package/jsx/work/Details/Details.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Details.stories.d.ts","sourceRoot":"","sources":["../../../src/work/Details/Details.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;;AAKtD,wBAiBU;AAEV,UAAU,gBAAgB;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,eAAO,MAAM,WAAW,EAAE,OAAO,CAAC,gBAAgB,CAiHjD,CAAC"}

package/jsx/work/Details/Details.stories.jsx

@@ -1,109 +0,0 @@
-import { useMemo } from 'react';
-import { Flex, Link, FieldValueItem, useBreakpoint } from '@pega/cosmos-react-core';
-import { Details, DetailsContext } from '@pega/cosmos-react-work';
-export default {
-    title: 'Work/Details',
-    component: Details,
-    parameters: {
-        layout: 'centered'
-    },
-    args: {
-        description: 'Pellentesque pharetra justo augue, non maximus nulla venenatis et. Sed laoreet ultricies ullamcorper. Mauris ac nulla quis ipsum semper fringilla in eget risus. Fusce cursus sollicitudin nibh molestie volutpat.',
-        collapsible: false,
-        showAdditionalInfo: false
-    },
-    argTypes: {
-        description: { control: { type: 'text' } },
-        collapsible: { control: { type: 'boolean' } },
-        showAdditionalInfo: { control: { type: 'boolean' } }
-    }
-};
-export const DetailsDemo = (args) => {
-    const { description, collapsible, showAdditionalInfo } = args;
-    const isNotMobile = useBreakpoint('sm');
-    const ctx = useMemo(() => ({
-        mobileView: !isNotMobile,
-        longestLabelLength: 10
-    }), [isNotMobile]);
-    return (<DetailsContext.Provider value={ctx}>
-      <Details name='Outer list' highlightedData={[
-            <FieldValueItem variant='stacked' name='Age' value='56'/>,
-            <FieldValueItem variant='stacked' name='Location' value='Berlin'/>,
-            <FieldValueItem variant='stacked' name='Make' value='Ford'/>,
-            <FieldValueItem variant='stacked' name='Model' value='F150'/>
-        ]} description={description} collapsible={collapsible} additionalInfo={showAdditionalInfo
-            ? {
-                content: (<Flex container={{ direction: 'column', alignItems: 'start', gap: 2 }}>
-                    <p>
-                      Lorem ipsum dolor sit amet, consectetur it, sed do tempor incididunt ut labore
-                      magna aliqua. Nibh praesent tristique magna sit amet. Nec tincidunt praesent
-                      semper feugiat nibh sed pulvinar proin gravida.
-                    </p>
-                    <p>
-                      Pharetra pharetra massa massa ultricies mi quis hendrerit dolor. Est velit
-                      egestas dui id ornare arcu odio ut. Varius sit amet mattis vulputate enim
-                      nulla aliquet porttitor lacus.
-                    </p>
-                    <Link href='/' target='_blank'>
-                      Neque vitae
-                    </Link>
-                  </Flex>)
-            }
-            : undefined}>
-        
-        <Details name='Nested as flex' nested asFlex>
-          
-          <Details nested>
-            <Details nested>
-              <FieldValueItem name='Make' value='Ford'/>
-              <FieldValueItem name='Model' value='F150'/>
-            </Details>
-          </Details>
-
-          <Details nested>
-            <FieldValueItem name='Mileage' value='78,500'/>
-            <FieldValueItem name='Trim' value='Lariat'/>
-          </Details>
-        </Details>
-
-        <FieldValueItem name='Description' variant='stacked' value={<p>
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse commodo nulla
-              vitae mi bibendum, a fringilla nisl efficitur. Praesent vitae nulla lobortis, finibus
-              felis ultricies, fermentum mi. Nunc lorem ligula, placerat nec elit id, auctor
-              pellentesque est. Pellentesque pharetra justo augue, non maximus nulla venenatis et.
-              Sed laoreet ultricies ullamcorper. Mauris ac nulla quis ipsum semper fringilla in eget
-              risus. Fusce cursus sollicitudin nibh molestie volutpat.
-            </p>}/>
-
-        <FieldValueItem name='Keys' value='3'/>
-
-        <Details name='Nested list' nested>
-          <FieldValueItem name='First name' value='Howard'/>
-          <FieldValueItem name='Last name' value='Kennedy'/>
-
-          <Details name='Deeper list' nested>
-            <FieldValueItem name='Color' value='red'/>
-            <FieldValueItem name='Year' value='2017'/>
-          </Details>
-
-          <Details name='Value comparison' nested valueComparison>
-            <FieldValueItem name='Open lorem ipsum dolor set amet ipsum ket sit amet' value='$405,000,000.00'/>
-            <FieldValueItem name='Close' value='$401.00'/>
-            <FieldValueItem name='52 week high' value='$445.00'/>
-            <FieldValueItem name='52 week low' value='$335.00'/>
-          </Details>
-
-          <Details name='Collapsible' nested valueComparison collapsible>
-            <FieldValueItem name='Open' value='$205.00'/>
-            <FieldValueItem name='Close' value='$209.00'/>
-            <FieldValueItem name='52 week high' value='$312.00'/>
-            <FieldValueItem name='52 week low' value='$115.00'/>
-          </Details>
-        </Details>
-
-        <FieldValueItem name='Age' value='56'/>
-        <FieldValueItem name='Location' value='Berlin'/>
-      </Details>
-    </DetailsContext.Provider>);
-};
-//# sourceMappingURL=Details.stories.jsx.map

package/jsx/work/Details/Details.stories.jsx.map

@@ -1 +0,0 @@
-{"version":3,"file":"Details.stories.jsx","sourceRoot":"","sources":["../../../src/work/Details/Details.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useMemo } from 'react';\nimport type { Meta, StoryFn } from '@storybook/react';\n\nimport { Flex, Link, FieldValueItem, useBreakpoint } from '@pega/cosmos-react-core';\nimport { Details, DetailsContext } from '@pega/cosmos-react-work';\n\nexport default {\n  title: 'Work/Details',\n  component: Details,\n  parameters: {\n    layout: 'centered'\n  },\n  args: {\n    description:\n      'Pellentesque pharetra justo augue, non maximus nulla venenatis et. Sed laoreet ultricies ullamcorper. Mauris ac nulla quis ipsum semper fringilla in eget risus. Fusce cursus sollicitudin nibh molestie volutpat.',\n    collapsible: false,\n    showAdditionalInfo: false\n  },\n  argTypes: {\n    description: { control: { type: 'text' } },\n    collapsible: { control: { type: 'boolean' } },\n    showAdditionalInfo: { control: { type: 'boolean' } }\n  }\n} as Meta;\n\ninterface DetailsDemoProps {\n  description?: string;\n  collapsible?: boolean;\n  showAdditionalInfo?: boolean;\n}\n\nexport const DetailsDemo: StoryFn<DetailsDemoProps> = (args: DetailsDemoProps) => {\n  const { description, collapsible, showAdditionalInfo } = args;\n  const isNotMobile = useBreakpoint('sm');\n\n  const ctx = useMemo(\n    () => ({\n      mobileView: !isNotMobile,\n      longestLabelLength: 10\n    }),\n    [isNotMobile]\n  );\n\n  return (\n    <DetailsContext.Provider value={ctx}>\n      <Details\n        name='Outer list'\n        highlightedData={[\n          <FieldValueItem variant='stacked' name='Age' value='56' />,\n          <FieldValueItem variant='stacked' name='Location' value='Berlin' />,\n          <FieldValueItem variant='stacked' name='Make' value='Ford' />,\n          <FieldValueItem variant='stacked' name='Model' value='F150' />\n        ]}\n        description={description}\n        collapsible={collapsible}\n        additionalInfo={\n          showAdditionalInfo\n            ? {\n                content: (\n                  <Flex container={{ direction: 'column', alignItems: 'start', gap: 2 }}>\n                    <p>\n                      Lorem ipsum dolor sit amet, consectetur it, sed do tempor incididunt ut labore\n                      magna aliqua. Nibh praesent tristique magna sit amet. Nec tincidunt praesent\n                      semper feugiat nibh sed pulvinar proin gravida.\n                    </p>\n                    <p>\n                      Pharetra pharetra massa massa ultricies mi quis hendrerit dolor. Est velit\n                      egestas dui id ornare arcu odio ut. Varius sit amet mattis vulputate enim\n                      nulla aliquet porttitor lacus.\n                    </p>\n                    <Link href='/' target='_blank'>\n                      Neque vitae\n                    </Link>\n                  </Flex>\n                )\n              }\n            : undefined\n        }\n      >\n        {/* Siblings can be rendered in a responsive row with the `asFlex` attribute */}\n        <Details name='Nested as flex' nested asFlex>\n          {/* Arbitrary recursive nesting is supported with nested attribute */}\n          <Details nested>\n            <Details nested>\n              <FieldValueItem name='Make' value='Ford' />\n              <FieldValueItem name='Model' value='F150' />\n            </Details>\n          </Details>\n\n          <Details nested>\n            <FieldValueItem name='Mileage' value='78,500' />\n            <FieldValueItem name='Trim' value='Lariat' />\n          </Details>\n        </Details>\n\n        <FieldValueItem\n          name='Description'\n          variant='stacked'\n          value={\n            <p>\n              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse commodo nulla\n              vitae mi bibendum, a fringilla nisl efficitur. Praesent vitae nulla lobortis, finibus\n              felis ultricies, fermentum mi. Nunc lorem ligula, placerat nec elit id, auctor\n              pellentesque est. Pellentesque pharetra justo augue, non maximus nulla venenatis et.\n              Sed laoreet ultricies ullamcorper. Mauris ac nulla quis ipsum semper fringilla in eget\n              risus. Fusce cursus sollicitudin nibh molestie volutpat.\n            </p>\n          }\n        />\n\n        <FieldValueItem name='Keys' value='3' />\n\n        <Details name='Nested list' nested>\n          <FieldValueItem name='First name' value='Howard' />\n          <FieldValueItem name='Last name' value='Kennedy' />\n\n          <Details name='Deeper list' nested>\n            <FieldValueItem name='Color' value='red' />\n            <FieldValueItem name='Year' value='2017' />\n          </Details>\n\n          <Details name='Value comparison' nested valueComparison>\n            <FieldValueItem\n              name='Open lorem ipsum dolor set amet ipsum ket sit amet'\n              value='$405,000,000.00'\n            />\n            <FieldValueItem name='Close' value='$401.00' />\n            <FieldValueItem name='52 week high' value='$445.00' />\n            <FieldValueItem name='52 week low' value='$335.00' />\n          </Details>\n\n          <Details name='Collapsible' nested valueComparison collapsible>\n            <FieldValueItem name='Open' value='$205.00' />\n            <FieldValueItem name='Close' value='$209.00' />\n            <FieldValueItem name='52 week high' value='$312.00' />\n            <FieldValueItem name='52 week low' value='$115.00' />\n          </Details>\n        </Details>\n\n        <FieldValueItem name='Age' value='56' />\n        <FieldValueItem name='Location' value='Berlin' />\n      </Details>\n    </DetailsContext.Provider>\n  );\n};\n"]}

package/jsx/work/DetailsV2/DetailsV2.stories.d.ts

@@ -1,10 +0,0 @@
-import type { StoryFn } from '@storybook/react';
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
-export default _default;
-interface DetailsV2DemoProps {
-    description?: string;
-    collapsible?: boolean;
-    showAdditionalInfo?: boolean;
-}
-export declare const DetailsV2Demo: StoryFn<DetailsV2DemoProps>;
-//# sourceMappingURL=DetailsV2.stories.d.ts.map

package/jsx/work/DetailsV2/DetailsV2.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"DetailsV2.stories.d.ts","sourceRoot":"","sources":["../../../src/work/DetailsV2/DetailsV2.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;;AAOtD,wBAcU;AAEV,UAAU,kBAAkB;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,eAAO,MAAM,aAAa,EAAE,OAAO,CAAC,kBAAkB,CA8XrD,CAAC"}

package/jsx/work/DetailsV2/DetailsV2.stories.jsx

@@ -1,215 +0,0 @@
-import { useMemo } from 'react';
-import { Flex, Link, FieldValueItem, useBreakpoint } from '@pega/cosmos-react-core';
-import { DetailsV2, DetailsV2Context, DetailsV2List } from '@pega/cosmos-react-work';
-import { TableDemo } from '../../core/Table/Table.stories';
-export default {
-    title: 'Work/DetailsV2',
-    component: DetailsV2,
-    args: {
-        description: 'Pellentesque pharetra justo augue, non maximus nulla venenatis et. Sed laoreet ultricies ullamcorper. Mauris ac nulla quis ipsum semper fringilla in eget risus. Fusce cursus sollicitudin nibh molestie volutpat.',
-        collapsible: false,
-        showAdditionalInfo: false
-    },
-    argTypes: {
-        description: { control: { type: 'text' } },
-        collapsible: { control: { type: 'boolean' } },
-        showAdditionalInfo: { control: { type: 'boolean' } }
-    }
-};
-export const DetailsV2Demo = (args) => {
-    const { description, collapsible, showAdditionalInfo } = args;
-    const isNotMobile = useBreakpoint('sm');
-    const longestInlineLabel = 'Trim with a longer label';
-    const longestLabelLength = longestInlineLabel.split(' ').join('').length;
-    const ctx = useMemo(() => ({
-        mobileView: !isNotMobile,
-        longestLabelLength
-    }), [isNotMobile]);
-    return (<DetailsV2Context.Provider value={ctx}>
-      <DetailsV2 name='Upper list' highlightedData={[
-            <FieldValueItem variant='stacked' name='Age' value='56'/>,
-            <FieldValueItem variant='stacked' name='Location' value='Berlin'/>,
-            <FieldValueItem variant='stacked' name='Make' value='Ford'/>,
-            <FieldValueItem variant='stacked' name='Model' value='F150'/>
-        ]} description={description} collapsible={collapsible} additionalInfo={showAdditionalInfo
-            ? {
-                content: (<Flex container={{ direction: 'column', alignItems: 'start', gap: 2 }}>
-                    <p>
-                      Lorem ipsum dolor sit amet, consectetur it, sed do tempor incididunt ut labore
-                      magna aliqua. Nibh praesent tristique magna sit amet. Nec tincidunt praesent
-                      semper feugiat nibh sed pulvinar proin gravida.
-                    </p>
-                    <p>
-                      Pharetra pharetra massa massa ultricies mi quis hendrerit dolor. Est velit
-                      egestas dui id ornare arcu odio ut. Varius sit amet mattis vulputate enim
-                      nulla aliquet porttitor lacus.
-                    </p>
-                    <Link href='/' target='_blank'>
-                      Neque vitae
-                    </Link>
-                  </Flex>)
-            }
-            : undefined} columns={{
-            a: (<>
-              <DetailsV2 name='One Column' columns={{
-                    a: (<DetailsV2 description='Two column with no headings.' columns={{
-                            a: (<DetailsV2 columns={{
-                                    a: (<DetailsV2List items={[
-                                            { name: 'Year', value: '2021' },
-                                            { name: 'Owners', value: '2' }
-                                        ]}/>)
-                                }}/>),
-                            b: (<DetailsV2 columns={{
-                                    a: (<DetailsV2List items={[
-                                            { name: 'Transmission', value: 'Automatic' },
-                                            { name: 'Drivetrain', value: 'AWD' }
-                                        ]}/>)
-                                }}/>)
-                        }}/>)
-                }} collapsible/>
-
-              <DetailsV2 description='Two Column with some description and no top heading.' columns={{
-                    a: (<DetailsV2 name='First Column' columns={{
-                            a: (<DetailsV2List items={[
-                                    { name: 'Make', value: 'Ford' },
-                                    { name: 'Model', value: 'F150' }
-                                ]}/>)
-                        }}/>),
-                    b: (<DetailsV2 name='Second Column' columns={{
-                            a: (<DetailsV2List items={[
-                                    { name: 'Mileage', value: '78,500' },
-                                    { name: 'Trim', value: 'Lariat' }
-                                ]}/>)
-                        }}/>)
-                }}/>
-
-              <DetailsV2 name='Three Column' description='Text telling you what you are looking at or why it is relevant.' columns={{
-                    a: (<DetailsV2 name='First Column' columns={{
-                            a: (<DetailsV2List items={[
-                                    { name: 'Make', value: 'Ford' },
-                                    { name: 'Model', value: 'F150' }
-                                ]}/>)
-                        }}/>),
-                    b: (<DetailsV2 description='Column with no heading but some description.' columns={{
-                            a: (<DetailsV2List items={[
-                                    { name: 'Mileage', value: '78,500' },
-                                    { name: longestInlineLabel, value: 'Lariat' }
-                                ]}/>)
-                        }}/>),
-                    c: (<DetailsV2 name='Third Column' columns={{
-                            a: (<DetailsV2List items={[
-                                    { name: 'Mileage', value: '78,500' },
-                                    { name: 'Trim', value: 'Lariat' }
-                                ]}/>)
-                        }}/>)
-                }}/>
-
-              <DetailsV2 name='Wide Narrow' arrangement='wideNarrow' columns={{
-                    a: <DetailsV2 name='Wide Column' columns={{ a: <TableDemo /> }}/>,
-                    b: (<DetailsV2 name='Narrow Column' columns={{
-                            a: (<DetailsV2List items={[
-                                    { name: 'Mileage', value: '78,500' },
-                                    { name: 'Trim', value: 'Lariat' }
-                                ]}/>)
-                        }}/>)
-                }}/>
-
-              <DetailsV2 name='Narrow Wide' arrangement='narrowWide' columns={{
-                    a: (<DetailsV2 name='Narrow Column' columns={{
-                            a: (<DetailsV2List items={[
-                                    { name: 'Mileage', value: '78,500' },
-                                    { name: 'Trim', value: 'Lariat' }
-                                ]}/>)
-                        }}/>),
-                    b: <DetailsV2 name='Wide Column' columns={{ a: <TableDemo /> }}/>
-                }}/>
-
-              <DetailsV2 name='Table' columns={{ a: <TableDemo /> }}/>
-
-              <DetailsV2 name='Nested List 1 Column' columns={{
-                    a: (<>
-                      <DetailsV2 name='First Child' columns={{
-                            a: (<DetailsV2List items={[
-                                    { name: 'Year', value: '2021' },
-                                    { name: 'Owners', value: '2' }
-                                ]}/>)
-                        }}/>
-
-                      <DetailsV2 name='Second Child' columns={{
-                            a: (<DetailsV2List items={[
-                                    { name: 'Transmission', value: 'Automatic' },
-                                    { name: 'Drivetrain', value: 'AWD' }
-                                ]}/>)
-                        }}/>
-                    </>)
-                }}/>
-
-              <DetailsV2 columns={{
-                    a: (<>
-                      <DetailsV2List items={[
-                            {
-                                name: 'Description',
-                                variant: 'stacked',
-                                value: (<p>
-                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
-                                commodo nulla vitae mi bibendum, a fringilla nisl efficitur.
-                                Praesent vitae nulla lobortis, finibus felis ultricies, fermentum
-                                mi. Nunc lorem ligula, placerat nec elit id, auctor pellentesque
-                                est. Pellentesque pharetra justo augue, non maximus nulla venenatis
-                                et. Sed laoreet ultricies ullamcorper. Mauris ac nulla quis ipsum
-                                semper fringilla in eget risus. Fusce cursus sollicitudin nibh
-                                molestie volutpat.
-                              </p>)
-                            },
-                            { name: 'Keys', value: '3' }
-                        ]}/>
-
-                      <DetailsV2 name='Nested' columns={{
-                            a: (<>
-                              <DetailsV2List items={[
-                                    { name: 'First name', value: 'Howard' },
-                                    { name: 'Last name', value: 'Kennedy' }
-                                ]}/>
-
-                              <DetailsV2 name='Further Nested List' columns={{
-                                    a: (<DetailsV2List items={[
-                                            { name: 'Color', value: 'Red' },
-                                            { name: 'Tires', value: 'Firestone all weather' }
-                                        ]}/>)
-                                }}/>
-                            </>)
-                        }}/>
-
-                      <DetailsV2 name='Value comparison' columns={{
-                            a: (<DetailsV2List items={[
-                                    { name: 'Open', value: '$405.00' },
-                                    { name: 'Close', value: '$401.00' },
-                                    { name: '52 week high', value: '$446.00' },
-                                    { name: '52 week low', value: '$335.00' },
-                                    { name: 'Total number of active shares', value: '567,000.00' }
-                                ]} valueComparison/>)
-                        }}/>
-
-                      <DetailsV2 name='Collapsible' columns={{
-                            a: (<DetailsV2List items={[
-                                    { name: 'Open', value: '$405.00' },
-                                    { name: 'Close', value: '$401.00' },
-                                    { name: '52 week high', value: '$446.00' },
-                                    { name: '52 week low', value: '$335.00' },
-                                    { name: 'Total number of active shares', value: '567,000.00' }
-                                ]} valueComparison/>)
-                        }} collapsible/>
-
-                      <DetailsV2 columns={{
-                            a: (<DetailsV2List items={[
-                                    { name: 'Age', value: '56' },
-                                    { name: 'Location', value: 'Berlin PA' }
-                                ]}/>)
-                        }}/>
-                    </>)
-                }}/>
-            </>)
-        }}/>
-    </DetailsV2Context.Provider>);
-};
-//# sourceMappingURL=DetailsV2.stories.jsx.map

package/jsx/work/DetailsV2/DetailsV2.stories.jsx.map

@@ -1 +0,0 @@
-{"version":3,"file":"DetailsV2.stories.jsx","sourceRoot":"","sources":["../../../src/work/DetailsV2/DetailsV2.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useMemo } from 'react';\nimport type { Meta, StoryFn } from '@storybook/react';\n\nimport { Flex, Link, FieldValueItem, useBreakpoint } from '@pega/cosmos-react-core';\nimport { DetailsV2, DetailsV2Context, DetailsV2List } from '@pega/cosmos-react-work';\n\nimport { TableDemo } from '../../core/Table/Table.stories';\n\nexport default {\n  title: 'Work/DetailsV2',\n  component: DetailsV2,\n  args: {\n    description:\n      'Pellentesque pharetra justo augue, non maximus nulla venenatis et. Sed laoreet ultricies ullamcorper. Mauris ac nulla quis ipsum semper fringilla in eget risus. Fusce cursus sollicitudin nibh molestie volutpat.',\n    collapsible: false,\n    showAdditionalInfo: false\n  },\n  argTypes: {\n    description: { control: { type: 'text' } },\n    collapsible: { control: { type: 'boolean' } },\n    showAdditionalInfo: { control: { type: 'boolean' } }\n  }\n} as Meta;\n\ninterface DetailsV2DemoProps {\n  description?: string;\n  collapsible?: boolean;\n  showAdditionalInfo?: boolean;\n}\n\nexport const DetailsV2Demo: StoryFn<DetailsV2DemoProps> = (args: DetailsV2DemoProps) => {\n  const { description, collapsible, showAdditionalInfo } = args;\n  const isNotMobile = useBreakpoint('sm');\n  const longestInlineLabel = 'Trim with a longer label';\n  const longestLabelLength = longestInlineLabel.split(' ').join('').length;\n\n  const ctx = useMemo(\n    () => ({\n      mobileView: !isNotMobile,\n      longestLabelLength\n    }),\n    [isNotMobile]\n  );\n\n  return (\n    <DetailsV2Context.Provider value={ctx}>\n      <DetailsV2\n        name='Upper list'\n        highlightedData={[\n          <FieldValueItem variant='stacked' name='Age' value='56' />,\n          <FieldValueItem variant='stacked' name='Location' value='Berlin' />,\n          <FieldValueItem variant='stacked' name='Make' value='Ford' />,\n          <FieldValueItem variant='stacked' name='Model' value='F150' />\n        ]}\n        description={description}\n        collapsible={collapsible}\n        additionalInfo={\n          showAdditionalInfo\n            ? {\n                content: (\n                  <Flex container={{ direction: 'column', alignItems: 'start', gap: 2 }}>\n                    <p>\n                      Lorem ipsum dolor sit amet, consectetur it, sed do tempor incididunt ut labore\n                      magna aliqua. Nibh praesent tristique magna sit amet. Nec tincidunt praesent\n                      semper feugiat nibh sed pulvinar proin gravida.\n                    </p>\n                    <p>\n                      Pharetra pharetra massa massa ultricies mi quis hendrerit dolor. Est velit\n                      egestas dui id ornare arcu odio ut. Varius sit amet mattis vulputate enim\n                      nulla aliquet porttitor lacus.\n                    </p>\n                    <Link href='/' target='_blank'>\n                      Neque vitae\n                    </Link>\n                  </Flex>\n                )\n              }\n            : undefined\n        }\n        columns={{\n          a: (\n            <>\n              <DetailsV2\n                name='One Column'\n                columns={{\n                  a: (\n                    <DetailsV2\n                      description='Two column with no headings.'\n                      columns={{\n                        a: (\n                          <DetailsV2\n                            columns={{\n                              a: (\n                                <DetailsV2List\n                                  items={[\n                                    { name: 'Year', value: '2021' },\n                                    { name: 'Owners', value: '2' }\n                                  ]}\n                                />\n                              )\n                            }}\n                          />\n                        ),\n                        b: (\n                          <DetailsV2\n                            columns={{\n                              a: (\n                                <DetailsV2List\n                                  items={[\n                                    { name: 'Transmission', value: 'Automatic' },\n                                    { name: 'Drivetrain', value: 'AWD' }\n                                  ]}\n                                />\n                              )\n                            }}\n                          />\n                        )\n                      }}\n                    />\n                  )\n                }}\n                collapsible\n              />\n\n              <DetailsV2\n                description='Two Column with some description and no top heading.'\n                columns={{\n                  a: (\n                    <DetailsV2\n                      name='First Column'\n                      columns={{\n                        a: (\n                          <DetailsV2List\n                            items={[\n                              { name: 'Make', value: 'Ford' },\n                              { name: 'Model', value: 'F150' }\n                            ]}\n                          />\n                        )\n                      }}\n                    />\n                  ),\n                  b: (\n                    <DetailsV2\n                      name='Second Column'\n                      columns={{\n                        a: (\n                          <DetailsV2List\n                            items={[\n                              { name: 'Mileage', value: '78,500' },\n                              { name: 'Trim', value: 'Lariat' }\n                            ]}\n                          />\n                        )\n                      }}\n                    />\n                  )\n                }}\n              />\n\n              <DetailsV2\n                name='Three Column'\n                description='Text telling you what you are looking at or why it is relevant.'\n                columns={{\n                  a: (\n                    <DetailsV2\n                      name='First Column'\n                      columns={{\n                        a: (\n                          <DetailsV2List\n                            items={[\n                              { name: 'Make', value: 'Ford' },\n                              { name: 'Model', value: 'F150' }\n                            ]}\n                          />\n                        )\n                      }}\n                    />\n                  ),\n                  b: (\n                    <DetailsV2\n                      description='Column with no heading but some description.'\n                      columns={{\n                        a: (\n                          <DetailsV2List\n                            items={[\n                              { name: 'Mileage', value: '78,500' },\n                              { name: longestInlineLabel, value: 'Lariat' }\n                            ]}\n                          />\n                        )\n                      }}\n                    />\n                  ),\n                  c: (\n                    <DetailsV2\n                      name='Third Column'\n                      columns={{\n                        a: (\n                          <DetailsV2List\n                            items={[\n                              { name: 'Mileage', value: '78,500' },\n                              { name: 'Trim', value: 'Lariat' }\n                            ]}\n                          />\n                        )\n                      }}\n                    />\n                  )\n                }}\n              />\n\n              <DetailsV2\n                name='Wide Narrow'\n                arrangement='wideNarrow'\n                columns={{\n                  a: <DetailsV2 name='Wide Column' columns={{ a: <TableDemo /> }} />,\n                  b: (\n                    <DetailsV2\n                      name='Narrow Column'\n                      columns={{\n                        a: (\n                          <DetailsV2List\n                            items={[\n                              { name: 'Mileage', value: '78,500' },\n                              { name: 'Trim', value: 'Lariat' }\n                            ]}\n                          />\n                        )\n                      }}\n                    />\n                  )\n                }}\n              />\n\n              <DetailsV2\n                name='Narrow Wide'\n                arrangement='narrowWide'\n                columns={{\n                  a: (\n                    <DetailsV2\n                      name='Narrow Column'\n                      columns={{\n                        a: (\n                          <DetailsV2List\n                            items={[\n                              { name: 'Mileage', value: '78,500' },\n                              { name: 'Trim', value: 'Lariat' }\n                            ]}\n                          />\n                        )\n                      }}\n                    />\n                  ),\n                  b: <DetailsV2 name='Wide Column' columns={{ a: <TableDemo /> }} />\n                }}\n              />\n\n              <DetailsV2 name='Table' columns={{ a: <TableDemo /> }} />\n\n              <DetailsV2\n                name='Nested List 1 Column'\n                columns={{\n                  a: (\n                    <>\n                      <DetailsV2\n                        name='First Child'\n                        columns={{\n                          a: (\n                            <DetailsV2List\n                              items={[\n                                { name: 'Year', value: '2021' },\n                                { name: 'Owners', value: '2' }\n                              ]}\n                            />\n                          )\n                        }}\n                      />\n\n                      <DetailsV2\n                        name='Second Child'\n                        columns={{\n                          a: (\n                            <DetailsV2List\n                              items={[\n                                { name: 'Transmission', value: 'Automatic' },\n                                { name: 'Drivetrain', value: 'AWD' }\n                              ]}\n                            />\n                          )\n                        }}\n                      />\n                    </>\n                  )\n                }}\n              />\n\n              <DetailsV2\n                columns={{\n                  a: (\n                    <>\n                      <DetailsV2List\n                        items={[\n                          {\n                            name: 'Description',\n                            variant: 'stacked',\n                            value: (\n                              <p>\n                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse\n                                commodo nulla vitae mi bibendum, a fringilla nisl efficitur.\n                                Praesent vitae nulla lobortis, finibus felis ultricies, fermentum\n                                mi. Nunc lorem ligula, placerat nec elit id, auctor pellentesque\n                                est. Pellentesque pharetra justo augue, non maximus nulla venenatis\n                                et. Sed laoreet ultricies ullamcorper. Mauris ac nulla quis ipsum\n                                semper fringilla in eget risus. Fusce cursus sollicitudin nibh\n                                molestie volutpat.\n                              </p>\n                            )\n                          },\n                          { name: 'Keys', value: '3' }\n                        ]}\n                      />\n\n                      <DetailsV2\n                        name='Nested'\n                        columns={{\n                          a: (\n                            <>\n                              <DetailsV2List\n                                items={[\n                                  { name: 'First name', value: 'Howard' },\n                                  { name: 'Last name', value: 'Kennedy' }\n                                ]}\n                              />\n\n                              <DetailsV2\n                                name='Further Nested List'\n                                columns={{\n                                  a: (\n                                    <DetailsV2List\n                                      items={[\n                                        { name: 'Color', value: 'Red' },\n                                        { name: 'Tires', value: 'Firestone all weather' }\n                                      ]}\n                                    />\n                                  )\n                                }}\n                              />\n                            </>\n                          )\n                        }}\n                      />\n\n                      <DetailsV2\n                        name='Value comparison'\n                        columns={{\n                          a: (\n                            <DetailsV2List\n                              items={[\n                                { name: 'Open', value: '$405.00' },\n                                { name: 'Close', value: '$401.00' },\n                                { name: '52 week high', value: '$446.00' },\n                                { name: '52 week low', value: '$335.00' },\n                                { name: 'Total number of active shares', value: '567,000.00' }\n                              ]}\n                              valueComparison\n                            />\n                          )\n                        }}\n                      />\n\n                      <DetailsV2\n                        name='Collapsible'\n                        columns={{\n                          a: (\n                            <DetailsV2List\n                              items={[\n                                { name: 'Open', value: '$405.00' },\n                                { name: 'Close', value: '$401.00' },\n                                { name: '52 week high', value: '$446.00' },\n                                { name: '52 week low', value: '$335.00' },\n                                { name: 'Total number of active shares', value: '567,000.00' }\n                              ]}\n                              valueComparison\n                            />\n                          )\n                        }}\n                        collapsible\n                      />\n\n                      <DetailsV2\n                        columns={{\n                          a: (\n                            <DetailsV2List\n                              items={[\n                                { name: 'Age', value: '56' },\n                                { name: 'Location', value: 'Berlin PA' }\n                              ]}\n                            />\n                          )\n                        }}\n                      />\n                    </>\n                  )\n                }}\n              />\n            </>\n          )\n        }}\n      />\n    </DetailsV2Context.Provider>\n  );\n};\n"]}

package/jsx/work/Glimpse/Glimpse.stories.d.ts

@@ -1,5 +0,0 @@
-import type { StoryFn } from '@storybook/react';
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
-export default _default;
-export declare const GlimpseDemo: StoryFn;
-//# sourceMappingURL=Glimpse.stories.d.ts.map

package/jsx/work/Glimpse/Glimpse.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Glimpse.stories.d.ts","sourceRoot":"","sources":["../../../src/work/Glimpse/Glimpse.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;;AAQtD,wBAIU;AAEV,eAAO,MAAM,WAAW,EAAE,OA+CzB,CAAC"}

package/jsx/work/Glimpse/Glimpse.stories.jsx

@@ -1,42 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import { Avatar, Button, EmailDisplay, PhoneDisplay, useElement } from '@pega/cosmos-react-core';
-import { Glimpse } from '@pega/cosmos-react-work';
-export default {
-    title: 'Work/Glimpse',
-    component: Glimpse,
-    parameters: { layout: 'centered' }
-};
-export const GlimpseDemo = () => {
-    const [target, setTarget] = useElement(null);
-    const fields = [
-        {
-            name: 'Project',
-            value: 'Constellation Demo'
-        },
-        {
-            name: 'Phone number',
-            value: <PhoneDisplay value='(111) 111-1111'/>
-        },
-        {
-            name: 'Email',
-            value: <EmailDisplay value='turnc@example.com'/>
-        },
-        {
-            name: 'Reports to',
-            value: 'Helen Bush'
-        }
-    ];
-    return (<>
-      <Button variant='link' onClick={(e) => {
-            setTarget(e.currentTarget);
-        }}>
-        Open Glimpse
-      </Button>
-      {target && (<Glimpse id='turnc' target={target} heading={{
-                primary: 'Cindy Turner',
-                secondary: 'Lead Engineer',
-                visual: <Avatar name='Cindy Turner'/>
-            }} fields={fields} onViewProfile={action('View profile')} onDismiss={() => setTarget(null)}/>)}
-    </>);
-};
-//# sourceMappingURL=Glimpse.stories.jsx.map

package/jsx/work/Glimpse/Glimpse.stories.jsx.map

@@ -1 +0,0 @@
-{"version":3,"file":"Glimpse.stories.jsx","sourceRoot":"","sources":["../../../src/work/Glimpse/Glimpse.stories.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAElD,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,YAAY,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAEjG,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAElD,eAAe;IACb,KAAK,EAAE,cAAc;IACrB,SAAS,EAAE,OAAO;IAClB,UAAU,EAAE,EAAE,MAAM,EAAE,UAAU,EAAE;CAC3B,CAAC;AAEV,MAAM,CAAC,MAAM,WAAW,GAAY,GAAG,EAAE;IACvC,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,UAAU,CAAoB,IAAI,CAAC,CAAC;IAChE,MAAM,MAAM,GAAkC;QAC5C;YACE,IAAI,EAAE,SAAS;YACf,KAAK,EAAE,oBAAoB;SAC5B;QACD;YACE,IAAI,EAAE,cAAc;YACpB,KAAK,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,gBAAgB,EAAG;SAC/C;QACD;YACE,IAAI,EAAE,OAAO;YACb,KAAK,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,mBAAmB,EAAG;SAClD;QACD;YACE,IAAI,EAAE,YAAY;YAClB,KAAK,EAAE,YAAY;SACpB;KACF,CAAC;IAEF,OAAO,CACL,EACE;MAAA,CAAC,MAAM,CACL,OAAO,CAAC,MAAM,CACd,OAAO,CAAC,CAAC,CAAC,CAAgC,EAAE,EAAE;YAC5C,SAAS,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC;QAC7B,CAAC,CAAC,CAEF;;MACF,EAAE,MAAM,CACR;MAAA,CAAC,MAAM,IAAI,CACT,CAAC,OAAO,CACN,EAAE,CAAC,OAAO,CACV,MAAM,CAAC,CAAC,MAAM,CAAC,CACf,OAAO,CAAC,CAAC;gBACP,OAAO,EAAE,cAAc;gBACvB,SAAS,EAAE,eAAe;gBAC1B,MAAM,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,cAAc,EAAG;aACvC,CAAC,CACF,MAAM,CAAC,CAAC,MAAM,CAAC,CACf,aAAa,CAAC,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC,CACtC,SAAS,CAAC,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,EACjC,CACH,CACH;IAAA,GAAG,CACJ,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// cspell:words turnc\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { MouseEvent } from 'react';\nimport { action } from '@storybook/addon-actions';\n\nimport { Avatar, Button, EmailDisplay, PhoneDisplay, useElement } from '@pega/cosmos-react-core';\nimport type { FieldValueListProps } from '@pega/cosmos-react-core';\nimport { Glimpse } from '@pega/cosmos-react-work';\n\nexport default {\n  title: 'Work/Glimpse',\n  component: Glimpse,\n  parameters: { layout: 'centered' }\n} as Meta;\n\nexport const GlimpseDemo: StoryFn = () => {\n  const [target, setTarget] = useElement<HTMLButtonElement>(null);\n  const fields: FieldValueListProps['fields'] = [\n    {\n      name: 'Project',\n      value: 'Constellation Demo'\n    },\n    {\n      name: 'Phone number',\n      value: <PhoneDisplay value='(111) 111-1111' />\n    },\n    {\n      name: 'Email',\n      value: <EmailDisplay value='turnc@example.com' />\n    },\n    {\n      name: 'Reports to',\n      value: 'Helen Bush'\n    }\n  ];\n\n  return (\n    <>\n      <Button\n        variant='link'\n        onClick={(e: MouseEvent<HTMLButtonElement>) => {\n          setTarget(e.currentTarget);\n        }}\n      >\n        Open Glimpse\n      </Button>\n      {target && (\n        <Glimpse\n          id='turnc'\n          target={target}\n          heading={{\n            primary: 'Cindy Turner',\n            secondary: 'Lead Engineer',\n            visual: <Avatar name='Cindy Turner' />\n          }}\n          fields={fields}\n          onViewProfile={action('View profile')}\n          onDismiss={() => setTarget(null)}\n        />\n      )}\n    </>\n  );\n};\n"]}

package/jsx/work/IntelligentGuidance/IntelligentGuidance.stories.d.ts

@@ -1,5 +0,0 @@
-import type { StoryFn } from '@storybook/react';
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
-export default _default;
-export declare const IntelligentGuidanceDemo: StoryFn;
-//# sourceMappingURL=IntelligentGuidance.stories.d.ts.map

package/jsx/work/IntelligentGuidance/IntelligentGuidance.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"IntelligentGuidance.stories.d.ts","sourceRoot":"","sources":["../../../src/work/IntelligentGuidance/IntelligentGuidance.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;;AAStD,wBAMU;AAEV,eAAO,MAAM,uBAAuB,EAAE,OAoHrC,CAAC"}