@pega/cosmos-react-demos 2.0.0 → 2.1.3

package/lib/core/Grid/GridContainer.stories.jsx

@@ -1,161 +0,0 @@
-import { Grid, Text } from '@pega/cosmos-react-core';
-import { StyledContainer, StyledItem } from './Grid.styles';
-export default {
-    title: 'Core/Grid/Container',
-    component: Grid,
-    parameters: {
-        layout: 'fullscreen'
-    }
-};
-export const ColumnsAndRows = () => {
-    return (<Grid container={{
-            cols: '7rem [line1] 1fr [line2] 3fr [line3]',
-            rows: 'repeat(3, 3rem) auto',
-            pad: 2
-        }} as={StyledContainer} height={20}>
-      {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(index => (<StyledItem key={`colRows-${index}`}>
-          <Text>Item {index}</Text>
-        </StyledItem>))}
-    </Grid>);
-};
-export const Areas = () => {
-    return (<Grid container={{
-            cols: '5rem 1fr 3fr',
-            rows: 'repeat(3, 3rem) auto',
-            areas: '"sidebar header header" "sidebar . main" "sidebar . main" "sidebar footer footer"',
-            pad: 2
-        }} as={StyledContainer} height={20}>
-      <Grid item={{ area: 'header' }} as={StyledItem}>
-        <Text>Header</Text>
-      </Grid>
-      <Grid item={{ area: 'sidebar' }} as={StyledItem}>
-        <Text>Side</Text>
-      </Grid>
-      <Grid item={{ area: 'main' }} as={StyledItem}>
-        <Text>Main</Text>
-      </Grid>
-      <Grid item={{ area: 'footer' }} as={StyledItem}>
-        <Text>Footer</Text>
-      </Grid>
-    </Grid>);
-};
-export const Template = () => {
-    const rowsAndAreas = '"sidebar header header" 3rem "sidebar . main" 3rem "sidebar . main" 3rem "sidebar footer footer" auto';
-    const columns = '5rem 1fr 3fr';
-    return (<Grid container={{ template: `${rowsAndAreas} / ${columns}`, pad: 2 }} as={StyledContainer} height={20}>
-      <Grid item={{ area: 'header' }} as={StyledItem}>
-        <Text>Header</Text>
-      </Grid>
-      <Grid item={{ area: 'sidebar' }} as={StyledItem}>
-        <Text>Side</Text>
-      </Grid>
-      <Grid item={{ area: 'main' }} as={StyledItem}>
-        <Text>Main</Text>
-      </Grid>
-      <Grid item={{ area: 'footer' }} as={StyledItem}>
-        <Text>Footer</Text>
-      </Grid>
-    </Grid>);
-};
-export const GapAndPadding = (args) => {
-    return (<Grid container={{
-            cols: '7rem 1fr 3fr',
-            colGap: args.colGap,
-            rows: 'repeat(3, 3rem) auto',
-            rowGap: args.rowGap,
-            pad: args.pad
-        }} as={StyledContainer} height={20}>
-      {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(index => (<StyledItem key={`colRowGap-${index}`}>
-          <Text>Item {index}</Text>
-        </StyledItem>))}
-    </Grid>);
-};
-GapAndPadding.args = {
-    pad: 1,
-    colGap: 1,
-    rowGap: 1
-};
-GapAndPadding.argTypes = {
-    pad: { control: { type: 'number' } },
-    colGap: { control: { type: 'number' } },
-    rowGap: { control: { type: 'number' } }
-};
-export const JustifyItems = (args) => {
-    return (<Grid container={{
-            cols: '7rem 1fr 3fr',
-            rows: 'repeat(3, 3rem) auto',
-            justifyItems: args.justifyItems,
-            pad: 2
-        }} as={StyledContainer} height={20}>
-      {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(index => (<StyledItem key={`justifyItems-${index}`}>
-          <Text>Item {index}</Text>
-        </StyledItem>))}
-    </Grid>);
-};
-JustifyItems.args = {
-    justifyItems: 'stretch'
-};
-JustifyItems.argTypes = {
-    justifyItems: { options: ['stretch', 'start', 'center', 'end'], control: { type: 'select' } }
-};
-export const JustifyContent = (args) => {
-    return (<Grid container={{
-            cols: 'repeat(3, 7rem)',
-            rows: 'repeat(4, 3rem)',
-            justifyContent: args.justifyContent,
-            pad: 2
-        }} as={StyledContainer}>
-      {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(index => (<StyledItem key={`justifyContent-${index}`}>
-          <Text>Item {index}</Text>
-        </StyledItem>))}
-    </Grid>);
-};
-JustifyContent.args = {
-    justifyContent: 'start'
-};
-JustifyContent.argTypes = {
-    justifyContent: {
-        options: ['start', 'end', 'center', 'around', 'between', 'evenly'],
-        control: { type: 'select' }
-    }
-};
-export const AlignItems = (args) => {
-    return (<Grid container={{
-            cols: '7rem 1fr 3fr',
-            rows: 'repeat(3, 5rem) auto',
-            alignItems: args.alignItems,
-            pad: 2
-        }} as={StyledContainer} height={20}>
-      {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(index => (<StyledItem key={`alignItems-${index}`}>
-          <Text>Item {index}</Text>
-        </StyledItem>))}
-    </Grid>);
-};
-AlignItems.args = {
-    alignItems: 'stretch'
-};
-AlignItems.argTypes = {
-    alignItems: { options: ['stretch', 'start', 'center', 'end'], control: { type: 'select' } }
-};
-export const AlignContent = (args) => {
-    return (<Grid container={{
-            cols: 'repeat(3, 7rem)',
-            rows: 'repeat(4, 3rem)',
-            alignContent: args.alignContent,
-            pad: 2
-        }} as={StyledContainer} height={30} fitContent>
-      {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(index => (<StyledItem key={`alignContent-${index}`}>
-          <Text>Item {index}</Text>
-        </StyledItem>))}
-    </Grid>);
-};
-AlignContent.args = {
-    alignContent: 'start'
-};
-AlignContent.argTypes = {
-    alignContent: {
-        options: ['start', 'end', 'center', 'around', 'between', 'evenly'],
-        control: { type: 'select' }
-    }
-};
-//# sourceMappingURL=GridContainer.stories.jsx.map

