@pega/cosmos-react-demos 5.0.0-dev.4.7 → 5.0.0-dev.4.8

package/jsx/core/Menu/Menu.stories.jsx

@@ -1,196 +0,0 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { Button, Count, Flex, Menu, menuHelpers, Popover, SearchInput, createUID, useElement, useOuterEvent, useToaster } from '@pega/cosmos-react-core';
-import { cars, countries } from './Menu.mocks';
-import { StyledFlag } from './Menu.styles';
-export default {
-    title: 'Core/Menu',
-    component: Menu,
-    args: {
-        variant: 'drill-down',
-        mode: 'action',
-        showItemSecondary: true,
-        showItemVisual: true,
-        showItemCount: true,
-        parentSelection: false,
-        filterPattern: 'contains',
-        infiniteScroll: false,
-        noItems: false,
-        emptyText: 'No items',
-        useFlatData: false
-    },
-    argTypes: {
-        variant: { options: ['drill-down', 'flyout'], control: { type: 'select' } },
-        mode: { options: ['action', 'single-select', 'multi-select'], control: { type: 'select' } },
-        showItemSecondary: { control: { type: 'boolean' } },
-        showItemVisual: { control: { type: 'boolean' } },
-        showItemCount: { control: { type: 'boolean' } },
-        parentSelection: { control: { type: 'boolean' } },
-        filterPattern: { options: ['contains', 'starts with'], control: { type: 'select' } },
-        infiniteScroll: { control: { type: 'boolean' } },
-        noItems: { control: { type: 'boolean' } },
-        emptyText: { control: { type: 'text' } },
-        useFlatData: { control: { type: 'boolean' } }
-    }
-};
-export const MenuDemo = (args) => {
-    const menuID = createUID();
-    const menuListID = `${menuID}--list`;
-    const data = args.useFlatData ? cars : countries;
-    const searchEleRef = useRef(null);
-    const { push } = useToaster();
-    const [isOpen, setIsOpen] = useState(false);
-    const [isLoading, setIsLoading] = useState(false);
-    const [hasMore, setHasMore] = useState(true);
-    const [items, setItems] = useState(args.infiniteScroll ? data.slice(0, 10) : data);
-    const [buttonEl, setButtonEl] = useElement(null);
-    const [popoverEl, setPopoverEl] = useElement(null);
-    const [search, setSearch] = useState('');
-    const selections = useMemo(() => menuHelpers.getSelected(items), [items]);
-    const searchRegex = useMemo(() => {
-        const escapedSearch = search.replace(/[.*+\-?^${}()|[\]\\]/g, '\\$&');
-        return new RegExp(args.filterPattern === 'contains' ? escapedSearch : `^${escapedSearch}`, 'i');
-    }, [search, args.filterPattern]);
-    const itemsToRender = useMemo(() => {
-        return menuHelpers.mapTree(search
-            ? menuHelpers.flatten(items).filter(({ primary }) => {
-                return searchRegex.test(primary);
-            })
-            : items, item => {
-            let selectable = false;
-            if (!item.items || args.parentSelection) {
-                selectable = true;
-            }
-            return {
-                ...item,
-                visual: args.showItemVisual && item.visual ? <StyledFlag>{item.visual}</StyledFlag> : undefined,
-                count: args.showItemCount && item.items ? item.items.length : undefined,
-                secondary: args.showItemSecondary ? item.secondary : undefined,
-                selected: selectable ? !!item.selected : undefined,
-                tooltip: args.variant === 'flyout' ? item.tooltip : undefined
-            };
-        });
-    }, [search, items, searchRegex, args.showItemVisual]);
-    const resetMenu = useCallback(() => {
-        setIsOpen(false);
-        setItems(data.slice(0, 10));
-        setSearch('');
-    }, []);
-    const onKeydown = useCallback(({ key }) => {
-        if (key === 'Escape')
-            resetMenu();
-    }, [resetMenu]);
-    const loadMore = useCallback((expandedItemId) => {
-        if (!expandedItemId) {
-            setIsLoading(true);
-            setTimeout(() => {
-                setIsLoading(false);
-                setItems(prevItems => {
-                    const newItems = data.slice(prevItems.length, prevItems.length + 10);
-                    if (newItems.length === 0)
-                        setHasMore(false);
-                    return menuHelpers.appendTo(prevItems, newItems, expandedItemId);
-                });
-            }, 2000);
-        }
-    }, [data]);
-    useOuterEvent('mousedown', [popoverEl, buttonEl], e => {
-        if (args.variant === 'flyout') {
-            const path = e.composedPath();
-            const considerEvent = path.every(el => {
-                return !(el instanceof HTMLElement && el.dataset.flyoutMenuParentId === menuID);
-            });
-            if (considerEvent) {
-                resetMenu();
-            }
-        }
-        else {
-            resetMenu();
-        }
-    });
-    useEffect(() => {
-        document.addEventListener('keydown', onKeydown);
-        return () => {
-            document.removeEventListener('keydown', onKeydown);
-        };
-    }, []);
-    useEffect(() => {
-        if (isOpen) {
-            searchEleRef?.current?.focus();
-        }
-    }, [isOpen, searchEleRef.current]);
-    return (<Flex container={{ justify: 'center' }}>
-      <Button ref={setButtonEl} onClick={() => setIsOpen(cur => !cur)} variant='primary'>
-        Open the MENU
-      </Button>
-
-      <Popover show={isOpen} ref={setPopoverEl} target={buttonEl}>
-        <Menu {...args} id={menuID} listId={menuListID} items={args.noItems ? [] : itemsToRender} accent={search ? searchRegex : undefined} mode={args.variant === 'drill-down' ? args.mode : 'action'} role='listbox' loading={isLoading} emptyText={args.emptyText} variant={args.variant} loadMore={args.infiniteScroll && hasMore ? loadMore : undefined} focusControlEl={searchEleRef.current || undefined} onItemClick={id => {
-            if (args.mode === 'single-select' || args.mode === 'multi-select') {
-                setItems(cur => menuHelpers.toggleSelected(cur, id, args.mode));
-            }
-            else {
-                const clicked = menuHelpers.getItem(items, id);
-                if (clicked) {
-                    push({
-                        id: `${Date.now()}`,
-                        content: `${clicked.primary} added`
-                    });
-                }
-                resetMenu();
-            }
-        }} header={args.variant === 'drill-down' && (<SearchInput ref={searchEleRef} onSearchChange={setSearch} value={search} role='searchbox' searchInputAriaLabel='Start typing to search.' aria-controls={menuListID}/>)} footer={args.variant === 'flyout' ? (<SearchInput ref={searchEleRef} onSearchChange={setSearch} value={search} role='searchbox' searchInputAriaLabel='Start typing to search.'/>) : ((args.mode === 'single-select' || args.mode === 'multi-select') && (<Flex container={{ justify: 'between' }}>
-                  <Button onClick={resetMenu}>Cancel</Button>
-
-                  <Button variant='primary' disabled={!selections.length} onClick={() => {
-                resetMenu();
-                push({
-                    id: `${Date.now()}`,
-                    content: `${selections.length} item${selections.length !== 1 ? 's' : ''} added`
-                });
-            }}>
-                    Add
-                    {selections.length > 0 && args.mode === 'multi-select' && (<>
-                        &nbsp;<Count>{selections.length}</Count>
-                      </>)}
-                  </Button>
-                </Flex>))}/>
-      </Popover>
-    </Flex>);
-};
-export const FlatMenuDemo = (args) => {
-    return <MenuDemo {...args} useFlatData/>;
-};
-export const WithoutFocusControlEl = (args) => {
-    const menuID = createUID();
-    const menuListID = `${menuID}--list`;
-    const buttonRef = useRef(null);
-    const [showMenu, setShowMenu] = useState(false);
-    const [items, setItems] = useState(cars);
-    const itemsToRender = useMemo(() => {
-        return menuHelpers.mapTree(items, item => {
-            let selectable = false;
-            if (!item.items || args.parentSelection) {
-                selectable = true;
-            }
-            return {
-                ...item,
-                visual: args.showItemVisual && item.visual ? <StyledFlag>{item.visual}</StyledFlag> : undefined,
-                count: args.showItemCount && item.items ? item.items.length : undefined,
-                secondary: args.showItemSecondary ? item.secondary : undefined,
-                selected: selectable ? !!item.selected : undefined
-            };
-        });
-    }, [items, args.showItemVisual, args.showItemCount, args.showItemSecondary]);
-    return (<Flex container={{ gap: 2, direction: 'column', alignItems: 'start' }} style={{ maxWidth: '500px' }}>
-      <Button ref={buttonRef} onClick={() => {
-            setShowMenu(!showMenu);
-        }}>
-        {showMenu ? 'Hide' : 'Show'}
-      </Button>
-
-      {showMenu && (<Menu id={menuID} listId={menuListID} items={itemsToRender} mode='multi-select' role='listbox' onItemClick={id => {
-                setItems(cur => menuHelpers.toggleSelected(cur, id, args.mode));
-            }}/>)}
-    </Flex>);
-};
-//# sourceMappingURL=Menu.stories.jsx.map

