@pega/cosmos-react-demos 6.6.0 → 6.6.1

package/jsx/core/Popover/Popover.mocks.jsx

@@ -1,114 +0,0 @@
-import styled, { createGlobalStyle, css } from 'styled-components';
-import { createContext, useLayoutEffect, useMemo } from 'react';
-import { defaultThemeProp, Popover, useElement } from '@pega/cosmos-react-core';
-const PopoverMockContext = createContext({
-    arrow: false,
-    primaryPlacement: 'bottom',
-    secondaryPlacement: 'none',
-    contentSize: 1
-});
-const Target = styled.div ``;
-const PopoverMockHeader = styled.div ``;
-const PopoverMockContent = styled.div(() => {
-    return css `
-    overflow: auto;
-  `;
-});
-const PopoverMockFooter = styled.div ``;
-const MockContentBlock = styled.div(({ theme }) => {
-    return css `
-    min-width: ${theme.base['content-width'].md};
-    padding-block: ${theme.base.spacing};
-    border-block-end: 0.0625rem solid ${theme.base.palette['border-line']};
-
-    &:first-child {
-      padding-block-start: 0;
-    }
-
-    &:last-child {
-      border: none;
-      padding-block-end: 0;
-    }
-  `;
-});
-MockContentBlock.defaultProps = defaultThemeProp;
-const PopoverMock = styled(Popover)(({ theme }) => {
-    return css `
-    display: flex;
-    flex-direction: column;
-
-    ${PopoverMockHeader},
-    ${PopoverMockContent},
-    ${PopoverMockFooter} {
-      padding: calc(2 * ${theme.base.spacing});
-    }
-  `;
-});
-PopoverMock.defaultProps = defaultThemeProp;
-const GlobalStyle = createGlobalStyle(({ theme }) => {
-    return css `
-    :root {
-      &::before,
-      &::after {
-        position: fixed;
-        content: '';
-        background-color: purple;
-        display: block;
-      }
-
-      &::before {
-        left: 0;
-        right: 0;
-        top: calc(50% - 0.0625rem);
-        height: 0.125rem;
-      }
-
-      &::after {
-        top: 0;
-        bottom: 0;
-        left: calc(50% - 0.0625rem);
-        width: 0.125rem;
-      }
-    }
-
-    body {
-      width: calc(200% - 2rem);
-      height: calc(200% - 2rem);
-    }
-
-    ${Target} {
-      position: absolute;
-      width: 2rem;
-      height: 2rem;
-      inset: 100% auto auto 100%;
-      transform: translate(-2rem, -2rem);
-      background-color: ${theme.base.palette['foreground-color']};
-    }
-  `;
-});
-export const PlaceAndContainMock = ({ arrow, primaryPlacement, secondaryPlacement, contentSize }) => {
-    const [target, setTarget] = useElement(null);
-    useLayoutEffect(() => {
-        const vw = document.documentElement.clientWidth;
-        const vh = document.documentElement.clientHeight;
-        window.scrollTo(vw / 2 - 16, vh / 2 - 16);
-    }, []);
-    const mockContent = Array.from({ length: contentSize }, (_, i) => {
-        return <MockContentBlock key={i}>Content item {i + 1}</MockContentBlock>;
-    });
-    const ctxValue = useMemo(() => {
-        return { arrow, primaryPlacement, secondaryPlacement, contentSize };
-    }, [arrow, primaryPlacement, secondaryPlacement, contentSize]);
-    return (<>
-      <GlobalStyle />
-      <PopoverMockContext.Provider value={ctxValue}>
-        <Target ref={setTarget}/>
-        <PopoverMock arrow={arrow} target={target} placement={`${primaryPlacement}${secondaryPlacement && secondaryPlacement !== 'none' ? `-${secondaryPlacement}` : ''}`}>
-          <PopoverMockHeader>Header</PopoverMockHeader>
-          <PopoverMockContent>{mockContent}</PopoverMockContent>
-          <PopoverMockFooter>Footer</PopoverMockFooter>
-        </PopoverMock>
-      </PopoverMockContext.Provider>
-    </>);
-};
-//# sourceMappingURL=Popover.mocks.jsx.map

package/jsx/core/Popover/Popover.mocks.jsx.map