package/lib/core/Grid/GridContainer.stories.jsx.map

@@ -1 +0,0 @@
-{"version":3,"file":"GridContainer.stories.jsx","sourceRoot":"","sources":["../../../src/core/Grid/GridContainer.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { Grid, GridContainerProps, Text } from '@pega/cosmos-react-core';\n\nimport { StyledContainer, StyledItem } from './Grid.styles';\n\nexport default {\n  title: 'Core/Grid/Container',\n  component: Grid,\n  parameters: {\n    layout: 'fullscreen'\n  }\n} as Meta;\n\ninterface GridStoryProps {\n  colGap?: GridContainerProps['colGap'];\n  rowGap?: GridContainerProps['rowGap'];\n  pad?: GridContainerProps['pad'];\n  justifyItems?: GridContainerProps['justifyItems'];\n  justifyContent?: GridContainerProps['justifyContent'];\n  alignItems?: GridContainerProps['alignItems'];\n  alignContent?: GridContainerProps['alignContent'];\n}\n\nexport const ColumnsAndRows = () => {\n  return (\n    <Grid\n      container={{\n        cols: '7rem [line1] 1fr [line2] 3fr [line3]',\n        rows: 'repeat(3, 3rem) auto',\n        pad: 2\n      }}\n      as={StyledContainer}\n      height={20}\n    >\n      {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(index => (\n        <StyledItem key={`colRows-${index}`}>\n          <Text>Item {index}</Text>\n        </StyledItem>\n      ))}\n    </Grid>\n  );\n};\n\nexport const Areas = () => {\n  return (\n    <Grid\n      container={{\n        cols: '5rem 1fr 3fr',\n        rows: 'repeat(3, 3rem) auto',\n        areas: '\"sidebar header header\" \"sidebar . main\" \"sidebar . main\" \"sidebar footer footer\"',\n        pad: 2\n      }}\n      as={StyledContainer}\n      height={20}\n    >\n      <Grid item={{ area: 'header' }} as={StyledItem}>\n        <Text>Header</Text>\n      </Grid>\n      <Grid item={{ area: 'sidebar' }} as={StyledItem}>\n        <Text>Side</Text>\n      </Grid>\n      <Grid item={{ area: 'main' }} as={StyledItem}>\n        <Text>Main</Text>\n      </Grid>\n      <Grid item={{ area: 'footer' }} as={StyledItem}>\n        <Text>Footer</Text>\n      </Grid>\n    </Grid>\n  );\n};\n\nexport const Template = () => {\n  const rowsAndAreas =\n    '\"sidebar header header\" 3rem \"sidebar . main\" 3rem \"sidebar . main\" 3rem \"sidebar footer footer\" auto';\n  const columns = '5rem 1fr 3fr';\n\n  return (\n    <Grid\n      container={{ template: `${rowsAndAreas} / ${columns}`, pad: 2 }}\n      as={StyledContainer}\n      height={20}\n    >\n      <Grid item={{ area: 'header' }} as={StyledItem}>\n        <Text>Header</Text>\n      </Grid>\n      <Grid item={{ area: 'sidebar' }} as={StyledItem}>\n        <Text>Side</Text>\n      </Grid>\n      <Grid item={{ area: 'main' }} as={StyledItem}>\n        <Text>Main</Text>\n      </Grid>\n      <Grid item={{ area: 'footer' }} as={StyledItem}>\n        <Text>Footer</Text>\n      </Grid>\n    </Grid>\n  );\n};\n\nexport const GapAndPadding: Story<GridStoryProps> = (args: GridStoryProps) => {\n  return (\n    <Grid\n      container={{\n        cols: '7rem 1fr 3fr',\n        colGap: args.colGap,\n        rows: 'repeat(3, 3rem) auto',\n        rowGap: args.rowGap,\n        pad: args.pad\n      }}\n      as={StyledContainer}\n      height={20}\n    >\n      {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(index => (\n        <StyledItem key={`colRowGap-${index}`}>\n          <Text>Item {index}</Text>\n        </StyledItem>\n      ))}\n    </Grid>\n  );\n};\n\nGapAndPadding.args = {\n  pad: 1,\n  colGap: 1,\n  rowGap: 1\n};\n\nGapAndPadding.argTypes = {\n  pad: { control: { type: 'number' } },\n  colGap: { control: { type: 'number' } },\n  rowGap: { control: { type: 'number' } }\n};\n\nexport const JustifyItems: Story<GridStoryProps> = (args: GridStoryProps) => {\n  return (\n    <Grid\n      container={{\n        cols: '7rem 1fr 3fr',\n        rows: 'repeat(3, 3rem) auto',\n        justifyItems: args.justifyItems,\n        pad: 2\n      }}\n      as={StyledContainer}\n      height={20}\n    >\n      {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(index => (\n        <StyledItem key={`justifyItems-${index}`}>\n          <Text>Item {index}</Text>\n        </StyledItem>\n      ))}\n    </Grid>\n  );\n};\n\nJustifyItems.args = {\n  justifyItems: 'stretch'\n};\n\nJustifyItems.argTypes = {\n  justifyItems: { options: ['stretch', 'start', 'center', 'end'], control: { type: 'select' } }\n};\n\nexport const JustifyContent: Story<GridStoryProps> = (args: GridStoryProps) => {\n  return (\n    <Grid\n      container={{\n        cols: 'repeat(3, 7rem)',\n        rows: 'repeat(4, 3rem)',\n        justifyContent: args.justifyContent,\n        pad: 2\n      }}\n      as={StyledContainer}\n    >\n      {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(index => (\n        <StyledItem key={`justifyContent-${index}`}>\n          <Text>Item {index}</Text>\n        </StyledItem>\n      ))}\n    </Grid>\n  );\n};\n\nJustifyContent.args = {\n  justifyContent: 'start'\n};\n\nJustifyContent.argTypes = {\n  justifyContent: {\n    options: ['start', 'end', 'center', 'around', 'between', 'evenly'],\n    control: { type: 'select' }\n  }\n};\n\nexport const AlignItems: Story<GridStoryProps> = (args: GridStoryProps) => {\n  return (\n    <Grid\n      container={{\n        cols: '7rem 1fr 3fr',\n        rows: 'repeat(3, 5rem) auto',\n        alignItems: args.alignItems,\n        pad: 2\n      }}\n      as={StyledContainer}\n      height={20}\n    >\n      {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(index => (\n        <StyledItem key={`alignItems-${index}`}>\n          <Text>Item {index}</Text>\n        </StyledItem>\n      ))}\n    </Grid>\n  );\n};\n\nAlignItems.args = {\n  alignItems: 'stretch'\n};\n\nAlignItems.argTypes = {\n  alignItems: { options: ['stretch', 'start', 'center', 'end'], control: { type: 'select' } }\n};\n\nexport const AlignContent: Story<GridStoryProps> = (args: GridStoryProps) => {\n  return (\n    <Grid\n      container={{\n        cols: 'repeat(3, 7rem)',\n        rows: 'repeat(4, 3rem)',\n        alignContent: args.alignContent,\n        pad: 2\n      }}\n      as={StyledContainer}\n      height={30}\n      fitContent\n    >\n      {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(index => (\n        <StyledItem key={`alignContent-${index}`}>\n          <Text>Item {index}</Text>\n        </StyledItem>\n      ))}\n    </Grid>\n  );\n};\n\nAlignContent.args = {\n  alignContent: 'start'\n};\n\nAlignContent.argTypes = {\n  alignContent: {\n    options: ['start', 'end', 'center', 'around', 'between', 'evenly'],\n    control: { type: 'select' }\n  }\n};\n"]}