package/jsx/core/Menu/Menu.stories.jsx.map

@@ -1 +0,0 @@
-{"version":3,"file":"Menu.stories.jsx","sourceRoot":"","sources":["../../../src/core/Menu/Menu.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport {\n  Button,\n  Count,\n  Flex,\n  Menu,\n  menuHelpers,\n  Popover,\n  SearchInput,\n  createUID,\n  useElement,\n  useOuterEvent,\n  useToaster\n} from '@pega/cosmos-react-core';\nimport type { MenuItemProps, MenuProps, OmitStrict } from '@pega/cosmos-react-core';\n\nimport { cars, countries } from './Menu.mocks';\nimport { StyledFlag } from './Menu.styles';\n\nexport default {\n  title: 'Core/Menu',\n  component: Menu,\n  args: {\n    variant: 'drill-down',\n    mode: 'action',\n    showItemSecondary: true,\n    showItemVisual: true,\n    showItemCount: true,\n    parentSelection: false,\n    filterPattern: 'contains',\n    infiniteScroll: false,\n    noItems: false,\n    emptyText: 'No items',\n    useFlatData: false\n  },\n  argTypes: {\n    variant: { options: ['drill-down', 'flyout'], control: { type: 'select' } },\n    mode: { options: ['action', 'single-select', 'multi-select'], control: { type: 'select' } },\n    showItemSecondary: { control: { type: 'boolean' } },\n    showItemVisual: { control: { type: 'boolean' } },\n    showItemCount: { control: { type: 'boolean' } },\n    parentSelection: { control: { type: 'boolean' } },\n    filterPattern: { options: ['contains', 'starts with'], control: { type: 'select' } },\n    infiniteScroll: { control: { type: 'boolean' } },\n    noItems: { control: { type: 'boolean' } },\n    emptyText: { control: { type: 'text' } },\n    useFlatData: { control: { type: 'boolean' } }\n  }\n} as Meta;\n\ninterface MenuStoryProps extends OmitStrict<MenuProps, 'items'> {\n  showItemSecondary?: boolean;\n  showItemVisual?: boolean;\n  showItemCount?: boolean;\n  parentSelection?: boolean;\n  filterPattern?: 'contains' | 'starts with';\n  infiniteScroll?: boolean;\n  noItems?: boolean;\n  useFlatData?: boolean;\n}\n\nexport const MenuDemo: StoryFn<MenuStoryProps> = (args: MenuStoryProps) => {\n  const menuID = createUID();\n  const menuListID = `${menuID}--list`;\n  const data = args.useFlatData ? cars : countries;\n\n  const searchEleRef = useRef<HTMLInputElement>(null);\n  const { push } = useToaster();\n  const [isOpen, setIsOpen] = useState(false);\n  const [isLoading, setIsLoading] = useState(false);\n  const [hasMore, setHasMore] = useState(true);\n  const [items, setItems] = useState<MenuProps['items']>(\n    args.infiniteScroll ? data.slice(0, 10) : data\n  );\n  const [buttonEl, setButtonEl] = useElement<HTMLButtonElement>(null);\n  const [popoverEl, setPopoverEl] = useElement<HTMLElement>(null);\n  const [search, setSearch] = useState('');\n  const selections = useMemo(() => menuHelpers.getSelected(items), [items]);\n  const searchRegex = useMemo(() => {\n    const escapedSearch = search.replace(/[.*+\\-?^${}()|[\\]\\\\]/g, '\\\\$&');\n    return new RegExp(args.filterPattern === 'contains' ? escapedSearch : `^${escapedSearch}`, 'i');\n  }, [search, args.filterPattern]);\n\n  const itemsToRender = useMemo(() => {\n    return menuHelpers.mapTree(\n      search\n        ? menuHelpers.flatten(items).filter(({ primary }: MenuItemProps) => {\n            return searchRegex.test(primary);\n          })\n        : items,\n      item => {\n        let selectable = false;\n\n        if (!item.items || args.parentSelection) {\n          selectable = true;\n        }\n\n        return {\n          ...item,\n          visual:\n            args.showItemVisual && item.visual ? <StyledFlag>{item.visual}</StyledFlag> : undefined,\n          count: args.showItemCount && item.items ? item.items.length : undefined,\n          secondary: args.showItemSecondary ? item.secondary : undefined,\n          selected: selectable ? !!item.selected : undefined,\n          tooltip: args.variant === 'flyout' ? item.tooltip : undefined\n        };\n      }\n    );\n  }, [search, items, searchRegex, args.showItemVisual]);\n\n  const resetMenu = useCallback(() => {\n    setIsOpen(false);\n    setItems(data.slice(0, 10));\n    setSearch('');\n  }, []);\n\n  const onKeydown = useCallback(\n    ({ key }: KeyboardEvent) => {\n      if (key === 'Escape') resetMenu();\n    },\n    [resetMenu]\n  );\n\n  const loadMore = useCallback(\n    (expandedItemId?: MenuItemProps['id']) => {\n      if (!expandedItemId) {\n        setIsLoading(true);\n        setTimeout(() => {\n          setIsLoading(false);\n          setItems(prevItems => {\n            const newItems = data.slice(prevItems.length, prevItems.length + 10);\n\n            if (newItems.length === 0) setHasMore(false);\n\n            return menuHelpers.appendTo(prevItems, newItems, expandedItemId);\n          });\n        }, 2000);\n      }\n    },\n    [data]\n  );\n\n  useOuterEvent('mousedown', [popoverEl, buttonEl], e => {\n    if (args.variant === 'flyout') {\n      const path = e.composedPath();\n      const considerEvent = path.every(el => {\n        return !(el instanceof HTMLElement && el.dataset.flyoutMenuParentId === menuID);\n      });\n      if (considerEvent) {\n        resetMenu();\n      }\n    } else {\n      resetMenu();\n    }\n  });\n\n  useEffect(() => {\n    document.addEventListener('keydown', onKeydown);\n    return () => {\n      document.removeEventListener('keydown', onKeydown);\n    };\n  }, []);\n\n  useEffect(() => {\n    if (isOpen) {\n      searchEleRef?.current?.focus();\n    }\n  }, [isOpen, searchEleRef.current]);\n\n  return (\n    <Flex container={{ justify: 'center' }}>\n      <Button ref={setButtonEl} onClick={() => setIsOpen(cur => !cur)} variant='primary'>\n        Open the MENU\n      </Button>\n\n      <Popover show={isOpen} ref={setPopoverEl} target={buttonEl}>\n        <Menu\n          {...args}\n          id={menuID}\n          listId={menuListID}\n          items={args.noItems ? [] : itemsToRender}\n          accent={search ? searchRegex : undefined}\n          mode={args.variant === 'drill-down' ? args.mode : 'action'}\n          role='listbox'\n          loading={isLoading}\n          emptyText={args.emptyText}\n          variant={args.variant}\n          loadMore={args.infiniteScroll && hasMore ? loadMore : undefined}\n          focusControlEl={searchEleRef.current || undefined}\n          onItemClick={id => {\n            if (args.mode === 'single-select' || args.mode === 'multi-select') {\n              setItems(cur => menuHelpers.toggleSelected(cur, id, args.mode));\n            } else {\n              const clicked = menuHelpers.getItem(items, id);\n              if (clicked) {\n                push({\n                  id: `${Date.now()}`,\n                  content: `${clicked.primary} added`\n                });\n              }\n              resetMenu();\n            }\n          }}\n          header={\n            args.variant === 'drill-down' && (\n              <SearchInput\n                ref={searchEleRef}\n                onSearchChange={setSearch}\n                value={search}\n                role='searchbox'\n                searchInputAriaLabel='Start typing to search.'\n                aria-controls={menuListID}\n              />\n            )\n          }\n          footer={\n            args.variant === 'flyout' ? (\n              <SearchInput\n                ref={searchEleRef}\n                onSearchChange={setSearch}\n                value={search}\n                role='searchbox'\n                searchInputAriaLabel='Start typing to search.'\n              />\n            ) : (\n              (args.mode === 'single-select' || args.mode === 'multi-select') && (\n                <Flex container={{ justify: 'between' }}>\n                  <Button onClick={resetMenu}>Cancel</Button>\n\n                  <Button\n                    variant='primary'\n                    disabled={!selections.length}\n                    onClick={() => {\n                      resetMenu();\n                      push({\n                        id: `${Date.now()}`,\n                        content: `${selections.length} item${\n                          selections.length !== 1 ? 's' : ''\n                        } added`\n                      });\n                    }}\n                  >\n                    Add\n                    {selections.length > 0 && args.mode === 'multi-select' && (\n                      <>\n                        &nbsp;<Count>{selections.length}</Count>\n                      </>\n                    )}\n                  </Button>\n                </Flex>\n              )\n            )\n          }\n        />\n      </Popover>\n    </Flex>\n  );\n};\n\nexport const FlatMenuDemo: StoryFn<MenuStoryProps> = (args: MenuStoryProps) => {\n  return <MenuDemo {...args} useFlatData />;\n};\n\nexport const WithoutFocusControlEl: StoryFn<MenuStoryProps> = (args: MenuStoryProps) => {\n  const menuID = createUID();\n  const menuListID = `${menuID}--list`;\n  const buttonRef = useRef<HTMLButtonElement | null>(null);\n  const [showMenu, setShowMenu] = useState(false);\n  const [items, setItems] = useState<MenuProps['items']>(cars);\n\n  const itemsToRender = useMemo(() => {\n    return menuHelpers.mapTree(items, item => {\n      let selectable = false;\n\n      if (!item.items || args.parentSelection) {\n        selectable = true;\n      }\n\n      return {\n        ...item,\n        visual:\n          args.showItemVisual && item.visual ? <StyledFlag>{item.visual}</StyledFlag> : undefined,\n        count: args.showItemCount && item.items ? item.items.length : undefined,\n        secondary: args.showItemSecondary ? item.secondary : undefined,\n        selected: selectable ? !!item.selected : undefined\n      };\n    });\n  }, [items, args.showItemVisual, args.showItemCount, args.showItemSecondary]);\n\n  return (\n    <Flex\n      container={{ gap: 2, direction: 'column', alignItems: 'start' }}\n      style={{ maxWidth: '500px' }}\n    >\n      <Button\n        ref={buttonRef}\n        onClick={() => {\n          setShowMenu(!showMenu);\n        }}\n      >\n        {showMenu ? 'Hide' : 'Show'}\n      </Button>\n\n      {showMenu && (\n        <Menu\n          id={menuID}\n          listId={menuListID}\n          items={itemsToRender}\n          mode='multi-select'\n          role='listbox'\n          onItemClick={id => {\n            setItems(cur => menuHelpers.toggleSelected(cur, id, args.mode));\n          }}\n        />\n      )}\n    </Flex>\n  );\n};\n"]}

