@pega/cosmos-react-demos 3.0.0-dev.2.1 → 3.0.0-dev.20.0

package/lib/work/ConfigurableLayout/ConfigurableLayout.mocks.js

@@ -0,0 +1,165 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Flex } from '@pega/cosmos-react-core';
+import { StyledPlaceholder } from './ConfigurableLayout.styles';
+export const Placeholder = ({ text }) => {
+    const props = {
+        verticalPadding: Math.floor(Math.random() * (4 - 1 + 1)) + 1
+    };
+    return (_jsx(Flex, { as: StyledPlaceholder, container: { direction: 'column', justify: 'center' }, ...props, children: _jsx("p", { children: text }) }));
+};
+export const regionAItems = [
+    {
+        id: 'a0',
+        content: _jsx(Placeholder, { text: 'A0' }),
+        layoutConfig: {
+            width: '1/4',
+            minWidth: 150
+        }
+    },
+    {
+        id: 'a1',
+        content: _jsx(Placeholder, { text: 'A1' }),
+        layoutConfig: {
+            width: '1/4',
+            minWidth: 150
+        }
+    },
+    {
+        id: 'a2',
+        content: _jsx(Placeholder, { text: 'A2' }),
+        layoutConfig: {
+            width: '1/4',
+            minWidth: 150
+        }
+    },
+    {
+        id: 'a3',
+        content: _jsx(Placeholder, { text: 'A3' }),
+        layoutConfig: {
+            width: '1/4',
+            minWidth: 150
+        }
+    },
+    {
+        id: 'a4',
+        content: _jsx(Placeholder, { text: 'A4' }),
+        layoutConfig: {
+            width: '3/4'
+        }
+    },
+    {
+        id: 'a5',
+        content: _jsx(Placeholder, { text: 'A5' }),
+        layoutConfig: {
+            width: '1/4',
+            minWidth: 150
+        }
+    },
+    {
+        id: 'a6',
+        content: _jsx(Placeholder, { text: 'A6' }),
+        layoutConfig: {
+            width: '1/3'
+        }
+    },
+    {
+        id: 'a7',
+        content: _jsx(Placeholder, { text: 'A7' }),
+        layoutConfig: {
+            width: '2/3'
+        }
+    }
+];
+export const regionBItems = [
+    {
+        id: 'b0',
+        content: _jsx(Placeholder, { text: 'B0' }),
+        layoutConfig: {
+            width: '1/4',
+            minWidth: 150
+        }
+    },
+    {
+        id: 'b1',
+        content: _jsx(Placeholder, { text: 'B1' }),
+        layoutConfig: {
+            width: '1/4',
+            minWidth: 150
+        }
+    },
+    {
+        id: 'b2',
+        content: _jsx(Placeholder, { text: 'B2' }),
+        layoutConfig: {
+            width: '1/4',
+            minWidth: 150
+        }
+    },
+    {
+        id: 'b3',
+        content: _jsx(Placeholder, { text: 'B3' }),
+        layoutConfig: {
+            width: '1/4',
+            minWidth: 150
+        }
+    },
+    {
+        id: 'b4',
+        content: _jsx(Placeholder, { text: 'B4' }),
+        layoutConfig: {
+            width: '1/2'
+        }
+    },
+    {
+        id: 'b5',
+        content: _jsx(Placeholder, { text: 'B5' }),
+        layoutConfig: {
+            width: '1/2'
+        }
+    },
+    {
+        id: 'b6',
+        content: _jsx(Placeholder, { text: 'B6' }),
+        layoutConfig: {
+            width: 'full'
+        }
+    },
+    {
+        id: 'b7',
+        content: _jsx(Placeholder, { text: 'B7' }),
+        layoutConfig: {
+            width: '1/3'
+        }
+    },
+    {
+        id: 'b8',
+        content: _jsx(Placeholder, { text: 'B8' }),
+        layoutConfig: {
+            width: '2/3'
+        }
+    },
+    {
+        id: 'b9',
+        content: _jsx(Placeholder, { text: 'B9' }),
+        layoutConfig: {
+            width: '3/4'
+        }
+    },
+    {
+        id: 'b10',
+        content: _jsx(Placeholder, { text: 'B10' }),
+        layoutConfig: {
+            width: '1/4'
+        }
+    },
+    {
+        id: 'b11',
+        content: _jsx(Placeholder, { text: 'B11' }),
+        layoutConfig: {
+            width: '1/4',
+            minWidth: 330,
+            fillAvailable: false
+        }
+    }
+];
+//# sourceMappingURL=ConfigurableLayout.mocks.js.map