package/lib/core/Grid/GridItem.stories.jsx

@@ -1,74 +0,0 @@
-import { Grid, Text } from '@pega/cosmos-react-core';
-import { StyledContainer, StyledItem } from './Grid.styles';
-export default {
-    title: 'Core/Grid/Item',
-    component: Grid,
-    parameters: {
-        layout: 'fullscreen'
-    }
-};
-export const StartAndEnd = () => {
-    return (<Grid container={{
-            cols: '[line0] 7rem [line1] 1fr [col2-end col3-start] 3fr [line3]',
-            rows: 'repeat(3, 3rem) auto',
-            pad: 2
-        }} as={StyledContainer} height={20}>
-      <Grid item={{ colStart: 'line0', colEnd: 'col3-start' }} as={StyledItem}>
-        <Text>Item 1</Text>
-      </Grid>
-      <StyledItem>
-        <Text>Item 2</Text>
-      </StyledItem>
-      <StyledItem>
-        <Text>Item 3</Text>
-      </StyledItem>
-      <Grid item={{ colStart: 'line1', colEnd: 'line3' }} as={StyledItem}>
-        <Text>Item 4</Text>
-      </Grid>
-      <Grid item={{ rowStart: '3', rowEnd: '5' }} as={StyledItem}>
-        <Text>Item 5</Text>
-      </Grid>
-      <Grid item={{ colStart: '2', colEnd: 'span line3', rowStart: '3', rowEnd: 'span 2' }} as={StyledItem}>
-        <Text>Item 6</Text>
-      </Grid>
-    </Grid>);
-};
-export const JustifySelf = (args) => {
-    return (<Grid container={{ cols: '7rem 1fr 3fr', pad: 2 }} as={StyledContainer}>
-      <StyledItem>
-        <Text>Item 1</Text>
-      </StyledItem>
-      <Grid item={{ justifySelf: args.justifySelf }} as={StyledItem} editable>
-        <Text>Item 2</Text>
-      </Grid>
-      <StyledItem>
-        <Text>Item 3</Text>
-      </StyledItem>
-    </Grid>);
-};
-JustifySelf.args = {
-    justifySelf: 'stretch'
-};
-JustifySelf.argTypes = {
-    justifySelf: { options: ['stretch', 'start', 'center', 'end'], control: { type: 'select' } }
-};
-export const AlignSelf = (args) => {
-    return (<Grid container={{ cols: '7rem 1fr 3fr', pad: 2 }} as={StyledContainer} height={10} fitContent>
-      <StyledItem>
-        <Text>Item 1</Text>
-      </StyledItem>
-      <Grid item={{ alignSelf: args.alignSelf }} as={StyledItem} editable>
-        <Text>Item 2</Text>
-      </Grid>
-      <StyledItem>
-        <Text>Item 3</Text>
-      </StyledItem>
-    </Grid>);
-};
-AlignSelf.args = {
-    alignSelf: 'stretch'
-};
-AlignSelf.argTypes = {
-    alignSelf: { options: ['stretch', 'start', 'center', 'end'], control: { type: 'select' } }
-};
-//# sourceMappingURL=GridItem.stories.jsx.map

package/lib/core/Grid/GridItem.stories.jsx.map