package/jsx/core/Menu/Menu.styles.d.ts

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

package/jsx/core/Menu/Menu.styles.d.ts.map

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

package/jsx/core/Menu/Menu.styles.js

@@ -1,6 +0,0 @@
-import styled from 'styled-components';
-export const StyledFlag = styled.span `
-  font-size: 1.125rem;
-  line-height: 1;
-`;
-//# sourceMappingURL=Menu.styles.js.map

package/jsx/core/Menu/Menu.styles.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Menu.styles.js","sourceRoot":"","sources":["../../../src/core/Menu/Menu.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAA;;;CAGpC,CAAC","sourcesContent":["import styled from 'styled-components';\n\nexport const StyledFlag = styled.span`\n  font-size: 1.125rem;\n  line-height: 1;\n`;\n"]}

package/jsx/core/MenuButton/MenuButton.stories.d.ts

@@ -1,16 +0,0 @@
-import type { StoryFn } from '@storybook/react';
-import type { MenuButtonProps } from '@pega/cosmos-react-core';
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
-export default _default;
-type MenuButtonStoryProps = MenuButtonProps & {
-    showIcon?: boolean;
-    showItemVisual?: boolean;
-    showItemSecondary?: boolean;
-    showItemCount?: boolean;
-    onItemClick?: () => void;
-};
-export declare const MenuButtonAction: StoryFn<MenuButtonStoryProps>;
-export declare const MenuButtonSingleSelect: StoryFn<MenuButtonStoryProps>;
-export declare const MenuButtonMultiSelect: StoryFn<MenuButtonStoryProps>;
-export declare const MenuButtonDisabledItems: StoryFn<MenuButtonStoryProps>;
-//# sourceMappingURL=MenuButton.stories.d.ts.map