package/lib/work/ConfigurableLayout/ConfigurableLayout.mocks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConfigurableLayout.mocks.js","sourceRoot":"","sources":["../../../src/work/ConfigurableLayout/ConfigurableLayout.mocks.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Flex } from '@pega/cosmos-react-core';\n\nimport { StyledPlaceholder } from './ConfigurableLayout.styles';\n\nexport const Placeholder = ({ text }: { text: string }) => {\n  const props = {\n    verticalPadding: Math.floor(Math.random() * (4 - 1 + 1)) + 1\n  };\n\n  return (\n    <Flex as={StyledPlaceholder} container={{ direction: 'column', justify: 'center' }} {...props}>\n      <p>{text}</p>\n    </Flex>\n  );\n};\n\nexport const regionAItems = [\n  {\n    id: 'a0',\n    content: <Placeholder text='A0' />,\n    layoutConfig: {\n      width: '1/4',\n      minWidth: 150\n    }\n  },\n  {\n    id: 'a1',\n    content: <Placeholder text='A1' />,\n    layoutConfig: {\n      width: '1/4',\n      minWidth: 150\n    }\n  },\n  {\n    id: 'a2',\n    content: <Placeholder text='A2' />,\n    layoutConfig: {\n      width: '1/4',\n      minWidth: 150\n    }\n  },\n  {\n    id: 'a3',\n    content: <Placeholder text='A3' />,\n    layoutConfig: {\n      width: '1/4',\n      minWidth: 150\n    }\n  },\n  {\n    id: 'a4',\n    content: <Placeholder text='A4' />,\n    layoutConfig: {\n      width: '3/4'\n    }\n  },\n  {\n    id: 'a5',\n    content: <Placeholder text='A5' />,\n    layoutConfig: {\n      width: '1/4',\n      minWidth: 150\n    }\n  },\n  {\n    id: 'a6',\n    content: <Placeholder text='A6' />,\n    layoutConfig: {\n      width: '1/3'\n    }\n  },\n  {\n    id: 'a7',\n    content: <Placeholder text='A7' />,\n    layoutConfig: {\n      width: '2/3'\n    }\n  }\n];\n\nexport const regionBItems = [\n  {\n    id: 'b0',\n    content: <Placeholder text='B0' />,\n    layoutConfig: {\n      width: '1/4',\n      minWidth: 150\n    }\n  },\n  {\n    id: 'b1',\n    content: <Placeholder text='B1' />,\n    layoutConfig: {\n      width: '1/4',\n      minWidth: 150\n    }\n  },\n  {\n    id: 'b2',\n    content: <Placeholder text='B2' />,\n    layoutConfig: {\n      width: '1/4',\n      minWidth: 150\n    }\n  },\n  {\n    id: 'b3',\n    content: <Placeholder text='B3' />,\n    layoutConfig: {\n      width: '1/4',\n      minWidth: 150\n    }\n  },\n  {\n    id: 'b4',\n    content: <Placeholder text='B4' />,\n    layoutConfig: {\n      width: '1/2'\n    }\n  },\n  {\n    id: 'b5',\n    content: <Placeholder text='B5' />,\n    layoutConfig: {\n      width: '1/2'\n    }\n  },\n  {\n    id: 'b6',\n    content: <Placeholder text='B6' />,\n    layoutConfig: {\n      width: 'full'\n    }\n  },\n  {\n    id: 'b7',\n    content: <Placeholder text='B7' />,\n    layoutConfig: {\n      width: '1/3'\n    }\n  },\n  {\n    id: 'b8',\n    content: <Placeholder text='B8' />,\n    layoutConfig: {\n      width: '2/3'\n    }\n  },\n  {\n    id: 'b9',\n    content: <Placeholder text='B9' />,\n    layoutConfig: {\n      width: '3/4'\n    }\n  },\n  {\n    id: 'b10',\n    content: <Placeholder text='B10' />,\n    layoutConfig: {\n      width: '1/4'\n    }\n  },\n  {\n    id: 'b11',\n    content: <Placeholder text='B11' />,\n    layoutConfig: {\n      width: '1/4',\n      minWidth: 330,\n      fillAvailable: false\n    }\n  }\n];\n"]}

package/lib/work/ConfigurableLayout/ConfigurableLayout.stories.d.ts

@@ -1,10 +1,5 @@
-/// <reference types="react" />
-declare const _default: {
-    title: string;
-    parameters: {
-        layout: string;
-    };
-};
+import { Meta, Story } from '@storybook/react';
+declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
-export declare const ConfigurableLayoutInPageRegions: () => JSX.Element;
+export declare const ConfigurableLayoutInPageRegions: Story;
 //# sourceMappingURL=ConfigurableLayout.stories.d.ts.map

package/lib/work/ConfigurableLayout/ConfigurableLayout.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ConfigurableLayout.stories.d.ts","sourceRoot":"","sources":["../../../src/work/ConfigurableLayout/ConfigurableLayout.stories.tsx"],"names":[],"mappings":";;;;;;;AAYA,wBAKE;AAqLF,eAAO,MAAM,+BAA+B,mBAgC3C,CAAC"}
+{"version":3,"file":"ConfigurableLayout.stories.d.ts","sourceRoot":"","sources":["../../../src/work/ConfigurableLayout/ConfigurableLayout.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;;AAa/C,wBAMU;AAEV,eAAO,MAAM,+BAA+B,EAAE,KAgC7C,CAAC"}

package/lib/work/ConfigurableLayout/ConfigurableLayout.stories.js

@@ -1,194 +1,25 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useRef } from 'react';
-import styled, { css } from 'styled-components';
-import { Flex, NarrowWidePage } from '@pega/cosmos-react-core';
+import { NarrowWidePage } from '@pega/cosmos-react-core';
 import { ConfigurableLayout, useTrackWrappedRegions } from '@pega/cosmos-react-work';
 import { AppShellDemo as AppShell } from '../../core/AppShell/AppShell.stories';
+import { regionAItems, regionBItems } from './ConfigurableLayout.mocks';
 export default {
     title: 'Work/ConfigurableLayout',
+    component: ConfigurableLayout,
     parameters: {
         layout: 'fullscreen'
     }
 };