@@ -1 +0,0 @@
-{"version":3,"file":"GridItem.stories.jsx","sourceRoot":"","sources":["../../../src/core/Grid/GridItem.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { Grid, GridItemProps, Text } from '@pega/cosmos-react-core';\n\nimport { StyledContainer, StyledItem } from './Grid.styles';\n\nexport default {\n  title: 'Core/Grid/Item',\n  component: Grid,\n  parameters: {\n    layout: 'fullscreen'\n  }\n} as Meta;\n\ninterface GridStoryProps {\n  justifySelf?: GridItemProps['justifySelf'];\n  alignSelf?: GridItemProps['alignSelf'];\n}\n\nexport const StartAndEnd = () => {\n  return (\n    <Grid\n      container={{\n        cols: '[line0] 7rem [line1] 1fr [col2-end col3-start] 3fr [line3]',\n        rows: 'repeat(3, 3rem) auto',\n        pad: 2\n      }}\n      as={StyledContainer}\n      height={20}\n    >\n      <Grid item={{ colStart: 'line0', colEnd: 'col3-start' }} as={StyledItem}>\n        <Text>Item 1</Text>\n      </Grid>\n      <StyledItem>\n        <Text>Item 2</Text>\n      </StyledItem>\n      <StyledItem>\n        <Text>Item 3</Text>\n      </StyledItem>\n      <Grid item={{ colStart: 'line1', colEnd: 'line3' }} as={StyledItem}>\n        <Text>Item 4</Text>\n      </Grid>\n      <Grid item={{ rowStart: '3', rowEnd: '5' }} as={StyledItem}>\n        <Text>Item 5</Text>\n      </Grid>\n      <Grid\n        item={{ colStart: '2', colEnd: 'span line3', rowStart: '3', rowEnd: 'span 2' }}\n        as={StyledItem}\n      >\n        <Text>Item 6</Text>\n      </Grid>\n    </Grid>\n  );\n};\n\nexport const JustifySelf: Story<GridStoryProps> = (args: GridStoryProps) => {\n  return (\n    <Grid container={{ cols: '7rem 1fr 3fr', pad: 2 }} as={StyledContainer}>\n      <StyledItem>\n        <Text>Item 1</Text>\n      </StyledItem>\n      <Grid item={{ justifySelf: args.justifySelf }} as={StyledItem} editable>\n        <Text>Item 2</Text>\n      </Grid>\n      <StyledItem>\n        <Text>Item 3</Text>\n      </StyledItem>\n    </Grid>\n  );\n};\n\nJustifySelf.args = {\n  justifySelf: 'stretch'\n};\n\nJustifySelf.argTypes = {\n  justifySelf: { options: ['stretch', 'start', 'center', 'end'], control: { type: 'select' } }\n};\n\nexport const AlignSelf: Story<GridStoryProps> = (args: GridStoryProps) => {\n  return (\n    <Grid container={{ cols: '7rem 1fr 3fr', pad: 2 }} as={StyledContainer} height={10} fitContent>\n      <StyledItem>\n        <Text>Item 1</Text>\n      </StyledItem>\n      <Grid item={{ alignSelf: args.alignSelf }} as={StyledItem} editable>\n        <Text>Item 2</Text>\n      </Grid>\n      <StyledItem>\n        <Text>Item 3</Text>\n      </StyledItem>\n    </Grid>\n  );\n};\n\nAlignSelf.args = {\n  alignSelf: 'stretch'\n};\n\nAlignSelf.argTypes = {\n  alignSelf: { options: ['stretch', 'start', 'center', 'end'], control: { type: 'select' } }\n};\n"]}

package/lib/core/Icon/Icon.stories.jsx

@@ -1,84 +0,0 @@
-import { useMemo, useState, useCallback, useRef } from 'react';
-import styled, { css } from 'styled-components';
-import { defaultThemeProp, EmptyState, StyledEmptyState, Flex, Icon, icons, registerIcon, Progress, SearchInput, Text, useItemIntersection } from '@pega/cosmos-react-core';
-import * as pegasusIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/pegasus.icon';
-export default {
-    title: 'Core/Icon',
-    component: Icon
-};
-registerIcon(pegasusIcon);
-export const StaticIcon = () => {
-    return (<Icon style={{ height: '5rem', width: '5rem' }} name='pegasus' aria-label='Informative label'/>);
-};
-export const DynamicIcon = () => {
-    return <Icon style={{ height: '5rem', width: '5rem' }} name='pega'/>;
-};
-const PAGE_SIZE = 50;
-const StyledIconList = styled.ul `
-  overflow-x: hidden;
-  overflow-y: auto;
-  list-style: none;
-  height: 100%;
-
-  ${StyledEmptyState} {
-    width: 100%;
-    height: 100%;
-  }
-`;
-const StyledIconListItem = styled.li(({ theme }) => css `
-      padding: calc(2 * ${theme.base.spacing});
-      border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};
-      width: 20%;
-    `);
-StyledIconListItem.defaultProps = defaultThemeProp;
-const StyledProgressContainer = styled.li `
-  position: relative;
-  height: 2.8rem;
-  width: 100%;
-`;
-export const IconList = () => {
-    const [search, setSearch] = useState('');
-    const totalMatches = useRef(0);
-    const [currentPageIndex, setCurrentPageIndex] = useState(0);
-    const ulRef = useRef(null);
-    const listContent = useMemo(() => {
-        const matches = search
-            ? icons.filter(icon => icon.includes(search))
-            : icons;
-        const totalItemsToRender = (1 + currentPageIndex) * PAGE_SIZE;
-        totalMatches.current = matches.length;
-        if (matches.length === 0) {
-            return <EmptyState forwardedAs='li'/>;
-        }
-        return matches.slice(0, totalItemsToRender).map(icon => (<Flex key={icon} container={{
-                direction: 'column',
-                justify: 'center',
-                alignItems: 'center',
-                alignContent: 'center'
-            }} as={StyledIconListItem}>
-        <Icon style={{ height: '3rem', width: '3rem' }} name={icon}/>
-        <p style={{ textAlign: 'center' }}>{icon}</p>
-      </Flex>));
-    }, [search, currentPageIndex]);
-    const itemsShown = Math.min(totalMatches.current, (1 + currentPageIndex) * PAGE_SIZE);
-    const itemsToLoadMore = totalMatches.current - itemsShown;
-    useItemIntersection(ulRef, itemsShown, () => {
-        setCurrentPageIndex(prev => 1 + prev);
-    }, ':scope > li');
-    const onSearchChange = useCallback((value) => {
-        setSearch(value);
-        setCurrentPageIndex(0);
-        ulRef?.current?.scrollIntoView();
-    }, []);
-    return (<Flex container={{ direction: 'column', gap: 1 }} style={{ height: '90vh' }}>
-      <SearchInput value={search} onSearchChange={onSearchChange}/>
-      {itemsShown > 0 && <Text variant='secondary'>{totalMatches.current} results</Text>}
-      <Flex container={{ wrap: 'wrap', alignContent: 'start' }} as={StyledIconList} ref={ulRef}>
-        {listContent}
-        {itemsToLoadMore > 0 && (<StyledProgressContainer>
-            <Progress placement='local'/>
-          </StyledProgressContainer>)}
-      </Flex>
-    </Flex>);
-};
-//# sourceMappingURL=Icon.stories.jsx.map

package/lib/core/Icon/Icon.stories.jsx.map