package/jsx/core/MenuButton/MenuButton.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"MenuButton.stories.d.ts","sourceRoot":"","sources":["../../../src/core/MenuButton/MenuButton.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAItD,OAAO,KAAK,EAAE,eAAe,EAA4B,MAAM,yBAAyB,CAAC;;AAEzF,wBAuBU;AAEV,KAAK,oBAAoB,GAAG,eAAe,GAAG;IAC5C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;CAC1B,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,OAAO,CAAC,oBAAoB,CA0C1D,CAAC;AAMF,eAAO,MAAM,sBAAsB,EAAE,OAAO,CAAC,oBAAoB,CAqDhE,CAAC;AAMF,eAAO,MAAM,qBAAqB,EAAE,OAAO,CAAC,oBAAoB,CAwE/D,CAAC;AAMF,eAAO,MAAM,uBAAuB,EAAE,OAAO,CAAC,oBAAoB,CA8CjE,CAAC"}

package/jsx/core/MenuButton/MenuButton.stories.jsx

@@ -1,188 +0,0 @@
-import { useState, useMemo, useEffect } from 'react';
-import { Avatar, Button, Flex, MenuButton, menuHelpers } from '@pega/cosmos-react-core';
-export default {
-    title: 'Core/MenuButton',
-    component: MenuButton,
-    args: {
-        variant: 'secondary',
-        showIcon: true,
-        iconOnly: false,
-        showItemVisual: true,
-        showItemSecondary: true,
-        showItemCount: true
-    },
-    argTypes: {
-        text: { control: { type: 'text' } },
-        variant: {
-            options: ['primary', 'secondary', 'simple', 'link', 'text'],
-            control: { type: 'select' }
-        },
-        showIcon: { control: { type: 'boolean' } },
-        iconOnly: { control: { type: 'boolean' } },
-        showItemVisual: { control: { type: 'boolean' } },
-        showItemSecondary: { control: { type: 'boolean' } },
-        showItemCount: { control: { type: 'boolean' } }
-    }
-};
-export const MenuButtonAction = (args) => {
-    const [items, setItems] = useState(() => Array.from({ length: 10 }, (_, i) => {
-        return {
-            id: `${i}`,
-            primary: `Item ${i + 1}`,
-            secondary: ['Meta A', 'Meta B', 'Meta C']
-        };
-    }));
-    const itemsToRender = useMemo(() => {
-        return menuHelpers.mapTree(items, item => {
-            return {
-                ...item,
-                visual: args.showItemVisual ? <Avatar name={item.primary}/> : undefined,
-                secondary: args.showItemSecondary ? item.secondary : undefined
-            };
-        });
-    }, [items, args.showItemVisual, args.showItemSecondary]);
-    useEffect(() => {
-        setItems(cur => {
-            return menuHelpers.mapTree(cur, item => {
-                return { ...item, count: args.showItemCount ? Math.ceil(Math.random() * 10) : undefined };
-            });
-        });
-    }, [args.showItemCount]);
-    return (<MenuButton text={args.text} variant={args.variant} icon={args.showIcon ? 'user-list-solid' : undefined} iconOnly={args.iconOnly} menu={{
-            mode: 'action',
-            items: itemsToRender,
-            onItemClick: () => { }
-        }}/>);
-};
-MenuButtonAction.args = {
-    text: 'Actions'
-};
-export const MenuButtonSingleSelect = (args) => {
-    const [items, setItems] = useState(() => Array.from({ length: 10 }, (_, i) => {
-        return {
-            id: `${i}`,
-            primary: `Item ${i + 1}`,
-            secondary: ['Meta A', 'Meta B', 'Meta C'],
-            selected: false
-        };
-    }));
-    const handleMenuItemClick = (id) => {
-        setItems(cur => menuHelpers.toggleSelected(cur, id, 'single-select'));
-    };
-    const itemsToRender = useMemo(() => {
-        return menuHelpers.mapTree(items, item => {
-            return {
-                ...item,
-                visual: args.showItemVisual ? <Avatar name={item.primary}/> : undefined,
-                secondary: args.showItemSecondary ? item.secondary : undefined
-            };
-        });
-    }, [items, args.showItemVisual, args.showItemSecondary]);
-    const buttonText = useMemo(() => {
-        const selected = menuHelpers.getSelected(items)[0];
-        return selected ? selected.primary : args.text;
-    }, [items]);
-    useEffect(() => {
-        setItems(cur => {
-            return menuHelpers.mapTree(cur, item => {
-                return { ...item, count: args.showItemCount ? Math.ceil(Math.random() * 10) : undefined };
-            });
-        });
-    }, [args.showItemCount]);
-    return (<MenuButton text={buttonText} variant={args.variant} icon={args.showIcon ? 'user-list-solid' : undefined} iconOnly={args.iconOnly} menu={{
-            mode: 'single-select',
-            items: itemsToRender,
-            onItemClick: handleMenuItemClick
-        }}/>);
-};
-MenuButtonSingleSelect.args = {
-    text: 'Select an item'
-};
-export const MenuButtonMultiSelect = (args) => {
-    const [items, setItems] = useState(() => Array.from({ length: 10 }, (_, i) => {
-        return {
-            id: `${i}`,
-            primary: `Item ${i + 1}`,
-            secondary: ['Meta A', 'Meta B', 'Meta C'],
-            selected: false
-        };
-    }));
-    const handleMenuItemClick = (id) => {
-        setItems(cur => menuHelpers.toggleSelected(cur, id, 'multi-select'));
-    };
-    const itemsToRender = useMemo(() => {
-        return menuHelpers.mapTree(items, item => {
-            return {
-                ...item,
-                visual: args.showItemVisual ? <Avatar name={item.primary}/> : undefined,
-                secondary: args.showItemSecondary ? item.secondary : undefined
-            };
-        });
-    }, [items, args.showItemVisual, args.showItemSecondary]);
-    const selectionCount = useMemo(() => menuHelpers.getSelected(items).length, [items]);
-    useEffect(() => {
-        setItems(cur => {
-            return menuHelpers.mapTree(cur, item => {
-                return { ...item, count: args.showItemCount ? Math.ceil(Math.random() * 10) : undefined };
-            });
-        });
-    }, [args.showItemCount]);
-    return (<MenuButton text={args.text} variant={args.variant} icon={args.showIcon ? 'user-list-solid' : undefined} iconOnly={args.iconOnly} count={selectionCount} menu={{
-            mode: 'multi-select',
-            items: itemsToRender,
-            onItemClick: handleMenuItemClick,
-            footer: (<Flex container={{ justify: 'center' }}>
-            <Button variant='link' disabled={selectionCount <= 0} onClick={() => {
-                    setItems(cur => {
-                        return menuHelpers.mapTree(cur, item => {
-                            return {
-                                ...item,
-                                selected: false
-                            };
-                        });
-                    });
-                }}>
-              Clear
-            </Button>
-          </Flex>)
-        }}/>);
-};
-MenuButtonMultiSelect.args = {
-    text: 'Select items'
-};
-export const MenuButtonDisabledItems = (args) => {
-    const [items, setItems] = useState(() => Array.from({ length: 10 }, (_, i) => {
-        return {
-            id: `${i}`,
-            primary: `Item ${i + 1}`,
-            secondary: ['Meta A', 'Meta B', 'Meta C'],
-            selected: false
-        };
-    }));
-    const itemsToRender = useMemo(() => {
-        return menuHelpers.mapTree(items, (item, index) => {
-            return {
-                ...item,
-                visual: args.showItemVisual ? <Avatar name={item.primary}/> : undefined,
-                secondary: args.showItemSecondary ? item.secondary : undefined,
-                disabled: (index + 1) % 2 === 0
-            };
-        });
-    }, [items, args.showItemVisual, args.showItemSecondary]);
-    useEffect(() => {
-        setItems(cur => {
-            return menuHelpers.mapTree(cur, item => {
-                return { ...item, count: args.showItemCount ? Math.ceil(Math.random() * 10) : undefined };
-            });
-        });
-    }, [args.showItemCount]);
-    return (<MenuButton text={args.text} variant={args.variant} icon={args.showIcon ? 'user-list-solid' : undefined} iconOnly={args.iconOnly} menu={{
-            mode: 'action',
-            items: itemsToRender,
-            onItemClick: args.onItemClick
-        }}/>);
-};
-MenuButtonDisabledItems.args = {
-    text: 'Actions'
-};
-//# sourceMappingURL=MenuButton.stories.jsx.map