-const StyledPlaceholder = styled.div(({ verticalPadding }) => {
-    return css `
-    background: white;
-    border: 0.0625rem black dashed;
-    text-align: center;
-    min-height: 100%;
-    padding: ${`${verticalPadding}rem`} 0;
-  `;
-});
-const Placeholder = ({ text }) => {
-    const props = {
-        verticalPadding: Math.floor(Math.random() * (4 - 1 + 1)) + 1
-    };
-    return (_jsx(Flex, { as: StyledPlaceholder, container: { direction: 'column', justify: 'center' }, ...props, children: _jsx("p", { children: text }, void 0) }, void 0));
-};
-const regionAItems = [
-    {
-        id: 'a0',
-        content: _jsx(Placeholder, { text: 'A0' }, void 0),
-        layoutConfig: {
-            width: '1/4',
-            minWidth: 150
-        }
-    },
-    {
-        id: 'a1',
-        content: _jsx(Placeholder, { text: 'A1' }, void 0),
-        layoutConfig: {
-            width: '1/4',
-            minWidth: 150
-        }
-    },
-    {
-        id: 'a2',
-        content: _jsx(Placeholder, { text: 'A2' }, void 0),
-        layoutConfig: {
-            width: '1/4',
-            minWidth: 150
-        }
-    },
-    {
-        id: 'a3',
-        content: _jsx(Placeholder, { text: 'A3' }, void 0),
-        layoutConfig: {
-            width: '1/4',
-            minWidth: 150
-        }
-    },
-    {
-        id: 'a4',
-        content: _jsx(Placeholder, { text: 'A4' }, void 0),
-        layoutConfig: {
-            width: '3/4'
-        }
-    },
-    {
-        id: 'a5',
-        content: _jsx(Placeholder, { text: 'A5' }, void 0),
-        layoutConfig: {
-            width: '1/4',
-            minWidth: 150
-        }
-    },
-    {
-        id: 'a6',
-        content: _jsx(Placeholder, { text: 'A6' }, void 0),
-        layoutConfig: {
-            width: '1/3'
-        }
-    },
-    {
-        id: 'a7',
-        content: _jsx(Placeholder, { text: 'A7' }, void 0),
-        layoutConfig: {
-            width: '2/3'
-        }
-    }
-];
-const regionBItems = [
-    {
-        id: 'b0',
-        content: _jsx(Placeholder, { text: 'B0' }, void 0),
-        layoutConfig: {
-            width: '1/4',
-            minWidth: 150
-        }
-    },
-    {
-        id: 'b1',
-        content: _jsx(Placeholder, { text: 'B1' }, void 0),
-        layoutConfig: {
-            width: '1/4',
-            minWidth: 150
-        }
-    },
-    {
-        id: 'b2',
-        content: _jsx(Placeholder, { text: 'B2' }, void 0),
-        layoutConfig: {
-            width: '1/4',
-            minWidth: 150
-        }
-    },
-    {
-        id: 'b3',
-        content: _jsx(Placeholder, { text: 'B3' }, void 0),
-        layoutConfig: {
-            width: '1/4',
-            minWidth: 150
-        }
-    },
-    {
-        id: 'b4',
-        content: _jsx(Placeholder, { text: 'B4' }, void 0),
-        layoutConfig: {
-            width: '1/2'
-        }
-    },
-    {
-        id: 'b5',
-        content: _jsx(Placeholder, { text: 'B5' }, void 0),
-        layoutConfig: {
-            width: '1/2'
-        }
-    },
-    {
-        id: 'b6',
-        content: _jsx(Placeholder, { text: 'B6' }, void 0),
-        layoutConfig: {
-            width: 'full'
-        }
-    },
-    {
-        id: 'b7',
-        content: _jsx(Placeholder, { text: 'B7' }, void 0),
-        layoutConfig: {
-            width: '1/3'
-        }
-    },
-    {
-        id: 'b8',
-        content: _jsx(Placeholder, { text: 'B8' }, void 0),
-        layoutConfig: {
-            width: '2/3'
-        }
-    },
-    {
-        id: 'b9',
-        content: _jsx(Placeholder, { text: 'B9' }, void 0),
-        layoutConfig: {
-            width: '3/4'
-        }
-    },
-    {
-        id: 'b10',
-        content: _jsx(Placeholder, { text: 'B10' }, void 0),
-        layoutConfig: {
-            width: '1/4'
-        }
-    },
-    {
-        id: 'b11',
-        content: _jsx(Placeholder, { text: 'B11' }, void 0),
-        layoutConfig: {
-            width: '1/4',
-            minWidth: 330,
-            fillAvailable: false
-        }
-    }
-];
 export const ConfigurableLayoutInPageRegions = () => {
     const regionElArray = useRef(new Array(2).fill(null));
     const { containerRef, regionWrappedStates } = useTrackWrappedRegions(regionElArray.current);
     return (_jsx(AppShell, { main: _jsx(NarrowWidePage, { regionsRef: containerRef, a: _jsx(ConfigurableLayout, { ref: (el) => {
                     if (el)
                         regionElArray.current[0] = el;
-                }, arrangement: { size: 'narrow', hasWrapped: regionWrappedStates[0] }, items: regionAItems }, void 0), b: _jsx(ConfigurableLayout, { ref: (el) => {
+                }, arrangement: { size: 'narrow', hasWrapped: regionWrappedStates[0] }, items: regionAItems }), b: _jsx(ConfigurableLayout, { ref: (el) => {
                     if (el)
                         regionElArray.current[1] = el;
-                }, arrangement: { size: 'main', hasWrapped: regionWrappedStates[1] }, items: regionBItems }, void 0), title: 'Configurable Layout in Narrow Wide Page' }, void 0) }, void 0));
+                }, arrangement: { size: 'main', hasWrapped: regionWrappedStates[1] }, items: regionBItems }), title: 'Configurable Layout in Narrow Wide Page' }) }));
 };
 //# sourceMappingURL=ConfigurableLayout.stories.js.map