@@ -1 +0,0 @@
-{"version":3,"file":"Icon.stories.jsx","sourceRoot":"","sources":["../../../src/core/Icon/Icon.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta } from '@storybook/react';\nimport { useMemo, useState, useCallback, useRef } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  defaultThemeProp,\n  EmptyState,\n  StyledEmptyState,\n  Flex,\n  Icon,\n  icons,\n  IconNames,\n  registerIcon,\n  Progress,\n  SearchInput,\n  Text,\n  useItemIntersection\n} from '@pega/cosmos-react-core';\nimport * as pegasusIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/pegasus.icon';\n\nexport default {\n  title: 'Core/Icon',\n  component: Icon\n} as Meta;\n\nregisterIcon(pegasusIcon);\n\nexport const StaticIcon = () => {\n  return (\n    <Icon style={{ height: '5rem', width: '5rem' }} name='pegasus' aria-label='Informative label' />\n  );\n};\n\nexport const DynamicIcon = () => {\n  return <Icon style={{ height: '5rem', width: '5rem' }} name='pega' />;\n};\n\n// Default # of icons to display in a page\nconst PAGE_SIZE = 50;\n\nconst StyledIconList = styled.ul`\n  overflow-x: hidden;\n  overflow-y: auto;\n  list-style: none;\n  height: 100%;\n\n  ${StyledEmptyState} {\n    width: 100%;\n    height: 100%;\n  }\n`;\n\nconst StyledIconListItem = styled.li(\n  ({ theme }) =>\n    css`\n      padding: calc(2 * ${theme.base.spacing});\n      border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};\n      width: 20%;\n    `\n);\n\nStyledIconListItem.defaultProps = defaultThemeProp;\n\nconst StyledProgressContainer = styled.li`\n  position: relative;\n  height: 2.8rem;\n  width: 100%;\n`;\n\nexport const IconList = () => {\n  const [search, setSearch] = useState('');\n  const totalMatches = useRef(0);\n  const [currentPageIndex, setCurrentPageIndex] = useState(0);\n  const ulRef = useRef<HTMLUListElement>(null);\n\n  const listContent = useMemo(() => {\n    const matches: readonly IconNames[] = search\n      ? icons.filter(icon => icon.includes(search))\n      : icons;\n    const totalItemsToRender = (1 + currentPageIndex) * PAGE_SIZE;\n    totalMatches.current = matches.length;\n\n    if (matches.length === 0) {\n      return <EmptyState forwardedAs='li' />;\n    }\n\n    return matches.slice(0, totalItemsToRender).map(icon => (\n      <Flex\n        key={icon}\n        container={{\n          direction: 'column',\n          justify: 'center',\n          alignItems: 'center',\n          alignContent: 'center'\n        }}\n        as={StyledIconListItem}\n      >\n        <Icon style={{ height: '3rem', width: '3rem' }} name={icon} />\n        <p style={{ textAlign: 'center' }}>{icon}</p>\n      </Flex>\n    ));\n  }, [search, currentPageIndex]);\n\n  const itemsShown = Math.min(totalMatches.current, (1 + currentPageIndex) * PAGE_SIZE);\n  const itemsToLoadMore = totalMatches.current - itemsShown;\n\n  // When reaches to the bottom of the results, loads next PAGE_SIZE items\n  useItemIntersection(\n    ulRef,\n    itemsShown,\n    () => {\n      setCurrentPageIndex(prev => 1 + prev);\n    },\n    ':scope > li'\n  );\n\n  // on search, reset to first page and scroll to top\n  const onSearchChange = useCallback((value: string) => {\n    setSearch(value);\n    setCurrentPageIndex(0);\n    ulRef?.current?.scrollIntoView();\n  }, []);\n\n  return (\n    <Flex container={{ direction: 'column', gap: 1 }} style={{ height: '90vh' }}>\n      <SearchInput value={search} onSearchChange={onSearchChange} />\n      {itemsShown > 0 && <Text variant='secondary'>{totalMatches.current} results</Text>}\n      <Flex container={{ wrap: 'wrap', alignContent: 'start' }} as={StyledIconList} ref={ulRef}>\n        {listContent}\n        {itemsToLoadMore > 0 && (\n          <StyledProgressContainer>\n            <Progress placement='local' />\n          </StyledProgressContainer>\n        )}\n      </Flex>\n    </Flex>\n  );\n};\n"]}

package/lib/core/IconPicker/IconPicker.stories.jsx

@@ -1,39 +0,0 @@
-import { useEffect, useState } from 'react';
-import { IconPicker } from '@pega/cosmos-react-core';
-export default {
-    title: 'Core/IconPicker',
-    component: IconPicker,
-    args: {
-        defaultSelection: 'pegasus',
-        label: 'IconPicker input',
-        labelHidden: false,
-        info: 'Type in or click to expand the Popover',
-        placeholder: '',
-        status: undefined,
-        required: false,
-        disabled: false,
-        readOnly: false
-    },
-    argTypes: {
-        defaultSelection: { control: { type: 'text' } },
-        initialItemsRenderLimit: { control: { type: 'number' } },
-        label: { control: { type: 'text' } },
-        labelHidden: { control: { type: 'boolean' } },
-        info: { control: { type: 'text' } },
-        placeholder: { control: { type: 'text' } },
-        status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },
-        required: { control: { type: 'boolean' } },
-        disabled: { control: { type: 'boolean' } },
-        readOnly: { control: { type: 'boolean' } }
-    }
-};
-export const IconPickerDemo = args => {
-    const [value, setValue] = useState(args.defaultSelection);
-    useEffect(() => {
-        setValue(args.defaultSelection);
-    }, [args.defaultSelection]);
-    return (<IconPicker defaultSelection={value} label={args.label} labelHidden={args.labelHidden} info={args.info} placeholder={args.placeholder} status={args.status} required={args.required} disabled={args.disabled} readOnly={args.readOnly} onSelect={(icon) => {
-            setValue(icon);
-        }}/>);
-};
-//# sourceMappingURL=IconPicker.stories.jsx.map

package/lib/core/IconPicker/IconPicker.stories.jsx.map