package/jsx/core/MenuButton/MenuButton.stories.jsx.map

@@ -1 +0,0 @@
-{"version":3,"file":"MenuButton.stories.jsx","sourceRoot":"","sources":["../../../src/core/MenuButton/MenuButton.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport { useState, useMemo, useEffect } from 'react';\n\nimport { Avatar, Button, Flex, MenuButton, menuHelpers } from '@pega/cosmos-react-core';\nimport type { MenuButtonProps, MenuItemProps, MenuProps } from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/MenuButton',\n  component: MenuButton,\n  args: {\n    variant: 'secondary',\n    showIcon: true,\n    iconOnly: false,\n    showItemVisual: true,\n    showItemSecondary: true,\n    showItemCount: true\n  },\n  argTypes: {\n    text: { control: { type: 'text' } },\n    variant: {\n      options: ['primary', 'secondary', 'simple', 'link', 'text'],\n      control: { type: 'select' }\n    },\n    showIcon: { control: { type: 'boolean' } },\n    iconOnly: { control: { type: 'boolean' } },\n    showItemVisual: { control: { type: 'boolean' } },\n    showItemSecondary: { control: { type: 'boolean' } },\n    showItemCount: { control: { type: 'boolean' } }\n  }\n} as Meta;\n\ntype MenuButtonStoryProps = MenuButtonProps & {\n  showIcon?: boolean;\n  showItemVisual?: boolean;\n  showItemSecondary?: boolean;\n  showItemCount?: boolean;\n  onItemClick?: () => void;\n};\n\nexport const MenuButtonAction: StoryFn<MenuButtonStoryProps> = (args: MenuButtonStoryProps) => {\n  const [items, setItems] = useState<MenuProps['items']>(() =>\n    Array.from({ length: 10 }, (_, i) => {\n      return {\n        id: `${i}`,\n        primary: `Item ${i + 1}`,\n        secondary: ['Meta A', 'Meta B', 'Meta C']\n      };\n    })\n  );\n\n  const itemsToRender = useMemo(() => {\n    return menuHelpers.mapTree(items, item => {\n      return {\n        ...item,\n        visual: args.showItemVisual ? <Avatar name={item.primary} /> : undefined,\n        secondary: args.showItemSecondary ? item.secondary : undefined\n      };\n    });\n  }, [items, args.showItemVisual, args.showItemSecondary]);\n\n  useEffect(() => {\n    setItems(cur => {\n      return menuHelpers.mapTree(cur, item => {\n        return { ...item, count: args.showItemCount ? Math.ceil(Math.random() * 10) : undefined };\n      });\n    });\n  }, [args.showItemCount]);\n\n  return (\n    <MenuButton\n      text={args.text}\n      variant={args.variant}\n      icon={args.showIcon ? 'user-list-solid' : undefined}\n      iconOnly={args.iconOnly}\n      menu={{\n        mode: 'action',\n        items: itemsToRender,\n        onItemClick: () => {}\n      }}\n    />\n  );\n};\n\nMenuButtonAction.args = {\n  text: 'Actions'\n};\n\nexport const MenuButtonSingleSelect: StoryFn<MenuButtonStoryProps> = (\n  args: MenuButtonStoryProps\n) => {\n  const [items, setItems] = useState<MenuProps['items']>(() =>\n    Array.from({ length: 10 }, (_, i) => {\n      return {\n        id: `${i}`,\n        primary: `Item ${i + 1}`,\n        secondary: ['Meta A', 'Meta B', 'Meta C'],\n        selected: false\n      };\n    })\n  );\n  const handleMenuItemClick = (id: MenuItemProps['id']) => {\n    setItems(cur => menuHelpers.toggleSelected(cur, id, 'single-select'));\n  };\n\n  const itemsToRender = useMemo(() => {\n    return menuHelpers.mapTree(items, item => {\n      return {\n        ...item,\n        visual: args.showItemVisual ? <Avatar name={item.primary} /> : undefined,\n        secondary: args.showItemSecondary ? item.secondary : undefined\n      };\n    });\n  }, [items, args.showItemVisual, args.showItemSecondary]);\n\n  const buttonText = useMemo(() => {\n    const selected = menuHelpers.getSelected(items)[0];\n    return selected ? selected.primary : args.text;\n  }, [items]);\n\n  useEffect(() => {\n    setItems(cur => {\n      return menuHelpers.mapTree(cur, item => {\n        return { ...item, count: args.showItemCount ? Math.ceil(Math.random() * 10) : undefined };\n      });\n    });\n  }, [args.showItemCount]);\n\n  return (\n    <MenuButton\n      text={buttonText}\n      variant={args.variant}\n      icon={args.showIcon ? 'user-list-solid' : undefined}\n      iconOnly={args.iconOnly}\n      menu={{\n        mode: 'single-select',\n        items: itemsToRender,\n        onItemClick: handleMenuItemClick\n      }}\n    />\n  );\n};\n\nMenuButtonSingleSelect.args = {\n  text: 'Select an item'\n};\n\nexport const MenuButtonMultiSelect: StoryFn<MenuButtonStoryProps> = (\n  args: MenuButtonStoryProps\n) => {\n  const [items, setItems] = useState<MenuProps['items']>(() =>\n    Array.from({ length: 10 }, (_, i) => {\n      return {\n        id: `${i}`,\n        primary: `Item ${i + 1}`,\n        secondary: ['Meta A', 'Meta B', 'Meta C'],\n        selected: false\n      };\n    })\n  );\n\n  const handleMenuItemClick = (id: MenuItemProps['id']) => {\n    setItems(cur => menuHelpers.toggleSelected(cur, id, 'multi-select'));\n  };\n\n  const itemsToRender = useMemo(() => {\n    return menuHelpers.mapTree(items, item => {\n      return {\n        ...item,\n        visual: args.showItemVisual ? <Avatar name={item.primary} /> : undefined,\n        secondary: args.showItemSecondary ? item.secondary : undefined\n      };\n    });\n  }, [items, args.showItemVisual, args.showItemSecondary]);\n\n  const selectionCount = useMemo(() => menuHelpers.getSelected(items).length, [items]);\n\n  useEffect(() => {\n    setItems(cur => {\n      return menuHelpers.mapTree(cur, item => {\n        return { ...item, count: args.showItemCount ? Math.ceil(Math.random() * 10) : undefined };\n      });\n    });\n  }, [args.showItemCount]);\n\n  return (\n    <MenuButton\n      text={args.text}\n      variant={args.variant}\n      icon={args.showIcon ? 'user-list-solid' : undefined}\n      iconOnly={args.iconOnly}\n      count={selectionCount}\n      menu={{\n        mode: 'multi-select',\n        items: itemsToRender,\n        onItemClick: handleMenuItemClick,\n        footer: (\n          <Flex container={{ justify: 'center' }}>\n            <Button\n              variant='link'\n              disabled={selectionCount <= 0}\n              onClick={() => {\n                setItems(cur => {\n                  return menuHelpers.mapTree(cur, item => {\n                    return {\n                      ...item,\n                      selected: false\n                    };\n                  });\n                });\n              }}\n            >\n              Clear\n            </Button>\n          </Flex>\n        )\n      }}\n    />\n  );\n};\n\nMenuButtonMultiSelect.args = {\n  text: 'Select items'\n};\n\nexport const MenuButtonDisabledItems: StoryFn<MenuButtonStoryProps> = (\n  args: MenuButtonStoryProps\n) => {\n  const [items, setItems] = useState<MenuProps['items']>(() =>\n    Array.from({ length: 10 }, (_, i) => {\n      return {\n        id: `${i}`,\n        primary: `Item ${i + 1}`,\n        secondary: ['Meta A', 'Meta B', 'Meta C'],\n        selected: false\n      };\n    })\n  );\n\n  const itemsToRender = useMemo(() => {\n    return menuHelpers.mapTree(items, (item, index) => {\n      return {\n        ...item,\n        visual: args.showItemVisual ? <Avatar name={item.primary} /> : undefined,\n        secondary: args.showItemSecondary ? item.secondary : undefined,\n        disabled: (index + 1) % 2 === 0\n      };\n    });\n  }, [items, args.showItemVisual, args.showItemSecondary]);\n\n  useEffect(() => {\n    setItems(cur => {\n      return menuHelpers.mapTree(cur, item => {\n        return { ...item, count: args.showItemCount ? Math.ceil(Math.random() * 10) : undefined };\n      });\n    });\n  }, [args.showItemCount]);\n\n  return (\n    <MenuButton\n      text={args.text}\n      variant={args.variant}\n      icon={args.showIcon ? 'user-list-solid' : undefined}\n      iconOnly={args.iconOnly}\n      menu={{\n        mode: 'action',\n        items: itemsToRender,\n        onItemClick: args.onItemClick\n      }}\n    />\n  );\n};\n\nMenuButtonDisabledItems.args = {\n  text: 'Actions'\n};\n"]}