package/lib/work/ConfigurableLayout/ConfigurableLayout.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"ConfigurableLayout.stories.js","sourceRoot":"","sources":["../../../src/work/ConfigurableLayout/ConfigurableLayout.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useRef } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Flex, NarrowWidePage } from '@pega/cosmos-react-core';\nimport {\n  ConfigurableLayout,\n  ConfigurableLayoutProps,\n  useTrackWrappedRegions\n} from '@pega/cosmos-react-work';\n\nimport { AppShellDemo as AppShell } from '../../core/AppShell/AppShell.stories';\n\nexport default {\n  title: 'Work/ConfigurableLayout',\n  parameters: {\n    layout: 'fullscreen'\n  }\n};\n\nconst StyledPlaceholder = styled.div(({ verticalPadding }: { verticalPadding: number }) => {\n  return css`\n    background: white;\n    border: 0.0625rem black dashed;\n    text-align: center;\n    min-height: 100%;\n    padding: ${`${verticalPadding}rem`} 0;\n  `;\n});\n\nconst Placeholder = ({ text }: { text: string }) => {\n  const props = {\n    verticalPadding: Math.floor(Math.random() * (4 - 1 + 1)) + 1\n  };\n\n  return (\n    <Flex as={StyledPlaceholder} container={{ direction: 'column', justify: 'center' }} {...props}>\n      <p>{text}</p>\n    </Flex>\n  );\n};\n\nconst regionAItems = [\n  {\n    id: 'a0',\n    content: <Placeholder text='A0' />,\n    layoutConfig: {\n      width: '1/4',\n      minWidth: 150\n    }\n  },\n  {\n    id: 'a1',\n    content: <Placeholder text='A1' />,\n    layoutConfig: {\n      width: '1/4',\n      minWidth: 150\n    }\n  },\n  {\n    id: 'a2',\n    content: <Placeholder text='A2' />,\n    layoutConfig: {\n      width: '1/4',\n      minWidth: 150\n    }\n  },\n  {\n    id: 'a3',\n    content: <Placeholder text='A3' />,\n    layoutConfig: {\n      width: '1/4',\n      minWidth: 150\n    }\n  },\n  {\n    id: 'a4',\n    content: <Placeholder text='A4' />,\n    layoutConfig: {\n      width: '3/4'\n    }\n  },\n  {\n    id: 'a5',\n    content: <Placeholder text='A5' />,\n    layoutConfig: {\n      width: '1/4',\n      minWidth: 150\n    }\n  },\n  {\n    id: 'a6',\n    content: <Placeholder text='A6' />,\n    layoutConfig: {\n      width: '1/3'\n    }\n  },\n  {\n    id: 'a7',\n    content: <Placeholder text='A7' />,\n    layoutConfig: {\n      width: '2/3'\n    }\n  }\n];\n\nconst regionBItems = [\n  {\n    id: 'b0',\n    content: <Placeholder text='B0' />,\n    layoutConfig: {\n      width: '1/4',\n      minWidth: 150\n    }\n  },\n  {\n    id: 'b1',\n    content: <Placeholder text='B1' />,\n    layoutConfig: {\n      width: '1/4',\n      minWidth: 150\n    }\n  },\n  {\n    id: 'b2',\n    content: <Placeholder text='B2' />,\n    layoutConfig: {\n      width: '1/4',\n      minWidth: 150\n    }\n  },\n  {\n    id: 'b3',\n    content: <Placeholder text='B3' />,\n    layoutConfig: {\n      width: '1/4',\n      minWidth: 150\n    }\n  },\n  {\n    id: 'b4',\n    content: <Placeholder text='B4' />,\n    layoutConfig: {\n      width: '1/2'\n    }\n  },\n  {\n    id: 'b5',\n    content: <Placeholder text='B5' />,\n    layoutConfig: {\n      width: '1/2'\n    }\n  },\n  {\n    id: 'b6',\n    content: <Placeholder text='B6' />,\n    layoutConfig: {\n      width: 'full'\n    }\n  },\n  {\n    id: 'b7',\n    content: <Placeholder text='B7' />,\n    layoutConfig: {\n      width: '1/3'\n    }\n  },\n  {\n    id: 'b8',\n    content: <Placeholder text='B8' />,\n    layoutConfig: {\n      width: '2/3'\n    }\n  },\n  {\n    id: 'b9',\n    content: <Placeholder text='B9' />,\n    layoutConfig: {\n      width: '3/4'\n    }\n  },\n  {\n    id: 'b10',\n    content: <Placeholder text='B10' />,\n    layoutConfig: {\n      width: '1/4'\n    }\n  },\n  {\n    id: 'b11',\n    content: <Placeholder text='B11' />,\n    layoutConfig: {\n      width: '1/4',\n      minWidth: 330,\n      fillAvailable: false\n    }\n  }\n];\n\nexport const ConfigurableLayoutInPageRegions = () => {\n  const regionElArray = useRef(new Array(2).fill(null));\n  const { containerRef, regionWrappedStates } = useTrackWrappedRegions(regionElArray.current);\n\n  return (\n    <AppShell\n      main={\n        <NarrowWidePage\n          regionsRef={containerRef}\n          a={\n            <ConfigurableLayout\n              ref={(el: HTMLElement) => {\n                if (el) regionElArray.current[0] = el;\n              }}\n              arrangement={{ size: 'narrow', hasWrapped: regionWrappedStates[0] }}\n              items={regionAItems as ConfigurableLayoutProps['items']}\n            />\n          }\n          b={\n            <ConfigurableLayout\n              ref={(el: HTMLElement) => {\n                if (el) regionElArray.current[1] = el;\n              }}\n              arrangement={{ size: 'main', hasWrapped: regionWrappedStates[1] }}\n              items={regionBItems as ConfigurableLayoutProps['items']}\n            />\n          }\n          title='Configurable Layout in Narrow Wide Page'\n        />\n      }\n    />\n  );\n};\n"]}
+{"version":3,"file":"ConfigurableLayout.stories.js","sourceRoot":"","sources":["../../../src/work/ConfigurableLayout/ConfigurableLayout.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACzD,OAAO,EACL,kBAAkB,EAElB,sBAAsB,EACvB,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAE,YAAY,IAAI,QAAQ,EAAE,MAAM,sCAAsC,CAAC;AAEhF,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAExE,eAAe;IACb,KAAK,EAAE,yBAAyB;IAChC,SAAS,EAAE,kBAAkB;IAC7B,UAAU,EAAE;QACV,MAAM,EAAE,YAAY;KACrB;CACM,CAAC;AAEV,MAAM,CAAC,MAAM,+BAA+B,GAAU,GAAG,EAAE;IACzD,MAAM,aAAa,GAAG,MAAM,CAAC,IAAI,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;IACtD,MAAM,EAAE,YAAY,EAAE,mBAAmB,EAAE,GAAG,sBAAsB,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IAE5F,OAAO,CACL,KAAC,QAAQ,IACP,IAAI,EACF,KAAC,cAAc,IACb,UAAU,EAAE,YAAY,EACxB,CAAC,EACC,KAAC,kBAAkB,IACjB,GAAG,EAAE,CAAC,EAAe,EAAE,EAAE;oBACvB,IAAI,EAAE;wBAAE,aAAa,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC;gBACxC,CAAC,EACD,WAAW,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,UAAU,EAAE,mBAAmB,CAAC,CAAC,CAAC,EAAE,EACnE,KAAK,EAAE,YAAgD,GACvD,EAEJ,CAAC,EACC,KAAC,kBAAkB,IACjB,GAAG,EAAE,CAAC,EAAe,EAAE,EAAE;oBACvB,IAAI,EAAE;wBAAE,aAAa,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC;gBACxC,CAAC,EACD,WAAW,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,UAAU,EAAE,mBAAmB,CAAC,CAAC,CAAC,EAAE,EACjE,KAAK,EAAE,YAAgD,GACvD,EAEJ,KAAK,EAAC,yCAAyC,GAC/C,GAEJ,CACH,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { useRef } from 'react';\nimport { Meta, Story } from '@storybook/react';\n\nimport { NarrowWidePage } from '@pega/cosmos-react-core';\nimport {\n  ConfigurableLayout,\n  ConfigurableLayoutProps,\n  useTrackWrappedRegions\n} from '@pega/cosmos-react-work';\n\nimport { AppShellDemo as AppShell } from '../../core/AppShell/AppShell.stories';\n\nimport { regionAItems, regionBItems } from './ConfigurableLayout.mocks';\n\nexport default {\n  title: 'Work/ConfigurableLayout',\n  component: ConfigurableLayout,\n  parameters: {\n    layout: 'fullscreen'\n  }\n} as Meta;\n\nexport const ConfigurableLayoutInPageRegions: Story = () => {\n  const regionElArray = useRef(new Array(2).fill(null));\n  const { containerRef, regionWrappedStates } = useTrackWrappedRegions(regionElArray.current);\n\n  return (\n    <AppShell\n      main={\n        <NarrowWidePage\n          regionsRef={containerRef}\n          a={\n            <ConfigurableLayout\n              ref={(el: HTMLElement) => {\n                if (el) regionElArray.current[0] = el;\n              }}\n              arrangement={{ size: 'narrow', hasWrapped: regionWrappedStates[0] }}\n              items={regionAItems as ConfigurableLayoutProps['items']}\n            />\n          }\n          b={\n            <ConfigurableLayout\n              ref={(el: HTMLElement) => {\n                if (el) regionElArray.current[1] = el;\n              }}\n              arrangement={{ size: 'main', hasWrapped: regionWrappedStates[1] }}\n              items={regionBItems as ConfigurableLayoutProps['items']}\n            />\n          }\n          title='Configurable Layout in Narrow Wide Page'\n        />\n      }\n    />\n  );\n};\n"]}