@@ -1 +0,0 @@
-{"version":3,"file":"IconPicker.stories.jsx","sourceRoot":"","sources":["../../../src/core/IconPicker/IconPicker.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAE,UAAU,EAAmB,MAAM,yBAAyB,CAAC;AAEtE,eAAe;IACb,KAAK,EAAE,iBAAiB;IACxB,SAAS,EAAE,UAAU;IACrB,IAAI,EAAE;QACJ,gBAAgB,EAAE,SAAS;QAC3B,KAAK,EAAE,kBAAkB;QACzB,WAAW,EAAE,KAAK;QAClB,IAAI,EAAE,wCAAwC;QAC9C,WAAW,EAAE,EAAE;QACf,MAAM,EAAE,SAAS;QACjB,QAAQ,EAAE,KAAK;QACf,QAAQ,EAAE,KAAK;QACf,QAAQ,EAAE,KAAK;KAChB;IACD,QAAQ,EAAE;QACR,gBAAgB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;QAC/C,uBAAuB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;QACxD,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;QACpC,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;QAC7C,IAAI,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;QACnC,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;QAC1C,MAAM,EAAE,EAAE,OAAO,EAAE,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;QAC5F,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;QAC1C,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;QAC1C,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;KAC3C;CACM,CAAC;AAEV,MAAM,CAAC,MAAM,cAAc,GAA2B,IAAI,CAAC,EAAE;IAC3D,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;IAE1D,SAAS,CAAC,GAAG,EAAE;QACb,QAAQ,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;IAClC,CAAC,EAAE,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC;IAE5B,OAAO,CACL,CAAC,UAAU,CACT,gBAAgB,CAAC,CAAC,KAAK,CAAC,CACxB,KAAK,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAClB,WAAW,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAC9B,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAChB,WAAW,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAC9B,MAAM,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CACpB,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CACxB,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CACxB,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CACxB,QAAQ,CAAC,CAAC,CAAC,IAAY,EAAE,EAAE;YACzB,QAAQ,CAAC,IAAI,CAAC,CAAC;QACjB,CAAC,CAAC,EACF,CACH,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useEffect, useState } from 'react';\n\nimport { IconPicker, IconPickerProps } from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/IconPicker',\n  component: IconPicker,\n  args: {\n    defaultSelection: 'pegasus',\n    label: 'IconPicker input',\n    labelHidden: false,\n    info: 'Type in or click to expand the Popover',\n    placeholder: '',\n    status: undefined,\n    required: false,\n    disabled: false,\n    readOnly: false\n  },\n  argTypes: {\n    defaultSelection: { control: { type: 'text' } },\n    initialItemsRenderLimit: { control: { type: 'number' } },\n    label: { control: { type: 'text' } },\n    labelHidden: { control: { type: 'boolean' } },\n    info: { control: { type: 'text' } },\n    placeholder: { control: { type: 'text' } },\n    status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },\n    required: { control: { type: 'boolean' } },\n    disabled: { control: { type: 'boolean' } },\n    readOnly: { control: { type: 'boolean' } }\n  }\n} as Meta;\n\nexport const IconPickerDemo: Story<IconPickerProps> = args => {\n  const [value, setValue] = useState(args.defaultSelection);\n\n  useEffect(() => {\n    setValue(args.defaultSelection);\n  }, [args.defaultSelection]);\n\n  return (\n    <IconPicker\n      defaultSelection={value}\n      label={args.label}\n      labelHidden={args.labelHidden}\n      info={args.info}\n      placeholder={args.placeholder}\n      status={args.status}\n      required={args.required}\n      disabled={args.disabled}\n      readOnly={args.readOnly}\n      onSelect={(icon: string) => {\n        setValue(icon);\n      }}\n    />\n  );\n};\n"]}

package/lib/core/Lightbox/Lightbox.stories.jsx

@@ -1,106 +0,0 @@
-import { useRef, useState } from 'react';
-import { Button, DateTimeDisplay, Lightbox } from '@pega/cosmos-react-core';
-export default {
-    title: 'Core/Lightbox',
-    component: Lightbox
-};
-const mockAPIImageResources = [
-    {
-        id: 'photo-1497752531616-c3afd9760a11',
-        name: 'Image 1',
-        description: 'Descriptive text about Image 1',
-        mime_type: 'image/avif',
-        media_url: 'https://images.unsplash.com/photo-1497752531616-c3afd9760a11?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80'
-    },
-    {
-        id: 'photo-1470093851219-69951fcbb533',
-        name: 'Image 2',
-        description: 'Descriptive text about Image 2',
-        mime_type: 'image/avif',
-        media_url: 'https://images.unsplash.com/photo-1470093851219-69951fcbb533?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80'
-    },
-    {
-        id: 'photo-1447684808650-354ae64db5b8',
-        name: 'Image 3',
-        description: 'Descriptive text about Image 3',
-        mime_type: 'image/avif',
-        media_url: 'https://images.unsplash.com/photo-1447684808650-354ae64db5b8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2094&q=80'
-    },
-    {
-        id: 'photo-1425082661705-1834bfd09dca',
-        name: 'Image 4',
-        description: 'Descriptive text about Image 4',
-        mime_type: 'image/avif',
-        media_url: 'https://images.unsplash.com/photo-1425082661705-1834bfd09dca?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2110&q=80'
-    },
-    {
-        id: 'photo-1494256997604-768d1f608cac',
-        name: 'Image 5',
-        description: 'Descriptive text about Image 5',
-        mime_type: 'image/avif',
-        media_url: 'https://images.unsplash.com/photo-1494256997604-768d1f608cac?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2301&q=80'
-    },
-    {
-        id: 'photo-1500694216671-a4e54fc4b513',
-        name: 'Image 6',
-        description: 'Descriptive text about Image 6',
-        mime_type: 'image/avif',
-        media_url: 'https://images.unsplash.com/photo-1500694216671-a4e54fc4b513?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2092&q=80'
-    },
-    {
-        id: 'photo-1638292597251-6fe6b2ba50f9',
-        name: 'Image 7',
-        description: 'Descriptive text about Image 7',
-        mime_type: 'image/avif',
-        media_url: 'https://images.unsplash.com/photo-1638292597251-6fe6b2ba50f9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1287&q=80'
-    }
-];
-const mockBadImageResource = {
-    id: 'error',
-    name: 'Some image',
-    description: 'Descriptive text about Some image',
-    mime_type: 'image/avif',
-    media_url: ''
-};
-const BaseLightboxDemo = ({ cycle, limit, error }) => {
-    const demoButtonRef = useRef(null);
-    const [images, setImages] = useState(null);
-    const onClick = () => {
-        setImages((error ? [mockBadImageResource] : mockAPIImageResources.slice(0, limit)).map(({ id, name, description, mime_type, media_url }) => {
-            return {
-                id,
-                name,
-                description,
-                src: media_url,
-                metadata: [
-                    mime_type.split('/').pop(),
-                    <DateTimeDisplay value={new Date()} variant='date'/>
-                ]
-            };
-        }));
-    };
-    const onItemDownload = async (id) => {
-        const a = document.createElement('a');
-        a.href = await fetch(id)
-            .then(response => response.blob())
-            .then(blob => URL.createObjectURL(blob));
-        a.download = images?.find(image => image.id === id)?.name ?? id;
-        document.body.appendChild(a);
-        a.click();
-        document.body.removeChild(a);
-    };
-    return (<>
-      <Button ref={demoButtonRef} onClick={onClick} autoFocus>
-        Open Lightbox
-      </Button>
-      {images && (<Lightbox items={images} cycle={cycle} onAfterClose={() => {
-                setImages(null);
-                demoButtonRef.current?.focus();
-            }} onItemDownload={onItemDownload}/>)}
-    </>);
-};
-export const MultiImage = () => <BaseLightboxDemo />;
-export const SingleImage = () => <BaseLightboxDemo limit={1}/>;
-export const MultiImageWithCycling = () => <BaseLightboxDemo cycle/>;
-export const ImageLoadError = () => <BaseLightboxDemo error/>;
-//# sourceMappingURL=Lightbox.stories.jsx.map