package/jsx/core/MetaList/MetaList.stories.d.ts

@@ -1,9 +0,0 @@
-import type { StoryFn } from '@storybook/react';
-import type { MetaListProps } from '@pega/cosmos-react-core';
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
-export default _default;
-interface MetaListStoryProps {
-    wrapItems?: MetaListProps['wrapItems'];
-}
-export declare const MetaListDemo: StoryFn<MetaListStoryProps>;
-//# sourceMappingURL=MetaList.stories.d.ts.map

package/jsx/core/MetaList/MetaList.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"MetaList.stories.d.ts","sourceRoot":"","sources":["../../../src/core/MetaList/MetaList.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAGtD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;;AAE7D,wBAGU;AAEV,UAAU,kBAAkB;IAC1B,SAAS,CAAC,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;CACxC;AAED,eAAO,MAAM,YAAY,EAAE,OAAO,CAAC,kBAAkB,CAgBpD,CAAC"}

package/jsx/core/MetaList/MetaList.stories.jsx

@@ -1,24 +0,0 @@
-import { Link, MetaList, Status } from '@pega/cosmos-react-core';
-export default {
-    title: 'Core/MetaList',
-    component: MetaList
-};
-export const MetaListDemo = (args) => {
-    return (<MetaList wrapItems={args.wrapItems} items={[
-            'email@example.com',
-            <Status variant='success'>Verified</Status>,
-            <>
-          Go to{' '}
-          <Link href='https://www.pega.com' target='_blank'>
-            Pega.com
-          </Link>
-        </>
-        ]}/>);
-};
-MetaListDemo.args = {
-    wrapItems: true
-};
-MetaListDemo.argTypes = {
-    wrapItems: { control: { type: 'boolean' } }
-};
-//# sourceMappingURL=MetaList.stories.jsx.map