@@ -1 +0,0 @@
-{"version":3,"file":"Popover.mocks.jsx","sourceRoot":"","sources":["../../../src/core/Popover/Popover.mocks.tsx"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,iBAAiB,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,aAAa,EAAE,eAAe,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEhE,OAAO,EAAE,gBAAgB,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAShF,MAAM,kBAAkB,GAAG,aAAa,CAA2B;IACjE,KAAK,EAAE,KAAK;IACZ,gBAAgB,EAAE,QAAQ;IAC1B,kBAAkB,EAAE,MAAM;IAC1B,WAAW,EAAE,CAAC;CACf,CAAC,CAAC;AAEH,MAAM,MAAM,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AAE5B,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AAEvC,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAAC,GAAG,EAAE;IACzC,OAAO,GAAG,CAAA;;GAET,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AAEvC,MAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAChD,OAAO,GAAG,CAAA;iBACK,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,EAAE;qBAC1B,KAAK,CAAC,IAAI,CAAC,OAAO;wCACC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;;;;;;;;;;GAUtE,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjD,MAAM,WAAW,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAChD,OAAO,GAAG,CAAA;;;;MAIN,iBAAiB;MACjB,kBAAkB;MAClB,iBAAiB;0BACG,KAAK,CAAC,IAAI,CAAC,OAAO;;GAEzC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,WAAW,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE5C,MAAM,WAAW,GAAG,iBAAiB,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAClD,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MA8BN,MAAM;;;;;;0BAMc,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,kBAAkB,CAAC;;GAE7D,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,EAClC,KAAK,EACL,gBAAgB,EAChB,kBAAkB,EAClB,WAAW,EACc,EAAE,EAAE;IAC7B,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,UAAU,CAAiB,IAAI,CAAC,CAAC;IAE7D,eAAe,CAAC,GAAG,EAAE;QACnB,MAAM,EAAE,GAAG,QAAQ,CAAC,eAAe,CAAC,WAAW,CAAC;QAChD,MAAM,EAAE,GAAG,QAAQ,CAAC,eAAe,CAAC,YAAY,CAAC;QAEjD,MAAM,CAAC,QAAQ,CAAC,EAAE,GAAG,CAAC,GAAG,EAAE,EAAE,EAAE,GAAG,CAAC,GAAG,EAAE,CAAC,CAAC;IAC5C,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,WAAW,GAAG,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,WAAW,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;QAC/D,OAAO,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,GAAG,CAAC,CAAC,EAAE,gBAAgB,CAAC,CAAC;IAC3E,CAAC,CAAC,CAAC;IAEH,MAAM,QAAQ,GAAG,OAAO,CAAC,GAAG,EAAE;QAC5B,OAAO,EAAE,KAAK,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,WAAW,EAAE,CAAC;IACtE,CAAC,EAAE,CAAC,KAAK,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,WAAW,CAAC,CAAC,CAAC;IAE/D,OAAO,CACL,EACE;MAAA,CAAC,WAAW,CAAC,AAAD,EACZ;MAAA,CAAC,kBAAkB,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,QAAQ,CAAC,CAC3C;QAAA,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,SAAS,CAAC,EACvB;QAAA,CAAC,WAAW,CACV,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,MAAM,CAAC,CAAC,MAAM,CAAC,CACf,SAAS,CAAC,CAAC,GAAG,gBAAgB,GAC5B,kBAAkB,IAAI,kBAAkB,KAAK,MAAM,CAAC,CAAC,CAAC,IAAI,kBAAkB,EAAE,CAAC,CAAC,CAAC,EACnF,EAAE,CAAC,CAEH;UAAA,CAAC,iBAAiB,CAAC,MAAM,EAAE,iBAAiB,CAC5C;UAAA,CAAC,kBAAkB,CAAC,CAAC,WAAW,CAAC,EAAE,kBAAkB,CACrD;UAAA,CAAC,iBAAiB,CAAC,MAAM,EAAE,iBAAiB,CAC9C;QAAA,EAAE,WAAW,CACf;MAAA,EAAE,kBAAkB,CAAC,QAAQ,CAC/B;IAAA,GAAG,CACJ,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import styled, { createGlobalStyle, css } from 'styled-components';\nimport { createContext, useLayoutEffect, useMemo } from 'react';\n\nimport { defaultThemeProp, Popover, useElement } from '@pega/cosmos-react-core';\nimport type { PopoverProps } from '@pega/cosmos-react-core';\n\nexport interface PlaceAndContainMockProps extends Pick<PopoverProps, 'arrow'> {\n  primaryPlacement: 'bottom' | 'top' | 'left' | 'right' | 'none';\n  secondaryPlacement: 'start' | 'end' | 'none';\n  contentSize: number;\n}\n\nconst PopoverMockContext = createContext<PlaceAndContainMockProps>({\n  arrow: false,\n  primaryPlacement: 'bottom',\n  secondaryPlacement: 'none',\n  contentSize: 1\n});\n\nconst Target = styled.div``;\n\nconst PopoverMockHeader = styled.div``;\n\nconst PopoverMockContent = styled.div(() => {\n  return css`\n    overflow: auto;\n  `;\n});\n\nconst PopoverMockFooter = styled.div``;\n\nconst MockContentBlock = styled.div(({ theme }) => {\n  return css`\n    min-width: ${theme.base['content-width'].md};\n    padding-block: ${theme.base.spacing};\n    border-block-end: 0.0625rem solid ${theme.base.palette['border-line']};\n\n    &:first-child {\n      padding-block-start: 0;\n    }\n\n    &:last-child {\n      border: none;\n      padding-block-end: 0;\n    }\n  `;\n});\n\nMockContentBlock.defaultProps = defaultThemeProp;\n\nconst PopoverMock = styled(Popover)(({ theme }) => {\n  return css`\n    display: flex;\n    flex-direction: column;\n\n    ${PopoverMockHeader},\n    ${PopoverMockContent},\n    ${PopoverMockFooter} {\n      padding: calc(2 * ${theme.base.spacing});\n    }\n  `;\n});\n\nPopoverMock.defaultProps = defaultThemeProp;\n\nconst GlobalStyle = createGlobalStyle(({ theme }) => {\n  return css`\n    :root {\n      &::before,\n      &::after {\n        position: fixed;\n        content: '';\n        background-color: purple;\n        display: block;\n      }\n\n      &::before {\n        left: 0;\n        right: 0;\n        top: calc(50% - 0.0625rem);\n        height: 0.125rem;\n      }\n\n      &::after {\n        top: 0;\n        bottom: 0;\n        left: calc(50% - 0.0625rem);\n        width: 0.125rem;\n      }\n    }\n\n    body {\n      width: calc(200% - 2rem);\n      height: calc(200% - 2rem);\n    }\n\n    ${Target} {\n      position: absolute;\n      width: 2rem;\n      height: 2rem;\n      inset: 100% auto auto 100%;\n      transform: translate(-2rem, -2rem);\n      background-color: ${theme.base.palette['foreground-color']};\n    }\n  `;\n});\n\nexport const PlaceAndContainMock = ({\n  arrow,\n  primaryPlacement,\n  secondaryPlacement,\n  contentSize\n}: PlaceAndContainMockProps) => {\n  const [target, setTarget] = useElement<HTMLDivElement>(null);\n\n  useLayoutEffect(() => {\n    const vw = document.documentElement.clientWidth;\n    const vh = document.documentElement.clientHeight;\n\n    window.scrollTo(vw / 2 - 16, vh / 2 - 16);\n  }, []);\n\n  const mockContent = Array.from({ length: contentSize }, (_, i) => {\n    return <MockContentBlock key={i}>Content item {i + 1}</MockContentBlock>;\n  });\n\n  const ctxValue = useMemo(() => {\n    return { arrow, primaryPlacement, secondaryPlacement, contentSize };\n  }, [arrow, primaryPlacement, secondaryPlacement, contentSize]);\n\n  return (\n    <>\n      <GlobalStyle />\n      <PopoverMockContext.Provider value={ctxValue}>\n        <Target ref={setTarget} />\n        <PopoverMock\n          arrow={arrow}\n          target={target}\n          placement={`${primaryPlacement}${\n            secondaryPlacement && secondaryPlacement !== 'none' ? `-${secondaryPlacement}` : ''\n          }`}\n        >\n          <PopoverMockHeader>Header</PopoverMockHeader>\n          <PopoverMockContent>{mockContent}</PopoverMockContent>\n          <PopoverMockFooter>Footer</PopoverMockFooter>\n        </PopoverMock>\n      </PopoverMockContext.Provider>\n    </>\n  );\n};\n"]}

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

@@ -1,13 +0,0 @@
-import type { StoryFn } from '@storybook/react';
-import type { PopoverProps } from '@pega/cosmos-react-core';
-import type { PlaceAndContainMockProps } from './Popover.mocks';
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
-export default _default;
-export declare const PopoverDemo: StoryFn<Pick<PopoverProps, 'arrow' | 'showDelay' | 'hideDelay' | 'placement'>>;
-export declare const PopoverGroups: StoryFn;
-export declare const PlaceAndContain: StoryFn<PlaceAndContainMockProps & {
-    placement?: never;
-    showDelay?: never;
-    hideDelay?: never;
-}>;
-//# sourceMappingURL=Popover.stories.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"Popover.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Popover/Popover.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;AActD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAG5D,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,iBAAiB,CAAC;;AAEhE,wBAkCU;AAEV,eAAO,MAAM,WAAW,EAAE,OAAO,CAC/B,IAAI,CAAC,YAAY,EAAE,OAAO,GAAG,WAAW,GAAG,WAAW,GAAG,WAAW,CAAC,CAqFtE,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,OAmF3B,CAAC;AASF,eAAO,MAAM,eAAe,EAAE,OAAO,CACnC,wBAAwB,GAAG;IAAE,SAAS,CAAC,EAAE,KAAK,CAAC;IAAC,SAAS,CAAC,EAAE,KAAK,CAAC;IAAC,SAAS,CAAC,EAAE,KAAK,CAAA;CAAE,CAWvF,CAAC"}

package/jsx/core/Popover/Popover.stories.jsx

@@ -1,209 +0,0 @@
-import { useState } from 'react';
-import { Button, Card, CardContent, Flex, Link, Popover, Text, Tooltip, useElement } from '@pega/cosmos-react-core';
-import { PlaceAndContainMock } from './Popover.mocks';
-export default {
-    title: 'Core/Popover',
-    component: Popover,
-    args: {
-        arrow: false,
-        showDelay: 'none',
-        hideDelay: 'none',
-        placement: 'bottom'
-    },
-    argTypes: {
-        arrow: { control: { type: 'boolean' } },
-        showDelay: { options: ['none', 'short', 'long'], control: { type: 'select' } },
-        hideDelay: { options: ['none', 'short', 'long'], control: { type: 'select' } },
-        placement: {
-            options: [
-                'bottom',
-                'bottom-start',
-                'bottom-end',
-                'top',
-                'top-start',
-                'top-end',
-                'left',
-                'left-start',
-                'left-end',
-                'right',
-                'right-start',
-                'right-end',
-                'auto',
-                'auto-start',
-                'auto-end'
-            ],
-            control: { type: 'select' }
-        }
-    }
-};
-export const PopoverDemo = (args) => {
-    const [mountHoverPopover, setMountHoverPopover] = useState(false);
-    const setHoverPopoverEl = useElement()[1];
-    const [textEl, setTextEl] = useElement();
-    const [mountClickPopover, setMountClickPopover] = useState(false);
-    const setClickPopoverEl = useElement()[1];
-    const [buttonEl, setButtonEl] = useElement();
-    const toggleHoverPopover = ({ type, key }) => {
-        if (type === 'keydown') {
-            if (key === 'Escape')
-                setMountHoverPopover(false);
-            return;
-        }
-        setMountHoverPopover(type === 'mouseover' || type === 'focus');
-    };
-    const hoverMountingHandlers = {
-        onMouseOver: toggleHoverPopover,
-        onMouseOut: toggleHoverPopover,
-        onKeyDown: toggleHoverPopover,
-        onFocus: toggleHoverPopover,
-        onBlur: toggleHoverPopover
-    };
-    const toggleClickPopover = ({ type, key }) => {
-        if (type === 'keydown') {
-            if (key === 'Escape')
-                setMountClickPopover(false);
-            return;
-        }
-        setMountClickPopover(type === 'click' || type === 'focus');
-    };
-    const clickMountingHandlers = {
-        onClick: toggleClickPopover,
-        onKeyDown: toggleClickPopover,
-        onFocus: toggleClickPopover,
-        onBlur: toggleClickPopover
-    };
-    return (<Flex container={{ justify: 'center', pad: 4, gap: 4, alignItems: 'center' }}>
-      <Text ref={setTextEl} variant='h1' {...hoverMountingHandlers}>
-        Hover Over Me
-      </Text>
-      <Popover ref={setHoverPopoverEl} show={mountHoverPopover} target={textEl} portal arrow={args.arrow} showDelay={args.showDelay} hideDelay={args.hideDelay} placement={args.placement} {...hoverMountingHandlers}>
-        <Card>
-          <CardContent>
-            <Text>This Popover appears on hover!</Text>
-          </CardContent>
-        </Card>
-      </Popover>
-      <Button ref={setButtonEl} {...clickMountingHandlers}>
-        Click Me
-      </Button>
-      <Popover ref={setClickPopoverEl} show={mountClickPopover} target={buttonEl} portal arrow={args.arrow} showDelay={args.showDelay} hideDelay={args.hideDelay} placement={args.placement} {...clickMountingHandlers}>
-        <Card>
-          <CardContent>
-            <Text>This Popover appears on click!</Text>
-          </CardContent>
-        </Card>
-      </Popover>
-    </Flex>);
-};
-export const PopoverGroups = () => {
-    const [firstTooltipButton, setFirstTooltipButton] = useElement();
-    const [secondTooltipButton, setSecondTooltipButton] = useElement();
-    const [thirdTooltipButton, setThirdTooltipButton] = useElement();
-    const [firstPopoverButton, setFirstPopoverButton] = useElement();
-    const [secondPopoverButton, setSecondPopoverButton] = useElement();
-    const [thirdPopoverButton, setThirdPopoverButton] = useElement();
-    const [showFirstPopover, setShowFirstPopover] = useState(false);
-    const [showSecondPopover, setShowSecondPopover] = useState(false);
-    const [showThirdPopover, setShowThirdPopover] = useState(false);
-    return (<Flex container={{ direction: 'column', gap: 4 }}>
-      <Text variant='h2'>groupId: link_preview</Text>
-      <div>
-        <Link href='http://www.google.com' previewable>
-          Previewable Link
-        </Link>
-        <Link href='http://www.google.com' previewable>
-          Previewable Link
-        </Link>
-        <Link href='http://www.google.com' previewable>
-          Previewable Link
-        </Link>
-      </div>
-      <Text variant='h2'>groupId: tooltip</Text>
-      <div>
-        <Button ref={setFirstTooltipButton} aria-describedby='first-tooltip'>
-          Hover me
-        </Button>
-        <Tooltip target={firstTooltipButton} id='first-tooltip'>
-          This is a tooltip for the first button.
-        </Tooltip>
-        <Button ref={setSecondTooltipButton} aria-describedby='second-tooltip'>
-          Hover me
-        </Button>
-        <Tooltip target={secondTooltipButton} id='second-tooltip'>
-          This is a tooltip for the second button.
-        </Tooltip>
-        <Button ref={setThirdTooltipButton} aria-describedby='third-tooltip'>
-          Hover me
-        </Button>
-        <Tooltip target={thirdTooltipButton} id='third-tooltip'>
-          This is a tooltip for the third button.
-        </Tooltip>
-      </div>
-      <Text variant='h2'>No groupId</Text>
-      <div>
-        <Button ref={setFirstPopoverButton} onClick={() => setShowFirstPopover(curr => !curr)}>
-          Click me
-        </Button>
-        <Popover show={showFirstPopover} target={firstPopoverButton}>
-          <Card>
-            <CardContent>
-              <Text>Popover #1</Text>
-            </CardContent>
-          </Card>
-        </Popover>
-        <Button ref={setSecondPopoverButton} onClick={() => setShowSecondPopover(curr => !curr)}>
-          Click me
-        </Button>
-        <Popover show={showSecondPopover} target={secondPopoverButton}>
-          <Card>
-            <CardContent>
-              <Text>Popover #2</Text>
-            </CardContent>
-          </Card>
-        </Popover>
-        <Button ref={setThirdPopoverButton} onClick={() => setShowThirdPopover(curr => !curr)}>
-          Click me
-        </Button>
-        <Popover show={showThirdPopover} target={thirdPopoverButton}>
-          <Card>
-            <CardContent>
-              <Text>Popover #3</Text>
-            </CardContent>
-          </Card>
-        </Popover>
-      </div>
-    </Flex>);
-};
-PopoverGroups.argTypes = {
-    arrow: { table: { disable: true } },
-    showDelay: { table: { disable: true } },
-    hideDelay: { table: { disable: true } },
-    placement: { table: { disable: true } }
-};
-export const PlaceAndContain = (args) => {
-    return (<PlaceAndContainMock {...args} arrow={args.arrow} primaryPlacement={args.primaryPlacement} secondaryPlacement={args.secondaryPlacement} contentSize={args.contentSize}/>);
-};
-PlaceAndContain.args = {
-    arrow: false,
-    primaryPlacement: 'bottom',
-    secondaryPlacement: 'none',
-    contentSize: 15
-};
-PlaceAndContain.argTypes = {
-    arrow: { control: { type: 'boolean' } },
-    primaryPlacement: {
-        control: { type: 'select' },
-        options: ['bottom', 'top', 'left', 'right', 'none']
-    },
-    secondaryPlacement: {
-        control: { type: 'select' },
-        options: ['none', 'start', 'end']
-    },
-    contentSize: {
-        control: { type: 'range', min: 1, max: 30, step: 1 }
-    },
-    placement: { table: { disable: true } },
-    showDelay: { table: { disable: true } },
-    hideDelay: { table: { disable: true } }
-};
-//# sourceMappingURL=Popover.stories.jsx.map

package/jsx/core/Popover/Popover.stories.jsx.map

@@ -1 +0,0 @@
-{"version":3,"file":"Popover.stories.jsx","sourceRoot":"","sources":["../../../src/core/Popover/Popover.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport { useState } from 'react';\n\nimport {\n  Button,\n  Card,\n  CardContent,\n  Flex,\n  Link,\n  Popover,\n  Text,\n  Tooltip,\n  useElement\n} from '@pega/cosmos-react-core';\nimport type { PopoverProps } from '@pega/cosmos-react-core';\n\nimport { PlaceAndContainMock } from './Popover.mocks';\nimport type { PlaceAndContainMockProps } from './Popover.mocks';\n\nexport default {\n  title: 'Core/Popover',\n  component: Popover,\n  args: {\n    arrow: false,\n    showDelay: 'none',\n    hideDelay: 'none',\n    placement: 'bottom'\n  },\n  argTypes: {\n    arrow: { control: { type: 'boolean' } },\n    showDelay: { options: ['none', 'short', 'long'], control: { type: 'select' } },\n    hideDelay: { options: ['none', 'short', 'long'], control: { type: 'select' } },\n    placement: {\n      options: [\n        'bottom',\n        'bottom-start',\n        'bottom-end',\n        'top',\n        'top-start',\n        'top-end',\n        'left',\n        'left-start',\n        'left-end',\n        'right',\n        'right-start',\n        'right-end',\n        'auto',\n        'auto-start',\n        'auto-end'\n      ],\n      control: { type: 'select' }\n    }\n  }\n} as Meta;\n\nexport const PopoverDemo: StoryFn<\n  Pick<PopoverProps, 'arrow' | 'showDelay' | 'hideDelay' | 'placement'>\n> = (args: Pick<PopoverProps, 'arrow' | 'showDelay' | 'hideDelay' | 'placement'>) => {\n  const [mountHoverPopover, setMountHoverPopover] = useState(false);\n  const setHoverPopoverEl = useElement<HTMLDivElement>()[1];\n  const [textEl, setTextEl] = useElement<HTMLDivElement>();\n\n  const [mountClickPopover, setMountClickPopover] = useState(false);\n  const setClickPopoverEl = useElement<HTMLDivElement>()[1];\n  const [buttonEl, setButtonEl] = useElement<HTMLButtonElement>();\n\n  const toggleHoverPopover = ({ type, key }: { type: string; key: string }) => {\n    if (type === 'keydown') {\n      if (key === 'Escape') setMountHoverPopover(false);\n      return;\n    }\n    setMountHoverPopover(type === 'mouseover' || type === 'focus');\n  };\n\n  const hoverMountingHandlers = {\n    onMouseOver: toggleHoverPopover,\n    onMouseOut: toggleHoverPopover,\n    onKeyDown: toggleHoverPopover,\n    onFocus: toggleHoverPopover,\n    onBlur: toggleHoverPopover\n  };\n\n  const toggleClickPopover = ({ type, key }: { type: string; key: string }) => {\n    if (type === 'keydown') {\n      if (key === 'Escape') setMountClickPopover(false);\n      return;\n    }\n    setMountClickPopover(type === 'click' || type === 'focus');\n  };\n\n  const clickMountingHandlers = {\n    onClick: toggleClickPopover,\n    onKeyDown: toggleClickPopover,\n    onFocus: toggleClickPopover,\n    onBlur: toggleClickPopover\n  };\n\n  return (\n    <Flex container={{ justify: 'center', pad: 4, gap: 4, alignItems: 'center' }}>\n      <Text ref={setTextEl} variant='h1' {...hoverMountingHandlers}>\n        Hover Over Me\n      </Text>\n      <Popover\n        ref={setHoverPopoverEl}\n        show={mountHoverPopover}\n        target={textEl}\n        portal\n        arrow={args.arrow}\n        showDelay={args.showDelay}\n        hideDelay={args.hideDelay}\n        placement={args.placement}\n        {...hoverMountingHandlers}\n      >\n        <Card>\n          <CardContent>\n            <Text>This Popover appears on hover!</Text>\n          </CardContent>\n        </Card>\n      </Popover>\n      <Button ref={setButtonEl} {...clickMountingHandlers}>\n        Click Me\n      </Button>\n      <Popover\n        ref={setClickPopoverEl}\n        show={mountClickPopover}\n        target={buttonEl}\n        portal\n        arrow={args.arrow}\n        showDelay={args.showDelay}\n        hideDelay={args.hideDelay}\n        placement={args.placement}\n        {...clickMountingHandlers}\n      >\n        <Card>\n          <CardContent>\n            <Text>This Popover appears on click!</Text>\n          </CardContent>\n        </Card>\n      </Popover>\n    </Flex>\n  );\n};\n\nexport const PopoverGroups: StoryFn = () => {\n  const [firstTooltipButton, setFirstTooltipButton] = useElement<HTMLButtonElement>();\n  const [secondTooltipButton, setSecondTooltipButton] = useElement<HTMLButtonElement>();\n  const [thirdTooltipButton, setThirdTooltipButton] = useElement<HTMLButtonElement>();\n\n  const [firstPopoverButton, setFirstPopoverButton] = useElement<HTMLButtonElement>();\n  const [secondPopoverButton, setSecondPopoverButton] = useElement<HTMLButtonElement>();\n  const [thirdPopoverButton, setThirdPopoverButton] = useElement<HTMLButtonElement>();\n\n  const [showFirstPopover, setShowFirstPopover] = useState(false);\n  const [showSecondPopover, setShowSecondPopover] = useState(false);\n  const [showThirdPopover, setShowThirdPopover] = useState(false);\n\n  return (\n    <Flex container={{ direction: 'column', gap: 4 }}>\n      <Text variant='h2'>groupId: link_preview</Text>\n      <div>\n        <Link href='http://www.google.com' previewable>\n          Previewable Link\n        </Link>\n        <Link href='http://www.google.com' previewable>\n          Previewable Link\n        </Link>\n        <Link href='http://www.google.com' previewable>\n          Previewable Link\n        </Link>\n      </div>\n      <Text variant='h2'>groupId: tooltip</Text>\n      <div>\n        <Button ref={setFirstTooltipButton} aria-describedby='first-tooltip'>\n          Hover me\n        </Button>\n        <Tooltip target={firstTooltipButton} id='first-tooltip'>\n          This is a tooltip for the first button.\n        </Tooltip>\n        <Button ref={setSecondTooltipButton} aria-describedby='second-tooltip'>\n          Hover me\n        </Button>\n        <Tooltip target={secondTooltipButton} id='second-tooltip'>\n          This is a tooltip for the second button.\n        </Tooltip>\n        <Button ref={setThirdTooltipButton} aria-describedby='third-tooltip'>\n          Hover me\n        </Button>\n        <Tooltip target={thirdTooltipButton} id='third-tooltip'>\n          This is a tooltip for the third button.\n        </Tooltip>\n      </div>\n      <Text variant='h2'>No groupId</Text>\n      <div>\n        <Button ref={setFirstPopoverButton} onClick={() => setShowFirstPopover(curr => !curr)}>\n          Click me\n        </Button>\n        <Popover show={showFirstPopover} target={firstPopoverButton}>\n          <Card>\n            <CardContent>\n              <Text>Popover #1</Text>\n            </CardContent>\n          </Card>\n        </Popover>\n        <Button ref={setSecondPopoverButton} onClick={() => setShowSecondPopover(curr => !curr)}>\n          Click me\n        </Button>\n        <Popover show={showSecondPopover} target={secondPopoverButton}>\n          <Card>\n            <CardContent>\n              <Text>Popover #2</Text>\n            </CardContent>\n          </Card>\n        </Popover>\n        <Button ref={setThirdPopoverButton} onClick={() => setShowThirdPopover(curr => !curr)}>\n          Click me\n        </Button>\n        <Popover show={showThirdPopover} target={thirdPopoverButton}>\n          <Card>\n            <CardContent>\n              <Text>Popover #3</Text>\n            </CardContent>\n          </Card>\n        </Popover>\n      </div>\n    </Flex>\n  );\n};\n\nPopoverGroups.argTypes = {\n  arrow: { table: { disable: true } },\n  showDelay: { table: { disable: true } },\n  hideDelay: { table: { disable: true } },\n  placement: { table: { disable: true } }\n};\n\nexport const PlaceAndContain: StoryFn<\n  PlaceAndContainMockProps & { placement?: never; showDelay?: never; hideDelay?: never }\n> = (args: PlaceAndContainMockProps) => {\n  return (\n    <PlaceAndContainMock\n      {...args}\n      arrow={args.arrow}\n      primaryPlacement={args.primaryPlacement}\n      secondaryPlacement={args.secondaryPlacement}\n      contentSize={args.contentSize}\n    />\n  );\n};\n\nPlaceAndContain.args = {\n  arrow: false,\n  primaryPlacement: 'bottom',\n  secondaryPlacement: 'none',\n  contentSize: 15\n};\n\nPlaceAndContain.argTypes = {\n  arrow: { control: { type: 'boolean' } },\n  primaryPlacement: {\n    control: { type: 'select' },\n    options: ['bottom', 'top', 'left', 'right', 'none']\n  },\n  secondaryPlacement: {\n    control: { type: 'select' },\n    options: ['none', 'start', 'end']\n  },\n  contentSize: {\n    control: { type: 'range', min: 1, max: 30, step: 1 }\n  },\n  placement: { table: { disable: true } },\n  showDelay: { table: { disable: true } },\n  hideDelay: { table: { disable: true } }\n};\n"]}

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

@@ -1,2 +0,0 @@
-export declare const loadingTimeoutMS = 2000;
-//# sourceMappingURL=Progress.mocks.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"Progress.mocks.d.ts","sourceRoot":"","sources":["../../../src/core/Progress/Progress.mocks.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,gBAAgB,OAAO,CAAC"}

package/jsx/core/Progress/Progress.mocks.js

@@ -1,2 +0,0 @@
-export const loadingTimeoutMS = 2000;
-//# sourceMappingURL=Progress.mocks.js.map

package/jsx/core/Progress/Progress.mocks.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Progress.mocks.js","sourceRoot":"","sources":["../../../src/core/Progress/Progress.mocks.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,gBAAgB,GAAG,IAAI,CAAC","sourcesContent":["export const loadingTimeoutMS = 2000;\n"]}

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

@@ -1,16 +0,0 @@
-import type { StoryFn } from '@storybook/react';
-import type { ProgressProps } 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 ProgressDemoProps extends ProgressProps {
-    announce?: boolean;
-    determinate?: boolean;
-    focusOnVisible?: boolean;
-    cycleProp?: 'none' | 'value' | 'message' | 'visible';
-}
-export declare const ProgressDemo: StoryFn<ProgressDemoProps>;
-interface ConfigurableProgressProps extends ProgressProps {
-    progressColor?: string;
-}
-export declare const ConfigurableProgress: StoryFn<ConfigurableProgressProps>;
-//# sourceMappingURL=Progress.stories.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"Progress.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Progress/Progress.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAGtD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;;AAK7D,wBA0BU;AAEV,UAAU,iBAAkB,SAAQ,aAAa;IAC/C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,CAAC;CACtD;AAED,eAAO,MAAM,YAAY,EAAE,OAAO,CAAC,iBAAiB,CAqFnD,CAAC;AAEF,UAAU,yBAA0B,SAAQ,aAAa;IACvD,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,eAAO,MAAM,oBAAoB,EAAE,OAAO,CAAC,yBAAyB,CAkBnE,CAAC"}

package/jsx/core/Progress/Progress.stories.jsx

@@ -1,124 +0,0 @@
-import { useEffect, useMemo, useState } from 'react';
-import { Configuration, Flex, Progress, Text } from '@pega/cosmos-react-core';
-import { StyledDemoWrap } from './Progress.styles';
-import { loadingTimeoutMS } from './Progress.mocks';
-export default {
-    title: 'Core/Progress',
-    component: Progress,
-    excludeStories: ['ConfigurableProgress'],
-    args: {
-        variant: 'ring',
-        placement: 'local',
-        message: '',
-        determinate: false,
-        value: 67,
-        focusOnVisible: false,
-        visible: true,
-        announce: false,
-        cycleProp: 'none'
-    },
-    argTypes: {
-        variant: { options: ['ring', 'bar', 'ellipsis'], control: { type: 'select' } },
-        placement: { options: ['local', 'global', 'block', 'inline'], control: { type: 'select' } },
-        message: { control: { type: 'text' } },
-        focusOnVisible: { control: { type: 'boolean' } },
-        determinate: { control: { type: 'boolean' } },
-        value: { control: { type: 'number' } },
-        visible: { control: { type: 'boolean' } },
-        announce: { control: { type: 'boolean' } },
-        cycleProp: { control: { type: 'select' }, options: ['none', 'value', 'message', 'visible'] }
-    }
-};
-export const ProgressDemo = (args) => {
-    const cycling = args.cycleProp !== 'none';
-    const [visible, setVisible] = useState(args.visible);
-    const [value, setValue] = useState(args.value ?? 0);
-    const messages = ['Loading', 'Getting ready', 'Working on your request', 'Resolving content'];
-    const [messageIndex, setMessageIndex] = useState(0);
-    const message = useMemo(() => {
-        if (args.cycleProp === 'message') {
-            return messages[messageIndex];
-        }
-        return args.message;
-    }, [args.cycleProp, args.message, messageIndex]);
-    useEffect(() => {
-        if (args.cycleProp !== 'value') {
-            setValue(args.value ?? 0);
-        }
-    }, [args.cycleProp, args.value]);
-    useEffect(() => {
-        if (args.cycleProp !== 'visible') {
-            setVisible(args.visible);
-        }
-    }, [args.cycleProp, args.visible]);
-    useEffect(() => {
-        if (args.cycleProp === 'none')
-            return;
-        const timeout = setTimeout(() => {
-            switch (args.cycleProp) {
-                case 'message': {
-                    if (messageIndex < messages.length - 1)
-                        setMessageIndex(messageIndex + 1);
-                    else
-                        setMessageIndex(0);
-                    break;
-                }
-                case 'value': {
-                    if (value < 100)
-                        setValue(Math.min(value + 10, 100));
-                    else
-                        setValue(0);
-                    break;
-                }
-                case 'visible': {
-                    setVisible(!visible);
-                    break;
-                }
-                default:
-                    break;
-            }
-        }, loadingTimeoutMS);
-        if (!cycling) {
-            clearTimeout(timeout);
-        }
-        return () => clearTimeout(timeout);
-    }, [args.cycleProp, message, visible, value, cycling]);
-    return (<Flex container={{ direction: 'column', gap: 1 }}>
-      <Text variant='h1'>Demo Content</Text>
-
-      <StyledDemoWrap>
-        {['block', 'local'].includes(args.placement || '') && (<Text>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
-            incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
-            exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
-            dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
-            mollit anim id est laborum.
-          </Text>)}
-        {args.placement === 'inline' && <Text>Progress demo </Text>}
-        <Progress variant={args.variant} placement={args.placement} message={message} value={args.determinate || args.cycleProp === 'value' ? value : undefined} visible={visible} focusOnVisible={args.focusOnVisible} liveConfig={args.announce ? { contextualLabel: 'Demo' } : undefined}/>
-      </StyledDemoWrap>
-    </Flex>);
-};
-export const ConfigurableProgress = (args) => {
-    return (<Configuration theme={{
-            components: {
-                progress: {
-                    'progress-color': args.progressColor
-                }
-            }
-        }}>
-      <Flex container={{ justify: 'center', alignItems: 'center' }} as={StyledDemoWrap}>
-        <Progress variant={args.variant} placement='local' message='Loading' visible/>
-      </Flex>
-    </Configuration>);
-};
-ConfigurableProgress.args = {
-    progressColor: '#076bc9'
-};
-ConfigurableProgress.argTypes = {
-    progressColor: { control: { type: 'color' } },
-    placement: { table: { disable: true } },
-    message: { table: { disable: true } }
-};
-//# sourceMappingURL=Progress.stories.jsx.map

package/jsx/core/Progress/Progress.stories.jsx.map

@@ -1 +0,0 @@
-{"version":3,"file":"Progress.stories.jsx","sourceRoot":"","sources":["../../../src/core/Progress/Progress.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAGrD,OAAO,EAAE,aAAa,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAG9E,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAEpD,eAAe;IACb,KAAK,EAAE,eAAe;IACtB,SAAS,EAAE,QAAQ;IACnB,cAAc,EAAE,CAAC,sBAAsB,CAAC;IACxC,IAAI,EAAE;QACJ,OAAO,EAAE,MAAM;QACf,SAAS,EAAE,OAAO;QAClB,OAAO,EAAE,EAAE;QACX,WAAW,EAAE,KAAK;QAClB,KAAK,EAAE,EAAE;QACT,cAAc,EAAE,KAAK;QACrB,OAAO,EAAE,IAAI;QACb,QAAQ,EAAE,KAAK;QACf,SAAS,EAAE,MAAM;KAClB;IACD,QAAQ,EAAE;QACR,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,MAAM,EAAE,KAAK,EAAE,UAAU,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;QAC9E,SAAS,EAAE,EAAE,OAAO,EAAE,CAAC,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;QAC3F,OAAO,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;QACtC,cAAc,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;QAChD,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;QAC7C,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;QACtC,OAAO,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;QACzC,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;QAC1C,SAAS,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,OAAO,EAAE,CAAC,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,CAAC,EAAE;KAC7F;CACM,CAAC;AASV,MAAM,CAAC,MAAM,YAAY,GAA+B,CAAC,IAAuB,EAAE,EAAE;IAClF,MAAM,OAAO,GAAG,IAAI,CAAC,SAAS,KAAK,MAAM,CAAC;IAC1C,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IACrD,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,CAAC,CAAC;IACpD,MAAM,QAAQ,GAAG,CAAC,SAAS,EAAE,eAAe,EAAE,yBAAyB,EAAE,mBAAmB,CAAC,CAAC;IAC9F,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IACpD,MAAM,OAAO,GAAG,OAAO,CAAC,GAAG,EAAE;QAC3B,IAAI,IAAI,CAAC,SAAS,KAAK,SAAS,EAAE;YAChC,OAAO,QAAQ,CAAC,YAAY,CAAC,CAAC;SAC/B;QAED,OAAO,IAAI,CAAC,OAAO,CAAC;IACtB,CAAC,EAAE,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC,CAAC;IAEjD,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,IAAI,CAAC,SAAS,KAAK,OAAO,EAAE;YAC9B,QAAQ,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,CAAC,CAAC;SAC3B;IACH,CAAC,EAAE,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;IAEjC,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,IAAI,CAAC,SAAS,KAAK,SAAS,EAAE;YAChC,UAAU,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;SAC1B;IACH,CAAC,EAAE,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC;IAEnC,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,IAAI,CAAC,SAAS,KAAK,MAAM;YAAE,OAAO;QAEtC,MAAM,OAAO,GAAG,UAAU,CAAC,GAAG,EAAE;YAC9B,QAAQ,IAAI,CAAC,SAAS,EAAE;gBACtB,KAAK,SAAS,CAAC,CAAC;oBACd,IAAI,YAAY,GAAG,QAAQ,CAAC,MAAM,GAAG,CAAC;wBAAE,eAAe,CAAC,YAAY,GAAG,CAAC,CAAC,CAAC;;wBACrE,eAAe,CAAC,CAAC,CAAC,CAAC;oBACxB,MAAM;iBACP;gBACD,KAAK,OAAO,CAAC,CAAC;oBACZ,IAAI,KAAK,GAAG,GAAG;wBAAE,QAAQ,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,GAAG,EAAE,EAAE,GAAG,CAAC,CAAC,CAAC;;wBAChD,QAAQ,CAAC,CAAC,CAAC,CAAC;oBACjB,MAAM;iBACP;gBACD,KAAK,SAAS,CAAC,CAAC;oBACd,UAAU,CAAC,CAAC,OAAO,CAAC,CAAC;oBACrB,MAAM;iBACP;gBACD;oBACE,MAAM;aACT;QACH,CAAC,EAAE,gBAAgB,CAAC,CAAC;QAErB,IAAI,CAAC,OAAO,EAAE;YACZ,YAAY,CAAC,OAAO,CAAC,CAAC;SACvB;QAED,OAAO,GAAG,EAAE,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;IACrC,CAAC,EAAE,CAAC,IAAI,CAAC,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC;IAEvD,OAAO,CACL,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC,CAC/C;MAAA,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,YAAY,EAAE,IAAI,CAErC;;MAAA,CAAC,cAAc,CACb;QAAA,CAAC,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,SAAS,IAAI,EAAE,CAAC,IAAI,CACpD,CAAC,IAAI,CACH;;;;;;;UAMF,EAAE,IAAI,CAAC,CACR,CACD;QAAA,CAAC,IAAI,CAAC,SAAS,KAAK,QAAQ,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE,IAAI,CAAC,CAC3D;QAAA,CAAC,QAAQ,CACP,OAAO,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CACtB,SAAS,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAC1B,OAAO,CAAC,CAAC,OAAO,CAAC,CACjB,KAAK,CAAC,CAAC,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,SAAS,KAAK,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAC1E,OAAO,CAAC,CAAC,OAAO,CAAC,CACjB,cAAc,CAAC,CAAC,IAAI,CAAC,cAAc,CAAC,CACpC,UAAU,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,eAAe,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,EAExE;MAAA,EAAE,cAAc,CAClB;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC;AAMF,MAAM,CAAC,MAAM,oBAAoB,GAAuC,CACtE,IAA+B,EAC/B,EAAE;IACF,OAAO,CACL,CAAC,aAAa,CACZ,KAAK,CAAC,CAAC;YACL,UAAU,EAAE;gBACV,QAAQ,EAAE;oBACR,gBAAgB,EAAE,IAAI,CAAC,aAAa;iBACrC;aACF;SACF,CAAC,CAEF;MAAA,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,cAAc,CAAC,CAC/E;QAAA,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,SAAS,CAAC,OAAO,CAAC,OAAO,CAAC,SAAS,CAAC,OAAO,EAC9E;MAAA,EAAE,IAAI,CACR;IAAA,EAAE,aAAa,CAAC,CACjB,CAAC;AACJ,CAAC,CAAC;AAEF,oBAAoB,CAAC,IAAI,GAAG;IAC1B,aAAa,EAAE,SAAS;CACzB,CAAC;AAEF,oBAAoB,CAAC,QAAQ,GAAG;IAC9B,aAAa,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE;IAC7C,SAAS,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;IACvC,OAAO,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;CACtC,CAAC","sourcesContent":["import { useEffect, useMemo, useState } from 'react';\nimport type { Meta, StoryFn } from '@storybook/react';\n\nimport { Configuration, Flex, Progress, Text } from '@pega/cosmos-react-core';\nimport type { ProgressProps } from '@pega/cosmos-react-core';\n\nimport { StyledDemoWrap } from './Progress.styles';\nimport { loadingTimeoutMS } from './Progress.mocks';\n\nexport default {\n  title: 'Core/Progress',\n  component: Progress,\n  excludeStories: ['ConfigurableProgress'],\n  args: {\n    variant: 'ring',\n    placement: 'local',\n    message: '',\n    determinate: false,\n    value: 67,\n    focusOnVisible: false,\n    visible: true,\n    announce: false,\n    cycleProp: 'none'\n  },\n  argTypes: {\n    variant: { options: ['ring', 'bar', 'ellipsis'], control: { type: 'select' } },\n    placement: { options: ['local', 'global', 'block', 'inline'], control: { type: 'select' } },\n    message: { control: { type: 'text' } },\n    focusOnVisible: { control: { type: 'boolean' } },\n    determinate: { control: { type: 'boolean' } },\n    value: { control: { type: 'number' } },\n    visible: { control: { type: 'boolean' } },\n    announce: { control: { type: 'boolean' } },\n    cycleProp: { control: { type: 'select' }, options: ['none', 'value', 'message', 'visible'] }\n  }\n} as Meta;\n\ninterface ProgressDemoProps extends ProgressProps {\n  announce?: boolean;\n  determinate?: boolean;\n  focusOnVisible?: boolean;\n  cycleProp?: 'none' | 'value' | 'message' | 'visible';\n}\n\nexport const ProgressDemo: StoryFn<ProgressDemoProps> = (args: ProgressDemoProps) => {\n  const cycling = args.cycleProp !== 'none';\n  const [visible, setVisible] = useState(args.visible);\n  const [value, setValue] = useState(args.value ?? 0);\n  const messages = ['Loading', 'Getting ready', 'Working on your request', 'Resolving content'];\n  const [messageIndex, setMessageIndex] = useState(0);\n  const message = useMemo(() => {\n    if (args.cycleProp === 'message') {\n      return messages[messageIndex];\n    }\n\n    return args.message;\n  }, [args.cycleProp, args.message, messageIndex]);\n\n  useEffect(() => {\n    if (args.cycleProp !== 'value') {\n      setValue(args.value ?? 0);\n    }\n  }, [args.cycleProp, args.value]);\n\n  useEffect(() => {\n    if (args.cycleProp !== 'visible') {\n      setVisible(args.visible);\n    }\n  }, [args.cycleProp, args.visible]);\n\n  useEffect(() => {\n    if (args.cycleProp === 'none') return;\n\n    const timeout = setTimeout(() => {\n      switch (args.cycleProp) {\n        case 'message': {\n          if (messageIndex < messages.length - 1) setMessageIndex(messageIndex + 1);\n          else setMessageIndex(0);\n          break;\n        }\n        case 'value': {\n          if (value < 100) setValue(Math.min(value + 10, 100));\n          else setValue(0);\n          break;\n        }\n        case 'visible': {\n          setVisible(!visible);\n          break;\n        }\n        default:\n          break;\n      }\n    }, loadingTimeoutMS);\n\n    if (!cycling) {\n      clearTimeout(timeout);\n    }\n\n    return () => clearTimeout(timeout);\n  }, [args.cycleProp, message, visible, value, cycling]);\n\n  return (\n    <Flex container={{ direction: 'column', gap: 1 }}>\n      <Text variant='h1'>Demo Content</Text>\n\n      <StyledDemoWrap>\n        {['block', 'local'].includes(args.placement || '') && (\n          <Text>\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor\n            incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud\n            exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure\n            dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt\n            mollit anim id est laborum.\n          </Text>\n        )}\n        {args.placement === 'inline' && <Text>Progress demo </Text>}\n        <Progress\n          variant={args.variant}\n          placement={args.placement}\n          message={message}\n          value={args.determinate || args.cycleProp === 'value' ? value : undefined}\n          visible={visible}\n          focusOnVisible={args.focusOnVisible}\n          liveConfig={args.announce ? { contextualLabel: 'Demo' } : undefined}\n        />\n      </StyledDemoWrap>\n    </Flex>\n  );\n};\n\ninterface ConfigurableProgressProps extends ProgressProps {\n  progressColor?: string;\n}\n\nexport const ConfigurableProgress: StoryFn<ConfigurableProgressProps> = (\n  args: ConfigurableProgressProps\n) => {\n  return (\n    <Configuration\n      theme={{\n        components: {\n          progress: {\n            'progress-color': args.progressColor\n          }\n        }\n      }}\n    >\n      <Flex container={{ justify: 'center', alignItems: 'center' }} as={StyledDemoWrap}>\n        <Progress variant={args.variant} placement='local' message='Loading' visible />\n      </Flex>\n    </Configuration>\n  );\n};\n\nConfigurableProgress.args = {\n  progressColor: '#076bc9'\n};\n\nConfigurableProgress.argTypes = {\n  progressColor: { control: { type: 'color' } },\n  placement: { table: { disable: true } },\n  message: { table: { disable: true } }\n};\n"]}

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

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"Progress.styles.d.ts","sourceRoot":"","sources":["../../../src/core/Progress/Progress.styles.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,cAAc,yGASzB,CAAC"}

package/jsx/core/Progress/Progress.styles.js

@@ -1,14 +0,0 @@
-import styled, { css } from 'styled-components';
-import { defaultThemeProp } from '@pega/cosmos-react-core';
-export const StyledDemoWrap = styled.div(({ theme }) => {
-    return css `
-    position: relative;
-    width: 50vw;
-    min-height: 15vh;
-    background: ${theme.base.palette['primary-background']};
-    border: 0.0625rem solid ${theme.base.palette['border-line']};
-    padding: calc(2 * ${theme.base.spacing});
-  `;
-});
-StyledDemoWrap.defaultProps = defaultThemeProp;
-//# sourceMappingURL=Progress.styles.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"Progress.styles.js","sourceRoot":"","sources":["../../../src/core/Progress/Progress.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAE3D,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACrD,OAAO,GAAG,CAAA;;;;kBAIM,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC;8BAC5B,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;wBACvC,KAAK,CAAC,IAAI,CAAC,OAAO;GACvC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,cAAc,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '@pega/cosmos-react-core';\n\nexport const StyledDemoWrap = styled.div(({ theme }) => {\n  return css`\n    position: relative;\n    width: 50vw;\n    min-height: 15vh;\n    background: ${theme.base.palette['primary-background']};\n    border: 0.0625rem solid ${theme.base.palette['border-line']};\n    padding: calc(2 * ${theme.base.spacing});\n  `;\n});\n\nStyledDemoWrap.defaultProps = defaultThemeProp;\n"]}

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

@@ -1,9 +0,0 @@
-import type { StoryFn } from '@storybook/react';
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
-export default _default;
-interface QRCodeDemoProps {
-    value: string;
-    label: string;
-}
-export declare const QRCodeDemo: StoryFn<QRCodeDemoProps>;
-//# sourceMappingURL=QRCode.stories.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"QRCode.stories.d.ts","sourceRoot":"","sources":["../../../src/core/QRCode/QRCode.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;;AAItD,wBAWU;AAEV,UAAU,eAAe;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,UAAU,EAAE,OAAO,CAAC,eAAe,CAE/C,CAAC"}

package/jsx/core/QRCode/QRCode.stories.jsx

@@ -1,17 +0,0 @@
-import { QRCode } from '@pega/cosmos-react-core';
-export default {
-    title: 'Core/QRCode',
-    component: QRCode,
-    args: {
-        value: 'QRCode Demo',
-        label: 'QRCode'
-    },
-    argTypes: {
-        value: { type: 'string' },
-        label: { type: 'string' }
-    }
-};
-export const QRCodeDemo = (args) => {
-    return <QRCode value={args.value} label={args.label}/>;
-};
-//# sourceMappingURL=QRCode.stories.jsx.map