package/lib/core/Lightbox/Lightbox.stories.jsx.map

@@ -1 +0,0 @@
-{"version":3,"file":"Lightbox.stories.jsx","sourceRoot":"","sources":["../../../src/core/Lightbox/Lightbox.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta } from '@storybook/react';\nimport { useRef, useState } from 'react';\n\nimport {\n  Button,\n  DateTimeDisplay,\n  Lightbox,\n  LightboxProps,\n  LightboxItem\n} from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/Lightbox',\n  component: Lightbox\n} as Meta;\n\nconst mockAPIImageResources = [\n  {\n    id: 'photo-1497752531616-c3afd9760a11',\n    name: 'Image 1',\n    description: 'Descriptive text about Image 1',\n    // cSpell:disable-next-line\n    mime_type: 'image/avif',\n    media_url:\n      'https://images.unsplash.com/photo-1497752531616-c3afd9760a11?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80'\n  },\n  {\n    id: 'photo-1470093851219-69951fcbb533',\n    name: 'Image 2',\n    description: 'Descriptive text about Image 2',\n    // cSpell:disable-next-line\n    mime_type: 'image/avif',\n    media_url:\n      'https://images.unsplash.com/photo-1470093851219-69951fcbb533?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80'\n  },\n  {\n    id: 'photo-1447684808650-354ae64db5b8',\n    name: 'Image 3',\n    description: 'Descriptive text about Image 3',\n    // cSpell:disable-next-line\n    mime_type: 'image/avif',\n    media_url:\n      'https://images.unsplash.com/photo-1447684808650-354ae64db5b8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2094&q=80'\n  },\n  {\n    id: 'photo-1425082661705-1834bfd09dca',\n    name: 'Image 4',\n    description: 'Descriptive text about Image 4',\n    // cSpell:disable-next-line\n    mime_type: 'image/avif',\n    media_url:\n      'https://images.unsplash.com/photo-1425082661705-1834bfd09dca?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2110&q=80'\n  },\n  {\n    id: 'photo-1494256997604-768d1f608cac',\n    name: 'Image 5',\n    description: 'Descriptive text about Image 5',\n    // cSpell:disable-next-line\n    mime_type: 'image/avif',\n    media_url:\n      'https://images.unsplash.com/photo-1494256997604-768d1f608cac?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2301&q=80'\n  },\n  {\n    id: 'photo-1500694216671-a4e54fc4b513',\n    name: 'Image 6',\n    description: 'Descriptive text about Image 6',\n    // cSpell:disable-next-line\n    mime_type: 'image/avif',\n    media_url:\n      'https://images.unsplash.com/photo-1500694216671-a4e54fc4b513?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2092&q=80'\n  },\n  {\n    id: 'photo-1638292597251-6fe6b2ba50f9',\n    name: 'Image 7',\n    description: 'Descriptive text about Image 7',\n    // cSpell:disable-next-line\n    mime_type: 'image/avif',\n    media_url:\n      'https://images.unsplash.com/photo-1638292597251-6fe6b2ba50f9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1287&q=80'\n  }\n];\n\nconst mockBadImageResource = {\n  id: 'error',\n  name: 'Some image',\n  description: 'Descriptive text about Some image',\n  // cSpell:disable-next-line\n  mime_type: 'image/avif',\n  media_url: ''\n};\n\nconst BaseLightboxDemo = ({\n  cycle,\n  limit,\n  error\n}: Pick<LightboxProps, 'cycle'> & { limit?: number; error?: true }) => {\n  const demoButtonRef = useRef<HTMLButtonElement>(null);\n  const [images, setImages] = useState<LightboxProps['items'] | null>(null);\n\n  const onClick = () => {\n    setImages(\n      (error ? [mockBadImageResource] : mockAPIImageResources.slice(0, limit)).map(\n        ({ id, name, description, mime_type, media_url }) => {\n          return {\n            id,\n            name,\n            description,\n            src: media_url,\n            metadata: [\n              mime_type.split('/').pop(),\n              <DateTimeDisplay value={new Date()} variant='date' />\n            ]\n          };\n        }\n      )\n    );\n  };\n\n  const onItemDownload = async (id: LightboxItem['id']) => {\n    const a = document.createElement('a');\n    a.href = await fetch(id)\n      .then(response => response.blob())\n      .then(blob => URL.createObjectURL(blob));\n\n    a.download = images?.find(image => image.id === id)?.name ?? id;\n    document.body.appendChild(a);\n    a.click();\n    document.body.removeChild(a);\n  };\n\n  return (\n    <>\n      <Button ref={demoButtonRef} onClick={onClick} autoFocus>\n        Open Lightbox\n      </Button>\n      {images && (\n        <Lightbox\n          items={images}\n          cycle={cycle}\n          onAfterClose={() => {\n            setImages(null);\n            demoButtonRef.current?.focus();\n          }}\n          onItemDownload={onItemDownload}\n        />\n      )}\n    </>\n  );\n};\n\nexport const MultiImage = () => <BaseLightboxDemo />;\nexport const SingleImage = () => <BaseLightboxDemo limit={1} />;\nexport const MultiImageWithCycling = () => <BaseLightboxDemo cycle />;\nexport const ImageLoadError = () => <BaseLightboxDemo error />;\n"]}