package/jsx/core/MetaList/MetaList.stories.jsx.map

@@ -1 +0,0 @@
-{"version":3,"file":"MetaList.stories.jsx","sourceRoot":"","sources":["../../../src/core/MetaList/MetaList.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AAGjE,eAAe;IACb,KAAK,EAAE,eAAe;IACtB,SAAS,EAAE,QAAQ;CACZ,CAAC;AAMV,MAAM,CAAC,MAAM,YAAY,GAAgC,CAAC,IAAwB,EAAE,EAAE;IACpF,OAAO,CACL,CAAC,QAAQ,CACP,SAAS,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAC1B,KAAK,CAAC,CAAC;YACL,mBAAmB;YACnB,CAAC,MAAM,CAAC,OAAO,CAAC,SAAS,CAAC,QAAQ,EAAE,MAAM,CAAC;YAC3C,EACE;eAAK,CAAC,GAAG,CACT;UAAA,CAAC,IAAI,CAAC,IAAI,CAAC,sBAAsB,CAAC,MAAM,CAAC,QAAQ,CAC/C;;UACF,EAAE,IAAI,CACR;QAAA,GAAG;SACJ,CAAC,EACF,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,YAAY,CAAC,IAAI,GAAG;IAClB,SAAS,EAAE,IAAI;CAChB,CAAC;AAEF,YAAY,CAAC,QAAQ,GAAG;IACtB,SAAS,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;CAC5C,CAAC","sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\n\nimport { Link, MetaList, Status } from '@pega/cosmos-react-core';\nimport type { MetaListProps } from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/MetaList',\n  component: MetaList\n} as Meta;\n\ninterface MetaListStoryProps {\n  wrapItems?: MetaListProps['wrapItems'];\n}\n\nexport const MetaListDemo: StoryFn<MetaListStoryProps> = (args: MetaListStoryProps) => {\n  return (\n    <MetaList\n      wrapItems={args.wrapItems}\n      items={[\n        'email@example.com',\n        <Status variant='success'>Verified</Status>,\n        <>\n          Go to{' '}\n          <Link href='https://www.pega.com' target='_blank'>\n            Pega.com\n          </Link>\n        </>\n      ]}\n    />\n  );\n};\n\nMetaListDemo.args = {\n  wrapItems: true\n};\n\nMetaListDemo.argTypes = {\n  wrapItems: { control: { type: 'boolean' } }\n};\n"]}

package/jsx/core/Modal/Modal.mocks.d.ts

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-export type ContentTypes = 'short text' | 'long text' | 'image' | 'table' | 'form (1 column)' | 'form (2 column)' | 'form (3 column)' | 'random';
-export declare const getContent: (contentType: ContentTypes, formColumnWidthFixed: boolean) => import("react").JSX.Element;
-//# sourceMappingURL=Modal.mocks.d.ts.map

package/jsx/core/Modal/Modal.mocks.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Modal.mocks.d.ts","sourceRoot":"","sources":["../../../src/core/Modal/Modal.mocks.tsx"],"names":[],"mappings":";AAQA,MAAM,MAAM,YAAY,GACpB,YAAY,GACZ,WAAW,GACX,OAAO,GACP,OAAO,GACP,iBAAiB,GACjB,iBAAiB,GACjB,iBAAiB,GACjB,QAAQ,CAAC;AAab,eAAO,MAAM,UAAU,gBAAiB,YAAY,wBAAwB,OAAO,gCAiClF,CAAC"}

package/jsx/core/Modal/Modal.mocks.jsx