package/lib/work/ConfigurableLayout/ConfigurableLayout.styles.d.ts

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

package/lib/work/ConfigurableLayout/ConfigurableLayout.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConfigurableLayout.styles.d.ts","sourceRoot":"","sources":["../../../src/work/ConfigurableLayout/ConfigurableLayout.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,iBAAiB;qBAAuD,MAAM;SAQzF,CAAC"}

package/lib/work/ConfigurableLayout/ConfigurableLayout.styles.js

@@ -0,0 +1,11 @@
+import styled, { css } from 'styled-components';
+export const StyledPlaceholder = styled.div(({ verticalPadding }) => {
+    return css `
+    background: white;
+    border: 0.0625rem black dashed;
+    text-align: center;
+    min-height: 100%;
+    padding: ${`${verticalPadding}rem`} 0;
+  `;
+});
+//# sourceMappingURL=ConfigurableLayout.styles.js.map

package/lib/work/ConfigurableLayout/ConfigurableLayout.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConfigurableLayout.styles.js","sourceRoot":"","sources":["../../../src/work/ConfigurableLayout/ConfigurableLayout.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,eAAe,EAA+B,EAAE,EAAE;IAC/F,OAAO,GAAG,CAAA;;;;;eAKG,GAAG,eAAe,KAAK;GACnC,CAAC;AACJ,CAAC,CAAC,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nexport const StyledPlaceholder = styled.div(({ verticalPadding }: { verticalPadding: number }) => {\n  return css`\n    background: white;\n    border: 0.0625rem black dashed;\n    text-align: center;\n    min-height: 100%;\n    padding: ${`${verticalPadding}rem`} 0;\n  `;\n});\n"]}

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