package/lib/core/Link/Link.stories.jsx

@@ -1,32 +0,0 @@
-import { Icon, registerIcon, Link } from '@pega/cosmos-react-core';
-import * as plusIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/plus.icon';
-registerIcon(plusIcon);
-export default {
-    title: 'Core/Link',
-    component: Link,
-    args: {
-        variant: 'link'
-    },
-    argTypes: {
-        variant: {
-            options: ['link', 'primary', 'secondary', 'simple', 'text'],
-            control: { type: 'select' }
-        }
-    }
-};
-export const LinkDemo = (args) => {
-    return (<Link href='http://www.pega.com' variant={args.variant} target='_blank'>
-      Visit Pega!
-    </Link>);
-};
-export const LinkWithIconDemo = (args) => {
-    return (<Link href='http://www.pega.com' variant={args.variant} icon target='_blank'>
-      <Icon name='plus'/>
-    </Link>);
-};
-export const PreviewableLink = (args) => {
-    return (<Link href='http://www.pega.com' variant={args.variant} previewable target='_blank'>
-      Visit Pega!
-    </Link>);
-};
-//# sourceMappingURL=Link.stories.jsx.map

package/lib/core/Link/Link.stories.jsx.map

@@ -1 +0,0 @@
-{"version":3,"file":"Link.stories.jsx","sourceRoot":"","sources":["../../../src/core/Link/Link.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,IAAI,EAAa,MAAM,yBAAyB,CAAC;AAC9E,OAAO,KAAK,QAAQ,MAAM,6DAA6D,CAAC;AAExF,YAAY,CAAC,QAAQ,CAAC,CAAC;AAEvB,eAAe;IACb,KAAK,EAAE,WAAW;IAClB,SAAS,EAAE,IAAI;IACf,IAAI,EAAE;QACJ,OAAO,EAAE,MAAM;KAChB;IACD,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,OAAO,EAAE,CAAC,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,CAAC;YAC3D,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;SAC5B;KACF;CACM,CAAC;AAEV,MAAM,CAAC,MAAM,QAAQ,GAAqB,CAAC,IAAe,EAAE,EAAE;IAC5D,OAAO,CACL,CAAC,IAAI,CAAC,IAAI,CAAC,qBAAqB,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,MAAM,CAAC,QAAQ,CACrE;;IACF,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAqB,CAAC,IAAe,EAAE,EAAE;IACpE,OAAO,CACL,CAAC,IAAI,CAAC,IAAI,CAAC,qBAAqB,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,CAC1E;MAAA,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,EACnB;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAqB,CAAC,IAAe,EAAE,EAAE;IACnE,OAAO,CACL,CAAC,IAAI,CAAC,IAAI,CAAC,qBAAqB,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,MAAM,CAAC,QAAQ,CACjF;;IACF,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { Icon, registerIcon, Link, LinkProps } from '@pega/cosmos-react-core';\nimport * as plusIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/plus.icon';\n\nregisterIcon(plusIcon);\n\nexport default {\n  title: 'Core/Link',\n  component: Link,\n  args: {\n    variant: 'link'\n  },\n  argTypes: {\n    variant: {\n      options: ['link', 'primary', 'secondary', 'simple', 'text'],\n      control: { type: 'select' }\n    }\n  }\n} as Meta;\n\nexport const LinkDemo: Story<LinkProps> = (args: LinkProps) => {\n  return (\n    <Link href='http://www.pega.com' variant={args.variant} target='_blank'>\n      Visit Pega!\n    </Link>\n  );\n};\n\nexport const LinkWithIconDemo: Story<LinkProps> = (args: LinkProps) => {\n  return (\n    <Link href='http://www.pega.com' variant={args.variant} icon target='_blank'>\n      <Icon name='plus' />\n    </Link>\n  );\n};\n\nexport const PreviewableLink: Story<LinkProps> = (args: LinkProps) => {\n  return (\n    <Link href='http://www.pega.com' variant={args.variant} previewable target='_blank'>\n      Visit Pega!\n    </Link>\n  );\n};\n"]}

package/lib/core/List/CommaSeparatedList.stories.jsx

@@ -1,33 +0,0 @@
-import { CommaSeparatedList } from '@pega/cosmos-react-core';
-export default {
-    title: 'Core/List',
-    component: CommaSeparatedList
-};
-const arr = [
-    'Value1',
-    'Value2',
-    'Value3',
-    'Value4',
-    'Value5',
-    'Value6',
-    'Value7',
-    'Value8',
-    'Value9',
-    'Value10',
-    'Value11',
-    'Value12',
-    'Value13',
-    'Value14'
-];
-export const CommaSeparatedListDemo = (args) => {
-    return (<div style={{ maxWidth: '25%' }}>
-      <CommaSeparatedList heading={args.heading} items={arr}/>
-    </div>);
-};
-CommaSeparatedListDemo.args = {
-    heading: 'List Heading'
-};
-CommaSeparatedListDemo.argTypes = {
-    heading: { control: { type: 'text' } }
-};
-//# sourceMappingURL=CommaSeparatedList.stories.jsx.map