@@ -1,44 +0,0 @@
-import { Flex, Text } from '@pega/cosmos-react-core';
-import { ImageDemo } from '../Image/Image.stories';
-import { TableDemo } from '../Table/Table.stories';
-import { FormContent } from '../Form/Form.mocks';
-const getRandomContentType = (contentType) => {
-    const contentMap = {
-        text: ['short text', 'long text'],
-        meta: ['image', 'table'],
-        form: ['form (1 column)', 'form (2 column)', 'form (3 column)']
-    };
-    const options = contentMap[contentType];
-    return options[Math.floor(Math.random() * options.length)];
-};
-export const getContent = (contentType, formColumnWidthFixed) => {
-    switch (contentType) {
-        case 'random':
-            return (<Flex container={{ direction: 'column', gap: 4 }}>
-          {getContent(getRandomContentType('text'), false)}
-          {getContent(getRandomContentType('meta'), false)}
-          {getContent(getRandomContentType('form'), formColumnWidthFixed)}
-        </Flex>);
-        case 'image':
-            return <ImageDemo />;
-        case 'table':
-            return <TableDemo />;
-        case 'form (1 column)':
-            return <FormContent cols={1} showActions={false}/>;
-        case 'form (2 column)':
-            return <FormContent cols={2} showActions={false}/>;
-        case 'form (3 column)':
-            return <FormContent cols={3} showActions={false}/>;
-        case 'long text':
-            return (<Text>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum ipsum ipsum, nec
-          sodales risus finibus eget. Proin ornare, ante ac convallis sollicitudin, elit turpis
-          venenatis lorem, vitae viverra eros magna non lectus. Duis ac auctor sapien. Donec
-          malesuada eros ut libero sodales, malesuada ullamcorper lacus eleifend.
-        </Text>);
-        case 'short text':
-        default:
-            return <Text>Lorem ipsum dolor sit amet.</Text>;
-    }
-};
-//# sourceMappingURL=Modal.mocks.jsx.map

package/jsx/core/Modal/Modal.mocks.jsx.map

@@ -1 +0,0 @@
-{"version":3,"file":"Modal.mocks.jsx","sourceRoot":"","sources":["../../../src/core/Modal/Modal.mocks.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAErD,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnD,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnD,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAcjD,MAAM,oBAAoB,GAAG,CAAC,WAA4B,EAAgB,EAAE;IAC1E,MAAM,UAAU,GAA4C;QAC1D,IAAI,EAAE,CAAC,YAAY,EAAE,WAAW,CAAC;QACjC,IAAI,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC;QACxB,IAAI,EAAE,CAAC,iBAAiB,EAAE,iBAAiB,EAAE,iBAAiB,CAAC;KAChE,CAAC;IACF,MAAM,OAAO,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC;IAExC,OAAO,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC;AAC7D,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,WAAyB,EAAE,oBAA6B,EAAE,EAAE;IACrF,QAAQ,WAAW,EAAE;QACnB,KAAK,QAAQ;YACX,OAAO,CACL,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC,CAC/C;UAAA,CAAC,UAAU,CAAC,oBAAoB,CAAC,MAAM,CAAC,EAAE,KAAK,CAAC,CAChD;UAAA,CAAC,UAAU,CAAC,oBAAoB,CAAC,MAAM,CAAC,EAAE,KAAK,CAAC,CAChD;UAAA,CAAC,UAAU,CAAC,oBAAoB,CAAC,MAAM,CAAC,EAAE,oBAAoB,CAAC,CACjE;QAAA,EAAE,IAAI,CAAC,CACR,CAAC;QACJ,KAAK,OAAO;YACV,OAAO,CAAC,SAAS,CAAC,AAAD,EAAG,CAAC;QACvB,KAAK,OAAO;YACV,OAAO,CAAC,SAAS,CAAC,AAAD,EAAG,CAAC;QACvB,KAAK,iBAAiB;YACpB,OAAO,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,KAAK,CAAC,EAAG,CAAC;QACtD,KAAK,iBAAiB;YACpB,OAAO,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,KAAK,CAAC,EAAG,CAAC;QACtD,KAAK,iBAAiB;YACpB,OAAO,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,KAAK,CAAC,EAAG,CAAC;QACtD,KAAK,WAAW;YACd,OAAO,CACL,CAAC,IAAI,CACH;;;;;QAIF,EAAE,IAAI,CAAC,CACR,CAAC;QACJ,KAAK,YAAY,CAAC;QAClB;YACE,OAAO,CAAC,IAAI,CAAC,2BAA2B,EAAE,IAAI,CAAC,CAAC;KACnD;AACH,CAAC,CAAC","sourcesContent":["import { Flex, Text } from '@pega/cosmos-react-core';\n\nimport { ImageDemo } from '../Image/Image.stories';\nimport { TableDemo } from '../Table/Table.stories';\nimport { FormContent } from '../Form/Form.mocks';\n\ntype ContentSections = 'text' | 'meta' | 'form';\n\nexport type ContentTypes =\n  | 'short text'\n  | 'long text'\n  | 'image'\n  | 'table'\n  | 'form (1 column)'\n  | 'form (2 column)'\n  | 'form (3 column)'\n  | 'random';\n\nconst getRandomContentType = (contentType: ContentSections): ContentTypes => {\n  const contentMap: Record<ContentSections, ContentTypes[]> = {\n    text: ['short text', 'long text'],\n    meta: ['image', 'table'],\n    form: ['form (1 column)', 'form (2 column)', 'form (3 column)']\n  };\n  const options = contentMap[contentType];\n\n  return options[Math.floor(Math.random() * options.length)];\n};\n\nexport const getContent = (contentType: ContentTypes, formColumnWidthFixed: boolean) => {\n  switch (contentType) {\n    case 'random':\n      return (\n        <Flex container={{ direction: 'column', gap: 4 }}>\n          {getContent(getRandomContentType('text'), false)}\n          {getContent(getRandomContentType('meta'), false)}\n          {getContent(getRandomContentType('form'), formColumnWidthFixed)}\n        </Flex>\n      );\n    case 'image':\n      return <ImageDemo />;\n    case 'table':\n      return <TableDemo />;\n    case 'form (1 column)':\n      return <FormContent cols={1} showActions={false} />;\n    case 'form (2 column)':\n      return <FormContent cols={2} showActions={false} />;\n    case 'form (3 column)':\n      return <FormContent cols={3} showActions={false} />;\n    case 'long text':\n      return (\n        <Text>\n          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum ipsum ipsum, nec\n          sodales risus finibus eget. Proin ornare, ante ac convallis sollicitudin, elit turpis\n          venenatis lorem, vitae viverra eros magna non lectus. Duis ac auctor sapien. Donec\n          malesuada eros ut libero sodales, malesuada ullamcorper lacus eleifend.\n        </Text>\n      );\n    case 'short text':\n    default:\n      return <Text>Lorem ipsum dolor sit amet.</Text>;\n  }\n};\n"]}