@@ -4,6 +4,9 @@ declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
 interface ConfirmationStoryProps {
     title: ConfirmationProps['title'];
+    showDetails?: boolean;
+    showWhatsNext?: boolean;
+    showTasks?: boolean;
 }
 export declare const ConfirmationDemo: Story<ConfirmationStoryProps>;
 //# sourceMappingURL=Confirmation.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Confirmation.stories.d.ts","sourceRoot":"","sources":["../../../src/work/Confirmation/Confirmation.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAAgB,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;;AAO1E,wBAGU;AAEV,UAAU,sBAAsB;IAC9B,KAAK,EAAE,iBAAiB,CAAC,OAAO,CAAC,CAAC;CACnC;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,sBAAsB,CAuB1D,CAAC"}
+{"version":3,"file":"Confirmation.stories.d.ts","sourceRoot":"","sources":["../../../src/work/Confirmation/Confirmation.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAAgB,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;;AAO1E,wBAGU;AAEV,UAAU,sBAAsB;IAC9B,KAAK,EAAE,iBAAiB,CAAC,OAAO,CAAC,CAAC;IAClC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,sBAAsB,CAkC1D,CAAC"}

package/lib/work/Confirmation/Confirmation.stories.js

@@ -3,7 +3,7 @@ import { useState } from 'react';
 import { Button, Flex } from '@pega/cosmos-react-core';
 import { Confirmation } from '@pega/cosmos-react-work';
 import { FieldValueListDemo } from '../../core/FieldValueList/FieldValueList.stories';
-import { TaskListDemo } from '../Tasks/TaskList.stories';
+import { TasksDemo } from '../Tasks/Tasks.stories';
 import { StyledFlex } from './Confirmation.styles';
 export default {
     title: 'Work/Confirmation',
@@ -11,16 +11,20 @@ export default {
 };
 export const ConfirmationDemo = (args) => {
     const [showConfirmation, setShowConfirmation] = useState(true);
-    return (_jsxs(Flex, { as: StyledFlex, container: { justify: 'center', alignItems: 'center' }, children: [showConfirmation && (_jsx(Confirmation, { title: args.title, details: _jsx(FieldValueListDemo, { name: 'Project', value: 'Pega Cosmos', fields: [] }, void 0), whatsNext: [
-                    'Send references',
-                    'Collect information on the case',
-                    'Prepare a demonstration'
-                ], tasks: _jsx(TaskListDemo, {}, void 0), onClose: () => setShowConfirmation(false) }, void 0)), !showConfirmation && (_jsx(Button, { onClick: () => setShowConfirmation(true), children: "Show confirmation" }, void 0))] }, void 0));
+    return (_jsxs(Flex, { as: StyledFlex, container: { justify: 'center', alignItems: 'center' }, children: [showConfirmation && (_jsx(Confirmation, { title: args.title, details: args.showDetails ? _jsx(FieldValueListDemo, { name: 'Project', value: 'Pega Cosmos' }) : undefined, whatsNext: args.showWhatsNext
+                    ? ['Send references', 'Collect information on the case', 'Prepare a demonstration']
+                    : undefined, tasks: args.showTasks ? (_jsx(TasksDemo, { showHeaderVisual: false, showHeaderSecondary: false, count: 3, openableTasks: false })) : undefined, onClose: () => setShowConfirmation(false) })), !showConfirmation && (_jsx(Button, { onClick: () => setShowConfirmation(true), children: "Show confirmation" }))] }));
 };
 ConfirmationDemo.args = {
-    title: 'US-1337 confirmation'
+    title: 'US-1337 confirmation',
+    showDetails: true,
+    showWhatsNext: true,
+    showTasks: true
 };
 ConfirmationDemo.argTypes = {
-    title: { control: { type: 'text' } }
+    title: { control: { type: 'text' } },
+    showDetails: { control: { type: 'boolean' } },
+    showWhatsNext: { control: { type: 'boolean' } },
+    showTasks: { control: { type: 'boolean' } }
 };
 //# sourceMappingURL=Confirmation.stories.js.map

package/lib/work/Confirmation/Confirmation.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Confirmation.stories.js","sourceRoot":"","sources":["../../../src/work/Confirmation/Confirmation.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAGjC,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AACvD,OAAO,EAAE,YAAY,EAAqB,MAAM,yBAAyB,CAAC;AAE1E,OAAO,EAAE,kBAAkB,EAAE,MAAM,kDAAkD,CAAC;AACtF,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAEzD,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD,eAAe;IACb,KAAK,EAAE,mBAAmB;IAC1B,SAAS,EAAE,YAAY;CAChB,CAAC;AAMV,MAAM,CAAC,MAAM,gBAAgB,GAAkC,CAAC,IAA4B,EAAE,EAAE;IAC9F,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IAE/D,OAAO,CACL,MAAC,IAAI,IAAC,EAAE,EAAE,UAAU,EAAE,SAAS,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,aACzE,gBAAgB,IAAI,CACnB,KAAC,YAAY,IACX,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,KAAC,kBAAkB,IAAC,IAAI,EAAC,SAAS,EAAC,KAAK,EAAC,aAAa,EAAC,MAAM,EAAE,EAAE,WAAI,EAC9E,SAAS,EAAE;oBACT,iBAAiB;oBACjB,iCAAiC;oBACjC,yBAAyB;iBAC1B,EACD,KAAK,EAAE,KAAC,YAAY,aAAG,EACvB,OAAO,EAAE,GAAG,EAAE,CAAC,mBAAmB,CAAC,KAAK,CAAC,WACzC,CACH,EACA,CAAC,gBAAgB,IAAI,CACpB,KAAC,MAAM,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,mBAAmB,CAAC,IAAI,CAAC,0CAA4B,CAC7E,YACI,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,gBAAgB,CAAC,IAAI,GAAG;IACtB,KAAK,EAAE,sBAAsB;CAC9B,CAAC;AAEF,gBAAgB,CAAC,QAAQ,GAAG;IAC1B,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;CACrC,CAAC","sourcesContent":["import { useState } from 'react';\nimport { Meta, Story } from '@storybook/react';\n\nimport { Button, Flex } from '@pega/cosmos-react-core';\nimport { Confirmation, ConfirmationProps } from '@pega/cosmos-react-work';\n\nimport { FieldValueListDemo } from '../../core/FieldValueList/FieldValueList.stories';\nimport { TaskListDemo } from '../Tasks/TaskList.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}\n\nexport const ConfirmationDemo: Story<ConfirmationStoryProps> = (args: ConfirmationStoryProps) => {\n  const [showConfirmation, setShowConfirmation] = useState(true);\n\n  return (\n    <Flex as={StyledFlex} container={{ justify: 'center', alignItems: 'center' }}>\n      {showConfirmation && (\n        <Confirmation\n          title={args.title}\n          details={<FieldValueListDemo name='Project' value='Pega Cosmos' fields={[]} />}\n          whatsNext={[\n            'Send references',\n            'Collect information on the case',\n            'Prepare a demonstration'\n          ]}\n          tasks={<TaskListDemo />}\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};\n\nConfirmationDemo.argTypes = {\n  title: { control: { type: 'text' } }\n};\n"]}
+{"version":3,"file":"Confirmation.stories.js","sourceRoot":"","sources":["../../../src/work/Confirmation/Confirmation.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAGjC,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AACvD,OAAO,EAAE,YAAY,EAAqB,MAAM,yBAAyB,CAAC;AAE1E,OAAO,EAAE,kBAAkB,EAAE,MAAM,kDAAkD,CAAC;AACtF,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAEnD,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD,eAAe;IACb,KAAK,EAAE,mBAAmB;IAC1B,SAAS,EAAE,YAAY;CAChB,CAAC;AASV,MAAM,CAAC,MAAM,gBAAgB,GAAkC,CAAC,IAA4B,EAAE,EAAE;IAC9F,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IAE/D,OAAO,CACL,MAAC,IAAI,IAAC,EAAE,EAAE,UAAU,EAAE,SAAS,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,aACzE,gBAAgB,IAAI,CACnB,KAAC,YAAY,IACX,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EACL,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,KAAC,kBAAkB,IAAC,IAAI,EAAC,SAAS,EAAC,KAAK,EAAC,aAAa,GAAG,CAAC,CAAC,CAAC,SAAS,EAE1F,SAAS,EACP,IAAI,CAAC,aAAa;oBAChB,CAAC,CAAC,CAAC,iBAAiB,EAAE,iCAAiC,EAAE,yBAAyB,CAAC;oBACnF,CAAC,CAAC,SAAS,EAEf,KAAK,EACH,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CACf,KAAC,SAAS,IACR,gBAAgB,EAAE,KAAK,EACvB,mBAAmB,EAAE,KAAK,EAC1B,KAAK,EAAE,CAAC,EACR,aAAa,EAAE,KAAK,GACpB,CACH,CAAC,CAAC,CAAC,SAAS,EAEf,OAAO,EAAE,GAAG,EAAE,CAAC,mBAAmB,CAAC,KAAK,CAAC,GACzC,CACH,EACA,CAAC,gBAAgB,IAAI,CACpB,KAAC,MAAM,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,mBAAmB,CAAC,IAAI,CAAC,kCAA4B,CAC7E,IACI,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,gBAAgB,CAAC,IAAI,GAAG;IACtB,KAAK,EAAE,sBAAsB;IAC7B,WAAW,EAAE,IAAI;IACjB,aAAa,EAAE,IAAI;IACnB,SAAS,EAAE,IAAI;CAChB,CAAC;AAEF,gBAAgB,CAAC,QAAQ,GAAG;IAC1B,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACpC,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC7C,aAAa,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC/C,SAAS,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;CAC5C,CAAC","sourcesContent":["import { useState } from 'react';\nimport { Meta, Story } from '@storybook/react';\n\nimport { Button, Flex } from '@pega/cosmos-react-core';\nimport { Confirmation, ConfirmationProps } from '@pega/cosmos-react-work';\n\nimport { FieldValueListDemo } from '../../core/FieldValueList/FieldValueList.stories';\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  showWhatsNext?: boolean;\n  showTasks?: boolean;\n}\n\nexport const ConfirmationDemo: Story<ConfirmationStoryProps> = (args: ConfirmationStoryProps) => {\n  const [showConfirmation, setShowConfirmation] = useState(true);\n\n  return (\n    <Flex as={StyledFlex} container={{ justify: 'center', alignItems: 'center' }}>\n      {showConfirmation && (\n        <Confirmation\n          title={args.title}\n          details={\n            args.showDetails ? <FieldValueListDemo name='Project' value='Pega Cosmos' /> : undefined\n          }\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                showHeaderVisual={false}\n                showHeaderSecondary={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  showWhatsNext: true,\n  showTasks: true\n};\n\nConfirmationDemo.argTypes = {\n  title: { control: { type: 'text' } },\n  showDetails: { control: { type: 'boolean' } },\n  showWhatsNext: { control: { type: 'boolean' } },\n  showTasks: { control: { type: 'boolean' } }\n};\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"Details.stories.d.ts","sourceRoot":"","sources":["../../../src/work/Details/Details.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;;AAgB/C,wBAGU;AAEV,eAAO,MAAM,WAAW,EAAE,KAuFzB,CAAC"}
+{"version":3,"file":"Details.stories.d.ts","sourceRoot":"","sources":["../../../src/work/Details/Details.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;;AAK/C,wBAMU;AAEV,eAAO,MAAM,WAAW,EAAE,KA4DzB,CAAC"}

package/lib/work/Details/Details.stories.js

@@ -1,65 +1,20 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { CurrencyDisplay, DateTimeDisplay, URLDisplay, BooleanDisplay, FieldGroup, FieldValueList, LocationDisplay, MapsContext, PhoneDisplay, EmailDisplay } from '@pega/cosmos-react-core';
-import { Details } from '@pega/cosmos-react-work';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FieldValueItem, useBreakpoint } from '@pega/cosmos-react-core';
+import { Details, DetailsContext } from '@pega/cosmos-react-work';
 export default {
     title: 'Work/Details',
-    component: Details
+    component: Details,
+    parameters: {
+        layout: 'centered'
+    }
 };
 export const DetailsDemo = () => {
-    return (_jsx(MapsContext.Provider, { value: { name: 'google' }, children: _jsx(Details, { highlightedFields: [
-                {
-                    id: '1',
-                    name: 'Statement balance',
-                    value: _jsx(CurrencyDisplay, { value: '1289.00', currencyISOCode: 'USD' }, void 0)
-                },
-                {
-                    id: '2',
-                    name: 'Total balance',
-                    value: _jsx(CurrencyDisplay, { value: '35667.00', currencyISOCode: 'USD' }, void 0)
-                },
-                {
-                    id: '3',
-                    name: 'Available credit',
-                    value: _jsx(CurrencyDisplay, { value: '5813.00', currencyISOCode: 'USD' }, void 0)
-                },
-                {
-                    id: '4',
-                    name: 'Payment due date',
-                    value: _jsx(DateTimeDisplay, { value: Date.now(), variant: 'datetime', format: 'long' }, void 0)
-                },
-                {
-                    id: '5',
-                    name: 'Available benefits',
-                    value: (_jsx(URLDisplay, { value: 'https://www.google.com/', displayText: 'View benefits', variant: 'link' }, void 0))
-                },
-                {
-                    id: '6',
-                    name: 'Platinum member',
-                    value: _jsx(BooleanDisplay, { value: true }, void 0)
-                }
-            ], regions: [
-                _jsx(FieldGroup, { name: 'Personal', children: _jsx(FieldValueList, { fields: [
-                            {
-                                name: 'Home address',
-                                value: (_jsx(LocationDisplay, { value: '12 Higgins Bottom Way, Carnell, NH, 02133', variant: 'text' }, void 0))
-                            },
-                            { name: 'Primary phone', value: _jsx(PhoneDisplay, { value: '+15553749637' }, void 0) },
-                            {
-                                name: 'Primary email',
-                                value: _jsx(EmailDisplay, { value: 'joe.smith@example.com' }, void 0)
-                            }
-                        ] }, void 0) }, void 0),
-                _jsx(FieldGroup, { name: 'Work', children: _jsx(FieldValueList, { fields: [
-                            {
-                                name: 'Work address',
-                                value: (_jsx(LocationDisplay, { value: '1 Monolith Business Parkway, Milltown, NH, 02333', variant: 'text' }, void 0))
-                            },
-                            { name: 'Work phone', value: _jsx(PhoneDisplay, { value: '+15553742200' }, void 0) },
-                            {
-                                name: 'Work email',
-                                value: _jsx(EmailDisplay, { value: 'jane.smith@example.com' }, void 0)
-                            }
-                        ] }, void 0) }, void 0)
-            ] }, void 0) }, void 0));
+    const isNotMobile = useBreakpoint('sm');
+    return (_jsx(DetailsContext.Provider, { value: { mobileView: !isNotMobile }, children: _jsxs(Details, { name: 'Outer list', highlightedData: [
+                _jsx(FieldValueItem, { variant: 'stacked', name: 'Age', value: '56' }),
+                _jsx(FieldValueItem, { variant: 'stacked', name: 'Location', value: 'Berlin' }),
+                _jsx(FieldValueItem, { variant: 'stacked', name: 'Make', value: 'Ford' }),
+                _jsx(FieldValueItem, { variant: 'stacked', name: 'Model', value: 'F150' })
+            ], children: [_jsxs(Details, { name: 'Nested as flex', nested: true, asFlex: true, children: [_jsx(Details, { nested: true, children: _jsxs(Details, { name: 'Purchase details', nested: true, children: [_jsx(FieldValueItem, { name: 'Make', value: 'Ford' }), _jsx(FieldValueItem, { name: 'Model', value: 'F150' })] }) }), _jsxs(Details, { nested: true, children: [_jsx(FieldValueItem, { name: 'Mileage', value: '78,500' }), _jsx(FieldValueItem, { name: 'Trim', value: 'Lariat' })] })] }), _jsx(FieldValueItem, { name: 'Description', variant: 'stacked', value: _jsx("p", { children: "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." }) }), _jsxs(Details, { name: 'Nested list', nested: true, children: [_jsx(FieldValueItem, { name: 'First name', value: 'Howard' }), _jsx(FieldValueItem, { name: 'Last name', value: 'Kennedy' }), _jsxs(Details, { name: 'Deeper list', nested: true, children: [_jsx(FieldValueItem, { name: 'Color', value: 'red' }), _jsx(FieldValueItem, { name: 'Year', value: '2017' })] })] }), _jsx(FieldValueItem, { name: 'Age', value: '56' }), _jsx(FieldValueItem, { name: 'Location', value: 'Berlin' })] }) }));
 };
 //# sourceMappingURL=Details.stories.js.map